/* XFusion route-level premium override layer. Loaded after legacy route styles.
   Palette: pink · white · yellow · lemon (light theme). Legacy --cardinal-* names
   are kept as aliases below so other stylesheets never break. */

body {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 61, 139, .07), transparent 30rem),
    radial-gradient(circle at 100% 0%, rgba(255, 226, 61, .10), transparent 34rem),
    var(--cardinal-bg) !important;
  color: var(--cardinal-text) !important;
}

.page-wrap, .wrap, .auth-wrap { width: min(100%, 920px) !important; max-width: 920px !important; background: transparent !important; }
.page-wrap { min-height: 100vh; margin: 0 auto; padding-bottom: 104px !important; }

.topbar, .page-topbar {
  min-height: 70px !important;
  color: var(--cardinal-text) !important;
  background: rgba(255, 255, 255, .9) !important;
  border-bottom: 1px solid var(--cardinal-line) !important;
  box-shadow: 0 6px 22px rgba(255, 61, 139, .06) !important;
  backdrop-filter: blur(18px) !important;
}
.topbar-title { color: var(--cardinal-text) !important; }
.back-btn, .icon-btn { color: var(--cardinal-accent) !important; background: var(--cardinal-surface) !important; border: 1px solid var(--cardinal-line) !important; }

