/**
 * Tpping global theme - canonical palette from home page.
 * All pages (public, admin, games) inherit these tokens.
 */
/*
 * Dark tokens apply only when html has .dark (set by FOUC from stored
 * preference or prefers-color-scheme). :root alone stays light so first
 * visit follows the device theme instead of forcing dark.
 */
html.dark {
    /* ── Core (home page) ── */
    --tpz-cream: #faf6f0;
    --tpz-cream-ink: #1c1814;
    --tpz-bg: #080c10;
    --tpz-surface: #111519;
    --tpz-surface-2: #181e24;
    --tpz-border: rgba(255, 255, 255, 0.07);
    --tpz-green: #30995b;
    --tpz-green-dark: #26804d;
    --tpz-green-dim: rgba(48, 153, 91, 0.12);
    --tpz-green-glow: rgba(48, 153, 91, 0.28);
    --tpz-green-border: rgba(48, 153, 91, 0.35);
    --tpz-gold: #f5a623;
    --tpz-silver: #b0bec5;
    --tpz-bronze: #cd7f32;
    --tpz-text: #faf6f0;
    --tpz-muted: #a8b4c0;
    --tpz-subtle: #3a4350;
    --tpz-body: rgba(250, 246, 240, 0.85);
    --tpz-headline-grad: #faf6f0;
    --tpz-btn-bg: #181e24;
    --tpz-deny-color: #c8d0d9;
    --tpz-deny-border: #4a5568;
    --tpz-hero-bg: var(--tpz-surface);
    --tpz-mesh: var(--tpz-bg);
    --tpz-grid-line: rgba(255, 255, 255, 0.015);
    --tpz-input-bg: var(--tpz-surface-2);
    --tpz-input-color: var(--tpz-text);
    --tpz-placeholder: var(--tpz-subtle);
    --tpz-toast-bg: var(--tpz-surface);
    --tpz-toast-border: rgba(48, 153, 91, 0.3);
    --tpz-toast-shadow: rgba(0, 0, 0, 0.5);
    --tpz-toast-close: var(--tpz-muted);
    --tpz-modal-bg: var(--tpz-surface);
    --tpz-modal-border: rgba(255, 255, 255, 0.1);
    --tpz-card-shadow: rgba(0, 0, 0, 0.4);
    --tpz-spot-border: var(--tpz-surface);
    --tpz-privacy-bg: var(--tpz-surface);
    --tpz-danger: #f87171;
    --tpz-danger-bg: rgba(248, 113, 113, 0.1);
    --tpz-danger-border: rgba(248, 113, 113, 0.28);
    --tpz-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --tpz-border-hover: rgba(255, 255, 255, 0.14);
    --tpz-text-secondary: rgba(255, 255, 255, 0.55);
    --tpz-text-body: var(--tpz-body);
    --tpz-unread-bg: rgba(48, 153, 91, 0.055);
    --tpz-unread-hover: rgba(48, 153, 91, 0.1);
    --tpz-item-hover: rgba(255, 255, 255, 0.03);
    --tpz-divider: rgba(255, 255, 255, 0.05);
    --tpz-tab-inactive: rgba(255, 255, 255, 0.4);
    --tpz-tab-border: rgba(255, 255, 255, 0.09);
    --tpz-read-btn-border: rgba(255, 255, 255, 0.09);
    --tpz-read-btn-color: rgba(255, 255, 255, 0.3);
    --tpz-read-tick-color: rgba(255, 255, 255, 0.16);
    --tpz-sep-color: rgba(255, 255, 255, 0.2);
    --tpz-empty-title: rgba(255, 255, 255, 0.75);
    --tpz-empty-sub: rgba(255, 255, 255, 0.3);
    --tpz-mark-all-bg: rgba(48, 153, 91, 0.1);
    --tpz-mark-all-border: rgba(48, 153, 91, 0.25);
    --tpz-list-bg: rgba(255, 255, 255, 0.02);
    --tpz-list-shadow: none;
    --tpz-new-badge-bg: rgba(48, 153, 91, 0.15);

    /* ── Navbar ── */
    --nav-bg: var(--tpz-surface);
    --nav-border: var(--tpz-border);
    --nav-text: var(--tpz-muted);
    --nav-text-active: var(--tpz-text);
    --nav-hover-bg: rgba(255, 255, 255, 0.05);
    --nav-green: var(--tpz-green);
    --nav-green-dark: var(--tpz-green-dark);
    --nav-green-dim: var(--tpz-green-dim);
    --nav-green-border: var(--tpz-green-border);
    --nav-green-glow: var(--tpz-green-glow);
    --nav-balance-bg: var(--tpz-green-dim);
    --nav-balance-border: var(--tpz-green-border);
    --nav-balance-hover: rgba(48, 153, 91, 0.18);
    --nav-secondary-border: var(--tpz-border);
    --nav-secondary-hover-bg: rgba(255, 255, 255, 0.08);
    --nav-modal-bg: linear-gradient(145deg, var(--tpz-surface-2), var(--tpz-surface));
    --nav-modal-border: var(--tpz-border);
    --nav-modal-close-bg: rgba(255, 255, 255, 0.08);
    --nav-modal-section-title: var(--tpz-muted);
    --nav-modal-item-text: var(--tpz-text);
    --nav-modal-item-hover: rgba(255, 255, 255, 0.05);
    --nav-modal-title: var(--tpz-text);
    --nav-more-overlay: rgba(0, 0, 0, 0.7);
    --nav-mobile-bg: linear-gradient(145deg, rgba(17, 21, 25, 0.98), rgba(8, 12, 16, 0.98));
    --nav-mobile-account-bg: rgba(255, 255, 255, 0.08);
    --nav-mobile-account-border: var(--tpz-border);
    --nav-avatar-border: var(--tpz-border);
    --nav-dropdown-bg: var(--tpz-surface-2);
    --nav-dropdown-border: var(--tpz-border);
    --nav-dropdown-shadow: rgba(0, 0, 0, 0.45);
    --nav-toggle-bg: rgba(255, 255, 255, 0.08);
    --nav-toggle-border: var(--tpz-border);
    --nav-toggle-color: var(--tpz-muted);
    --nav-toggle-hover-bg: rgba(255, 255, 255, 0.12);
    --nav-toggle-active-color: var(--tpz-green);
    --auth-modal-bg: rgba(0, 0, 0, 0.75);
    --auth-modal-card: var(--tpz-surface-2);
    --auth-input-bg: rgba(255, 255, 255, 0.05);
    --auth-input-border: var(--tpz-border);
    --auth-input-focus-border: var(--tpz-green-border);
    --auth-input-text: var(--tpz-text);
    --auth-input-placeholder: var(--tpz-subtle);
    --auth-label-color: var(--tpz-muted);
    --auth-tab-inactive: var(--tpz-muted);
    --auth-tab-active: var(--tpz-text);
    --auth-tab-underline: var(--tpz-green);
    --auth-divider: var(--tpz-border);
    --auth-error-bg: rgba(239, 68, 68, 0.12);
    --auth-error-border: rgba(239, 68, 68, 0.3);
    --auth-error-text: #fca5a5;

    /* ── Profile / shared UI ── */
    --t-bg: var(--tpz-bg);
    --t-card: var(--tpz-surface-2);
    --t-raised: var(--tpz-surface-2);
    --t-border: var(--tpz-border);
    --t-text: var(--tpz-text);
    --t-muted: var(--tpz-muted);
    --t-faint: var(--tpz-muted);
    --t-green: var(--tpz-green);
    --t-green-d: var(--tpz-green-dark);
    --t-green-glow: var(--tpz-green-glow);
    --t-green-dim: var(--tpz-green-dim);
    --t-shadow: rgba(0, 0, 0, 0.5);
    --t-orb-a: rgba(48, 153, 91, 0.08);
    --t-orb-b: rgba(48, 153, 91, 0.06);
    --t-ring: var(--tpz-surface-2);
    --t-input: var(--tpz-surface-2);
    --t-input-f: var(--tpz-surface);
    --t-modal: var(--tpz-surface-2);
    --t-modal-ov: rgba(0, 0, 0, 0.85);
    --t-share-ov: rgba(0, 0, 0, 0.9);
    --t-notif: var(--tpz-surface-2);
    --t-ach: var(--tpz-surface-2);
    --t-ach-trk: rgba(255, 255, 255, 0.1);
    --t-act: var(--tpz-surface-2);
    --t-sec-bg: var(--tpz-surface-2);
    --t-sec-txt: var(--tpz-text);
    --t-sec-hov: var(--tpz-surface);
    --t-nudge-bg: var(--tpz-green-dim);
    --t-nudge-bdr: var(--tpz-green-border);
    --t-scl-bg: var(--tpz-surface-2);
    --t-scl-txt: var(--tpz-muted);
    --t-scl-hov: var(--tpz-text);
    --t-ach-sh: rgba(255, 255, 255, 0.08);
    --t-ach-shb: rgba(255, 255, 255, 0.12);
    --t-share-card: var(--tpz-surface);
    --t-share-meta: var(--tpz-muted);
    --t-indigo: var(--tpz-green);
    --t-indigo-d: var(--tpz-green-dark);
    --t-indigo-glow: var(--tpz-green-glow);
    --t-indigo-dim: var(--tpz-green-dim);
    --t-indigo-border: var(--tpz-green-border);

    /* ── Admin (charcoal shell, Tpping green accent) ── */
    --adm-bg: #0e0e0e;
    --adm-sidebar: #111111;
    --adm-sidebar-text: #f5f5f5;
    --adm-sidebar-border: #2a2a2a;
    --adm-surface: #171717;
    --adm-input: #141414;
    --adm-border: #2a2a2a;
    --adm-text: #f5f5f5;
    --adm-muted: #9a9a9a;
    --adm-green: #30995b;
    --adm-accent: #30995b;
    --adm-readonly-bg: rgba(48, 153, 91, 0.12);
    --adm-glass-shadow: none;

    /* ── Footer ── */
    --ft-bg: var(--tpz-surface);
    --ft-text: var(--tpz-text);
    --ft-muted: var(--tpz-muted);
    --ft-faint: var(--tpz-muted);
    --ft-border: var(--tpz-border);
    --ft-top-line: var(--tpz-border);
    --ft-green: var(--tpz-green);
    --ft-input-bg: rgba(255, 255, 255, 0.05);
    --ft-input-border: var(--tpz-border);
    --ft-input-focus-bg: rgba(255, 255, 255, 0.08);
    --ft-input-color: var(--tpz-text);
    --ft-input-placeholder: var(--tpz-muted);
    --ft-social-bg: rgba(255, 255, 255, 0.05);
    --ft-social-border: var(--tpz-border);
    --ft-social-hover-bg: var(--tpz-green-dim);
    --ft-heading-color: var(--tpz-text);
    --ft-link-color: var(--tpz-muted);
    --ft-link-hover: var(--tpz-text);
    --ft-copyright-link: var(--tpz-muted);
    --ft-notif-bg: var(--tpz-surface-2);
    --ft-notif-border: var(--tpz-border);
    --ft-notif-shadow: rgba(0, 0, 0, 0.35);
    --ft-notif-title: var(--tpz-text);
    --ft-notif-msg: var(--tpz-muted);
    --ft-notif-close: var(--tpz-muted);
    --ft-notif-close-hover: var(--tpz-text);

    /* ── Games (shared shell) ── */
    --bg: var(--tpz-bg);
    --s1: var(--tpz-surface);
    --s2: var(--tpz-surface-2);
    --s3: var(--tpz-surface-2);
    --border: var(--tpz-border);
    --text: var(--tpz-text);
    --muted: var(--tpz-muted);
    --accent: var(--tpz-green);
    --accent-dk: var(--tpz-green-dark);
    --accent-dim: var(--tpz-green-dim);
    --accent-glow: var(--tpz-green-glow);
    --accent-border: var(--tpz-green-border);
    --accent-2: var(--tpz-green-dark);
    --surface-1: var(--tpz-surface);
    --surface-2: var(--tpz-surface-2);
    --surface-3: var(--tpz-surface-2);
    --text-muted: var(--tpz-muted);
    --border-subtle: var(--tpz-border);

    /* ── Studio / simple page aliases ── */
    --p: var(--tpz-green);
    --p2: var(--tpz-green-dark);
    --sur: var(--tpz-surface);
    --txt: var(--tpz-text);
    --bdr: var(--tpz-border);

    /* ── Affiliate dashboard ── */
    --d-bg: var(--tpz-bg);
    --d-surface: var(--tpz-surface);
    --d-surface2: var(--tpz-surface-2);
    --d-border: var(--tpz-border);
    --d-border-strong: var(--tpz-border);
    --d-text: var(--tpz-text);
    --d-muted: var(--tpz-muted);
    --d-green: var(--tpz-green);
    --d-green-bright: var(--tpz-green);
    --d-green-glow: var(--tpz-green-glow);
    --d-green-dim: var(--tpz-green-dim);
    --d-green-border: var(--tpz-green-border);
    --d-yellow: var(--tpz-gold);
    --d-yellow-dim: rgba(245, 166, 35, 0.1);
    --d-yellow-border: rgba(245, 166, 35, 0.28);
    --d-shadow: var(--tpz-shadow);

    /* ── Withdraw pages ── */
    --tw-bg: var(--tpz-bg);
    --tw-surface: var(--tpz-surface);
    --tw-surface2: var(--tpz-surface-2);
    --tw-border: var(--tpz-border);
    --tw-border2: var(--tpz-border);
    --tw-green: var(--tpz-green);
    --tw-green-dim: var(--tpz-green-dim);
    --tw-green-glow: var(--tpz-green-glow);
    --tw-green-deep: var(--tpz-green-dark);
    --tw-text: var(--tpz-text);
    --tw-muted: var(--tpz-muted);
    --tw-subtle: var(--tpz-surface-2);
    --tw-gold: var(--tpz-gold);
    --tw-scan: var(--tpz-green-dim);
    --tw-toast-bg: var(--tpz-surface);
    --tw-toast-title: var(--tpz-text);
    --tw-toast-body: var(--tpz-muted);

    /* ── Affiliate admin ── */
    --a-bg: var(--tpz-bg);
    --a-surface: var(--tpz-surface);
    --a-surface2: var(--tpz-surface-2);
    --a-border: var(--tpz-border);
    --a-border-strong: var(--tpz-border);
    --a-text: var(--tpz-text);
    --a-muted: var(--tpz-muted);
    --a-green: var(--tpz-green);
    --a-green-bright: var(--tpz-green);
    --a-green-glow: var(--tpz-green-glow);
    --a-green-dim: var(--tpz-green-dim);
    --a-green-border: var(--tpz-green-border);
    --a-red: #f85149;
    --a-red-dim: rgba(248, 81, 73, 0.1);
    --a-red-border: rgba(248, 81, 73, 0.25);
    --a-blue: #388bfd;
    --a-blue-dim: rgba(56, 139, 253, 0.1);
    --a-blue-border: rgba(56, 139, 253, 0.25);
    --a-shadow: var(--tpz-shadow);
    --a-shadow-lg: var(--tpz-shadow);

    /* ── Creator dashboard (events / fundraisers) ── */
    --tpc-page-bg: var(--tpz-bg);
    --tpc-body: var(--tpz-text);
    --tpc-subtle: var(--tpz-muted);
    --tpc-green: var(--tpz-green);
    --tpc-green-dark: var(--tpz-green-dark);
    --tpc-green-glow: var(--tpz-green-glow);
    --tpc-green-dim: var(--tpz-green-dim);
    --tpc-green-border: var(--tpz-green-border);
    --tpc-heading: var(--tpz-text);
    --tpc-card-bg: var(--tpz-surface-2);
    --tpc-card-border: var(--tpz-border);
    --tpc-inner-bg: var(--tpz-surface);
    --tpc-inner-border: var(--tpz-border);
    --tpc-input-bg: var(--tpz-input-bg);
    --tpc-input-border: var(--tpz-border);
    --tpc-input-text: var(--tpz-text);
    --tpc-input-ph: var(--tpz-placeholder);
    --tpc-input-focus: var(--tpz-green);
    --tpc-input-shadow: var(--tpz-green-glow);
    --tpc-divider: var(--tpz-border);
    --tpc-mesh-a: var(--tpz-green-dim);
    --tpc-mesh-b: rgba(56, 189, 248, 0.06);
    --tpc-grid-line: var(--tpz-grid-line);
    --tpc-danger: var(--tpz-danger);
    --tpc-danger-bg: var(--tpz-danger-bg);
    --tpc-danger-border: var(--tpz-danger-border);
    --tpc-warning: #f59e0b;
    --tpc-warning-bg: rgba(245, 158, 11, 0.08);
    --tpc-warning-border: rgba(245, 158, 11, 0.3);
    --tpc-green-rgb: 48, 153, 91;
    --tptkt-page-bg: var(--tpz-bg);
    --tptkt-body-color: var(--tpz-text);
    --tptkt-subtle: var(--tpz-muted);
    --tptkt-green: var(--tpz-green);
    --tptkt-green-dark: var(--tpz-green-dark);
    --tptkt-green-rgb: 48, 153, 91;
    --tptkt-green-glow: var(--tpz-green-glow);
    --tptkt-green-dim: var(--tpz-green-dim);
    --tptkt-green-border: var(--tpz-green-border);
    --tptkt-heading: var(--tpz-text);
    --tptkt-card-bg: var(--tpz-surface-2);
    --tptkt-card-border: var(--tpz-border);
    --tptkt-card-shadow: var(--tpz-shadow);
    --tptkt-inner-bg: var(--tpz-surface);
    --tptkt-inner-border: var(--tpz-border);
    --tptkt-input-bg: var(--tpz-input-bg);
    --tptkt-input-border: var(--tpz-border);
    --tptkt-input-text: var(--tpz-text);
    --tptkt-input-ph: var(--tpz-placeholder);
    --tptkt-input-focus: var(--tpz-green);
    --tptkt-input-shadow: var(--tpz-green-glow);
    --tptkt-divider: var(--tpz-border);
    --tptkt-modal-bg: var(--tpz-surface-2);
    --tptkt-modal-border: var(--tpz-border);
    --tptkt-mesh-a: var(--tpz-green-dim);
    --tptkt-mesh-b: rgba(56, 189, 248, 0.06);
    --tptkt-grid-line: var(--tpz-grid-line);
    --tptkt-danger: var(--tpz-danger);
    --tptkt-danger-bg: var(--tpz-danger-bg);
    --tptkt-danger-border: var(--tpz-danger-border);
    --tptkt-warning: #f59e0b;
    --tptkt-warning-bg: rgba(245, 158, 11, 0.1);
    --tptkt-warning-border: rgba(245, 158, 11, 0.3);
    --tpz-primary-dark: var(--tpz-bg);
    --tpz-secondary-dark: var(--tpz-surface-2);
    --tpz-accent-green: var(--tpz-green);
    --tpz-text-primary: var(--tpz-text);
    --tpz-text-muted: var(--tpz-muted);
    --tpz-border-subtle: var(--tpz-border);
    --tpz-shadow-glow: var(--tpz-green-glow);
    --tpz-body-bg: var(--tpz-bg);
    --tpz-card-bg: var(--tpz-surface);
    --tpz-search-bg: var(--tpz-surface);
    --tpz-mesh-c1: var(--tpz-green-dim);
    --tpz-mesh-c2: rgba(255, 107, 107, 0.08);
    --tpz-grid-line: var(--tpz-grid-line);
    --tpz-card-hover-border: var(--tpz-green-border);
    --tpz-card-hover-shadow: var(--tpz-shadow);
    --tpz-tag-bg: var(--tpz-green-dim);
    --tpz-tag-border: var(--tpz-green-border);
    --tpz-tag-color: var(--tpz-green);
    --tpz-footer-border: var(--tpz-border);
    --tpz-chip-inner-bg: var(--tpz-surface-2);
    --tpz-warning-bg: rgba(245, 158, 11, 0.1);
    --tpz-warning-border: rgba(245, 158, 11, 0.3);
    --tpz-warning: #f59e0b;
    --tpz-input-bg: var(--tpz-input-bg);
    --tpz-input-border: var(--tpz-border);
    --tpz-input-text: var(--tpz-text);
    --tpz-input-ph: var(--tpz-placeholder);
    --tpz-green-rgb: 48, 153, 91;
    --tpz-deposit-bg: var(--tpz-green-dim);
    --tpz-deposit-border: var(--tpz-green-border);
    --tpz-deposit-color: var(--tpz-green);
    --tpz-withdrawal-bg: var(--tpz-danger-bg);
    --tpz-withdrawal-border: var(--tpz-danger-border);
    --tpz-withdrawal-color: var(--tpz-danger);
    --mfrc-bg: var(--tpz-bg);
    --mfrc-card: var(--tpz-surface);
    --mfrc-border: var(--tpz-border);
    --mfrc-text: var(--tpz-text);
    --mfrc-muted: var(--tpz-muted);
    --mfrc-green: var(--tpz-green);
    --mfrc-glow: var(--tpz-green-glow);
    --mfrc-input: var(--tpz-input-bg);
    --mfrc-input-bdr: var(--tpz-border);
    --mfrc-placeholder: var(--tpz-placeholder);
    --mfrc-quill-bg: var(--tpz-surface);
    --mfrc-quill-toolbar: var(--tpz-surface-2);
    --mfed-bg: var(--tpz-bg);
    --mfed-card: var(--tpz-surface);
    --mfed-border: var(--tpz-border);
    --mfed-text: var(--tpz-text);
    --mfed-muted: var(--tpz-muted);
    --mfed-green: var(--tpz-green);
    --mfed-glow: var(--tpz-green-glow);
    --mfed-tag-bg: var(--tpz-green-dim);
    --mfed-tag-bdr: var(--tpz-green-border);
    --mfed-input-bg: var(--tpz-input-bg);
    --mfed-input-bdr: var(--tpz-border);
    --mfed-danger: var(--tpz-danger);
    --mfed-danger-bg: var(--tpz-danger-bg);
    --mfed-danger-bdr: var(--tpz-danger-border);
    --mfrs-bg: var(--tpz-bg);
    --mfrs-card: var(--tpz-surface);
    --mfrs-border: var(--tpz-border);
    --mfrs-text: var(--tpz-text);
    --mfrs-muted: var(--tpz-muted);
    --mfrs-green: var(--tpz-green);
    --mfrs-glow: var(--tpz-green-glow);
    --mfrs-green-dim: var(--tpz-green-dim);
    --mfrs-green-bdr: var(--tpz-green-border);
    --mfrs-divider: var(--tpz-border);
    --mfrs-row-hover: var(--tpz-item-hover);
    --mfrs-head-bg: var(--tpz-surface-2);
    --mfrs-input-bg: var(--tpz-input-bg);
    --surface: var(--tpz-surface);
    --card: var(--tpz-surface-2);
    --card-hover: var(--tpz-surface);
    --border-hover: var(--tpz-border-hover);
    --text-sub: var(--tpz-muted);
    --green: var(--tpz-green);
    --green-dark: var(--tpz-green-dark);
    --green-dim: var(--tpz-green-dim);
    --green-glow: var(--tpz-green-glow);
    --red: #ef4444;
    --red-dim: rgba(239, 68, 68, 0.12);
    --red-bdr: rgba(239, 68, 68, 0.3);
    --amber: #f59e0b;
    --amber-dim: rgba(245, 158, 11, 0.12);
    --amber-bdr: rgba(245, 158, 11, 0.28);
    --credit-clr: var(--tpz-green);
    --credit-bg: var(--tpz-green-dim);
    --credit-bdr: var(--tpz-green-border);
    --debit-clr: #ef4444;
    --debit-bg: rgba(239, 68, 68, 0.1);
    --debit-bdr: rgba(239, 68, 68, 0.28);
    --shadow-card: var(--tpz-shadow);
    --shadow-hover: var(--tpz-shadow);

    /* ── Leaderboard page ── */
    --g: var(--tpz-green);
    --g2: var(--tpz-green-dark);
    --g-dim: var(--tpz-green-dim);
    --g-glow: var(--tpz-green-glow);
    --tx: var(--tpz-text);
    --mu: var(--tpz-muted);
    --bd: var(--tpz-border);
    --gold: var(--tpz-gold);
    --silver: var(--tpz-silver);
    --bronze: var(--tpz-bronze);
}

