/* ============================================================
   FinalZone BD — "M3" Design System
   Custom CSS inspired by Material 3 (tokens + component skins).
   Loaded AFTER the vendor theme; it re-skins Bootstrap/Vuexy
   components so every page shares one visual language.
   Brand seed: #696cff
   ============================================================ */

:root {
  /* ── Color roles (Material-3 style, seeded from #696cff) ── */
  --m3-primary:               #696cff;
  --m3-primary-dark:          #5558e6;   /* hover / pressed */
  --m3-on-primary:            #ffffff;
  --m3-primary-container:     #e5e6ff;
  --m3-on-primary-container:  #23259e;

  --m3-secondary:             #8592a3;
  --m3-secondary-container:   #e9edf2;
  --m3-on-secondary-container:#3d4753;

  --m3-tertiary:              #9c4dff;   /* purple accent (AI topup, podium) */
  --m3-tertiary-dark:         #7c3aed;
  --m3-tertiary-container:    #f1e7ff;
  --m3-on-tertiary-container: #4d1d95;

  --m3-success:               #22c55e;
  --m3-success-dark:          #16a34a;
  --m3-success-container:     #dcfce7;
  --m3-on-success-container:  #14532d;

  --m3-warning:               #f59e0b;
  --m3-warning-dark:          #d97706;
  --m3-warning-container:     #fef3c7;
  --m3-on-warning-container:  #78350f;

  --m3-error:                 #ef4444;
  --m3-error-dark:            #dc2626;
  --m3-error-container:       #fee2e2;
  --m3-on-error-container:    #7f1d1d;

  --m3-info:                  #06b6d4;
  --m3-info-container:        #cffafe;
  --m3-on-info-container:     #164e63;

  /* ── Surfaces ── */
  --m3-surface:               #ffffff;
  --m3-surface-dim:           #f4f5fb;   /* app background */
  --m3-surface-container-low: #fafaff;
  --m3-surface-container:     #f4f5fb;
  --m3-surface-container-high:#eef0f8;
  --m3-on-surface:            #2d2f52;
  --m3-on-surface-variant:    #6b7280;
  --m3-on-surface-muted:      #9ca3af;
  --m3-inverse-surface:       #1e1e32;
  --m3-inverse-on-surface:    #f1f1fb;

  /* ── Outline ── */
  --m3-outline:               #d5d9e6;
  --m3-outline-variant:       #e8eaf0;

  /* ── Shape scale ── */
  --m3-shape-xs:  8px;
  --m3-shape-sm:  12px;
  --m3-shape-md:  16px;
  --m3-shape-lg:  20px;
  --m3-shape-xl:  28px;
  --m3-shape-full:100px;

  /* ── Elevation ── */
  --m3-elev-1: 0 1px 2px rgba(20,21,56,.05), 0 1px 3px rgba(20,21,56,.06);
  --m3-elev-2: 0 2px 6px rgba(20,21,56,.06), 0 5px 14px rgba(20,21,56,.08);
  --m3-elev-3: 0 8px 28px rgba(20,21,56,.13);
  --m3-elev-primary: 0 8px 24px rgba(105,108,255,.28);

  /* ── State layers ── */
  --m3-state-hover:  rgba(105,108,255,.08);
  --m3-state-press:  rgba(105,108,255,.12);

  /* ── Motion ── */
  --m3-ease: cubic-bezier(.2,0,0,1);
  --m3-dur:  .25s;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--m3-surface-dim);
  color: var(--m3-on-surface);
}
.cursor-pointer { cursor: pointer; }

/* ============================================================
   CARDS — M3 filled/elevated card, 16px shape
   ============================================================ */
.card {
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-md) !important;
  box-shadow: none;
  transition: box-shadow var(--m3-dur) var(--m3-ease),
              transform var(--m3-dur) var(--m3-ease),
              border-color var(--m3-dur) var(--m3-ease);
}
.card .card-header {
  border-bottom: 1px solid var(--m3-outline-variant);
  background: transparent;
}
.card .card-header:first-child { border-radius: var(--m3-shape-md) var(--m3-shape-md) 0 0; }

/* ============================================================
   BUTTONS — M3 pill buttons with state layers
   ============================================================ */
.btn {
  border-radius: var(--m3-shape-full);
  font-weight: 600;
  transition: background var(--m3-dur) var(--m3-ease),
              color var(--m3-dur) var(--m3-ease),
              border-color var(--m3-dur) var(--m3-ease),
              box-shadow var(--m3-dur) var(--m3-ease),
              transform .15s var(--m3-ease);
}
.btn:active { transform: scale(.985); }
.btn-primary {
  background: var(--m3-primary);
  border-color: var(--m3-primary);
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--m3-primary-dark) !important;
  border-color: var(--m3-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(105,108,255,.30);
}
.btn-outline-primary { color: var(--m3-primary); border-color: var(--m3-outline); }
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--m3-state-hover);
  border-color: var(--m3-primary);
  color: var(--m3-primary);
}
.btn-outline-secondary { border-color: var(--m3-outline); }
.btn-icon { border-radius: 50% !important; }
/* keep icon-only buttons circular even inside groups */
.btn.rounded-circle { border-radius: 50% !important; }

