/* =====================================================================
   NexzoPay — Premium reward-console design system  (v6, "Emerald Noir")
   ---------------------------------------------------------------------
   Palette (chosen for this build): a midnight blue-teal INK base — never
   flat black — lit by a four-tone accent set:
       mint   #54F39A  (primary brand)
       aqua   #2BE3C6  (secondary / gradients)
       cyan   #37C6F2  (info / cool light)
       gold   #FFD37A  (premium accent: ratings, gold-tier labels)
   Blue-leaning ink makes the mint read like a jewel instead of "dark green".
   Frontend-only: no app logic, routes, tracking or data are touched.
   No purple / no pink. Logos are never recoloured or distorted.
   Cross-OS: Chrome / Edge / Firefox / Safari (macOS + iOS) / Android —
   hand-written -webkit- fallbacks (file is served raw, no autoprefixer),
   color-mix @supports fallback, safe-area insets, reduced-motion support.
   GPU-safe: no mix-blend-mode and no heavy filters (they corrupted the
   rendering on some Windows/Chromium GPUs).
   ===================================================================== */

/* ----------------------------- Tokens ------------------------------ */
:root {
    /* Surfaces — midnight blue-teal ink, gradient-ready, never pure black */
    --bg:            #050D14;
    --bg-2:          #071522;
    --bg-3:          #0A1E28;   /* cooler, bluer floor: gives the base a shift */
    --sidebar:       #06111A;
    --card-top:      #102532;   /* lit top of every card gradient */
    --card-bot:      #0A1724;   /* deep bottom of every card gradient */
    --card:          #0C1B27;   /* solid fallback */
    --card-2:        #112430;
    --elevated:      #152A38;

    /* Text hierarchy */
    --text:          #FFFFFF;
    --text-soft:     #E7F2F1;
    --text-2:        #9DB4BB;
    --muted:         #6C838C;

    /* Lines — faintly mint-tinted so edges belong to the palette */
    --line:          rgba(150, 255, 220, 0.08);
    --line-2:        rgba(255, 255, 255, 0.10);

    /* Accent COMBINATION */
    --green:         #54F39A;
    --green-600:     #2FDD84;
    --green-ink:     #04140C;         /* text on bright mint buttons */
    --green-rgb:     84, 243, 154;
    --aqua:          #2BE3C6;
    --aqua-rgb:      43, 227, 198;
    --cyan:          #37C6F2;
    --cyan-rgb:      55, 198, 242;
    --gold:          #FFD37A;
    --gold-rgb:      255, 211, 122;
    --gold-ink:      #2A1F05;

    --green-line:    rgba(84, 243, 154, 0.16);
    --green-line-hi: rgba(84, 243, 154, 0.40);
    --green-glow:    rgba(84, 243, 154, 0.22);
    --aqua-glow:     rgba(43, 227, 198, 0.18);
    --cyan-glow:     rgba(55, 198, 242, 0.16);
    --green-soft:    rgba(84, 243, 154, 0.10);

    /* Signature gradients */
    --brand-grad:      linear-gradient(135deg, #54F39A 0%, #2BE3C6 52%, #37C6F2 100%);
    --brand-grad-hov:  linear-gradient(135deg, #6DF8AC 0%, #46EBD3 52%, #55D3F7 100%);
    --brand-grad-soft: linear-gradient(135deg, rgba(84, 243, 154, 0.16), rgba(55, 198, 242, 0.12));
    --gold-grad:       linear-gradient(135deg, #FFE7AC 0%, #FFC24D 100%);

    /* Semantic */
    --danger:        #FF5C6C;
    --danger-rgb:    255, 92, 108;
    --warning:       #FFB020;
    --warning-rgb:   255, 176, 32;
    --info:          #37C6F2;
    --success:       #54F39A;

    /* Radii & shadows */
    --r-sm: 10px;
    --r:    14px;
    --r-lg: 18px;
    --r-xl: 22px;
    --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.42);
    --shadow-2: 0 18px 44px rgba(0, 0, 0, 0.58);

    /* Staggered brick texture (SVG data-URI: crisp on every DPR, tiny, and
       far safer than repeating-linear-gradient on weak GPUs). 48x24 tile. */
    --brick: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='24'%3E%3Cg%20fill='none'%20stroke='%23A9FFE0'%20stroke-width='1'%3E%3Cpath%20d='M0%20.5h48M0%2012.5h48'/%3E%3Cpath%20d='M12.5%200v12M36.5%200v12M.5%2012v12M24.5%2012v12'/%3E%3C/g%3E%3C/svg%3E");

    /* Map onto Bootstrap/Sneat variables so components inherit the brand */
    --bs-primary: var(--green) !important;
    --bs-primary-rgb: var(--green-rgb) !important;
    --bs-link-color: var(--green) !important;
    --bs-link-hover-color: var(--green-600) !important;
    --bs-link-color-rgb: var(--green-rgb) !important;
    --bs-border-radius: var(--r);
    --bs-body-color: var(--text-soft);
    --bs-body-bg: var(--bg);
    --bs-base: #0A1826 !important;   /* tinted panel used by home sections */
    --bs-danger: var(--danger) !important;
    --bs-danger-rgb: var(--danger-rgb) !important;
    --bs-warning: var(--warning) !important;
    --bs-warning-rgb: var(--warning-rgb) !important;
    --bs-info: var(--info) !important;
    --bs-success: var(--green) !important;
}

/* Persistent light mode (theme toggle sets html[data-ui-theme]) --------
   Dark is the primary identity; light stays usable and on-brand.        */
html[data-ui-theme="light"] {
    --bg:        #EDF5F5;
    --bg-2:      #FFFFFF;
    --bg-3:      #F0F8F8;
    --sidebar:   #FFFFFF;
    --card-top:  #FFFFFF;
    --card-bot:  #F2F9F8;
    --card:      #FFFFFF;
    --card-2:    #F0F7F7;
    --elevated:  #FFFFFF;
    --text:      #08161B;
    --text-soft: #17272C;
    --text-2:    #51636A;
    --muted:     #7C8D94;
    --line:      rgba(10, 30, 36, 0.10);
    --line-2:    rgba(10, 30, 36, 0.16);
    --green-ink: #04140C;
    /* Pale gold is invisible on white: ratings/warnings need a deeper amber.
       --gold-rgb stays as-is so gradients and glows keep their bright tone. */
    --gold:      #A9740A;
    --bs-base:   #E8F3F2 !important;
    --bs-body-color: var(--text-soft);
    color-scheme: light;
}
html[data-ui-theme="dark"] { color-scheme: dark; }

/* ----------------------------- Base -------------------------------- */
* { -webkit-tap-highlight-color: rgba(var(--green-rgb), 0.18); }

html, body,
.layout-wrapper,
.layout-page,
.content-wrapper,
.layout-container { background: transparent !important; }

body {
    background: var(--bg) !important;
    color: var(--text-soft) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ambient premium background: a mint + cyan + aqua aurora over a deep
   blue-teal base. Fixed & cheap (no blur, no blend) so it never reads as
   flat black and never costs a repaint while scrolling. */
body::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;   /* longhand fallback for Safari < 14.1 */
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(900px 580px at 86% -8%, rgba(var(--green-rgb), 0.17), transparent 60%),
        radial-gradient(840px 560px at -8% 8%, rgba(var(--cyan-rgb), 0.15), transparent 60%),
        radial-gradient(780px 520px at 50% 116%, rgba(var(--aqua-rgb), 0.12), transparent 62%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 56%, var(--bg-3) 100%);
}
body::after {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;   /* longhand fallback for Safari < 14.1 */
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(1200px 700px at 50% -10%, #000, transparent 75%);
            mask-image: radial-gradient(1200px 700px at 50% -10%, #000, transparent 75%);
}
html[data-ui-theme="light"] body::before {
    background:
        radial-gradient(900px 560px at 86% -8%, rgba(var(--green-rgb), 0.20), transparent 60%),
        radial-gradient(780px 520px at -8% 8%, rgba(var(--cyan-rgb), 0.15), transparent 60%),
        radial-gradient(720px 480px at 50% 116%, rgba(var(--aqua-rgb), 0.13), transparent 62%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
}
html[data-ui-theme="light"] body::after { opacity: 0.35; }

/* ------------------------- Typography ------------------------------ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
h3.fw-bold, .h3.fw-bold { font-variant-numeric: tabular-nums; letter-spacing: -0.01em !important; }
p { color: var(--text-soft); }

/* Text utilities — white/grey text; mint/aqua/gold stay accents */
.text-white       { color: var(--text) !important; }
.text-body,
.text-heading     { color: var(--text-soft) !important; }
.text-secondary   { color: var(--text-2) !important; }
.text-muted       { color: var(--muted) !important; }
.text-primary     { color: var(--green) !important; }
.text-success     { color: var(--green) !important; }
.text-warning     { color: var(--gold) !important; }
.text-info        { color: var(--info) !important; }
.text-danger      { color: var(--danger) !important; }

a { color: var(--green); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--aqua); }
.text-body[href]:hover { color: var(--green) !important; }

/* --------------------------- Sidebar ------------------------------- */
.layout-menu,
.bg-menu-theme {
    background:
        linear-gradient(180deg, rgba(var(--green-rgb), 0.05), transparent 22%),
        var(--sidebar) !important;
    border-right: 1px solid var(--line) !important;
}
.layout-menu .app-brand {
    min-height: 74px;
    border-bottom: 1px solid var(--line);
}
.menu-header-text {
    color: var(--muted) !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.menu-inner > .menu-item { margin: 0.15rem 0; }
.menu-link {
    color: var(--text-2) !important;
    font-weight: 500 !important;
    min-height: 44px;
    border-radius: var(--r-sm) !important;
    margin: 0 0.75rem;
    border: 1px solid transparent !important;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}
.menu-link .menu-icon { color: var(--text-2) !important; transition: color 0.18s ease; }
.menu-link:hover {
    color: var(--text) !important;
    background: rgba(var(--green-rgb), 0.08) !important;
    transform: none !important;
}
.menu-link:hover .menu-icon { color: var(--green) !important; }
.menu-item.active > .menu-link,
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    color: var(--green) !important;
    background: var(--brand-grad-soft) !important;
    font-weight: 600 !important;
    border-color: var(--green-line) !important;
    box-shadow: inset 3px 0 0 var(--green), 0 6px 18px rgba(var(--green-rgb), 0.14) !important;
}
.bg-menu-theme .menu-item.active .menu-icon,
.bg-menu-theme .menu-item.active .menu-link svg,
.bg-menu-theme .menu-item.active .menu-link path {
    color: var(--green) !important;
}
.menu-sub .menu-link { min-height: 38px; }
.menu-inner-shadow { display: none !important; }

/* --------------------------- Navbar -------------------------------- */
.layout-navbar,
.bg-navbar-theme {
    background: color-mix(in srgb, var(--bg-2) 82%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.layout-navbar.navbar-detached {
    border-radius: var(--r-lg) !important;
    min-height: 66px;
    transition: min-height 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.layout-navbar.is-scrolled {
    min-height: 58px;
    box-shadow: var(--shadow-1);
    background: color-mix(in srgb, var(--bg-2) 92%, transparent) !important;
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .layout-navbar, .bg-navbar-theme { background: rgba(7, 21, 34, 0.88) !important; }
}

/* Coin / balance chip in the header */
.navbar .nav-item .nav-link.dropdown-toggle,
.navbar-nav-right .btn { border-radius: 999px !important; }
.navbar-nav-right .nav-link.dropdown-toggle[href*="shop"],
.navbar .navbar-dropdown > .nav-link.dropdown-toggle {
    background: var(--brand-grad-soft) !important;
    border: 1px solid var(--green-line) !important;
    color: var(--text) !important;
    box-shadow: inset 0 0 12px rgba(var(--green-rgb), 0.10);
}
.navbar .navbar-dropdown > .nav-link.dropdown-toggle:hover {
    border-color: var(--green-line-hi) !important;
    box-shadow: 0 0 16px var(--green-glow);
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--line-2) !important;
    border-radius: 999px;
    background: var(--card);
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 700;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.theme-toggle:hover { border-color: var(--green-line-hi) !important; color: var(--text); background: rgba(var(--green-rgb), 0.08); }

/* ------------------------- Surfaces / cards ------------------------ */
.card,
.new-carder-card {
    background: linear-gradient(160deg, var(--card-top) 0%, var(--card-bot) 100%) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    color: var(--text-soft);
}
/* Big section panels get a dual-colour "console" glow */
.new-carder-card,
.card.new-carder-card {
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(var(--green-rgb), 0.10), transparent 42%),
        radial-gradient(120% 130% at 0% 100%, rgba(var(--cyan-rgb), 0.08), transparent 46%),
        linear-gradient(160deg, var(--bg-2) 0%, var(--bg-3) 100%) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-xl) !important;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 1.15rem 1.25rem !important;
}
.card-footer { background: transparent !important; border-top: 1px solid var(--line) !important; }
.card-title { color: var(--text) !important; font-weight: 700 !important; }

/* Interactive cards lift with a mint+aqua glow; container panels stay put */
.offer-card,
.shop-card,
.leaderboard-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    will-change: transform;
}
.offer-card:hover,
.shop-card:hover {
    transform: translateY(-4px);
    border-color: var(--green-line-hi) !important;
    box-shadow: var(--shadow-2), 0 0 22px var(--green-glow), 0 0 34px var(--aqua-glow) !important;
}

/* ------- Signature: reward amounts glow in brand mint ("counter") ---- */
.offer-card .card-footer .f-w-600,
.offer-card .card-footer .f-w-600.text-white,
.offer-card .card-footer .f-w-600 span,
.offer-card .card-footer .f-w-600.text-white span {
    color: var(--green) !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 16px rgba(var(--green-rgb), 0.35);
}

/* --------------------- Section header (Offers Partners) ------------ */
.card-header .card-title .text-primary,
.card-title svg.text-primary { color: var(--green) !important; }
.card-title .text-secondary { color: var(--muted) !important; }

/* ----------------------- Buttons & badges -------------------------- */
.btn {
    border-radius: var(--r-sm) !important;
    font-weight: 600 !important;
    min-height: 40px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary,
.btn-success {
    background: var(--brand-grad) !important;
    border: 1px solid transparent !important;
    color: var(--green-ink) !important;
    box-shadow: 0 8px 20px rgba(var(--green-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
.btn-primary:hover,
.btn-success:hover {
    background: var(--brand-grad-hov) !important;
    color: var(--green-ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(var(--green-rgb), 0.42), 0 0 22px var(--aqua-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-primary.disabled, .btn-primary:disabled {
    background: rgba(var(--green-rgb), 0.20) !important;
    color: rgba(var(--green-rgb), 0.75) !important;
    box-shadow: none !important;
}
.btn-outline-primary {
    color: var(--green) !important;
    border: 1px solid var(--green-line-hi) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--brand-grad) !important;
    color: var(--green-ink) !important;
    box-shadow: 0 8px 18px rgba(var(--green-rgb), 0.35) !important;
}
.btn-secondary,
.btn-label-secondary,
.bg-secondary {
    background: var(--elevated) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text) !important;
}
.btn-secondary:hover, .btn-label-secondary:hover {
    background: var(--card-2) !important;
    border-color: var(--green-line) !important;
    color: var(--text) !important;
}
.btn-dark { background: var(--card-2) !important; border: 1px solid var(--line-2) !important; color: var(--text) !important; }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }

.badge.bg-primary,
.badge.bg-success { background: var(--brand-grad) !important; color: var(--green-ink) !important; }
.badge.bg-danger  { background: var(--danger) !important; color: #fff !important; }
.badge.bg-warning { background: var(--gold-grad) !important; color: var(--gold-ink) !important; }
.badge.bg-info    { background: var(--cyan) !important; color: #04171C !important; }
.badge.bg-secondary, .bg-label-dark { background: rgba(255, 255, 255, 0.08) !important; color: var(--text) !important; }
.bg-label-primary {
    background: rgba(var(--green-rgb), 0.14) !important;
    color: var(--green) !important;
    border: 1px solid var(--green-line) !important;
}

/* --------------------------- Forms --------------------------------- */
.form-control,
.form-select,
.input-group-text {
    background: var(--card-2) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text) !important;
    border-radius: var(--r-sm) !important;
    min-height: 46px;
}
.form-control::placeholder { color: var(--muted) !important; opacity: 1; }
.form-control:focus,
.form-select:focus {
    background: var(--card-2) !important;
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(var(--green-rgb), 0.20) !important;
    color: var(--text) !important;
}
.form-check-input {
    background-color: var(--card-2) !important;
    border: 1px solid var(--line-2) !important;
}
.form-check-input:checked {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--green-rgb), 0.20) !important; }
.switch-primary .switch-input:checked ~ .switch-toggle-slider {
    background: var(--green) !important;
    border-color: var(--green) !important;
}
.divider .divider-text { color: var(--muted); }
.divider .divider-text::before, .divider .divider-text::after { border-color: var(--line) !important; }

/* ------------------- Dropdowns / modals / toasts ------------------- */
.dropdown-menu {
    background: var(--elevated) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--shadow-2) !important;
}
.dropdown-item { color: var(--text-soft) !important; border-radius: 8px; padding: 0.6rem 0.9rem !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--green-rgb), 0.12) !important; color: var(--text) !important; }
.dropdown-item.active { background: rgba(var(--green-rgb), 0.18) !important; color: var(--green) !important; }
.dropdown-divider { border-color: var(--line) !important; }

.modal-content {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--green-rgb), 0.08), transparent 40%),
        linear-gradient(160deg, var(--bg-2) 0%, var(--bg-3) 100%) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-2), 0 0 0 1px var(--green-line) !important;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.modal-header, .modal-footer { border-color: var(--line) !important; padding: 1.15rem 1.25rem !important; }
.btn-close {
    -webkit-filter: invert(1) grayscale(1) brightness(1.6);
            filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.7;
}
.btn-close:hover { opacity: 1; }

.toast, .toaster {
    background: var(--elevated) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--shadow-2) !important;
    color: var(--text) !important;
}
.toast .toast-header { background: transparent !important; color: var(--text) !important; border-bottom: 1px solid var(--line) !important; }

/* --------------------------- Misc bits ----------------------------- */
.progress { background: rgba(255, 255, 255, 0.06) !important; border-radius: 999px !important; }
.progress-bar { background: var(--brand-grad) !important; border-radius: 999px !important; }

.page-link { background: var(--card) !important; color: var(--text-2) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; margin: 0 0.2rem; }
.page-link:hover { background: rgba(var(--green-rgb), 0.12) !important; color: var(--text) !important; border-color: var(--green-line) !important; }
.page-item.active .page-link { background: var(--brand-grad) !important; color: var(--green-ink) !important; border-color: var(--green) !important; }

.nav-pills .nav-link { color: var(--text-2) !important; border-radius: 999px !important; border: 1px solid transparent; }
.nav-pills .nav-link:hover { color: var(--text) !important; background: rgba(var(--green-rgb), 0.08) !important; }
.nav-pills .nav-link.active { background: var(--brand-grad-soft) !important; color: var(--green) !important; border-color: var(--green-line) !important; }

.accordion-item { background: linear-gradient(160deg, var(--card-top), var(--card-bot)) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; margin-bottom: 0.6rem; overflow: hidden; }
.accordion-button { background: transparent !important; color: var(--text) !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: rgba(var(--green-rgb), 0.08) !important; color: var(--green) !important; }
.accordion-button::after { -webkit-filter: invert(0.7); filter: invert(0.7); }
.accordion-body { color: var(--text-2) !important; }

.list-group-item { background: transparent !important; border-color: var(--line) !important; color: var(--text-soft) !important; }
.table { color: var(--text-soft) !important; }
.table thead th { color: var(--text-2) !important; border-bottom-color: var(--line-2) !important; }
.table > :not(caption) > * > * { border-color: var(--line) !important; }
.table-hover > tbody > tr:hover > * { background: rgba(var(--green-rgb), 0.06) !important; color: var(--text) !important; }

hr, .dropdown-divider { border-color: var(--line) !important; }
.alert-primary { background: var(--brand-grad-soft) !important; border: 1px solid var(--green-line) !important; color: var(--text) !important; }
.alert-danger  { background: rgba(var(--danger-rgb), 0.14) !important; border: 1px solid rgba(var(--danger-rgb), 0.4) !important; color: #FFD7DB !important; }

/* Avatars */
.avatar img { object-fit: cover; }
.avatar.avatar-online:after { background: var(--green) !important; box-shadow: 0 0 0 2px var(--sidebar); }

/* --------------------------- Footer -------------------------------- */
.content-footer.footer,
footer.content-footer,
.content-footer .container-fluid > div {
    background: transparent !important;
}
.content-footer { border-top: 1px solid var(--line); }
.footer-text { color: var(--muted) !important; }
.footer-link { color: var(--text-2) !important; display: inline-flex; align-items: center; transition: color 0.18s ease; }
.footer-link:hover { color: var(--green) !important; }
.footer-link-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text-2) !important;
    border-radius: 12px !important;
}
.footer-link-btn:hover { color: var(--green) !important; border-color: var(--green-line-hi) !important; background: rgba(var(--green-rgb), 0.08) !important; }

/* --------------------- Mobile bottom navigation -------------------- */
.mobile-navbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg-2) 88%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--line-2);
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .mobile-navbar { background: rgba(7, 21, 34, 0.94); }
}
.mobile-navbar .nv-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    color: var(--text-2) !important;
    text-decoration: none;
    border-radius: 12px;
    transition: color 0.18s ease, background 0.18s ease;
}
.mobile-navbar .nv-item > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
}
.mobile-navbar .nv-item.active { color: var(--green) !important; background: var(--brand-grad-soft); }
.mobile-navbar .nv-item:active { background: rgba(var(--green-rgb), 0.16); }
@media (max-width: 1199.98px) {
    .content-wrapper { padding-bottom: 76px; }
}

/* --------------------------- Empty state --------------------------- */
.empty-state, .text-center.text-secondary > svg { color: var(--muted); }
.empty-state svg { opacity: 0.6; }

/* --------------------------- Scrollbars ---------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--green-rgb), 0.35) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--green-rgb), 0.30); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--green-rgb), 0.55); background-clip: padding-box; }

/* --------------------------- Focus / a11y -------------------------- */
a:focus-visible, button:focus-visible,
.btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.menu-link:focus-visible, .nv-item:focus-visible {
    outline: 2px solid var(--green) !important;
    outline-offset: 2px;
    border-radius: 8px;
}
::selection { background: var(--green); color: var(--green-ink); }

