/* ============================================
   CUSTOM SVG ICON SYSTEM
   Replaces Apple emojis with cross-platform SVGs
   ============================================ */
.ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.ic--lg {
  width: 1.25em;
  height: 1.25em;
}
.ic--xl {
  width: 2.5rem;
  height: 2.5rem;
}
.ic--2x {
  width: 2rem;
  height: 2rem;
}

/* ============================================
   ACTION CARDS
   Maps to: <ActionCard /> component
   ============================================ */
.action-card {
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  position: relative;
}

.action-card:hover {
  transform: none;
  box-shadow: none;
}

.action-card__image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.action-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.action-card:hover .action-card__image img {
  transform: scale(1.05);
}

.action-card__type-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
  line-height: 1;
}

/* ── Core cause-supporting actions (distinct colors) ── */
.action-card__type-badge--petition { background: rgba(99, 102, 241, 0.92); color: #fff; } /* indigo — advocacy */
.action-card__type-badge--donate { background: rgba(236, 72, 153, 0.92); color: #fff; } /* pink — giving */
.action-card__type-badge--discover { background: rgba(14, 165, 233, 0.92); color: #fff; } /* sky — learning */
.action-card__type-badge--watch { background: rgba(14, 165, 233, 0.92); color: #fff; } /* sky — learning */
.action-card__type-badge--listen { background: rgba(14, 165, 233, 0.92); color: #fff; } /* sky — learning */
.action-card__type-badge--survey { background: rgba(14, 165, 233, 0.92); color: #fff; } /* sky — learning */
.action-card__type-badge--register { background: rgba(245, 158, 11, 0.92); color: #fff; } /* amber — civic */
.action-card__type-badge--volunteer { background: rgba(34, 197, 94, 0.92); color: #fff; } /* green — action */
.action-card__type-badge--pledge { background: rgba(99, 102, 241, 0.92); color: #fff; } /* indigo — commitment */
.action-card__type-badge--rsvp { background: rgba(59, 130, 246, 0.92); color: #fff; } /* blue — attend */
.action-card__type-badge--join { background: rgba(34, 197, 94, 0.92); color: #fff; } /* green — action */

/* ── Civic / advocacy actions ── */
.action-card__type-badge--email-rep { background: rgba(99, 102, 241, 0.92); color: #fff; }
.action-card__type-badge--call-rep { background: rgba(99, 102, 241, 0.92); color: #fff; }
.action-card__type-badge--boycott-pledge { background: rgba(239, 68, 68, 0.92); color: #fff; }
.action-card__type-badge--mutual-aid { background: rgba(236, 72, 153, 0.92); color: #fff; }

/* ── Quick engagement actions ── */
.action-card__type-badge--poll { background: rgba(245, 158, 11, 0.92); color: #fff; }
.action-card__type-badge--quiz { background: rgba(245, 158, 11, 0.92); color: #fff; }
.action-card__type-badge--swipe { background: rgba(245, 158, 11, 0.92); color: #fff; }
.action-card__type-badge--share { background: rgba(107, 114, 128, 0.88); color: #fff; }
.action-card__type-badge--share-post { background: rgba(107, 114, 128, 0.88); color: #fff; }
.action-card__type-badge--tweet { background: rgba(0, 0, 0, 0.85); color: #fff; }

/* ── Social platform actions ── */
.action-card__type-badge--yt-subscribe { background: rgba(255, 0, 0, 0.9); color: #fff; }
.action-card__type-badge--x-follow { background: rgba(0, 0, 0, 0.85); color: #fff; }
.action-card__type-badge--spotify-follow { background: rgba(29, 185, 84, 0.92); color: #fff; }
.action-card__type-badge--spotify-playlist { background: rgba(29, 185, 84, 0.92); color: #fff; }
.action-card__type-badge--tiktok-follow { background: rgba(0, 0, 0, 0.85); color: #fff; }
.action-card__type-badge--instagram { background: linear-gradient(135deg, rgba(131,58,180,0.92), rgba(253,29,29,0.92), rgba(252,176,69,0.92)); color: #fff; }
.action-card__type-badge--follow { background: rgba(107, 114, 128, 0.88); color: #fff; }

/* ── Gamification / engagement loop ── */
.action-card__type-badge--daily-checkin { background: rgba(255, 107, 53, 0.92); color: #fff; }
.action-card__type-badge--refer { background: rgba(34, 197, 94, 0.92); color: #fff; }
.action-card__type-badge--scan-qr { background: rgba(0, 0, 0, 0.85); color: #fff; }
.action-card__type-badge--photo-challenge { background: rgba(168, 85, 247, 0.92); color: #fff; }
.action-card__type-badge--location-checkin { background: rgba(59, 130, 246, 0.92); color: #fff; }
.action-card__type-badge--matching { background: rgba(245, 158, 11, 0.92); color: #fff; }
.action-card__type-badge--comment { background: rgba(107, 114, 128, 0.88); color: #fff; }
.action-card__type-badge--upvote { background: rgba(34, 197, 94, 0.92); color: #fff; }
.action-card__type-badge--team-challenge { background: rgba(59, 130, 246, 0.92); color: #fff; }
.action-card__type-badge--check-in { background: rgba(59, 130, 246, 0.92); color: #fff; }

/* ── Onboarding / meta actions ── */
.action-card__type-badge--enable-push { background: rgba(245, 158, 11, 0.92); color: #fff; }
.action-card__type-badge--profile-complete { background: rgba(168, 85, 247, 0.92); color: #fff; }
.action-card__type-badge--user-content { background: rgba(168, 85, 247, 0.92); color: #fff; }

/* ── Sweeps / monthly (usually hidden, but just in case) ── */
.action-card__type-badge--sweepstakes { background: rgba(245, 158, 11, 0.92); color: #fff; }
.action-card__type-badge--monthly { background: rgba(236, 72, 153, 0.92); color: #fff; }

.action-card__points-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

.action-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.action-card__org {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.action-card__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  letter-spacing: normal;
}

.action-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.action-card__cause {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-card__participants {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: auto;
}

.action-card__cta {
  margin-top: var(--space-sm);
  padding: 8px 20px;
  background: #111111;
  color: #ffffff;
  border-radius: 30px;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  transition: all var(--duration-fast);
  display: inline-block;
}

.action-card:hover .action-card__cta {
  background: #3d3d3d;
}

/* Action Grid */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.action-grid--full {
  grid-template-columns: repeat(3, 1fr);
}

/* Featured large cards - span 2 columns for bigger visual impact */
.action-card--featured {
  grid-column: span 2;
}

.action-card--featured .action-card__image {
  aspect-ratio: 16 / 8;
}

.action-card--featured .action-card__image img {
  height: 100%;
  object-fit: cover;
}

.action-card--featured .action-card__title {
  font-size: 20px;
}

@media (max-width: 900px) {
  .action-grid, .action-grid--full { grid-template-columns: repeat(2, 1fr); }
  .action-card--featured { grid-column: span 2; }
}

@media (max-width: 580px) {
  .action-grid, .action-grid--full { grid-template-columns: 1fr; gap: 12px; }
  .action-card--featured { grid-column: span 1; }
  .action-card__body { padding: 16px; }
}

/* ============================================
   ACTIONS PAGE - Search, For You, Layout
   ============================================ */

/* Search Bar */
.actions-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 12px 20px;
  margin: 0 auto var(--space-xl);
  max-width: 600px;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.actions-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.actions-search__icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.actions-search:focus-within .actions-search__icon {
  color: var(--accent);
}
.actions-search__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--text-primary);
  font-family: var(--font-body);
}
.actions-search__input::placeholder {
  color: var(--text-muted);
}
.actions-search__count {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 600;
  white-space: nowrap;
}
.actions-search__clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 50%;
  transition: background 0.15s;
}
.actions-search__clear:hover {
  background: var(--border);
  color: var(--text-primary);
}

/* Search Results */
.actions-search-results {
  padding: var(--space-xl) 0 var(--space-2xl);
}
.actions-search-results__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
}
.actions-search-empty {
  text-align: center;
  padding: 60px 20px;
  grid-column: 1 / -1;
}
.actions-search-empty__text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.actions-search-empty__hint {
  font-size: 14px;
  color: var(--text-muted);
}

/* For You Section */
.actions-foryou {
  padding: var(--space-lg) 0 var(--space-xl);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-lg);
}
.actions-foryou__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: var(--space-lg);
}
.actions-foryou__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #ff8fab, #ff4081);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
}
.actions-foryou__sub {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}
/* Compact cards inside Recommended For You */
.actions-section--recommended .action-card__title {
  font-size: 15px !important;
  margin-bottom: 4px;
}
.actions-section--recommended .action-card__desc,
.actions-section--recommended .action-card__stats,
.actions-section--recommended .action-card__cta {
  display: none !important;
}
.actions-section--recommended .action-card__body {
  padding: 12px 14px 14px;
}

/* Actions Feed (legacy - kept for compatibility) */
.actions-feed {
  padding: var(--space-xl) 0 var(--space-2xl);
}
.actions-feed__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: var(--space-lg);
}
.actions-feed__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.actions-feed__count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================
   ACTIONS PAGE - Type Filter Pills
   ============================================ */
.type-filters-wrap {
  padding: 0 0 var(--space-md);
  border-bottom: 1px solid var(--border);
}
.type-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
 -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
}
.type-filters::-webkit-scrollbar { display: none; }

.type-pill {
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.type-pill:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}
.type-pill--active {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

/* ============================================
   ACTIONS PAGE - Sectioned Layout
   ============================================ */
.actions-section {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border);
}
.actions-section:last-child {
  border-bottom: none;
  padding-bottom: var(--space-2xl);
}

.actions-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-lg);
}

.actions-section__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}

.actions-section__title--gradient {
  background: linear-gradient(135deg, #ff8fab, #ff4081);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
}

.actions-section__sub {
  font-size: 14px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.4;
}

.actions-section__see-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
  padding-top: 4px;
  transition: opacity 0.15s;
}
.actions-section__see-all:hover {
  opacity: 0.7;
}

/* Section grids */
.actions-section__grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.actions-section__grid--3col .action-card {
  grid-column: span 1 !important;
}
.actions-section__grid--3col .action-card__image {
  aspect-ratio: 16 / 9;
}
.actions-section__grid--3col .action-card__desc {
  display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
}
.actions-section__grid--3col .action-card__title {
  font-size: 15px !important;
}

@media (max-width: 900px) {
  .actions-section__grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .actions-section__grid--3col { grid-template-columns: 1fr; }
  .actions-section__title { font-size: 18px; }
}

/* ============================================
   HORIZONTAL SCROLL STRIP (Quick Wins)
   ============================================ */
.actions-hscroll {
  overflow-x: auto;
 -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 var(--space-sm);
}
.actions-hscroll::-webkit-scrollbar { display: none; }

.actions-hscroll__track {
  display: flex;
  gap: var(--space-md);
  padding: 0 max(var(--space-lg), calc((100vw - 1200px) / 2 + var(--space-lg)));
}

/* Compact action card for horizontal strip */
.action-card--compact {
  min-width: 260px;
  max-width: 280px;
  flex-shrink: 0;
}
.action-card--compact .action-card__image {
  aspect-ratio: 16 / 10;
}
.action-card--compact .action-card__body {
  padding: var(--space-md);
  gap: var(--space-xs);
}
.action-card--compact .action-card__title {
  font-size: 14px !important;
  display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
  overflow: hidden;
}
.action-card--compact .action-card__desc {
  display: none;
}
.action-card--compact .action-card__meta {
  display: none;
}
.action-card--compact .action-card__cta {
  font-size: 12px;
  padding: 6px 16px;
}

/* ============================================
   REWARD CARDS
   Maps to: <RewardCard /> component
   ============================================ */
.reward-card {
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.reward-card:hover {
  transform: none;
  box-shadow: none;
}

.reward-card__brand {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reward-card__image {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-tertiary);
  position: relative;
}

.reward-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.reward-card__sweep-badge {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 3px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reward-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.reward-card__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
}

.reward-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xs);
}

.reward-card__price {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.reward-card__points {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--green);
  background: var(--green-soft);
  padding: 3px 8px;
  border-radius: 3px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.reward-card__cta {
  margin-top: var(--space-sm);
  padding: 8px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hover);
  transition: all var(--duration-fast);
}

.reward-card:hover .reward-card__cta {
  border-color: var(--accent);
  color: var(--accent);
}

/* Locked reward cards - non-Premier */
.reward-card--locked { position: relative; }
.reward-card--locked .reward-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
  pointer-events: none;
}
.reward-card__lock-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}
.reward-card__cta--locked {
  background: #111;
  color: #fff;
  border-color: #111;
  font-size: var(--text-xs);
}
.reward-card--locked:hover .reward-card__cta--locked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Custom lock icon (inline SVG - replaces Apple emoji) */
.lock-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  fill: currentColor;
}
.lock-icon--lg {
  width: 1.2em;
  height: 1.2em;
}
.lock-icon--xl {
  width: 48px;
  height: 48px;
}
.dd__stat-value .lock-icon {
  width: 0.7em;
  height: 0.7em;
  opacity: 0.6;
}

/* Rewards page Premier upsell banner */
.rewards-premier-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: #111;
  color: #fff;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}
.rewards-premier-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.rewards-premier-banner__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.rewards-premier-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.rewards-premier-banner__text strong {
  font-size: var(--text-base);
}
.rewards-premier-banner__text span {
  opacity: 0.7;
}
@media (max-width: 640px) {
  .rewards-premier-banner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
    padding: var(--space-lg);
  }
  .rewards-premier-banner__content {
    flex-direction: column;
  }
}

/* Reward detail Premier gate */
.rdp__premier-gate {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background: #f8f8f8;
  border: 2px solid #eee;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.rdp__premier-gate-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.rdp__premier-gate-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.rdp__premier-gate-text strong {
  display: block;
  font-size: var(--text-lg);
  margin-bottom: 4px;
}
.rdp__premier-gate-text p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}
.rdp__cta--premier {
  background: #111;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: var(--text-base);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: background var(--duration-fast);
}
.rdp__cta--premier:hover {
  background: var(--accent);
}

/* Tour detail locked CTA */
.tour-detail__cta--locked {
  background: #111;
  color: #fff;
  cursor: pointer;
}
.tour-detail__cta--locked:hover {
  background: var(--accent);
}

/* Rewards Grid - 3-col to fit alongside sidebar */
.rewards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .rewards-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
}

@media (max-width: 640px) {
  .rewards-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 400px) {
  .rewards-grid { grid-template-columns: 1fr; }
}

/* ============================================
   DASHBOARD DARK - Nike-inspired dark mode stats
   ============================================ */
.dashboard-dark {
  background: #111;
  color: #fff;
  padding: var(--space-2xl) 0 var(--space-3xl);
}

/* Impact header - avatar + title */
.dd__impact-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.dd__impact-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}

.dd__impact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dd__greeting {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  margin-bottom: 4px;
}

.dd__greeting-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
}

/* Big stat grid - Nike scale */
.dd__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  margin-bottom: var(--space-2xl);
}

.dd__stat {
  background: #111;
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dd__stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
}

.dd__stat-value {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 900;
  color: #fff;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.dd__stat-unit {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  margin-left: 4px;
  letter-spacing: 0;
  text-transform: lowercase;
}

.dd__stat-trend {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
}

.dd__stat-trend--up {
  color: #00D68F;
}

/* Premier upsell cell */
.dd__stat--premier-cta {
  cursor: pointer;
  transition: background var(--duration-fast);
}

.dd__stat--premier-cta:hover {
  background: rgba(255,255,255,0.04);
}

.dd__stat-value--lock {
  font-size: clamp(2.5rem, 5vw, 4rem);
  opacity: 0.3;
}

.dd__stat-trend--cta {
  color: #F59E0B;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Daily actions - dark mode */
.dd__daily {
  max-width: 100%;
}

.dd__daily-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.dd__daily-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
}

.dd__daily-count {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

.dd__daily-list {
  display: flex;
  flex-direction: column;
}

.dd__daily-item {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.dd__daily-item:first-child {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.dd__daily-item:hover {
  padding-left: var(--space-sm);
}

.dd__daily-check {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: transparent;
}

.dd__daily-item--done .dd__daily-check {
  background: #fff;
  border-color: #fff;
  color: #111;
  font-weight: 800;
}

.dd__daily-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dd__daily-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
}

.dd__daily-item--done .dd__daily-text {
  text-decoration: line-through;
  color: rgba(255,255,255,0.45);
}

.dd__daily-sub {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
}

.dd__daily-item--done .dd__daily-sub {
  color: rgba(255,255,255,0.3);
}

.dd__daily-pts {
  font-size: var(--text-base);
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-display);
}

.dd__daily-item--done .dd__daily-pts {
  color: rgba(255,255,255,0.2);
}

.dd__daily-bonus {
  margin-top: var(--space-md);
  padding: var(--space-md) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.dd__daily-bonus-label { color: rgba(255,255,255,0.55); }
.dd__daily-bonus-value {
  font-weight: 700;
  color: #fff;
  font-family: var(--font-display);
}

/* Responsive */
@media (max-width: 900px) {
  .dd__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dd__stat-value {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }
  .dd__stat {
    padding: var(--space-lg) var(--space-md);
  }
  .dd__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .dd__stats {
    grid-template-columns: 1fr;
  }
  .dd__stat {
    padding: var(--space-md);
  }
  .dd__stat-value {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* ============================================
   CLUB CARDS
   Maps to: <ClubCard /> component
   ============================================ */
/* ---- Club Grid ---- */
/* Home page clubs - horizontal scroll carousel (Nike "Shop by Sport") */
.club-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-md);
}

.club-grid::-webkit-scrollbar { display: none; }

.club-grid .club-card {
  flex: 0 0 calc(33.333% - 8px);
  scroll-snap-align: start;
  min-width: 280px;
}

/* Clubs page grid - standard grid layout */
.club-grid--full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  overflow-x: visible;
  scroll-snap-type: none;
}

.club-grid--full .club-card {
  flex: none;
  min-width: unset;
}

@media (max-width: 1100px) {
  .club-grid .club-card { flex: 0 0 calc(50% - 6px); }
  .club-grid--full { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .club-grid .club-card { flex: 0 0 85%; }
  .club-grid--full { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .club-grid--full { grid-template-columns: 1fr; }
}

/* ---- Club Card - tall portrait format ---- */
.club-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  background: transparent;
  border: none;
}

.club-card:hover {
  transform: none;
  box-shadow: none;
}

/* -- Image area: Nike-tall portrait -- */
.club-card__image {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
  background: #f5f5f5;
}

.club-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.club-card:hover .club-card__image img {
  transform: scale(1.06);
}

/* -- Gradient overlay -- */
.club-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 35%, transparent 55%);
}

/* -- Cause badge -- */
.club-card__cause-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  z-index: 3;
}

/* -- Joined badge -- */
.club-card__joined {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: #128a09;
  padding: 5px 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}

.club-card__joined svg {
  width: 12px;
  height: 12px;
}

/* -- Body: content at bottom -- */
.club-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  color: #fff;
  z-index: 2;
}

.club-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 4px;
}

.club-card__tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

/* -- Artist line -- */
.club-card__artist {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

.club-card__artist-name {
  color: rgba(255,255,255,0.85);
}

/* -- Footer: members + price -- */
.club-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.club-card__members {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

.club-card__price {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
}

.club-card__stats {
  display: none;
}

/* ---- Branded card: colored bg + logo ---- */
.club-card__image--branded {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--club-color, #333);
  position: relative;
  overflow: hidden;
}

.club-card__image--branded::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
    linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.15) 100%);
}

.club-card__image--branded .club-card__brand-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  padding: var(--space-lg);
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.club-card__image--branded .club-card__logo {
  position: relative;
  z-index: 2;
  width: 70%;
  height: auto;
  max-height: 50%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform var(--duration-slow) var(--ease-out);
}

.club-card:hover .club-card__image--branded .club-card__logo {
  transform: scale(1.06);
}

.club-card__image--branded:has(.club-card__logo) .club-card__brand-name {
  display: none;
}

.club-card__image--branded img:not(.club-card__logo) {
  display: none;
}

.club-card__image--branded .club-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 30%, transparent 50%);
}

/* ============================================
   SWEEP PAGE COMPONENTS
   Maps to: <SweepDetail />, <SweepEntry />, <DonationAmount />
   ============================================ */
.sweep__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding-top: var(--space-xl);
}

@media (max-width: 768px) {
  .sweep__layout { grid-template-columns: 1fr; }
}

.sweep__gallery {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.sweep__gallery-main {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.sweep__gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sweep__gallery-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.sweep__gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  transition: all var(--duration-fast);
  cursor: pointer;
}

.sweep__gallery-dot--active { background: var(--accent); width: 24px; }

.sweep__timer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  margin-top: var(--space-lg);
}

.sweep__timer-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
  display: block;
}

.sweep__timer-digits {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  align-items: center;
}

.sweep__timer-block { text-align: center; }

.sweep__timer-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-primary);
}

.sweep__timer-unit {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.sweep__timer-sep {
  font-size: var(--text-2xl);
  color: var(--text-muted);
  font-weight: 300;
}

.sweep__badge { margin-bottom: var(--space-md); }

.sweep__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.sweep__nonprofit {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

.sweep__nonprofit strong { color: var(--accent); }

.sweep__package {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.sweep__package-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.sweep__package-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.sweep__package-list li:last-child { border-bottom: none; }

.sweep__entry {
  margin-bottom: var(--space-xl);
}

.sweep__entry-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.sweep__entry-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.sweep__entry-type {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}

.sweep__entry-org {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.sweep__entry-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.sweep__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  transition: all var(--duration-fast);
  position: relative;
}

.sweep__amount span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.sweep__amount em {
  position: absolute;
  top: -8px;
  right: -4px;
  padding: 2px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  background: var(--yellow);
  color: #000;
  border-radius: 3px;
}

.sweep__amount:hover,
.sweep__amount--selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sweep__amount--popular {
  border-color: var(--accent);
}

.sweep__enter-btn { margin-bottom: var(--space-md); }

.sweep__legal {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
}

.sweep__legal a {
  color: var(--accent);
  text-decoration: underline;
}

.sweep__social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sweep__social-avatars {
  display: flex;
}

.sweep__social-avatars img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-primary);
  margin-left: -8px;
}

.sweep__social-avatars img:first-child { margin-left: 0; }

.sweep__social-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================
   TIER CARDS (Premier)
   Maps to: <TierCard /> component
   ============================================ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .tier-grid { grid-template-columns: 1fr; max-width: 400px; }
}

.tier-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}

.tier-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.tier-card--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  transform: scale(1.02);
}

.tier-card--featured:hover {
  transform: scale(1.02) translateY(-4px);
}

.tier-card__popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--gradient-primary);
  color: white;
  border-radius: 3px;
  white-space: nowrap;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.tier-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
  display: block;
}

.tier-card__price {
  margin-bottom: var(--space-md);
}

.tier-card__amount {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
}

.tier-card__period {
  font-size: var(--text-base);
  color: var(--text-tertiary);
}

.tier-card__savings {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 3px;
  margin-bottom: var(--space-lg);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.tier-card__perks {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.tier-card__perks li {
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 24px;
}

.tier-card__perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

.tier-card__perks li:last-child { border-bottom: none; }

/* Boost Card */
.boost-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 700px;
  margin: var(--space-2xl) auto 0;
}

@media (max-width: 580px) {
  .boost-card {
    flex-direction: column;
    text-align: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
  }
}

.boost-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.boost-card__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.boost-card__action {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.boost-card__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--yellow);
}

/* ============================================
   IMPACT CARDS
   Maps to: <ImpactCard /> component
   ============================================ */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

@media (max-width: 768px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .impact-grid { grid-template-columns: 1fr; }
}

.impact-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
}

.impact-card__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--pink);
 -webkit-text-fill-color: var(--pink);
  margin-bottom: var(--space-xs);
}

.impact-card__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Cause Bars */
.cause-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 700px;
}

.cause-bar__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.cause-bar__name { font-size: var(--text-sm); font-weight: 500; }
.cause-bar__count { font-size: var(--text-sm); color: var(--text-tertiary); font-weight: 600; }

.cause-bar__track {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.cause-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1.5s var(--ease-out);
}

/* ============================================
   LEADERBOARD
   Maps to: <Leaderboard />, <LeaderboardEntry />
   ============================================ */
.leaderboard__tabs {
  margin-bottom: var(--space-xl);
  display: flex;
  gap: var(--space-xs);
}

.leaderboard__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 700px;
  margin: 0 auto;
}

.leaderboard-entry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast);
}

.leaderboard-entry:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.leaderboard-entry--top {
  border-color: var(--yellow);
  background: var(--yellow-soft);
}

.leaderboard-entry__rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.leaderboard-entry--top .leaderboard-entry__rank {
  color: var(--yellow);
}

.leaderboard-entry__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.leaderboard-entry__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaderboard-entry__info { flex: 1; }

.leaderboard-entry__name {
  font-weight: 600;
  font-size: var(--text-sm);
}

.leaderboard-entry__level {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.leaderboard-entry__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--accent);
}