/* ============================================================
   FORMS — soft 12px fields, primary focus ring
   ============================================================ */
.form-control, .form-select, .input-group-text {
  border-radius: var(--m3-shape-sm);
  border-color: var(--m3-outline);
}
.form-control:focus, .form-select:focus {
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(105,108,255,.14);
}
/* Inside an input-group the ring belongs to the whole group, not the
   individual control — otherwise the ring cuts through the addons. */
.input-group { border-radius: var(--m3-shape-sm); }
.input-group .form-control:focus,
.input-group .form-select:focus { box-shadow: none; }
.input-group:focus-within { box-shadow: 0 0 0 3px rgba(105,108,255,.14); }
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .form-select,
.input-group:focus-within .btn { border-color: var(--m3-primary); }
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--m3-shape-sm); border-bottom-left-radius: var(--m3-shape-sm); }
.input-group > :last-child { border-top-right-radius: var(--m3-shape-sm); border-bottom-right-radius: var(--m3-shape-sm); }
.form-label { font-weight: 600; color: var(--m3-on-surface); }

/* ============================================================
   MODALS — M3 dialog, 28px shape, tonal header
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--m3-shape-xl);
  box-shadow: var(--m3-elev-3);
}
.modal-header {
  background: var(--m3-surface-container);
  border-bottom: 1px solid var(--m3-outline-variant);
  padding: 14px 20px;
  border-radius: var(--m3-shape-xl) var(--m3-shape-xl) 0 0;
}
.modal-title {
  font-weight: 800;
  font-size: .96rem;
  color: var(--m3-on-surface);
  display: flex; align-items: center;
}
.modal-title i { color: var(--m3-primary); }
.modal-body { padding: 18px 20px; }
.modal-footer {
  border-top: 1px solid var(--m3-outline-variant);
  padding: 12px 20px;
  gap: 8px;
}
.modal-footer > * { margin: 0; }
/* neutral tonal "Cancel" */
.modal-footer .btn-secondary,
.modal-footer .btn-outline-secondary {
  background: var(--m3-surface-container-high);
  border: none;
  color: var(--m3-on-surface-variant);
}
.modal-footer .btn-secondary:hover,
.modal-footer .btn-outline-secondary:hover {
  background: var(--m3-outline-variant);
  color: var(--m3-on-surface);
}
/* close (X) floats outside the dialog's top-right corner.
   Vuexy positions it inside the header (position:relative + top/right),
   so re-anchor to .modal-content and out-rank its rule. */
.modal .modal-header { position: static; }
.modal .modal-content .btn-close {
  position: absolute !important;
  top: -8px !important;     /* center rides the 28px corner arc: half in, half out */
  right: -8px !important;
  width: 32px !important; height: 32px !important;
  margin: 0; padding: 0;
  transform: none !important; /* Vuexy shifts it by translate(23px,-25px) via html:not([dir=rtl]) */
  background-color: var(--m3-surface);
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: var(--m3-elev-2);
  opacity: 1;
  z-index: 5;
  transition: transform .15s var(--m3-ease), box-shadow .15s var(--m3-ease);
}
.modal .modal-content .btn-close:hover {
  transform: scale(1.08) rotate(90deg) !important;
  box-shadow: var(--m3-elev-3);
  opacity: 1;
}
.modal .modal-content .btn-close:focus { box-shadow: var(--m3-elev-2), 0 0 0 3px rgba(105,108,255,.25); }
/* M3 entrance: settle up + scale instead of the long drop */
.modal.fade .modal-dialog {
  transform: translateY(14px) scale(.98);
  transition: transform .22s var(--m3-ease);
}
.modal.show .modal-dialog { transform: none; }
.modal-backdrop { background-color: #14153a; }

/* ============================================================
   BADGES & CHIPS — 8px chip shape
   ============================================================ */
.badge {
  border-radius: var(--m3-shape-xs);
  font-weight: 600;
  letter-spacing: .02em;
}
.badge.rounded-pill { border-radius: var(--m3-shape-full); }
.bg-primary { background-color: var(--m3-primary) !important; }
.bg-label-primary { background-color: var(--m3-primary-container) !important; color: var(--m3-on-primary-container) !important; }
.bg-label-success { background-color: var(--m3-success-container) !important; color: var(--m3-on-success-container) !important; }
.bg-label-warning { background-color: var(--m3-warning-container) !important; color: var(--m3-on-warning-container) !important; }
.bg-label-danger  { background-color: var(--m3-error-container) !important; color: var(--m3-on-error-container) !important; }
.bg-label-info    { background-color: var(--m3-info-container) !important; color: var(--m3-on-info-container) !important; }
.bg-label-secondary { background-color: var(--m3-secondary-container) !important; color: var(--m3-on-secondary-container) !important; }
.bg-primary-subtle   { background-color: var(--m3-primary-container) !important; }
.bg-secondary-subtle { background-color: var(--m3-secondary-container) !important; }
.bg-success-subtle   { background-color: var(--m3-success-container) !important; }
.bg-warning-subtle   { background-color: var(--m3-warning-container) !important; }
.bg-danger-subtle    { background-color: var(--m3-error-container) !important; }

/* ============================================================
   ALERTS — tonal containers
   ============================================================ */
.alert {
  border: none;
  border-left: 4px solid transparent;
  border-radius: var(--m3-shape-sm);
  font-size: .875rem;
}
.alert-primary { background: var(--m3-primary-container); color: var(--m3-on-primary-container); border-left-color: var(--m3-primary); }
.alert-primary .alert-link { color: var(--m3-primary-dark); }
.alert-success { background: var(--m3-success-container); color: var(--m3-on-success-container); border-left-color: var(--m3-success); }
.alert-warning { background: var(--m3-warning-container); color: var(--m3-on-warning-container); border-left-color: var(--m3-warning); }
.alert-danger  { background: var(--m3-error-container);  color: var(--m3-on-error-container); border-left-color: var(--m3-error); }
.alert-info    { background: var(--m3-info-container);   color: var(--m3-on-info-container); border-left-color: var(--m3-info); }

/* ============================================================
   LIST GROUP
   ============================================================ */
.list-group { border-radius: var(--m3-shape-md); border: 1px solid var(--m3-outline-variant); overflow: hidden; }
.list-group-item { border-color: var(--m3-outline-variant); }
.list-group-item-action:hover { background: var(--m3-surface-container); }
.list-group-item-action:active { background: var(--m3-surface-container-high); }

/* ============================================================
   TABLES
   ============================================================ */
.table th {
  font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--m3-on-surface-variant);
}
.table-hover tbody tr:hover { background: var(--m3-surface-container-low); }