html:not(.dark) {
    /* ── Core (home page) — cream, not pure white ── */
    --tpz-bg: #f0e8de;
    --tpz-surface: #faf6f0;
    --tpz-surface-2: #efe6db;
    --tpz-border: rgba(60, 40, 20, 0.10);
    --tpz-green: #1e7a47;
    --tpz-green-dark: #155e35;
    --tpz-green-dim: rgba(30, 122, 71, 0.08);
    --tpz-green-glow: rgba(30, 122, 71, 0.18);
    --tpz-green-border: rgba(30, 122, 71, 0.3);
    --tpz-gold: #c07800;
    --tpz-silver: #607d8b;
    --tpz-bronze: #a05a1e;
    --tpz-text: #1c1814;
    --tpz-muted: #6f655c;
    --tpz-subtle: #c9bdb0;
    --tpz-body: rgba(28, 24, 20, 0.85);
    --tpz-headline-grad: #1c1814;
    --tpz-btn-bg: #faf6f0;
    --tpz-deny-color: #3d342c;
    --tpz-deny-border: #c9bdb0;
    --tpz-hero-bg: var(--tpz-surface);
    --tpz-mesh: var(--tpz-bg);
    --tpz-grid-line: rgba(60, 40, 20, 0.05);
    --tpz-input-bg: var(--tpz-surface);
    --tpz-input-color: var(--tpz-text);
    --tpz-placeholder: #9a8d80;
    --tpz-toast-bg: #faf6f0;
    --tpz-toast-border: rgba(30, 122, 71, 0.25);
    --tpz-toast-shadow: rgba(60, 40, 20, 0.12);
    --tpz-toast-close: #9a8d80;
    --tpz-modal-bg: #faf6f0;
    --tpz-modal-border: rgba(60, 40, 20, 0.10);
    --tpz-card-shadow: rgba(0, 0, 0, 0.1);
    --tpz-spot-border: var(--tpz-surface);
    --tpz-privacy-bg: var(--tpz-surface);
    --tpz-danger: #dc2626;
    --tpz-danger-bg: rgba(220, 38, 38, 0.08);
    --tpz-danger-border: rgba(220, 38, 38, 0.25);
    --tpz-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --tpz-border-hover: rgba(0, 0, 0, 0.18);
    --tpz-text-secondary: rgba(15, 23, 35, 0.55);
    --tpz-text-body: var(--tpz-body);
    --tpz-unread-bg: rgba(30, 122, 71, 0.045);
    --tpz-unread-hover: rgba(30, 122, 71, 0.08);
    --tpz-item-hover: rgba(0, 0, 0, 0.018);
    --tpz-divider: rgba(0, 0, 0, 0.055);
    --tpz-tab-inactive: rgba(15, 23, 35, 0.45);
    --tpz-tab-border: rgba(0, 0, 0, 0.1);
    --tpz-read-btn-border: rgba(0, 0, 0, 0.1);
    --tpz-read-btn-color: rgba(15, 23, 35, 0.3);
    --tpz-read-tick-color: rgba(15, 23, 35, 0.2);
    --tpz-sep-color: rgba(15, 23, 35, 0.2);
    --tpz-empty-title: var(--tpz-text);
    --tpz-empty-sub: rgba(15, 23, 35, 0.4);
    --tpz-mark-all-bg: rgba(30, 122, 71, 0.07);
    --tpz-mark-all-border: rgba(30, 122, 71, 0.22);
    --tpz-list-bg: var(--tpz-surface);
    --tpz-list-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    --tpz-new-badge-bg: rgba(30, 122, 71, 0.1);

    /* ── Navbar ── */
    --nav-bg: var(--tpz-surface);
    --nav-border: var(--tpz-border);
    --nav-text: var(--tpz-muted);
    --nav-text-active: var(--tpz-text);
    --nav-hover-bg: rgba(0, 0, 0, 0.04);
    --nav-green: var(--tpz-green);
    --nav-green-dark: var(--tpz-green-dark);
    --nav-green-dim: var(--tpz-green-dim);
    --nav-green-border: var(--tpz-green-border);
    --nav-green-glow: var(--tpz-green-glow);
    --nav-balance-bg: var(--tpz-green-dim);
    --nav-balance-border: var(--tpz-green-border);
    --nav-balance-hover: rgba(30, 122, 71, 0.14);
    --nav-secondary-border: var(--tpz-border);
    --nav-secondary-hover-bg: rgba(0, 0, 0, 0.06);
    --nav-modal-bg: linear-gradient(145deg, var(--tpz-surface-2), var(--tpz-surface));
    --nav-modal-border: var(--tpz-border);
    --nav-modal-close-bg: rgba(0, 0, 0, 0.07);
    --nav-modal-section-title: var(--tpz-muted);
    --nav-modal-item-text: var(--tpz-text);
    --nav-modal-item-hover: rgba(0, 0, 0, 0.04);
    --nav-modal-title: var(--tpz-text);
    --nav-more-overlay: rgba(0, 0, 0, 0.4);
    --nav-mobile-bg: linear-gradient(145deg, rgba(250, 246, 240, 0.98), rgba(240, 232, 222, 0.98));
    --nav-mobile-account-bg: rgba(0, 0, 0, 0.05);
    --nav-mobile-account-border: var(--tpz-border);
    --nav-avatar-border: var(--tpz-border);
    --nav-dropdown-bg: var(--tpz-surface);
    --nav-dropdown-border: var(--tpz-border);
    --nav-dropdown-shadow: rgba(0, 0, 0, 0.15);
    --nav-toggle-bg: rgba(0, 0, 0, 0.05);
    --nav-toggle-border: var(--tpz-border);
    --nav-toggle-color: var(--tpz-muted);
    --nav-toggle-hover-bg: rgba(0, 0, 0, 0.09);
    --nav-toggle-active-color: var(--tpz-green);
    --auth-modal-bg: rgba(0, 0, 0, 0.45);
    --auth-modal-card: var(--tpz-surface);
    --auth-input-bg: rgba(0, 0, 0, 0.03);
    --auth-input-border: var(--tpz-border);
    --auth-input-focus-border: var(--tpz-green-border);
    --auth-input-text: var(--tpz-text);
    --auth-input-placeholder: var(--tpz-subtle);
    --auth-label-color: var(--tpz-muted);
    --auth-tab-inactive: var(--tpz-muted);
    --auth-tab-active: var(--tpz-text);
    --auth-tab-underline: var(--tpz-green);
    --auth-divider: var(--tpz-border);
    --auth-error-bg: rgba(239, 68, 68, 0.07);
    --auth-error-border: rgba(239, 68, 68, 0.25);
    --auth-error-text: #dc2626;

    /* ── Profile / shared UI ── */
    --t-bg: var(--tpz-bg);
    --t-card: var(--tpz-surface);
    --t-raised: var(--tpz-surface-2);
    --t-border: var(--tpz-border);
    --t-text: var(--tpz-text);
    --t-muted: var(--tpz-muted);
    --t-faint: var(--tpz-muted);
    --t-green: var(--tpz-green);
    --t-green-d: var(--tpz-green-dark);
    --t-green-glow: var(--tpz-green-glow);
    --t-green-dim: var(--tpz-green-dim);
    --t-shadow: rgba(0, 0, 0, 0.08);
    --t-orb-a: rgba(30, 122, 71, 0.05);
    --t-orb-b: rgba(30, 122, 71, 0.04);
    --t-ring: var(--tpz-surface);
    --t-input: var(--tpz-surface-2);
    --t-input-f: var(--tpz-surface);
    --t-modal: var(--tpz-surface);
    --t-modal-ov: rgba(0, 0, 0, 0.55);
    --t-share-ov: rgba(0, 0, 0, 0.6);
    --t-notif: var(--tpz-surface);
    --t-ach: var(--tpz-surface-2);
    --t-ach-trk: rgba(15, 23, 42, 0.08);
    --t-act: var(--tpz-surface-2);
    --t-sec-bg: var(--tpz-surface-2);
    --t-sec-txt: var(--tpz-text);
    --t-sec-hov: var(--tpz-surface-2);
    --t-nudge-bg: var(--tpz-green-dim);
    --t-nudge-bdr: var(--tpz-green-border);
    --t-scl-bg: var(--tpz-surface-2);
    --t-scl-txt: var(--tpz-muted);
    --t-scl-hov: var(--tpz-text);
    --t-ach-sh: rgba(15, 23, 42, 0.06);
    --t-ach-shb: rgba(15, 23, 42, 0.12);
    --t-share-card: var(--tpz-surface);
    --t-share-meta: var(--tpz-muted);
    --t-indigo: var(--tpz-green);
    --t-indigo-d: var(--tpz-green-dark);
    --t-indigo-glow: var(--tpz-green-glow);
    --t-indigo-dim: var(--tpz-green-dim);
    --t-indigo-border: var(--tpz-green-border);

    /* ── Admin (cream light shell, Tpping green accent) ── */
    --adm-bg: #f0e8de;
    --adm-sidebar: #f7f1e9;
    --adm-sidebar-text: #1c1814;
    --adm-sidebar-border: #e4d9cc;
    --adm-surface: #faf6f0;
    --adm-input: #faf6f0;
    --adm-border: #e4d9cc;
    --adm-text: #1c1814;
    --adm-muted: #6f655c;
    --adm-green: #30995b;
    --adm-accent: #30995b;
    --adm-readonly-bg: rgba(48, 153, 91, 0.1);
    --adm-glass-shadow: none;

    /* ── Footer ── */
    --ft-bg: var(--tpz-bg);
    --ft-text: var(--tpz-text);
    --ft-muted: var(--tpz-muted);
    --ft-faint: var(--tpz-muted);
    --ft-border: var(--tpz-border);
    --ft-top-line: var(--tpz-border);
    --ft-green: var(--tpz-green);
    --ft-input-bg: var(--tpz-surface);
    --ft-input-border: var(--tpz-border);
    --ft-input-focus-bg: var(--tpz-surface);
    --ft-input-color: var(--tpz-text);
    --ft-input-placeholder: var(--tpz-muted);
    --ft-social-bg: var(--tpz-surface);
    --ft-social-border: var(--tpz-border);
    --ft-social-hover-bg: var(--tpz-green-dim);
    --ft-heading-color: var(--tpz-text);
    --ft-link-color: var(--tpz-muted);
    --ft-link-hover: var(--tpz-text);
    --ft-copyright-link: var(--tpz-muted);
    --ft-notif-bg: var(--tpz-surface);
    --ft-notif-border: var(--tpz-border);
    --ft-notif-shadow: rgba(0, 0, 0, 0.08);
    --ft-notif-title: var(--tpz-text);
    --ft-notif-msg: var(--tpz-muted);
    --ft-notif-close: var(--tpz-muted);
    --ft-notif-close-hover: var(--tpz-text);

    /* ── Games (shared shell) ── */
    --bg: var(--tpz-bg);
    --s1: var(--tpz-surface);
    --s2: var(--tpz-surface-2);
    --s3: var(--tpz-surface-2);
    --border: var(--tpz-border);
    --text: var(--tpz-text);
    --muted: var(--tpz-muted);
    --accent: var(--tpz-green);
    --accent-dk: var(--tpz-green-dark);
    --accent-dim: var(--tpz-green-dim);
    --accent-glow: var(--tpz-green-glow);
    --accent-border: var(--tpz-green-border);
    --accent-2: var(--tpz-green-dark);
    --surface-1: var(--tpz-surface);
    --surface-2: var(--tpz-surface-2);
    --surface-3: var(--tpz-surface-2);
    --text-muted: var(--tpz-muted);
    --border-subtle: var(--tpz-border);

    /* ── Studio / simple page aliases ── */
    --p: var(--tpz-green);
    --p2: var(--tpz-green-dark);
    --sur: var(--tpz-surface);
    --txt: var(--tpz-text);
    --bdr: var(--tpz-border);

    /* ── Affiliate dashboard ── */
    --d-bg: var(--tpz-bg);
    --d-surface: var(--tpz-surface);
    --d-surface2: var(--tpz-surface-2);
    --d-border: var(--tpz-border);
    --d-border-strong: var(--tpz-border);
    --d-text: var(--tpz-text);
    --d-muted: var(--tpz-muted);
    --d-green: var(--tpz-green);
    --d-green-bright: var(--tpz-green);
    --d-green-glow: var(--tpz-green-glow);
    --d-green-dim: var(--tpz-green-dim);
    --d-green-border: var(--tpz-green-border);
    --d-yellow: var(--tpz-gold);
    --d-yellow-dim: rgba(245, 166, 35, 0.1);
    --d-yellow-border: rgba(245, 166, 35, 0.28);
    --d-shadow: var(--tpz-shadow);

    /* ── Withdraw pages ── */
    --tw-bg: var(--tpz-bg);
    --tw-surface: var(--tpz-surface);
    --tw-surface2: var(--tpz-surface-2);
    --tw-border: var(--tpz-border);
    --tw-border2: var(--tpz-border);
    --tw-green: var(--tpz-green);
    --tw-green-dim: var(--tpz-green-dim);
    --tw-green-glow: var(--tpz-green-glow);
    --tw-green-deep: var(--tpz-green-dark);
    --tw-text: var(--tpz-text);
    --tw-muted: var(--tpz-muted);
    --tw-subtle: var(--tpz-surface-2);
    --tw-gold: var(--tpz-gold);
    --tw-scan: var(--tpz-green-dim);
    --tw-toast-bg: var(--tpz-surface);
    --tw-toast-title: var(--tpz-text);
    --tw-toast-body: var(--tpz-muted);

    /* ── Affiliate admin ── */
    --a-bg: var(--tpz-bg);
    --a-surface: var(--tpz-surface);
    --a-surface2: var(--tpz-surface-2);
    --a-border: var(--tpz-border);
    --a-border-strong: var(--tpz-border);
    --a-text: var(--tpz-text);
    --a-muted: var(--tpz-muted);
    --a-green: var(--tpz-green);
    --a-green-bright: var(--tpz-green);
    --a-green-glow: var(--tpz-green-glow);
    --a-green-dim: var(--tpz-green-dim);
    --a-green-border: var(--tpz-green-border);
    --a-red: #f85149;
    --a-red-dim: rgba(248, 81, 73, 0.1);
    --a-red-border: rgba(248, 81, 73, 0.25);
    --a-blue: #388bfd;
    --a-blue-dim: rgba(56, 139, 253, 0.1);
    --a-blue-border: rgba(56, 139, 253, 0.25);
    --a-shadow: var(--tpz-shadow);
    --a-shadow-lg: var(--tpz-shadow);

    /* ── Creator dashboard (events / fundraisers) ── */
    --tpc-page-bg: var(--tpz-bg);
    --tpc-body: var(--tpz-text);
    --tpc-subtle: var(--tpz-muted);
    --tpc-green: var(--tpz-green);
    --tpc-green-dark: var(--tpz-green-dark);
    --tpc-green-glow: var(--tpz-green-glow);
    --tpc-green-dim: var(--tpz-green-dim);
    --tpc-green-border: var(--tpz-green-border);
    --tpc-heading: var(--tpz-text);
    --tpc-card-bg: var(--tpz-surface-2);
    --tpc-card-border: var(--tpz-border);
    --tpc-inner-bg: var(--tpz-surface);
    --tpc-inner-border: var(--tpz-border);
    --tpc-input-bg: var(--tpz-input-bg);
    --tpc-input-border: var(--tpz-border);
    --tpc-input-text: var(--tpz-text);
    --tpc-input-ph: var(--tpz-placeholder);
    --tpc-input-focus: var(--tpz-green);
    --tpc-input-shadow: var(--tpz-green-glow);
    --tpc-divider: var(--tpz-border);
    --tpc-mesh-a: var(--tpz-green-dim);
    --tpc-mesh-b: rgba(56, 189, 248, 0.06);
    --tpc-grid-line: var(--tpz-grid-line);
    --tpc-danger: var(--tpz-danger);
    --tpc-danger-bg: var(--tpz-danger-bg);
    --tpc-danger-border: var(--tpz-danger-border);
    --tpc-warning: #f59e0b;
    --tpc-warning-bg: rgba(245, 158, 11, 0.08);
    --tpc-warning-border: rgba(245, 158, 11, 0.3);
    --tpc-green-rgb: 30, 122, 71;
    --tptkt-page-bg: var(--tpz-bg);
    --tptkt-body-color: var(--tpz-text);
    --tptkt-subtle: var(--tpz-muted);
    --tptkt-green: var(--tpz-green);
    --tptkt-green-dark: var(--tpz-green-dark);
    --tptkt-green-rgb: 30, 122, 71;
    --tptkt-green-glow: var(--tpz-green-glow);
    --tptkt-green-dim: var(--tpz-green-dim);
    --tptkt-green-border: var(--tpz-green-border);
    --tptkt-heading: var(--tpz-text);
    --tptkt-card-bg: var(--tpz-surface-2);
    --tptkt-card-border: var(--tpz-border);
    --tptkt-card-shadow: var(--tpz-shadow);
    --tptkt-inner-bg: var(--tpz-surface);
    --tptkt-inner-border: var(--tpz-border);
    --tptkt-input-bg: var(--tpz-input-bg);
    --tptkt-input-border: var(--tpz-border);
    --tptkt-input-text: var(--tpz-text);
    --tptkt-input-ph: var(--tpz-placeholder);
    --tptkt-input-focus: var(--tpz-green);
    --tptkt-input-shadow: var(--tpz-green-glow);
    --tptkt-divider: var(--tpz-border);
    --tptkt-modal-bg: var(--tpz-surface-2);
    --tptkt-modal-border: var(--tpz-border);
    --tptkt-mesh-a: var(--tpz-green-dim);
    --tptkt-mesh-b: rgba(56, 189, 248, 0.06);
    --tptkt-grid-line: var(--tpz-grid-line);
    --tptkt-danger: var(--tpz-danger);
    --tptkt-danger-bg: var(--tpz-danger-bg);
    --tptkt-danger-border: var(--tpz-danger-border);
    --tptkt-warning: #f59e0b;
    --tptkt-warning-bg: rgba(245, 158, 11, 0.1);
    --tptkt-warning-border: rgba(245, 158, 11, 0.3);
    --tpz-primary-dark: var(--tpz-bg);
    --tpz-secondary-dark: var(--tpz-surface-2);
    --tpz-accent-green: var(--tpz-green);
    --tpz-text-primary: var(--tpz-text);
    --tpz-text-muted: var(--tpz-muted);
    --tpz-border-subtle: var(--tpz-border);
    --tpz-shadow-glow: var(--tpz-green-glow);
    --tpz-body-bg: var(--tpz-bg);
    --tpz-card-bg: var(--tpz-surface);
    --tpz-search-bg: var(--tpz-surface);
    --tpz-mesh-c1: var(--tpz-green-dim);
    --tpz-mesh-c2: rgba(255, 107, 107, 0.08);
    --tpz-grid-line: var(--tpz-grid-line);
    --tpz-card-hover-border: var(--tpz-green-border);
    --tpz-card-hover-shadow: var(--tpz-shadow);
    --tpz-tag-bg: var(--tpz-green-dim);
    --tpz-tag-border: var(--tpz-green-border);
    --tpz-tag-color: var(--tpz-green);
    --tpz-footer-border: var(--tpz-border);
    --tpz-chip-inner-bg: var(--tpz-surface-2);
    --tpz-warning-bg: rgba(245, 158, 11, 0.1);
    --tpz-warning-border: rgba(245, 158, 11, 0.3);
    --tpz-warning: #f59e0b;
    --tpz-input-bg: var(--tpz-input-bg);
    --tpz-input-border: var(--tpz-border);
    --tpz-input-text: var(--tpz-text);
    --tpz-input-ph: var(--tpz-placeholder);
    --tpz-green-rgb: 30, 122, 71;
    --tpz-deposit-bg: var(--tpz-green-dim);
    --tpz-deposit-border: var(--tpz-green-border);
    --tpz-deposit-color: var(--tpz-green);
    --tpz-withdrawal-bg: var(--tpz-danger-bg);
    --tpz-withdrawal-border: var(--tpz-danger-border);
    --tpz-withdrawal-color: var(--tpz-danger);
    --mfrc-bg: var(--tpz-bg);
    --mfrc-card: var(--tpz-surface);
    --mfrc-border: var(--tpz-border);
    --mfrc-text: var(--tpz-text);
    --mfrc-muted: var(--tpz-muted);
    --mfrc-green: var(--tpz-green);
    --mfrc-glow: var(--tpz-green-glow);
    --mfrc-input: var(--tpz-input-bg);
    --mfrc-input-bdr: var(--tpz-border);
    --mfrc-placeholder: var(--tpz-placeholder);
    --mfrc-quill-bg: var(--tpz-surface);
    --mfrc-quill-toolbar: var(--tpz-surface-2);
    --mfed-bg: var(--tpz-bg);
    --mfed-card: var(--tpz-surface);
    --mfed-border: var(--tpz-border);
    --mfed-text: var(--tpz-text);
    --mfed-muted: var(--tpz-muted);
    --mfed-green: var(--tpz-green);
    --mfed-glow: var(--tpz-green-glow);
    --mfed-tag-bg: var(--tpz-green-dim);
    --mfed-tag-bdr: var(--tpz-green-border);
    --mfed-input-bg: var(--tpz-input-bg);
    --mfed-input-bdr: var(--tpz-border);
    --mfed-danger: var(--tpz-danger);
    --mfed-danger-bg: var(--tpz-danger-bg);
    --mfed-danger-bdr: var(--tpz-danger-border);
    --mfrs-bg: var(--tpz-bg);
    --mfrs-card: var(--tpz-surface);
    --mfrs-border: var(--tpz-border);
    --mfrs-text: var(--tpz-text);
    --mfrs-muted: var(--tpz-muted);
    --mfrs-green: var(--tpz-green);
    --mfrs-glow: var(--tpz-green-glow);
    --mfrs-green-dim: var(--tpz-green-dim);
    --mfrs-green-bdr: var(--tpz-green-border);
    --mfrs-divider: var(--tpz-border);
    --mfrs-row-hover: var(--tpz-item-hover);
    --mfrs-head-bg: var(--tpz-surface-2);
    --mfrs-input-bg: var(--tpz-input-bg);
    --surface: var(--tpz-surface);
    --card: var(--tpz-surface-2);
    --card-hover: var(--tpz-surface);
    --border-hover: var(--tpz-border-hover);
    --text-sub: var(--tpz-muted);
    --green: var(--tpz-green);
    --green-dark: var(--tpz-green-dark);
    --green-dim: var(--tpz-green-dim);
    --green-glow: var(--tpz-green-glow);
    --red: #ef4444;
    --red-dim: rgba(239, 68, 68, 0.12);
    --red-bdr: rgba(220, 38, 38, 0.3);
    --amber: #f59e0b;
    --amber-dim: rgba(245, 158, 11, 0.12);
    --amber-bdr: rgba(245, 158, 11, 0.28);
    --credit-clr: var(--tpz-green);
    --credit-bg: var(--tpz-green-dim);
    --credit-bdr: var(--tpz-green-border);
    --debit-clr: #dc2626;
    --debit-bg: rgba(220, 38, 38, 0.1);
    --debit-bdr: rgba(220, 38, 38, 0.28);
    --shadow-card: var(--tpz-shadow);
    --shadow-hover: var(--tpz-shadow);

    /* ── Leaderboard page ── */
    --g: var(--tpz-green);
    --g2: var(--tpz-green-dark);
    --g-dim: var(--tpz-green-dim);
    --g-glow: var(--tpz-green-glow);
    --tx: var(--tpz-text);
    --mu: var(--tpz-muted);
    --bd: var(--tpz-border);
    --gold: var(--tpz-gold);
    --silver: var(--tpz-silver);
    --bronze: var(--tpz-bronze);
}