/* ============================================
   FEATURED EDITORIAL - Discover actions (Nike editorial style)
   ============================================ */
.featured-editorial {
  padding: var(--space-3xl) 0;
}

.featured-editorial__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 0 var(--space-lg);
}

.editorial-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/5;
}

.editorial-card:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}

.editorial-card__image {
  position: absolute;
  inset: 0;
}

.editorial-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.editorial-card:hover .editorial-card__image img {
  transform: scale(1.03);
}

.editorial-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 40%, transparent 60%);
}

.editorial-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  z-index: 2;
  color: #fff;
}

.editorial-card__org {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-xs);
}

.editorial-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
  max-width: 480px;
}

.editorial-card:first-child .editorial-card__title {
  font-size: clamp(1.5rem, 3vw, 3rem);
}

.editorial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.editorial-card__cta {
  display: inline-block;
  padding: 8px 24px;
  background: #fff;
  color: #111;
  border-radius: 30px;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--duration-fast);
}

.editorial-card:hover .editorial-card__cta {
  background: #e5e5e5;
}

.editorial-card__pts {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
}

@media (max-width: 768px) {
  .featured-editorial__grid {
    grid-template-columns: 1fr;
  }
  .editorial-card:first-child {
    grid-column: 1;
    aspect-ratio: 3/4;
  }
  .editorial-card { aspect-ratio: 3/4; }
}

/* ============================================
   IMPACT BANNER (Home page)
   ============================================ */
.impact-banner {
  padding: var(--space-3xl) 0;
  background: #111;
}

.impact-banner__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.impact-banner__stat { text-align: center; }

.impact-banner__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.impact-banner__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.impact-banner__divider {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.1);
}

@media (max-width: 640px) {
  .impact-banner__inner { gap: var(--space-xl); }
  .impact-banner__divider { display: none; }
  .impact-banner__number { font-size: clamp(2rem, 8vw, 2.5rem); }
}

/* ============================================
   PREMIER CTA (Home page)
   ============================================ */
.premier-cta {
  padding: var(--space-4xl) 0;
}

.premier-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

@media (max-width: 768px) {
  .premier-cta__inner { flex-direction: column; text-align: center; }
}

.premier-cta__badge { margin-bottom: var(--space-md); }

.premier-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-md);
}

.premier-cta__text {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
}

.premier-cta__price {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-xl);
}

.premier-cta__price strong { color: var(--text-primary); font-size: var(--text-lg); }