/* ============================================================
   NAV PILLS / TABS
   ============================================================ */
.nav-pills .nav-link { color: var(--m3-primary); border-radius: var(--m3-shape-full); }
.nav-pills .nav-link.active { background: var(--m3-primary); color: var(--m3-on-primary); }

/* ============================================================
   ACCORDION
   ============================================================ */
.accordion-item { border-color: var(--m3-outline-variant); }
.accordion-button:not(.collapsed) {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(105,108,255,.14); }

/* ============================================================
   PROGRESS
   ============================================================ */
.progress { border-radius: var(--m3-shape-full); background: var(--m3-surface-container-high); }
.progress-bar { border-radius: var(--m3-shape-full); background-color: var(--m3-primary); }

/* ============================================================
   TOP APP BAR (front + admin navbar polish)
   ============================================================ */
.layout-navbar .navbar, nav.layout-navbar {
  box-shadow: 0 1px 0 var(--m3-outline-variant), 0 1px 10px rgba(20,21,56,.04);
}

/* Keep the top app bar pinned on desktop too. The template only fixes the
   navbar below 1200px (via a JS-toggled .layout-navbar-fixed class); at
   ≥1200px it was position:relative and scrolled away with the page. Pin it
   and offset the content so nothing hides beneath it — matching the mobile
   behaviour (fixed, z-index 1080, 3.5rem tall). */
@media (min-width: 1200px) {
  .layout-navbar-full .layout-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1080;
  }
  /* offset the content below the now-fixed bar. We pad .content-wrapper
     (not .layout-page — the template force-zeroes that one with !important). */
  .layout-navbar-full .content-wrapper {
    padding-top: 3.5rem;
  }
}

/* ============================================================
   FLOATING BOTTOM NAVIGATION — M3 navigation bar
   Detached, pill-shaped, elevated, safe-area aware.
   ============================================================ */
