/* =========================================================================
   BLUECREST — "MIDNIGHT" THEME  (bx-theme.css)
   -------------------------------------------------------------------------
   Loaded LAST on every front-end page (public site, auth, user dashboard).

   1. Every colour in the older stylesheets has been converted to a --bx-*
      token, so this file is the single place where the palette lives.
   2. Convention is now consistent everywhere:
         body.dark-theme        -> DARK  (default)
         body:not(.dark-theme)  -> LIGHT (after the user toggles)
   3. Visual language: black header with live crypto ticker, deep navy /
      starfield sections, Poppins type, royal-blue actions, gold highlights.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root,
html body.dark-theme {
    --bx-bg:            #05060d;
    --bx-bg-2:          #0a0c1d;
    --bx-surface:       #0e1126;
    --bx-surface-2:     #141836;
    --bx-surface-3:     #1b2045;
    --bx-tint:          rgba(255, 255, 255, 0.045);
    --bx-tint-2:        rgba(255, 255, 255, 0.085);
    --bx-border:        rgba(255, 255, 255, 0.08);
    --bx-border-2:      rgba(255, 255, 255, 0.16);

    --bx-text:          #f2f3fa;
    --bx-text-2:        #b4b8d4;
    --bx-text-3:        #8187ac;

    --bx-accent:        #3d4cf5;
    --bx-accent-deep:   #22258f;
    --bx-accent-light:  #6573ff;
    --bx-accent-soft:   rgba(77, 92, 255, 0.16);
    --bx-accent-ink:    #8e9aff;

    --bx-navy:          #12125e;
    --bx-navy-2:        #1b1b86;

    --bx-gold:          #f3ba2f;
    --bx-gold-deep:     #b8860b;
    --bx-gold-soft:     rgba(243, 186, 47, 0.14);
    --bx-gold-ink:      #f7c94f;

    --bx-success:       #16c784;
    --bx-success-soft:  rgba(22, 199, 132, 0.14);
    --bx-success-ink:   #3ee0a0;
    --bx-danger:        #ea3943;
    --bx-danger-soft:   rgba(234, 57, 67, 0.15);
    --bx-danger-ink:    #ff7a81;
    --bx-warn:          #f59e0b;
    --bx-warn-soft:     rgba(245, 158, 11, 0.15);
    --bx-warn-ink:      #fbbf24;
    --bx-violet:        #9b5cf6;
    --bx-violet-soft:   rgba(155, 92, 246, 0.16);
    --bx-violet-ink:    #c4a1ff;

    --bx-on-accent:     #ffffff;
    --bx-shadow:        0 10px 30px -12px rgba(0, 0, 0, 0.7);
    --bx-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.45);
    --bx-input-bg:      #090b1a;

    --bx-font:          'Poppins', 'Sofia Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bx-radius-sm:     8px;
    --bx-radius:        14px;
    --bx-radius-lg:     20px;

    color-scheme: dark;
}

html body:not(.dark-theme) {
    --bx-bg:            #f3f4fa;
    --bx-bg-2:          #e9ebf7;
    --bx-surface:       #ffffff;
    --bx-surface-2:     #f6f7fd;
    --bx-surface-3:     #eceefa;
    --bx-tint:          rgba(13, 16, 48, 0.04);
    --bx-tint-2:        rgba(13, 16, 48, 0.075);
    --bx-border:        rgba(13, 16, 48, 0.10);
    --bx-border-2:      rgba(13, 16, 48, 0.18);

    --bx-text:          #0d1030;
    --bx-text-2:        #464c70;
    --bx-text-3:        #737a9c;

    --bx-accent:        #3341e8;
    --bx-accent-deep:   #1f1f8f;
    --bx-accent-light:  #5a68ff;
    --bx-accent-soft:   rgba(51, 65, 232, 0.10);
    --bx-accent-ink:    #2834c9;

    --bx-gold-soft:     rgba(211, 155, 0, 0.13);
    --bx-gold-ink:      #9a6c00;
    --bx-success-soft:  rgba(15, 157, 106, 0.11);
    --bx-success-ink:   #08784f;
    --bx-danger-soft:   rgba(217, 45, 58, 0.10);
    --bx-danger-ink:    #b4212d;
    --bx-warn-soft:     rgba(217, 119, 6, 0.12);
    --bx-warn-ink:      #a85a02;
    --bx-violet-soft:   rgba(139, 63, 217, 0.10);
    --bx-violet-ink:    #7a2fc7;

    --bx-shadow:        0 10px 30px -14px rgba(13, 16, 48, 0.22);
    --bx-shadow-sm:     0 2px 8px rgba(13, 16, 48, 0.06);
    --bx-input-bg:      #ffffff;

    color-scheme: light;
}

/* Legacy token families that are not plain colours (inverse text etc.) */
html body:not(#bx) {
    --cr-text-inv: #ffffff;
    --cr-font: var(--bx-font);
    --uo-accent-fg: #ffffff;
    --pn-toggle-fg: #ffffff;
    --np-accent-fg: #ffffff;
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
html body:not(#bx),
html body.dark-theme {
    background: var(--bx-bg) !important;
    color: var(--bx-text) !important;
    font-family: var(--bx-font) !important;
}

html body:not(#bx) h1, html body:not(#bx) h2, html body:not(#bx) h3,
html body:not(#bx) h4, html body:not(#bx) h5, html body:not(#bx) h6 {
    font-family: var(--bx-font) !important;
}

html body:not(#bx) ::selection { background: var(--bx-accent); color: #fff; }

html body:not(#bx) a { text-decoration-color: currentColor; }

html body:not(#bx) .text-muted { color: var(--bx-text-3) !important; }
html body:not(#bx) .text-dark,
html body:not(#bx) .text-black { color: var(--bx-text) !important; }
html body:not(#bx) .text-white { color: #fff !important; }
html body:not(#bx) .bg-white,
html body:not(#bx) .bg-light { background: var(--bx-surface) !important; color: var(--bx-text) !important; }
html body:not(#bx) hr { border-color: var(--bx-border) !important; opacity: 1; }

/* Scrollbars */
html body:not(#bx) ::-webkit-scrollbar { width: 10px; height: 10px; }
html body:not(#bx) ::-webkit-scrollbar-track { background: var(--bx-bg); }
html body:not(#bx) ::-webkit-scrollbar-thumb { background: var(--bx-surface-3); border-radius: 10px; border: 2px solid var(--bx-bg); }

/* -------------------------------------------------------------------------
   3. BUTTONS — one rule-set for every button family in the codebase.
      Every filled button gets an explicit text colour so the label can
      never be the same colour as its background again.
   ------------------------------------------------------------------------- */
html body:not(#bx) .btn,
html body:not(#bx) .site-btn,
html body:not(#bx) .site-btn-sm,
html body:not(#bx) .hn-btn,
html body:not(#bx) .nv-btn,
html body:not(#bx) .cr-btn,
html body:not(#bx) .cr-action-btn,
html body:not(#bx) .primary-btn,
html body:not(#bx) .grad-btn,
html body:not(#bx) .blue-btn,
html body:not(#bx) .red-btn,
html body:not(#bx) .black-btn,
html body:not(#bx) .apply-btn {
    font-family: var(--bx-font) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

/* Primary / filled */
html body:not(#bx) .btn-primary,
html body:not(#bx) .site-btn.primary-btn,
html body:not(#bx) .site-btn.grad-btn,
html body:not(#bx) .primary-btn,
html body:not(#bx) .grad-btn,
html body:not(#bx) .blue-btn,
html body:not(#bx) .hn-btn--primary,
html body:not(#bx) .nv-btn-primary,
html body:not(#bx) .cr-btn-accent,
html body:not(#bx) .cr-btn-primary,
html body:not(#bx) .cr-action-primary,
html body:not(#bx) .apply-btn,
html body:not(#bx) .np-kyc-btn,
html body:not(#bx) .site-btn:not(.red-btn):not(.black-btn):not(.green-btn):not(.cancel-btn):not(.white-btn) {
    background: linear-gradient(135deg, var(--bx-accent) 0%, var(--bx-accent-deep) 100%) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px -10px rgba(61, 76, 245, 0.75) !important;
}
html body:not(#bx) .btn-primary:hover,
html body:not(#bx) .site-btn:hover,
html body:not(#bx) .primary-btn:hover,
html body:not(#bx) .grad-btn:hover,
html body:not(#bx) .blue-btn:hover,
html body:not(#bx) .hn-btn--primary:hover,
html body:not(#bx) .nv-btn-primary:hover,
html body:not(#bx) .cr-btn-accent:hover,
html body:not(#bx) .cr-btn-primary:hover,
html body:not(#bx) .cr-action-primary:hover,
html body:not(#bx) .apply-btn:hover,
html body:not(#bx) .np-kyc-btn:hover {
    background: linear-gradient(135deg, var(--bx-accent-light) 0%, var(--bx-accent) 100%) !important;
    color: #ffffff !important;
    filter: none !important;
}
/* icons inside filled buttons follow the label */
html body:not(#bx) .btn-primary i, html body:not(#bx) .btn-primary svg,
html body:not(#bx) .site-btn i, html body:not(#bx) .site-btn svg,
html body:not(#bx) .primary-btn i, html body:not(#bx) .primary-btn svg,
html body:not(#bx) .hn-btn--primary i, html body:not(#bx) .nv-btn-primary i,
html body:not(#bx) .cr-btn-accent i, html body:not(#bx) .cr-btn-accent svg,
html body:not(#bx) .cr-action-primary i, html body:not(#bx) .cr-action-primary svg {
    color: inherit !important;
    stroke: currentColor;
}

/* Gold call-to-action (hero, CTA panel, "Invest now") */
html body:not(#bx) .hn-btn--white,
html body:not(#bx) .nv-btn-white,
html body:not(#bx) .bx-btn-gold {
    background: linear-gradient(135deg, #ffd66b 0%, var(--bx-gold) 45%, #d99a0b 100%) !important;
    color: #14110a !important;
    border: 1px solid transparent !important;
    box-shadow: 0 10px 26px -12px rgba(243, 186, 47, 0.8) !important;
}
html body:not(#bx) .hn-btn--white:hover,
html body:not(#bx) .nv-btn-white:hover,
html body:not(#bx) .bx-btn-gold:hover {
    filter: brightness(1.06) !important;
    color: #14110a !important;
}

/* Ghost / outline */
html body:not(#bx) .hn-btn--ghost,
html body:not(#bx) .nv-btn-outline,
html body:not(#bx) .cr-btn-ghost,
html body:not(#bx) .cr-action-ghost,
html body:not(#bx) .btn-outline-primary,
html body:not(#bx) .btn-outline-secondary,
html body:not(#bx) .btn-light,
html body:not(#bx) .btn-secondary,
html body:not(#bx) .white-btn {
    background: var(--bx-tint) !important;
    color: var(--bx-text) !important;
    border: 1px solid var(--bx-border-2) !important;
    box-shadow: none !important;
}
html body:not(#bx) .hn-btn--ghost:hover,
html body:not(#bx) .nv-btn-outline:hover,
html body:not(#bx) .cr-btn-ghost:hover,
html body:not(#bx) .cr-action-ghost:hover,
html body:not(#bx) .btn-outline-primary:hover,
html body:not(#bx) .btn-outline-secondary:hover,
html body:not(#bx) .btn-light:hover,
html body:not(#bx) .btn-secondary:hover,
html body:not(#bx) .white-btn:hover {
    background: var(--bx-tint-2) !important;
    color: var(--bx-text) !important;
    border-color: var(--bx-accent-light) !important;
}

/* Destructive / success */
html body:not(#bx) .red-btn,
html body:not(#bx) .btn-danger,
html body:not(#bx) .site-btn.red-btn,
html body:not(#bx) .cancel-btn {
    background: var(--bx-danger) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}
html body:not(#bx) .red-btn:hover, html body:not(#bx) .btn-danger:hover, html body:not(#bx) .cancel-btn:hover { filter: brightness(1.1); color: #fff !important; }
html body:not(#bx) .green-btn,
html body:not(#bx) .btn-success {
    background: var(--bx-success) !important;
    border: 1px solid transparent !important;
    color: #04140d !important;
}
html body:not(#bx) .black-btn,
html body:not(#bx) .btn-dark {
    background: var(--bx-surface-3) !important;
    border: 1px solid var(--bx-border-2) !important;
    color: var(--bx-text) !important;
}
html body:not(#bx) .btn-warning { background: var(--bx-gold) !important; color: #14110a !important; border-color: transparent !important; }
html body:not(#bx) .btn-info { background: var(--bx-accent-soft) !important; color: var(--bx-accent-ink) !important; border-color: transparent !important; }

html body:not(#bx) .btn:disabled,
html body:not(#bx) .site-btn:disabled,
html body:not(#bx) .btn.disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}
html body:not(#bx) .btn:focus-visible,
html body:not(#bx) .site-btn:focus-visible,
html body:not(#bx) .hn-btn:focus-visible,
html body:not(#bx) .nv-btn:focus-visible,
html body:not(#bx) .cr-btn:focus-visible {
    outline: 2px solid var(--bx-gold) !important;
    outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------
   4. FORMS
   ------------------------------------------------------------------------- */
html body:not(#bx) .form-control,
html body:not(#bx) .form-select,
html body:not(#bx) .cr-input,
html body:not(#bx) .hn-input,
html body:not(#bx) .hn-select,
html body:not(#bx) .box-input,
html body:not(#bx) .site-nice-select,
html body:not(#bx) .nice-select,
html body:not(#bx) input[type="text"]:not(.btn),
html body:not(#bx) input[type="email"],
html body:not(#bx) input[type="password"],
html body:not(#bx) input[type="number"],
html body:not(#bx) input[type="tel"],
html body:not(#bx) input[type="url"],
html body:not(#bx) input[type="search"],
html body:not(#bx) input[type="date"],
html body:not(#bx) select,
html body:not(#bx) textarea {
    background-color: var(--bx-input-bg) !important;
    color: var(--bx-text) !important;
    border-color: var(--bx-border-2) !important;
    font-family: var(--bx-font) !important;
}
html body:not(#bx) input::placeholder,
html body:not(#bx) textarea::placeholder { color: var(--bx-text-3) !important; opacity: 1 !important; }
html body:not(#bx) .form-control:focus,
html body:not(#bx) .form-select:focus,
html body:not(#bx) .cr-input:focus,
html body:not(#bx) .hn-input:focus,
html body:not(#bx) .hn-select:focus,
html body:not(#bx) input:focus,
html body:not(#bx) select:focus,
html body:not(#bx) textarea:focus {
    border-color: var(--bx-accent-light) !important;
    box-shadow: 0 0 0 3px var(--bx-accent-soft) !important;
    outline: none !important;
}
html body:not(#bx) input:disabled,
html body:not(#bx) input[readonly],
html body:not(#bx) .form-control:disabled,
html body:not(#bx) .form-control[readonly] {
    background-color: var(--bx-surface-2) !important;
    color: var(--bx-text-2) !important;
}
html body:not(#bx) select option { background: var(--bx-surface); color: var(--bx-text); }
html body:not(#bx) input:-webkit-autofill,
html body:not(#bx) input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--bx-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bx-input-bg) inset !important;
    caret-color: var(--bx-text);
}
html body:not(#bx) .input-group-text,
html body:not(#bx) .cr-input-group-addon,
html body:not(#bx) .hn-input-suffix {
    background: var(--bx-surface-2) !important;
    color: var(--bx-text-2) !important;
    border-color: var(--bx-border-2) !important;
}
html body:not(#bx) label,
html body:not(#bx) .form-label,
html body:not(#bx) .input-label { color: var(--bx-text-2) !important; }
html body:not(#bx) .form-check-input { background-color: var(--bx-input-bg) !important; border-color: var(--bx-border-2) !important; }
html body:not(#bx) .form-check-input:checked { background-color: var(--bx-accent) !important; border-color: var(--bx-accent) !important; }

html body:not(#bx) .nice-select .list,
html body:not(#bx) .dropdown-menu {
    background: var(--bx-surface-2) !important;
    border: 1px solid var(--bx-border-2) !important;
    box-shadow: var(--bx-shadow) !important;
}
html body:not(#bx) .nice-select .option,
html body:not(#bx) .dropdown-item { color: var(--bx-text-2) !important; background: transparent !important; }
html body:not(#bx) .nice-select .option:hover,
html body:not(#bx) .nice-select .option.focus,
html body:not(#bx) .nice-select .option.selected.focus,
html body:not(#bx) .dropdown-item:hover,
html body:not(#bx) .dropdown-item:focus { background: var(--bx-tint-2) !important; color: var(--bx-text) !important; }
html body:not(#bx) .nice-select .current { color: var(--bx-text) !important; }

/* -------------------------------------------------------------------------
   5. GENERIC COMPONENTS (bootstrap + legacy)
   ------------------------------------------------------------------------- */
html body:not(#bx) .card,
html body:not(#bx) .modal-content,
html body:not(#bx) .accordion-item,
html body:not(#bx) .list-group-item,
html body:not(#bx) .offcanvas,
html body:not(#bx) .popover,
html body:not(#bx) .toast {
    background: var(--bx-surface) !important;
    color: var(--bx-text) !important;
    border-color: var(--bx-border) !important;
}
html body:not(#bx) .modal-header,
html body:not(#bx) .modal-footer,
html body:not(#bx) .card-header,
html body:not(#bx) .card-footer { border-color: var(--bx-border) !important; background: transparent !important; color: var(--bx-text) !important; }
html body:not(#bx) .btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: .7; }
html body:not(.dark-theme) .btn-close { filter: none; }
html body:not(#bx) .modal-backdrop.show { opacity: .72; }

html body:not(#bx) .table,
html body:not(#bx) table { color: var(--bx-text) !important; --bs-table-bg: transparent; --bs-table-color: var(--bx-text); border-color: var(--bx-border) !important; }
html body:not(#bx) .table > :not(caption) > * > * { background-color: transparent !important; color: inherit !important; border-color: var(--bx-border) !important; box-shadow: none !important; }
html body:not(#bx) .table thead th,
html body:not(#bx) table thead th { color: var(--bx-text-3) !important; font-weight: 600 !important; }
html body:not(#bx) .table-hover > tbody > tr:hover > * { background: var(--bx-tint) !important; }

html body:not(#bx) .page-link {
    background: var(--bx-surface) !important;
    border-color: var(--bx-border) !important;
    color: var(--bx-text-2) !important;
}
html body:not(#bx) .page-item.active .page-link {
    background: var(--bx-accent) !important;
    border-color: var(--bx-accent) !important;
    color: #fff !important;
}
html body:not(#bx) .page-item.disabled .page-link { color: var(--bx-text-3) !important; opacity: .6; }

html body:not(#bx) .alert { border-color: var(--bx-border) !important; }
html body:not(#bx) .alert-success { background: var(--bx-success-soft) !important; color: var(--bx-success-ink) !important; }
html body:not(#bx) .alert-danger { background: var(--bx-danger-soft) !important; color: var(--bx-danger-ink) !important; }
html body:not(#bx) .alert-warning { background: var(--bx-warn-soft) !important; color: var(--bx-warn-ink) !important; }
html body:not(#bx) .alert-info,
html body:not(#bx) .alert-primary { background: var(--bx-accent-soft) !important; color: var(--bx-accent-ink) !important; }

html body:not(#bx) .badge.bg-primary,
html body:not(#bx) .badge-primary { background: var(--bx-accent) !important; color: #fff !important; }
html body:not(#bx) .badge.bg-success,
html body:not(#bx) .badge-success { background: var(--bx-success-soft) !important; color: var(--bx-success-ink) !important; }
html body:not(#bx) .badge.bg-danger,
html body:not(#bx) .badge-danger { background: var(--bx-danger-soft) !important; color: var(--bx-danger-ink) !important; }
html body:not(#bx) .badge.bg-warning,
html body:not(#bx) .badge-warning,
html body:not(#bx) .badge-pending { background: var(--bx-warn-soft) !important; color: var(--bx-warn-ink) !important; }

html body:not(#bx) .nav-pills .nav-link { color: var(--bx-text-2) !important; }
html body:not(#bx) .nav-pills .nav-link.active,
html body:not(#bx) .nav-pills .show > .nav-link { background: var(--bx-accent) !important; color: #fff !important; }

html body:not(#bx) .progress { background: var(--bx-surface-3) !important; }
html body:not(#bx) .progress-bar { background: linear-gradient(90deg, var(--bx-accent), var(--bx-gold)) !important; }

/* Notification toasts (laravel-notify / simple-notify) */
html body:not(#bx) .notify { font-family: var(--bx-font) !important; }

/* DataTables chrome */
html body:not(#bx) .dataTables_wrapper .dataTables_length,
html body:not(#bx) .dataTables_wrapper .dataTables_filter,
html body:not(#bx) .dataTables_wrapper .dataTables_info,
html body:not(#bx) .dataTables_wrapper .dataTables_paginate { color: var(--bx-text-2) !important; }
html body:not(#bx) .dataTables_wrapper .paginate_button { color: var(--bx-text-2) !important; }
html body:not(#bx) .dataTables_wrapper .paginate_button.current,
html body:not(#bx) .dataTables_wrapper .paginate_button.current:hover {
    background: var(--bx-accent) !important;
    border-color: var(--bx-accent) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   6. PUBLIC HEADER — black bar, gold-ringed logo, live ticker below
   ------------------------------------------------------------------------- */
html body:not(#bx) .nv-header {
    background: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.9) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    transition: box-shadow .2s ease !important;
}
html body:not(#bx) .nv-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 78px !important;
    height: auto !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}
html body:not(#bx) .nv-logo { display: inline-flex !important; align-items: center !important; text-decoration: none !important; }
html body:not(#bx) .nv-logo img { height: 46px !important; width: auto !important; max-width: 180px !important; object-fit: contain; }
html body:not(#bx) .nv-logo-text,
html body:not(#bx) .nv-footer-logo-text {
    font-family: var(--bx-font) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: .02em !important;
    background: linear-gradient(135deg, #ffe08a 0%, var(--bx-gold) 50%, #c98b06 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: var(--bx-gold-ink) !important;
    text-transform: uppercase;
}

/* Desktop: the collapse wrapper must be visible (it was hidden by Bootstrap's
   `.collapse:not(.show)` which removed the whole menu on desktop). */
@media (min-width: 992px) {
    html body:not(#bx) .nv-collapse,
    html body:not(#bx) .nv-collapse.collapse:not(.show) {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
    }
    html body:not(#bx) .nv-menu { margin: 0 auto !important; }
}

html body:not(#bx) .nv-menu { display: flex !important; align-items: center !important; gap: 2px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body:not(#bx) .nv-menu li a {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    text-transform: uppercase;
    letter-spacing: .04em !important;
}
html body:not(#bx) .nv-menu li a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.07) !important; }
html body:not(#bx) .nv-menu li a.active { color: var(--bx-gold-ink) !important; background: rgba(243, 186, 47, 0.10) !important; }

html body:not(#bx) .nv-actions { display: flex !important; align-items: center !important; gap: 10px !important; }
html body:not(#bx) .nv-lang-select {
    background-color: #0d0d14 !important;
    color: #e8e9f3 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    height: 38px !important;
    border-radius: 8px !important;
}
html body:not(#bx) .nv-header .nv-btn-outline {
    color: #fff !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}
html body:not(#bx) .nv-header .nv-btn-outline:hover { border-color: var(--bx-gold) !important; color: var(--bx-gold-ink) !important; }
html body:not(#bx) .nv-header .nv-btn { padding: 10px 18px !important; border-radius: 8px !important; font-size: 14px !important; }

/* Hamburger — three white bars like the reference */
html body:not(#bx) .nv-toggle {
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
}
html body:not(#bx) .nv-toggle span { width: 28px !important; height: 3px !important; border-radius: 2px !important; background: #fff !important; transition: transform .2s, opacity .2s !important; display: block !important; }
html body:not(#bx) .nv-toggle span { position: relative !important; left: auto !important; top: auto !important; transform-origin: center !important; margin: 0 !important; }
html body:not(#bx) .nv-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg) !important; }
html body:not(#bx) .nv-toggle.open span:nth-child(2) { opacity: 0 !important; transform: none !important; }
html body:not(#bx) .nv-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg) !important; }

@media (max-width: 991.98px) {
    html body:not(#bx) .nv-toggle { display: inline-flex !important; }
    html body:not(#bx) .nv-collapse { width: 100% !important; flex-basis: 100% !important; }
    html body:not(#bx) .nv-collapse.show,
    html body:not(#bx) .nv-collapse.collapsing {
        background: #000 !important;
        padding: 6px 0 18px !important;
    }
    html body:not(#bx) .nv-menu { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
    html body:not(#bx) .nv-menu li a { display: block !important; padding: 14px 4px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 0 !important; }
    html body:not(#bx) .nv-actions { flex-wrap: wrap !important; padding-top: 14px !important; justify-content: stretch !important; }
    html body:not(#bx) .nv-menu li a { padding-left: 8px !important; padding-right: 8px !important; }
    html body:not(#bx) .nv-actions .nv-btn { flex: 1 1 auto !important; }
    html body:not(#bx) .nv-lang-select { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
}

/* Live ticker strip under the header */
.bx-ticker {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    min-height: 46px;
    overflow: hidden;
}
html body.dark-theme .bx-ticker { background: #07080f; border-bottom-color: rgba(255, 255, 255, 0.06); }
.bx-ticker .tradingview-widget-copyright { display: none !important; }

/* Floating WhatsApp button */
.bx-whatsapp {
    position: fixed;
    left: 18px;
    bottom: 22px;
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.7);
    text-decoration: none !important;
    transition: transform .2s;
}
.bx-whatsapp:hover { transform: scale(1.07); color: #fff !important; }

/* -------------------------------------------------------------------------
   7. HOMEPAGE (.hn) — dark navy / starfield sections
   ------------------------------------------------------------------------- */
html body:not(#bx) .hn {
    --hn-bg: var(--bx-bg);
    --hn-bg-alt: var(--bx-bg-2);
    --hn-surface: var(--bx-surface);
    --hn-border: var(--bx-border-2);
    --hn-border-soft: var(--bx-border);
    --hn-ink: var(--bx-text);
    --hn-ink-2: var(--bx-text-2);
    --hn-ink-3: var(--bx-text-3);
    --hn-accent: var(--bx-accent);
    --hn-accent-hover: var(--bx-accent-light);
    --hn-accent-ink: var(--bx-accent-ink);
    --hn-accent-soft: var(--bx-accent-soft);
    --hn-font: var(--bx-font);
    background: var(--bx-bg) !important;
    color: var(--bx-text) !important;
    font-family: var(--bx-font) !important;
}

html body:not(#bx) .hn-section {
    position: relative;
    background: var(--bx-bg) !important;
    padding: 96px 0 !important;
}
html body:not(#bx) .hn-section + .hn-section:not(.hn-section--tint):not(.hn-section--stars) {
    border-top: 1px solid var(--bx-border);
}

/* Deep navy band — like the "MITX TRADE FIRM" block in the reference */
html body:not(#bx) .hn-section--tint {
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(101, 115, 255, 0.22) 0%, transparent 60%),
        linear-gradient(160deg, var(--bx-navy) 0%, #0b0b3d 100%) !important;
    color: #fff !important;
}
html body:not(#bx) .hn-section--tint .hn-title,
html body:not(#bx) .hn-section--tint h4 { color: #fff !important; }
html body:not(#bx) .hn-section--tint .hn-sub,
html body:not(#bx) .hn-section--tint p { color: rgba(255, 255, 255, 0.78) !important; }
html body:not(#bx) .hn-section--tint .hn-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(4px);
}

/* Starfield band for the big counters */
html body:not(#bx) .hn-section--stars,
html body:not(#bx) .hn-hero {
    background-color: #03040a !important;
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(1.5px 1.5px at 200px 150px, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(1px 1px at 60px 190px, rgba(255,255,255,.45), transparent 60%),
        radial-gradient(1px 1px at 250px 40px, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1.2px 1.2px at 170px 230px, rgba(255,255,255,.5), transparent 60%) !important;
    background-size: 280px 260px !important;
    background-repeat: repeat !important;
    color: #fff !important;
}

/* Section heads with the short underline bar from the reference */
html body:not(#bx) .hn-head { margin-bottom: 52px !important; }
html body:not(#bx) .hn-eyebrow {
    display: inline-block !important;
    color: var(--bx-gold-ink) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}
html body:not(#bx) .hn-title {
    color: var(--bx-text) !important;
    font-weight: 700 !important;
    font-size: clamp(28px, 3.4vw, 42px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
    text-transform: none;
}
html body:not(#bx) .hn-head .hn-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 4px;
    margin: 22px 0 0;
    background: linear-gradient(90deg, var(--bx-gold), var(--bx-accent-light));
}
html body:not(#bx) .hn-head.is-center .hn-title::after { margin-left: auto; margin-right: auto; }
html body:not(#bx) .hn-sub { color: var(--bx-text-2) !important; }

/* Cards */
html body:not(#bx) .hn-card {
    background: var(--bx-surface) !important;
    border: 1px solid var(--bx-border) !important;
    border-radius: var(--bx-radius) !important;
    box-shadow: var(--bx-shadow-sm) !important;
    color: var(--bx-text) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
html body:not(#bx) .hn-card:hover {
    transform: translateY(-4px);
    border-color: rgba(243, 186, 47, 0.45) !important;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(243, 186, 47, 0.12) !important;
}
html body:not(#bx) .hn-card h4,
html body:not(#bx) .hn-feat h4,
html body:not(#bx) .hn-step h4 {
    color: var(--bx-text) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 16px !important;
}
html body:not(#bx) .hn-card p,
html body:not(#bx) .hn-feat p,
html body:not(#bx) .hn-step p { color: var(--bx-text-2) !important; line-height: 1.75 !important; }
html body:not(#bx) .hn-feat,
html body:not(#bx) .hn-step { text-align: center !important; padding: 34px 26px !important; }
html body:not(#bx) .hn-ficon {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    margin: 0 auto 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: radial-gradient(circle at 30% 30%, rgba(243, 186, 47, 0.25), rgba(61, 76, 245, 0.18)) !important;
    border: 1px solid rgba(243, 186, 47, 0.35) !important;
    color: var(--bx-gold-ink) !important;
}
html body:not(#bx) .hn-ficon img { width: 38px !important; height: 38px !important; object-fit: contain; }
html body:not(#bx) .hn-ficon i { font-size: 30px !important; color: var(--bx-gold-ink) !important; }

/* Numbered steps with the big faded number in the corner */
html body:not(#bx) .hn-step { position: relative !important; overflow: hidden !important; }
html body:not(#bx) .hn-step-num {
    position: absolute !important;
    top: 10px !important;
    right: 18px !important;
    left: auto !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--bx-text) !important;
    opacity: .08 !important;
    background: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Hero */
html body:not(#bx) .hn-hero {
    position: relative !important;
    padding: 120px 0 110px !important;
    overflow: hidden !important;
}
html body:not(#bx) .hn-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 70% at 85% 20%, rgba(61, 76, 245, 0.35) 0%, transparent 65%),
        radial-gradient(45% 60% at 10% 90%, rgba(243, 186, 47, 0.16) 0%, transparent 65%);
    pointer-events: none;
}
html body:not(#bx) .hn-hero > * { position: relative; z-index: 1; }
html body:not(#bx) .hn-hero-copy h1 {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: clamp(36px, 5.2vw, 64px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
}
html body:not(#bx) .hn-hero-copy p { color: rgba(255, 255, 255, 0.78) !important; font-size: 18px !important; line-height: 1.7 !important; }
html body:not(#bx) .hn-hero-pill {
    background: rgba(243, 186, 47, 0.12) !important;
    color: var(--bx-gold-ink) !important;
    border: 1px solid rgba(243, 186, 47, 0.35) !important;
}
html body:not(#bx) .hn-dot { background: var(--bx-gold) !important; }
html body:not(#bx) .hn-hero-btns .hn-btn--ghost {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
html body:not(#bx) .hn-hero-btns .hn-btn--ghost:hover { border-color: var(--bx-gold) !important; color: var(--bx-gold-ink) !important; }
html body:not(#bx) .hn-hero-visual img { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6)); }
html body:not(#bx) .hn-btn { border-radius: 10px !important; padding: 14px 26px !important; font-size: 15px !important; }

/* Counters — huge white numbers on starfield */
html body:not(#bx) .hn-counter {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}
html body:not(#bx) .hn-counter img { filter: brightness(0) invert(1); opacity: .9; height: 34px !important; width: auto !important; }
html body:not(#bx) .hn-counter h3,
html body:not(#bx) .hn-counter .count {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: clamp(34px, 4.5vw, 52px) !important;
    letter-spacing: -0.01em !important;
}
html body:not(#bx) .hn-counter p {
    color: rgba(255, 255, 255, 0.82) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 500 !important;
}

/* Plans */
html body:not(#bx) .hn-plan { padding: 30px 26px !important; text-align: left; }
html body:not(#bx) .hn-plan.is-featured {
    border-color: rgba(243, 186, 47, 0.6) !important;
    background:
        linear-gradient(180deg, rgba(243, 186, 47, 0.08), transparent 45%),
        var(--bx-surface) !important;
}
html body:not(#bx) .hn-plan-badge { background: var(--bx-gold) !important; color: #14110a !important; font-weight: 700 !important; }
html body:not(#bx) .hn-plan-icon { background: var(--bx-accent-soft) !important; border-radius: 12px !important; }
html body:not(#bx) .hn-plan-name { color: var(--bx-text) !important; text-transform: uppercase; letter-spacing: .04em; }
html body:not(#bx) .hn-plan-price .amt { color: var(--bx-gold-ink) !important; font-weight: 700 !important; }
html body:not(#bx) .hn-plan-period { color: var(--bx-text-2) !important; }
html body:not(#bx) .hn-plan-feats li { border-color: var(--bx-border) !important; color: var(--bx-text-2) !important; }
html body:not(#bx) .hn-plan-feats li strong { color: var(--bx-text) !important; }
html body:not(#bx) .hn-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--bx-border-2);
    border-radius: var(--bx-radius);
    color: var(--bx-text-2);
    background: var(--bx-surface);
}
html body:not(#bx) .hn-empty i { font-size: 30px; color: var(--bx-gold-ink); display: block; margin-bottom: 10px; }

/* Calculator */
html body:not(#bx) .hn-calc-wrap {
    background: var(--bx-surface) !important;
    border: 1px solid var(--bx-border) !important;
    border-radius: var(--bx-radius-lg) !important;
}
html body:not(#bx) .hn-field label { color: var(--bx-text-2) !important; }
html body:not(#bx) .hn-calc-cell { background: var(--bx-surface-2) !important; border-color: var(--bx-border) !important; }
html body:not(#bx) .hn-calc-cell span { color: var(--bx-text-3) !important; }
html body:not(#bx) .hn-calc-cell strong { color: var(--bx-text) !important; }
html body:not(#bx) .hn-calc-cell strong.is-profit { color: var(--bx-success-ink) !important; }
html body:not(#bx) .hn-calc-cell strong.is-accent { color: var(--bx-gold-ink) !important; }

/* Live investors / withdraws */
html body:not(#bx) .hn-live-title { color: var(--bx-text) !important; }
html body:not(#bx) .hn-live-dot { background: var(--bx-success) !important; box-shadow: 0 0 0 4px var(--bx-success-soft) !important; }
html body:not(#bx) .hn-live-row { border-color: var(--bx-border) !important; }
html body:not(#bx) .hn-live-av { background: var(--bx-accent-soft) !important; color: var(--bx-accent-ink) !important; }
html body:not(#bx) .hn-live-av.is-out { background: var(--bx-gold-soft) !important; color: var(--bx-gold-ink) !important; }
html body:not(#bx) .hn-live-meta strong { color: var(--bx-text) !important; }
html body:not(#bx) .hn-live-meta span { color: var(--bx-text-3) !important; }
html body:not(#bx) .hn-live-amt strong { color: var(--bx-text) !important; }
html body:not(#bx) .hn-live-amt .gain { color: var(--bx-success-ink) !important; }
html body:not(#bx) .hn-chip { background: var(--bx-tint-2) !important; color: var(--bx-text-2) !important; }
html body:not(#bx) .hn-chip.is-success { background: var(--bx-success-soft) !important; color: var(--bx-success-ink) !important; }
html body:not(#bx) .hn-chip.is-warn { background: var(--bx-warn-soft) !important; color: var(--bx-warn-ink) !important; }
html body:not(#bx) .hn-chip.is-danger { background: var(--bx-danger-soft) !important; color: var(--bx-danger-ink) !important; }

/* FAQ */
html body:not(#bx) .hn-acc-item {
    background: var(--bx-surface) !important;
    border: 1px solid var(--bx-border) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: hidden;
}
html body:not(#bx) .hn-acc-btn {
    color: var(--bx-text) !important;
    background: transparent !important;
    font-weight: 600 !important;
    padding: 18px 22px !important;
}
html body:not(#bx) .hn-acc-btn::after { color: var(--bx-gold-ink) !important; border-color: var(--bx-gold) !important; }
html body:not(#bx) .hn-acc-btn:not(.collapsed) { color: var(--bx-gold-ink) !important; }
html body:not(#bx) .hn-acc-body { color: var(--bx-text-2) !important; padding: 0 22px 20px !important; }

/* CTA band */
html body:not(#bx) .hn-cta-panel {
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(243, 186, 47, 0.22) 0%, transparent 60%),
        linear-gradient(135deg, var(--bx-navy-2) 0%, var(--bx-navy) 60%, #07072a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--bx-radius-lg) !important;
    color: #fff !important;
    box-shadow: var(--bx-shadow) !important;
}
html body:not(#bx) .hn-cta-panel h2 { color: #fff !important; }
html body:not(#bx) .hn-cta-panel p { color: rgba(255, 255, 255, 0.8) !important; }

/* Blog */
html body:not(#bx) .hn-blog { background: var(--bx-surface) !important; border-color: var(--bx-border) !important; }
html body:not(#bx) .hn-blog-img { background: var(--bx-surface-3) !important; }
html body:not(#bx) .hn-blog-date { color: var(--bx-text-3) !important; }
html body:not(#bx) .hn-blog-body h4 a { color: var(--bx-text) !important; text-transform: none; }
html body:not(#bx) .hn-blog-body h4 a:hover { color: var(--bx-gold-ink) !important; }
html body:not(#bx) .hn-blog-link { color: var(--bx-gold-ink) !important; }

/* Payment gateways: logos are dark artwork, keep them on light chips */
html body:not(#bx) .hn-gw {
    background: #f4f5fb !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}
html body:not(#bx) .hn-gw img { filter: none !important; opacity: .92; }

/* Newsletter */
html body:not(#bx) .hn-news-form input {
    background: var(--bx-input-bg) !important;
    color: var(--bx-text) !important;
    border: 1px solid var(--bx-border-2) !important;
}
html body:not(#bx) .hn-news-form button {
    background: linear-gradient(135deg, var(--bx-accent), var(--bx-accent-deep)) !important;
    color: #fff !important;
    border: 0 !important;
}

/* Broken/missing images: show a neutral block instead of the browser glyph */
html body:not(#bx) img.bx-img-missing { visibility: hidden; }

/* -------------------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------------------- */
html body:not(#bx) .nv-footer {
    background: #000 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 72px !important;
}
html body:not(#bx) .nv-footer h5 {
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 14px !important;
    margin-bottom: 18px !important;
}
html body:not(#bx) .nv-footer h5::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    margin-top: 10px;
    background: var(--bx-gold);
}
html body:not(#bx) .nv-footer p,
html body:not(#bx) .nv-footer-about p { color: rgba(255, 255, 255, 0.66) !important; line-height: 1.75 !important; }
html body:not(#bx) .nv-footer-links a { color: rgba(255, 255, 255, 0.66) !important; text-decoration: none !important; }
html body:not(#bx) .nv-footer-links a:hover { color: var(--bx-gold-ink) !important; }
html body:not(#bx) .nv-footer-logo { max-height: 50px !important; width: auto !important; }
html body:not(#bx) .nv-footer-socials a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html body:not(#bx) .nv-footer-socials a:hover { background: var(--bx-gold) !important; color: #14110a !important; }
html body:not(#bx) .nv-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}
html body:not(#bx) .nv-footer-bottom p { color: rgba(255, 255, 255, 0.5) !important; }

/* Cookie banner */
html body:not(#bx) .cookiealert,
html body:not(#bx) .cookie-alert,
html body:not(#bx) .cookies-card {
    background: var(--bx-surface-2) !important;
    color: var(--bx-text) !important;
    border: 1px solid var(--bx-border-2) !important;
    box-shadow: var(--bx-shadow) !important;
}
html body:not(#bx) .cookiealert a,
html body:not(#bx) .cookies-card a { color: var(--bx-gold-ink) !important; }

/* Back-to-top button */
html body:not(#bx) #scrollUp {
    background: var(--bx-accent) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

/* -------------------------------------------------------------------------
   9. RESPONSIVE TWEAKS FOR THE HOME PAGE
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    html body:not(#bx) .hn-section { padding: 64px 0 !important; }
    html body:not(#bx) .hn-hero { padding: 80px 0 72px !important; text-align: center; }
    html body:not(#bx) .hn-hero-btns { justify-content: center !important; }
    html body:not(#bx) .hn-head { margin-bottom: 36px !important; }
    html body:not(#bx) .hn-counter-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
    html body:not(#bx) .nv-logo img { height: 40px !important; }
}

/* -------------------------------------------------------------------------
   10. AUTH PAGES (login / register / forgot / reset / 2FA / verify)
   ------------------------------------------------------------------------- */
html body:not(#bx) .cr-auth-brand {
    background-color: #03040a !important;
    background-image:
        radial-gradient(60% 50% at 100% 0%, rgba(61, 76, 245, 0.35) 0%, transparent 65%),
        radial-gradient(50% 45% at 0% 100%, rgba(243, 186, 47, 0.18) 0%, transparent 65%),
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.8), transparent 60%),
        radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 200px 150px, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1px 1px at 60px 190px, rgba(255,255,255,.45), transparent 60%) !important;
    background-size: 100% 100%, 100% 100%, 260px 240px, 260px 240px, 260px 240px, 260px 240px !important;
    color: #fff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
html body:not(#bx) .cr-auth-brand-hero h1 { color: #fff !important; font-weight: 700 !important; }
html body:not(#bx) .cr-auth-brand-hero h1 em {
    color: var(--bx-gold-ink) !important;
    font-style: normal !important;
    font-family: var(--bx-font) !important;
}
html body:not(#bx) .cr-auth-brand-hero p,
html body:not(#bx) .cr-auth-brand-foot { color: rgba(255, 255, 255, 0.72) !important; }
html body:not(#bx) .cr-auth-brand-foot strong { color: #fff !important; }
html body:not(#bx) .cr-auth-brand-top span,
html body:not(#bx) .cr-auth-brand-top .auth-logo-text {
    color: var(--bx-gold-ink) !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}
html body:not(#bx) .cr-auth-brand-top img { max-height: 42px !important; width: auto !important; }
html body:not(#bx) .cr-auth-form-head h2,
html body:not(#bx) .cr-auth-form-head h1,
html body:not(#bx) .cr-auth-form-head h3 { color: var(--bx-text) !important; }
html body:not(#bx) .cr-auth-form a,
html body:not(#bx) .cr-auth-foot a { color: var(--bx-gold-ink) !important; }
html body:not(#bx) .cr-auth-form .cr-btn,
html body:not(#bx) .cr-auth-form button[type="submit"] { color: #fff !important; }

/* -------------------------------------------------------------------------
   11. USER DASHBOARD
   ------------------------------------------------------------------------- */
/* Wallet hero: deep navy with gold glow instead of sky blue */
html body:not(#bx) .np-wallets-gradient,
html body:not(#bx) .cr-balance-card,
html body:not(#bx) .cr-card.cr-balance-card {
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(243, 186, 47, 0.28) 0%, transparent 55%),
        radial-gradient(60% 120% at 0% 100%, rgba(101, 115, 255, 0.35) 0%, transparent 60%),
        linear-gradient(135deg, #1b1b86 0%, #12125e 55%, #090935 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 40px -18px rgba(18, 18, 94, 0.9) !important;
}
html body:not(#bx) .np-wallets-gradient .np-wallet-label,
html body:not(#bx) .cr-balance-card .cr-balance-label { color: rgba(255, 255, 255, 0.78) !important; }
html body:not(#bx) .np-wallets-gradient .np-wallet-value,
html body:not(#bx) .cr-balance-card .cr-balance-amount { color: #fff !important; }
html body:not(#bx) .np-wallets-gradient .np-wallet-value::first-letter { color: var(--bx-gold-ink); }

/* Card titles: white with a short gold bar */
html body:not(#bx) .np-card-title,
html body:not(#bx) .neo-card-title,
html body:not(#bx) .cr-card-title,
html body:not(#bx) .site-card .site-card-header .title,
html body:not(#bx) .site-card .site-card-header h3,
html body:not(#bx) .site-card .site-card-header h5 {
    color: var(--bx-text) !important;
    font-weight: 600 !important;
}
html body:not(#bx) .np-card-title::after,
html body:not(#bx) .site-card .site-card-header .title::after {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    margin-top: 8px;
    background: var(--bx-gold);
}

/* Quick links */
html body:not(#bx) .np-quicklink {
    background: var(--bx-surface-2) !important;
    border: 1px solid var(--bx-border) !important;
    color: var(--bx-text) !important;
}
html body:not(#bx) .np-quicklink:hover { border-color: rgba(243, 186, 47, 0.5) !important; }
html body:not(#bx) .np-quicklink-label { color: var(--bx-text) !important; }
html body:not(#bx) .np-quicklink-icon { background: var(--bx-gold-soft) !important; color: var(--bx-gold-ink) !important; }
html body:not(#bx) .np-quicklink-icon svg,
html body:not(#bx) .np-quicklink-icon i { color: var(--bx-gold-ink) !important; stroke: var(--bx-gold) !important; }

/* Generic dashboard cards */
html body:not(#bx) .np-card,
html body:not(#bx) .site-card,
html body:not(#bx) .cr-card:not(.cr-balance-card),
html body:not(#bx) .neo-chart-card,
html body:not(#bx) .neo-portfolio-card {
    background: var(--bx-surface) !important;
    border: 1px solid var(--bx-border) !important;
    color: var(--bx-text) !important;
}

/* Dashboard top bar & drawer */
html body:not(#bx) .panel-layout .panel-header,
html body:not(#bx) .panel-layout .panel-header .nav-wrap {
    background: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body:not(#bx):not(.dark-theme) .panel-layout .panel-header,
html body:not(#bx):not(.dark-theme) .panel-layout .panel-header .nav-wrap {
    background: var(--bx-surface) !important;
    border-bottom-color: var(--bx-border) !important;
}
html body:not(#bx) .panel-layout .side-nav,
html body:not(#bx) .side-nav {
    background: var(--bx-surface) !important;
    border-right: 1px solid var(--bx-border) !important;
}
html body:not(#bx) .side-nav .side-nav-item a,
html body:not(#bx) .side-nav-menu li a { color: var(--bx-text-2) !important; }
html body:not(#bx) .side-nav .side-nav-item.active > a,
html body:not(#bx) .side-nav .side-nav-item a:hover,
html body:not(#bx) .side-nav-menu li.active > a {
    color: var(--bx-gold-ink) !important;
    background: var(--bx-gold-soft) !important;
}
html body:not(#bx) .side-nav .side-nav-item.active > a svg,
html body:not(#bx) .side-nav .side-nav-item.active > a i { color: var(--bx-gold-ink) !important; stroke: var(--bx-gold) !important; }

/* Status text helpers used throughout transaction lists */
html body:not(#bx) .green-color { color: var(--bx-success-ink) !important; }
html body:not(#bx) .red-color { color: var(--bx-danger-ink) !important; }
/* Status badges: soft tinted pill + matching ink (never solid-on-same-hue) */
html body:not(#bx) .site-badge { border: 1px solid transparent !important; }
html body:not(#bx) .site-badge.success,
html body:not(#bx) .site-badge.badge-success { background: var(--bx-success-soft) !important; color: var(--bx-success-ink) !important; border-color: rgba(22, 199, 132, 0.35) !important; }
html body:not(#bx) .site-badge.failed,
html body:not(#bx) .site-badge.canceled,
html body:not(#bx) .site-badge.badge-danger { background: var(--bx-danger-soft) !important; color: var(--bx-danger-ink) !important; border-color: rgba(234, 57, 67, 0.35) !important; }
html body:not(#bx) .site-badge.pending,
html body:not(#bx) .site-badge.badge-pending,
html body:not(#bx) .site-badge.warnning,
html body:not(#bx) .site-badge.badge-warning { background: var(--bx-warn-soft) !important; color: var(--bx-warn-ink) !important; border-color: rgba(245, 158, 11, 0.35) !important; }
html body:not(#bx) .site-badge.primary-bg,
html body:not(#bx) .site-badge.info { background: var(--bx-accent-soft) !important; color: var(--bx-accent-ink) !important; }

/* Plan price pill on the "All Schema" page */
html body:not(#bx) .single-investment-plan .special {
    background: linear-gradient(135deg, var(--bx-accent), var(--bx-accent-deep)) !important;
    color: #fff !important;
}
html body:not(#bx) .single-investment-plan .feature-plan,
html body:not(#bx) .single-investment-plan .holidays { color: var(--bx-gold-ink) !important; }

/* Gold label on the About page image */
html body:not(#bx) .about-img .content {
    background: linear-gradient(135deg, #ffd66b, var(--bx-gold)) !important;
    color: #14110a !important;
}

/* Chart.js canvases sit on dark cards */
html body:not(#bx) canvas { color-scheme: normal; }

/* -------------------------------------------------------------------------
   12. NAVY BANDS stay dark in BOTH modes, so their content is always light.
   (Higher specificity than the generic .hn-card rules above.)
   ------------------------------------------------------------------------- */
html body:not(#bx) .hn .hn-section--tint .hn-card,
html body:not(#bx) .hn .hn-section--tint .hn-blog {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html body:not(#bx) .hn .hn-section--tint .hn-card h4,
html body:not(#bx) .hn .hn-section--tint .hn-card h4 a,
html body:not(#bx) .hn .hn-section--tint .hn-blog-body h4 a,
html body:not(#bx) .hn .hn-section--tint .hn-title { color: #fff !important; }
html body:not(#bx) .hn .hn-section--tint .hn-card p,
html body:not(#bx) .hn .hn-section--tint .hn-blog-date,
html body:not(#bx) .hn .hn-section--tint .hn-field label { color: rgba(255, 255, 255, 0.74) !important; }
html body:not(#bx) .hn .hn-section--tint .hn-blog-link,
html body:not(#bx) .hn .hn-section--tint .hn-blog-body h4 a:hover { color: var(--bx-gold-ink) !important; }
/* The calculator lives in a navy band: give it its own dark panel */
html body:not(#bx) .hn .hn-section--tint .hn-calc-wrap .hn-card {
    background: rgba(5, 6, 20, 0.55) !important;
}
html body:not(#bx) .hn .hn-section--tint .hn-input,
html body:not(#bx) .hn .hn-section--tint .hn-select {
    background-color: rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
html body:not(#bx) .hn .hn-section--tint .hn-input-suffix {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
html body:not(#bx) .hn .hn-section--tint .hn-calc-cell { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; }
html body:not(#bx) .hn .hn-section--tint .hn-calc-cell span { color: rgba(255, 255, 255, 0.65) !important; }
html body:not(#bx) .hn .hn-section--tint .hn-calc-cell strong { color: #fff !important; }
html body:not(#bx) .hn .hn-section--tint .hn-calc-cell strong.is-profit { color: #3ee0a0 !important; }
html body:not(#bx) .hn .hn-section--tint .hn-calc-cell strong.is-accent { color: var(--bx-gold-ink) !important; }
/* Starfield bands: counters always white */
html body:not(#bx) .hn .hn-section--stars .hn-counter h3,
html body:not(#bx) .hn .hn-section--stars .hn-counter .count { color: #fff !important; }
html body:not(#bx) .hn .hn-section--stars .hn-counter p { color: rgba(255, 255, 255, 0.82) !important; }

/* -------------------------------------------------------------------------
   13. Areas that are dark in BOTH modes keep the bright gold for text.
   ------------------------------------------------------------------------- */
html body:not(#bx) .nv-header,
html body:not(#bx) .nv-footer,
html body:not(#bx) .bx-ticker,
html body:not(#bx) .hn-hero,
html body:not(#bx) .hn-section--tint,
html body:not(#bx) .hn-section--stars,
html body:not(#bx) .hn-cta-panel,
html body:not(#bx) .cr-auth-brand,
html body:not(#bx) .np-wallets-gradient,
html body:not(#bx) .cr-balance-card {
    --bx-gold-ink: #f7c94f;
}
/* Calculator wrapper inside the navy band */
html body:not(#bx) .hn .hn-section--tint .hn-calc-wrap {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html body:not(#bx) .single-investment-plan .feature-plan {
    background: var(--bx-gold-soft) !important;
    border: 1px solid rgba(243, 186, 47, 0.4) !important;
}

/* -------------------------------------------------------------------------
   14. MOBILE LAYOUT FIXES
   ------------------------------------------------------------------------- */
/* Homepage "Recent investors / withdraws": columns may shrink, rows wrap,
   so the cards never push the page wider than the phone screen. */
html body:not(#bx) .hn-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body:not(#bx) .hn-live-grid > *,
html body:not(#bx) .hn-live-meta { min-width: 0 !important; }
html body:not(#bx) .hn-live-meta strong,
html body:not(#bx) .hn-live-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 767.98px) {
    html body:not(#bx) .hn-live-grid { grid-template-columns: minmax(0, 1fr) !important; }
    html body:not(#bx) .hn-live-row { flex-wrap: wrap !important; }
    html body:not(#bx) .hn-live-meta { flex: 1 1 140px !important; }
    html body:not(#bx) .hn-live-amt { margin-left: auto !important; text-align: right !important; }
}

/* Dashboard list rows (tickets, withdraw accounts, transactions…):
   the legacy theme forced every row to 900px wide on phones, hiding the
   status badge and the action button off-screen. Stack them instead. */
@media (max-width: 855px) {
    html body:not(#bx) .site-transactions .single {
        min-width: 0 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 10px 12px !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: flex-start !important;
    }
    html body:not(#bx) .site-transactions .single .left {
        min-width: 0 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    html body:not(#bx) .site-transactions .single .left .content { min-width: 0 !important; flex: 1 1 auto !important; width: auto !important; }
    html body:not(#bx) .site-transactions .single .left .content .title {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        width: auto !important;
    }
    html body:not(#bx) .site-transactions .single .right {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: flex-start !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-left: 0 !important;
    }
}

/* Admin-written page/blog content: never wider than the screen */
html body:not(#bx) .frontend-editor-data,
html body:not(#bx) .blog-details,
html body:not(#bx) .hn-acc-body { overflow-wrap: anywhere; word-break: break-word; }
html body:not(#bx) .frontend-editor-data img,
html body:not(#bx) .blog-details img { max-width: 100% !important; height: auto !important; }
html body:not(#bx) .frontend-editor-data table { display: block; max-width: 100%; overflow-x: auto; }
html body:not(#bx) .frontend-editor-data,
html body:not(#bx) .frontend-editor-data p,
html body:not(#bx) .frontend-editor-data li { color: var(--bx-text-2) !important; }
html body:not(#bx) .frontend-editor-data h1, html body:not(#bx) .frontend-editor-data h2,
html body:not(#bx) .frontend-editor-data h3, html body:not(#bx) .frontend-editor-data h4,
html body:not(#bx) .frontend-editor-data strong { color: var(--bx-text) !important; }
html body:not(#bx) .frontend-editor-data a { color: var(--bx-gold-ink) !important; }

/* Dashboard "Recent Transactions" status pills (were hard-coded light pastels) */
html body:not(#bx) .np-txn-pill { border: 1px solid transparent !important; font-weight: 600 !important; }
html body:not(#bx) .np-txn-pill.is-success { background: var(--bx-success-soft) !important; color: var(--bx-success-ink) !important; border-color: rgba(22, 199, 132, 0.35) !important; }
html body:not(#bx) .np-txn-pill.is-pending { background: var(--bx-warn-soft) !important; color: var(--bx-warn-ink) !important; border-color: rgba(245, 158, 11, 0.35) !important; }
html body:not(#bx) .np-txn-pill.is-failed { background: var(--bx-danger-soft) !important; color: var(--bx-danger-ink) !important; border-color: rgba(234, 57, 67, 0.35) !important; }

/* Referral card: keep the illustration clear of the Copy button */
html body:not(#bx) .np-referral-card { position: relative; }
html body:not(#bx) .np-ref-form { position: relative; z-index: 2; }
html body:not(#bx) .np-ref-illustration { top: auto !important; bottom: 0 !important; width: 120px !important; max-width: 24% !important; z-index: 1; }
@media (min-width: 768px) {
    html body:not(#bx) .np-ref-form { max-width: calc(100% - 150px); }
}
/* Transaction "type" pills (no status class): solid accent with white text */
html body:not(#bx) .np-txn-pill:not(.is-success):not(.is-pending):not(.is-failed) {
    background: var(--bx-accent-soft) !important;
    color: var(--bx-accent-ink) !important;
    border: 1px solid rgba(101, 115, 255, 0.35) !important;
}