.premier-cta__visual { flex-shrink: 0; }

.premier-cta__card {
  width: 200px;
  height: 260px;
  background: #111111;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
}

.premier-cta__card-glow {
  display: none;
}

.premier-cta__card-logo { width: 60px; height: 60px; position: relative; color: #fff; }
.premier-cta__card-logo path { stroke: #fff; }

.premier-cta__card-text {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 900;
  color: #ffffff;
 -webkit-text-fill-color: #ffffff;
  position: relative;
}

/* ============================================
   REWARDS BALANCE
   ============================================ */
.rewards-balance {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.rewards-balance__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.rewards-balance__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--accent);
}

/* ============================================
   SWEEP CARDS (List Page)
   Maps to: <SweepCard /> in sweepstakes browse
   ============================================ */
.sweep-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .sweep-cards { grid-template-columns: 1fr; }
}

.sweep-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.sweep-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.sweep-card__image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.sweep-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.sweep-card:hover .sweep-card__image img {
  transform: scale(1.05);
}

.sweep-card__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
  pointer-events: none;
}

.sweep-card__urgent {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #ff3b30;
  color: #fff;
  border-radius: 2px;
  animation: urgentPulse 2s ease infinite;
}

@keyframes urgentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.sweep-card__cause {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 2px;
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

.sweep-card__arv {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sweep-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sweep-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sweep-card__artist {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sweep-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-top: 2px;
}

.sweep-card__org {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.sweep-card__org strong { color: var(--text-primary); }

.sweep-card__impact {
  margin-top: var(--space-sm);
}

.sweep-card__impact-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.sweep-card__impact-fill {
  height: 100%;
  background: var(--text-primary);
  border-radius: 2px;
  transition: width 1s ease;
}

.sweep-card__impact-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.sweep-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xs);
  font-size: 11px;
  color: var(--text-tertiary);
}

.sweep-card__entries { font-weight: 600; }

.sweep-card__time {
  font-weight: 700;
  color: var(--text-secondary);
}

.sweep-card__time--urgent {
  color: #ff3b30;
  font-weight: 800;
}

.sweep-card__cta {
  margin-top: var(--space-md);
  padding: 14px;
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s;
}

.sweep-card__cta:hover { background: #222; }
.sweep-card:hover .sweep-card__cta { background: #111; }

/* ============================================
   SWEEP ARV BADGE (Detail Page)
   ============================================ */
.sweep__arv-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--yellow-soft);
  color: #000;
  border: 1px solid var(--yellow);
  border-radius: 3px;
  margin-bottom: var(--space-lg);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

/* ============================================
   PORTAL EVENT CARDS
   ============================================ */
.portal-event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .portal-event-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .portal-event-grid { grid-template-columns: 1fr; }
}

.portal-event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.portal-event-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.portal-event-card__image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.portal-event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portal-event-card__date {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 3px;
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
}

.portal-event-card__body {
  padding: var(--space-md);
}

.portal-event-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.portal-event-card__location {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.portal-event-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ============================================
   PORTAL ARTICLE CARDS
   ============================================ */
.portal-article-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .portal-article-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .portal-article-grid { grid-template-columns: 1fr; }
}

.portal-article-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}

.portal-article-card:hover {
  border-color: #b388ff;
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(179, 136, 255, 0.15);
}

.portal-article-card__image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.portal-article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portal-article-card__pts {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: rgba(0, 0, 0, 0.75);
  color: var(--yellow);
  border-radius: 3px;
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
}

.portal-article-card__body {
  padding: var(--space-md);
}

.portal-article-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--space-xs);
}

.portal-article-card__time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ============================================
   PROFILE HEADER
   ============================================ */
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.profile-header__avatar {
  position: relative;
  flex-shrink: 0;
}

.profile-header__avatar img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 3px solid var(--pink);
  object-fit: cover;
}

.profile-header__avatar-upload {
  position: absolute;
  top: 0;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  border: 2px solid var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.profile-header__avatar:hover .profile-header__avatar-upload {
  opacity: 1;
}

.profile-header__level-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  background: var(--pink);
  color: #fff;
  border-radius: 3px;
  white-space: nowrap;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-header__info {
  flex: 1;
  min-width: 200px;
}

.profile-header__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.profile-header__email {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.profile-header__member {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.profile-header__causes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.profile-header__stats {
  display: flex;
  gap: var(--space-xl);
}

.profile-stat {
  text-align: center;
}

.profile-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
}

.profile-stat__label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 640px) {
  .profile-header { flex-direction: column; text-align: center; }
  .profile-header__info { text-align: center; }
  .profile-header__causes { justify-content: center; }
  .profile-header__stats { justify-content: center; }
}

/* ============================================
   CAUSE TAGS (Profile)
   ============================================ */
.cause-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--bg-tertiary);
  border-radius: 3px;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* ============================================
   PROFILE TABS
   ============================================ */
.profile-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-sm);
}

/* ============================================
   BADGE CARDS (Profile > Badges Tab)
   ============================================ */
/* Badges Summary Bar */
.badges-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.badges-summary__count {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badges-summary__rarity {
  display: flex;
  gap: 8px;
}
.badges-summary__rarity-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badges-summary__rarity-tag--legendary { background: linear-gradient(135deg, #ffd200, #f7971e); color: #000; }
.badges-summary__rarity-tag--epic { background: linear-gradient(135deg, #ee2c67, #ff6b9d); color: #fff; }
.badges-summary__rarity-tag--rare { background: linear-gradient(135deg, #5cdb95, #4dd0e1); color: #000; }
.badges-summary__rarity-tag--common { background: var(--bg-secondary); color: var(--text-secondary); }

/* Badge Grid - Pinned-up poster wall, slightly chaotic */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px;
  padding: 8px;
}

/* ═══════════════════════════════════════════════════════════
   BADGE CARD — LURK & DESTROY SCREEN-PRINT GIG POSTER ART
   Cream/paper stock. 2-3 spot colors. Heavy halftone dots.
   Bold flat ink. Visible print texture. Hand-drawn energy.
   ═══════════════════════════════════════════════════════════ */
.badge-card {
  --badge-g3: var(--badge-g1);
  position: relative;
  overflow: hidden;
  /* CREAM PAPER STOCK — the soul of screen printing */
  background: var(--badge-bg, #F5F0E8);
  border: 5px solid var(--badge-g2, #1A1A2E);
  border-radius: 0;
  padding: 0;
  text-align: center;
  cursor: default;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 6px 0 rgba(0,0,0,0.3);
}

/* Imperfect tilt — every card slightly different, like pinned posters */
.badge-card:nth-child(1)  { transform: rotate(-2.2deg); }
.badge-card:nth-child(2)  { transform: rotate(1.5deg); }
.badge-card:nth-child(3)  { transform: rotate(-0.8deg); }
.badge-card:nth-child(4)  { transform: rotate(2.5deg); }
.badge-card:nth-child(5)  { transform: rotate(-1.4deg); }
.badge-card:nth-child(6)  { transform: rotate(0.9deg); }
.badge-card:nth-child(7)  { transform: rotate(-2.8deg); }
.badge-card:nth-child(8)  { transform: rotate(0.6deg); }
.badge-card:nth-child(9)  { transform: rotate(2.0deg); }
.badge-card:nth-child(10) { transform: rotate(-1.2deg); }

.badge-card:hover {
  transform: rotate(0deg) translateY(-10px) scale(1.08) !important;
  box-shadow: 8px 12px 0 rgba(0,0,0,0.4);
  z-index: 2;
}

/* ── STARBURST — heavy flat ink rays, screen-print style ── */
.badge-card__burst {
  position: absolute;
  inset: -80%;
  background:
    repeating-conic-gradient(
      from 0deg,
      var(--badge-g1) 0deg 4deg,
      transparent 4deg 10deg,
      var(--badge-g2) 10deg 13deg,
      transparent 13deg 20deg
    );
  opacity: 0.12;
  pointer-events: none;
}
/* Misregistered second ink pass — shifted for print effect */
.badge-card__burst::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    repeating-conic-gradient(
      from 7deg,
      var(--badge-g1) 0deg 3deg,
      transparent 3deg 12deg,
      var(--badge-g2) 12deg 14deg,
      transparent 14deg 24deg
    );
  opacity: 0.07;
  mix-blend-mode: multiply;
}
.badge-card:hover .badge-card__burst { opacity: 0.18; }

/* Legendary: bolder rays */
.badge-card--legendary .badge-card__burst { opacity: 0.18; inset: -100%; }
/* Epic */
.badge-card--epic .badge-card__burst { opacity: 0.15; }

/* ── HALFTONE + GRAIN — HEAVY visible screen-print texture ── */
.badge-card__noise {
  position: absolute;
  inset: 0;
  opacity: 1;
  mix-blend-mode: multiply;
  /* BIG visible halftone dot grid — the Lurk&Destroy signature */
  background-image:
    radial-gradient(circle, var(--badge-g1) 1px, transparent 1px),
    radial-gradient(circle, var(--badge-g2) 0.6px, transparent 0.6px);
  background-size: 6px 6px, 10px 10px;
  background-position: 0 0, 3px 3px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
}
/* Paper grain — subtle fibrous texture */
.badge-card__noise::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
/* Subtle aged edge burn */
.badge-card__noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(139,119,90,0.12) 100%);
  pointer-events: none;
}

/* ── REGISTRATION MARKS — screen-print corner crosshairs ── */
.badge-card__reg-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.35;
}
.badge-card__reg-marks::before,
.badge-card__reg-marks::after {
  content: '⊕';
  position: absolute;
  font-size: 9px;
  font-weight: 300;
  color: var(--badge-g2);
  line-height: 1;
}
.badge-card__reg-marks::before { top: 3px; left: 4px; }
.badge-card__reg-marks::after { bottom: 3px; right: 4px; }
.badge-card--legendary .badge-card__reg-marks { opacity: 0.5; }

/* ── BORDER RING — flat ink inner frame, off-register ghost ── */
.badge-card__border-ring {
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 2px solid var(--badge-g1);
  border-radius: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.35;
}
/* Misregistered ghost ring — shifted, different color */
.badge-card__border-ring::before {
  content: '';
  position: absolute;
  top: -3px; left: -4px; right: -3px; bottom: -4px;
  border: 1.5px solid var(--badge-g2);
  opacity: 0.2;
}
/* Third ring */
.badge-card__border-ring::after {
  content: '';
  position: absolute;
  top: 2px; left: 3px; right: 2px; bottom: 3px;
  border: 1px solid var(--badge-g1);
  opacity: 0.15;
}
.badge-card--legendary .badge-card__border-ring {
  border-width: 3px;
  opacity: 0.5;
}

/* ── CONTENT LAYER ── */
.badge-card__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 16px 14px 14px;
  gap: 2px;
}

/* ── RARITY STARS — flat ink, no glow ── */
.badge-card__rarity-stars {
  font-size: 13px;
  letter-spacing: 8px;
  color: var(--badge-g1);
  min-height: 16px;
  opacity: 0.8;
}
.badge-card--legendary .badge-card__rarity-stars {
  font-size: 16px;
  letter-spacing: 10px;
  opacity: 1;
}

/* ── ICON — bold flat ink, no glow, screen-print halo ring ── */
.badge-card__icon-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 4px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Outer ring — flat ink circle, slightly rough edge */
.badge-card__icon-wrap::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--badge-g1);
  opacity: 0.3;
}
/* Inner ring — second ink pass, off-register */
.badge-card__icon-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--badge-g2);
  opacity: 0.2;
}
.badge-card__icon {
  position: relative;
  z-index: 1;
  color: var(--badge-g1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.badge-card__icon svg {
  width: 48px;
  height: 48px;
}
.badge-card:hover .badge-card__icon {
  transform: scale(1.15) rotate(-4deg);
}
.badge-card--legendary .badge-card__icon svg { width: 54px; height: 54px; }
.badge-card--legendary .badge-card__icon-wrap::before {
  border-width: 4px;
  opacity: 0.45;
}

/* ── BADGE NAME — BOLD FLAT INK, screen-print type ── */
.badge-card__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.05;
  color: var(--badge-g2);
  margin: 0;
  padding: 0 6px;
}
.badge-card--legendary .badge-card__name { font-size: 17px; letter-spacing: 0.18em; color: var(--badge-g1); }
.badge-card--epic .badge-card__name { font-size: 16px; color: var(--badge-g1); }

/* ── DIVIDER — thick flat ink stroke ── */
.badge-card__divider {
  width: 70%;
  height: 2px;
  margin: 6px auto;
  background: var(--badge-g1);
  opacity: 0.3;
  position: relative;
}
.badge-card__divider::after {
  content: '';
  position: absolute;
  top: 4px; left: 5%; right: 8%;
  height: 1px;
  background: var(--badge-g2);
  opacity: 0.15;
}
.badge-card--legendary .badge-card__divider { height: 3px; opacity: 0.45; width: 75%; }

/* ── DESCRIPTION — muted ink type ── */
.badge-card__desc {
  font-size: 10px;
  color: var(--badge-g2);
  line-height: 1.3;
  margin: 0;
  font-style: italic;
  max-width: 88%;
  opacity: 0.55;
}

/* ── STAT PILL — flat ink ticket stub with punch holes ── */
.badge-card__stat {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 18px;
  border-radius: 0;
  background: var(--badge-g1);
  color: var(--badge-bg, #F5F0E8);
  margin-top: 6px;
  position: relative;
}
/* Ticket punch holes */
.badge-card__stat::before,
.badge-card__stat::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--badge-bg, #F5F0E8);
  transform: translateY(-50%);
}
.badge-card__stat::before { left: -3px; }
.badge-card__stat::after { right: -3px; }

/* ── DATE — stamped ink ── */
.badge-card__date {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--badge-g2);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: auto;
  padding-top: 5px;
  opacity: 0.4;
}