#bottomNav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 24px);
  max-width: 520px;
  z-index: 1030;                     /* below modals (1090) */
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-xl);
  box-shadow: var(--m3-elev-3);
  overflow: hidden;
}
#bottomNav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 6px; /* safe-area inset handled by the nav's bottom offset */
  height: 68px;
}
#bottomNav .nav-item { flex: 1; min-width: 0; }
#bottomNav .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px 0;
  gap: 3px;
  color: var(--m3-on-surface-variant);
  text-decoration: none;
  position: relative;
  transition: color var(--m3-dur) var(--m3-ease);
  -webkit-tap-highlight-color: transparent;
}
/* M3 active pill indicator behind the icon */
#bottomNav .nav-link .nav-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 28px;
  border-radius: var(--m3-shape-full);
  background: transparent;
  transition: background var(--m3-dur) var(--m3-ease);
}
#bottomNav .nav-link i {
  font-size: 1.28rem;
  line-height: 1;
  transition: transform var(--m3-dur) var(--m3-ease);
}
#bottomNav .nav-link > span:last-child {
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#bottomNav .nav-link:hover .nav-indicator { background: var(--m3-state-hover); }
#bottomNav .nav-link.active { color: var(--m3-primary); }
#bottomNav .nav-link.active .nav-indicator { background: var(--m3-primary-container); }
#bottomNav .nav-link.active .nav-indicator i { color: var(--m3-on-primary-container); }
#bottomNav .nav-link.active > span:last-child { font-weight: 700; }
@keyframes m3NavPop {
  0%   { transform: scale(.85); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
#bottomNav .nav-link.active i { animation: m3NavPop .3s var(--m3-ease); }

/* content clearance for the floating nav (+ demo banner) — generous so
   the last card is always fully visible above the floating elements.
   Selector mirrors core.css's `html:not(.layout-footer-fixed) .content-wrapper
   { padding-bottom: 0 !important }` so this later sheet wins the cascade. */
html:not(.layout-footer-fixed) .content-wrapper,
.content-wrapper {
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============================================================
   SHARED APP WIDGETS
   ============================================================ */
/* Balance chip in top bar */
.balance-badge {
  background: linear-gradient(135deg, var(--m3-primary) 0%, var(--m3-primary-dark) 100%);
  color: var(--m3-on-primary);
  padding: 5px 14px;
  border-radius: var(--m3-shape-full);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(105,108,255,.25);
}

/* Back / refresh icon buttons */
.app-back, .app-refresh {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--m3-outline-variant);
  background: var(--m3-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer; flex-shrink: 0;
  transition: background .15s var(--m3-ease), box-shadow .15s var(--m3-ease);
  padding: 0; outline: none;
  color: var(--m3-on-surface);
}
.app-back:hover  { background: var(--m3-surface-container); box-shadow: var(--m3-elev-1); }
.app-refresh { color: var(--m3-primary); font-size: 1rem; }
.app-refresh:hover { background: var(--m3-primary-container); box-shadow: var(--m3-elev-1); }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--m3-surface-container-high) 25%, var(--m3-outline-variant) 37%, var(--m3-surface-container-high) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: var(--m3-shape-xs);
}
@keyframes skeletonShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Image fade-in */
img.lazy-img { opacity: 0; transition: opacity .35s ease; }
img.lazy-img.loaded { opacity: 1; }

/* ============================================================
   VENDOR SKINS — toastr + SweetAlert2 aligned to M3
   ============================================================ */
/* selector mirrors toastr's own `#toast-container:not(...) > div` width rule
   (22em !important) and adds .toast to out-rank it */
#toast-container:not(.toast-bottom-full-width, .toast-top-full-width) > div.toast,
#toast-container > div {
  background-color: var(--m3-surface) !important;
  border: 1px solid var(--m3-outline-variant);
  border-left-width: 4px;
  border-radius: var(--m3-shape-md) !important;
  box-shadow: var(--m3-elev-3) !important;
  opacity: 1 !important;
  position: relative;
  width: min(300px, calc(100vw - 24px)) !important;
  padding: 11px 34px 11px 52px !important;
  background-position: 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 26px !important;
  color: var(--m3-on-surface);
  animation: m3ToastIn .32s var(--m3-ease);
  will-change: transform, opacity;
}
@keyframes m3ToastIn {
  from { opacity: 0; transform: translateX(28px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
#toast-container > div:hover { box-shadow: var(--m3-elev-3) !important; }
#toast-container > .toast-success { border-left-color: var(--m3-success); }
#toast-container > .toast-error   { border-left-color: var(--m3-error); }
#toast-container > .toast-info    { border-left-color: var(--m3-primary); }
#toast-container > .toast-warning { border-left-color: var(--m3-warning); }
#toast-container .toast-title { font-weight: 800; font-size: .82rem; color: var(--m3-on-surface); }
#toast-container .toast-message { font-size: .74rem; color: var(--m3-on-surface-variant); margin-top: 1px; }
#toast-container .toast-close-button {
  position: absolute !important;
  top: 7px !important; right: 7px !important;
  float: none; margin: 0; padding: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface-variant);
  text-shadow: none; opacity: 1;
  font-size: 13px; font-weight: 700; line-height: 1;
  transition: background .15s var(--m3-ease), color .15s var(--m3-ease);
}
#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
  background: var(--m3-outline-variant);
  color: var(--m3-on-surface);
  opacity: 1;
}
/* mobile sizing */
@media (max-width: 480px) {
  #toast-container:not(.toast-bottom-full-width, .toast-top-full-width) > div.toast,
  #toast-container > div {
    width: min(280px, calc(100vw - 24px)) !important;
    padding: 10px 32px 10px 48px !important;
    background-position: 12px center !important;
    background-size: 24px !important;
  }
  #toast-container .toast-title { font-size: .78rem; }
  #toast-container .toast-message { font-size: .71rem; }
}
.toast-progress { opacity: .25 !important; }
.toast-success .toast-progress { background: var(--m3-success); }
.toast-error .toast-progress   { background: var(--m3-error); }
.toast-info .toast-progress    { background: var(--m3-primary); }
.toast-warning .toast-progress { background: var(--m3-warning); }