.wallet-card, .profile-hero, .ref-hero, .collect-hero, .salary-hero {
  color: #ffffff !important;
  background: var(--xf-hero) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  box-shadow: 0 12px 24px rgba(208, 21, 99, .16) !important;
}
.wallet-card { border-radius: 25px !important; }
.wallet-btn.payment, .wallet-btn.refund { color: #ffffff !important; background: rgba(255, 255, 255, .15) !important; border: 1px solid rgba(255, 255, 255, .25) !important; }
.wallet-btn.refund { background: rgba(0, 0, 0, .15) !important; }

.card, .form-card, .menu-group, .product-card, .payments-card, .contact-card, .hours-card, .checkin-card, .gift-hero, .method-card, .bal-card, .saved-card {
  background: var(--cardinal-surface) !important;
  border: 1px solid var(--cardinal-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04) !important;
}
.product-header { color: #ffffff !important; background: var(--xf-hero) !important; }
.product-price { color: #ffffff !important; }

.auth-body {
  min-height: 100vh !important;
  padding: 28px 18px !important;
  background: var(--cardinal-bg) !important;
}
.auth-hero, .hero {
  color: #ffffff !important;
  background: var(--xf-hero) !important;
}
.auth-body > .auth-wrap, .auth-wrap { background: transparent !important; }
.auth-body .form-card, .auth-body .auth-card, .body { background: var(--cardinal-surface) !important; }
.auth-title, .title { color: var(--cardinal-text) !important; }
.auth-sub, .sub { color: var(--cardinal-muted) !important; }
.auth-hero .logo, .auth-hero .logo-sub, .hero .logo, .hero .logo-sub { color: #ffffff !important; }
.auth-switch, .switch { color: var(--cardinal-muted) !important; }
.auth-switch a, .switch a, .forgot { color: var(--cardinal-accent) !important; }
.field input, .field-input, input, select, textarea { color: var(--cardinal-text) !important; background: var(--cardinal-surface-2) !important; border-color: var(--cardinal-line) !important; border-radius: var(--radius-sm) !important; }
.field input:focus, .field-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--cardinal-accent) !important; background: var(--cardinal-surface) !important; box-shadow: 0 0 0 3px rgba(255, 61, 139, .15) !important; }
.btn, .body .btn { border-radius: 13px !important; background: var(--xf-sweep) !important; color: var(--xf-ink) !important; box-shadow: 0 8px 16px rgba(208, 21, 99, .26) !important; }
.btn-outline { color: var(--cardinal-accent) !important; background: transparent !important; box-shadow: none !important; border: 1px solid var(--cardinal-accent) !important; }

.quick-item, .stat-box, .mini-product, .list-item, .menu-item, .member-item, .notif-item, .msg-item, .bc-item, .contact-item, .info-row, .dc-item, .ti-row { border-color: var(--cardinal-line) !important; background: var(--cardinal-surface) !important; }
.quick-item:hover, .menu-item:hover { background: var(--cardinal-surface-2) !important; }
.menu-icon, .quick-item-icon, .empty-icon, .hero-icon, .gift-icon, .checkin-icon, .info-icon, .saved-card-icon, .lock-icon, .ci-icon, .notif-icon, .vt-icon { color: var(--cardinal-accent-2) !important; background: rgba(255, 61, 139, .1) !important; }

.tabs, .level-tabs, .hist-tabs { background: var(--cardinal-surface-2) !important; border-color: var(--cardinal-line) !important; }
.tab, .ltab, .htab { color: var(--cardinal-muted) !important; background: transparent !important; }
.tab.on, .ltab.on, .htab.on, .tab.active, .ltab.active, .htab.active { color: var(--cardinal-accent) !important; background: var(--cardinal-surface) !important; box-shadow: 0 4px 8px rgba(255, 61, 139, .08) !important; }

.bottom-nav { background: rgba(255, 255, 255, .95) !important; border-color: var(--cardinal-line) !important; box-shadow: 0 -4px 12px rgba(0, 0, 0, .05) !important; }
.nav-item { color: var(--cardinal-muted) !important; }
.nav-item.active { color: var(--cardinal-accent-2) !important; }
.nav-icon { color: currentColor !important; background: transparent !important; }

/* Remove visual sticker glyphs if any legacy route text remains. */
.quick-item-icon, .nav-icon, .menu-icon, .empty-icon, .hero-icon, .gift-icon, .checkin-icon, .info-icon, .saved-card-icon, .lock-icon, .ci-icon, .notif-icon, .vt-icon, .avatar { font-size: 0 !important; }

@media (min-width: 780px) { .bottom-nav { display: none !important; } }

/* Auth forms are light content surfaces below the brand hero. */
.auth-body { color: var(--cardinal-text) !important; background: var(--cardinal-bg) !important; }
.auth-body .field-label, .auth-body label { color: var(--cardinal-muted) !important; }
.auth-body .auth-title, .auth-body .title { color: var(--cardinal-text) !important; }
.auth-body .auth-sub, .auth-body .sub { color: var(--cardinal-muted) !important; }


/* Reliable repository-served SVG icon layer */
.g-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; line-height: 0 !important; }
.g-icon svg { display: block; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; overflow: visible; }
.quick-item-icon.g-icon { flex: 0 0 38px !important; width: 38px !important; height: 38px !important; border-radius: 14px !important; color: var(--cardinal-accent) !important; background: rgba(255, 61, 139, .1) !important; }
.quick-item-icon.g-icon svg { width: 21px; height: 21px; }
.nav-icon.g-icon { flex: 0 0 25px !important; width: 25px !important; height: 25px !important; color: currentColor !important; background: transparent !important; }
.nav-icon.g-icon svg { width: 21px; height: 21px; }
.menu-icon.g-icon, .empty-icon.g-icon, .info-icon.g-icon, .saved-card-icon.g-icon, .lock-icon.g-icon, .ci-icon.g-icon, .notif-icon.g-icon, .vt-icon.g-icon, .avatar.g-icon { font-size: 0 !important; }
.menu-icon.g-icon svg, .empty-icon.g-icon svg, .info-icon.g-icon svg, .saved-card-icon.g-icon svg, .lock-icon.g-icon svg, .ci-icon.g-icon svg, .notif-icon.g-icon svg, .vt-icon.g-icon svg, .avatar.g-icon svg { width: 20px; height: 20px; }
.welcome-mark.g-icon { display: grid !important; place-items: center !important; transform: none !important; }
.welcome-mark.g-icon svg { width: 35px; height: 35px; color: var(--cardinal-accent-2); }

/* Reference-inspired dashboard composition */
.dashboard-brand-image { display: block; width: 100%; height: 190px; object-fit: contain; border-radius: 24px; background: var(--cardinal-surface); }
.dashboard-image-card { margin: 4px 16px 16px; padding: 10px; border: 1px solid var(--cardinal-line); border-radius: 28px; background: var(--cardinal-surface); box-shadow: 0 4px 12px rgba(0, 0, 0, .04); }
.dashboard-image-card img { display: block; width: 100%; height: 180px; object-fit: contain; border-radius: 22px; }
.dashboard-image-fallback { display: grid; place-items: center; min-height: 180px; padding: 24px; color: var(--cardinal-accent); border-radius: 22px; background: linear-gradient(135deg, var(--cardinal-surface-2), var(--cardinal-surface)); text-align: center; }
.dashboard-image-fallback .fallback-mark { width: 66px; height: 66px; margin-bottom: 12px; color: var(--cardinal-accent); }
.quick-grid.reference-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 18px; gap: 8px; }
.quick-grid.reference-actions .quick-item { min-height: 86px; padding: 12px 5px; border-radius: 21px; box-shadow: 0 4px 12px rgba(255, 61, 139, .07); }
.quick-grid.reference-actions .quick-item-icon.g-icon { width: 43px !important; height: 43px !important; flex-basis: 43px !important; border-radius: 50% !important; color: var(--cardinal-accent) !important; background: var(--cardinal-surface-2) !important; }
.quick-grid.reference-actions .quick-item-icon.g-icon svg { width: 22px; height: 22px; }
.dashboard-section-title { display: flex; align-items: center; justify-content: space-between; margin: 20px 18px 10px; }
.dashboard-section-title h2 { margin: 0; font-size: 1.05rem; color: var(--cardinal-text); }
.dashboard-section-title a { color: var(--cardinal-accent); font-weight: 800; }
.reference-popup .welcome-hero { padding: 22px 20px 18px !important; background: var(--xf-hero) !important; }
.reference-popup .welcome-dialog { max-width: 390px !important; border-radius: 28px !important; }
.reference-popup .welcome-body { max-height: min(66vh, 520px); overflow: auto; padding: 12px 16px 17px !important; }
.reference-popup .welcome-copy { margin: 0 0 12px !important; padding: 0 4px; text-align: left !important; color: var(--cardinal-text); }
.reference-popup .welcome-rules { display: grid; gap: 7px; margin: 0 0 14px; }
.reference-popup .welcome-rule { display: grid; grid-template-columns: 27px 1fr; gap: 10px; align-items: start; padding: 10px 8px; border-radius: 13px; background: var(--cardinal-surface-2); color: var(--cardinal-text); font-size: .8rem; line-height: 1.45; }
.reference-popup .welcome-rule b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #ffffff; background: var(--cardinal-accent); }
.reference-popup .welcome-rule strong { color: var(--cardinal-accent); }
.reference-popup .welcome-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reference-popup .welcome-links .welcome-action { padding: 12px 8px !important; border-radius: 14px !important; background: var(--xf-hero) !important; color: #ffffff !important; text-align: center; font-size: .77rem !important; }
@media (max-width: 520px) {
  .dashboard-image-card { margin-inline: 14px; }
  .dashboard-image-card img, .dashboard-brand-image, .dashboard-image-fallback { min-height: 155px; height: 155px; }
  .quick-grid.reference-actions { padding-inline: 14px; }
  .quick-grid.reference-actions .quick-item { min-height: 78px; font-size: .58rem; }
  .quick-grid.reference-actions .quick-item-icon.g-icon { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
}


/* XFusion premium shell: clean white surfaces, deep-pink actions, lemon highlights. */
:root {
  /* ---- canonical XFusion palette ---- */
  --xf-bg: #fff8fb;
  --xf-deep: #ffffff;
  --xf-surface: #ffffff;
  --xf-surface-2: #fdf3f8;
  --xf-line: rgba(255, 61, 139, .14);
  --xf-text: #2b2330;
  --xf-muted: #6f6478;
  --xf-placeholder: #b8aec0;
  --xf-ink: #2b2330;
  --xf-accent: #d01563;        /* deep pink  = primary / text-on-white links */
  --xf-accent-2: #ff3d8b;      /* vivid pink = bright partner / icons / active */
  --xf-pink: #ff3d8b;
  --xf-pink-deep: #d01563;
  --xf-pink-soft: #ffe3ef;
  --xf-lemon: #ffe23d;
  --xf-yellow: #ffc93c;
  --xf-hero-dark: #8a0e42;     /* dark anchor so white text stays legible on heroes */
  --xf-danger: #e11d48;
  --xf-sweep: linear-gradient(135deg, var(--xf-pink) 0%, var(--xf-yellow) 55%, var(--xf-lemon) 100%);
  --xf-hero:  linear-gradient(135deg, var(--xf-hero-dark) 0%, var(--xf-accent) 52%, var(--xf-accent-2) 100%);

  /* ---- legacy compatibility aliases (keeps other stylesheets working) ---- */
  --cardinal-bg: var(--xf-bg);
  --cardinal-deep: var(--xf-deep);
  --cardinal-surface: var(--xf-surface);
  --cardinal-surface-2: var(--xf-surface-2);
  --cardinal-line: var(--xf-line);
  --cardinal-text: var(--xf-text);
  --cardinal-muted: var(--xf-muted);
  --cardinal-accent: var(--xf-accent);
  --cardinal-accent-2: var(--xf-accent-2);
  --cardinal-blue: var(--xf-accent);
}

html { background: var(--cardinal-bg) !important; }
body {
  background:
    radial-gradient(circle at 92% -8%, rgba(255, 61, 139, .07), transparent 24rem),
    radial-gradient(circle at -8% 12%, rgba(255, 226, 61, .12), transparent 22rem),
    var(--cardinal-bg) !important;
  color: var(--cardinal-text) !important;
}
.page-wrap, .wrap, .auth-wrap {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  background: transparent !important;
}
.page-wrap { min-height: 100vh; padding-bottom: 104px !important; }

.topbar, .page-topbar {
  min-height: 68px !important;
  color: var(--cardinal-text) !important;
  background: rgba(255, 255, 255, .95) !important;
  border-bottom: 1px solid var(--cardinal-line) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04) !important;
  backdrop-filter: blur(18px) !important;
}
.topbar-title { color: var(--cardinal-text) !important; letter-spacing: -.01em; }
.back-btn, .icon-btn {
  color: var(--cardinal-text) !important;
  background: rgba(255, 255, 255, .8) !important;
  border: 1px solid var(--cardinal-line) !important;
}

.wallet-card, .profile-hero, .ref-hero, .collect-hero, .salary-hero {
  color: #ffffff !important;
  background: var(--xf-hero) !important;
  border: 1px solid rgba(255, 61, 139, .32) !important;
  box-shadow: 0 12px 24px rgba(208, 21, 99, .16) !important;
}
.wallet-card { border-radius: 0 0 28px 28px !important; }
.wallet-btn.payment, .wallet-btn.refund {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
}
.wallet-btn.refund { background: rgba(0, 0, 0, .15) !important; }

.card, .form-card, .menu-group, .product-card, .payments-card, .contact-card, .hours-card, .checkin-card, .gift-hero, .method-card, .bal-card, .saved-card, .strip-card {
  background: var(--cardinal-surface) !important;
  color: var(--cardinal-text) !important;
  border: 1px solid var(--cardinal-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04) !important;
}
.product-header { color: #ffffff !important; background: var(--xf-hero) !important; }
.product-price, .strip-val { color: #ffffff !important; }

.auth-body {
  color: var(--cardinal-text) !important;
  background: var(--cardinal-bg) !important;
  border-top: 1px solid var(--cardinal-line);
}
.auth-hero, .hero {
  color: #ffffff !important;
  text-align: left !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 226, 61, .18), transparent 12rem),
    var(--xf-hero) !important;
  border-radius: 0 0 28px 28px !important;
}
.auth-body > .auth-wrap, .auth-wrap { background: transparent !important; }
.auth-body .form-card, .auth-body .auth-card { background: var(--cardinal-surface) !important; border: 1px solid var(--cardinal-line); }
.auth-title, .title { color: var(--cardinal-text) !important; }
.auth-sub, .sub, .auth-switch, .switch { color: var(--cardinal-muted) !important; }
.auth-hero .logo, .auth-hero .logo-sub, .hero .logo, .hero .logo-sub { color: #ffffff !important; }
.auth-switch a, .switch a, .forgot { color: var(--cardinal-accent) !important; }
.field-label, .auth-body label { color: var(--cardinal-muted) !important; }
.field input, .field-input, input, select, textarea {
  color: var(--cardinal-text) !important;
  caret-color: var(--cardinal-accent-2) !important;
  background: var(--cardinal-surface-2) !important;
  border-color: var(--cardinal-line) !important;
  border-radius: 14px !important;
}
.field input::placeholder, .field-input::placeholder, input::placeholder, textarea::placeholder { color: var(--xf-placeholder) !important; }
.field input:focus, .field-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--cardinal-accent) !important;
  background: var(--cardinal-surface) !important;
  box-shadow: 0 0 0 3px rgba(255, 61, 139, .15) !important;
}
.btn, .body .btn {
  border-radius: 14px !important;
  background: var(--xf-sweep) !important;
  color: var(--xf-ink) !important;
  box-shadow: 0 8px 16px rgba(208, 21, 99, .26) !important;
}
.btn-outline { color: var(--cardinal-accent) !important; background: transparent !important; border-color: var(--cardinal-accent) !important; box-shadow: none !important; }