/* ── RARITY LABEL — diagonal ink stamp ── */
.badge-card__rarity-label {
  position: absolute;
  bottom: 12px; right: -20px;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 3px 30px;
  background: var(--badge-g1);
  color: var(--badge-bg, #F5F0E8);
  transform: rotate(-45deg);
  transform-origin: center;
  z-index: 4;
  opacity: 0.8;
}
.badge-card--legendary .badge-card__rarity-label { opacity: 1; background: var(--badge-g2); }
.badge-card--epic .badge-card__rarity-label { opacity: 0.9; }
.badge-card--common .badge-card__rarity-label { opacity: 0.45; }

/* ══════════════════════════════════════════
   RARITY TIERS — screen-print ink density
   ══════════════════════════════════════════ */

/* Legendary: heaviest ink coverage, extra border, bolder everything */
.badge-card--legendary {
  border-color: var(--badge-g2);
  border-width: 6px;
  box-shadow: 5px 8px 0 rgba(0,0,0,0.35);
}
.badge-card--legendary:hover {
  box-shadow: 10px 14px 0 rgba(0,0,0,0.4);
}

/* Epic: bold ink, thick border */
.badge-card--epic {
  border-width: 5px;
  box-shadow: 4px 7px 0 rgba(0,0,0,0.3);
}
.badge-card--epic:hover {
  box-shadow: 9px 12px 0 rgba(0,0,0,0.35);
}

/* Rare: medium ink density */
.badge-card--rare {
  border-width: 4px;
  box-shadow: 3px 5px 0 rgba(0,0,0,0.25);
}

/* Common: lightest ink, worn look */
.badge-card--common {
  border-width: 3px;
  border-color: color-mix(in srgb, var(--badge-g2) 60%, #999);
  opacity: 0.88;
  box-shadow: 3px 4px 0 rgba(0,0,0,0.2);
}
.badge-card--common .badge-card__burst { opacity: 0.06; }
.badge-card--common .badge-card__icon svg { width: 42px; height: 42px; }
.badge-card--common:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   PER-BADGE PATTERN LAYER — SCREEN-PRINT POSTER STYLE
   Flat ink on cream paper. No glow, no gradients, no neon.
   Each badge = a hand-pulled spot-color gig poster.
   ═══════════════════════════════════════════════════════════ */
.badge-card__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  mix-blend-mode: multiply;
}

/* DECO — large stamped ink symbol, visible grain */
.badge-card__deco {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 140px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
  color: var(--badge-g2);
  line-height: 1;
  letter-spacing: -10px;
  filter: none;
  mix-blend-mode: multiply;
}

/* ── THEME: STARBURST (Early Adopter) — massive ink starburst ── */
.badge-card--theme-starburst .badge-card__pattern {
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      var(--badge-g1) 0deg 4deg,
      transparent 4deg 8deg,
      var(--badge-g2) 8deg 10deg,
      transparent 10deg 14deg
    );
  opacity: 0.12;
}
.badge-card--theme-starburst .badge-card__pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%,
    var(--badge-bg) 0%, var(--badge-bg) 20%, transparent 55%
  );
}
.badge-card--theme-starburst .badge-card__deco {
  font-size: 180px;
  opacity: 0.08;
  color: var(--badge-g1);
}
[data-badge="b1"] .badge-card__icon { color: #D4380D; }
[data-badge="b1"] .badge-card__name { color: #1A1A2E; }
[data-badge="b1"] .badge-card__stat { background: #D4380D; color: #F5F0E8; }
[data-badge="b1"] .badge-card__stat::before,
[data-badge="b1"] .badge-card__stat::after { border-color: #D4380D; }
[data-badge="b1"] .badge-card__divider { background: #1A1A2E; }
[data-badge="b1"] .badge-card__border-ring { border-color: #D4380D; border-width: 3px; }
[data-badge="b1"] .badge-card__rarity-label { background: #1A1A2E; color: #F5F0E8; }

/* ── THEME: ZIGZAG (Century Club) — bold diagonal stripe field ── */
.badge-card--theme-zigzag .badge-card__pattern {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--badge-g1) 0px,
      var(--badge-g1) 3px,
      transparent 3px,
      transparent 10px,
      var(--badge-g2) 10px,
      var(--badge-g2) 12px,
      transparent 12px,
      transparent 20px
    );
  opacity: 0.1;
}
.badge-card--theme-zigzag .badge-card__deco {
  font-size: 120px;
  opacity: 0.07;
  color: var(--badge-g1);
}
[data-badge="b2"] .badge-card__icon { color: #E91E90; }
[data-badge="b2"] .badge-card__name { color: #1B4D6E; }
[data-badge="b2"] .badge-card__stat { background: #1B4D6E; color: #F2EDE4; }
[data-badge="b2"] .badge-card__stat::before,
[data-badge="b2"] .badge-card__stat::after { border-color: #1B4D6E; }
[data-badge="b2"] .badge-card__divider { background: #E91E90; }
[data-badge="b2"] .badge-card__border-ring { border-color: #E91E90; border-style: dashed; border-width: 2px; }
[data-badge="b2"] .badge-card__rarity-label { background: #E91E90; color: #F2EDE4; }

/* ── THEME: DRIP (Streak Master) — concentric circle rings ── */
.badge-card--theme-drip .badge-card__pattern {
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0px,
      transparent 18px,
      var(--badge-g1) 18px,
      var(--badge-g1) 20px,
      transparent 20px,
      transparent 36px,
      var(--badge-g2) 36px,
      var(--badge-g2) 37px,
      transparent 37px,
      transparent 54px
    );
  opacity: 0.1;
}
.badge-card--theme-drip .badge-card__deco {
  font-size: 100px;
  opacity: 0.07;
  color: var(--badge-g1);
}
[data-badge="b3"] .badge-card__icon { color: #E8590C; }
[data-badge="b3"] .badge-card__name { color: #2D3436; }
[data-badge="b3"] .badge-card__stat { background: #E8590C; color: #F5F0E8; }
[data-badge="b3"] .badge-card__stat::before,
[data-badge="b3"] .badge-card__stat::after { border-color: #E8590C; }
[data-badge="b3"] .badge-card__divider { background: #2D3436; height: 3px; }
[data-badge="b3"] .badge-card__border-ring { border-color: #2D3436; border-width: 3px; }
[data-badge="b3"] .badge-card__rarity-label { background: #2D3436; color: #F5F0E8; }

/* ── THEME: RIPPLE (Big Heart) — large halftone dots ── */
.badge-card--theme-ripple .badge-card__pattern {
  background:
    radial-gradient(circle, var(--badge-g1) 2.5px, transparent 2.5px);
  background-size: 12px 12px;
  opacity: 0.15;
}
.badge-card--theme-ripple .badge-card__pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, var(--badge-g2) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  background-position: 6px 6px;
  opacity: 0.5;
}
.badge-card--theme-ripple .badge-card__deco {
  font-size: 220px;
  opacity: 0.05;
  color: var(--badge-g1);
}
[data-badge="b4"] .badge-card__icon { color: #C0392B; }
[data-badge="b4"] .badge-card__name { color: #2C2C54; }
[data-badge="b4"] .badge-card__stat { background: #2C2C54; color: #F0EBE3; }
[data-badge="b4"] .badge-card__stat::before,
[data-badge="b4"] .badge-card__stat::after { border-color: #2C2C54; }
[data-badge="b4"] .badge-card__divider { background: #C0392B; }
[data-badge="b4"] .badge-card__border-ring { border-color: #C0392B; border-width: 3px; }
[data-badge="b4"] .badge-card__rarity-label { background: #C0392B; color: #F0EBE3; }

/* ── THEME: WAVES (Petition Pro) — horizontal rule lines ── */
.badge-card--theme-waves .badge-card__pattern {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 7px,
      var(--badge-g1) 7px,
      var(--badge-g1) 8px,
      transparent 8px,
      transparent 15px
    );
  opacity: 0.1;
}
.badge-card--theme-waves .badge-card__pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 40px,
      var(--badge-g2) 40px,
      var(--badge-g2) 41px,
      transparent 41px,
      transparent 80px
    );
  opacity: 0.4;
}
.badge-card--theme-waves .badge-card__deco {
  font-size: 100px;
  opacity: 0.06;
  color: var(--badge-g1);
}
[data-badge="b5"] .badge-card__icon { color: #00897B; }
[data-badge="b5"] .badge-card__name { color: #1A1A2E; }
[data-badge="b5"] .badge-card__stat { background: #00897B; color: #EDF5F0; }
[data-badge="b5"] .badge-card__stat::before,
[data-badge="b5"] .badge-card__stat::after { border-color: #00897B; }
[data-badge="b5"] .badge-card__divider { background: #1A1A2E; }
[data-badge="b5"] .badge-card__border-ring { border-color: #1A1A2E; border-width: 2px; }
[data-badge="b5"] .badge-card__rarity-label { background: #1A1A2E; color: #EDF5F0; }

/* ── THEME: DIAMONDS (Community Builder) — diamond checkerboard ── */
.badge-card--theme-diamonds .badge-card__pattern {
  background:
    linear-gradient(45deg,
      var(--badge-g1) 25%, transparent 25%, transparent 50%,
      var(--badge-g1) 50%, var(--badge-g1) 75%, transparent 75%, transparent
    ),
    linear-gradient(-45deg,
      var(--badge-g2) 25%, transparent 25%, transparent 50%,
      var(--badge-g2) 50%, var(--badge-g2) 75%, transparent 75%, transparent
    );
  background-size: 16px 16px;
  opacity: 0.08;
}
.badge-card--theme-diamonds .badge-card__deco {
  font-size: 160px;
  opacity: 0.06;
  color: var(--badge-g1);
}
[data-badge="b6"] .badge-card__icon { color: #6C3483; }
[data-badge="b6"] .badge-card__name { color: #1A1A2E; }
[data-badge="b6"] .badge-card__stat { background: #6C3483; color: #F3EEF5; }
[data-badge="b6"] .badge-card__stat::before,
[data-badge="b6"] .badge-card__stat::after { border-color: #6C3483; }
[data-badge="b6"] .badge-card__divider { background: #1A1A2E; }
[data-badge="b6"] .badge-card__border-ring { border-color: #6C3483; border-style: dotted; border-width: 3px; }
[data-badge="b6"] .badge-card__rarity-label { background: #1A1A2E; color: #F3EEF5; }

/* ── THEME: RAINBOW (Propeller Premier) — heavy overprint starburst + stripes ── */
.badge-card--theme-rainbow .badge-card__pattern {
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      var(--badge-g1) 0deg 5deg,
      transparent 5deg 10deg,
      var(--badge-g2) 10deg 13deg,
      transparent 13deg 18deg
    );
  opacity: 0.1;
}
.badge-card--theme-rainbow .badge-card__pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--badge-g2) 0px, var(--badge-g2) 2px,
      transparent 2px, transparent 8px
    );
  opacity: 0.5;
}
.badge-card--theme-rainbow .badge-card__deco {
  font-size: 120px;
  opacity: 0.07;
  color: var(--badge-g1);
}
[data-badge="b7"] .badge-card__icon { color: #CB2D3E; }
[data-badge="b7"] .badge-card__name { color: #1A1A2E; font-size: 18px; }
[data-badge="b7"] .badge-card__stat { background: #CB2D3E; color: #F5F0E8; }
[data-badge="b7"] .badge-card__stat::before,
[data-badge="b7"] .badge-card__stat::after { border-color: #CB2D3E; }
[data-badge="b7"] .badge-card__divider { background: #EF8E38; height: 3px; }
[data-badge="b7"] .badge-card__border-ring { border-color: #CB2D3E; border-width: 4px; }
[data-badge="b7"] .badge-card__rarity-label { background: #EF8E38; color: #1A1A2E; }
[data-badge="b7"] .badge-card__icon svg { width: 56px; height: 56px; }

/* ── THEME: FLAMES (On Fire) — scattered ink dots ── */
.badge-card--theme-flames .badge-card__pattern {
  background:
    radial-gradient(circle, var(--badge-g1) 1.5px, transparent 1.5px);
  background-size: 8px 14px;
  opacity: 0.12;
}
.badge-card--theme-flames .badge-card__pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, var(--badge-g2) 1px, transparent 1px);
  background-size: 14px 8px;
  background-position: 4px 4px;
  opacity: 0.6;
}
.badge-card--theme-flames .badge-card__deco {
  font-size: 80px;
  opacity: 0.06;
  color: var(--badge-g1);
}
[data-badge="b8"] .badge-card__icon { color: #D35400; }
[data-badge="b8"] .badge-card__name { color: #7F4A26; }
[data-badge="b8"] .badge-card__stat { background: #7F4A26; color: #F5F0E8; }
[data-badge="b8"] .badge-card__stat::before,
[data-badge="b8"] .badge-card__stat::after { border-color: #7F4A26; }
[data-badge="b8"] .badge-card__divider { background: #D35400; }
[data-badge="b8"] .badge-card__border-ring { border-color: #D35400; border-width: 2px; }
[data-badge="b8"] .badge-card__rarity-label { background: #D35400; color: #F5F0E8; }

/* ── THEME: ORGANIC (Planet Defender) — vertical lines + organic circles ── */
.badge-card--theme-organic .badge-card__pattern {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 11px,
      var(--badge-g1) 11px,
      var(--badge-g1) 12px,
      transparent 12px,
      transparent 24px
    );
  opacity: 0.1;
}
.badge-card--theme-organic .badge-card__pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 35%, var(--badge-g2) 0%, var(--badge-g2) 30px, transparent 30px),
    radial-gradient(circle at 75% 65%, var(--badge-g2) 0%, var(--badge-g2) 22px, transparent 22px);
  opacity: 0.06;
}
.badge-card--theme-organic .badge-card__deco {
  font-size: 160px;
  opacity: 0.05;
  color: var(--badge-g1);
}
[data-badge="b9"] .badge-card__icon { color: #27AE60; }
[data-badge="b9"] .badge-card__name { color: #1A4731; }
[data-badge="b9"] .badge-card__stat { background: #1A4731; color: #EDF5ED; }
[data-badge="b9"] .badge-card__stat::before,
[data-badge="b9"] .badge-card__stat::after { border-color: #1A4731; }
[data-badge="b9"] .badge-card__divider { background: #27AE60; }
[data-badge="b9"] .badge-card__border-ring { border-color: #27AE60; border-width: 2px; }
[data-badge="b9"] .badge-card__rarity-label { background: #27AE60; color: #EDF5ED; }

/* ── THEME: ELECTRIC (Voice of Change) — fine crosshatch grid ── */
.badge-card--theme-electric .badge-card__pattern {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 5px,
      var(--badge-g1) 5px, var(--badge-g1) 6px,
      transparent 6px, transparent 12px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 5px,
      var(--badge-g2) 5px, var(--badge-g2) 6px,
      transparent 6px, transparent 12px
    );
  opacity: 0.08;
}
.badge-card--theme-electric .badge-card__deco {
  font-size: 110px;
  opacity: 0.06;
  color: var(--badge-g1);
}
[data-badge="b10"] .badge-card__icon { color: #2471A3; }
[data-badge="b10"] .badge-card__name { color: #1A1A2E; }
[data-badge="b10"] .badge-card__stat { background: #2471A3; color: #EBF0F5; }
[data-badge="b10"] .badge-card__stat::before,
[data-badge="b10"] .badge-card__stat::after { border-color: #2471A3; }
[data-badge="b10"] .badge-card__divider { background: #1A1A2E; }
[data-badge="b10"] .badge-card__border-ring { border-color: #1A1A2E; border-style: double; border-width: 4px; }
[data-badge="b10"] .badge-card__rarity-label { background: #1A1A2E; color: #EBF0F5; }

/* ============================================
   ACTIVITY LIST (Profile > Activity Tab)
   ============================================ */
/* Activity Summary Stats Bar */
.activity-summary {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--bg-card);
  position: relative;
}
.activity-summary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, #5cdb95 5%, transparent),
    transparent 40%,
    color-mix(in srgb, #ffd200 4%, transparent) 70%,
    color-mix(in srgb, #ee2c67 5%, transparent));
  pointer-events: none;
}
.activity-summary__stat {
  flex: 1;
  padding: 22px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.activity-summary__stat + .activity-summary__stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border);
}
.activity-summary__num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.activity-summary__num--streak {
  color: #ff9800;
  text-shadow: 0 0 20px rgba(255,152,0,0.3);
}
.activity-summary__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  font-weight: 700;
}

/* Activity List - Timeline Layout */
.activity-list {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 4px;
}

/* Individual Activity Item */
.activity-item {
  display: flex;
  gap: 16px;
  padding: 0 0 4px;
  position: relative;
}

/* Timeline spine - dot + connecting line */
.activity-item__timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  flex-shrink: 0;
  padding-top: 16px;
}
.activity-item__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--act-color);
  flex-shrink: 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--act-color) 50%, transparent);
  z-index: 1;
  border: 2px solid var(--bg-primary);
}
.activity-item--highlight .activity-item__dot {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--act-color) 60%, transparent),
              0 0 4px var(--act-color);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--act-color) 60%, transparent); }
  50% { box-shadow: 0 0 24px color-mix(in srgb, var(--act-color) 80%, transparent), 0 0 6px var(--act-color); }
}
.activity-item__line {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--act-color) 30%, transparent), var(--border));
  margin-top: 4px;
  min-height: 16px;
}

/* Activity Card */
.activity-item__card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  border-left: 3px solid var(--act-color);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s, border-color 0.25s;
  position: relative;
  margin-bottom: 8px;
}
.activity-item__card:hover {
  transform: translateX(6px);
  box-shadow: -4px 4px 20px color-mix(in srgb, var(--act-color) 10%, rgba(0,0,0,0.12));
  border-left-color: var(--act-color);
}

/* Highlight cards (milestones, big donations, streaks) - celebratory feel */
.activity-item--highlight .activity-item__card {
  background: color-mix(in srgb, var(--act-color) 6%, var(--bg-card));
  border-color: color-mix(in srgb, var(--act-color) 20%, var(--border));
  border-left-width: 4px;
  border-left-color: var(--act-color);
}
.activity-item--highlight .activity-item__card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--act-color) 8%, transparent), transparent 70%);
  pointer-events: none;
  border-radius: 0 var(--radius-md) 0 0;
}

/* Card header row */
.activity-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.activity-item__emoji {
  font-size: 16px;
  line-height: 1;
}
.activity-item__label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--act-color);
}
.activity-item--highlight .activity-item__label {
  font-size: 11px;
  letter-spacing: 0.14em;
}
.activity-item__time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  font-style: italic;
}

/* Action text */
.activity-item__text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
}
.activity-item--highlight .activity-item__text {
  font-weight: 700;
  font-size: 15px;
}

/* Footer - points */
.activity-item__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.activity-item__pts {
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
}
.activity-item--highlight .activity-item__pts {
  font-size: 15px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--green) 30%, transparent);
}
.activity-item--donate .activity-item__pts {
  color: var(--act-color);
}
.activity-item__2x {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ee2c67, #ff6b9d);
  color: #fff;
  box-shadow: 0 2px 8px rgba(238,44,103,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ============================================
   SETTINGS LIST (Profile > Settings Tab)
   ============================================ */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.settings-group__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}

.settings-row:last-child { border-bottom: none; }

.settings-row__value {
  color: var(--text-secondary);
}

/* ============================================
   LEADERBOARD "YOU" BADGE
   ============================================ */
.leaderboard-you {
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: var(--space-xs);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.leaderboard-entry--you {
  border-color: var(--pink);
  background: var(--pink-soft);
}

/* ============================================
   MODAL - CLUB DETAIL
   ============================================ */
.modal-club__hero {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) 0;
}

.modal-club__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-club__overlay {
  position: absolute;
  inset: 0;
}

.modal-club__hero-content {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--space-xl);
  right: var(--space-xl);
}

.modal-club__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.modal-club__tagline {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
}

.modal-club__body {
  padding-top: var(--space-xl);
}

.modal-club__stats {
  display: flex;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.modal-club__stat { text-align: center; flex: 1; }

.modal-club__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
}

.modal-club__stat-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-club__actions h4 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.modal-club__action-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.modal-club__action-item:hover {
  background: var(--bg-tertiary);
}

.modal-club__action-icon {
  font-size: var(--text-xl);
}

.modal-club__action-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-club__action-title {
  font-size: var(--text-sm);
  font-weight: 600;
}

.modal-club__action-pts {
  font-size: var(--text-sm);
  color: var(--pink);
  font-weight: 700;
}

.modal-club__empty {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-lg);
}

.modal-club__join {
  margin-top: var(--space-xl);
}

/* ============================================
   MODAL - ACTION DETAIL
   ============================================ */
.modal-action__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-lg);
  width: calc(100% + var(--space-xl) * 2);
}

.modal-action__body {
  padding: 0;
}

.modal-action__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: var(--space-md) 0 var(--space-sm);
}

.modal-action__org {
  color: var(--pink);
  font-weight: 600;
  font-size: var(--text-sm);
}

.modal-action__desc {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
  margin: var(--space-md) 0 var(--space-lg);
}

.modal-action__meta {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-xl);
}

.modal-action__cta {
  margin-top: var(--space-md);
}

/* ============================================
   MODAL - REWARD DETAIL
   ============================================ */
.modal-reward__img {
  width: 100%;
  aspect-ratio: 1;
  max-width: 280px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-lg);
  display: block;
}

.modal-reward__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: var(--space-sm);
}

.modal-reward__price {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--pink);
  margin-bottom: var(--space-xs);
}

.modal-reward__bonus {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-xl);
}

.modal-reward__cta {
  margin-top: var(--space-md);
}

/* ============================================
   REWARDS FEATURED SLIDER
   ============================================ */
.rewards-featured-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  overflow: hidden;
  background: #000;
}

.rewards-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.rewards-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.rewards-slide--active {
  opacity: 1;
  pointer-events: auto;
}

.rewards-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rewards-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 40%, transparent 70%);
}

.rewards-slide__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
  z-index: 2;
  color: #fff;
  max-width: 700px;
}

.rewards-slide__tag {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
  color: rgba(255,255,255,0.9);
}

.rewards-slide__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.rewards-slide__sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-lg);
}

.rewards-slide__cta {
  display: inline-block;
  padding: 12px 32px;
  background: #fff;
  color: #111;
  border: none;
  border-radius: 30px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.rewards-slide__cta:hover {
  background: #e5e5e5;
}

.rewards-slider__dots {
  position: absolute;
  bottom: var(--space-lg);
  right: var(--space-2xl);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.rewards-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.rewards-slider__dot--active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .rewards-featured-slider {
    aspect-ratio: 4/5;
  }
  .rewards-slide__body {
    padding: var(--space-xl) var(--space-lg);
  }
  .rewards-slide__title {
    font-size: clamp(1.25rem, 5vw, 2rem);
  }
  .rewards-slider__dots {
    right: var(--space-lg);
    bottom: var(--space-md);
  }
}

/* ============================================
   COURSE PAGE
   ============================================ */
.page--course {
  padding: 0 !important;
  padding-top: calc(var(--nav-height, 64px) + var(--preview-bar-height, 0px)) !important;
}

.course-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
}

.course-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #111;
  border-bottom: 1px solid #222;
  flex-shrink: 0;
}

.course-topbar__back {
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 30px;
  transition: background 0.2s;
}

.course-topbar__back:hover {
  background: rgba(255,255,255,0.1);
}

.course-topbar__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

.course-topbar__pts {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}

.course-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #010101;
}

/* ============================================
   SECTION HEADER TABS-ONLY VARIANT
   ============================================ */
.section-header--tabs-only {
  justify-content: flex-start;
}

/* Actions page editorial spacing */
.featured-editorial--actions-page {
  padding: var(--space-xl) 0 var(--space-2xl);
}

.featured-editorial--actions-page .featured-editorial__grid {
  padding: 0 var(--space-lg);
}

/* ============================================
   PREMIER MEMBER COMPONENTS
   Active-state styles for Propeller Premier users
   ============================================ */

/* ── 2X Badge (inline) ── */
.dd__2x-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1.4;
}

/* ── Dashboard Premier Avatar Ring ── */
.dd__impact-avatar--premier {
  position: relative;
  border: none;
  overflow: visible;
}

.dd__impact-avatar--premier img {
  border-radius: 50%;
}

.dd__premier-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #ee2c67, #f820b2) 1;
  pointer-events: none;
}

/* Use box-shadow instead since border-image can't do border-radius */
.dd__impact-avatar--premier {
  box-shadow: 0 0 0 3px #111, 0 0 0 5px #ee2c67;
}

.dd__premier-ring { display: none; }

/* ── Premier Label in Impact Header ── */
.dd__premier-label {
  color: #ee2c67;
  font-weight: 600;
}

/* ── Premier Badge Wrap (right side of impact header) ── */
.dd__premier-badge-wrap {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.dd__premier-badge {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dd__premier-badge-sub {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 640px) {
  .dd__premier-badge-wrap { display: none; }
}

/* ── Premier Active Stat Cell ── */
.dd__stat--premier-active {
  position: relative;
}

.dd__stat-value--premier {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dd__stat-value--club {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: #ee2c67;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.dd__stat-trend--premier {
  color: #ee2c67;
  font-weight: 500;
}

/* ── Daily Action 2X Points ── */
.dd__daily-pts--2x {
  color: #ee2c67;
}

.dd__daily-item--done .dd__daily-pts--2x {
  color: rgba(238, 44, 103, 0.3);
}

/* ============================================
   PREMIER STATUS SECTION (replaces premier-cta for active members)
   ============================================ */
.premier-status {
  padding: var(--space-4xl) 0;
}

.premier-status__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

@media (max-width: 768px) {
  .premier-status__inner { flex-direction: column; text-align: center; }
}

.premier-status__badge { margin-bottom: var(--space-md); }

.premier-status__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-md);
}

.premier-status__text {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-xl);
  max-width: 540px;
  line-height: 1.6;
}

.premier-status__stats {
  display: flex;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.premier-status__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.premier-status__stat-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
}

.premier-status__stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .premier-status__stats {
    flex-direction: row;
    gap: var(--space-lg);
    justify-content: center;
  }
}

.premier-status__visual { flex-shrink: 0; }

.premier-status__card {
  width: min(260px, 70vw);
  height: min(260px, 70vw);
  background: #111;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.premier-status__card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(238,44,103,0.15), transparent 70%);
}

.premier-status__club-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

/* ── Profile Premier Tags ── */
.profile-header__avatar--premier {
  position: relative;
}

.profile-header__avatar--premier img {
  border: 3px solid #ee2c67;
  border-radius: 50%;
}

.profile-header__level-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

.profile-premier-tag {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
  margin-left: 8px;
}

/* ── Nav Premier Ring ── */
.nav__avatar--premier img {
  border: 2px solid #ee2c67;
  border-radius: 50%;
}

/* ============================================
   2X PREMIER REMINDERS
   Persistent visual cues that Premier members earn double
   ============================================ */

/* ── Action Card 2X Points Badge ── */
.action-card__points-badge--2x {
  background: linear-gradient(135deg, rgba(238,44,103,0.85), rgba(248,32,178,0.85));
  color: #fff;
  font-weight: 600;
}

.ac-2x-pip {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.25);
  padding: 1px 5px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 2px;
}

/* ── Action Detail Page 2X ── */
.adp__2x-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 8px;
  letter-spacing: 0.06em;
}

.adp__premier-active {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(238,44,103,0.08);
  border-left: 3px solid #ee2c67;
  margin: var(--space-md) 0;
}

.adp__premier-active-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #ee2c67;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.adp__premier-active-badge svg {
  width: 16px;
  height: 16px;
  fill: #ee2c67;
}

.adp__premier-active-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ── Celebration 2X Premier Pip ── */
.celeb-card__premier-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
  animation: celeb-pip-glow 1.5s ease-in-out infinite alternate;
}

@keyframes celeb-pip-glow {
  from { box-shadow: 0 0 8px rgba(238,44,103,0.4); }
  to { box-shadow: 0 0 20px rgba(238,44,103,0.7); }
}

/* ── In-Modal Burst 2X ── */
.aux-burst__2x {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  color: #ee2c67;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: -4px;
  margin-bottom: 4px;
}

/* ── Persistent 2X Premier Strip ── */
.premier-2x-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px var(--space-lg);
  background: linear-gradient(135deg, rgba(238,44,103,0.12), rgba(248,32,178,0.08));
  border-bottom: 1px solid rgba(238,44,103,0.2);
}

.premier-2x-strip__badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.premier-2x-strip__text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}

.premier-2x-strip__club {
  font-size: 12px;
  font-weight: 600;
  color: #ee2c67;
  margin-left: auto;
  white-space: nowrap;
}

/* Homepage variant - light bg context, needs dark text */
.premier-2x-strip--home .premier-2x-strip__text {
  color: #111;
}
.premier-2x-strip--home .premier-2x-strip__club {
  color: #ee2c67;
}

@media (max-width: 640px) {
  .premier-2x-strip__club { display: none; }
  .premier-2x-strip__text { font-size: 12px; }
}

/* ============================================
   URGENT RESPONSE BANNER
   ============================================ */
.ur-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,68,68,0.15), rgba(255,34,34,0.08));
  border-bottom: 1px solid rgba(255,68,68,0.3);
}

