/*
 * Dark-theme overrides.
 *
 * tokens.css swaps every design token under :root[data-theme="dark"]. This file
 * handles what tokens cannot reach: colors that are hardcoded in components.css,
 * club.css, base.css, stars-page.css and the CSS injected by js/gift-checkout.js.
 *
 * Load order: AFTER components.css / club.css / stars-page.css. Every rule is
 * prefixed with :root[data-theme="dark"], which out-ranks the single-class
 * selectors it overrides, so the light theme is never touched.
 * Selectors appear in the same order as in components.css.
 */

/* ---------- appearance picker (account menu) + public-page toggle ---------- */
.acct__theme {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--c-outline-variant);
  margin-top: 4px;
}
.acct__theme-label {
  display: block;
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  margin: 0 2px 6px;
}
.acct__theme-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--c-surface-container-highest);
}
.acct__theme-opt {
  padding: 7px 4px;
  border-radius: calc(var(--radius-lg) - 3px);
  font: var(--text-label-sm);
  color: var(--c-on-surface-variant);
  text-align: center;
  white-space: nowrap;
}
.acct__theme-opt[aria-checked="true"] {
  background: var(--c-primary-container);
  color: var(--c-on-primary);
}

/* ---------- base.css / stars-page.css ambient glows ---------- */
:root[data-theme="dark"] #app::before,
:root[data-theme="dark"] body::before {
  background: radial-gradient(circle closest-side, rgba(14, 116, 180, 0.28) 0%, rgba(14, 116, 180, 0.1) 55%, rgba(14, 116, 180, 0) 100%);
}
:root[data-theme="dark"] #app::after,
:root[data-theme="dark"] body::after {
  background: radial-gradient(circle closest-side, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.08) 55%, rgba(99, 102, 241, 0) 100%);
}
:root[data-theme="dark"] .price-table__qty-icon { color: #fbbf24; }

/* ---------- components.css ---------- */
:root[data-theme="dark"] .app-bar__divider { background: rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .app-bar__delivery-badge {
  color: #34d399;
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(52, 211, 153, 0.3);
}
:root[data-theme="dark"] .security-note {
  background: linear-gradient(135deg, rgba(26, 36, 56, 0.85) 0%, rgba(26, 36, 56, 0.55) 100%);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .security-note__icon { color: #fbbf24; }
:root[data-theme="dark"] .step-progress__bar--done { background: #1e5a80; }

:root[data-theme="dark"] .card {
  background: linear-gradient(135deg, rgba(26, 36, 56, 0.94) 0%, rgba(22, 31, 49, 0.82) 100%);
}
:root[data-theme="dark"] .stepper {
  background: #131c2e;
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .stepper__btn {
  background: #223049;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .stepper__btn:active { background: rgba(148, 163, 184, 0.22); }
:root[data-theme="dark"] .stepper__btn--plus,
:root[data-theme="dark"] .stepper__btn--plus:active { background: var(--c-primary-container, #0098ea); }
:root[data-theme="dark"] .stepper__value-row:hover,
:root[data-theme="dark"] .stepper__value-row:focus-visible { background: rgba(42, 176, 255, 0.12); }
:root[data-theme="dark"] .stepper__star-icon { color: #fbbf24; }

:root[data-theme="dark"] .tier-strip {
  background: color-mix(in srgb, var(--c-tertiary) 12%, rgba(26, 36, 56, 0.7));
}
:root[data-theme="dark"] .tier-strip__dot { background: rgba(148, 163, 184, 0.3); }
:root[data-theme="dark"] .tier-strip__current--on,
:root[data-theme="dark"] .tier-strip__next--max { color: #4ade80; }

:root[data-theme="dark"] .chip {
  background: linear-gradient(160deg, rgba(34, 48, 73, 0.9) 0%, rgba(26, 36, 56, 0.7) 100%), rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* The dark `.chip` rule above has higher specificity than the base
   `.chip--active`, so it was overwriting the selected chip's tint/border and
   the selected preset (e.g. 50 / 100 stars) looked like a muddy, unselected
   chip. Re-apply the accent here: an opaque dark base (so the tint stays
   readable over the panel glow) + the per-tab accent tint + accent border. */
:root[data-theme="dark"] .chip--active {
  background:
    linear-gradient(var(--accent-tint-strong, rgba(42, 176, 255, 0.28)), var(--accent-tint-strong, rgba(42, 176, 255, 0.28))),
    #1a2438;
  border-color: var(--accent, var(--c-primary));
  color: var(--accent-ink, var(--c-primary));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .chip__base {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.25);
}
:root[data-theme="dark"] .chip--active .chip__base { background: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .chip__discount {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.35);
}
:root[data-theme="dark"] .chip--active .chip__discount {
  color: #86efac;
  background: rgba(34, 197, 94, 0.26);
  border-color: rgba(34, 197, 94, 0.5);
}

:root[data-theme="dark"] .text-input {
  background: #131c2e;
  border-color: #2a3a55;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .input-wrap--invalid .text-input,
:root[data-theme="dark"] .input-wrap--invalid .text-input:focus {
  background: #2a1618;
  border-color: rgba(248, 113, 113, 0.6);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .input-wrap--valid .text-input,
:root[data-theme="dark"] .input-wrap--valid .text-input:focus {
  background: #102a22;
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12), inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .info-note { background: rgba(26, 36, 56, 0.85); }
:root[data-theme="dark"] .info-note--warning {
  background: rgba(66, 45, 10, 0.55);
  border-color: rgba(245, 158, 11, 0.35);
}
:root[data-theme="dark"] .info-note--warning .info-note__icon { color: #fbbf24; }

:root[data-theme="dark"] .btn-primary { border-color: rgba(56, 189, 248, 0.35); }
:root[data-theme="dark"] .btn-primary:disabled { background: #26334a; color: #6b7c96; }
:root[data-theme="dark"] .btn-secondary { background: rgba(34, 48, 73, 0.7); }
:root[data-theme="dark"] .btn-secondary:active { background: rgba(42, 58, 86, 0.9); }
:root[data-theme="dark"] .action-dock { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .bottom-stack::before {
  background: linear-gradient(to top, #0b1220 0%, rgba(11, 18, 32, 0.85) 40%, rgba(11, 18, 32, 0) 100%);
}

:root[data-theme="dark"] .service-switcher { background: #131c2e; }
:root[data-theme="dark"] .service-switcher__item:not(:first-child)::before { background: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .service-hero {
  background: linear-gradient(135deg, rgba(26, 36, 56, 0.92) 0%, rgba(22, 31, 49, 0.74) 100%);
}

:root[data-theme="dark"] .gift-card {
  background: linear-gradient(135deg, rgba(26, 36, 56, 0.86) 0%, rgba(22, 31, 49, 0.6) 100%);
}
:root[data-theme="dark"] .gift-card--active { background: var(--accent-tint, rgba(42, 176, 255, 0.18)); }
:root[data-theme="dark"] .gift-card__price {
  color: #fde68a;
  background: linear-gradient(135deg, rgba(120, 80, 10, 0.55) 0%, rgba(146, 64, 14, 0.45) 100%);
  border-color: rgba(251, 191, 36, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .gift-card__price-icon { color: #fbbf24; }
:root[data-theme="dark"] .gift-card__tag {
  background: color-mix(in srgb, #fb7185 20%, transparent);
  color: #fda4af;
}
:root[data-theme="dark"] .gift-card__check { border-color: var(--c-background); }

:root[data-theme="dark"] .premium-panel { background: rgba(19, 28, 46, 0.8); }
:root[data-theme="dark"] .premium-panel--stars {
  --accent: #fbbf24;
  --accent-ink: #fde68a;
  --accent-tint: rgba(251, 191, 36, 0.14);
  --accent-tint-strong: rgba(251, 191, 36, 0.26);
}
:root[data-theme="dark"] .premium-panel--gift {
  --accent: #fb7185;
  --accent-ink: #fda4af;
  --accent-tint: rgba(251, 113, 133, 0.14);
  --accent-tint-strong: rgba(251, 113, 133, 0.26);
}
:root[data-theme="dark"] .premium-panel__header,
:root[data-theme="dark"] .premium-panel__features { border-bottom-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .premium-panel__feature-icon { color: #4ade80; }
:root[data-theme="dark"] .reaction-custom-row {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(26, 36, 56, 0.8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

:root[data-theme="dark"] .plan-card--grid {
  background: #131c2e;
  border-color: rgba(255, 255, 255, 0.07);
}
:root[data-theme="dark"] .plan-card--grid.plan-card--active,
:root[data-theme="dark"] .plan-card--active { background: rgba(42, 176, 255, 0.16); }
:root[data-theme="dark"] .plan-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(26, 36, 56, 0.8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .plan-card--featured {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(66, 50, 10, 0.35);
}
:root[data-theme="dark"] .plan-card--featured.plan-card--active {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(95, 70, 10, 0.45);
}
:root[data-theme="dark"] .plan-card__tag--sky { background: rgba(14, 165, 233, 0.18); color: #7cc9ff; }
:root[data-theme="dark"] .plan-card__tag--premium { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
:root[data-theme="dark"] .plan-card__tag--gift { background: rgba(244, 63, 94, 0.18); color: #fda4af; }
:root[data-theme="dark"] .plan-card__tag--gold { background: rgba(217, 119, 6, 0.2); color: #fcd34d; }
:root[data-theme="dark"] .plan-card__badge { box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .plan-card__monthly { color: #9fb0c8; }
:root[data-theme="dark"] .price-dock {
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

:root[data-theme="dark"] .feature-article {
  background: rgba(26, 36, 56, 0.5);
  border-color: rgba(255, 255, 255, 0.07);
}
:root[data-theme="dark"] .feature-article__kicker { color: #a5b4fc; }
:root[data-theme="dark"] .feature-article__body { color: #b6c3d8; }
:root[data-theme="dark"] .pa-section__sticker {
  background: color-mix(in srgb, var(--pa-tint) 22%, #131c2e);
}
:root[data-theme="dark"] .pa-list__item {
  background: rgba(26, 36, 56, 0.62);
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .pa-note {
  color: #fde68a;
  background: color-mix(in srgb, #f59e0b 14%, #131c2e);
  border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}

:root[data-theme="dark"] .acct-avatar { border-color: rgba(255, 255, 255, 0.22); }
:root[data-theme="dark"] .acct__menu {
  background: #131c2e;
  border-color: #26334a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .acct__item:active,
:root[data-theme="dark"] .acct__item:hover { background: rgba(42, 176, 255, 0.12); }

:root[data-theme="dark"] .sheet-backdrop { background: rgba(0, 0, 0, 0.7); }
:root[data-theme="dark"] .sheet {
  background: rgba(16, 26, 43, 0.98);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .sheet-empty__icon { background: rgba(42, 176, 255, 0.14); }
:root[data-theme="dark"] .terms-check {
  background: rgba(42, 176, 255, 0.08);
  border-color: rgba(42, 176, 255, 0.25);
}
:root[data-theme="dark"] .terms-check__box { background: #131c2e; }
:root[data-theme="dark"] .phone-verify__error { color: #f87171; }
:root[data-theme="dark"] .phone-verify__divider::before { background: rgba(42, 176, 255, 0.2); }

:root[data-theme="dark"] .order-row {
  background: linear-gradient(135deg, rgba(26, 36, 56, 0.9) 0%, rgba(22, 31, 49, 0.6) 100%);
  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .order-row:active { background: rgba(42, 176, 255, 0.1); }
:root[data-theme="dark"] .status-badge--active { color: #fbbf24; background: rgba(245, 158, 11, 0.18); }
:root[data-theme="dark"] .status-badge--done { color: #34d399; background: rgba(16, 185, 129, 0.18); }
:root[data-theme="dark"] .status-badge--failed { color: #f87171; background: rgba(239, 68, 68, 0.18); }
:root[data-theme="dark"] .summary-row { border-bottom-color: rgba(42, 176, 255, 0.25); }
:root[data-theme="dark"] .summary-row__value--brand { color: #34d399; }
:root[data-theme="dark"] .summary-row__value--price { color: #7cc9ff; }
:root[data-theme="dark"] .btn-stars {
  background: rgba(60, 45, 10, 0.5);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.35);
}
:root[data-theme="dark"] .btn-stars .btn-icon { color: #fbbf24; }
:root[data-theme="dark"] .btn-stars:active { background: rgba(90, 65, 10, 0.6); }
:root[data-theme="dark"] .trust-strip {
  background: linear-gradient(135deg, rgba(16, 60, 45, 0.6) 0%, rgba(10, 45, 35, 0.7) 100%);
  border-color: rgba(52, 211, 153, 0.3);
}
:root[data-theme="dark"] .trust-strip__text strong { color: #6ee7b7; }

/* admin panel */
:root[data-theme="dark"] .admin-stat--warn {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(160deg, rgba(245, 158, 11, 0.14), rgba(26, 36, 56, 0.6));
}
:root[data-theme="dark"] .admin-price-neg { color: #f87171; }

/* ---------- club.css ---------- */
:root[data-theme="dark"] .club-balance__cell--available { border-color: rgba(42, 176, 255, 0.45); }
:root[data-theme="dark"] .club-hist__amount--plus { color: #34d399; }
:root[data-theme="dark"] .club-hist__amount--minus { color: #f87171; }
:root[data-theme="dark"] .club-status--locked { color: #fbbf24; background: rgba(245, 158, 11, 0.18); }
:root[data-theme="dark"] .club-status--available { color: #7cc9ff; background: rgba(42, 176, 255, 0.16); }
:root[data-theme="dark"] .club-status--spent { color: #b6c3d8; background: rgba(148, 163, 184, 0.18); }
:root[data-theme="dark"] .club-status--reversed { color: #f87171; background: rgba(239, 68, 68, 0.18); }
:root[data-theme="dark"] .club-camp__dot { background: #34d399; }
:root[data-theme="dark"] .club-chip--reward { background: rgba(42, 176, 255, 0.16); }
:root[data-theme="dark"] .club-chip--time { color: #fbbf24; background: rgba(245, 158, 11, 0.18); }

/* ---------- js/gift-checkout.js (purchase popup on the public pages) ---------- */
:root[data-theme="dark"] .gc-backdrop,
:root[data-theme="dark"] .gc-terms-bd { background: rgba(0, 0, 0, 0.66); }
:root[data-theme="dark"] .gc-sheet { box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .gc-terms { box-shadow: 0 18px 56px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .gc-more {
  background: linear-gradient(to top, var(--c-background) 15%, rgba(11, 18, 32, 0));
}
:root[data-theme="dark"] .gc-err { color: #f87171; }
:root[data-theme="dark"] .gc-note {
  background: rgba(66, 45, 10, 0.5);
  border-color: rgba(251, 191, 36, 0.35);
  color: var(--c-on-surface);
}
:root[data-theme="dark"] .gc-tab.is-active,
:root[data-theme="dark"] .gc-opt.is-sel,
:root[data-theme="dark"] .gc-plan.is-sel,
:root[data-theme="dark"] .gc-gift.is-sel { background: rgba(42, 176, 255, 0.2); }
:root[data-theme="dark"] .gc-gift {
  background: linear-gradient(160deg, #1a2438 0%, #131c2e 100%);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .gc-gift.is-sel { background: rgba(42, 176, 255, 0.2); }
:root[data-theme="dark"] .gc-gift__emoji {
  background: radial-gradient(circle closest-side, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0));
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}
:root[data-theme="dark"] .gc-gift__stars {
  color: #fde68a;
  background: linear-gradient(135deg, rgba(120, 80, 10, 0.55), rgba(146, 64, 14, 0.45));
  border-color: rgba(251, 191, 36, 0.35);
}
:root[data-theme="dark"] .gc-gift__limited { background: rgba(251, 113, 133, 0.16); color: #fda4af; }
:root[data-theme="dark"] .gc-gift__check { border-color: var(--c-background); }
:root[data-theme="dark"] .gc-up {
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, rgba(95, 70, 10, 0.45), rgba(26, 36, 56, 0.9));
}
:root[data-theme="dark"] .gc-up__badge { color: #fde68a; background: rgba(251, 191, 36, 0.2); }
:root[data-theme="dark"] .gc-up__sub { color: #fcd34d; }
:root[data-theme="dark"] .gc-up__emoji { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)); }
:root[data-theme="dark"] .gc-buy-hint { color: #7cc9ff; }