.quick-item, .stat-box, .mini-product, .list-item, .menu-item, .member-item, .notif-item, .msg-item, .bc-item, .contact-item, .info-row, .dc-item, .ti-row {
  border-color: var(--cardinal-line) !important;
  background: var(--cardinal-surface) !important;
  color: var(--cardinal-text) !important;
}
.quick-item:hover, .menu-item:hover { background: var(--cardinal-surface-2) !important; }
.menu-label, .li-title, .menu-item strong, .list-item strong { color: var(--cardinal-text) !important; }
.menu-sub, .li-sub, .section-title, .strip-lbl, .muted, .text-muted { color: var(--cardinal-muted) !important; }
.menu-arrow { color: var(--cardinal-accent) !important; }
.menu-icon, .quick-item-icon, .empty-icon, .hero-icon, .gift-icon, .checkin-icon, .info-icon, .saved-card-icon, .lock-icon, .ci-icon, .notif-icon, .vt-icon {
  color: var(--cardinal-accent-2) !important;
  background: rgba(255, 61, 139, .1) !important;
}

.tabs, .level-tabs, .hist-tabs { background: var(--cardinal-surface-2) !important; border-color: var(--cardinal-line) !important; }
.tab, .ltab, .htab { color: var(--cardinal-muted) !important; background: transparent !important; }
.tab.on, .ltab.on, .htab.on, .tab.active, .ltab.active, .htab.active {
  color: var(--cardinal-accent) !important;
  background: var(--cardinal-surface) !important;
  box-shadow: inset 0 -2px 0 var(--cardinal-accent-2) !important;
}