.ur-banner__pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,68,68,0.06), transparent);
  animation: urPulseSweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes urPulseSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.ur-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.ur-banner__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.ur-banner__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4444;
  box-shadow: 0 0 6px rgba(255,68,68,0.8);
  flex-shrink: 0;
  animation: urLivePulse 1.5s ease-in-out infinite;
}

@keyframes urLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(255,68,68,0.8); }
  50% { opacity: 0.5; box-shadow: 0 0 12px rgba(255,68,68,0.4); }
}

.ur-banner__badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  background: #ff4444;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.ur-banner__ticker {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ur-banner__ticker-track {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  animation: urTickerScroll 20s linear infinite;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,0.7);
  letter-spacing: 0.01em;
}

@keyframes urTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ur-banner__ticker-dot {
  color: #ff4444;
  font-size: 6px;
  opacity: 0.6;
}

.ur-banner__right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.ur-banner__stats {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ur-banner__stat {
  font-size: 12px;
  color: rgba(0,0,0,0.6);
  white-space: nowrap;
}

.ur-banner__stat strong {
  color: #111;
  font-weight: 700;
}

.ur-banner__stat-divider {
  width: 1px;
  height: 14px;
  background: rgba(0,0,0,0.15);
}

.ur-banner__cta {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #ff4444;
  border: none;
  padding: 6px 16px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}

.ur-banner__cta:hover {
  background: #e63333;
  transform: translateY(-1px);
}

.ur-banner__cta:active {
  transform: translateY(0);
}

/* Landing variant — no stats, centered layout */
.ur-banner--landing .ur-banner__inner {
  justify-content: center;
}

.ur-banner--landing .ur-banner__left {
  flex: 0 1 auto;
}

@media (max-width: 640px) {
  .ur-banner__inner {
    padding: 8px var(--space-md);
    gap: var(--space-sm);
  }
  .ur-banner__stats { display: none; }
  .ur-banner__ticker-track { font-size: 12px; }
  .ur-banner__badge { font-size: 9px; padding: 2px 6px; }
  .ur-banner__cta { min-height: 44px; padding: 8px 14px; font-size: 10px; }
  .ur-banner__live-dot { width: 6px; height: 6px; }
}

/* ============================================
   PREMIER STATUS - MULTI-CLUB ROWS
   ============================================ */
.premier-status__clubs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.premier-status__club-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 0.15s;
}