/* Keep the SweetAlert overlay above the fixed top app bar.
   On ≤1199.98px the navbar is position:fixed; z-index:1080 (core.css), and
   SweetAlert2's container defaults to z-index:1060 — so the navbar would paint
   ON TOP of the alert (Bootstrap modals escape this because the template lowers
   the navbar on body.modal-open, a class SweetAlert2 never sets). Lift the
   container above the navbar and modals (--bs-modal-zindex:1090) so the alert
   is always the topmost layer. */
.swal2-container { z-index: 10600 !important; }

.swal2-popup {
  border-radius: var(--m3-shape-xl) !important;
  box-shadow: var(--m3-elev-3) !important;
  padding: 1.7rem 1.5rem 1.6rem !important;
  color: var(--m3-on-surface) !important;
}
.swal2-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--m3-on-surface) !important;
}
.swal2-html-container {
  font-size: .9rem !important;
  color: var(--m3-on-surface-variant) !important;
  line-height: 1.7 !important;
}
.swal2-actions { gap: 10px !important; margin-top: 1.4em !important; }
.swal2-styled {
  border-radius: var(--m3-shape-full) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  padding: .62em 1.7em !important;
  transition: transform .15s var(--m3-ease), box-shadow .15s var(--m3-ease) !important;
}
.swal2-styled:hover { transform: translateY(-1px); }
.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-cancel:focus { box-shadow: 0 0 0 3px rgba(105,108,255,.25) !important; }
/* icons on the token palette */
.swal2-icon { border-width: 3px !important; }
.swal2-icon.swal2-warning  { border-color: var(--m3-warning) !important;  color: var(--m3-warning-dark) !important; }
.swal2-icon.swal2-question { border-color: var(--m3-primary) !important;  color: var(--m3-primary) !important; }
.swal2-icon.swal2-error    { border-color: var(--m3-error) !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--m3-error) !important; }
.swal2-icon.swal2-info     { border-color: var(--m3-info) !important;     color: var(--m3-info) !important; }
.swal2-icon.swal2-success  { border-color: var(--m3-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34,197,94,.35) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--m3-success) !important; }

/* ============================================================
   TONAL BUTTON — M3 filled-tonal, used beside filled buttons.
   (.btn.btn-tonal doubles specificity so the rule survives the
   theme customizer re-injecting core.css after this sheet.)
   ============================================================ */
.btn.btn-tonal {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  border: none;
}
.btn.btn-tonal:hover, .btn.btn-tonal:focus {
  background: #d8daff;
  color: var(--m3-on-primary-container);
  box-shadow: var(--m3-elev-1);
}

/* ============================================================
   MATCH & RESULT CARDS — premium banner cards shared by
   matches, my_matches, results and the detail pages.
   ============================================================ */
.match-card, .result-card {
  cursor: pointer;
  border: 1px solid var(--m3-outline-variant);
  box-shadow: none;
  transition: transform var(--m3-dur) var(--m3-ease), box-shadow var(--m3-dur) var(--m3-ease),
              border-color var(--m3-dur) var(--m3-ease);
  overflow: hidden;
  /* make each card its own responsive container so the banner + text
     scale with the CARD's width (1/2/3-column layouts), not the viewport
     — the widest cards actually appear on the narrowest (single-column)
     screens, so viewport media queries would size these backwards. */
  container-type: inline-size;
}
.match-card:hover, .result-card:hover {
  transform: translateY(-3px);
  border-color: var(--m3-primary);
  box-shadow: var(--m3-elev-2);
}
.match-card.joined-card { border-color: var(--m3-primary); box-shadow: 0 0 0 1px var(--m3-primary); }