/* --------------------------- Preloader ----------------------------- */
/* app.css ships a THREE-DOT pulse loader: .loader plus BOTH pseudo-elements
   are 2.5em circles drawn with `box-shadow: 0 2.5em 0 -1.3em currentColor`
   and animated by @keyframes bblFadInOut. That look is cancelled on purpose
   and replaced by a glossy dual-ring spinner, reusing the same three layers
   so no markup changes (#preloader > .text-center > .loader.m-auto).
   Nothing here animates box-shadow, and mix-blend-mode is never used - both
   caused artefacts on this device family. Only transform/opacity animate. */
#preloader {
    background:
        radial-gradient(62% 48% at 50% 42%, rgba(var(--green-rgb), 0.10) 0%, transparent 72%),
        var(--bg) !important;
}

/* Step 1 - cancel the stock pulse on all three layers.
   .loader:before and .loader::before carry EQUAL specificity, so it is the
   later source position of premium-ui.css that decides; !important then also
   protects against any inline or compiled override. */
.loader,
.loader::before,
.loader::after {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important;
    text-indent: 0 !important;
}

/* Step 2 - the outer glossy ring */
.loader {
    position: relative !important;
    box-sizing: border-box !important;
    width: 64px !important;
    height: 64px !important;
    margin: 1.15rem auto 0 !important;
    /* stock sized itself from font-size:7px * 2.5em - neutralise the source */
    font-size: 0 !important;
    line-height: 0 !important;
    color: var(--green) !important;
    border-style: solid !important;
    border-width: 3px !important;
    border-radius: 50% !important;
    /* four different border colours read as one gradient sweep while it
       spins - a real gradient ring would need mask-composite, which is not
       safe on every target engine. */
    border-top-color: var(--green) !important;
    border-right-color: var(--aqua) !important;
    border-bottom-color: rgba(var(--cyan-rgb), 0.55) !important;
    border-left-color: rgba(var(--green-rgb), 0.12) !important;
    /* the gloss: a specular hot-spot, a broader sheen, and a faint inner tint */
    background-image:
        radial-gradient(circle at 42% 14%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(circle at 50% 62%, rgba(var(--green-rgb), 0.09) 0%, transparent 74%) !important;
    /* static glow + a glassy inner rim - never animated */
    -webkit-box-shadow:
        0 0 18px rgba(var(--green-rgb), 0.34),
        0 0 46px rgba(var(--green-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 0 14px rgba(var(--green-rgb), 0.12) !important;
            box-shadow:
        0 0 18px rgba(var(--green-rgb), 0.34),
        0 0 46px rgba(var(--green-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 0 14px rgba(var(--green-rgb), 0.12) !important;
    -webkit-animation: nzSpin 0.85s linear infinite !important;
            animation: nzSpin 0.85s linear infinite !important;
    will-change: transform;
}

/* Step 3 - inner ring, counter-rotating.
   The stock rules park these at left:-3.5em / left:3.5em, so every offset is
   restated as a longhand (not the `inset` shorthand, which older engines drop
   while still honouring the stock `left`). */
.loader::before {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    width: auto !important;
    height: auto !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-radius: 50% !important;
    border-top-color: transparent !important;
    border-right-color: rgba(var(--aqua-rgb), 0.85) !important;
    border-bottom-color: var(--cyan) !important;
    border-left-color: transparent !important;
    -webkit-animation: nzSpinRev 1.35s linear infinite !important;
            animation: nzSpinRev 1.35s linear infinite !important;
}

/* Step 4 - breathing glow core. Radially symmetric, so the parent's rotation
   does not show; only scale + opacity animate, which stay on the compositor. */
.loader::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 22px !important;
    height: 22px !important;
    margin: -11px 0 0 -11px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-image: radial-gradient(circle,
        rgba(var(--green-rgb), 0.55) 0%,
        rgba(var(--aqua-rgb), 0.22) 45%,
        transparent 72%) !important;
    -webkit-animation: nzCoreBreathe 1.9s ease-in-out infinite !important;
            animation: nzCoreBreathe 1.9s ease-in-out infinite !important;
}

@-webkit-keyframes nzSpin {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes nzSpin {
    0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes nzSpinRev {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); }
}
@keyframes nzSpinRev {
    0%   { -webkit-transform: rotate(0deg);    transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@-webkit-keyframes nzCoreBreathe {
    0%, 100% { -webkit-transform: scale(0.72); opacity: 0.45; }
    50%      { -webkit-transform: scale(1);    opacity: 1; }
}
@keyframes nzCoreBreathe {
    0%, 100% { -webkit-transform: scale(0.72); transform: scale(0.72); opacity: 0.45; }
    50%      { -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }
}

/* Bootstrap's .spinner-border (offer modal "Loading offer...") and app.css's
   .spinner get the same mint identity so every loading state matches. Their
   own keyframes keep running - only colour and glow are restyled. */
.spinner-border {
    border-color: rgba(var(--green-rgb), 0.22) !important;
    border-right-color: var(--green) !important;
    -webkit-filter: drop-shadow(0 0 6px rgba(var(--green-rgb), 0.45));
            filter: drop-shadow(0 0 6px rgba(var(--green-rgb), 0.45));
}
.spinner {
    border-color: rgba(var(--green-rgb), 0.18) !important;
    border-top-color: var(--green) !important;
    -webkit-box-shadow: 0 0 14px rgba(var(--green-rgb), 0.28) !important;
            box-shadow: 0 0 14px rgba(var(--green-rgb), 0.28) !important;
}

/* ===================================================================
   OFFERWALL — Offer / Survey Partners
   Responsive WRAPPING grid (never a horizontal slider) + premium
   brick-textured cards with glowing tier labels.
   The same layout rules are ALSO inlined in layouts/app.blade.php as a
   safety net, so the grid survives even if this file is cached stale.
   =================================================================== */

/* -------- Grid: 2-up on phones -> 3 -> 4 -> 5 on wide screens -------- */
/* The grid is applied through THREE independent hooks so it cannot be lost:
     1. .card-container      - the class the Blade views use on disk;
     2. .nz-card-grid        - a marker class added by the tiny script in
                               layouts/app.blade.php to the real parent of the
                               cards, whatever that parent's own class is;
     3. :has(> .partner-card) - pure-CSS, needs no script at all.
   Hook 3 is what fixes a live page whose container class differs from the
   local views (e.g. a Swiper shell). Hooks 1+2 keep older engines covered,
   because :has() is ignored wholesale by browsers that do not support it. */
.card-container,
.nz-card-grid {
    display: grid !important;
    grid-auto-flow: row !important;                 /* never flow into columns */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
    overflow: visible !important;                   /* kill any slider clipping */
    white-space: normal !important;
    flex-wrap: wrap !important;                     /* harmless if not flex */
    scroll-snap-type: none !important;
    -webkit-transform: none !important;
            transform: none !important;             /* kill slider translate */
}
@media (min-width: 576px) {
    .card-container,
    .nz-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 992px) {
    .card-container,
    .nz-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media (min-width: 1400px) {
    .card-container,
    .nz-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* Cancel the compiled fixed-width / slider sizing so cards fill their cell */
.card-container > *,
.nz-card-grid > * { min-width: 0 !important; }
.card-container .partner-card,
.card-container .shop-card,
.card-container .partner-card.swiper-slide,
.nz-card-grid .partner-card,
.nz-card-grid .shop-card,
.nz-card-grid .partner-card.swiper-slide {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important;
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
}
/* If a slider wrapper ever wraps the cards, let them join the grid anyway */
.card-container .swiper-wrapper { display: contents !important; }

/* ---- Hook 3: pure CSS, container class unknown ----------------------
   Any element whose DIRECT children are partner cards becomes the grid.
   <x-cards.partner> renders .partner-card as the root element, so the
   direct-child combinator is always accurate and never matches a random
   ancestor. Scoped with :has(>) so engines can resolve it cheaply.      */
:has(> .partner-card) {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
    overflow: visible !important;
    white-space: normal !important;
    scroll-snap-type: none !important;
    height: auto !important;
    -webkit-transform: none !important;
            transform: none !important;
}
@media (min-width: 576px) {
    :has(> .partner-card) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 992px) {
    :has(> .partner-card) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media (min-width: 1400px) {
    :has(> .partner-card) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
/* ...and the cards themselves must drop app.css's width:140px!important so
   they fill their grid cell instead of sitting 140px wide inside it. */
:has(> .partner-card) > .partner-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    -ms-flex: 0 1 auto !important;
        flex: 0 1 auto !important;
}

/* Neutralise the Swiper shell that may wrap a partner row on the live site.
   Swiper writes transform/width/margin-right as INLINE styles; an external
   !important declaration outranks a normal inline one, so the carousel is
   defeated without touching offers.blade.php or the Swiper JS itself.
   Only shells that actually contain partner cards are affected - the real
   offerwall slider (.offer-card) is deliberately left alone. */
.swiper:has(.partner-card) {
    overflow: visible !important;
    height: auto !important;
    -ms-touch-action: auto !important;
        touch-action: auto !important;
}
/* Same job, driven by the marker class the layout script adds - this is the
   path taken by engines that do not support :has(). */
.nz-card-grid-shell {
    overflow: visible !important;
    height: auto !important;
    -ms-touch-action: auto !important;
        touch-action: auto !important;
}
.partner-card.swiper-slide {
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
    height: auto !important;
    scroll-snap-align: none !important;
}

/* -------- Partner card: the visual centrepiece -------- */
.partner-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    /* One unified themed surface for every partner. The raw per-partner
       bg_color was removed in partner.blade.php — it produced a red/purple
       rainbow that fought the palette. The colourful LOGOS carry identity. */
    background: linear-gradient(158deg, var(--card-top) 0%, var(--card-bot) 100%) !important;
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

/* Layer 1 — lighting: mint from the top, cyan from the bottom-right.
   Plain gradients only (GPU-safe: no mix-blend-mode, no filters). */
.partner-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;   /* longhand fallback for Safari < 14.1 */
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(130% 78% at 50% -12%, rgba(var(--green-rgb), 0.13), transparent 56%),
        radial-gradient(120% 80% at 108% 106%, rgba(var(--cyan-rgb), 0.10), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.22));
}

/* Layer 2 — the brick/tile texture, fading out before the name plate so it
   reads as a lit wall behind the logo, never as noise over the text. */
.partner-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;   /* longhand fallback for Safari < 14.1 */
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.30;
    background-image: var(--brick);
    background-repeat: repeat;
    background-size: 48px 24px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 58%, transparent 88%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 58%, transparent 88%);
    transition: opacity 0.22s ease;
}
.partner-card:hover::after { opacity: 0.45; }
html[data-ui-theme="light"] .partner-card::after { opacity: 0.16; }

/* Content sits above both texture layers */
.partner-card > * { position: relative; z-index: 1; }

/* Hover: gentle lift + mint→aqua glow (translate, not scale → never clips) */
.partner-card:hover {
    -webkit-transform: translateY(-4px) !important;
            transform: translateY(-4px) !important;
    border-color: var(--green-line-hi) !important;
    box-shadow: var(--shadow-2), 0 0 0 1px var(--green-line), 0 0 28px var(--green-glow), 0 0 46px var(--aqua-glow) !important;
}

/* Logo: always contained — never distorted, never recoloured */
.partner-card .card-body {
    height: 132px !important;
    padding: 0.9rem !important;
    flex: 1 1 auto !important;
}
.partner-card .card-body img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    -o-object-fit: contain;
    -webkit-filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
            filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
/* Keep logos crisp on hover (kill the compiled blur-on-hover) */
.partner-card:hover .card-body img {
    -webkit-filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
            filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)) !important;
    -webkit-transform: none !important;
            transform: none !important;
}
/* ...but a locked card's logo must stay blurred on hover (inline blur style) */
.partner-card:hover .card-body img[style*="blur"] {
    -webkit-filter: blur(2px) brightness(70%) !important;
            filter: blur(2px) brightness(70%) !important;
}

/* Initials fallback — shown only when the logo image fails to load */
.partner-card .partner-initials {
    position: absolute;
    top: 0.9rem; right: 0.9rem; bottom: 0.9rem; left: 0.9rem;   /* longhand fallback */
    inset: 0.9rem;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    color: var(--text);
    background: rgba(0, 0, 0, 0.28);
    border-radius: 12px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.partner-card .card-body img.is-broken { display: none !important; }
.partner-card .card-body img.is-broken ~ .partner-initials { display: flex; }

/* Play affordance revealed on hover */
.partner-card .card-body i.fa-play {
    width: 44px;
    height: 44px;
    background: var(--brand-grad) !important;
    color: var(--green-ink) !important;
    box-shadow: 0 8px 20px rgba(var(--green-rgb), 0.45);
    z-index: 2;
}

/* ---------- Glowing tier tag, flush in the top-right corner --------
   .partner-card is position:relative + overflow:hidden, and .card-header is a
   zero-height positioned box pinned to the card's top edge (padding:0 below),
   so top/right:0 lands the tag exactly in the card's top-right corner and the
   card's own 18px radius trims it for free. */
.partner-card .card-header {
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.partner-card .card-header .badge,
.partner-card .partner-badge {
    z-index: 3;
    padding: 0.36rem 0.58rem !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.06em;
    /* Corner tag: square where it meets the card's edges, curved inward.
       17px = the card's 18px radius minus its 1px border, so the outer arc
       follows the card exactly instead of being visibly clipped. */
    border-radius: 0 !important;
    border-top-right-radius: 17px !important;
    border-bottom-left-radius: 12px !important;
}
/* Base tag: brand mint→aqua. Tier modifiers below re-tint it.
   --bglow drives the halo colour. */
.partner-card .partner-badge {
    position: absolute;
    /* !important so a stale compiled Blade view that still carries the old
       inline "top:10px; right:10px" cannot pull the tag off the corner. */
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    --bglow: rgba(var(--green-rgb), 0.75);
    background: var(--brand-grad) !important;
    color: var(--green-ink) !important;
    border: 0 !important;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* A light sweeps across the tag every few seconds — in from the left edge,
   out at the right edge — then waits off-screen before the next pass.

   Only background-position animates, on a ~46x18px box, so the repaint is
   negligible: no box-shadow animation (that janks on this device family) and
   no mix-blend-mode (that corrupted the GPU raster here).

   Geometry: the image is 250% of the tag's width and its bright core sits at
   the image's 50% mark, so core_x = width * (1.25 - 1.5 * position).
     position  110%  ->  core at -0.4x width  (fully off the LEFT edge)
     position  -10%  ->  core at +1.4x width  (fully off the RIGHT edge) */
.partner-card .partner-badge::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;   /* longhand fallback */
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background-image: linear-gradient(115deg,
        rgba(255, 255, 255, 0)    38%,
        rgba(255, 255, 255, 0.28) 46%,
        rgba(255, 255, 255, 0.88) 50%,
        rgba(255, 255, 255, 0.28) 54%,
        rgba(255, 255, 255, 0)    62%);
    background-repeat: no-repeat;
    background-size: 250% 100%;
    background-position: 110% 0;
    -webkit-animation: nzBadgeSheen 3.4s ease-in-out infinite;
            animation: nzBadgeSheen 3.4s ease-in-out infinite;
}
@-webkit-keyframes nzBadgeSheen {
    0%,  8%   { background-position: 110% 0; }
    42%, 100% { background-position: -10% 0; }
}
@keyframes nzBadgeSheen {
    0%,  8%   { background-position: 110% 0; }
    42%, 100% { background-position: -10% 0; }
}
/* Stagger the passes so a row of tags shimmers in sequence, not in unison. */
.partner-card:nth-child(4n + 2) .partner-badge::before {
    -webkit-animation-delay: 0.42s;
            animation-delay: 0.42s;
}
.partner-card:nth-child(4n + 3) .partner-badge::before {
    -webkit-animation-delay: 0.84s;
            animation-delay: 0.84s;
}
.partner-card:nth-child(4n) .partner-badge::before {
    -webkit-animation-delay: 1.26s;
            animation-delay: 1.26s;
}
/* The halo lives on its own layer and only its OPACITY animates — the
   compositor handles that on the GPU, so 12 glowing labels never repaint
   (animating box-shadow directly would, and this device family is fussy). */
.partner-card .partner-badge::after {
    content: "";
    position: absolute;
    top: -1px; right: -1px; bottom: -1px; left: -1px;   /* longhand fallback */
    inset: -1px;
    /* inherit, not 999px — the tag is a corner shape now, so a pill-shaped
       halo would bleed past its square edges. */
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 12px 1px var(--bglow);
    opacity: 0.45;
    -webkit-animation: nzBadgeGlow 2.8s ease-in-out infinite;
            animation: nzBadgeGlow 2.8s ease-in-out infinite;
}
@-webkit-keyframes nzBadgeGlow {
    0%, 100% { opacity: 0.40; }
    50%      { opacity: 1; }
}
@keyframes nzBadgeGlow {
    0%, 100% { opacity: 0.40; }
    50%      { opacity: 1; }
}

/* Tier tints — derived from the real badge text stored on each partner.
   Warm amber + gold read as "premium", and stay clear of red/purple/pink. */
.partner-card .partner-badge--gold,
.partner-card .partner-badge--epic,
.partner-card .partner-badge--vip,
.partner-card .partner-badge--premium,
.partner-card .partner-badge--exclusive {
    --bglow: rgba(var(--gold-rgb), 0.80);
    background: var(--gold-grad) !important;
    color: var(--gold-ink) !important;
}
.partner-card .partner-badge--hot,
.partner-card .partner-badge--trending,
.partner-card .partner-badge--sale,
.partner-card .partner-badge--fire {
    --bglow: rgba(255, 160, 80, 0.80);
    background: linear-gradient(135deg, #FFC978 0%, #FF9A4D 100%) !important;
    color: #2C1503 !important;
}
.partner-card .partner-badge--new,
.partner-card .partner-badge--fresh,
.partner-card .partner-badge--beta {
    --bglow: rgba(var(--cyan-rgb), 0.80);
    background: linear-gradient(135deg, #8AE6FF 0%, #37C6F2 100%) !important;
    color: #04212B !important;
}
.partner-card .partner-badge--elite,
.partner-card .partner-badge--pro,
.partner-card .partner-badge--plus {
    --bglow: rgba(var(--aqua-rgb), 0.80);
    background: linear-gradient(135deg, #8CF7DA 0%, #2BE3C6 100%) !important;
    color: #04231F !important;
}
/* top / best / recommended keep the primary mint pill (default) */

/* ---------------- Name plate + rating ---------------------------- */
.partner-card .card-footer {
    background: linear-gradient(180deg, rgba(5, 13, 20, 0.18) 0%, rgba(5, 13, 20, 0.55) 100%) !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    padding: 0.5rem 0.6rem 0.7rem !important;
    flex: 0 0 auto !important;
}
.partner-card .card-footer .h6 {
    color: var(--text) !important;
    display: block;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Ratings in premium gold, with a whisper of glow */
.partner-card .card-footer .text-warning {
    color: var(--gold) !important;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.35);
    letter-spacing: 0.06em;
}
.partner-card .fa-lock, .partner-card svg { z-index: 2; }

/* Locked partners: dimmed wall, mint level hint */
.partner-card .card-body .position-absolute.text-white p {
    color: var(--green) !important;
    margin: 0.25rem 0 0;
    font-weight: 700 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Light mode: the name plate must LIFT off the card, not darken it, and the
   mint level hint needs a deeper tone to stay legible over a pale logo. */
html[data-ui-theme="light"] .partner-card .card-footer {
    background: linear-gradient(180deg, rgba(10, 30, 36, 0.02) 0%, rgba(10, 30, 36, 0.07) 100%) !important;
}
html[data-ui-theme="light"] .partner-card .card-footer .text-warning {
    text-shadow: none;
}
html[data-ui-theme="light"] .partner-card .card-body .position-absolute.text-white p {
    color: #06754A !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.85);
}
html[data-ui-theme="light"] .partner-card .card-body .position-absolute.text-white svg {
    color: #0A2620 !important;
    -webkit-filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.9));
            filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.9));
}

@media (max-width: 575.98px) {
    .partner-card .card-body { height: 104px !important; padding: 0.7rem !important; }
    .partner-card .card-footer .h6 { font-size: 12px !important; }
    .partner-card .partner-initials { font-size: 1.2rem; }
    /* Must repeat the base rule's full selector list: the base sets these via
       ".partner-card .card-header .badge" (0,3,0), so a lone
       ".partner-card .partner-badge" (0,2,0) here would lose even with
       !important. Matching the list ties specificity and source order wins. */
    .partner-card .card-header .badge,
    .partner-card .partner-badge {
        font-size: 0.66rem !important;
        padding: 0.3rem 0.5rem !important;
        /* smaller tag -> a tighter inner curve keeps the corner reading as a tag */
        border-bottom-left-radius: 10px !important;
    }
}

/* --------------------------- Reduced motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .partner-card .partner-badge::after {
        -webkit-animation: none !important;
                animation: none !important;
        opacity: 0.6 !important;
    }
    /* No travelling sheen when motion is reduced — drop the gradient too, so
       nothing is left frozen mid-sweep across the label. */
    .partner-card .partner-badge::before {
        -webkit-animation: none !important;
                animation: none !important;
        background-image: none !important;
    }
    /* A frozen loading indicator reads as a hung page, so the preloader keeps
       turning - just slower, and with the decorative pulses switched off. */
    .loader {
        -webkit-animation: nzSpin 2.4s linear infinite !important;
                animation: nzSpin 2.4s linear infinite !important;
        -webkit-animation-iteration-count: infinite !important;
                animation-iteration-count: infinite !important;
    }
    .loader::before {
        -webkit-animation: none !important;
                animation: none !important;
    }
    .loader::after {
        -webkit-animation: none !important;
                animation: none !important;
        opacity: 0.75 !important;
        -webkit-transform: scale(0.9) !important;
                transform: scale(0.9) !important;
    }
    .spinner-border {
        -webkit-animation-duration: 1.6s !important;
                animation-duration: 1.6s !important;
        -webkit-animation-iteration-count: infinite !important;
                animation-iteration-count: infinite !important;
    }
}


/* ==================================================================
   RED KILL — generated from the compiled Sneat build
   ------------------------------------------------------------------
   The purchased template was compiled with BOTH $primary AND $success
   set to #DD2E18 (a red-orange), so hundreds of rules inside
   core-dark.css / theme-default-dark.css hard-code that literal — e.g.
       .bg-label-success { color: #DD2E18 !important }
   which is exactly why the green "success" tick in the notification
   list rendered red. Overriding --bs-primary cannot reach those: they
   are literal hex values, not var() references.

   Each rule below repeats the template's OWN selector verbatim and only
   swaps the red literal, so specificity is identical and premium-ui.css
   (loaded last) wins on source order:
       #DD2E18    ->  #54F39A                      brand mint
       #DD2E18xx  ->  rgba(84,243,154, xx/255)     same tone, kept alpha
       #e11c45    ->  #2BE3C6                      aqua, the hover tone

   Asserted at generation time: no .text-/.btn-/.bg-/.alert-/.border-
   danger rule uses #DD2E18, so real danger red (#ea5455) is left alone.
   That is what keeps REJECTED notifications red.
   ================================================================== */
.form-label {
    color:#54F39A !important;
}
.col-form-label {
    color:#54F39A !important;
}
.form-control:focus {
    border-color:#54F39A !important;
}
.form-select:focus {
    border-color:#54F39A !important;
}
.form-check-input:focus {
    border-color:#54F39A !important;
}
.form-check-input:checked {
    background-color:#54F39A !important;
}
.form-check-input[type=checkbox]:indeterminate {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: #54F39A !important;
    --bs-dropdown-link-color: #54F39A !important;
    --bs-dropdown-link-hover-color: #54F39A !important;
}
.dropdown-menu-dark {
    --bs-dropdown-link-active-bg: #54F39A !important;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: #54F39A !important;
}
.card {
    --bs-card-title-color: #54F39A !important;
}
.accordion {
    --bs-accordion-active-color: #54F39A !important;
    --bs-accordion-btn-color: #54F39A !important;
    --bs-accordion-btn-focus-border-color: #54F39A !important;
}
.pagination {
    --bs-pagination-active-bg: #54F39A !important;
    --bs-pagination-active-border-color: #54F39A !important;
}
.progress,.progress-stacked {
    --bs-progress-bar-bg: #54F39A !important;
}
.list-group {
    --bs-list-group-action-active-color: #54F39A !important;
    --bs-list-group-action-hover-color: #54F39A !important;
    --bs-list-group-active-bg: #54F39A !important;
    --bs-list-group-active-border-color: #54F39A !important;
}
.toast {
    --bs-toast-header-color: #54F39A !important;
}
.popover {
    --bs-popover-header-color: #54F39A !important;
}
.bg-label-success {
    color:#54F39A!important;
}
.bg-label-hover-success {
    color:#54F39A!important;
}
.bg-label-hover-success:hover {
    background-color:#54F39A!important;
}
.bg-gradient-success {
    background-image:linear-gradient(45deg,#54F39A,#94e3b7)!important;
}
.table:not(.table-dark) thead:not(.table-dark) th {
    color:#54F39A !important;
}
.btn-success {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.btn-success.disabled,.btn-success:disabled {
    background-color:#54F39A!important;
    border-color:#54F39A!important;
}
.btn-label-success {
    color:#54F39A !important;
}
.btn-label-success.waves-effect .waves-ripple {
    background:radial-gradient(rgba(84, 243, 154, 0.20) 0,rgba(84, 243, 154, 0.30) 40%,rgba(84, 243, 154, 0.40),rgba(84, 243, 154, 0.50),#fff0 70%) !important;
}
.btn-label-success:hover {
    color:#54F39A!important;
}
.btn-label-success:focus,.btn-label-success.focus {
    color:#54F39A !important;
}
.btn-label-success:active,.btn-label-success.active,.btn-label-success.show.dropdown-toggle,.show>.btn-label-success.dropdown-toggle {
    color:#54F39A!important;
}
.btn-label-success.disabled,.btn-label-success:disabled {
    color:#54F39A!important;
}
.btn-outline-success {
    border-color:#54F39A !important;
    color:#54F39A !important;
}
.btn-outline-success.waves-effect .waves-ripple {
    background:radial-gradient(rgba(84, 243, 154, 0.20) 0,rgba(84, 243, 154, 0.30) 40%,rgba(84, 243, 154, 0.40),rgba(84, 243, 154, 0.50),#fff0 70%) !important;
}
.btn-outline-success:hover {
    border-color:#54F39A!important;
    color:#54F39A!important;
}
.btn-check:focus+.btn-outline-success,.btn-outline-success:focus {
    border-color:#54F39A !important;
    color:#54F39A !important;
}
.btn-check:checked+.btn-outline-success,.btn-check:active+.btn-outline-success,.btn-outline-success:active,.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show {
    border-color:#54F39A!important;
    color:#54F39A!important;
}
.btn-outline-success.disabled,.btn-outline-success:disabled {
    color:#54F39A!important;
}
.btn-outline-success .badge {
    background:#54F39A !important;
    border-color:#54F39A !important;
}
.btn-outline-success:hover .badge,.btn-outline-success:focus:hover .badge,.btn-outline-success:active .badge,.btn-outline-success.active .badge,.show>.btn-outline-success.dropdown-toggle .badge {
    background:#54F39A !important;
    border-color:#54F39A !important;
}
.bg-success.bg-glow {
    box-shadow:0 2px 3px rgba(84, 243, 154, 0.30) !important;
}
.nav-tabs.widget-nav-tabs .nav-link.active {
    border-color:#54F39A !important;
}
.nav-tabs.widget-nav-tabs .nav-link.active .badge {
    background-color:rgba(84, 243, 154, 0.08)!important;
    color:#54F39A!important;
}
.pagination-success .page-item.active .page-link,.pagination-success.pagination li.active>a:not(.page-link) {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.pagination-success .page-item>.page-link.active {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.pagination-success .page-item.first .page-link.active,.pagination-success .page-item.last .page-link.active,.pagination-success .page-item.next .page-link.active,.pagination-success .page-item.prev .page-link.active,.pagination-success .page-item.previous .page-link.active {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.alert-success {
    color:#54F39A !important;
}
.alert-success .alert-link {
    color:#54F39A !important;
}
.alert-success hr {
    background-color:#54F39A!important;
}
.tooltip-success .tooltip-inner,.tooltip-success>.tooltip .tooltip-inner,.ngb-tooltip-success+ngb-tooltip-window .tooltip-inner {
    background:#54F39A !important;
}
.tooltip-success.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow:before,.tooltip-success>.tooltip.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow:before,.ngb-tooltip-success+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow:before {
    border-top-color:#54F39A !important;
}
.tooltip-success.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before,.tooltip-success>.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before,.ngb-tooltip-success+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before {
    border-left-color:#54F39A !important;
}
.tooltip-success.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow:before,.tooltip-success>.tooltip.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow:before,.ngb-tooltip-success+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow:before {
    border-bottom-color:#54F39A !important;
}
.tooltip-success.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before,.tooltip-success>.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before,.ngb-tooltip-success+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before {
    border-right-color:#54F39A !important;
}
.popover-success,.popover-success>.popover,.ngb-popover-success+ngb-popover-window {
    background:#54F39A !important;
}
.popover-success .popover-header,.popover-success>.popover .popover-header,.ngb-popover-success+ngb-popover-window .popover-header {
    border-color:#54F39A !important;
}
.popover-success.bs-popover-auto[data-popper-placement=top]>.popover-arrow:after,.popover-success>.popover.bs-popover-auto[data-popper-placement=top]>.popover-arrow:after,.ngb-popover-success+ngb-popover-window.bs-popover-auto[data-popper-placement=top]>.popover-arrow:after {
    border-top-color:#54F39A!important;
}
.popover-success.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after,.popover-success>.popover.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after,.ngb-popover-success+ngb-popover-window.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after {
    border-right-color:#54F39A!important;
}
.popover-success.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow:after,.popover-success>.popover.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow:after,.ngb-popover-success+ngb-popover-window.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow:after {
    border-bottom-color:#54F39A!important;
}
.popover-success.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after,.popover-success>.popover.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after,.ngb-popover-success+ngb-popover-window.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after {
    border-left-color:#54F39A!important;
}
.form-control:hover:not([disabled]):not([focus]) {
    border-color:#54F39A !important;
}
.form-select:hover:not([disabled]):not([focus]) {
    border-color:#54F39A !important;
}
.form-check-success .form-check-input:focus {
    border-color:#54F39A !important;
}
.form-check-success .form-check-input:checked,.form-check-success .form-check-input[type=checkbox]:indeterminate {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.form-check-success.custom-option.checked {
    border:1px solid #54F39A !important;
}
.input-group:hover .input-group-text,.input-group:hover .form-control {
    border-color:#54F39A !important;
}
.breadcrumb-item,.breadcrumb-item a {
    color:#54F39A !important;
}
.breadcrumb-item.active a:hover,.breadcrumb-item.active a:focus {
    color:#54F39A !important;
}
.list-group-item-success {
    border-color:#54F39A !important;
    color:#54F39A!important;
}
a.list-group-item-success,button.list-group-item-success {
    color:#54F39A !important;
}
a.list-group-item-success:hover,a.list-group-item-success:focus,button.list-group-item-success:hover,button.list-group-item-success:focus {
    border-color:#54F39A !important;
    color:#54F39A !important;
}
a.list-group-item-success.active,button.list-group-item-success.active {
    background-color:#54F39A!important;
    border-color:#54F39A!important;
}
.list-group.list-group-timeline .list-group-timeline-success:before {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.card.card-border-shadow-success:hover:after {
    border-bottom-color:#54F39A !important;
}
.border-primary {
    border-color:#54F39A!important;
}
.border-success {
    border-color:#54F39A!important;
}
.text-heading {
    color:#54F39A!important;
}
.custom-option:hover {
    border:1px solid #54F39A !important;
}
.custom-option-icon.checked i,.custom-option-icon.checked svg {
    color:#54F39A !important;
}
.custom-option-icon .custom-option-body .custom-option-title {
    color:#54F39A !important;
}
.switch-input:checked~.switch-toggle-slider {
    background:#54F39A !important;
    border-color:#54F39A !important;
    border-color:#54F39A!important;
}
.switch-secondary.switch .switch-input:focus~.switch-toggle-slider {
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.switch-success.switch .switch-input:checked~.switch-toggle-slider {
    background:#54F39A !important;
    border-color:#54F39A!important;
}
.switch-success.switch .switch-input:focus~.switch-toggle-slider {
    border:1px solid #54F39A !important;
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.switch-info.switch .switch-input:focus~.switch-toggle-slider {
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.switch-warning.switch .switch-input:focus~.switch-toggle-slider {
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.switch-danger.switch .switch-input:focus~.switch-toggle-slider {
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.switch-dark.switch .switch-input:focus~.switch-toggle-slider {
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.switch-gray.switch .switch-input:focus~.switch-toggle-slider {
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.was-validated .switch-input:valid~.switch-label,.switch-input.invalid~.switch-label,.switch-input.is-valid~.switch-label {
    color:#54F39A !important;
}
.was-validated .switch-input:valid~.switch-toggle-slider,.switch-input.invalid~.switch-toggle-slider,.switch-input.is-valid~.switch-toggle-slider {
    border:1px solid #54F39A!important;
}
.was-validated .switch-input:valid:checked~.switch-toggle-slider,.switch-input.invalid:checked~.switch-toggle-slider,.switch-input.is-valid:checked~.switch-toggle-slider {
    background:#54F39A !important;
    border-color:#54F39A!important;
}
.was-validated .switch-input:valid:focus~.switch-toggle-slider,.switch-input.invalid:focus~.switch-toggle-slider,.switch-input.is-valid:focus~.switch-toggle-slider {
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.40) !important;
}
.avatar.avatar-online:after {
    background-color:#54F39A !important;
}
.timeline .timeline-item .timeline-indicator i,.timeline .timeline-item .timeline-indicator-advanced i {
    color:#54F39A !important;
}
.timeline .timeline-item .timeline-point {
    background-color:#54F39A !important;
}
.timeline .timeline-item-success .timeline-event {
    background-color:rgba(84, 243, 154, 0.10) !important;
}
.timeline .timeline-item-success .timeline-event:before {
    border-left-color:rgba(84, 243, 154, 0.10)!important;
    border-right-color:rgba(84, 243, 154, 0.10)!important;
}
.timeline .timeline-point-success {
    background-color:#54F39A!important;
    box-shadow:0 0 0 .1875rem rgba(84, 243, 154, 0.16) !important;
}
.timeline .timeline-indicator-success i {
    color:#54F39A!important;
}
.divider.divider-success.divider-vertical:before,.divider.divider-success.divider-vertical:after,.divider.divider-success .divider-text:before,.divider.divider-success .divider-text:after {
    border-color:#54F39A !important;
}
.navbar.bg-success {
    background-color:rgba(84, 243, 154, 0.95)!important;
}
.navbar.bg-success .search-input-wrapper .search-input,.navbar.bg-success .search-input-wrapper .search-toggler {
    background-color:#54F39A!important;
}
.navbar.bg-white .navbar-brand,.navbar.bg-white .navbar-brand a {
    color:#54F39A !important;
}
.navbar.bg-white .navbar-brand:hover,.navbar.bg-white .navbar-brand:focus,.navbar.bg-white .navbar-brand a:hover,.navbar.bg-white .navbar-brand a:focus {
    color:#54F39A !important;
}
.navbar.bg-white .navbar-nav>.nav-link:hover,.navbar.bg-white .navbar-nav>.nav-link:focus,.navbar.bg-white .navbar-nav>.nav-item>.nav-link:hover,.navbar.bg-white .navbar-nav>.nav-item>.nav-link:focus,.navbar.bg-white .navbar-nav>.nav>.nav-item>.nav-link:hover,.navbar.bg-white .navbar-nav>.nav>.nav-item>.nav-link:focus {
    color:#54F39A !important;
}
.navbar.bg-white .navbar-nav .show>.nav-link,.navbar.bg-white .navbar-nav .active>.nav-link,.navbar.bg-white .navbar-nav .nav-link.show,.navbar.bg-white .navbar-nav .nav-link.active {
    color:#54F39A !important;
}
.navbar.bg-white .navbar-toggler {
    border-color:rgba(84, 243, 154, 0.07) !important;
}
.navbar.bg-white .navbar-text a {
    color:#54F39A !important;
}
.navbar.bg-white .navbar-text a:hover,.navbar.bg-white .navbar-text a:focus {
    color:#54F39A !important;
}
.navbar.bg-white hr {
    border-color:rgba(84, 243, 154, 0.07) !important;
}
.navbar.bg-light .navbar-brand,.navbar.bg-light .navbar-brand a {
    color:#54F39A !important;
}
.navbar.bg-light .navbar-brand:hover,.navbar.bg-light .navbar-brand:focus,.navbar.bg-light .navbar-brand a:hover,.navbar.bg-light .navbar-brand a:focus {
    color:#54F39A !important;
}
.navbar.bg-light .navbar-nav>.nav-link:hover,.navbar.bg-light .navbar-nav>.nav-link:focus,.navbar.bg-light .navbar-nav>.nav-item>.nav-link:hover,.navbar.bg-light .navbar-nav>.nav-item>.nav-link:focus,.navbar.bg-light .navbar-nav>.nav>.nav-item>.nav-link:hover,.navbar.bg-light .navbar-nav>.nav>.nav-item>.nav-link:focus {
    color:#54F39A !important;
}
.navbar.bg-light .navbar-nav .show>.nav-link,.navbar.bg-light .navbar-nav .active>.nav-link,.navbar.bg-light .navbar-nav .nav-link.show,.navbar.bg-light .navbar-nav .nav-link.active {
    color:#54F39A !important;
}
.navbar.bg-light .navbar-toggler {
    border-color:rgba(84, 243, 154, 0.15) !important;
}
.navbar.bg-light .navbar-text a {
    color:#54F39A !important;
}
.navbar.bg-light .navbar-text a:hover,.navbar.bg-light .navbar-text a:focus {
    color:#54F39A !important;
}
.navbar.bg-light hr {
    border-color:rgba(84, 243, 154, 0.15) !important;
}
.navbar.bg-lighter .navbar-brand,.navbar.bg-lighter .navbar-brand a {
    color:#54F39A !important;
}
.navbar.bg-lighter .navbar-brand:hover,.navbar.bg-lighter .navbar-brand:focus,.navbar.bg-lighter .navbar-brand a:hover,.navbar.bg-lighter .navbar-brand a:focus {
    color:#54F39A !important;
}
.navbar.bg-lighter .navbar-nav>.nav-link:hover,.navbar.bg-lighter .navbar-nav>.nav-link:focus,.navbar.bg-lighter .navbar-nav>.nav-item>.nav-link:hover,.navbar.bg-lighter .navbar-nav>.nav-item>.nav-link:focus,.navbar.bg-lighter .navbar-nav>.nav>.nav-item>.nav-link:hover,.navbar.bg-lighter .navbar-nav>.nav>.nav-item>.nav-link:focus {
    color:#54F39A !important;
}
.navbar.bg-lighter .navbar-nav .show>.nav-link,.navbar.bg-lighter .navbar-nav .active>.nav-link,.navbar.bg-lighter .navbar-nav .nav-link.show,.navbar.bg-lighter .navbar-nav .nav-link.active {
    color:#54F39A !important;
}
.navbar.bg-lighter .navbar-toggler {
    border-color:rgba(84, 243, 154, 0.07) !important;
}
.navbar.bg-lighter .navbar-text a {
    color:#54F39A !important;
}
.navbar.bg-lighter .navbar-text a:hover,.navbar.bg-lighter .navbar-text a:focus {
    color:#54F39A !important;
}
.navbar.bg-lighter hr {
    border-color:rgba(84, 243, 154, 0.07) !important;
}
.layout-footer-fixed .layout-horizontal .footer.bg-success {
    background-color:#54F39A!important;
}
.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .footer.bg-success .footer-container {
    background-color:#54F39A!important;
}
.footer.bg-white .footer-link:hover,.footer.bg-white .footer-link:focus {
    color:#54F39A !important;
}
.footer.bg-white .footer-text {
    color:#54F39A !important;
}
.footer.bg-white .show>.footer-link,.footer.bg-white .active>.footer-link,.footer.bg-white .footer-link.show,.footer.bg-white .footer-link.active {
    color:#54F39A !important;
}
.footer.bg-white hr {
    border-color:rgba(84, 243, 154, 0.07) !important;
}
.footer.bg-light .footer-link:hover,.footer.bg-light .footer-link:focus {
    color:#54F39A !important;
}
.footer.bg-light .footer-text {
    color:#54F39A !important;
}
.footer.bg-light .show>.footer-link,.footer.bg-light .active>.footer-link,.footer.bg-light .footer-link.show,.footer.bg-light .footer-link.active {
    color:#54F39A !important;
}
.footer.bg-light hr {
    border-color:rgba(84, 243, 154, 0.08) !important;
}
.footer.bg-lighter .footer-link:hover,.footer.bg-lighter .footer-link:focus {
    color:#54F39A !important;
}
.footer.bg-lighter .footer-text {
    color:#54F39A !important;
}
.footer.bg-lighter .show>.footer-link,.footer.bg-lighter .active>.footer-link,.footer.bg-lighter .footer-link.show,.footer.bg-lighter .footer-link.active {
    color:#54F39A !important;
}
.footer.bg-lighter hr {
    border-color:rgba(84, 243, 154, 0.06) !important;
}
[dir=rtl] .tooltip-success.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before,[dir=rtl] .tooltip-success>.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before,[dir=rtl] .ngb-tooltip-success+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before {
    border-right-color:#54F39A !important;
}
[dir=rtl] .tooltip-success.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before,[dir=rtl] .tooltip-success>.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before,[dir=rtl] .ngb-tooltip-success+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before {
    border-left-color:#54F39A !important;
}
[dir=rtl] .popover-success.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after,[dir=rtl] .popover-success>.popover.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after,[dir=rtl] .ngb-popover-success+ngb-popover-window.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after {
    border-left-color:#54F39A!important;
}
[dir=rtl] .popover-success.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after,[dir=rtl] .popover-success>.popover.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after,[dir=rtl] .ngb-popover-success+ngb-popover-window.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after {
    border-right-color:#54F39A!important;
}
.text-primary {
    color:#54F39A!important;
}
.bg-primary {
    background-color:#54F39A!important;
}
a.bg-primary:hover,a.bg-primary:focus {
    background-color:#2BE3C6!important;
}
.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span {
    background-color:#54F39A !important;
}
.bg-label-primary,.bg-label-hover-primary {
    color:#54F39A!important;
}
.bg-label-hover-primary:hover {
    background-color:#54F39A!important;
}
.bg-gradient-primary {
    background-image:linear-gradient(45deg,#54F39A,#f68ea4)!important;
}
.bg-primary.bg-glow {
    box-shadow:0 2px 3px rgba(84, 243, 154, 0.30) !important;
}
.page-item.active .page-link,.pagination li.active>a:not(.page-link) {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.page-item>.page-link.active {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.page-item.first .page-link.active,.page-item.last .page-link.active,.page-item.next .page-link.active,.page-item.prev .page-link.active,.page-item.previous .page-link.active {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.progress-bar {
    background-color:#54F39A !important;
}
.modal-onboarding .carousel-indicators [data-bs-target] {
    background-color:#54F39A !important;
}
.carousel-control-prev,.carousel-control-next {
    color:#54F39A !important;
}
.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus {
    color:#54F39A !important;
}
.list-group-item-primary {
    border-color:#54F39A !important;
    color:#54F39A!important;
}
a.list-group-item-primary,button.list-group-item-primary {
    color:#54F39A !important;
}
a.list-group-item-primary:hover,a.list-group-item-primary:focus,button.list-group-item-primary:hover,button.list-group-item-primary:focus {
    border-color:#54F39A !important;
    color:#54F39A !important;
}
a.list-group-item-primary.active,button.list-group-item-primary.active {
    background-color:#54F39A!important;
    border-color:#54F39A!important;
}
.list-group-item-action.active,.list-group-item-action.active:hover,.list-group-item-action.active:focus {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.list-group.list-group-timeline .list-group-timeline-primary:before {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.alert-primary {
    color:#54F39A !important;
}
.alert-primary .alert-link {
    color:#54F39A !important;
}
.alert-primary hr {
    background-color:#54F39A!important;
}
.tooltip-primary .tooltip-inner,.tooltip-primary>.tooltip .tooltip-inner,.ngb-tooltip-primary+ngb-tooltip-window .tooltip-inner {
    background:#54F39A !important;
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow:before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow:before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow:before {
    border-top-color:#54F39A !important;
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before {
    border-left-color:#54F39A !important;
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow:before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow:before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow:before {
    border-bottom-color:#54F39A !important;
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before {
    border-right-color:#54F39A !important;
}
.popover-primary,.popover-primary>.popover,.ngb-popover-primary+ngb-popover-window {
    background:#54F39A !important;
}
.popover-primary .popover-header,.popover-primary>.popover .popover-header,.ngb-popover-primary+ngb-popover-window .popover-header {
    border-color:#54F39A !important;
}
.popover-primary.bs-popover-auto[data-popper-placement=top]>.popover-arrow:after,.popover-primary>.popover.bs-popover-auto[data-popper-placement=top]>.popover-arrow:after,.ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=top]>.popover-arrow:after {
    border-top-color:#54F39A!important;
}
.popover-primary.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after,.popover-primary>.popover.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after,.ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after {
    border-right-color:#54F39A!important;
}
.popover-primary.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow:after,.popover-primary>.popover.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow:after,.ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow:after {
    border-bottom-color:#54F39A!important;
}
.popover-primary.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after,.popover-primary>.popover.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after,.ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after {
    border-left-color:#54F39A!important;
}
.btn-primary {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.btn-primary.disabled,.btn-primary:disabled {
    background-color:#54F39A!important;
    border-color:#54F39A!important;
}
.btn-label-primary {
    color:#54F39A !important;
}
.btn-label-primary.waves-effect .waves-ripple {
    background:radial-gradient(rgba(84, 243, 154, 0.20) 0,rgba(84, 243, 154, 0.30) 40%,rgba(84, 243, 154, 0.40),rgba(84, 243, 154, 0.50),#fff0 70%) !important;
}
.btn-label-primary:hover {
    color:#54F39A!important;
}
.btn-label-primary:focus,.btn-label-primary.focus {
    color:#54F39A !important;
}
.btn-label-primary:active,.btn-label-primary.active,.btn-label-primary.show.dropdown-toggle,.show>.btn-label-primary.dropdown-toggle {
    color:#54F39A!important;
}
.btn-label-primary.disabled,.btn-label-primary:disabled {
    color:#54F39A!important;
}
.btn-outline-primary {
    border-color:#54F39A !important;
    color:#54F39A !important;
}
.btn-outline-primary.waves-effect .waves-ripple {
    background:radial-gradient(rgba(84, 243, 154, 0.20) 0,rgba(84, 243, 154, 0.30) 40%,rgba(84, 243, 154, 0.40),rgba(84, 243, 154, 0.50),#fff0 70%) !important;
}
.btn-outline-primary:hover {
    border-color:#54F39A!important;
    color:#54F39A!important;
}
.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus {
    border-color:#54F39A !important;
    color:#54F39A !important;
}
.btn-check:checked+.btn-outline-primary,.btn-check:active+.btn-outline-primary,.btn-outline-primary:active,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show {
    border-color:#54F39A!important;
    color:#54F39A!important;
}
.btn-outline-primary.disabled,.btn-outline-primary:disabled {
    color:#54F39A!important;
}
.btn-outline-primary .badge {
    background:#54F39A !important;
    border-color:#54F39A !important;
}
.btn-outline-primary:hover .badge,.btn-outline-primary:focus:hover .badge,.btn-outline-primary:active .badge,.btn-outline-primary.active .badge,.show>.btn-outline-primary.dropdown-toggle .badge {
    background:#54F39A !important;
    border-color:#54F39A !important;
}
.dropdown-item:not(.disabled).active,.dropdown-item:not(.disabled):active {
    background-color:#54F39A !important;
}
.dropdown-menu>li:not(.disabled)>a:not(.dropdown-item):active,.dropdown-menu>li.active:not(.disabled)>a:not(.dropdown-item) {
    background-color:#54F39A !important;
}
.nav-pills .nav-link.active,.nav-pills .nav-link.active:hover,.nav-pills .nav-link.active:focus {
    background-color:#54F39A !important;
}
.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:hover,.nav-tabs .nav-link.active:focus {
    box-shadow:0 -2px #54F39A inset !important;
}
.nav-align-bottom .nav-tabs .nav-link.active,.nav-align-bottom .nav-tabs .nav-link.active:hover,.nav-align-bottom .nav-tabs .nav-link.active:focus {
    box-shadow:0 2px #54F39A inset !important;
}
.nav-align-left .nav-tabs .nav-link.active,.nav-align-left .nav-tabs .nav-link.active:hover,.nav-align-left .nav-tabs .nav-link.active:focus {
    box-shadow:-2px 0 #54F39A inset !important;
}
.nav-align-right .nav-tabs .nav-link.active,.nav-align-right .nav-tabs .nav-link.active:hover,.nav-align-right .nav-tabs .nav-link.active:focus {
    box-shadow:2px 0 #54F39A inset !important;
}
.form-control:focus,.form-select:focus {
    border-color:#54F39A!important;
}
.input-group:focus-within .form-control,.input-group:focus-within .input-group-text {
    border-color:#54F39A!important;
}
.form-check-input:checked,.form-check-input[type=checkbox]:indeterminate {
    background-color:#54F39A !important;
    border-color:#54F39A !important;
}
.custom-option.checked {
    border:1px solid #54F39A !important;
}
.form-control:focus~.form-label {
    border-color:#54F39A !important;
}
.switch-input:focus~.switch-toggle-slider {
    border:1px solid #54F39A !important;
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.switch-primary.switch .switch-input:checked~.switch-toggle-slider {
    background:#54F39A !important;
    border-color:#54F39A!important;
}
.switch-primary.switch .switch-input:focus~.switch-toggle-slider {
    border:1px solid #54F39A !important;
    box-shadow:0 0 .25rem .05rem rgba(84, 243, 154, 0.10) !important;
}
.timeline .timeline-item-primary .timeline-event {
    background-color:rgba(84, 243, 154, 0.10) !important;
}
.timeline .timeline-item-primary .timeline-event:before {
    border-left-color:rgba(84, 243, 154, 0.10)!important;
    border-right-color:rgba(84, 243, 154, 0.10)!important;
}
.timeline .timeline-point-primary {
    background-color:#54F39A!important;
    box-shadow:0 0 0 .1875rem rgba(84, 243, 154, 0.16) !important;
}
.timeline .timeline-indicator-primary i {
    color:#54F39A!important;
}
.divider.divider-primary.divider-vertical:before,.divider.divider-primary.divider-vertical:after,.divider.divider-primary .divider-text:before,.divider.divider-primary .divider-text:after {
    border-color:#54F39A !important;
}
.navbar.bg-primary {
    background-color:rgba(84, 243, 154, 0.95)!important;
}
.navbar.bg-primary .search-input-wrapper .search-input,.navbar.bg-primary .search-input-wrapper .search-toggler {
    background-color:#54F39A!important;
}
.menu.bg-primary {
    background-color:#54F39A!important;
}
.menu.bg-primary.menu-horizontal {
    background-color:rgba(84, 243, 154, 0.95)!important;
}
.menu.bg-primary.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing)>.menu-sub,.menu.bg-primary.menu-horizontal .menu-inner .menu-item.open>.menu-toggle {
    background:#54F39A !important;
}
.menu.bg-primary.menu-horizontal .menu-item.active>.menu-link:not(.menu-toggle) {
    background:#54F39A !important;
}
.menu.bg-primary .menu-inner-shadow {
    background:linear-gradient(#54F39A 41%,rgba(84, 243, 154, 0.11) 95%,rgba(84, 243, 154, 0.00)) !important;
}
.layout-footer-fixed .layout-horizontal .footer.bg-primary {
    background-color:#54F39A!important;
}
.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .footer.bg-primary .footer-container {
    background-color:#54F39A!important;
}
.form-floating>.form-control:not(:-moz-placeholder-shown)~label {
    color:#54F39A !important;
}
.form-floating>.form-control:not(:-ms-input-placeholder)~label {
    color:#54F39A !important;
}
.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label {
    color:#54F39A !important;
}
.form-floating>.form-control:-webkit-autofill~label {
    color:#54F39A !important;
}
.svg-illustration svg {
    fill:#54F39A !important;
}
.jstree-default .jstree-wholerow-hovered,.jstree-default .jstree-hovered {
    background:rgba(84, 243, 154, 0.08) !important;
    color:#54F39A !important;
}
.jstree-default .jstree-wholerow-clicked,.jstree-default .jstree-clicked {
    background:#54F39A !important;
}
.jstree-default-dark .jstree-wholerow-hovered,.jstree-default-dark .jstree-hovered {
    background:rgba(84, 243, 154, 0.08) !important;
    color:#54F39A !important;
}
.jstree-default-dark .jstree-wholerow-clicked,.jstree-default-dark .jstree-clicked {
    background:#54F39A !important;
}
.card.card-border-shadow-primary:hover:after {
    border-bottom-color:#54F39A !important;
}
html:not([dir=rtl]) .border-primary,html[dir=rtl] .border-primary {
    border-color:#54F39A!important;
}
a {
    color:#54F39A !important;
}
.fill-primary {
    fill:#54F39A !important;
}
.bg-navbar-theme .navbar-brand,.bg-navbar-theme .navbar-brand a {
    color:#54F39A !important;
}
.bg-navbar-theme .navbar-brand:hover,.bg-navbar-theme .navbar-brand:focus,.bg-navbar-theme .navbar-brand a:hover,.bg-navbar-theme .navbar-brand a:focus {
    color:#54F39A !important;
}
.bg-navbar-theme .navbar-nav>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav-link:focus,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link:focus,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link:focus {
    color:#54F39A !important;
}
.bg-navbar-theme .navbar-nav .show>.nav-link,.bg-navbar-theme .navbar-nav .active>.nav-link,.bg-navbar-theme .navbar-nav .nav-link.show,.bg-navbar-theme .navbar-nav .nav-link.active {
    color:#54F39A !important;
}
.bg-navbar-theme .navbar-toggler {
    border-color:rgba(84, 243, 154, 0.06) !important;
}
.bg-navbar-theme .navbar-text a {
    color:#54F39A !important;
}
.bg-navbar-theme .navbar-text a:hover,.bg-navbar-theme .navbar-text a:focus {
    color:#54F39A !important;
}
.bg-navbar-theme hr {
    border-color:rgba(84, 243, 154, 0.06) !important;
}
.bg-menu-theme .menu-link:hover,.bg-menu-theme .menu-link:focus,.bg-menu-theme .menu-horizontal-prev:hover,.bg-menu-theme .menu-horizontal-prev:focus,.bg-menu-theme .menu-horizontal-next:hover,.bg-menu-theme .menu-horizontal-next:focus {
    color:#54F39A !important;
}
.bg-menu-theme .menu-link.active,.bg-menu-theme .menu-horizontal-prev.active,.bg-menu-theme .menu-horizontal-next.active {
    color:#54F39A !important;
}
.bg-menu-theme .menu-item.open:not(.menu-item-closing)>.menu-toggle,.bg-menu-theme .menu-item.active>.menu-link {
    color:#54F39A !important;
}
.bg-menu-theme.menu-vertical .menu-item.active>.menu-link:not(.menu-toggle) {
    background:linear-gradient(72.47deg,#000 22.16%,#54F39A 76.47%) !important;
    box-shadow:0 2px 6px #54F39A !important;
}
.bg-menu-theme.menu-horizontal .menu-inner>.menu-item.active>.menu-link.menu-toggle {
    background:linear-gradient(72.47deg,#000 22.16%,#54F39A 76.47%) !important;
    box-shadow:0 2px 6px #54F39A !important;
}
.bg-menu-theme.menu-horizontal .menu-item.active>.menu-link:not(.menu-toggle) {
    color:#54F39A!important;
}
.bg-menu-theme .menu-text {
    color:#54F39A !important;
}
.bg-menu-theme .ps__thumb-y,.bg-menu-theme .ps__rail-y.ps--clicking>.ps__thumb-y {
    background:rgba(84, 243, 154, 0.75)!important;
}
.bg-footer-theme .footer-link:hover,.bg-footer-theme .footer-link:focus {
    color:#54F39A !important;
}
.bg-footer-theme .footer-text {
    color:#54F39A !important;
}
.bg-footer-theme .show>.footer-link,.bg-footer-theme .active>.footer-link,.bg-footer-theme .footer-link.show,.bg-footer-theme .footer-link.active {
    color:#54F39A !important;
}
.bg-footer-theme hr {
    border-color:rgba(84, 243, 154, 0.06) !important;
}
[dir=rtl] .tooltip-primary.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before,[dir=rtl] .tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before,[dir=rtl] .ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before {
    border-right-color:#54F39A !important;
}
[dir=rtl] .tooltip-primary.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before,[dir=rtl] .tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before,[dir=rtl] .ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before {
    border-left-color:#54F39A !important;
}
[dir=rtl] .popover-primary.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after,[dir=rtl] .popover-primary>.popover.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after,[dir=rtl] .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=right]>.popover-arrow:after {
    border-left-color:#54F39A!important;
}
[dir=rtl] .popover-primary.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after,[dir=rtl] .popover-primary>.popover.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after,[dir=rtl] .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=left]>.popover-arrow:after {
    border-right-color:#54F39A!important;
}
[dir=rtl] .nav-align-left .nav-tabs .nav-link.active,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:focus {
    box-shadow:2px 0 #54F39A inset !important;
}
[dir=rtl] .nav-align-right .nav-tabs .nav-link.active,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:focus {
    box-shadow:-2px 0 #54F39A inset !important;
}
[dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active>.menu-link:not(.menu-toggle) {
    background:linear-gradient(72.47deg,rgba(84, 243, 154, 0.70) 22.16%,#54F39A 76.47%)!important;
}
[dir=rtl] .bg-menu-theme.menu-horizontal .menu-inner>.menu-item.active>.menu-link.menu-toggle {
    background:linear-gradient(72.47deg,rgba(84, 243, 154, 0.70) 22.16%,#54F39A 76.47%) !important;
    box-shadow:0 2px 6px #54F39A !important;
}

/* .bg-primary is a bare background utility, so the template never gives it
   a text colour — on the old red it inherited white. On bright mint white is
   unreadable, so the ink has to come with it (Join Now, Redeem Bonus, ...). */
.bg-primary {
    background-image: var(--brand-grad) !important;
    color: var(--green-ink) !important;
}
.bg-primary i,
.bg-primary svg,
.bg-primary span,
.bg-primary strong,
.bg-primary small,
.bg-primary .text-white {
    color: var(--green-ink) !important;
}
.bg-primary svg { stroke: currentColor !important; }
/* the template pairs .navbar.bg-primary with pale pink text */
.navbar.bg-primary,
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .navbar-brand a { color: var(--green-ink) !important; }

/* Status label chips — retint the muddy red-brown backgrounds the template
   shipped so each state reads at a glance. Danger stays red on purpose. */
.bg-label-success { background-color: rgba(var(--green-rgb), 0.16) !important; color: #54F39A !important; }
.bg-label-warning { background-color: rgba(255, 176, 60, 0.16) !important;     color: #FFB63C !important; }
.bg-label-danger  { background-color: rgba(234, 84, 85, 0.16) !important;       color: #FF6B6C !important; }
.bg-label-info    { background-color: rgba(var(--cyan-rgb), 0.16) !important;   color: #37C6F2 !important; }

/* The template also derives dark TINT backgrounds from the primary colour, and
   those carry no #DD2E18 literal so the generated block above cannot reach
   them: .btn-label-primary shipped #3e1e34, a red-magenta that reads purple
   against mint text. Retinted to a translucent mint so the whole label/alert
   family sits on the brand. (The matching -success tints are already teal
   (#1f393a) and are deliberately left alone.) */
.bg-label-primary,
.bg-label-hover-primary,
.list-group-item-primary,
a.list-group-item-primary:hover,
a.list-group-item-primary:focus,
button.list-group-item-primary:hover,
button.list-group-item-primary:focus,
.alert-primary,
.btn-label-primary,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    background-color: rgba(var(--green-rgb), 0.14) !important;
    background-image: none !important;
    color: var(--green) !important;
}
.btn-label-primary:hover,
.btn-label-primary:focus,
.btn-label-primary.focus,
.btn-label-primary:active,
.btn-label-primary.active,
.btn-label-primary.show.dropdown-toggle,
.show > .btn-label-primary.dropdown-toggle {
    background-color: rgba(var(--green-rgb), 0.24) !important;
    background-image: none !important;
    color: var(--green) !important;
}
.btn-label-primary.disabled,
.btn-label-primary:disabled {
    background-color: rgba(var(--green-rgb), 0.08) !important;
    background-image: none !important;
}
.alert-primary { border-color: rgba(var(--green-rgb), 0.28) !important; }

/* ============================================================
   PARTNER BADGE — FINAL OVERRIDE
   Forces badge to TOP-RIGHT corner on ALL pages.
   Beats any earlier rule (higher specificity + !important).
   ============================================================ */
html body .partner-card > .card-header > span.badge.partner-badge,
html body .partner-card > .card-header > span.partner-badge,
html body .partner-card > .card-header > span.badge,
html body .partner-card .partner-badge,
html body .partner-card .card-header .badge,
html body .partner-card .card-header > span,
html body .partner-card .badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    transform: none !important;
    float: none !important;
    z-index: 20 !important;
    border-radius: 0 !important;
    border-top-right-radius: 17px !important;
    border-bottom-left-radius: 12px !important;
    border: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Card header must not offset the badge */
html body .partner-card > .card-header {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Card must be positioned container */
html body .partner-card {
    position: relative !important;
    overflow: hidden !important;
}

/* Default mint color if no tier */
html body .partner-card .partner-badge:not([class*="partner-badge--"]) {
    background: linear-gradient(135deg, #54F39A, #2ecc71) !important;
    color: #0a2e1f !important;
    box-shadow: 0 4px 14px -4px rgba(84, 243, 154, 0.7) !important;
}

/* Mobile — smaller badge */
@media (max-width: 767.98px) {
    html body .partner-card .partner-badge,
    html body .partner-card .card-header .badge {
        padding: 4px 10px !important;
        font-size: 10px !important;
        border-top-right-radius: 14px !important;
        border-bottom-left-radius: 10px !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html body .partner-card .partner-badge,
    html body .partner-card .card-header .badge {
        transition: none !important;
        animation: none !important;
    }
}



/* =====================================================================
   ✨ 3 PREMIUM POLISH — Added (v8)
   ---------------------------------------------------------------------
   1. Top Offers section — better card lift, reward glow, hover polish
   2. Live ticker — smooth scroll, avatar ring, pause on hover
   3. Sidebar — logo glow, active state, menu items premium
   All GPU-safe. Reduced-motion respected. Cross-OS.
   ===================================================================== */


/* =====================================================================
   1. TOP OFFERS SECTION — CARD POLISH
   ===================================================================== */

/* Container: horizontal swiper — softer gradient edges + better padding */
.swiper-offer-card,
.swiper-slide.col-4 {
    padding: 3px 2px !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
}

/* Card itself — layered premium look */
.swiper-offer-card .offer-card,
.swiper-slide .offer-card {
    position: relative !important;
    background: linear-gradient(160deg, #102532 0%, #0a1724 100%) !important;
    border: 1px solid rgba(84, 243, 154, 0.12) !important;
    border-radius: 16px !important;
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease !important;
    overflow: hidden !important;
}

/* Subtle top-line that appears on hover */
.swiper-offer-card .offer-card::before,
.swiper-slide .offer-card::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(84, 243, 154, 0.9) 50%,
        transparent);
    opacity: 0;
    transition: opacity 0.35s ease, left 0.35s ease, right 0.35s ease;
    z-index: 3;
    pointer-events: none;
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(84, 243, 154, 0.7);
}
.swiper-offer-card .offer-card:hover::before,
.swiper-slide .offer-card:hover::before {
    opacity: 1;
    left: 0;
    right: 0;
}

/* Card hover — lift + mint glow (no rotate, keeps it clean) */
.swiper-offer-card .offer-card:hover,
.swiper-slide .offer-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(84, 243, 154, 0.5) !important;
    box-shadow:
        0 16px 40px -16px rgba(84, 243, 154, 0.55),
        0 0 32px -8px rgba(34, 211, 238, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Game image — smooth zoom + rounded */
.swiper-offer-card .offer-card .card-img-top,
.swiper-slide .offer-card .card-img-top {
    border-radius: 10px !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.35s ease !important;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.swiper-offer-card .offer-card:hover .card-img-top,
.swiper-slide .offer-card:hover .card-img-top {
    transform: scale(1.08) !important;
    -webkit-filter: brightness(1.08) saturate(1.1) !important;
            filter: brightness(1.08) saturate(1.1) !important;
}

/* Device badges — glossier look */
.swiper-offer-card .offer-card .badge.bg-label-dark,
.swiper-slide .offer-card .badge.bg-label-dark {
    background: rgba(7, 8, 9, 0.72) !important;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border: 1px solid rgba(84, 243, 154, 0.20) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
    transition: all 0.25s ease;
}
.swiper-offer-card .offer-card:hover .badge.bg-label-dark,
.swiper-slide .offer-card:hover .badge.bg-label-dark {
    border-color: rgba(84, 243, 154, 0.5) !important;
    box-shadow:
        0 2px 8px -2px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(84, 243, 154, 0.4);
}

/* Play button overlay — stronger on hover */
.swiper-offer-card .offer-card .fa-play,
.swiper-slide .offer-card .fa-play {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg,
        rgba(84, 243, 154, 0.35),
        rgba(34, 211, 238, 0.35)) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 2px solid rgba(84, 243, 154, 0.6) !important;
    box-shadow: 0 4px 20px rgba(84, 243, 154, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    opacity: 0.85;
}
.swiper-offer-card .offer-card:hover .fa-play,
.swiper-slide .offer-card:hover .fa-play {
    opacity: 1;
    background: linear-gradient(135deg, #54F39A, #2BE3C6) !important;
    color: #0a2e1f !important;
    transform: translate(-50%, -50%) scale(1.18) !important;
    box-shadow:
        0 8px 28px rgba(84, 243, 154, 0.85),
        0 0 40px rgba(34, 211, 238, 0.5) !important;
}

/* Title & description */
.swiper-offer-card .offer-card .card-body .text-truncate.text-white,
.swiper-slide .offer-card .card-body .text-truncate.text-white {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: -0.005em;
    transition: color 0.25s ease;
}
.swiper-offer-card .offer-card:hover .card-body .text-truncate.text-white,
.swiper-slide .offer-card:hover .card-body .text-truncate.text-white {
    color: #7dffb8 !important;
}
.swiper-offer-card .offer-card .card-body .text-truncate.text-secondary,
.swiper-slide .offer-card .card-body .text-truncate.text-secondary {
    color: rgba(148, 163, 184, 0.65) !important;
    font-size: 11px !important;
    line-height: 1.4;
}

/* Reward amount — pulse glow on hover */
.swiper-offer-card .offer-card .card-footer,
.swiper-slide .offer-card .card-footer {
    border-top: none !important;
    background: transparent !important;
    padding-top: 6px !important;
}
.swiper-offer-card .offer-card .card-footer .f-w-600,
.swiper-slide .offer-card .card-footer .f-w-600 {
    color: #54F39A !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(84, 243, 154, 0.35);
    transition: text-shadow 0.3s ease, transform 0.3s ease;
}
.swiper-offer-card .offer-card:hover .card-footer .f-w-600,
.swiper-slide .offer-card:hover .card-footer .f-w-600 {
    text-shadow:
        0 0 14px rgba(84, 243, 154, 0.9),
        0 0 28px rgba(84, 243, 154, 0.5);
    transform: scale(1.05);
}

/* Card shine sweep on hover (only for top offers section) */
.swiper-offer-card .offer-card,
.swiper-slide .offer-card {
    position: relative;
}
.swiper-offer-card .offer-card .card-img-block::after,
.swiper-slide .offer-card .card-img-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%);
    -webkit-transform: skewX(-25deg);
            transform: skewX(-25deg);
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 4;
    border-radius: 10px;
}
.swiper-offer-card .offer-card:hover .card-img-block::after,
.swiper-slide .offer-card:hover .card-img-block::after {
    left: 130%;
}

/* Mobile — smaller lift, no blur */
@media (max-width: 767.98px) {
    .swiper-offer-card .offer-card:hover,
    .swiper-slide .offer-card:hover {
        transform: translateY(-4px) !important;
    }
    .swiper-offer-card .offer-card .fa-play,
    .swiper-slide .offer-card .fa-play {
        width: 38px !important;
        height: 38px !important;
    }
}


/* =====================================================================
   2. LIVE TICKER — TOP SCROLLING EARNINGS
   ===================================================================== */

/* Ticker container — full-width, no visible scroll */
.nx-ticker-wrap,
.live-ticker-wrap,
.ticker-wrap,
[data-ticker] {
    position: relative;
    overflow: hidden;
    padding: 8px 0;
    background: linear-gradient(180deg,
        rgba(84, 243, 154, 0.02) 0%,
        transparent 100%);
    border-bottom: 1px solid rgba(84, 243, 154, 0.06);
}
/* Gradient fade on both edges — looks premium */
.nx-ticker-wrap::before,
.live-ticker-wrap::before,
.ticker-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(90deg, #0b0f17 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}
.nx-ticker-wrap::after,
.live-ticker-wrap::after,
.ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(270deg, #0b0f17 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* Individual ticker pill */
.nx-ticker-item,
.live-ticker-item,
.ticker-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 14px !important;
    margin-right: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,
        rgba(15, 26, 40, 0.85),
        rgba(10, 20, 32, 0.95)) !important;
    border: 1px solid rgba(84, 243, 154, 0.14) !important;
    box-shadow:
        0 2px 8px -4px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: all 0.28s ease;
    white-space: nowrap;
    min-height: 40px;
    position: relative;
    overflow: hidden;
}
.nx-ticker-item:hover,
.live-ticker-item:hover,
.ticker-item:hover {
    border-color: rgba(84, 243, 154, 0.4) !important;
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px -6px rgba(84, 243, 154, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Avatar — glow ring */
.nx-ticker-item img,
.nx-ticker-item .avatar,
.live-ticker-item img,
.ticker-item img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid rgba(84, 243, 154, 0.5) !important;
    box-shadow:
        0 0 0 2px rgba(84, 243, 154, 0.1),
        0 2px 8px rgba(84, 243, 154, 0.35),
        0 0 12px rgba(84, 243, 154, 0.25);
    transition: all 0.28s ease;
    flex-shrink: 0;
    background: #0a1f17;
}
.nx-ticker-item:hover img,
.live-ticker-item:hover img,
.ticker-item:hover img {
    border-color: rgba(84, 243, 154, 0.9) !important;
    box-shadow:
        0 0 0 2px rgba(84, 243, 154, 0.25),
        0 4px 12px rgba(84, 243, 154, 0.55),
        0 0 20px rgba(84, 243, 154, 0.45);
    transform: scale(1.08);
}

/* Name + amount + time */
.nx-ticker-item .name,
.nx-ticker-item .user-name,
.live-ticker-item .name,
.ticker-item .name {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    letter-spacing: -0.005em;
    margin: 0;
}
.nx-ticker-item .amount,
.nx-ticker-item .reward,
.live-ticker-item .amount,
.ticker-item .amount {
    color: #54F39A !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(84, 243, 154, 0.4);
    margin-left: 4px;
}
.nx-ticker-item .time,
.nx-ticker-item .time-ago,
.live-ticker-item .time,
.ticker-item .time {
    color: rgba(148, 163, 184, 0.65) !important;
    font-size: 11px !important;
    margin-left: 4px;
}

/* Live dot indicator */
.nx-ticker-item .live-dot,
.live-ticker-item .live-dot,
.ticker-item .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #54F39A;
    margin-right: 4px;
    -webkit-animation: nx-ticker-pulse 1.6s ease-out infinite;
            animation: nx-ticker-pulse 1.6s ease-out infinite;
    flex-shrink: 0;
}
@-webkit-keyframes nx-ticker-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(84, 243, 154, 0.75); }
    70%  { box-shadow: 0 0 0 6px rgba(84, 243, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(84, 243, 154, 0); }
}
@keyframes nx-ticker-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(84, 243, 154, 0.75); }
    70%  { box-shadow: 0 0 0 6px rgba(84, 243, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(84, 243, 154, 0); }
}

/* Hover on the whole ticker → pause the scroll (JS-free if using CSS animation) */
.nx-ticker-wrap:hover .nx-ticker-scroll,
.nx-ticker-wrap:hover .ticker-track,
.nx-ticker-wrap:hover .marquee-track,
.live-ticker-wrap:hover .nx-ticker-scroll,
.live-ticker-wrap:hover .ticker-track,
.ticker-wrap:hover .nx-ticker-scroll,
.ticker-wrap:hover .ticker-track {
    animation-play-state: paused !important;
}

/* Mobile — tighter spacing */
@media (max-width: 767.98px) {
    .nx-ticker-item,
    .live-ticker-item,
    .ticker-item {
        padding: 5px 12px !important;
        min-height: 36px;
    }
    .nx-ticker-item img,
    .live-ticker-item img,
    .ticker-item img {
        width: 24px !important;
        height: 24px !important;
    }
    .nx-ticker-item .name,
    .nx-ticker-item .amount,
    .ticker-item .name,
    .ticker-item .amount {
        font-size: 11.5px !important;
    }
    .nx-ticker-wrap::before,
    .nx-ticker-wrap::after,
    .live-ticker-wrap::before,
    .live-ticker-wrap::after {
        width: 40px;
    }
}


/* =====================================================================
   3. SIDEBAR — PREMIUM POLISH
   ===================================================================== */

/* Sidebar container — layered depth */
.layout-menu.menu-vertical,
.bg-menu-theme {
    background:
        linear-gradient(180deg,
            rgba(84, 243, 154, 0.06) 0%,
            rgba(84, 243, 154, 0.02) 30%,
            transparent 60%),
        linear-gradient(180deg, #06111a 0%, #050d14 100%) !important;
    border-right: 1px solid rgba(84, 243, 154, 0.08) !important;
    box-shadow:
        4px 0 24px -12px rgba(84, 243, 154, 0.10),
        inset -1px 0 0 rgba(84, 243, 154, 0.04);
}

/* Brand / logo area */
.layout-menu .app-brand {
    min-height: 76px !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(84, 243, 154, 0.08) !important;
    background: linear-gradient(180deg,
        rgba(84, 243, 154, 0.06) 0%,
        transparent 100%) !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.layout-menu .app-brand::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(84, 243, 154, 0.6),
        transparent);
    box-shadow: 0 0 12px rgba(84, 243, 154, 0.5);
    pointer-events: none;
}
.layout-menu .app-brand img,
.layout-menu .app-brand svg {
    -webkit-filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.45))
                    drop-shadow(0 0 16px rgba(84, 243, 154, 0.2)) !important;
            filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.45))
                    drop-shadow(0 0 16px rgba(84, 243, 154, 0.2)) !important;
    transition: filter 0.35s ease, transform 0.35s ease !important;
}
.layout-menu .app-brand:hover img,
.layout-menu .app-brand:hover svg {
    -webkit-filter: drop-shadow(0 0 14px rgba(84, 243, 154, 0.75))
                    drop-shadow(0 0 26px rgba(84, 243, 154, 0.4)) !important;
            filter: drop-shadow(0 0 14px rgba(84, 243, 154, 0.75))
                    drop-shadow(0 0 26px rgba(84, 243, 154, 0.4)) !important;
    transform: scale(1.03);
}

/* Section header text (Earn, Cashout, Account) */
.layout-menu .menu-header-text,
.menu-header-text {
    color: rgba(148, 163, 184, 0.55) !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    padding: 0 24px !important;
    margin-top: 16px !important;
    margin-bottom: 6px !important;
    position: relative;
}
.layout-menu .menu-header-text::before,
.menu-header-text::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(84, 243, 154, 0.6);
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(84, 243, 154, 0.8);
}

/* Menu items — container */
.layout-menu .menu-item {
    margin: 2px 0 !important;
    position: relative;
}

/* Menu link — main row */
.layout-menu .menu-link,
.bg-menu-theme .menu-link {
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    letter-spacing: -0.005em;
    min-height: 46px !important;
    padding: 10px 16px !important;
    margin: 2px 12px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    position: relative;
    overflow: hidden;
    transition:
        background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease !important;
    display: flex;
    align-items: center;
    gap: 12px;
    will-change: transform;
}

/* Hover state */
.layout-menu .menu-link:hover,
.bg-menu-theme .menu-link:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg,
        rgba(84, 243, 154, 0.10) 0%,
        rgba(84, 243, 154, 0.04) 100%) !important;
    border-color: rgba(84, 243, 154, 0.20) !important;
    transform: translateX(3px) !important;
    box-shadow:
        0 4px 14px -6px rgba(84, 243, 154, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Menu icon */
.layout-menu .menu-link .menu-icon,
.layout-menu .menu-link svg.menu-icon {
    color: rgba(255, 255, 255, 0.55) !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 20px;
    transition: color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    flex-shrink: 0;
}
.layout-menu .menu-link:hover .menu-icon,
.layout-menu .menu-link:hover svg.menu-icon {
    color: #54F39A !important;
    transform: scale(1.15) !important;
}

/* ACTIVE menu item — most important state */
.layout-menu .menu-item.active > .menu-link,
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    color: #54F39A !important;
    background: linear-gradient(90deg,
        rgba(84, 243, 154, 0.20) 0%,
        rgba(84, 243, 154, 0.08) 60%,
        rgba(84, 243, 154, 0.02) 100%) !important;
    border-color: rgba(84, 243, 154, 0.35) !important;
    font-weight: 700 !important;
    box-shadow:
        inset 3px 0 0 #54F39A,
        0 6px 22px -8px rgba(84, 243, 154, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transform: translateX(0) !important;
}

/* Active icon glow */
.layout-menu .menu-item.active > .menu-link .menu-icon,
.layout-menu .menu-item.active > .menu-link svg.menu-icon,
.bg-menu-theme .menu-item.active .menu-icon,
.bg-menu-theme .menu-item.active .menu-link svg {
    color: #54F39A !important;
    -webkit-filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.75));
            filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.75));
    transform: scale(1.08);
}

/* Active state — animated shine sweep (subtle) */
.layout-menu .menu-item.active > .menu-link::after,
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%);
    -webkit-transform: translateX(-150%) skewX(-25deg);
            transform: translateX(-150%) skewX(-25deg);
    -webkit-animation: nx-menu-shine 4s ease-in-out infinite;
            animation: nx-menu-shine 4s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
@-webkit-keyframes nx-menu-shine {
    0%, 55%   { -webkit-transform: translateX(-150%) skewX(-25deg); }
    85%, 100% { -webkit-transform: translateX(300%) skewX(-25deg); }
}
@keyframes nx-menu-shine {
    0%, 55%   { transform: translateX(-150%) skewX(-25deg); }
    85%, 100% { transform: translateX(300%) skewX(-25deg); }
}

/* Left mint bar on active (already there, but make it glow) */
.layout-menu .menu-item.active > .menu-link::before,
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    width: 3px;
    height: 60%;
    background: #54F39A;
    border-radius: 0 4px 4px 0;
    box-shadow:
        0 0 12px rgba(84, 243, 154, 0.9),
        0 0 24px rgba(84, 243, 154, 0.5);
    pointer-events: none;
}

/* Badge (count pill) — 18 / 1 badges next to menu items */
.layout-menu .menu-link .badge,
.layout-menu .menu-item .badge {
    margin-left: auto;
    background: linear-gradient(135deg, #54F39A, #2ecc71) !important;
    color: #0a2e1f !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    box-shadow:
        0 2px 8px rgba(84, 243, 154, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 0.02em;
    min-width: 22px;
    text-align: center;
    line-height: 1;
    transition: all 0.25s ease;
}
.layout-menu .menu-link:hover .badge,
.layout-menu .menu-item.active .badge {
    box-shadow:
        0 4px 14px rgba(84, 243, 154, 0.7),
        0 0 20px rgba(84, 243, 154, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.05);
}
/* Warning badges (yellow) */
.layout-menu .menu-link .badge.bg-warning {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #2a1f05 !important;
}
/* Danger badges (red) */
.layout-menu .menu-link .badge.bg-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
}

/* Sub-menu (nested items) */
.layout-menu .menu-sub {
    background: rgba(0, 0, 0, 0.20) !important;
    border-radius: 12px !important;
    margin: 4px 12px 6px 24px !important;
    padding: 6px 0 !important;
    border-left: 1px solid rgba(84, 243, 154, 0.12) !important;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}
.layout-menu .menu-sub .menu-link {
    min-height: 38px !important;
    padding: 8px 14px !important;
    margin: 2px 8px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}
.layout-menu .menu-sub .menu-item.active > .menu-link {
    background: rgba(84, 243, 154, 0.14) !important;
    border-color: rgba(84, 243, 154, 0.3) !important;
    box-shadow:
        inset 2px 0 0 #54F39A,
        0 4px 12px -6px rgba(84, 243, 154, 0.5) !important;
}
.layout-menu .menu-sub .menu-item.active > .menu-link::after,
.layout-menu .menu-sub .menu-item.active > .menu-link::before {
    display: none !important;
}

/* Remove the Sneat inner shadow artifact */
.layout-menu .menu-inner-shadow,
.menu-inner-shadow {
    display: none !important;
}

/* Collapsed state — bigger icons when collapsed */
.layout-menu.menu-collapsed .menu-link {
    padding: 10px !important;
    margin: 2px 8px !important;
    justify-content: center;
}
.layout-menu.menu-collapsed .menu-link .menu-icon,
.layout-menu.menu-collapsed .menu-link svg.menu-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
}

/* Scrollbar inside sidebar */
.layout-menu .menu-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(84, 243, 154, 0.3) transparent;
}
.layout-menu .menu-inner::-webkit-scrollbar {
    width: 5px;
}
.layout-menu .menu-inner::-webkit-scrollbar-thumb {
    background: rgba(84, 243, 154, 0.30);
    border-radius: 999px;
}
.layout-menu .menu-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(84, 243, 154, 0.55);
}

/* Mobile — reduce radius slightly */
@media (max-width: 991.98px) {
    .layout-menu .menu-link {
        min-height: 48px !important;
        margin: 2px 10px !important;
    }
    .layout-menu .app-brand {
        min-height: 68px !important;
    }
}


/* =====================================================================
   REDUCED MOTION — disable new polish animations
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .layout-menu .menu-item.active > .menu-link::after {
        -webkit-animation: none !important;
                animation: none !important;
    }
    .nx-ticker-wrap:hover .nx-ticker-scroll,
    .nx-ticker-wrap:hover .ticker-track,
    .layout-menu .menu-link:hover,
    .swiper-offer-card .offer-card:hover,
    .swiper-slide .offer-card:hover {
        transform: none !important;
    }
    .nx-ticker-item .live-dot {
        -webkit-animation: none !important;
                animation: none !important;
        opacity: 1 !important;
    }
}/* =====================================================================
   ✨ PREMIUM VISUAL SYSTEM — FINAL CONSOLIDATION (v9)
   ===================================================================== */

/* =====================================================================
   SECTION 1 — CARD SURFACE CONSISTENCY
   ===================================================================== */

.offer-card,
.partner-card,
.shop-card,
.leaderboard-card {
    position: relative;
    background: linear-gradient(160deg, #102532 0%, #0a1724 100%) !important;
    border: 1px solid rgba(84, 243, 154, 0.14) !important;
    border-radius: 18px !important;
    box-shadow:
        0 6px 20px -10px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    overflow: hidden;
    isolation: isolate;
    will-change: transform;
}

.offer-card:hover,
.partner-card:hover,
.shop-card:hover,
.leaderboard-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(84, 243, 154, 0.45) !important;
    box-shadow:
        0 14px 36px -14px rgba(84, 243, 154, 0.45),
        0 0 24px -10px rgba(34, 211, 238, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.offer-card::before,
.partner-card::before,
.shop-card::before,
.leaderboard-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(84, 243, 154, 0.9) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 5;
    pointer-events: none;
}
.offer-card:hover::before,
.partner-card:hover::before,
.shop-card:hover::before,
.leaderboard-card:hover::before {
    opacity: 1;
}

.partner-card[style*="not-allowed"]:hover {
    transform: none !important;
    border-color: rgba(84, 243, 154, 0.22) !important;
    box-shadow:
        0 6px 20px -10px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}


/* =====================================================================
   SECTION 2 — TOP OFFERS SECTION POLISH
   ===================================================================== */

.swiper-offer-card,
.swiper-slide.col-4 {
    padding: 4px 3px !important;
}

.offer-card .card-img-top {
    border-radius: 12px !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.35s ease !important;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    display: block;
    width: 100%;
}
.offer-card:hover .card-img-top {
    transform: scale(1.06) !important;
    -webkit-filter: brightness(1.06) saturate(1.08) !important;
            filter: brightness(1.06) saturate(1.08) !important;
}

.offer-card .badge.bg-label-dark {
    background: rgba(7, 8, 9, 0.72) !important;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border: 1px solid rgba(84, 243, 154, 0.18) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
    transition: all 0.25s ease;
}
.offer-card:hover .badge.bg-label-dark {
    border-color: rgba(84, 243, 154, 0.5) !important;
    box-shadow:
        0 2px 8px -2px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(84, 243, 154, 0.35);
}

.offer-card .fa-play {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg,
        rgba(84, 243, 154, 0.32),
        rgba(34, 211, 238, 0.32)) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 2px solid rgba(84, 243, 154, 0.55) !important;
    box-shadow: 0 4px 18px rgba(84, 243, 154, 0.45) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    border-radius: 50% !important;
    z-index: 3 !important;
}
.offer-card:hover .fa-play {
    background: linear-gradient(135deg, #54F39A, #2BE3C6) !important;
    color: #0a2e1f !important;
    transform: translate(-50%, -50%) scale(1.16) !important;
    box-shadow:
        0 8px 26px rgba(84, 243, 154, 0.8),
        0 0 34px rgba(34, 211, 238, 0.4) !important;
}

.offer-card .card-body .text-truncate.text-white {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: -0.005em;
    transition: color 0.25s ease;
}
.offer-card:hover .card-body .text-truncate.text-white {
    color: #7dffb8 !important;
}

.offer-card .card-footer .f-w-600,
.offer-card .card-footer .f-w-600.text-white {
    color: #54F39A !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(84, 243, 154, 0.35);
    transition: text-shadow 0.3s ease;
}
.offer-card:hover .card-footer .f-w-600 {
    text-shadow:
        0 0 14px rgba(84, 243, 154, 0.9),
        0 0 26px rgba(84, 243, 154, 0.45);
}

.offer-card .card-img-block {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.offer-card .card-img-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%);
    -webkit-transform: skewX(-25deg);
            transform: skewX(-25deg);
    transition: left 0.75s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 4;
    border-radius: 12px;
}
.offer-card:hover .card-img-block::after {
    left: 130%;
}


/* =====================================================================
   SECTION 3 — LIVE TICKER
   ===================================================================== */

.nx-ticker-wrap,
.live-ticker-wrap,
[data-ticker] {
    position: relative;
    overflow: hidden;
    padding: 6px 0;
    background: linear-gradient(180deg,
        rgba(84, 243, 154, 0.02) 0%,
        transparent 100%);
    border-bottom: 1px solid rgba(84, 243, 154, 0.06);
}
.nx-ticker-wrap::before,
.live-ticker-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 70px;
    background: linear-gradient(90deg, #0b0f17 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}
.nx-ticker-wrap::after,
.live-ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 70px;
    background: linear-gradient(270deg, #0b0f17 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.nx-ticker-wrap:hover .nx-ticker-scroll,
.nx-ticker-wrap:hover .ticker-track,
.live-ticker-wrap:hover .nx-ticker-scroll,
.live-ticker-wrap:hover .ticker-track {
    animation-play-state: paused !important;
}

.nx-ticker-item,
.live-ticker-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 14px !important;
    margin-right: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,
        rgba(15, 26, 40, 0.85),
        rgba(10, 20, 32, 0.95)) !important;
    border: 1px solid rgba(84, 243, 154, 0.14) !important;
    box-shadow:
        0 2px 8px -4px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: all 0.28s ease;
    white-space: nowrap;
    min-height: 40px;
}
.nx-ticker-item:hover,
.live-ticker-item:hover {
    border-color: rgba(84, 243, 154, 0.4) !important;
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px -6px rgba(84, 243, 154, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nx-ticker-item img,
.live-ticker-item img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid rgba(84, 243, 154, 0.5) !important;
    box-shadow:
        0 0 0 2px rgba(84, 243, 154, 0.10),
        0 2px 8px rgba(84, 243, 154, 0.30);
    flex-shrink: 0;
    background: #0a1f17;
    transition: all 0.25s ease;
}
.nx-ticker-item:hover img,
.live-ticker-item:hover img {
    border-color: rgba(84, 243, 154, 0.9) !important;
    transform: scale(1.06);
}

.nx-ticker-item .name,
.live-ticker-item .name {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}
.nx-ticker-item .amount,
.live-ticker-item .amount {
    color: #54F39A !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(84, 243, 154, 0.4);
}
.nx-ticker-item .time,
.live-ticker-item .time {
    color: rgba(148, 163, 184, 0.65) !important;
    font-size: 11px !important;
}

.nx-ticker-item .live-dot,
.live-ticker-item .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #54F39A;
    margin-right: 2px;
    flex-shrink: 0;
    -webkit-animation: nx-live-pulse 1.6s ease-out infinite;
            animation: nx-live-pulse 1.6s ease-out infinite;
}
@-webkit-keyframes nx-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(84, 243, 154, 0.75); }
    70%  { box-shadow: 0 0 0 6px rgba(84, 243, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(84, 243, 154, 0); }
}
@keyframes nx-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(84, 243, 154, 0.75); }
    70%  { box-shadow: 0 0 0 6px rgba(84, 243, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(84, 243, 154, 0); }
}

@media (max-width: 767.98px) {
    .nx-ticker-item,
    .live-ticker-item {
        padding: 5px 12px !important;
        min-height: 36px;
    }
    .nx-ticker-item img,
    .live-ticker-item img {
        width: 24px !important;
        height: 24px !important;
    }
    .nx-ticker-item .name,
    .nx-ticker-item .amount,
    .live-ticker-item .name,
    .live-ticker-item .amount {
        font-size: 11.5px !important;
    }
    .nx-ticker-wrap::before,
    .nx-ticker-wrap::after,
    .live-ticker-wrap::before,
    .live-ticker-wrap::after {
        width: 40px;
    }
}


/* =====================================================================
   SECTION 4 — SIDEBAR PREMIUM
   ===================================================================== */

.layout-menu.menu-vertical,
.bg-menu-theme {
    background:
        linear-gradient(180deg,
            rgba(84, 243, 154, 0.05) 0%,
            rgba(84, 243, 154, 0.015) 28%,
            transparent 60%),
        linear-gradient(180deg, #06111a 0%, #050d14 100%) !important;
    border-right: 1px solid rgba(84, 243, 154, 0.08) !important;
    box-shadow: inset -1px 0 0 rgba(84, 243, 154, 0.04);
}

.layout-menu .app-brand {
    min-height: 76px !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(84, 243, 154, 0.08) !important;
    background: linear-gradient(180deg,
        rgba(84, 243, 154, 0.06) 0%,
        transparent 100%) !important;
    position: relative;
    display: flex;
    align-items: center;
}
.layout-menu .app-brand::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(84, 243, 154, 0.55),
        transparent);
    box-shadow: 0 0 10px rgba(84, 243, 154, 0.45);
    pointer-events: none;
}
.layout-menu .app-brand img,
.layout-menu .app-brand svg {
    -webkit-filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.40));
            filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.40));
    transition: filter 0.3s ease, transform 0.3s ease;
}
.layout-menu .app-brand:hover img,
.layout-menu .app-brand:hover svg {
    -webkit-filter: drop-shadow(0 0 14px rgba(84, 243, 154, 0.70));
            filter: drop-shadow(0 0 14px rgba(84, 243, 154, 0.70));
    transform: scale(1.03);
}

.layout-menu .menu-header-text,
.menu-header-text {
    color: rgba(148, 163, 184, 0.55) !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    padding: 0 24px !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
}

.layout-menu .menu-link,
.bg-menu-theme .menu-link {
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    min-height: 46px !important;
    padding: 10px 16px !important;
    margin: 2px 12px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    position: relative;
    overflow: hidden;
    transition:
        background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.layout-menu .menu-link:hover,
.bg-menu-theme .menu-link:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg,
        rgba(84, 243, 154, 0.10) 0%,
        rgba(84, 243, 154, 0.04) 100%) !important;
    border-color: rgba(84, 243, 154, 0.20) !important;
    transform: translateX(3px);
}

.layout-menu .menu-link .menu-icon,
.layout-menu .menu-link svg.menu-icon {
    color: rgba(255, 255, 255, 0.55) !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 20px;
    transition: color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}
.layout-menu .menu-link:hover .menu-icon,
.layout-menu .menu-link:hover svg.menu-icon {
    color: #54F39A !important;
    transform: scale(1.12);
}

.layout-menu .menu-item.active > .menu-link,
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    color: #54F39A !important;
    background: linear-gradient(90deg,
        rgba(84, 243, 154, 0.18) 0%,
        rgba(84, 243, 154, 0.06) 60%,
        rgba(84, 243, 154, 0.02) 100%) !important;
    border-color: rgba(84, 243, 154, 0.32) !important;
    font-weight: 700 !important;
    box-shadow:
        inset 3px 0 0 #54F39A,
        0 6px 20px -10px rgba(84, 243, 154, 0.55);
    transform: translateX(0);
}
.layout-menu .menu-item.active > .menu-link .menu-icon,
.bg-menu-theme .menu-item.active .menu-icon {
    color: #54F39A !important;
    -webkit-filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.7));
            filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.7));
}

.layout-menu .menu-link .badge,
.layout-menu .menu-item .badge {
    margin-left: auto;
    background: linear-gradient(135deg, #54F39A, #2ecc71) !important;
    color: #0a2e1f !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    box-shadow:
        0 2px 8px rgba(84, 243, 154, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    min-width: 22px;
    text-align: center;
    line-height: 1;
}
.layout-menu .menu-link .badge.bg-warning {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #2a1f05 !important;
}

.layout-menu .menu-sub {
    background: rgba(0, 0, 0, 0.20) !important;
    border-radius: 12px !important;
    margin: 4px 12px 6px 24px !important;
    padding: 6px 0 !important;
    border-left: 1px solid rgba(84, 243, 154, 0.12) !important;
}
.layout-menu .menu-sub .menu-link {
    min-height: 38px !important;
    padding: 8px 14px !important;
    margin: 2px 8px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

.layout-menu .menu-inner-shadow,
.menu-inner-shadow {
    display: none !important;
}

.layout-menu .menu-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(84, 243, 154, 0.3) transparent;
}
.layout-menu .menu-inner::-webkit-scrollbar { width: 5px; }
.layout-menu .menu-inner::-webkit-scrollbar-thumb {
    background: rgba(84, 243, 154, 0.30);
    border-radius: 999px;
}


/* =====================================================================
   SECTION 5 — BADGES / STARS / ICONS
   ===================================================================== */

.partner-card .card-footer .text-warning,
.partner-card .card-footer .text-warning i {
    color: #FFD37A !important;
    font-size: 9px !important;
    -webkit-filter: none !important;
            filter: none !important;
    text-shadow: none !important;
    letter-spacing: 0.04em !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.partner-card .card-footer .text-warning .fa-regular {
    color: rgba(255, 211, 122, 0.40) !important;
}

.partner-card .card-footer span,
.partner-card .card-footer .h6,
.partner-card .card-footer .fw-normal,
.partner-card .card-footer .partner-name {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none !important;
}

.partner-card .partner-badge,
.partner-card .card-header .badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 0 18px 0 14px !important;
    border: 0 !important;
    z-index: 20 !important;
    pointer-events: none;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6) !important;
}


/* =====================================================================
   SECTION 6 — EMPTY STATES
   ===================================================================== */

.empty-state,
.x-empty-state,
.card .text-secondary.text-center {
    color: rgba(148, 163, 184, 0.65) !important;
    font-size: 13.5px;
    text-align: center;
    padding: 40px 20px;
    line-height: 1.6;
}
.empty-state svg,
.x-empty-state svg {
    width: 64px;
    height: 64px;
    opacity: 0.55;
    margin-bottom: 12px;
    color: rgba(84, 243, 154, 0.6);
}
.empty-state h4,
.x-empty-state h4 {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
}


/* =====================================================================
   SECTION 7 — CROSS-OS + REDUCED MOTION
   ===================================================================== */

@supports (padding: max(0px)) {
    .layout-menu,
    .layout-navbar {
        padding-left: max(0px, env(safe-area-inset-left));
    }
    .layout-navbar {
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

@media (prefers-reduced-motion: reduce) {
    .offer-card,
    .partner-card,
    .shop-card,
    .leaderboard-card {
        transition: none !important;
    }
    .offer-card:hover,
    .partner-card:hover,
    .shop-card:hover,
    .leaderboard-card:hover {
        transform: none !important;
    }
    .offer-card:hover .card-img-top,
    .offer-card:hover .fa-play {
        transform: none !important;
    }
    .offer-card .card-img-block::after,
    .layout-menu .menu-item.active > .menu-link::after {
        display: none !important;
    }
    .nx-ticker-item .live-dot {
        -webkit-animation: none !important;
                animation: none !important;
        opacity: 1 !important;
    }
    .nx-ticker-wrap:hover .nx-ticker-scroll,
    .nx-ticker-wrap:hover .ticker-track,
    .layout-menu .menu-link:hover {
        animation-play-state: running !important;
        transform: none !important;
    }
}

/* =====================================================================
   🖼️ FOOTER LOGO — Safety net
   ===================================================================== */

.nx-footer-brand img.app-brand-img,
.nx-footer-brand img,
footer.nx-footer .nx-footer-brand img,
.content-footer .nx-footer-brand img {
    width: auto !important;
    height: auto !important;
    max-width: 160px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    -o-object-fit: contain !important;
    aspect-ratio: auto !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.nx-footer-brand .app-brand-img-collapsed,
footer.nx-footer .app-brand-img-collapsed {
    display: none !important;
}

.nx-footer-brand span.text-center,
.nx-footer-brand > a > span {
    display: inline-block !important;
    width: auto !important;
    line-height: 0;
}

@media (max-width: 767.98px) {
    .nx-footer-brand img.app-brand-img,
    .nx-footer-brand img {
        max-height: 30px !important;
        max-width: 130px !important;
    }
}

/* Hide collapsed icon in footer */
.nx-footer .app-brand-img-collapsed,
.nx-footer-brand .app-brand-img-collapsed,
footer.nx-footer img[src*="icon-light"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
}

/* =====================================================================
   ☀️ CREAMY WHITE LIGHT MODE — Premium Polish
   Applied when html[data-ui-theme="light"]
   Warm off-white, soft shadows, deep contrast, mint accent preserved.
   ===================================================================== */

html[data-ui-theme="light"] {
    /* ---- Surfaces: warm creamy, never pure white ---- */
    --bg:        #FBF8F1;
    --bg-2:      #FFFFFF;
    --bg-3:      #F6F2E8;
    --sidebar:   #FCFAF4;

    /* ---- Cards: soft white with warm tone ---- */
    --card-top:  #FFFFFF;
    --card-bot:  #FAF7F0;
    --card:      #FFFFFF;
    --card-2:    #F6F1E6;
    --elevated:  #FFFFFF;

    /* ---- Text hierarchy: warm dark, never pure black ---- */
    --text:      #2B2620;
    --text-soft: #4A4438;
    --text-2:    #7A7367;
    --muted:     #A39C8D;

    /* ---- Lines: warm subtle ---- */
    --line:      rgba(45, 40, 30, 0.08);
    --line-2:    rgba(45, 40, 30, 0.14);

    /* ---- Brand accents (mint stays, but deeper for text contrast) ---- */
    --green:     #54F39A;
    --green-600: #2FDD84;
    --green-ink: #0A2E1F;
    --green-rgb: 84, 243, 154;

    /* Deeper mint for TEXT on white (WCAG AA contrast) */
    --green-on-light: #1F8C4F;
    --green-on-light-2: #16703D;

    /* Aqua/cyan also need deeper on light */
    --aqua:      #14B8A6;
    --cyan:      #0891B2;

    --green-line:    rgba(84, 243, 154, 0.45);
    --green-line-hi: rgba(84, 243, 154, 0.75);
    --green-glow:    rgba(84, 243, 154, 0.35);
    --aqua-glow:     rgba(20, 184, 166, 0.25);
    --cyan-glow:     rgba(8, 145, 178, 0.22);

    --bs-base:   #F6F1E6 !important;
    --bs-body-color: var(--text-soft);
    color-scheme: light;
}

/* =====================================================================
   BODY — Creamy background with soft warm ambient
   ===================================================================== */
html[data-ui-theme="light"] body {
    background: var(--bg) !important;
    color: var(--text-soft) !important;
}

/* Kill the dark aurora, replace with warm subtle glow */
html[data-ui-theme="light"] body::before {
    background:
        radial-gradient(900px 560px at 86% -8%, rgba(84, 243, 154, 0.18), transparent 60%),
        radial-gradient(780px 520px at -8% 8%, rgba(34, 211, 238, 0.12), transparent 60%),
        radial-gradient(720px 480px at 50% 116%, rgba(255, 220, 150, 0.10), transparent 62%),
        linear-gradient(180deg, #FBF8F1 0%, #F6F2E8 100%) !important;
}
html[data-ui-theme="light"] body::after {
    opacity: 0.25 !important;
    background-image:
        linear-gradient(rgba(45, 40, 30, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 40, 30, 0.04) 1px, transparent 1px) !important;
    background-size: 46px 46px !important;
}

/* =====================================================================
   TYPOGRAPHY — Deep warm text
   ===================================================================== */
html[data-ui-theme="light"] h1,
html[data-ui-theme="light"] h2,
html[data-ui-theme="light"] h3,
html[data-ui-theme="light"] h4,
html[data-ui-theme="light"] h5,
html[data-ui-theme="light"] h6,
html[data-ui-theme="light"] .h1,
html[data-ui-theme="light"] .h2,
html[data-ui-theme="light"] .h3,
html[data-ui-theme="light"] .h4,
html[data-ui-theme="light"] .h5,
html[data-ui-theme="light"] .h6 {
    color: var(--text) !important;
}
html[data-ui-theme="light"] .text-white { color: var(--text) !important; }
html[data-ui-theme="light"] .text-body,
html[data-ui-theme="light"] .text-heading { color: var(--text-soft) !important; }
html[data-ui-theme="light"] .text-secondary { color: var(--text-2) !important; }
html[data-ui-theme="light"] .text-muted { color: var(--muted) !important; }
html[data-ui-theme="light"] .text-primary { color: var(--green-on-light) !important; }

/* =====================================================================
   SIDEBAR — Cream with mint accent
   ===================================================================== */
html[data-ui-theme="light"] .layout-menu.menu-vertical,
html[data-ui-theme="light"] .bg-menu-theme {
    background:
        linear-gradient(180deg, rgba(84, 243, 154, 0.08) 0%, transparent 22%),
        #FCFAF4 !important;
    border-right: 1px solid var(--line) !important;
    box-shadow:
        4px 0 24px -14px rgba(45, 40, 30, 0.12),
        inset -1px 0 0 rgba(84, 243, 154, 0.06);
}
html[data-ui-theme="light"] .layout-menu .app-brand {
    background: linear-gradient(180deg, rgba(84, 243, 154, 0.10) 0%, transparent 100%) !important;
    border-bottom: 1px solid var(--line) !important;
}
html[data-ui-theme="light"] .layout-menu .menu-link {
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .layout-menu .menu-link:hover {
    color: var(--text) !important;
    background: rgba(84, 243, 154, 0.12) !important;
}
html[data-ui-theme="light"] .layout-menu .menu-link .menu-icon {
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .layout-menu .menu-item.active > .menu-link,
html[data-ui-theme="light"] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    color: var(--green-on-light) !important;
    background: linear-gradient(90deg,
        rgba(84, 243, 154, 0.22) 0%,
        rgba(84, 243, 154, 0.08) 60%,
        transparent 100%) !important;
    border-color: rgba(84, 243, 154, 0.45) !important;
    box-shadow:
        inset 3px 0 0 var(--green-600),
        0 6px 20px -10px rgba(84, 243, 154, 0.45);
}
html[data-ui-theme="light"] .layout-menu .menu-item.active > .menu-link .menu-icon {
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .layout-menu .menu-sub {
    background: rgba(45, 40, 30, 0.04) !important;
    border-left-color: rgba(84, 243, 154, 0.3) !important;
}
html[data-ui-theme="light"] .menu-header-text {
    color: rgba(45, 40, 30, 0.45) !important;
}
html[data-ui-theme="light"] .layout-menu .menu-link .badge {
    background: linear-gradient(135deg, #54F39A, #2ecc71) !important;
    color: #0A2E1F !important;
    box-shadow: 0 2px 8px rgba(84, 243, 154, 0.5) !important;
}

/* =====================================================================
   NAVBAR — Frosted cream
   ===================================================================== */
html[data-ui-theme="light"] .layout-navbar,
html[data-ui-theme="light"] .bg-navbar-theme,
html[data-ui-theme="light"] .layout-navbar.navbar-detached {
    background: rgba(251, 248, 241, 0.88) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
            backdrop-filter: saturate(180%) blur(16px) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 4px 20px -12px rgba(45, 40, 30, 0.15) !important;
}
html[data-ui-theme="light"] .layout-navbar .nav-link,
html[data-ui-theme="light"] .layout-navbar .navbar-nav .nav-link {
    color: var(--text-soft) !important;
}
html[data-ui-theme="light"] .layout-navbar .nav-link:hover {
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .theme-toggle {
    background: #FFFFFF !important;
    border-color: var(--line-2) !important;
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .theme-toggle:hover {
    border-color: var(--green-line) !important;
    color: var(--green-on-light) !important;
    background: rgba(84, 243, 154, 0.08) !important;
}

/* =====================================================================
   CARDS — Soft white with warm shadows
   ===================================================================== */
html[data-ui-theme="light"] .card,
html[data-ui-theme="light"] .new-carder-card,
html[data-ui-theme="light"] .card.new-carder-card {
    background: #FFFFFF !important;
    border: 1px solid var(--line) !important;
    box-shadow:
        0 4px 16px -10px rgba(45, 40, 30, 0.10),
        0 1px 3px rgba(45, 40, 30, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    color: var(--text-soft);
}
html[data-ui-theme="light"] .card.new-carder-card::before {
    background: linear-gradient(90deg, transparent, rgba(84, 243, 154, 0.7), transparent) !important;
}
html[data-ui-theme="light"] .card.new-carder-card:hover {
    border-color: var(--green-line) !important;
    box-shadow:
        0 12px 36px -18px rgba(84, 243, 154, 0.35),
        0 1px 3px rgba(45, 40, 30, 0.06) !important;
}
html[data-ui-theme="light"] .card-header,
html[data-ui-theme="light"] .card-footer {
    background: transparent !important;
    border-color: var(--line) !important;
}
html[data-ui-theme="light"] .card-title {
    color: var(--text) !important;
}

/* =====================================================================
   PARTNER / OFFER CARDS — Creamy surface
   ===================================================================== */
html[data-ui-theme="light"] .partner-card,
html[data-ui-theme="light"] .offer-card,
html[data-ui-theme="light"] .shop-card,
html[data-ui-theme="light"] .leaderboard-card {
    background: #FFFFFF !important;
    border: 1px solid var(--line-2) !important;
    box-shadow:
        0 4px 16px -10px rgba(45, 40, 30, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html[data-ui-theme="light"] .partner-card:hover,
html[data-ui-theme="light"] .offer-card:hover,
html[data-ui-theme="light"] .shop-card:hover,
html[data-ui-theme="light"] .leaderboard-card:hover {
    border-color: var(--green-line-hi) !important;
    box-shadow:
        0 14px 36px -14px rgba(84, 243, 154, 0.45),
        0 4px 12px -6px rgba(45, 40, 30, 0.10) !important;
}
/* Brick texture — very subtle on white */
html[data-ui-theme="light"] .partner-card::after {
    opacity: 0.10 !important;
}
html[data-ui-theme="light"] .partner-card:hover::after {
    opacity: 0.18 !important;
}
/* Partner name plate */
html[data-ui-theme="light"] .partner-card .card-footer {
    background: linear-gradient(180deg, rgba(246, 242, 232, 0.4) 0%, rgba(246, 242, 232, 0.8) 100%) !important;
    border-top: 1px solid var(--line) !important;
}
html[data-ui-theme="light"] .partner-card .card-footer span,
html[data-ui-theme="light"] .partner-card .card-footer .h6,
html[data-ui-theme="light"] .partner-card .card-footer .partner-name {
    color: var(--text) !important;
}
/* Reward amount stays green on white */
html[data-ui-theme="light"] .offer-card .card-footer .f-w-600 {
    color: var(--green-on-light) !important;
    text-shadow: none !important;
}
/* Logo halo glow lighter */
html[data-ui-theme="light"] .partner-card .card-body::before {
    background: radial-gradient(circle,
        rgba(84, 243, 154, 0.18) 0%,
        rgba(84, 243, 154, 0.05) 40%,
        transparent 72%) !important;
}

/* =====================================================================
   BUTTONS — Mint gradient stays, ink text
   ===================================================================== */
html[data-ui-theme="light"] .btn-primary,
html[data-ui-theme="light"] .btn-success {
    background: linear-gradient(135deg, #54F39A, #2ecc71) !important;
    color: #0A2E1F !important;
    box-shadow:
        0 8px 20px -8px rgba(84, 243, 154, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
html[data-ui-theme="light"] .btn-primary:hover,
html[data-ui-theme="light"] .btn-success:hover {
    box-shadow:
        0 12px 28px -8px rgba(84, 243, 154, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
html[data-ui-theme="light"] .btn-secondary,
html[data-ui-theme="light"] .btn-outline-primary {
    background: #FFFFFF !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text) !important;
}
html[data-ui-theme="light"] .btn-secondary:hover,
html[data-ui-theme="light"] .btn-outline-primary:hover {
    background: rgba(84, 243, 154, 0.08) !important;
    border-color: var(--green-line-hi) !important;
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .btn-dark {
    background: var(--text) !important;
    color: #FFFFFF !important;
    border-color: var(--text) !important;
}

/* =====================================================================
   FORMS — Creamy inputs
   ===================================================================== */
html[data-ui-theme="light"] .form-control,
html[data-ui-theme="light"] .form-select,
html[data-ui-theme="light"] .input-group-text,
html[data-ui-theme="light"] .search-input {
    background: #FFFFFF !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text) !important;
}
html[data-ui-theme="light"] .form-control::placeholder,
html[data-ui-theme="light"] .search-input::placeholder {
    color: var(--muted) !important;
}
html[data-ui-theme="light"] .form-control:focus,
html[data-ui-theme="light"] .form-select:focus,
html[data-ui-theme="light"] .search-input-group:focus-within {
    border-color: var(--green-600) !important;
    box-shadow:
        0 0 0 3px rgba(84, 243, 154, 0.25),
        0 4px 14px -8px rgba(84, 243, 154, 0.4) !important;
    background: #FFFFFF !important;
}
html[data-ui-theme="light"] .search-input-group {
    background: #FFFFFF !important;
    border-color: var(--line-2) !important;
}

/* =====================================================================
   DROPDOWNS — Soft white cards
   ===================================================================== */
html[data-ui-theme="light"] .dropdown-menu,
html[data-ui-theme="light"] .dropdown-menu.bg-dark {
    background: #FFFFFF !important;
    border: 1px solid var(--line-2) !important;
    box-shadow:
        0 16px 40px -16px rgba(45, 40, 30, 0.20),
        0 4px 12px -6px rgba(45, 40, 30, 0.08) !important;
}
html[data-ui-theme="light"] .dropdown-item,
html[data-ui-theme="light"] .dropdown-menu .dropdown-item {
    color: var(--text-soft) !important;
}
html[data-ui-theme="light"] .dropdown-item:hover,
html[data-ui-theme="light"] .dropdown-menu .dropdown-item:hover {
    background: rgba(84, 243, 154, 0.12) !important;
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .dropdown-item.active {
    background: rgba(84, 243, 154, 0.18) !important;
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .dropdown-divider {
    border-color: var(--line) !important;
}

/* =====================================================================
   MODALS — Cream surface
   ===================================================================== */
html[data-ui-theme="light"] .modal-content {
    background: #FFFFFF !important;
    border: 1px solid var(--line-2) !important;
    box-shadow:
        0 24px 60px -20px rgba(45, 40, 30, 0.30),
        0 0 0 1px var(--green-line) !important;
}
html[data-ui-theme="light"] .modal-header,
html[data-ui-theme="light"] .modal-footer {
    border-color: var(--line) !important;
}
html[data-ui-theme="light"] .btn-close {
    -webkit-filter: none !important;
            filter: none !important;
    opacity: 0.5;
}
html[data-ui-theme="light"] .btn-close:hover { opacity: 1; }

/* =====================================================================
   LIVE TICKER — Cream pills
   ===================================================================== */
html[data-ui-theme="light"] .nx-ticker-wrap,
html[data-ui-theme="light"] .live-ticker-wrap {
    background: linear-gradient(180deg, rgba(84, 243, 154, 0.04) 0%, transparent 100%) !important;
    border-bottom-color: var(--line) !important;
}
html[data-ui-theme="light"] .nx-ticker-wrap::before {
    background: linear-gradient(90deg, #FBF8F1 0%, transparent 100%) !important;
}
html[data-ui-theme="light"] .nx-ticker-wrap::after {
    background: linear-gradient(270deg, #FBF8F1 0%, transparent 100%) !important;
}
html[data-ui-theme="light"] .nx-ticker-item {
    background: #FFFFFF !important;
    border-color: var(--line-2) !important;
    box-shadow: 0 2px 8px -4px rgba(45, 40, 30, 0.12) !important;
}
html[data-ui-theme="light"] .nx-ticker-item .name {
    color: var(--text) !important;
}
html[data-ui-theme="light"] .nx-ticker-item .amount {
    color: var(--green-on-light) !important;
    text-shadow: none !important;
}
html[data-ui-theme="light"] .nx-ticker-item .time {
    color: var(--muted) !important;
}

/* =====================================================================
   FOOTER — Cream surface
   ===================================================================== */
html[data-ui-theme="light"] .nx-footer {
    background: linear-gradient(180deg, transparent 0%, rgba(84, 243, 154, 0.04) 100%) !important;
    border-top: 1px solid var(--line) !important;
}
html[data-ui-theme="light"] .nx-footer-tagline,
html[data-ui-theme="light"] .nx-footer-newsletter-sub,
html[data-ui-theme="light"] .nx-footer-copy,
html[data-ui-theme="light"] .nx-footer-made {
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .nx-footer-heading {
    color: var(--text) !important;
}
html[data-ui-theme="light"] .nx-footer-list a {
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .nx-footer-list a:hover {
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .nx-footer-list a i {
    color: rgba(31, 140, 79, 0.7) !important;
}
html[data-ui-theme="light"] .nx-trust-badge {
    background: linear-gradient(135deg, rgba(84, 243, 154, 0.12), rgba(84, 243, 154, 0.04)) !important;
    border-color: rgba(84, 243, 154, 0.35) !important;
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .nx-trust-badge i {
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .nx-payment-logo {
    background: #FFFFFF !important;
    border-color: var(--line-2) !important;
    color: var(--text-soft) !important;
}
html[data-ui-theme="light"] .nx-payment-logo:hover {
    border-color: var(--green-line-hi) !important;
    color: var(--green-on-light) !important;
    background: rgba(84, 243, 154, 0.08) !important;
}
html[data-ui-theme="light"] .nx-social-btn {
    background: #FFFFFF !important;
    border-color: var(--line-2) !important;
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .nx-social-btn:hover {
    background: rgba(84, 243, 154, 0.10) !important;
    border-color: var(--green-line-hi) !important;
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .nx-newsletter-input {
    background: #FFFFFF !important;
    border-color: var(--line-2) !important;
    color: var(--text) !important;
}
html[data-ui-theme="light"] .nx-newsletter-input::placeholder {
    color: var(--muted) !important;
}

/* =====================================================================
   MOBILE NAVBAR — Cream floating
   ===================================================================== */
html[data-ui-theme="light"] .mobile-navbar {
    background: rgba(251, 248, 241, 0.94) !important;
    border-top: 1px solid var(--line-2) !important;
    box-shadow: 0 -8px 24px -12px rgba(45, 40, 30, 0.14) !important;
}
html[data-ui-theme="light"] .mobile-navbar .nv-item {
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .mobile-navbar .nv-item.active {
    color: var(--green-on-light) !important;
    background: rgba(84, 243, 154, 0.14) !important;
}

/* =====================================================================
   BADGES / PILLS
   ===================================================================== */
html[data-ui-theme="light"] .badge.bg-label-dark {
    background: rgba(45, 40, 30, 0.72) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}
html[data-ui-theme="light"] .nx-live-pill {
    background: rgba(84, 243, 154, 0.15) !important;
    border-color: rgba(84, 243, 154, 0.45) !important;
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .bg-label-primary,
html[data-ui-theme="light"] .badge.bg-primary {
    background-color: rgba(84, 243, 154, 0.18) !important;
    color: var(--green-on-light) !important;
}

/* =====================================================================
   PAGINATION
   ===================================================================== */
html[data-ui-theme="light"] .pagination .page-link {
    background: #FFFFFF !important;
    border-color: var(--line-2) !important;
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .pagination .page-link:hover {
    background: rgba(84, 243, 154, 0.12) !important;
    border-color: var(--green-line-hi) !important;
    color: var(--green-on-light) !important;
}
html[data-ui-theme="light"] .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #54F39A, #2ecc71) !important;
    border-color: #54F39A !important;
    color: #0A2E1F !important;
}

/* =====================================================================
   EMPTY STATES
   ===================================================================== */
html[data-ui-theme="light"] .empty-state,
html[data-ui-theme="light"] .x-empty-state {
    color: var(--text-2) !important;
}
html[data-ui-theme="light"] .empty-state svg,
html[data-ui-theme="light"] .x-empty-state svg {
    color: var(--green-on-light) !important;
    opacity: 0.7 !important;
}

/* =====================================================================
   SKELETON
   ===================================================================== */
html[data-ui-theme="light"] .skeleton-card {
    background: #FFFFFF !important;
    border-color: var(--line) !important;
}
html[data-ui-theme="light"] .skeleton {
    background: linear-gradient(90deg,
        rgba(84, 243, 154, 0.06) 0%,
        rgba(84, 243, 154, 0.18) 50%,
        rgba(84, 243, 154, 0.06) 100%) !important;
    background-size: 200% 100% !important;
}

/* =====================================================================
   SCROLLBAR
   ===================================================================== */
html[data-ui-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(84, 243, 154, 0.45);
}
html[data-ui-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(84, 243, 154, 0.7);
}
html[data-ui-theme="light"] ::-webkit-scrollbar-track {
    background: #F6F2E8;
}

/* =====================================================================
   SELECTION + FOCUS
   ===================================================================== */
html[data-ui-theme="light"] ::selection {
    background: var(--green-600);
    color: #0A2E1F;
}
html[data-ui-theme="light"] a:focus-visible,
html[data-ui-theme="light"] button:focus-visible,
html[data-ui-theme="light"] .btn:focus-visible {
    outline: 2px solid var(--green-600) !important;
    outline-offset: 2px;
}

/* =====================================================================
   PRELOADER (light)
   ===================================================================== */
html[data-ui-theme="light"] #preloader {
    background:
        radial-gradient(62% 48% at 50% 42%, rgba(84, 243, 154, 0.10) 0%, transparent 72%),
        #FBF8F1 !important;
}

/* =====================================================================
   THEME TOGGLE ICON
   ===================================================================== */
html[data-ui-theme="light"] .theme-toggle i {
    color: var(--text-2);
}
html[data-ui-theme="light"] .theme-toggle:hover i {
    color: var(--green-on-light);
}

/* =====================================================================
   🌙 DARK MODE — 10 Premium Improvements (v10)
   ---------------------------------------------------------------------
   Works only when html[data-ui-theme="dark"] (default)
   Light mode untouched. Reduced-motion respected. Cross-OS safe.
   ===================================================================== */

/* =====================================================================
   1. CARD ELEVATION — Deeper bg, brighter cards
   ===================================================================== */
html[data-ui-theme="dark"],
:root {
    --bg:        #05080D;
    --bg-2:      #071522;
    --bg-3:      #0A1A26;
    --sidebar:   #060D15;
    --card-top:  #14293A;
    --card-bot:  #0C1D2A;
    --card:      #0E1F2C;
    --card-2:    #12293A;
    --elevated:  #163247;
}

html[data-ui-theme="dark"] body {
    background: var(--bg) !important;
}

/* =====================================================================
   2. REDUCE GLOW — Only on: primary CTA, active sidebar, hover
   ===================================================================== */

/* Remove glow from section card borders */
html[data-ui-theme="dark"] .card.new-carder-card,
html[data-ui-theme="dark"] .card {
    box-shadow:
        0 4px 20px -12px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html[data-ui-theme="dark"] .card.new-carder-card:hover {
    box-shadow:
        0 10px 32px -16px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(84, 243, 154, 0.30) !important;
}

/* Remove glow from title icons */
html[data-ui-theme="dark"] .card.new-carder-card .card-title .text-primary,
html[data-ui-theme="dark"] .card.new-carder-card .card-title svg.text-primary,
html[data-ui-theme="dark"] .card.new-carder-card .card-title i.text-primary {
    -webkit-filter: none !important;
            filter: none !important;
}
html[data-ui-theme="dark"] .card.new-carder-card:hover .card-title .text-primary {
    -webkit-filter: drop-shadow(0 0 6px rgba(84, 243, 154, 0.6)) !important;
            filter: drop-shadow(0 0 6px rgba(84, 243, 154, 0.6)) !important;
    transform: none !important;
}

/* Keep glow ONLY on primary buttons */
html[data-ui-theme="dark"] .btn-primary,
html[data-ui-theme="dark"] .btn-success {
    box-shadow:
        0 8px 20px rgba(84, 243, 154, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Keep glow ONLY on active sidebar */
html[data-ui-theme="dark"] .layout-menu .menu-item.active > .menu-link {
    box-shadow:
        inset 3px 0 0 #54F39A,
        0 6px 18px rgba(84, 243, 154, 0.14) !important;
}

/* =====================================================================
   3. CLEARER BORDERS — Visible but not harsh
   ===================================================================== */
html[data-ui-theme="dark"] {
    --line:   rgba(84, 243, 154, 0.16);
    --line-2: rgba(255, 255, 255, 0.12);
}

html[data-ui-theme="dark"] .card,
html[data-ui-theme="dark"] .card.new-carder-card {
    border-color: rgba(84, 243, 154, 0.16) !important;
}
html[data-ui-theme="dark"] .partner-card,
html[data-ui-theme="dark"] .offer-card,
html[data-ui-theme="dark"] .shop-card,
html[data-ui-theme="dark"] .leaderboard-card {
    border-color: rgba(84, 243, 154, 0.20) !important;
}

/* =====================================================================
   4. TEXT HIERARCHY — 3 clear levels
   ===================================================================== */
html[data-ui-theme="dark"] h1,
html[data-ui-theme="dark"] h2,
html[data-ui-theme="dark"] h3,
html[data-ui-theme="dark"] h4,
html[data-ui-theme="dark"] h5,
html[data-ui-theme="dark"] h6,
html[data-ui-theme="dark"] .h1,
html[data-ui-theme="dark"] .h2,
html[data-ui-theme="dark"] .h3,
html[data-ui-theme="dark"] .h4,
html[data-ui-theme="dark"] .h5,
html[data-ui-theme="dark"] .h6 {
    color: #FFFFFF !important;
}
html[data-ui-theme="dark"] body,
html[data-ui-theme="dark"] p,
html[data-ui-theme="dark"] .text-body,
html[data-ui-theme="dark"] .text-heading {
    color: #DDE5E8 !important;
}
html[data-ui-theme="dark"] .text-secondary,
html[data-ui-theme="dark"] .text-muted {
    color: #8B99A0 !important;
}
html[data-ui-theme="dark"] .text-dim,
html[data-ui-theme="dark"] small.muted,
html[data-ui-theme="dark"] .small.text-muted {
    color: #5A6870 !important;
}

/* =====================================================================
   5. SUBTLE CARD GRADIENT — No more beveled plastic look
   ===================================================================== */
html[data-ui-theme="dark"] .card,
html[data-ui-theme="dark"] .new-carder-card,
html[data-ui-theme="dark"] .card.new-carder-card {
    background: linear-gradient(160deg, #14293A 0%, #0E1F2C 100%) !important;
}
html[data-ui-theme="dark"] .partner-card,
html[data-ui-theme="dark"] .offer-card,
html[data-ui-theme="dark"] .shop-card,
html[data-ui-theme="dark"] .leaderboard-card {
    background: linear-gradient(160deg, #14293A 0%, #0C1D2A 100%) !important;
}

/* =====================================================================
   6. FORM INPUTS — Distinct surface
   ===================================================================== */
html[data-ui-theme="dark"] .form-control,
html[data-ui-theme="dark"] .form-select,
html[data-ui-theme="dark"] .input-group-text,
html[data-ui-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-ui-theme="dark"] textarea,
html[data-ui-theme="dark"] select {
    background: #0A1520 !important;
    border: 1px solid rgba(84, 243, 154, 0.20) !important;
    color: #FFFFFF !important;
}
html[data-ui-theme="dark"] .form-control:focus,
html[data-ui-theme="dark"] .form-select:focus,
html[data-ui-theme="dark"] input:focus,
html[data-ui-theme="dark"] textarea:focus,
html[data-ui-theme="dark"] select:focus {
    background: #0F1F2E !important;
    border-color: #54F39A !important;
    box-shadow: 0 0 0 3px rgba(84, 243, 154, 0.15) !important;
    outline: none !important;
}
html[data-ui-theme="dark"] .form-control::placeholder,
html[data-ui-theme="dark"] input::placeholder,
html[data-ui-theme="dark"] textarea::placeholder {
    color: #5A6870 !important;
}

/* Search input group */
html[data-ui-theme="dark"] .search-input-group {
    background: #0A1520 !important;
    border-color: rgba(84, 243, 154, 0.20) !important;
}
html[data-ui-theme="dark"] .search-input-group:focus-within {
    background: #0F1F2E !important;
    border-color: #54F39A !important;
    box-shadow:
        0 0 0 3px rgba(84, 243, 154, 0.15),
        0 8px 22px -10px rgba(84, 243, 154, 0.4) !important;
}

/* =====================================================================
   7. EMPTY STATES — Mint icon + warm message
   ===================================================================== */
html[data-ui-theme="dark"] .empty-state,
html[data-ui-theme="dark"] .x-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    color: #8B99A0;
    text-align: center;
}
html[data-ui-theme="dark"] .empty-state svg,
html[data-ui-theme="dark"] .x-empty-state svg,
html[data-ui-theme="dark"] .empty-state i,
html[data-ui-theme="dark"] .x-empty-state i {
    width: 56px;
    height: 56px;
    font-size: 48px;
    color: #54F39A !important;
    opacity: 0.65;
    -webkit-filter: drop-shadow(0 0 12px rgba(84, 243, 154, 0.35));
            filter: drop-shadow(0 0 12px rgba(84, 243, 154, 0.35));
    margin-bottom: 4px;
}
html[data-ui-theme="dark"] .empty-state h4,
html[data-ui-theme="dark"] .x-empty-state h4 {
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
html[data-ui-theme="dark"] .empty-state p,
html[data-ui-theme="dark"] .x-empty-state p {
    color: #8B99A0 !important;
    font-size: 13.5px;
    max-width: 320px;
    margin: 0;
}

/* =====================================================================
   8. SKELETON LOADING — Mint pulse, not gray
   ===================================================================== */
html[data-ui-theme="dark"] .skeleton,
html[data-ui-theme="dark"] .skeleton-universal,
html[data-ui-theme="dark"] .skeleton-card {
    background: linear-gradient(90deg,
        rgba(84, 243, 154, 0.04) 0%,
        rgba(84, 243, 154, 0.14) 50%,
        rgba(84, 243, 154, 0.04) 100%) !important;
    background-size: 200% 100% !important;
}
html[data-ui-theme="dark"] .skeleton-card {
    border-color: rgba(84, 243, 154, 0.10) !important;
    background: #0E1F2C !important;
}
html[data-ui-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
        rgba(84, 243, 154, 0.04) 0%,
        rgba(84, 243, 154, 0.16) 50%,
        rgba(84, 243, 154, 0.04) 100%) !important;
    background-size: 200% 100% !important;
}

/* =====================================================================
   9. HOVER SCALE — Subtle 1.005 for depth
   ===================================================================== */
html[data-ui-theme="dark"] .card:hover,
html[data-ui-theme="dark"] .partner-card:hover,
html[data-ui-theme="dark"] .offer-card:hover,
html[data-ui-theme="dark"] .shop-card:hover,
html[data-ui-theme="dark"] .leaderboard-card:hover {
    transform: translateY(-6px) scale(1.005);
}

/* Don't scale section cards (too big to scale) */
html[data-ui-theme="dark"] .card.new-carder-card:hover {
    transform: none;
}

/* Locked partner — no scale */
html[data-ui-theme="dark"] .partner-card[style*="not-allowed"]:hover {
    transform: none !important;
}

/* =====================================================================
   10. SCROLL HINT — Subtle indicator on hero
   ===================================================================== */
html[data-ui-theme="dark"] .nx-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    color: rgba(148, 163, 184, 0.6);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    -webkit-animation: nx-scroll-bounce 2.4s ease-in-out infinite;
            animation: nx-scroll-bounce 2.4s ease-in-out infinite;
    pointer-events: none;
}
html[data-ui-theme="dark"] .nx-scroll-hint i,
html[data-ui-theme="dark"] .nx-scroll-hint svg {
    color: #54F39A;
    font-size: 14px;
    -webkit-filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.6));
            filter: drop-shadow(0 0 8px rgba(84, 243, 154, 0.6));
}
@-webkit-keyframes nx-scroll-bounce {
    0%, 100% { -webkit-transform: translateY(0);    opacity: 0.55; }
    50%      { -webkit-transform: translateY(6px);  opacity: 1; }
}
@keyframes nx-scroll-bounce {
    0%, 100% { transform: translateY(0);   opacity: 0.55; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* Mobile — smaller */
@media (max-width: 767.98px) {
    html[data-ui-theme="dark"] .nx-scroll-hint {
        margin-top: 24px;
        font-size: 10px;
    }
}

/* =====================================================================
   REDUCED MOTION — All 10 effects off
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html[data-ui-theme="dark"] .card:hover,
    html[data-ui-theme="dark"] .partner-card:hover,
    html[data-ui-theme="dark"] .offer-card:hover,
    html[data-ui-theme="dark"] .shop-card:hover,
    html[data-ui-theme="dark"] .leaderboard-card:hover {
        transform: none !important;
    }
    html[data-ui-theme="dark"] .nx-scroll-hint {
        -webkit-animation: none !important;
                animation: none !important;
        opacity: 0.7;
    }
}

/* =====================================================================
   🎯 OFFERS GRID — Responsive 4/5/6 Per Row
   ---------------------------------------------------------------------
   Applies ONLY to the non-swiper container (.offer-api-card without
   .swiper-wrapper). Swiper/offerwall slider untouched.
   ===================================================================== */

/* ---- PARENT: turn into CSS Grid (non-swiper only) ---- */
.offer-api-card:not(.swiper-wrapper) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* ---- GRID ITEM: wrapper div fills its cell ---- */
.offer-api-card:not(.swiper-wrapper) > .d-inline-block {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

/* ---- CARD: remove 205px cap inside non-swiper grid ---- */
.offer-api-card:not(.swiper-wrapper) .offer-card {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
}

/* =====================================================================
   RESPONSIVE BREAKPOINTS
   ===================================================================== */

/* ---- 1600px+ : 5 per row ---- */
@media (min-width: 1600px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ---- 1920px+ : 6 per row ---- */
@media (min-width: 1920px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* ---- Tablet (≤991.98px) : 3 per row ---- */
@media (max-width: 991.98px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

/* ---- Mobile (≤767.98px) : 2 per row ---- */
@media (max-width: 767.98px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

/* ---- Small mobile (≤575.98px) : 2 per row (compact) ---- */
@media (max-width: 575.98px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .offer-api-card:not(.swiper-wrapper) .offer-card {
        max-width: none !important;
    }
}

/* ---- Tiny mobile (≤380px) : 1 per row ---- */
@media (max-width: 380px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================================
   SAFETY: never touch swiper mode
   ===================================================================== */
.swiper-wrapper.offer-api-card,
.offer-api-card.swiper-wrapper,
.swiper-offer-card {
    display: flex !important;
}


/* =====================================================================
   🎯 OFFERS GRID — Compact Cards (smaller, more per row)
   ===================================================================== */

/* ---- Base (laptop): 5 per row, tighter gap ---- */
.offer-api-card:not(.swiper-wrapper) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

/* ---- Card wrapper fills cell ---- */
.offer-api-card:not(.swiper-wrapper) > .d-inline-block {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

/* ---- Card: remove 205px cap, tighter padding ---- */
.offer-api-card:not(.swiper-wrapper) .offer-card {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 7px !important;
}

/* ---- Image area: smaller aspect ratio ---- */
.offer-api-card:not(.swiper-wrapper) .offer-card .card-img-block {
    aspect-ratio: 1.3 / 1 !important;
    border-radius: 8px !important;
}

/* ---- Card body: tighter ---- */
.offer-api-card:not(.swiper-wrapper) .offer-card .card-body {
    min-height: 52px !important;
    padding-top: 4px !important;
}

/* ---- Title: smaller ---- */
.offer-api-card:not(.swiper-wrapper) .offer-card .card-body .text-white {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
}

/* ---- Description: smaller ---- */
.offer-api-card:not(.swiper-wrapper) .offer-card .card-body .text-secondary {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* ---- Footer: tighter ---- */
.offer-api-card:not(.swiper-wrapper) .offer-card .card-footer {
    padding-top: 6px !important;
}

/* ---- Reward amount: smaller ---- */
.offer-api-card:not(.swiper-wrapper) .offer-card .card-footer .fw-medium {
    font-size: 14px !important;
    line-height: 14px !important;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* ---- 1600px+ : 6 per row ---- */
@media (min-width: 1600px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* ---- 1920px+ : 7 per row ---- */
@media (min-width: 1920px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
}

/* ---- 1400-1599px : 5 per row ---- */
@media (max-width: 1599.98px) and (min-width: 1200px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ---- 992-1199px : 4 per row ---- */
@media (max-width: 1199.98px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ---- Tablet ≤991px : 3 per row ---- */
@media (max-width: 991.98px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* ---- Mobile ≤767px : 2 per row ---- */
@media (max-width: 767.98px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .offer-api-card:not(.swiper-wrapper) .offer-card {
        padding: 6px !important;
    }
    .offer-api-card:not(.swiper-wrapper) .offer-card .card-body .text-white {
        font-size: 12px !important;
    }
    .offer-api-card:not(.swiper-wrapper) .offer-card .card-body .text-secondary {
        font-size: 10px !important;
    }
}

/* ---- Tiny ≤380px : 2 per row still ---- */
@media (max-width: 380px) {
    .offer-api-card:not(.swiper-wrapper) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

/* =====================================================================
   SAFETY: swiper untouched
   ===================================================================== */
.swiper-wrapper.offer-api-card,
.offer-api-card.swiper-wrapper,
.swiper-offer-card {
    display: flex !important;
}


/* =====================================================================
   🔴 FIX: Light mode hero stats contrast
   ===================================================================== */
html[data-ui-theme="light"] .hero-stats .stat-number,
html[data-ui-theme="light"] .hero-stats h2,
html[data-ui-theme="light"] .hero-stats h3,
html[data-ui-theme="light"] .hero-stats .display-4,
html[data-ui-theme="light"] .hero-stats .fw-bold,
html[data-ui-theme="light"] .home-stats .stat-number,
html[data-ui-theme="light"] .home-stats h2,
html[data-ui-theme="light"] .home-stats h3,
html[data-ui-theme="light"] .home-stats .fw-bold {
    color: #1A1A1A !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-ui-theme="light"] .hero-stats .stat-label,
html[data-ui-theme="light"] .hero-stats small,
html[data-ui-theme="light"] .hero-stats .text-muted,
html[data-ui-theme="light"] .home-stats .stat-label,
html[data-ui-theme="light"] .home-stats small,
html[data-ui-theme="light"] .home-stats .text-muted {
    color: #4A4438 !important;
    opacity: 1 !important;
}

/* Stat cards background — solid white in light mode */
html[data-ui-theme="light"] .hero-stats .card,
html[data-ui-theme="light"] .home-stats .card {
    background: #FFFFFF !important;
    border: 1px solid rgba(45, 40, 30, 0.10) !important;
    box-shadow: 0 4px 16px -10px rgba(45, 40, 30, 0.10) !important;
}


/* =====================================================================
   🔴 Light mode hero stats contrast
   ===================================================================== */
html[data-ui-theme="light"] .hero-stats .stat-number,
html[data-ui-theme="light"] .hero-stats h2,
html[data-ui-theme="light"] .hero-stats h3,
html[data-ui-theme="light"] .hero-stats .display-4,
html[data-ui-theme="light"] .hero-stats .fw-bold,
html[data-ui-theme="light"] .home-stats .stat-number,
html[data-ui-theme="light"] .home-stats h2,
html[data-ui-theme="light"] .home-stats h3,
html[data-ui-theme="light"] .home-stats .fw-bold {
    color: #1A1A1A !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
html[data-ui-theme="light"] .hero-stats .stat-label,
html[data-ui-theme="light"] .hero-stats small,
html[data-ui-theme="light"] .hero-stats .text-muted,
html[data-ui-theme="light"] .home-stats .stat-label,
html[data-ui-theme="light"] .home-stats small,
html[data-ui-theme="light"] .home-stats .text-muted {
    color: #4A4438 !important;
    opacity: 1 !important;
}
html[data-ui-theme="light"] .hero-stats .card,
html[data-ui-theme="light"] .home-stats .card {
    background: #FFFFFF !important;
    border: 1px solid rgba(45, 40, 30, 0.10) !important;
}

/* Light mode trust badges */
html[data-ui-theme="light"] .trust-badge,
html[data-ui-theme="light"] .nx-trust-badge,
html[data-ui-theme="light"] .hero-trust-badge {
    background: rgba(84, 243, 154, 0.14) !important;
    border: 1px solid rgba(31, 140, 79, 0.45) !important;
    color: #16703D !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
}
html[data-ui-theme="light"] .trust-badge i,
html[data-ui-theme="light"] .nx-trust-badge i {
    color: #16703D !important;
}


/* =====================================================================
   🎯 SHOP PAGE — Compact + Centered Cards
   ===================================================================== */

/* ---- Center grid content when few items ---- */
.card-container {
    justify-content: center !important;
    justify-items: center !important;
}

/* ---- Cap card max-width ---- */
.card-container .shop-card {
    max-width: 180px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* ---- Cap image size ---- */
.card-container .shop-card .card-body {
    padding: 14px 10px 8px !important;
}

.card-container .shop-card .card-body img,
.card-container .shop-card .card-body img.w-100 {
    max-width: 90px !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
    margin: 8px auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* ---- Card footer text smaller ---- */
.card-container .shop-card .card-footer span,
.card-container .shop-card .card-footer .h6 {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ---- Category heading — better spacing ---- */
.card-body > .text-white.fw-bold.ms-1.pt-4 {
    font-size: 15px !important;
    padding-top: 18px !important;
    padding-bottom: 6px !important;
    margin-left: 4px !important;
    border-bottom: 1px solid rgba(84, 243, 154, 0.15);
    padding-left: 0 !important;
}

/* ---- Responsive ---- */
@media (min-width: 1400px) {
    .card-container .shop-card {
        max-width: 190px !important;
    }
}
@media (max-width: 767.98px) {
    .card-container .shop-card {
        max-width: 160px !important;
    }
    .card-container .shop-card .card-body img {
        max-width: 70px !important;
        max-height: 70px !important;
    }
}


/* =====================================================================
   🎯 SHOP PAGE — Compact + Centered Cards
   ===================================================================== */

.card-container {
    justify-content: center !important;
    justify-items: center !important;
}

.card-container .shop-card {
    max-width: 180px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.card-container .shop-card .card-body {
    padding: 14px 10px 8px !important;
}

.card-container .shop-card .card-body img,
.card-container .shop-card .card-body img.w-100 {
    max-width: 90px !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
    margin: 8px auto !important;
    display: block !important;
    object-fit: contain !important;
}

.card-container .shop-card .card-footer span,
.card-container .shop-card .card-footer .h6 {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.card-body > .text-white.fw-bold.ms-1.pt-4 {
    font-size: 15px !important;
    padding-top: 18px !important;
    padding-bottom: 6px !important;
    margin-left: 4px !important;
    border-bottom: 1px solid rgba(84, 243, 154, 0.15);
    padding-left: 0 !important;
}

@media (min-width: 1400px) {
    .card-container .shop-card {
        max-width: 190px !important;
    }
}
@media (max-width: 767.98px) {
    .card-container .shop-card {
        max-width: 160px !important;
    }
    .card-container .shop-card .card-body img {
        max-width: 70px !important;
        max-height: 70px !important;
    }
}


/* =====================================================================

/* =====================================================================
   ✨ SUBTLE ANIMATIONS — Soft, not distracting
   ===================================================================== */

/* ---- 1. Gentle fade-in on scroll ---- */
.nx-anim {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nx-anim.nx-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- 2. Very subtle card hover ---- */
.card, .offer-card, .shop-card, .partner-card, .leaderboard-card,
.new-carder-card, .hero-stats .card, .home-stats .card {
    transition: transform 0.28s ease-out,
                box-shadow 0.28s ease-out,
                border-color 0.28s ease-out !important;
}
.card:hover, .offer-card:hover, .shop-card:hover,
.partner-card:hover, .leaderboard-card:hover,
.new-carder-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px -12px rgba(84, 243, 154, 0.28),
        0 2px 8px -4px rgba(0, 0, 0, 0.20) !important;
}

/* Remove ALL old effects */
.card::before, .offer-card::before, .shop-card::before,
.partner-card::before, .leaderboard-card::before {
    display: none !important;
}
.btn::after, .btn-primary::after, .btn-success::after {
    display: none !important;
}
#nx-scroll-progress, #nx-livewire-bar {
    display: none !important;
}

/* Button press — very subtle */
.btn:active {
    transform: scale(0.99) !important;
}

/* Page enter — very subtle */
body.nx-entering { animation: none !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .nx-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
    .card:hover, .offer-card:hover, .shop-card:hover, .partner-card:hover { transform: none !important; }
}


/* =====================================================================
   🎯 SHOP / WITHDRAW MODAL — Premium Polish
   ===================================================================== */

/* ---- 1. Modal width — wider on desktop ---- */
#shopModal .modal-dialog {
    max-width: 520px !important;
}
@media (max-width: 575.98px) {
    #shopModal .modal-dialog {
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }
}

/* ---- 2. Modal content — premium surface ---- */
#shopModal .modal-content {
    border-radius: 16px !important;
    border: 1px solid rgba(84, 243, 154, 0.22) !important;
    background: linear-gradient(160deg, #14293A 0%, #0C1D2A 100%) !important;
    overflow: hidden !important;
}
html[data-ui-theme="light"] #shopModal .modal-content {
    background: #FFFFFF !important;
    border: 1px solid rgba(45, 40, 30, 0.12) !important;
    box-shadow: 0 24px 60px -20px rgba(45, 40, 30, 0.30) !important;
}

/* ---- 3. Modal header ---- */
#shopModal .modal-header {
    border-bottom: 1px solid rgba(84, 243, 154, 0.15) !important;
    padding: 14px 18px !important;
    background: rgba(84, 243, 154, 0.04) !important;
}
html[data-ui-theme="light"] #shopModal .modal-header {
    border-bottom-color: rgba(45, 40, 30, 0.08) !important;
    background: rgba(84, 243, 154, 0.06) !important;
}

#shopModal .modal-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    gap: 10px !important;
}

/* ---- 4. Close button — single clean style ---- */
#shopModal .btn-close,
#shopModal .btn-close.bg-label-primary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    opacity: 0.85 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#shopModal .btn-close:hover {
    background: rgba(84, 243, 154, 0.20) !important;
    border-color: rgba(84, 243, 154, 0.50) !important;
    color: #54F39A !important;
    opacity: 1 !important;
    transform: rotate(90deg);
}
html[data-ui-theme="light"] #shopModal .btn-close {
    background: rgba(45, 40, 30, 0.06) !important;
    border-color: rgba(45, 40, 30, 0.12) !important;
    color: #2B2620 !important;
}
html[data-ui-theme="light"] #shopModal .btn-close:hover {
    background: rgba(84, 243, 154, 0.15) !important;
    border-color: rgba(31, 140, 79, 0.45) !important;
    color: #1F8C4F !important;
}
#shopModal .btn-close i {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ---- 5. Modal body ---- */
#shopModal .modal-body {
    padding: 16px 18px !important;
}

/* ---- 6. Payment note ---- */
#shopModal .modal-body .row.mb-2 span.text-base {
    font-size: 13px !important;
    color: #B8C5CC !important;
    background: rgba(84, 243, 154, 0.06) !important;
    border-left: 3px solid rgba(84, 243, 154, 0.45) !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    display: block !important;
    line-height: 1.5 !important;
}
html[data-ui-theme="light"] #shopModal .modal-body .row.mb-2 span.text-base {
    color: #4A4438 !important;
    background: rgba(84, 243, 154, 0.08) !important;
}

/* ---- 7. "Select Amount" label ---- */
#shopModal .modal-body > .py-2 > p.form-label {
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin-bottom: 10px !important;
    padding-top: 8px !important;
}
html[data-ui-theme="light"] #shopModal .modal-body > .py-2 > p.form-label {
    color: #7A7367 !important;
}

/* ---- 8. PRICE CARDS — 3 per row grid ---- */
#shopModal .py-2 > .d-flex {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}
@media (max-width: 420px) {
    #shopModal .py-2 > .d-flex {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---- 9. Individual price card ---- */
#shopModal .py-2 > .d-flex > .card {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 46px !important;
}
#shopModal .py-2 > .d-flex > .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px -10px rgba(84, 243, 154, 0.45) !important;
}

/* ---- 10. Selected price card — mint glow + checkmark ---- */
#shopModal .py-2 > .d-flex > .card[style*="var(--bs-primary)"],
#shopModal .py-2 > .d-flex > .card.selected {
    border-color: #54F39A !important;
    box-shadow:
        0 0 0 3px rgba(84, 243, 154, 0.22),
        0 8px 22px -10px rgba(84, 243, 154, 0.55) !important;
    background: linear-gradient(160deg,
        rgba(84, 243, 154, 0.14) 0%,
        transparent 100%) !important;
}
#shopModal .py-2 > .d-flex > .card[style*="var(--bs-primary)"]::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    font-weight: 900;
    color: #54F39A;
    line-height: 1;
    text-shadow: 0 0 6px rgba(84, 243, 154, 0.8);
}

/* ---- 11. Price text ---- */
#shopModal .py-2 > .d-flex > .card .card-body {
    padding: 10px 10px !important;
}
#shopModal .py-2 > .d-flex > .card .card-body .d-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
}
#shopModal .py-2 > .d-flex > .card .card-body span.h6 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
}
html[data-ui-theme="light"] #shopModal .py-2 > .d-flex > .card .card-body span.h6 {
    color: #1A1A1A !important;
}
#shopModal .py-2 > .d-flex > .card .card-body img {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* ---- 12. Modal footer buttons (if any) ---- */
#shopModal .modal-footer {
    border-top: 1px solid rgba(84, 243, 154, 0.15) !important;
    padding: 12px 18px !important;
    gap: 8px !important;
}
html[data-ui-theme="light"] #shopModal .modal-footer {
    border-top-color: rgba(45, 40, 30, 0.08) !important;
}

/* ---- 13. Modal backdrop blur ---- */
.modal-backdrop.show {
    opacity: 0.72 !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---- 14. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    #shopModal .py-2 > .d-flex > .card,
    #shopModal .btn-close {
        transition: none !important;
    }
    #shopModal .py-2 > .d-flex > .card:hover {
        transform: none !important;
    }
}


/* =====================================================================
   🎯 HOMEPAGE PREMIUM UPDATES — v1
   ===================================================================== */

/* ---- 1. Live Earning Ticker ---- */
#nx-live-ticker {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #14293A 0%, #0C1D2A 100%);
    border: 1px solid rgba(84, 243, 154, 0.35);
    box-shadow:
        0 12px 32px -14px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(84, 243, 154, 0.08);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px) translateX(-10px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 320px;
}
#nx-live-ticker.nx-show {
    opacity: 1;
    transform: translateY(0) translateX(0);
}
#nx-live-ticker .nx-ticker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #54F39A, #14b8a6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0A2E1F;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(84, 243, 154, 0.25);
}
#nx-live-ticker .nx-ticker-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
#nx-live-ticker .nx-ticker-name {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 12.5px;
}
#nx-live-ticker .nx-ticker-msg {
    font-size: 11.5px;
    color: #8B99A0;
}
#nx-live-ticker .nx-ticker-amount {
    color: #54F39A;
    font-weight: 800;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(84, 243, 154, 0.45);
}
#nx-live-ticker .nx-ticker-flag {
    font-size: 14px;
    margin-right: 2px;
}
html[data-ui-theme="light"] #nx-live-ticker {
    background: #FFFFFF;
    border-color: rgba(31, 140, 79, 0.30);
    box-shadow:
        0 12px 32px -14px rgba(45, 40, 30, 0.25),
        0 0 0 1px rgba(31, 140, 79, 0.08);
}
html[data-ui-theme="light"] #nx-live-ticker .nx-ticker-name { color: #1A1A1A; }
html[data-ui-theme="light"] #nx-live-ticker .nx-ticker-msg { color: #7A7367; }
html[data-ui-theme="light"] #nx-live-ticker .nx-ticker-amount { color: #1F8C4F; text-shadow: none; }

@media (max-width: 575.98px) {
    #nx-live-ticker {
        bottom: 90px;
        left: 12px;
        right: 12px;
        max-width: none;
        font-size: 12px;
    }
}

/* ---- 2. Partner Marquee ---- */
.nx-marquee-wrap {
    width: 100%;
    overflow: hidden !important;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.nx-marquee-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;
    width: max-content !important;
    animation: nx-marquee-scroll 32s linear infinite;
    padding: 6px 0 !important;
}
.nx-marquee-track:hover { animation-play-state: paused; }
.nx-marquee-track > * {
    flex-shrink: 0 !important;
    opacity: 0.75;
    transition: opacity 0.25s ease;
}
.nx-marquee-track > *:hover { opacity: 1; }
@keyframes nx-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .nx-marquee-track { animation: none !important; }
}

/* ---- 3. Live Stats pulse ---- */
.nx-stat-pulse {
    display: inline-block;
    animation: nx-stat-tick 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes nx-stat-tick {
    0%   { transform: translateY(6px); color: #54F39A; opacity: 0.6; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ---- 4. Scroll Hint ---- */
.nx-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 36px;
    color: rgba(148, 163, 184, 0.65);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    animation: nx-scroll-bounce 2.4s ease-in-out infinite;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.nx-scroll-hint.nx-hidden { opacity: 0; }
.nx-scroll-hint i,
.nx-scroll-hint svg {
    color: #54F39A;
    font-size: 14px;
    filter: drop-shadow(0 0 6px rgba(84, 243, 154, 0.55));
}
@keyframes nx-scroll-bounce {
    0%, 100% { transform: translateY(0);   opacity: 0.55; }
    50%      { transform: translateY(6px); opacity: 1; }
}
html[data-ui-theme="light"] .nx-scroll-hint { color: #7A7367; }
@media (prefers-reduced-motion: reduce) {
    .nx-scroll-hint { animation: none !important; }
}

/* ---- 5. Typewriter cursor ---- */
.nx-typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #54F39A;
    margin-left: 6px;
    vertical-align: text-bottom;
    animation: nx-cursor-blink 0.85s steps(1) infinite;
    box-shadow: 0 0 8px rgba(84, 243, 154, 0.7);
}
@keyframes nx-cursor-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}


/* =====================================================================
   🌐 LIVE TICKER — Cross-Browser + Always Visible
   ===================================================================== */

#nx-live-ticker {
    position: fixed;
    bottom: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 24px;
    left: calc(24px + env(safe-area-inset-left, 0px));
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;

    /* Solid fallback for browsers without backdrop-filter */
    background: #0C1D2A;
    background: linear-gradient(135deg, #14293A 0%, #0C1D2A 100%);

    border: 1px solid rgba(84, 243, 154, 0.35);
    box-shadow:
        0 12px 32px -14px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(84, 243, 154, 0.08);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    max-width: 320px;

    /* Always visible — no opacity 0 default */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    /* Cross-browser transforms */
    -webkit-transform: translateY(0);
    -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    /* Prevent selection */
    -webkit-user-select: none;
    user-select: none;

    /* Font smoothing across OS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Content change pulse — smooth, cross-browser */
#nx-live-ticker.nx-flash {
    animation: nx-ticker-flash 0.5s ease-out;
    -webkit-animation: nx-ticker-flash 0.5s ease-out;
}
@keyframes nx-ticker-flash {
    0%   { transform: scale(0.97); opacity: 0.75; }
    100% { transform: scale(1);    opacity: 1; }
}
@-webkit-keyframes nx-ticker-flash {
    0%   { -webkit-transform: scale(0.97); opacity: 0.75; }
    100% { -webkit-transform: scale(1);    opacity: 1; }
}

#nx-live-ticker .nx-ticker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #54F39A, #14b8a6);
    background: -webkit-linear-gradient(315deg, #54F39A, #14b8a6);
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: #0A2E1F;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(84, 243, 154, 0.25);
    line-height: 1;
}
#nx-live-ticker .nx-ticker-body {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    min-width: 0;
}
#nx-live-ticker .nx-ticker-name {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#nx-live-ticker .nx-ticker-msg {
    font-size: 11.5px;
    color: #8B99A0;
    white-space: nowrap;
}
#nx-live-ticker .nx-ticker-amount {
    color: #54F39A;
    font-weight: 800;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(84, 243, 154, 0.45);
}

/* Light mode */
html[data-ui-theme="light"] #nx-live-ticker {
    background: #FFFFFF;
    background: linear-gradient(135deg, #FFFFFF 0%, #F6F2E8 100%);
    border-color: rgba(31, 140, 79, 0.30);
    box-shadow:
        0 12px 32px -14px rgba(45, 40, 30, 0.25),
        0 0 0 1px rgba(31, 140, 79, 0.08);
}
html[data-ui-theme="light"] #nx-live-ticker .nx-ticker-name { color: #1A1A1A; }
html[data-ui-theme="light"] #nx-live-ticker .nx-ticker-msg { color: #7A7367; }
html[data-ui-theme="light"] #nx-live-ticker .nx-ticker-amount { color: #1F8C4F; text-shadow: none; }

/* Mobile — bottom safe area for iOS */
@media (max-width: 767.98px) {
    #nx-live-ticker {
        bottom: 84px;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        left: calc(12px + env(safe-area-inset-left, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        max-width: none;
        font-size: 12px;
        padding: 9px 12px;
    }
}

/* Reduced motion — keep visible, no animation */
@media (prefers-reduced-motion: reduce) {
    #nx-live-ticker,
    #nx-live-ticker.nx-flash {
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
        -webkit-transition: none !important;
    }
}