/* Layout-only admin tokens (not theme colors) */
:root {
    --adm-blur: 0px;
    --adm-radius: 14px;
    --d-radius: 12px;
    --d-radius-lg: 18px;
    --a-radius: 12px;
    --a-radius-lg: 18px;
}

/* Platform-wide dialog layer above every fixed navigation surface. */
:where(
    dialog[open],
    [role="dialog"],
    [role="alertdialog"],
    [aria-modal="true"],
    [class*="modal"].active,
    [class*="Modal"].active,
    [class*="overlay"].active,
    [class*="Overlay"].active,
    [class*="modal"].on,
    [class*="Modal"].on,
    [class*="overlay"].on,
    [class*="Overlay"].on,
    #tppingAuthOverlay,
    #tppIabModal,
    #tpp-phone-overlay,
    #tp-offline-modal,
    #tp-blocked-contact-modal,
    .tpping-auth-overlay,
    .tpping-browser-only-overlay,
    .tpping-mobile-more-modal,
    .tp-shell-mobile-menu.is-open,
    .tp-modal,
    .tp-share-modal,
    .tp-social-modal,
    .modal-overlay,
    .action-sheet-overlay,
    .chat-modal,
    .geo-chat-modal,
    .side-drawer,
    .full-image-modal-box,
    .ct-lockin-guide-overlay,
    .lockin-unpaid-bottom.visible,
    .tpz-overlay,
    .tp-pay-outage,
    .tp-session-ended-overlay,
    .modal.show
) { z-index: 2147483647 !important; }