/* ── banner header (image + gradient scrim + overlaid text) ── */
.mc-banner {
  position: relative;
  /* height tracks the card's own width so it stays proportional on every
     device / column count, with a floor + ceiling so it never gets squat
     on 2-up cards or oversized on very wide ones. (~172px near a 390px card,
     matching the previous fixed height.) */
  height: auto;
  aspect-ratio: 20 / 9;
  min-height: 140px;
  max-height: 210px;
  background: linear-gradient(120deg, #23259e 0%, var(--m3-primary) 55%, var(--m3-tertiary) 100%);
  overflow: hidden;
}
.mc-banner img.mc-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.mc-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,17,42,.86) 0%, rgba(16,17,42,.38) 55%, rgba(16,17,42,.18) 100%);
  pointer-events: none;
}
.mc-banner-ph-icon {
  position: absolute; right: -14px; bottom: -18px;
  font-size: 6.2rem; color: rgba(255,255,255,.14);
  transform: rotate(-12deg); line-height: 1;
}
.mc-banner-top {
  position: absolute; top: 10px; left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  z-index: 2;
}
.mc-banner-bottom {
  position: absolute; left: 14px; right: 14px; bottom: 11px;
  z-index: 2;
}
.mc-banner-title {
  color: #fff; font-weight: 800; font-size: 1.02rem; line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.mc-banner-sub {
  color: rgba(255,255,255,.82); font-size: .72rem; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-banner-sub i { font-size: .8rem; }

/* compact banner variant for detail pages — fixed height, opt out of the
   proportional sizing used by the list cards */
.mc-banner-lg { height: 132px; min-height: 0; max-height: none; aspect-ratio: auto; }
.mc-banner-lg .mc-banner-title {
  font-size: 1.12rem;
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 4-column stats variant (detail pages) */
.mc-stats.mc-stats-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 420px) {
  .mc-stats.mc-stats-4 { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .mc-stats.mc-stats-4 .mc-stat:nth-child(3)::before { display: none; }
}

/* status + id chips (readable on imagery) */
.mc-status {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--m3-shape-full);
  background: rgba(255,255,255,.92); color: var(--m3-on-surface);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.mc-status.upcoming { color: var(--m3-success-dark); }
.mc-status.live     { background: var(--m3-error); color: #fff; }
.mc-status.full     { color: var(--m3-error-dark); }
.mc-status.live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; animation: mcLivePulse 1.1s infinite;
}
@keyframes mcLivePulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.mc-id {
  flex-shrink: 0; font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: var(--m3-shape-full);
  background: rgba(16,17,42,.45); color: rgba(255,255,255,.92);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ── clean borderless stats row ── */
.mc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 12px 4px 11px;
}
.mc-stat { text-align: center; min-width: 0; position: relative; }
.mc-stat + .mc-stat::before {
  content: ''; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: 1px; background: var(--m3-outline-variant);
}
.mc-stat-val {
  font-size: .98rem; font-weight: 800; color: var(--m3-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.mc-stat-val .unit { font-size: .62rem; font-weight: 700; color: var(--m3-on-surface-muted); }
.mc-stat-val.free { color: var(--m3-success-dark); }
.mc-stat-val.prize { color: var(--m3-primary); }
.mc-stat-lbl {
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--m3-on-surface-muted); margin-top: 3px;
}

/* ── slots-filled progress bar ── */
.mc-progress {
  height: 6px;
  margin: 0 14px 10px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-surface-container-high);
  overflow: hidden;
}
.mc-progress-bar {
  height: 100%;
  border-radius: var(--m3-shape-full);
  background: var(--m3-success);
  transition: width .5s var(--m3-ease);
}
.mc-progress-bar.warn { background: var(--m3-warning); }
.mc-progress-bar.full { background: var(--m3-error); }

/* ── footer row: date + inline countdown ── */
.mc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px;
  margin: 0 12px;
  background: var(--m3-surface-container);
  border-radius: var(--m3-shape-sm);
}
.mc-date {
  font-size: .72rem; font-weight: 600; color: var(--m3-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-date i { font-size: .82rem; }
.countdown, .mc-cd {
  font-size: .8rem; font-weight: 800; color: var(--m3-primary);
  white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.countdown.started, .mc-cd.started { color: var(--m3-error); }

/* ── actions ── */
.mc-actions { display: flex; gap: 8px; padding: 11px 12px 12px; }
.mc-actions .btn { flex: 1; white-space: nowrap; font-weight: 700; }
.mc-actions .btn-tonal { flex: 0 0 auto; }

/* ── fluid, card-relative type + spacing ──
   These rules only take effect inside a query container (the list cards),
   so the detail pages — which use a plain .card — keep their fixed sizes.
   `cqi` = 1% of the card's own width, so text scales smoothly whether the
   card is a 2-up (~260px) or a wide single-column (~430px) card. */
@container (min-width: 1px) {
  .mc-banner-title { font-size: clamp(0.9rem, 4.4cqi, 1.08rem); }
  .mc-banner-sub   { font-size: clamp(0.66rem, 3cqi, 0.75rem); }
  .mc-stats        { padding: clamp(9px, 3cqi, 13px) 4px clamp(8px, 2.8cqi, 12px); }
  .mc-stat-val     { font-size: clamp(0.86rem, 4cqi, 1rem); }
  .mc-stat-lbl     { font-size: clamp(0.55rem, 2.6cqi, 0.62rem); }
  .mc-foot         { padding: clamp(7px, 2.4cqi, 10px) clamp(10px, 3.6cqi, 14px); }
  .mc-date         { font-size: clamp(0.66rem, 2.9cqi, 0.74rem); }
  .countdown, .mc-cd { font-size: clamp(0.72rem, 3.3cqi, 0.82rem); }
}

/* ── segmented countdown (detail pages) ── */
.cd-wrap {
  display: flex; gap: 8px; justify-content: center;
  margin: 14px 0 4px;
}
.cd-seg {
  flex: 1; max-width: 86px;
  background: var(--m3-primary-container);
  border-radius: var(--m3-shape-sm);
  padding: 9px 4px 7px; text-align: center;
}
.cd-seg-val {
  font-size: 1.18rem; font-weight: 800; line-height: 1;
  color: var(--m3-on-primary-container);
  font-variant-numeric: tabular-nums;
}
.cd-seg-lbl {
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--m3-primary); margin-top: 4px;
}
.cd-started {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--m3-error-container); color: var(--m3-error-dark);
  border-radius: var(--m3-shape-full); padding: 10px 14px;
  margin: 14px 0 4px; font-weight: 800; font-size: .9rem;
}

/* ── pill search field ── */
.m3-search {
  display: flex; align-items: center;
  height: 44px;
  background: var(--m3-surface);
  border: 1.5px solid var(--m3-outline);
  border-radius: var(--m3-shape-full);
  padding: 0 7px 0 15px;
  transition: border-color var(--m3-dur) var(--m3-ease), box-shadow var(--m3-dur) var(--m3-ease);
}
.m3-search:focus-within {
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(105,108,255,.14);
}
.m3-search-ico { color: var(--m3-on-surface-muted); font-size: 1.05rem; flex-shrink: 0; }
.m3-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  padding: 0 10px;
  font-size: .88rem; color: var(--m3-on-surface);
  font-family: inherit;
}
.m3-search input::placeholder { color: var(--m3-on-surface-muted); }
.m3-search-clear {
  width: 30px; height: 30px; border-radius: 50%;
  border: none; padding: 0; flex-shrink: 0;
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface-variant);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .82rem;
  transition: background .15s var(--m3-ease), color .15s var(--m3-ease);
}
.m3-search-clear:hover { background: var(--m3-outline-variant); color: var(--m3-on-surface); }