.premier-status__club-row:hover {
  background: rgba(255,255,255,0.08);
}

.premier-status__club-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 0;
  flex-shrink: 0;
}

.premier-status__club-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.premier-status__club-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.premier-status__club-amt {
  font-size: 12px;
  color: var(--text-tertiary);
}

.premier-status__cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ============================================
   SETTINGS - SUBSCRIPTION MANAGEMENT
   ============================================ */
.settings-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(238,44,103,0.15);
  color: #ee2c67;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

.settings-sub-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-sm);
}

.settings-sub-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-sub-card__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.settings-sub-card__meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.settings-sub-card__actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.settings-sub-card__edit {
  font-size: 12px !important;
  padding: 4px 10px !important;
}

.settings-sub-card__cancel {
  font-size: 12px !important;
  padding: 4px 10px !important;
  color: var(--text-tertiary) !important;
}

.settings-sub-card__cancel:hover {
  color: #ef4444 !important;
}

.settings-add-club {
  margin-top: var(--space-sm);
  width: 100%;
  text-align: center;
  border-style: dashed !important;
}

.settings-note {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: var(--space-sm) 0 var(--space-md);
}

.settings-group--danger {
  border-top: 1px solid rgba(239,68,68,0.15);
  padding-top: var(--space-lg);
}

.settings-group--danger .settings-group__title {
  color: #ef4444;
}

.settings-cancel-premier {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.2) !important;
}

.settings-cancel-premier:hover {
  background: rgba(239,68,68,0.08) !important;
}

/* Settings: Photo Upload Row */
.settings-photo-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
}
.settings-photo-row__preview {
  flex-shrink: 0;
}
.settings-photo-row__preview img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  border: 3px solid var(--pink);
  object-fit: cover;
}
.settings-photo-row__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Settings: Editable Inputs */
.settings-row__input {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary);
  font-family: inherit;
  width: min(220px, 100%);
  transition: border-color 0.2s;
}
.settings-row__input:focus {
  outline: none;
  border-color: var(--pink);
}
.settings-row__input--date {
  width: min(170px, 100%);
}

.settings-row__input-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.settings-row__age {
  font-size: 13px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.settings-row__save-row {
  padding: var(--space-md) 0 var(--space-sm);
  display: flex;
  justify-content: flex-end;
}

/* Settings: Cause Preference Chips */
.settings-causes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-cause-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.settings-cause-chip:hover {
  border-color: var(--pink);
  color: var(--text-primary);
}
.settings-cause-chip--active {
  background: rgba(238, 44, 103, 0.12);
  border-color: var(--pink);
  color: var(--pink);
  font-weight: 600;
}
.settings-cause-chip__emoji {
  font-size: 16px;
}

@media (max-width: 640px) {
  .settings-sub-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .settings-sub-card__actions {
    width: 100%;
  }
  .settings-sub-card__actions .btn {
    flex: 1;
  }
}


/* ============================================
   PREVIEW BAR - dev mode toggle
   ============================================ */
.preview-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1100;
  font-family: var(--font-body);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 16px;
  flex-shrink: 0;
}
.preview-bar::-webkit-scrollbar {
  display: none;
}
.preview-bar__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  white-space: nowrap;
}
.preview-bar__toggle {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.preview-bar__btn {
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.preview-bar__btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
.preview-bar__btn--active {
  color: #111;
  background: var(--accent);
}
.preview-bar__btn--active:hover {
  background: var(--accent);
}
.preview-bar__shortcuts {
  display: flex;
  gap: 6px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.preview-bar__shortcut {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.preview-bar__shortcut:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}

.preview-bar__close {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: #4ade80;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.preview-bar__close:hover { background: #22c55e; }

.preview-bar__reopen {
  display: none;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10001;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: #fbbf24;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.preview-bar__reopen:hover { opacity: 1; }

/* ── Preview Bar Mobile ── */
@media (max-width: 768px) {
  .preview-bar {
    gap: 8px;
    padding: 0 12px;
    justify-content: flex-start;
  }
  .preview-bar__label {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .preview-bar__shortcuts {
    display: flex;
  }
  .preview-bar__btn {
    padding: 4px 10px;
    font-size: 11px;
  }
}

@media (max-width: 400px) {
  .preview-bar__label {
    display: none;
  }
  .preview-bar__toggle {
    margin: 0 auto;
  }
}

/* ── Preview: Free User overrides ── */
/* Hide all Premier-specific hardcoded elements when in Free User preview */
.preview--free .premier-status,
.preview--free .dd__premier-ring,
.preview--free .dd__premier-badge-wrap,
.preview--free .dd__2x-badge,
.preview--free .dd__stat--premier-active .dd__stat-value--premier,
.preview--free .ac-2x-pip,
.preview--free .adp__2x-badge,
.preview--free .adp__premier-active,
.preview--free .aux-burst__2x {
  display: none !important;
}
.preview--free .action-card__points-badge--2x {
  background: var(--surface-elevated, #1a1a2e);
}
.preview--free .dd__impact-avatar--premier img {
  border-color: var(--border) !important;
}
.preview--free .dd__daily-pts--2x {
  color: var(--text-secondary);
}
.preview--free .dd__daily-pts--2x::before {
  content: none;
}

/* ============================================
   PREMIER COMMUNITY FEED (PCF)
   ============================================ */
/* ============================================
   PREMIER COMMUNITY FEED
   ============================================ */
.pcf {
  padding: var(--space-3xl) 0 var(--space-2xl);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.pcf__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-lg);
}

.pcf__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.pcf__subtitle {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: 4px;
}

.pcf__count {
  color: #ee2c67;
  font-weight: 700;
}

.pcf__header-stats {
  display: flex;
  gap: var(--space-xl);
  flex-shrink: 0;
}

.pcf__header-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pcf__header-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1;
  transition: transform 0.25s, color 0.25s;
}

.pcf__header-stat-num--new {
  color: #22c55e;
}

.pcf__header-stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Counter tick-up animation */
.pcf__tick {
  animation: pcfTickUp 0.4s ease-out;
}
@keyframes pcfTickUp {
  0% { transform: translateY(0); color: inherit; }
  40% { transform: translateY(-3px); color: #ee2c67; }
  100% { transform: translateY(0); color: inherit; }
}

@media (max-width: 640px) {
  .pcf__header { flex-direction: column; align-items: flex-start; }
  .pcf__header-stats { flex-direction: row; gap: var(--space-lg); }
  .pcf__header-stat { align-items: flex-start; }
}

/* ── Live Feed ── */
.pcf__feed {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: var(--space-xl);
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.pcf__feed-live-dot {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px var(--space-md);
  background: rgba(17,17,17,0.95);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #22c55e;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pcf__feed-live-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  margin-right: 6px;
  animation: pcf-pulse 2s ease-in-out infinite;
}

.pcf__feed-live-dot::after {
  content: 'Live';
}

@keyframes pcf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Feed items - base */
.pcf__feed-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  background: #111;
  transition: background 0.2s, opacity 0.3s, transform 0.3s;
}

.pcf__feed-item:hover {
  background: rgba(255,255,255,0.04);
}

/* Stagger-in on initial load */
.pcf__feed-item--stagger {
  animation: pcfStaggerIn 0.4s ease-out both;
}
@keyframes pcfStaggerIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Drop-in for new live items */
.pcf__feed-item--entering {
  animation: pcfDropIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pcfDropIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Emoji avatar replaces dicebear */
.pcf__feed-emoji {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}

.pcf__feed-content {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  align-items: baseline;
}

.pcf__feed-user {
  font-weight: 600;
  color: var(--text-primary);
}

.pcf__feed-action {
  color: var(--text-secondary);
}

.pcf__feed-target {
  color: var(--text-primary);
  font-weight: 500;
}

.pcf__feed-club {
  font-size: 11px;
  font-weight: 600;
  color: #ee2c67;
  background: rgba(238,44,103,0.1);
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 2px;
}

.pcf__feed-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.pcf__feed-pts {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: #22c55e;
}

.pcf__feed-pts--spend {
  color: var(--text-tertiary);
}

.pcf__feed-time {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Join/subscribe feed items get accent */
.pcf__feed-item--join .pcf__feed-target,
.pcf__feed-item--subscribe .pcf__feed-target {
  color: #ee2c67;
  font-weight: 600;
}

/* ── Club Milestones ── */
.pcf__ms-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.pcf__ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.pcf__ms-card {
  padding: var(--space-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Hot milestone glow */
.pcf__ms-card--hot {
  border-color: rgba(238,44,103,0.25);
  box-shadow: 0 0 20px rgba(238,44,103,0.06), inset 0 0 20px rgba(238,44,103,0.03);
  animation: pcfHotPulse 3s ease-in-out infinite;
}
@keyframes pcfHotPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(238,44,103,0.06), inset 0 0 20px rgba(238,44,103,0.03); }
  50% { box-shadow: 0 0 30px rgba(238,44,103,0.12), inset 0 0 30px rgba(238,44,103,0.06); }
}

.pcf__ms-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.pcf__ms-club {
  font-weight: 700;
  font-size: 14px;
}

.pcf__ms-pct {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: #ee2c67;
}

.pcf__ms-goal {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.pcf__ms-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 6px;
}

.pcf__ms-bar--hot {
  height: 5px;
}

.pcf__ms-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ee2c67, #f820b2);
  border-radius: 0;
  transition: width 1.2s ease-out;
}

.pcf__ms-nums {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
}

.pcf__ms-hot {
  color: #ee2c67;
  font-weight: 700;
}

/* ── Bottom Grid: Spotlight + Rank ── */
.pcf__bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .pcf__bottom-grid { grid-template-columns: 1fr; }
}

/* ── Propeller Spotlight ── */
.pcf__spot-card {
  padding: var(--space-xl);
  background: rgba(238,44,103,0.04);
  border: 1px solid rgba(238,44,103,0.12);
  position: relative;
  display: flex;
  flex-direction: column;
}

.pcf__spot-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ee2c67;
  margin-bottom: var(--space-md);
  display: block;
}

.pcf__spot-profile {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.pcf__spot-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ee2c67;
}

.pcf__spot-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcf__spot-name {
  font-weight: 700;
  font-size: 16px;
}

.pcf__spot-level {
  font-size: 12px;
  color: var(--text-secondary);
}

.pcf__spot-clubs {
  font-size: 11px;
  color: #ee2c67;
  font-weight: 500;
}

/* Spotlight stat grid */
.pcf__spot-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--space-lg);
}

.pcf__spot-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcf__spot-stat-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.pcf__spot-stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 500;
}

.pcf__spot-quote {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
  border-left: 3px solid #ee2c67;
  padding-left: var(--space-md);
  margin: 0;
  margin-top: auto;
}

/* ── Your Impact Rank Card ── */
.pcf__rank-card {
  padding: var(--space-xl);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
}

.pcf__rank-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
  display: block;
}

.pcf__rank-big {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.pcf__rank-of {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.pcf__rank-bar-wrap {
  margin-bottom: var(--space-md);
}

.pcf__rank-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: visible;
  margin-bottom: 8px;
}

.pcf__rank-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ee2c67, #f820b2);
  transition: width 1.5s ease-out;
}

.pcf__rank-bar-marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #ee2c67;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(238,44,103,0.4);
}