.tp-shell-mobile-menu.is-open { z-index: 10001 !important; }
.modal-backdrop.show { z-index: 2147483646 !important; }
.tpping-mobile-more-overlay.active { z-index: 2147483646 !important; }

.modal-backdrop { z-index: 2147483646 !important; }
.modal { z-index: 2147483647 !important; }

:where([id*="toast" i], [class*="toast" i], [id*="notification" i], [class*="notification" i]) {
    z-index: 2147483647 !important;
}

html,
body {
    background-color: var(--tpz-bg, #080c10) !important;
}

/* Keep fullscreen game sessions on the selected page theme. */
#lockin-container {
    background: var(--bg, var(--tpz-bg, #080c10)) !important;
    color: var(--text, var(--tpz-text, #fff)) !important;
}

#lockin-container .lockin-header {
    background: transparent !important;
    border-bottom-color: transparent !important;
}

#lockin-container .lockin-header h2,
#lockin-container .lockin-title,
#lockin-container .lockin-body {
    color: var(--text, var(--tpz-text, #fff)) !important;
}

#lockin-container .lockin-demo-tag {
    color: var(--accent, var(--tpz-green, #30995b)) !important;
}

#lockin-container .demo-banner {
    display: none !important;
}

#lockin-container .btn-exit {
    background: var(--s1, var(--tpz-surface, #111519)) !important;
    border-color: var(--border, var(--tpz-border, rgba(255,255,255,.12))) !important;
    color: var(--text, var(--tpz-text, #fff)) !important;
}

#lockin-container .btn-exit:hover {
    background: var(--s2, var(--tpz-surface-2, #181e24)) !important;
}

#lockin-container .game-progress-bar,
#lockin-container .game-stats-row,
#lockin-container .hud-card,
#lockin-container .lockin-score-strip,
#lockin-container .lockin-score-strip-result,
#lockin-container #meter-header {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text, var(--tpz-text, #fff)) !important;
}

#lockin-container .gs-lbl,
#lockin-container .pr-stat-lbl,
#lockin-container .lss-key,
#lockin-container .hdr-label {
    color: var(--muted, var(--tpz-muted, #7a8694)) !important;
}

html:not(.dark) #lockin-container .hud-card .value,
html:not(.dark) #lockin-container .gs-val,
html:not(.dark) #lockin-container .pr-stat-val.text-accent,
html:not(.dark) #lockin-container .lss-val,
html:not(.dark) #lockin-container .hdr-value.green,
html:not(.dark) #lockin-container .res-score-big .val {
    color: var(--tpz-green-dark, #155e35) !important;
}

@media (max-width: 900px) {
    html:not([data-admin]) :where(
        .tp-modal.on,
        .tp-share-modal.on,
        .tp-social-modal.on,
        .tp-img-modal.on,
        .tpping-auth-overlay.active,
        #tppingAuthOverlay.active,
        .tp-modal-overlay.active,
        .tpfrd-modal-overlay.is-active,
        #tpp-phone-overlay,
        #tp-offline-modal.is-open,
        #tp-blocked-contact-modal.is-open,
        .tpping-browser-only-overlay.is-open,
        .tp-pay-outage.is-open,
        .ct-lockin-guide-overlay.active,
        .tp-pay-overlay.active,
        .swal2-container.swal2-shown
    ) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box !important;
        transform: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
    }

    html:not([data-admin]) :where(
        .tp-modal.on > .tp-mbox,
        .tp-share-modal.on > .tp-share-wrap,
        .tpping-auth-overlay.active > .tpping-auth-modal,
        #tppingAuthOverlay.active > .tpping-auth-modal,
        .tp-modal-overlay.active > .tp-modal-box,
        .tpfrd-modal-overlay.is-active > .tpfrd-modal-box,
        #tpp-phone-overlay > section
    ) {
        margin: auto !important;
        align-self: center !important;
        float: none !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: min(420px, 100%) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}