/* AXO POP owns this presentation layer. Keep shared platform behavior/styles
   upstream; load this file last in /app/. No game, wallet or referral rules here. */
.axo-body #overlay-root {
  --axo-panel: #14102d;
  --axo-surface: #20183d;
  --axo-raised: #2a2050;
  --axo-border: #443965;
  --axo-text: #faf7ff;
  --axo-muted: #bcb3d5;
  --axo-accent: #48eaff;
  --axo-lime: #baff4d;
  --axo-pink: #ff91b8;
}
.axo-body :is(.drawer--profile, .referral-center, .modal--payment) {
  --primary: var(--axo-accent);
  --primary-dark: var(--axo-text);
  --primary-soft: var(--axo-raised);
  --line: var(--axo-border);
  --muted: var(--axo-muted);
  color-scheme: dark;
  color: var(--axo-text);
  background: var(--axo-panel);
  border: 1px solid var(--axo-border);
  box-shadow: 0 28px 90px rgb(7 3 23 / 55%);
  scrollbar-width: thin;
  scrollbar-color: #71608e var(--axo-panel);
}
.axo-body :is(.drawer--profile, .referral-center, .modal--payment) :is(button, a, input, select, summary):focus-visible {
  outline: 3px solid var(--axo-accent);
  outline-offset: 3px;
}
.axo-body :is(.drawer--profile, .referral-center, .modal--payment) :is(button, input, select):disabled {
  opacity: .5;
  cursor: not-allowed;
}
.axo-body :is(.drawer--profile, .referral-center, .modal--payment) .icon-button {
  width: 44px;
  height: 44px;
  background: var(--axo-raised);
  color: var(--axo-text);
  border-color: var(--axo-border);
}
.axo-body :is(.drawer--profile, .referral-center, .modal--payment) .icon-button:hover {
  background: #3b2b62;
  border-color: var(--axo-accent);
}
.axo-body :is(.drawer--profile, .referral-center, .modal--payment) .icon-button .ui-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Profile menu */
.axo-body .drawer--profile .drawer__hero {
  padding: 26px 24px 22px;
  border-bottom: 1px solid var(--axo-border);
  background: radial-gradient(ellipse at 0 0, rgb(72 234 255 / 14%), transparent 65%),
    radial-gradient(ellipse at 100% 100%, rgb(255 79 154 / 17%), transparent 65%), #28184d;
}
.axo-body .drawer--profile .drawer__hero img {
  width: 72px;
  height: 72px;
  border: 2px solid #9573d8;
  box-shadow: 0 0 24px rgb(155 99 255 / 24%);
}
.axo-body .drawer--profile .drawer__hero h2 { margin-top: 6px; font-size: 23px; color: var(--axo-text); }
.axo-body .drawer--profile .drawer__hero p { color: var(--axo-muted); }
.axo-body .drawer--profile .drawer__hero .profile-balance { color: var(--axo-lime); }
.axo-body .drawer--profile .profile-balance span { color: var(--axo-muted); }
.axo-body .drawer--profile .profile-admin-badge { color: #e2d6ff; background: #382254; border-color: #725590; }
.axo-body .drawer--profile .profile-season { padding-block: 13px; background: rgb(15 10 39 / 45%); border-color: var(--axo-border); }
.axo-body .drawer--profile .profile-season small { color: #c4b3e7; font-size: 9px; }
.axo-body .drawer--profile .profile-season strong { margin-top: 7px; font-size: 13px; color: var(--axo-text); }
.axo-body .drawer--profile .drawer__body { padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.axo-body .drawer--profile .drawer-label { color: var(--axo-muted); font-size: 11px; letter-spacing: .12em; }
.axo-body .drawer--profile .drawer-link { margin-block: 4px; border: 1px solid transparent; border-radius: 15px; color: var(--axo-text); background: transparent; }
.axo-body .drawer--profile .drawer-link > span:first-child { color: var(--axo-accent); background: var(--axo-raised); }
.axo-body .drawer--profile .drawer-link > span:last-child { color: #a996c8; }
.axo-body .drawer--profile .drawer-link--admin { border-color: var(--axo-border); background: #241a42; }
.axo-body .drawer--profile .drawer-link--affiliate { border-color: #6b4292; background: linear-gradient(115deg, #30215a, #3a1c49); }
.axo-body .drawer--profile .drawer-link--affiliate > span:first-child { color: #1a1130; background: linear-gradient(135deg, #48eaff, #c0a1ff); }
.axo-body .drawer--profile .drawer-link--danger { color: var(--axo-pink); }
.axo-body .drawer--profile .drawer-link--danger > span:first-child { color: var(--axo-pink); background: #3c203b; }
.axo-body .drawer--profile .drawer-link:hover { background: #30234e; border-color: #7d61a0; }

/* Shared headers and safe, readable actions */
.axo-body :is(.referral-center, .modal--payment) .modal__header {
  color: var(--axo-text);
  background: #1c1535;
  border-bottom: 1px solid var(--axo-border);
}
.axo-body :is(.referral-center, .modal--payment) .modal__header h2 { color: var(--axo-text); }
.axo-body :is(.referral-center, .modal--payment) .modal__header p { color: var(--axo-accent); }
.axo-body :is(.referral-center, .modal--payment) :is(.modal__lead, .security-note) { color: var(--axo-muted); }
.axo-body :is(.referral-center, .modal--payment) .security-note { background: var(--axo-surface); }
.axo-body :is(.referral-center, .modal--payment) .action-button,
.axo-body .referral-center .referral-button {
  background: linear-gradient(115deg, #baff4d, #48eaff);
  border-color: transparent;
  color: #10182f;
  box-shadow: none;
}
.axo-body :is(.referral-center, .modal--payment) .action-button:hover:not(:disabled),
.axo-body .referral-center .referral-button:hover:not(:disabled) { background: #8af0ea; color: #10182f; }
.axo-body :is(.referral-center, .modal--payment) .action-button--secondary,
.axo-body .referral-center .referral-button--outline {
  color: var(--axo-text);
  background: var(--axo-raised);
  border: 1px solid var(--axo-border);
}
.axo-body :is(.referral-center, .modal--payment) .action-button--secondary:hover:not(:disabled),
.axo-body .referral-center .referral-button--outline:hover:not(:disabled) { color: var(--axo-text); background: #3b2b62; }

/* Affiliate center: all tabs, loading/error, charts and integrations */
.axo-body .referral-center :is(.referral-card, .referral-metric, .referral-links, .referral-game-results,
  .referral-members, .referral-level, .referral-pixel, .referral-push, .referral-invite--sub) {
  color: var(--axo-text);
  background: var(--axo-surface);
  border-color: var(--axo-border);
}
.axo-body .referral-center .referral-balance {
  background: radial-gradient(ellipse at top right, rgb(255 79 154 / 22%), transparent 70%), linear-gradient(135deg, #382163, #1d264b);
  border-color: #775799;
}
.axo-body .referral-center .referral-balance > strong { color: var(--axo-text); }
.axo-body .referral-center .referral-balance > p { color: #ded0f4; }
.axo-body .referral-center :is(.referral-eyebrow, .referral-chart-total, .referral-level > span,
  .referral-share, .referral-refresh, .referral-empty > svg) { color: var(--axo-accent); }
.axo-body .referral-center :is(h3, h4, .referral-links > summary, .referral-metric strong,
  .referral-funnel strong, .referral-level > strong, .referral-member__commission strong) { color: var(--axo-text); }
.axo-body .referral-center :is(.referral-invite p, .referral-invite label, .referral-invite > small,
  .referral-section-heading p, .referral-metric div > span, .referral-metric small,
  .referral-chart__day small, .referral-chart-data, .referral-funnel > div > span,
  .referral-card > p, .referral-disclosure, .referral-filter, .referral-member small,
  .referral-pagination, .referral-empty p, .referral-level > small, .referral-footer,
  .referral-pixel-heading p, .referral-pixel-fields small, .referral-pixel-note,
  .referral-push p, .referral-push small, .referral-push-disable) { color: var(--axo-muted); }
.axo-body .referral-center :is(.referral-link-control input, .referral-filter select, .referral-pixel-fields input[type="text"]) {
  color-scheme: dark;
  color: var(--axo-text);
  background: #18122f;
  border-color: #665382;
}
.axo-body .referral-center input::placeholder { color: #a899c1; }
.axo-body .referral-center .referral-periods { background: #100c24; border-color: var(--axo-border); }
.axo-body .referral-center .referral-periods button { color: var(--axo-muted); }
.axo-body .referral-center .referral-periods button[aria-pressed="true"] { color: var(--axo-text); background: #4b3075; box-shadow: none; }
.axo-body .referral-center .referral-tabs { background: #1b1433; border-color: var(--axo-border); }
.axo-body .referral-center .referral-tabs button { color: var(--axo-muted); }
.axo-body .referral-center .referral-tabs button[aria-selected="true"] { color: var(--axo-accent); border-bottom-color: var(--axo-accent); }
.axo-body .referral-center :is(.referral-periods button, .referral-tabs button):hover { color: var(--axo-text); background: #30234e; }
.axo-body .referral-center :is(.referral-metric__icon, .referral-pixel-icon, .referral-push-icon, .referral-avatar) {
  color: var(--axo-accent); background: #332456; border-color: var(--axo-border);
}
.axo-body .referral-center .referral-metric:nth-child(2n) .referral-metric__icon { color: var(--axo-lime); }
.axo-body .referral-center .referral-metric:nth-child(3n) .referral-metric__icon { color: var(--axo-pink); }
.axo-body .referral-center .referral-chart { border-color: var(--axo-border); background: repeating-linear-gradient(to top, transparent 0, transparent 49px, #30264b 50px); }
.axo-body .referral-center .referral-chart__day i { background: linear-gradient(#48eaff, #9b63ff); }
.axo-body .referral-center .referral-chart__day i.is-zero { background: #51406d; }
.axo-body .referral-center .referral-funnel > div > div { background: #352a4d; }
.axo-body .referral-center .referral-funnel i { background: linear-gradient(90deg, #9b63ff, #48eaff); }
.axo-body .referral-center :is(.referral-member, .referral-chart-data td, .referral-chart-data th,
  .referral-pixel-provider, .referral-footer) { border-color: var(--axo-border); }
.axo-body .referral-center :is(.referral-pixel-toggle, .referral-push-options label,
  .referral-push-install, .referral-pixel-events > span, .referral-pixel-status, .referral-pixel-badge) {
  color: var(--axo-text); background: #19132f; border-color: var(--axo-border);
}
.axo-body .referral-center input[type="checkbox"] { accent-color: var(--axo-accent); }
.axo-body .referral-center .referral-stage { color: #e2d6ff; background: #3b2b58; }
.axo-body .referral-center :is(.referral-stage--active, .referral-stage--deposited) { color: #c9ff98; background: #213e36; }
.axo-body .referral-center .referral-stage--played { color: #83eeff; background: #183c50; }
.axo-body .referral-center .referral-stage--unattributed { color: #ffdf80; background: #463624; }
.axo-body .referral-center .referral-member .referral-recent { color: var(--axo-lime); }
.axo-body .referral-center .referral-refund { color: #ffdf80; }
.axo-body .referral-center .utmify-settings {
  --utmify-ink: var(--axo-text); --utmify-muted: var(--axo-muted);
  --utmify-line: var(--axo-border); --utmify-surface: #19132f;
  background: var(--axo-surface);
}
.axo-body .referral-center .utmify-button { background: #48eaff; border-color: #48eaff; color: #10182f; }
.axo-body .referral-center .utmify-button--outline { background: var(--axo-raised); border-color: var(--axo-border); color: var(--axo-text); }

/* Game wallet and deposit/withdrawal dialogs: do not recolor PIX QR pixels. */
.axo-body .modal--payment .summary-card {
  background: radial-gradient(ellipse at top right, rgb(255 79 154 / 16%), transparent 70%), linear-gradient(135deg, #332259, #222044);
  border-color: #705393;
}
.axo-body .modal--payment .summary-card span { color: #d1c4e8; }
.axo-body .modal--payment .summary-card strong { color: var(--axo-text); font-variant-numeric: tabular-nums; }
.axo-body .modal--payment .summary-card b { color: var(--axo-accent); background: #382952; }
.axo-body .modal--payment .form-field label { color: var(--axo-text); }
.axo-body .modal--payment :is(.form-field input, .form-field select, .withdrawal-amounts,
  .payment-pix-code, .payment-history > article) { background: var(--axo-surface); color: var(--axo-text); border-color: var(--axo-border); }
.axo-body .modal--payment .form-field input::placeholder { color: #a899c1; }
.axo-body .modal--payment :is(.payment-limits, .payment-demo-notice, .payment-pix-qr figcaption,
  .withdrawal-amounts dt, .payment-history-card dt, .payment-history-title,
  .history-item span, .history-item p, .history-item small, .payment-coupon > summary) { color: var(--axo-muted); }
.axo-body .modal--payment :is(.withdrawal-amounts dd, .payment-history-card dd, .payment-pix-code code,
  .payment-demo-copy-status, .history-item strong) { color: var(--axo-text); }
.axo-body .modal--payment .withdrawal-amounts > div:last-child { border-color: var(--axo-border); }
.axo-body .modal--payment .quick-values button { color: var(--axo-text); background: var(--axo-raised); border-color: var(--axo-border); }
.axo-body .modal--payment .quick-values button[data-deposit-cents="5000"] { background: #352352; border-color: #bf8bff; box-shadow: inset 0 0 0 1px #bf8bff; }
.axo-body .modal--payment .quick-values button:is(:hover, :focus-visible, .is-active) { color: #10182f; background: #8af0ea; border-color: var(--axo-accent); }
.axo-body .modal--payment .quick-values button.is-active { box-shadow: inset 0 0 0 2px #48eaff; }
.axo-body .modal--payment .quick-values small { color: color-mix(in srgb, var(--quick-badge-color, #48eaff) 55%, white); font-size: 9px; }
.axo-body .modal--payment .quick-values button:is(:hover, :focus-visible, .is-active) small { color: #35224d; }
.axo-body .modal--payment .payment-inline-action { color: var(--axo-text); background: var(--axo-raised); border-color: var(--axo-border); min-height: 44px; }
.axo-body .modal--payment .status-pill { color: #c9ff98; background: #213e36; }
.axo-body .modal--payment .status-pill--lost { color: var(--axo-pink); background: #3c203b; }
.axo-body .modal--payment .payment-pix-code button { background: #48eaff; color: #10182f; }
.axo-body .modal--payment .payment-pix-code button:hover { background: #a1f4ff; }
.axo-body .modal--payment .modal__header--compact { background: transparent; border-bottom: 0; }
.axo-body .modal--payment.modal--deposit .summary-card { background: none; }
.axo-body .modal--payment .modal-media-banner--deposit img,
.axo-body .modal--payment .deposit-offer-banner { background: #19132f; }
.axo-body .modal--payment .deposit-submit { background: var(--axo-panel); box-shadow: 0 -8px 12px rgb(20 16 45 / 90%); }
.axo-body .modal--payment .deposit-offer-comparison > div { background: var(--axo-surface); border-color: var(--axo-border); }
.axo-body .modal--payment .deposit-offer-comparison .deposit-offer-highlight { background: #332259; border-color: #9573d8; }
.axo-body .modal--payment .deposit-offer-highlight strong { color: var(--axo-accent); }
.axo-body .modal--payment :is(.deposit-offer-message, .deposit-offer-terms, .deposit-offer-reassurance,
  .deposit-offer-comparison span, .deposit-offer-comparison small) { color: var(--axo-muted); }

@media (max-width: 600px) {
  .axo-body .drawer--profile .drawer__hero { padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 20px; }
  .axo-body .referral-center .referral-balance { padding: 22px; }
  .axo-body .referral-center .referral-balance .referral-button { width: 100%; }
  .axo-body .referral-center .referral-pixel-heading > div { min-width: 0; }
  .axo-body .referral-center .referral-periods button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .axo-body :is(.drawer--profile, .referral-center, .modal--payment) { animation: none; }
}