.pcf__rank-pct {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #ee2c67;
}

.pcf__rank-detail {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  margin-top: auto;
}

.pcf__rank-stats {
  display: flex;
  gap: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-md);
}

.pcf__rank-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcf__rank-stat-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.pcf__rank-stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ============================================
   WALLET / MEMBERSHIP CARDS
   ============================================ */

/* ── Wallet Layout ── */
.wallet-section {
  max-width: 480px;
}

.wallet-intro {
  margin-bottom: var(--space-xl);
}

.wallet-intro__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.wallet-intro__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.wallet-cards__group {
  margin-bottom: var(--space-2xl);
}

.wallet-cards__group-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.wallet-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.wallet-footer__note {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ── Base Card ── */
.wcard {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586; /* credit card ratio */
  border-radius: 16px;
  overflow: hidden;
  user-select: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
}

.wcard:hover {
  transform: translateY(-4px) scale(1.01);
}

.wcard__noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 128px;
  pointer-events: none;
  z-index: 2;
}

.wcard__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* ── Premier Card ── */
.wcard--premier {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a14 30%, #0a0a0a 70%, #140a1a 100%);
  border: 1px solid rgba(238,44,103,0.3);
  box-shadow: 0 8px 32px rgba(238,44,103,0.12), 0 0 0 1px rgba(238,44,103,0.08);
}

.wcard--premier:hover {
  box-shadow: 0 16px 48px rgba(238,44,103,0.2), 0 0 0 1px rgba(238,44,103,0.15);
}

.wcard--premier .wcard__glow {
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(238,44,103,0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ── Club Card ── */
.wcard--club {
  background: linear-gradient(135deg, #0a0a0a 0%, rgba(var(--club-color-rgb, 238,44,103), 0.08) 40%, #0a0a0a 100%);
  border: 1px solid color-mix(in srgb, var(--club-color) 30%, transparent);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--club-color) 12%, transparent);
}

.wcard--club:hover {
  box-shadow: 0 16px 48px color-mix(in srgb, var(--club-color) 20%, transparent);
}

.wcard__club-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  z-index: 0;
}

.wcard__club-spacer {
  flex: 1;
}

/* ── Card Elements ── */
.wcard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: auto;
}

.wcard__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wcard__logo svg {
  color: #ee2c67;
}

.wcard__logo-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--text-primary);
}

.wcard__tier {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #ee2c67;
  border: 1px solid rgba(238,44,103,0.4);
  padding: 3px 10px;
  border-radius: 2px;
}

.wcard__club-emoji {
  font-size: 18px;
}

.wcard__club-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--club-color);
  border: 1px solid color-mix(in srgb, var(--club-color) 40%, transparent);
  padding: 3px 10px;
  border-radius: 2px;
}

/* Member row */
.wcard__member {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.wcard__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ee2c67;
}

.wcard__avatar--sm img {
  width: 36px;
  height: 36px;
  border-color: var(--club-color, #ee2c67);
}

.wcard__member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wcard__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.wcard__member--club .wcard__name {
  font-size: 16px;
}

.wcard__level {
  font-size: 12px;
  color: var(--text-secondary);
}

.wcard__club-cause {
  font-size: 12px;
  color: var(--club-color, var(--text-secondary));
  font-weight: 500;
}

/* Stats row on premier card */
.wcard__stats-row {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
}

.wcard__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wcard__stat-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.wcard__stat-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Bottom row */
.wcard__bottom {
  display: flex;
  gap: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
  margin-top: auto;
}

.wcard__id-label {
  display: block;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  margin-bottom: 2px;
  font-weight: 600;
}

.wcard__id-value {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

/* ── Add to Wallet Button ── */
.wcard-wallet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.wcard-wallet-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--text-primary);
}

.wcard-wallet-btn--premier:hover {
  border-color: rgba(238,44,103,0.3);
  color: #ee2c67;
}

.wcard-wallet-btn svg {
  flex-shrink: 0;
}

/* ── Premier Exclusive Action Cards ── */
.action-card--premier {
  position: relative;
}

.action-card--premier::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(238,44,103,0.25);
  pointer-events: none;
  z-index: 1;
}

.action-card__premier-tag {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  background: linear-gradient(135deg, #ee2c67, #f820b2);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 0;
}

/* ── Recommendation Reasoning Label ─────── */
.action-card__reason {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 3;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  max-width: calc(100% - 2 * var(--space-sm));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  animation: reasonFadeIn 0.4s ease-out;
}
@keyframes reasonFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Completed Card State ───────────────── */
.action-card--completed {
  opacity: 0.5;
  position: relative;
  pointer-events: none;
}
.action-card--completed .action-card__cta {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  pointer-events: none;
}
.action-card--completed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(94, 234, 212, 0.06));
  border-radius: inherit;
  pointer-events: none;
}

/* ============================================
   CONVERSION INTERSTITIALS
   Smart CTAs for Club Join / Premier / Donate
   ============================================ */
.conversion-interstitial {
  margin: var(--space-xl) 0;
  animation: conversionSlideIn 0.5s ease-out;
}
@keyframes conversionSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Club Join CTA ────────────────────── */
.conversion-interstitial__inner {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: var(--bg-card, #1a1a2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  min-height: 200px;
}
.conversion-interstitial__image {
  position: relative;
  width: 45%;
  flex-shrink: 0;
}
.conversion-interstitial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.conversion-interstitial__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 30%, var(--bg-card, #1a1a2e) 100%);
}
.conversion-interstitial__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg, 24px) var(--space-xl, 32px);
  flex: 1;
  gap: var(--space-xs, 6px);
}
.conversion-interstitial__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--club-color, var(--accent, #ee2c67));
}
.conversion-interstitial__eyebrow--premier {
  color: #ffd740;
}
.conversion-interstitial__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  margin: 0;
  line-height: 1.2;
}
.conversion-interstitial__desc {
  font-size: 14px;
  color: var(--text-secondary, rgba(255,255,255,0.65));
  line-height: 1.5;
  margin: 0;
  max-width: 440px;
}
.conversion-interstitial__actions {
  display: flex;
  gap: var(--space-sm, 10px);
  margin-top: var(--space-sm, 10px);
}
.conversion-interstitial__btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: var(--radius-full, 999px);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.conversion-interstitial__btn--primary {
  background: var(--club-color, var(--accent, #ee2c67));
  color: #fff;
}
.conversion-interstitial__btn--primary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.conversion-interstitial__btn--secondary {
  background: transparent;
  color: var(--text-secondary, rgba(255,255,255,0.65));
  border: 1px solid rgba(255,255,255,0.15);
}
.conversion-interstitial__btn--secondary:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

/* ── Premier Nudge ────────────────────── */
.conversion-interstitial__inner--premier {
  background: linear-gradient(135deg, rgba(255, 215, 64, 0.06) 0%, rgba(30, 30, 50, 1) 60%);
  border-color: rgba(255, 215, 64, 0.15);
  padding: var(--space-lg, 24px);
}
.conversion-interstitial__btn--premier {
  background: linear-gradient(135deg, #ffd740 0%, #ffb300 100%);
  color: #000;
  font-weight: 800;
}
.conversion-interstitial__btn--premier:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ── Upsell Banner (existing donors) ──── */
.conversion-interstitial__inner--upsell {
  background: linear-gradient(135deg, rgba(92, 219, 149, 0.06) 0%, rgba(30, 30, 50, 1) 60%);
  border-color: rgba(92, 219, 149, 0.15);
  padding: var(--space-lg, 24px);
}
.conversion-interstitial__eyebrow--upsell {
  color: #5cdb95 !important;
}
.conversion-interstitial__btn--upsell {
  background: linear-gradient(135deg, #5cdb95 0%, #3ba4c9 100%);
  color: #000;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: var(--radius-full, 999px);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.conversion-interstitial__btn--upsell:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.conversion-interstitial__progress {
  margin-top: var(--space-md, 16px);
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: visible;
}
.conversion-interstitial__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #5cdb95, #3ba4c9);
  border-radius: 3px;
  transition: width 1s ease;
}
.conversion-interstitial__progress-label {
  position: absolute;
  right: 0;
  top: -20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, rgba(255,255,255,0.55));
}

/* ── Club Discovery Strip ─────────────── */
.conversion-interstitial__strip-header {
  margin-bottom: var(--space-md, 16px);
}
.conversion-interstitial__strip-header .actions-section__subtitle {
  margin-top: 4px;
}
.conversion-interstitial__strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md, 16px);
}
.club-strip-card {
  background: var(--bg-card, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.club-strip-card:hover {
  border-color: var(--club-accent, rgba(255,255,255,0.2));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.club-strip-card__image {
  height: 120px;
  overflow: hidden;
}
.club-strip-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.club-strip-card__body {
  padding: var(--space-sm, 10px) var(--space-md, 16px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.club-strip-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--text-primary, #fff);
}
.club-strip-card__artist {
  font-size: 12px;
  font-weight: 600;
  color: var(--club-accent, var(--accent, #ee2c67));
}
.club-strip-card__tagline {
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.55));
}
.club-strip-card__members {
  font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.55));
}
.club-strip-card__btn {
  display: block;
  width: calc(100% - var(--space-md, 16px) * 2);
  margin: var(--space-xs, 6px) var(--space-md, 16px) var(--space-md, 16px);
  padding: 8px 0;
  background: var(--club-accent, var(--accent, #ee2c67));
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: all 0.2s ease;
}
.club-strip-card__btn:hover {
  filter: brightness(1.15);
}

/* ============================================
   DONATE DISCLAIMER (shared across all payment surfaces)
   ============================================ */
.donate-disclaimer {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  text-align: center;
  margin: 12px 0 4px;
  padding: 0 4px;
}
.donate-disclaimer p {
  margin: 0 0 6px;
}
.donate-disclaimer p:last-child {
  margin-bottom: 0;
}
.donate-disclaimer a {
  color: var(--text-tertiary, rgba(255,255,255,0.45));
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.donate-disclaimer a:hover {
  color: var(--text-secondary, rgba(255,255,255,0.7));
}
/* Inside light-bg contexts (Stripe modal is dark so fine) */
.stripe-modal .donate-disclaimer {
  color: rgba(255,255,255,0.5);
  margin-top: 14px;
}
.stripe-modal .donate-disclaimer a {
  color: rgba(255,255,255,0.6);
}


/* ============================================
   DONATION MODAL
   ============================================ */
.modal-donate {
  overflow: hidden;
}
.modal-donate__hero {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, #ee2c67, #a855f7, #3b82f6);
}
.modal-donate__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-donate__hero-gradient {
  width: 100%;
  height: 100%;
}
.modal-donate__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6));
}
.modal-donate__hero-content {
  position: absolute;
  bottom: 20px;
  left: 24px;
  z-index: 2;
}
.modal-donate__hero-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.modal-donate__hero-title {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.modal-donate__body {
  padding: 24px;
}
.modal-donate__org {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.modal-donate__org-label {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.modal-donate__org-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.modal-donate__amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.modal-donate__amt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  border: 2px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 14px;
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 64px;
}
.modal-donate__amt:hover {
  border-color: var(--border-hover, rgba(255,255,255,0.2));
  background: var(--bg-tertiary, rgba(255,255,255,0.08));
  transform: translateY(-2px);
}
.modal-donate__amt--active {
  border-color: #ee2c67;
  background: rgba(238, 44, 103, 0.1);
  box-shadow: 0 0 0 1px rgba(238, 44, 103, 0.3), 0 4px 16px rgba(238, 44, 103, 0.15);
}
.modal-donate__amt--active:hover {
  border-color: #ee2c67;
  background: rgba(238, 44, 103, 0.15);
}
.modal-donate__amt-dollar {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary, #6b7280);
}
.modal-donate__amt--active .modal-donate__amt-dollar {
  color: #ee2c67;
}
.modal-donate__amt-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  line-height: 1;
}
.modal-donate__amt--active .modal-donate__amt-val {
  color: #ee2c67;
}
.modal-donate__amt-pop {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: #ee2c67;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.modal-donate__custom {
  margin-bottom: 16px;
}
.modal-donate__custom-input-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 2px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  transition: all 0.2s ease;
}
.modal-donate__custom-input-wrap:focus-within {
  border-color: #ee2c67;
  box-shadow: 0 0 0 3px rgba(238, 44, 103, 0.15);
}
.modal-donate__custom-prefix {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-tertiary, #6b7280);
}
.modal-donate__custom-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary, #fff);
  font-size: 18px;
  font-weight: 600;
  outline: none;
  width: 100%;
}
.modal-donate__custom-input::placeholder {
  color: var(--text-tertiary, #6b7280);
  font-weight: 400;
}
.modal-donate__impact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(238, 44, 103, 0.06);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(238, 44, 103, 0.1);
}
.modal-donate__impact-icon {
  color: #ee2c67;
  flex-shrink: 0;
}
.modal-donate__impact-text {
  font-size: 13px;
  color: var(--text-secondary, #a0a0a0);
  line-height: 1.4;
}
.modal-donate__impact-text strong {
  color: #ee2c67;
  font-weight: 700;
}
.modal-donate__recurring-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  margin-bottom: 16px;
}
.modal-donate__recurring-note svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.modal-donate__submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ee2c67, #d91a56);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.modal-donate__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.modal-donate__submit:hover::before {
  transform: translateX(100%);
}
.modal-donate__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(238, 44, 103, 0.4);
}
.modal-donate__submit:active {
  transform: translateY(0);
}
.modal-donate__submit-text {
  font-size: inherit;
  font-weight: inherit;
}
.modal-donate__submit-arrow {
  font-size: 20px;
  transition: transform 0.2s ease;
}
.modal-donate__submit:hover .modal-donate__submit-arrow {
  transform: translateX(4px);
}
.modal-donate__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
}
.modal-donate__secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary, #6b7280);
}
.modal-donate__secure svg {
  opacity: 0.5;
}
.modal-donate__pts-badge {
  font-size: 12px;
  font-weight: 700;
  color: #e8ff0a;
  background: rgba(232, 255, 10, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(232, 255, 10, 0.2);
}

@media (max-width: 480px) {
  .modal-donate__hero { height: 120px; }
  .modal-donate__hero-title { font-size: 20px; }
  .modal-donate__body { padding: 20px 16px; }
  .modal-donate__amounts { gap: 8px; }
  .modal-donate__amt { padding: 12px 4px; min-height: 56px; }
  .modal-donate__amt-val { font-size: 18px; }
}


/* ============================================
   STRIPE CHECKOUT OVERLAY
   ============================================ */
.stripe-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 20px;
}
.stripe-overlay--visible {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
}
.stripe-modal {
  position: relative;
  background: linear-gradient(180deg, #1e1e2e, #151520);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 36px 32px 28px;
  max-width: 400px;
  width: 100%;
  color: #fff;
  box-shadow: 0 32px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) inset;
  transform: translateY(30px) scale(0.95);
  opacity: 0;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stripe-overlay--visible .stripe-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.stripe-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}