/* ── transaction rows (wallet + transactions) ── */
.tx-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--m3-outline-variant);
  transition: background var(--m3-dur) var(--m3-ease);
}
.tx-item:last-child { border-bottom: none; }
.tx-item:hover { background: var(--m3-surface-container-low); }
.tx-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.15rem;
}
.tx-info { flex: 1; min-width: 0; }
.tx-label { font-weight: 700; font-size: .86rem; color: var(--m3-on-surface); }
.tx-details {
  font-size: .72rem; color: var(--m3-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.tx-date { font-size: .68rem; color: var(--m3-on-surface-muted); margin-top: 1px; }
.tx-amount {
  font-weight: 800; font-size: .92rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tx-amount.pos { color: var(--m3-success-dark); }
.tx-amount.neg { color: var(--m3-error-dark); }
.tx-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--m3-shape-full);
  margin-top: 3px;
}
.tx-chip.ok   { background: var(--m3-success-container); color: var(--m3-on-success-container); }
.tx-chip.pend { background: var(--m3-warning-container); color: var(--m3-on-warning-container); }
.tx-chip.fail { background: var(--m3-error-container);   color: var(--m3-on-error-container); }
.tx-chip.na   { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }

/* ── premium balance card (wallet-family pages) ── */
.bal-card {
  border: none !important;
  border-radius: var(--m3-shape-lg) !important;
  position: relative; overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--m3-primary) 0%, var(--m3-primary-dark) 100%);
  box-shadow: 0 10px 28px rgba(105,108,255,.28);
}
.bal-card.bal-amber {
  background: linear-gradient(135deg, var(--m3-warning) 0%, var(--m3-warning-dark) 100%);
  box-shadow: 0 10px 28px rgba(217,119,6,.28);
}
.bal-card.bal-purple {
  background: linear-gradient(135deg, var(--m3-tertiary) 0%, var(--m3-tertiary-dark) 100%);
  box-shadow: 0 10px 28px rgba(124,58,237,.28);
}
.bal-card.bal-green {
  background: linear-gradient(135deg, var(--m3-success) 0%, var(--m3-success-dark) 100%);
  box-shadow: 0 10px 28px rgba(22,163,74,.28);
}
.bal-card.bal-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  box-shadow: 0 10px 28px rgba(8,145,178,.28);
}
.bal-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% -30%, rgba(255,255,255,.16) 0%, transparent 55%),
    radial-gradient(circle at -10% 120%, rgba(255,255,255,.08) 0%, transparent 45%);
  pointer-events: none;
}
.bal-body {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 18px;
}
.bal-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  font-size: 1.45rem;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.bal-info { flex: 1; min-width: 0; }
.bal-label {
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  opacity: .78; margin-bottom: 2px;
}
.bal-amount {
  font-size: 1.55rem; font-weight: 800; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.bal-watermark {
  position: absolute; right: -12px; bottom: -20px;
  font-size: 6rem; line-height: 1; opacity: .13;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* ── contact / action rows (support, developer) ── */
.sp-contact {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--m3-outline-variant);
  transition: background var(--m3-dur) var(--m3-ease);
}
.sp-contact:last-child { border-bottom: none; }
.sp-contact:hover { background: var(--m3-surface-container-low); }
.sp-contact:active { background: var(--m3-surface-container); }
.sp-contact-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--m3-primary-container); color: var(--m3-on-primary-container);
  font-size: 1.35rem;
}
.sp-contact-info { flex: 1; min-width: 0; }
.sp-contact-title {
  font-weight: 700; font-size: .9rem; color: var(--m3-on-surface);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sp-contact-sub {
  font-size: .74rem; color: var(--m3-on-surface-variant); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-fast-chip {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: var(--m3-shape-full);
  background: var(--m3-success-container); color: var(--m3-on-success-container);
}
.sp-fast-chip i { font-size: .7rem; }

/* ── prize distribution & standings (detail pages) ── */
.pd-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px;
  background: var(--m3-surface-container);
  border-bottom: 1px solid var(--m3-outline-variant);
}
.pd-header-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 800; color: var(--m3-on-surface);
}
.pd-header-chip {
  font-size: .66rem; font-weight: 800; padding: 3px 10px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-primary-container); color: var(--m3-on-primary-container);
  white-space: nowrap;
}
.pd-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px; font-size: .85rem;
  border-bottom: 1px solid var(--m3-outline-variant);
}
.pd-row:last-child { border-bottom: none; }
.pd-rank {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .74rem;
  background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant);
}
.pd-rank.g { background: linear-gradient(135deg,#FFD700,#FFA500); color: #fff; box-shadow: 0 2px 8px rgba(255,180,0,.35); }
.pd-rank.s { background: linear-gradient(135deg,#C0C0C0,#A9A9A9); color: #fff; }
.pd-rank.b { background: linear-gradient(135deg,#CD7F32,#A0522D); color: #fff; }
.pd-rank.k { background: var(--m3-primary-container); color: var(--m3-on-primary-container); font-size: .8rem; }
.pd-place { flex: 1; min-width: 0; font-weight: 600; color: var(--m3-on-surface); }
.pd-place small { display: block; font-size: .66rem; font-weight: 600; color: var(--m3-on-surface-muted); }
.pd-amt { font-weight: 800; color: var(--m3-success-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-amt.k { color: var(--m3-primary); }

/* kills chip (standings rows) */
.kills-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .64rem; font-weight: 700; padding: 1px 8px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant);
  white-space: nowrap; vertical-align: middle;
}
.kills-chip i { font-size: .7rem; }

/* ── Matches & My Matches: keep the mobile card size on desktop ──
   Columns stop stretching into halves/thirds; every card keeps a
   phone-width footprint and wraps into a grid. */
@media (min-width: 576px) {
  #matchesContainer > [class*="col-"],
  #myMatchesContainer > [class*="col-"] {
    flex: 0 0 auto;
    width: 392px;
    max-width: 100%;
  }
}

/* ── result list rows (results page) ── */
.rc-row { display: flex; align-items: center; gap: 12px; }
.rc-thumb-wrap { position: relative; flex-shrink: 0; }
.rc-thumb {
  width: 60px; height: 60px;
  border-radius: var(--m3-shape-md);
  object-fit: cover; display: block;
  border: 1px solid var(--m3-outline-variant);
}
.rc-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--m3-primary), var(--m3-tertiary));
  color: rgba(255,255,255,.9); font-size: 1.5rem;
}
.rc-pos {
  position: absolute; right: -7px; bottom: -7px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 800; color: #fff;
  border: 2px solid var(--m3-surface);
  background: var(--m3-secondary);
}
.rc-pos.p1 { background: linear-gradient(135deg,#FFD700,#FFA500); font-size: .8rem; }
.rc-pos.p2 { background: linear-gradient(135deg,#C0C0C0,#A9A9A9); font-size: .8rem; }
.rc-pos.p3 { background: linear-gradient(135deg,#CD7F32,#A0522D); font-size: .8rem; }
.rc-info { flex: 1; min-width: 0; }
.rc-title {
  font-weight: 800; font-size: .9rem; color: var(--m3-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.rc-meta {
  font-size: .72rem; font-weight: 500; color: var(--m3-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-meta i { font-size: .8rem; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mc-chip {
  font-size: .64rem; font-weight: 700; padding: 2px 9px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface-variant);
  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.mc-chip-id { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.rc-chevron {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--m3-primary-container); color: var(--m3-on-primary-container);
  font-size: .9rem;
}
.rc-prize {
  flex-shrink: 0; text-align: right;
}
.rc-prize-amt { font-size: .92rem; font-weight: 800; color: var(--m3-success-dark); white-space: nowrap; }
.rc-prize-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--m3-on-surface-muted); }

/* ============================================================
   PAGE-TRANSITION
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}