.bottom-nav {
  background: rgba(255, 255, 255, .95) !important;
  border-color: var(--cardinal-line) !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .05) !important;
}
.nav-item { color: var(--cardinal-muted) !important; }
.nav-item.active { color: var(--cardinal-accent-2) !important; }
.nav-icon { color: currentColor !important; background: transparent !important; }

.profile-hero { padding-top: 34px !important; }
.cards-strip { margin-top: -22px !important; }
.section-title { color: var(--cardinal-muted) !important; }
.logout-btn { color: var(--xf-danger) !important; border-color: rgba(225, 29, 72, .3) !important; background: rgba(225, 29, 72, .08) !important; }

.gift-hero, .checkin-card, .method-card { color: var(--cardinal-text) !important; }
.gift-hero { background: var(--xf-hero) !important; color: #ffffff !important; }
.checkin-card { background: var(--xf-hero) !important; color: #ffffff !important; }
.checkin-btn { color: #ffffff !important; background: var(--xf-hero) !important; }
.amt-chip { background: var(--cardinal-surface-2) !important; border-color: var(--cardinal-line) !important; color: var(--cardinal-text) !important; }
.amt-chip.on { background: var(--cardinal-accent) !important; border-color: var(--cardinal-accent-2) !important; color: #ffffff !important; }
.transfer-info, .ti-row, .method-card .ti-label { color: var(--cardinal-text) !important; }
.ti-label { color: var(--cardinal-muted) !important; }
.ti-val { color: var(--cardinal-text) !important; }
.copy-btn { background: rgba(255, 61, 139, .1) !important; color: var(--cardinal-accent) !important; }

.dashboard-image-card { background: var(--cardinal-surface) !important; border-color: var(--cardinal-line) !important; }
.dashboard-section-title h2 { color: var(--cardinal-text) !important; }
.dashboard-section-title a { color: var(--cardinal-accent) !important; }

.reference-popup .welcome-hero { background: var(--xf-hero) !important; }
.reference-popup .welcome-dialog { border: 1px solid var(--cardinal-line) !important; box-shadow: 0 12px 24px rgba(208, 21, 99, .16) !important; }
.reference-popup .welcome-body { background: var(--cardinal-surface) !important; }

@media (min-width: 780px) {
  body { padding: 0 18px; }
  .page-wrap, .auth-wrap { margin: 18px auto; border: 1px solid var(--cardinal-line); border-radius: 28px; overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, .06); }
}

@media (max-width: 520px) {
  .page-wrap { padding-bottom: 92px !important; }
  .topbar { min-height: 64px !important; }
  .card, .form-card, .menu-group, .product-card, .payments-card, .contact-card, .hours-card, .checkin-card, .gift-hero, .method-card, .bal-card, .saved-card { border-radius: 22px !important; }
}


/* Auth contrast guard for light reference-inspired surfaces. */
body .auth-body .auth-title,
body .auth-body .title,
body .auth-body h1,
body .auth-body h2,
body .auth-body h3 { color: var(--cardinal-text) !important; }
body .auth-body .auth-sub,
body .auth-body .sub,
body .auth-body .auth-switch,
body .auth-body .switch,
body .auth-body .divider-row span { color: var(--cardinal-muted) !important; }
body .auth-body .field-label,
body .auth-body label { color: var(--cardinal-muted) !important; }
body .auth-body .auth-switch a,
body .auth-body .switch a,
body .auth-body .forgot { color: var(--cardinal-accent) !important; }
body .auth-body .alert { color: var(--cardinal-text) !important; }


/* Final XFusion palette lock. Comes last so legacy page-local rules cannot reintroduce blue/green/dark accents. */
:root {
  --cardinal-bg: var(--xf-bg);
  --cardinal-surface: var(--xf-surface);
  --cardinal-surface-2: var(--xf-surface-2);
  --cardinal-line: var(--xf-line);
  --cardinal-text: var(--xf-text);
  --cardinal-muted: var(--xf-muted);
  --cardinal-accent: var(--xf-accent);
  --cardinal-accent-2: var(--xf-accent-2);
}
html { background: var(--cardinal-bg) !important; }
body {
  color: var(--cardinal-text) !important;
  background:
    radial-gradient(circle at 92% -8%, rgba(255, 61, 139, .07), transparent 24rem),
    radial-gradient(circle at -8% 12%, rgba(255, 226, 61, .12), transparent 22rem),
    var(--cardinal-bg) !important;
}
.topbar, .page-topbar { color: var(--cardinal-text) !important; background: rgba(255, 255, 255, .95) !important; border-color: var(--cardinal-line) !important; }
.topbar-title, .back-btn, .icon-btn { color: var(--cardinal-text) !important; }
.back-btn, .icon-btn { background: rgba(255, 255, 255, .8) !important; border-color: var(--cardinal-line) !important; }
.wallet-card, .profile-hero, .ref-hero, .collect-hero, .salary-hero, .gift-hero, .checkin-card, .auth-hero, .hero, .product-header {
  color: #ffffff !important;
  background: var(--xf-hero) !important;
  border-color: rgba(255, 61, 139, .3) !important;
}
.card, .form-card, .menu-group, .product-card, .payments-card, .contact-card, .hours-card, .method-card, .bal-card, .saved-card, .strip-card, .auth-card, .body {
  color: var(--cardinal-text) !important;
  background: var(--cardinal-surface) !important;
  border-color: var(--cardinal-line) !important;
}
.quick-item, .stat-box, .mini-product, .list-item, .menu-item, .member-item, .notif-item, .msg-item, .bc-item, .contact-item, .info-row, .dc-item, .ti-row {
  color: var(--cardinal-text) !important;
  background: var(--cardinal-surface) !important;
  border-color: var(--cardinal-line) !important;
}
.menu-label, .li-title, .menu-item strong, .list-item strong, .dashboard-section-title h2, .auth-title, .title, .field-input, input, select, textarea { color: var(--cardinal-text) !important; }
.menu-sub, .li-sub, .section-title, .strip-lbl, .muted, .text-muted, .auth-sub, .sub, .auth-switch, .switch { color: var(--cardinal-muted) !important; }
.menu-icon, .quick-item-icon, .empty-icon, .hero-icon, .gift-icon, .checkin-icon, .info-icon, .saved-card-icon, .lock-icon, .ci-icon, .notif-icon, .vt-icon { color: var(--cardinal-accent-2) !important; background: rgba(255, 61, 139, .1) !important; }
.tabs, .level-tabs, .hist-tabs { background: var(--cardinal-surface-2) !important; border-color: var(--cardinal-line) !important; }
.tab.on, .ltab.on, .htab.on, .tab.active, .ltab.active, .htab.active { color: var(--cardinal-accent) !important; background: var(--cardinal-surface) !important; box-shadow: inset 0 -2px 0 var(--cardinal-accent-2) !important; }
.field input, .field-input, input, select, textarea { background: var(--cardinal-surface-2) !important; border-color: var(--cardinal-line) !important; caret-color: var(--cardinal-accent-2) !important; }
.field input:focus, .field-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--cardinal-accent) !important; box-shadow: 0 0 0 3px rgba(255, 61, 139, .15) !important; }
.btn, .body .btn, .btn-primary, .btn-purple, .btn-sky { color: var(--xf-ink) !important; background: var(--xf-sweep) !important; }
.btn-outline { color: var(--cardinal-accent) !important; background: transparent !important; border-color: var(--cardinal-accent) !important; }
.auth-body { color: var(--cardinal-text) !important; background: var(--cardinal-bg) !important; }
.auth-hero .logo, .auth-hero .logo-sub, .hero .logo, .hero .logo-sub { color: #ffffff !important; }
.auth-body .auth-title, .auth-body .title, .auth-body h1, .auth-body h2, .auth-body h3 { color: var(--cardinal-text) !important; }
.auth-body .field-label, .auth-body label { color: var(--cardinal-muted) !important; }
.auth-switch a, .switch a, .forgot, .dashboard-section-title a, .menu-arrow, .product-price, .strip-val { color: var(--cardinal-accent) !important; }
.nav-item.active, .nav-icon { color: var(--cardinal-accent-2) !important; }
.bottom-nav { background: rgba(255, 255, 255, .95) !important; border-color: var(--cardinal-line) !important; }
.nav-item { color: var(--cardinal-muted) !important; }
#welcomeOverlay { background: rgba(43, 35, 48, .5) !important; }
#welcomeOverlay .welcome-hero, .reference-popup .welcome-hero { background: var(--xf-hero) !important; color: #ffffff !important; }
#welcomeOverlay .welcome-dialog, .reference-popup .welcome-dialog { border-color: var(--cardinal-line) !important; background: var(--cardinal-surface) !important; color: var(--cardinal-text) !important; }
#welcomeOverlay .welcome-action, .reference-popup .welcome-links .welcome-action { color: #ffffff !important; background: var(--xf-hero) !important; }