.stripe-modal__close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.stripe-modal__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.stripe-modal__logo-ring {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #635BFF, #8b83ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(99, 91, 255, 0.4);
}
.stripe-modal__type-badge {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
}
.stripe-modal__amount-section {
  text-align: center;
  margin-bottom: 8px;
}
.stripe-modal__amount-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.stripe-modal__amount-currency {
  font-size: 28px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
}
.stripe-modal__amount-value {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stripe-modal__amount-freq {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}
.stripe-modal__org {
  text-align: center;
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.stripe-modal__org-arrow {
  color: #ee2c67;
  font-weight: 600;
}
.stripe-modal__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  margin-bottom: 16px;
}
.stripe-modal__test-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.1);
  border: 1px solid rgba(255, 200, 0, 0.2);
  color: #ffc800;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}
.stripe-modal__info {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  text-align: center;
}
.stripe-modal__info strong {
  color: #fff;
}
.stripe-modal__card-row {
  margin: 12px 0 8px;
}
.stripe-modal__card-visual {
  background: linear-gradient(135deg, #2a2a3d, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stripe-modal__card-chip {
  width: 28px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(135deg, #d4af37, #f0c75e);
  flex-shrink: 0;
}
.stripe-modal__card-number {
  font-family: 'SF Mono', 'Fira Code', Monaco, monospace;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.08em;
}
.stripe-modal__info-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.stripe-modal__actions {
  margin-bottom: 16px;
}
.stripe-modal__btn {
  width: 100%;
  padding: 16px 24px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}
.stripe-modal__btn--pay {
  background: linear-gradient(135deg, #635BFF, #7c75ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.stripe-modal__btn--pay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.stripe-modal__btn--pay:hover::before {
  transform: translateX(100%);
}
.stripe-modal__btn--pay:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,91,255,0.5);
}
.stripe-modal__btn--pay:active {
  transform: translateY(0);
}
.stripe-modal__btn-text { font-size: inherit; font-weight: inherit; }
.stripe-modal__btn-arrow {
  font-size: 18px;
  transition: transform 0.2s ease;
}
.stripe-modal__btn--pay:hover .stripe-modal__btn-arrow {
  transform: translateX(4px);
}
.stripe-modal__processing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  color: #635BFF;
  font-weight: 600;
  font-size: 15px;
}
.stripe-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(99,91,255,0.2);
  border-top-color: #635BFF;
  border-radius: 50%;
  animation: stripe-spin 0.6s linear infinite;
}
@keyframes stripe-spin {
  to { transform: rotate(360deg); }
}
.stripe-modal__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  padding-top: 4px;
}
.stripe-modal__footer svg {
  opacity: 0.4;
}

@media (max-width: 480px) {
  .stripe-modal { padding: 28px 20px 20px; border-radius: 20px; }
  .stripe-modal__amount-value { font-size: 44px; }
  .stripe-modal__logo-ring { width: 48px; height: 48px; border-radius: 14px; }
}


/* ============================================
   DONATION CELEBRATION (post-payment)
   ============================================ */
.donation-celeb {
  position: fixed;
  inset: 0;
  z-index: 110000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.donation-celeb--visible {
  opacity: 1;
  background: rgba(8, 8, 16, 0.92);
}
.donation-celeb--out {
  opacity: 0;
  transform: scale(1.05);
  transition: all 0.5s ease;
  pointer-events: none;
}
.donation-celeb__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.donation-celeb__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 32px;
  max-width: 460px;
  width: 100%;
  transform: scale(0.8);
  opacity: 0;
  animation: celebContentIn 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes celebContentIn {
  to { transform: scale(1); opacity: 1; }
}

/* Animated checkmark */
.donation-celeb__checkmark {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}
.donation-celeb__check-svg {
  width: 80px;
  height: 80px;
}
.donation-celeb__check-circle {
  stroke: #10b981;
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: celebCircle 0.6s 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.donation-celeb__check-path {
  stroke: #10b981;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: celebCheck 0.35s 0.7s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
@keyframes celebCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes celebCheck {
  to { stroke-dashoffset: 0; }
}

.donation-celeb__title {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  opacity: 0;
  animation: celebFadeUp 0.5s 0.6s ease forwards;
}
.donation-celeb__amount-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
  opacity: 0;
  animation: celebFadeUp 0.5s 0.7s ease forwards;
}
.donation-celeb__amount {
  font-size: 56px;
  font-weight: 900;
  background: linear-gradient(135deg, #ee2c67, #f820b2, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.donation-celeb__freq {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
}
.donation-celeb__org {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
  opacity: 0;
  animation: celebFadeUp 0.5s 0.8s ease forwards;
}

/* Points burst */
.donation-celeb__pts-burst {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 24px;
  border-radius: 999px;
  background: rgba(232, 255, 10, 0.1);
  border: 1px solid rgba(232, 255, 10, 0.25);
  margin-bottom: 20px;
  opacity: 0;
  animation: celebPtsBurst 0.6s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes celebPtsBurst {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
.donation-celeb__pts-plus {
  font-size: 20px;
  font-weight: 800;
  color: #e8ff0a;
}
.donation-celeb__pts-num {
  font-size: 28px;
  font-weight: 900;
  color: #e8ff0a;
  font-variant-numeric: tabular-nums;
}
.donation-celeb__pts-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(232, 255, 10, 0.6);
  margin-left: 4px;
}
.donation-celeb__counter-done {
  animation: celebCountPulse 0.3s ease;
}
@keyframes celebCountPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Impact message */
.donation-celeb__impact-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
  opacity: 0;
  animation: celebFadeUp 0.5s 1.1s ease forwards;
}
.donation-celeb__impact-icon {
  font-size: 16px;
}

.donation-celeb__sandbox-tag {
  font-size: 10px;
  color: rgba(255, 200, 0, 0.5);
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  opacity: 0;
  animation: celebFadeUp 0.4s 1.2s ease forwards;
}

.donation-celeb__done {
  padding: 14px 40px;
  border: none;
  border-radius: 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  animation: celebFadeUp 0.5s 1.3s ease forwards;
}
.donation-celeb__done:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,255,255,0.08);
}

@keyframes celebFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Expanding rings behind content */
.donation-celeb__rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.donation-celeb__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(238, 44, 103, 0.15);
  opacity: 0;
}
.donation-celeb--visible .donation-celeb__ring--1 {
  animation: celebRing 2s 0.2s ease-out forwards;
}
.donation-celeb--visible .donation-celeb__ring--2 {
  animation: celebRing 2.5s 0.5s ease-out forwards;
}
.donation-celeb--visible .donation-celeb__ring--3 {
  animation: celebRing 3s 0.8s ease-out forwards;
  border-color: rgba(168, 85, 247, 0.1);
}
@keyframes celebRing {
  0% { width: 0; height: 0; opacity: 0.6; }
  100% { width: 800px; height: 800px; opacity: 0; }
}

@media (max-width: 480px) {
  .donation-celeb__content { padding: 32px 20px; }
  .donation-celeb__title { font-size: 26px; }
  .donation-celeb__amount { font-size: 44px; }
  .donation-celeb__checkmark { width: 64px; height: 64px; }
  .donation-celeb__check-svg { width: 64px; height: 64px; }
}

/* ============================================
   PWA INSTALL BANNER
   ============================================ */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pwa-install-banner--visible {
  transform: translateY(0);
}

.pwa-install-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.pwa-install-banner__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pwa-install-banner__icon {
  border-radius: 12px;
  flex-shrink: 0;
}

.pwa-install-banner__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

.pwa-install-banner__sub {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  margin-top: 2px;
}

.pwa-install-banner__sub strong {
  color: rgba(255, 255, 255, 0.85);
}

.pwa-install-banner__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-install-banner__btn {
  padding: 8px 20px;
  background: #ffffff;
  color: #111111;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.pwa-install-banner__btn:hover {
  opacity: 0.85;
}

.pwa-install-banner__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.15s;
}

.pwa-install-banner__close:hover {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 480px) {
  .pwa-install-banner__inner {
    padding: 12px 16px;
    gap: 10px;
  }
  .pwa-install-banner__icon {
    width: 36px !important;
    height: 36px !important;
  }
  .pwa-install-banner__title { font-size: 13px; }
  .pwa-install-banner__sub { font-size: 11px; }
}

/* ============================================
   MOBILE 480px - Audit fixes
   ============================================ */
@media (max-width: 480px) {
  /* Sweep entry amounts: 4-col to 2-col */
  .sweep__entry-amounts {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }

  /* Badges grid: reduce minmax */
  .badges-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  /* Premier config milestones grid */
  .pcf__ms-grid {
    grid-template-columns: 1fr;
  }

  /* Conversion interstitial strip grid */
  .conversion-interstitial__strip-grid {
    grid-template-columns: 1fr;
  }

  /* Portal article grid */
  .portal-article-grid {
    grid-template-columns: 1fr;
  }

  /* Conversion interstitial */
  .conversion-interstitial__inner {
    flex-direction: column;
    min-height: auto;
  }
  .conversion-interstitial__image {
    width: 100%;
    height: 180px;
  }
  .conversion-interstitial__title {
    font-size: 20px;
  }
  .conversion-interstitial__desc {
    font-size: 13px;
  }

  /* Settings input */
  .settings-row__input {
    width: 100%;
    max-width: 220px;
  }

  /* Actions hscroll padding fix */
  .actions-hscroll__track {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* ── Mobile section-padding overrides ── */
@media (max-width: 768px) {
  .dashboard-dark { padding: var(--space-lg) 0; }
  .featured-editorial { padding: var(--space-lg) 0; }
  .impact-banner { padding: var(--space-lg) 0; }
  .premier-cta { padding: var(--space-xl) 0; }
  .premier-cta__inner { gap: var(--space-lg); }
  .premier-status { padding: var(--space-xl) 0; }
  .premier-status__inner { gap: var(--space-lg); }
  .pcf { padding: var(--space-lg) 0 var(--space-md); }
  .modal-club__stats { gap: var(--space-lg); }
}

/* ── Mobile touch targets & font overrides ── */
@media (max-width: 768px) {
  /* Gallery/slider dots - expand tap area */
  .sweep__gallery-dot, .rewards-slider__dot {
    width: 12px; height: 12px;
    padding: 16px;
    box-sizing: content-box;
    margin: -16px;
    background-clip: content-box;
  }
  /* Search clear button */
  .actions-search__clear { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  /* Action card CTA */
  .action-card__cta { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  /* Daily check-in dot */
  .dd__daily-check { min-width: 44px; min-height: 44px; }
  /* Settings chips */
  .settings-cause-chip { min-height: 44px; display: flex; align-items: center; }
  /* Stripe modal close */
  .stripe-modal__close { width: 44px; height: 44px; }
  /* PWA install close */
  .pwa-install-banner__close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  /* Preview bar buttons */
  .preview-bar__btn { min-height: 44px; padding: 10px 16px; }
  /* Conversion interstitial button */
  .conversion-interstitial__btn { min-height: 44px; }
  /* Club strip card button */
  .club-strip-card__btn { min-height: 44px; padding: 12px 16px; }
  /* Premier CTA title - too large */
  .premier-cta__title { font-size: var(--text-2xl); }
  /* Premier status title */
  .premier-status__title { font-size: var(--text-2xl); }
  /* Dashboard stat value - way too large */
  .dd__stat-value { font-size: clamp(2rem, 7vw, 6rem); }
}