/* ==========================================================================
   Ai Agentz — 2026 redesign ("navy institutional" — ondo.finance inspired)
   Namespaced: .nx-* (public pages + standalone modules), .dx-* (dashboard),
   .sx-* (support). Loaded AFTER style.css — does not touch legacy classes.
   ========================================================================== */

:root {
  --nx-bg: #0a1224;
  --nx-bg2: #0e1930;
  --nx-panel: #12203c;
  --nx-panel2: #16274a;
  --nx-line: rgba(255, 255, 255, .08);
  --nx-line2: rgba(255, 255, 255, .14);
  --nx-ink: #f2eee4;
  --nx-muted: #93a0bd;
  --nx-gold: #c8a15a;
  --nx-gold-soft: rgba(200, 161, 90, .14);
  --nx-blue: #5b8def;
  --nx-green: #3ecf8e;
  --nx-red: #ef6a5b;
  --nx-amber: #e5b45a;
  --nx-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --nx-sans: 'Inter', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.nx-page {
  background: var(--nx-bg);
  color: var(--nx-ink);
  font-family: var(--nx-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.nx-page a { color: var(--nx-blue); }

.nx-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- buttons ---------- */
.nx-btn { display: inline-block; padding: 12px 26px; border-radius: 10px; font-weight: 600; font-size: 15px;
          text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all .18s;
          font-family: var(--nx-sans); }
.nx-page a.nx-btn-gold, .nx-btn-gold { background: var(--nx-gold); color: #131a2c; }
.nx-page a.nx-btn-gold:hover, .nx-btn-gold:hover { background: #d9b776; color: #131a2c; transform: translateY(-1px); }
.nx-page a.nx-btn-line, .nx-btn-line { border-color: var(--nx-line2); color: var(--nx-ink); background: transparent; }
.nx-page a.nx-btn-line:hover, .nx-btn-line:hover { border-color: var(--nx-gold); color: var(--nx-gold); }
.nx-page a.nx-btn-blue, .nx-btn-blue { background: var(--nx-blue); color: #fff; }
.nx-page a.nx-btn-blue:hover, .nx-btn-blue:hover { filter: brightness(1.1); color: #fff; }

/* ---------- nav ---------- */
.nx-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.nx-nav img.nx-logo { height: 40px; width: auto; border-radius: 8px; }
.nx-nav-links { display: flex; gap: 30px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nx-nav-links a { color: var(--nx-muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .18s; }
.nx-nav-links a:hover, .nx-nav-links a.nx-active { color: var(--nx-ink); }
.nx-nav-links a.nx-btn-gold { color: #131a2c; }
.nx-nav-links a.nx-btn-line { color: var(--nx-ink); }
.nx-burger { display: none; background: none; border: 1px solid var(--nx-line2); border-radius: 8px;
             font-size: 20px; padding: 4px 11px; cursor: pointer; color: var(--nx-ink); }

/* ---------- hero ---------- */
.nx-hero { padding: 90px 0 100px; background:
  radial-gradient(900px 500px at 85% 10%, rgba(91, 141, 239, .12), transparent 60%),
  radial-gradient(700px 420px at 10% 90%, rgba(200, 161, 90, .10), transparent 60%),
  linear-gradient(180deg, var(--nx-bg2) 0%, var(--nx-bg) 100%); }
.nx-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.nx-kicker { color: var(--nx-gold); font-weight: 600; font-size: 13px; letter-spacing: .16em;
             text-transform: uppercase; margin-bottom: 18px; }
.nx-h1 { font-family: var(--nx-serif); font-weight: 500; font-size: clamp(38px, 4.8vw, 58px);
         line-height: 1.1; letter-spacing: -.01em; color: var(--nx-ink); margin: 0; }
.nx-h1 em { font-style: italic; color: var(--nx-gold); }
.nx-lead { color: var(--nx-muted); font-size: 18px; margin: 22px 0 34px; max-width: 520px; }
.nx-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.nx-hero-img { text-align: center; position: relative; }
.nx-hero-img::before { content: ''; position: absolute; inset: 8% 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 161, 90, .18) 0%, transparent 65%); }
.nx-hero-img img { max-width: 330px; width: 100%; position: relative;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45)) drop-shadow(0 0 28px rgba(200, 161, 90, .12)); }

/* ---------- sections ---------- */
.nx-section { padding: 88px 0; }
.nx-h2 { font-family: var(--nx-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 42px);
         letter-spacing: -.01em; text-align: center; color: var(--nx-ink); margin: 0; }
.nx-sub { text-align: center; color: var(--nx-muted); max-width: 640px; margin: 16px auto 52px; font-size: 16px; }

/* ---------- plans ---------- */
.nx-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nx-plan { background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 18px;
           padding: 30px 24px; cursor: pointer; transition: all .18s; position: relative; }
.nx-plan:hover { transform: translateY(-4px); border-color: var(--nx-line2); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.nx-plan.nx-selected { border: 1px solid var(--nx-gold); box-shadow: 0 0 0 1px var(--nx-gold), 0 18px 40px rgba(200, 161, 90, .12); }
.nx-plan h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--nx-muted);
              margin: 0 0 4px; font-weight: 600; }
.nx-plan h3 input[type="radio"] { accent-color: var(--nx-gold); margin-right: 6px; }
.nx-plan .nx-pct { font-family: var(--nx-serif); font-size: 44px; font-weight: 500; color: var(--nx-gold);
                   margin: 10px 0 0; line-height: 1.05; }
.nx-plan .nx-per { color: var(--nx-muted); font-size: 13px; margin-bottom: 18px; }
.nx-plan ul { list-style: none; margin: 0 0 22px; padding: 0; }
.nx-plan li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
              font-size: 14px; padding: 9px 0; border-top: 1px solid var(--nx-line); }
.nx-plan li span:first-child { color: var(--nx-muted); }
.nx-plan li h6 { margin: 0; font-size: 14px; font-weight: 600; color: var(--nx-ink); display: inline; }
.nx-plan .nx-pick { text-align: center; padding: 11px; border-radius: 10px; font-weight: 600; font-size: 14px;
                    background: rgba(255, 255, 255, .05); color: var(--nx-ink); border: 1px solid var(--nx-line);
                    transition: all .18s; }
.nx-plan.nx-selected .nx-pick { background: var(--nx-gold); color: #131a2c; border-color: var(--nx-gold); }
.nx-plans-cta { text-align: center; margin-top: 44px; }
.nx-plans-cta .nx-btn { padding: 14px 38px; }

/* ---------- how it works ---------- */
.nx-how { background: var(--nx-bg2); border-top: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); }
.nx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nx-step { background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 18px; padding: 32px 28px; }
.nx-step .nx-n { width: 42px; height: 42px; border-radius: 12px; background: var(--nx-gold-soft);
                 color: var(--nx-gold); font-family: var(--nx-serif); font-size: 20px;
                 display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.nx-step h4 { font-size: 18px; margin: 0 0 10px; color: var(--nx-ink); font-weight: 700; }
.nx-step p { color: var(--nx-muted); font-size: 15px; margin: 0; }

/* ---------- footer ---------- */
.nx-footer { padding: 48px 0 34px; }
.nx-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.nx-foot img { height: 34px; width: auto; border-radius: 6px; }
.nx-foot-links a { color: var(--nx-muted); text-decoration: none; font-size: 14px; margin-left: 22px; transition: color .18s; }
.nx-foot-links a:hover { color: var(--nx-ink); }
.nx-copy { text-align: center; color: var(--nx-muted); font-size: 13px; margin-top: 30px; }
.nx-copy a { color: var(--nx-muted); text-decoration: none; }
.nx-copy a:hover { color: var(--nx-ink); }

/* ==========================================================================
   .dx-* — user dashboard (account area) overrides
   ========================================================================== */
body.dash-navy { background: var(--nx-bg); }
.dash-navy .layout-menu, .dash-navy .bg-menu-theme { background: var(--nx-bg2) !important; border-right: 1px solid var(--nx-line); }
.dash-navy .app-brand img { max-height: 42px; width: auto; max-width: 190px; }
.dash-navy .menu-inner .menu-item .menu-link { color: #d7deee !important; }
.dash-navy .menu-inner .menu-item.active .menu-link,
.dash-navy .menu-inner .menu-item .menu-link:hover { color: #ffffff !important; background: rgba(200, 161, 90, .14) !important; }
.dash-navy .content-footer, .dash-navy .content-footer a, .dash-navy footer, .dash-navy footer a { color: #9aa6c2 !important; }
.dash-navy .menu-item.active > .menu-link, .dash-navy .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: rgba(200, 161, 90, .16) !important; background-image: none !important; color: #ffffff !important; box-shadow: none !important; }
.dash-navy .layout-wrapper footer, .dash-navy .layout-wrapper footer *, .dash-navy .layout-footer, .dash-navy .layout-footer * { color: #9aa6c2 !important; }
.dash-navy .sx-table-wrap td, .sx-table-wrap td { color: #dfe6f5; }
.sx-table-wrap td, .sx-table-wrap th, .sx-table-wrap tr, .sx-table-wrap table, .sx-table-wrap tbody { background: transparent !important; }
.dash-navy .menu-link.clr { background: transparent !important; background-image: none !important; color: #d7deee !important; box-shadow: none !important; }
.dash-navy .menu-link.clr:hover { background: rgba(200, 161, 90, .14) !important; color: #ffffff !important; }
.dash-navy .menu-link.clr iconify-icon { color: var(--nx-gold) !important; }
.dash-navy .copy-rights, .dash-navy .copy-rights a { color: #9aa6c2 !important; opacity: 1 !important; }
.dash-navy .layout-menu .menu-link, .dash-navy .layout-menu .menu-item a { color: var(--nx-muted) !important; }
.dash-navy .layout-menu .menu-link:hover, .dash-navy .layout-menu .menu-item a:hover { color: var(--nx-ink) !important; }
.dash-navy .layout-menu .menu-header-text { color: var(--nx-gold) !important; letter-spacing: .12em; }
.dash-navy .layout-navbar, .dash-navy .bg-navbar-theme { background: var(--nx-bg2) !important; border-bottom: 1px solid var(--nx-line); }
.dash-navy .content-wrapper, .dash-navy .layout-page { background: var(--nx-bg); }

.dx-card { background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 18px; padding: 28px; height: 100%; }
.dx-card h5, .dx-card h4, .dx-card h3, .dx-card h2 { color: var(--nx-ink); }
.dx-stat { background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 18px; padding: 24px; text-align: center; height: 100%; }
.dx-stat .dx-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--nx-gold-soft); color: var(--nx-gold);
                   display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 22px; }
.dx-stat .dx-num { font-family: var(--nx-serif); font-size: 30px; font-weight: 500; color: var(--nx-ink); line-height: 1.15; word-break: break-all; }
.dx-stat .dx-lbl { color: var(--nx-muted); font-size: 13px; margin-top: 6px; }
.dx-title { font-family: var(--nx-serif); font-weight: 500; color: var(--nx-ink); font-size: 26px; margin: 34px 0 22px; }
.dx-title span { color: var(--nx-gold); }
.dx-table { width: 100%; border-collapse: collapse; }
.dx-table th { color: var(--nx-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
               padding: 10px 14px; border-bottom: 1px solid var(--nx-line2); text-align: left; font-weight: 600; }
.dx-table td { padding: 13px 14px; border-bottom: 1px solid var(--nx-line); color: var(--nx-ink); font-size: 14px; }
.dx-note { background: var(--nx-gold-soft); border: 1px solid rgba(200, 161, 90, .35); color: var(--nx-ink);
           border-radius: 14px; padding: 16px 20px; font-size: 14px; }
.dx-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.dx-badge.gold { background: var(--nx-gold-soft); color: var(--nx-gold); }
.dx-badge.green { background: rgba(62, 207, 142, .14); color: var(--nx-green); }

/* ---------- dashboard hero + charts ---------- */
.dx-hero { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px;
           padding: 30px 32px; margin-bottom: 24px; border: 1px solid var(--nx-line); border-radius: 16px;
           background: linear-gradient(135deg, var(--nx-bg2) 0%, #0c1730 60%, #0a1226 100%);
           color: #e8ecf6; }
.dx-hero-eyebrow { color: var(--nx-gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.dx-hero-num { font-family: var(--nx-serif); font-size: 52px; font-weight: 500; line-height: 1.1; margin: 6px 0 4px; color: #f5efe2; }
.dx-hero-sub { color: var(--nx-muted); font-size: 14px; }
.dx-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dx-card-title { font-family: var(--nx-serif); font-weight: 500; margin: 0; font-size: 20px; }
.dx-sub { color: var(--nx-muted); font-size: 12px; margin-top: 6px; }
.dx-chart-legend { display: flex; gap: 14px; margin-top: 12px; color: var(--nx-muted); font-size: 11px; line-height: 1.4; flex-wrap: wrap; }
.dx-chart-legend span { font-size: 11px !important; font-weight: 500; display: inline-flex; align-items: center; }
.dx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.nx-method { transition: border-color .15s, transform .15s; }
.nx-method:hover { transform: translateY(-2px); }
.nx-method.active { border-color: var(--nx-gold) !important; box-shadow: 0 0 0 1px var(--nx-gold) inset; }

/* ---------- public pages: faq accordion, forms ---------- */
.nx-faq-item { border: 1px solid var(--nx-line); border-radius: 12px; margin-bottom: 12px; background: var(--nx-bg2); overflow: hidden; }
.nx-faq-q { width: 100%; text-align: left; background: transparent; border: 0; color: var(--nx-ink);
            font-family: var(--nx-serif); font-size: 17px; font-weight: 500; padding: 18px 22px;
            cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.nx-faq-q:hover { color: #ffffff; }
.nx-faq-ico { color: var(--nx-gold); font-size: 22px; font-family: Inter, sans-serif; font-weight: 400; transition: transform .2s; line-height: 1; }
.nx-faq-a { display: none; padding: 0 22px 18px; color: var(--nx-muted); font-size: 14.5px; line-height: 1.7; }
.nx-faq-a a { color: var(--nx-gold); text-decoration: none; }
.nx-faq-item.nx-open .nx-faq-a { display: block; }
.nx-faq-item.nx-open .nx-faq-ico { transform: rotate(45deg); }
.nx-check { display: flex; gap: 10px; align-items: center; color: var(--nx-muted); font-size: 14px; cursor: pointer; }
.nx-check input { accent-color: var(--nx-gold); width: 16px; height: 16px; margin: 0; }
select.nx-input { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nx-muted) 50%), linear-gradient(135deg, var(--nx-muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.nx-rules p { color: var(--nx-muted); line-height: 1.75; font-size: 14.5px; margin: 0 0 14px; }

/* ============================================================
   LEGACY-CLASS COMPAT LAYER (member area, .dash-navy scope)
   Re-skins old light-theme classes used by legacy member
   templates (deposit, histories, edit_account, security, ...)
   so they render navy without touching their form logic.
   ============================================================ */
.dash-navy .text-black, .dash-navy .text-black.alter, .dash-navy h1, .dash-navy h2, .dash-navy h3,
.dash-navy h4, .dash-navy h5, .dash-navy h6 { color: #e8ecf6 !important; }
.dash-navy .text-primary { color: var(--nx-gold) !important; }
.dash-navy .text-white { color: #dfe6f5 !important; }
.dash-navy p, .dash-navy span, .dash-navy td, .dash-navy li, .dash-navy label, .dash-navy div { color: inherit; }
.dash-navy .content-wrapper, .dash-navy .dah-overall-pad { color: #c6cfe4; }
.dash-navy .title h2.alter, .dash-navy .title h2 { font-family: var(--nx-serif); font-weight: 500; text-transform: none; letter-spacing: 0; }
.dash-navy .title h2 .text-primary, .dash-navy h2 span { color: var(--nx-gold); }

/* legacy forms */
.dash-navy .form-block { position: relative; margin-bottom: 18px; }
.dash-navy .form-block .form-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--nx-gold) !important; z-index: 2;
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important;
  width: auto !important; height: auto !important; padding: 0 !important; line-height: 1 !important; }
.dash-navy .form-block .form-ico::before, .dash-navy .form-block .form-ico::after { display: none !important; }
.dash-navy .form-block .form-ico + .form-control, .dash-navy .form-block input.form-control { padding-left: 44px !important; }
.dash-navy .form-control, .dash-navy .form-select, .dash-navy input[type=text], .dash-navy input[type=password],
.dash-navy input[type=email], .dash-navy select, .dash-navy textarea {
  background: #0e1830 !important; border: 1px solid var(--nx-line) !important; color: #e8ecf6 !important;
  border-radius: 10px; padding: 12px 14px; width: 100%; font-size: 14px; }
.dash-navy .form-control:focus, .dash-navy .form-select:focus, .dash-navy input:focus, .dash-navy select:focus, .dash-navy textarea:focus {
  border-color: var(--nx-gold) !important; outline: none; box-shadow: 0 0 0 3px rgba(200,161,90,.15); }
.dash-navy .form-control::placeholder, .dash-navy input::placeholder, .dash-navy textarea::placeholder { color: #7d89ad; opacity: 1; }
.dash-navy select option { background: #0e1830; color: #e8ecf6; }

/* legacy buttons */
.dash-navy .btn-primary, .dash-navy input.btn-primary, .dash-navy button.btn-primary, .dash-navy input[type=submit] {
  background: linear-gradient(135deg, #d9b673, var(--nx-gold)) !important; background-image: linear-gradient(135deg, #d9b673, var(--nx-gold)) !important;
  color: #181207 !important; border: 0 !important; border-radius: 10px; padding: 12px 28px; font-weight: 600;
  box-shadow: none !important; cursor: pointer; }
.dash-navy .btn-primary:hover, .dash-navy input[type=submit]:hover { filter: brightness(1.08); }
.dash-navy .btn-secondary, .dash-navy .btn-info {
  background: transparent !important; border: 1px solid var(--nx-line) !important; color: #d7deee !important;
  border-radius: 10px; padding: 12px 24px; box-shadow: none !important; }
.dash-navy .btn-secondary:hover, .dash-navy .btn-info:hover { border-color: var(--nx-gold) !important; color: #fff !important; }
.dash-navy .submit_btn .btn-secondary, .dash-navy .submit_btn button[type=submit],
.dash-navy .btn1 .btn-secondary, .dash-navy .btn1 button[type=submit], .dash-navy input.sbmt {
  background: linear-gradient(135deg, #d9b673, var(--nx-gold)) !important; background-image: linear-gradient(135deg, #d9b673, var(--nx-gold)) !important;
  color: #181207 !important; border: 0 !important; font-weight: 600; }
.dash-navy input[disabled], .dash-navy input:disabled { opacity: .55; cursor: not-allowed; }
.dash-navy a { color: var(--nx-gold); }
.dash-navy a.nx-btn-gold, .dash-navy .nx-btn-gold, .dash-navy a.nx-btn-gold:visited, .dash-navy .nx-btn-gold:visited { color: #131a2c !important; }
.dash-navy a.nx-btn-gold:hover, .dash-navy .nx-btn-gold:hover { color: #131a2c !important; background: #d9b776 !important; }
.dash-navy a.nx-btn-line, .dash-navy .nx-btn-line { color: var(--nx-ink) !important; }
.dash-navy a.nx-btn-line:hover, .dash-navy .nx-btn-line:hover { color: var(--nx-gold) !important; border-color: var(--nx-gold) !important; }
.dash-navy a.text-black, .dash-navy a.audio { color: #9aa6c2 !important; }
.dash-navy a.text-black:hover, .dash-navy a.audio:hover { color: var(--nx-gold) !important; }

/* legacy alerts */
.dash-navy .error-msg, .dash-navy .msg-box.error, .dash-navy .msg-box.err {
  display: flex; align-items: center; gap: 10px; background: rgba(239,106,91,.12); border: 1px solid rgba(239,106,91,.35);
  color: #f2a79c !important; border-radius: 10px; padding: 13px 16px; margin-bottom: 14px; font-size: 14px; }
.dash-navy .success-msg, .dash-navy .msg-box.success, .dash-navy .msg-box.suc {
  display: flex; align-items: center; gap: 10px; background: rgba(61,220,151,.12); border: 1px solid rgba(61,220,151,.35);
  color: #9fe8c8 !important; border-radius: 10px; padding: 13px 16px; margin-bottom: 14px; font-size: 14px; }
.dash-navy .error-msg img, .dash-navy .success-msg img, .dash-navy .msg-box img { width: 18px; height: 18px; }

/* legacy cards / boxes */
.dash-navy .inner-bg-primary, .dash-navy .select-bg, .dash-navy .history-table, .dash-navy .secu, .dash-navy .sec-links1 {
  background: var(--nx-bg2) !important; border: 1px solid var(--nx-line); border-radius: 14px; padding: 24px; }
.dash-navy .checkbox label, .dash-navy .checkbox .text-black { color: #9aa6c2 !important; }

/* plan cards (deposit) */
.dash-navy .dep-box, .dash-navy .owl-item .dep-box {
  background: var(--nx-bg2) !important; border: 1px solid var(--nx-line) !important; border-radius: 16px;
  padding: 26px 22px; color: #c6cfe4; }
.dash-navy .dep-box h3, .dash-navy .dep-box h3.text-black { color: #e8ecf6 !important; font-family: var(--nx-serif); font-size: 20px; }
.dash-navy .dep-box h4, .dash-navy .dep-box h4.text-black { color: var(--nx-gold) !important; font-family: var(--nx-serif); font-size: 30px; }
.dash-navy .dep-box h6, .dash-navy .dep-box h6.text-black { color: #e8ecf6 !important; }
.dash-navy .dep-box span.alter { color: #66739a; font-size: 12px; letter-spacing: .14em; }
.dash-navy .dep-box .btn-primary { padding: 9px 22px; font-size: 13px; }
.dash-navy .plan-info { display: flex; align-items: center; gap: 10px; justify-content: center; }
.dash-navy .plan-tick i { color: var(--nx-gold); }
.dash-navy .plan-amt span { font-size: 12px; }
.dash-navy .dep-box input[type=radio] { accent-color: var(--nx-gold); width: 16px; height: 16px; margin-right: 8px; }
.dash-navy .owl-carousel .owl-nav button, .dash-navy .owl-carousel button.owl-prev, .dash-navy .owl-carousel button.owl-next {
  background: var(--nx-bg2) !important; border: 1px solid var(--nx-line) !important; color: var(--nx-gold) !important;
  border-radius: 50% !important; width: 38px; height: 38px; box-shadow: none !important; }

/* legacy tables */
.dash-navy table { color: #dfe6f5; }
.dash-navy .table-responsive table, .dash-navy table.table {
  width: 100%; border-collapse: collapse; background: transparent; }
.dash-navy .table-responsive th, .dash-navy table.table th, .dash-navy table th {
  background: transparent !important; color: var(--nx-gold) !important; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--nx-line) !important; text-align: left; }
.dash-navy .table-responsive td, .dash-navy table.table td, .dash-navy table td {
  background: transparent !important; color: #dfe6f5; padding: 12px; border-bottom: 1px solid rgba(42,54,86,.5) !important; font-size: 14px; }
.dash-navy table tr:hover td { background: rgba(200,161,90,.05) !important; }
.dash-navy .history-table .form-select { width: auto; min-width: 180px; }

/* tabs like "Spend from" toggles */
.dash-navy .nav-tabs, .dash-navy .tabs { border-bottom: 1px solid var(--nx-line) !important; }
.dash-navy .nav-tabs .nav-link, .dash-navy .tabs button {
  background: transparent !important; color: #9aa6c2 !important; border: 1px solid transparent !important;
  border-radius: 10px 10px 0 0; padding: 10px 20px; }
.dash-navy .nav-tabs .nav-link.active, .dash-navy .tabs button.active {
  color: var(--nx-gold) !important; border-color: var(--nx-line) var(--nx-line) transparent !important;
  background: var(--nx-bg2) !important; }

/* legacy display fonts (Audiowide/Wallpoet) look glitchy on amounts — use clean fonts */
.dash-navy .plan-amt h6, .dash-navy .plan-amt span { font-family: Inter, sans-serif !important; font-weight: 600; font-size: 14px; }
.dash-navy .dep-box h4.wall { font-family: var(--nx-serif) !important; font-size: 30px; color: var(--nx-gold) !important; }

/* security page icons rows */
.dash-navy .sec-links1 a { color: #d7deee !important; text-decoration: none; }
.dash-navy .sec-links1 a:hover { color: var(--nx-gold) !important; }
.dash-navy .list-unstyled { padding-left: 0; list-style: none; }

/* kill legacy white surfaces + orange accents */
.dash-navy .layout-page, .dash-navy .layout-page.dash-aft, .dash-navy .dash-aft { background: var(--nx-bg) !important; }
.dash-navy .dah-nav-link { background: transparent !important; }
.dash-navy .layout-navbar { background: var(--nx-bg2) !important; border-bottom: 1px solid var(--nx-line); }
.dash-navy .dash-title h3, .dash-navy .dash-title h3.alter { color: #e8ecf6 !important; font-family: var(--nx-serif); text-transform: capitalize; }
.dash-navy .nav-link { color: #d7deee !important; }
.dash-navy .nav-link.active { color: var(--nx-gold) !important; background: rgba(200,161,90,.12) !important; }
.dash-navy .nav-tabs .nav-link:not(.active) { background: transparent !important; color: #9aa6c2 !important; }
.dash-navy .nav-pills .nav-link, .dash-navy .nav-pills .nav-link:not(.active) {
  background: var(--nx-bg2) !important; background-image: none !important; color: #9aa6c2 !important;
  border: 1px solid var(--nx-line) !important; border-radius: 10px !important; box-shadow: none !important; }
.dash-navy .nav-pills .nav-link.active, .dash-navy .nav-pills .show > .nav-link {
  background: rgba(200,161,90,.14) !important; background-image: none !important; color: var(--nx-gold) !important;
  border: 1px solid var(--nx-gold) !important; }
.dash-navy .make-list, .dash-navy .process, .dash-navy .process span { background: transparent !important; color: inherit !important; }
.dash-navy .payment-list-detail label { color: #d7deee !important; }
.dash-navy .payment-list-detail input[type=radio] { accent-color: var(--nx-gold); }
.dash-navy h6.text-black, .dash-navy .plan-amt h6 { text-decoration: none !important; border: 0 !important; }
.dx-badge.red { background: rgba(239, 106, 91, .14); color: var(--nx-red); }
.dx-badge.blue { background: rgba(91, 141, 239, .14); color: var(--nx-blue); }

/* forms on navy */
.nx-input, .nx-select, .nx-textarea { width: 100%; background: var(--nx-bg2); border: 1px solid var(--nx-line2);
  border-radius: 10px; color: var(--nx-ink); padding: 11px 14px; font-size: 15px; font-family: var(--nx-sans); }
.nx-input:focus, .nx-select:focus, .nx-textarea:focus { outline: none; border-color: var(--nx-gold); }
.nx-label { display: block; color: var(--nx-muted); font-size: 13px; margin: 0 0 6px; font-weight: 500; }
.nx-alert { border-radius: 12px; padding: 14px 18px; font-size: 14px; margin-bottom: 18px; }
.nx-alert.ok { background: rgba(62, 207, 142, .12); border: 1px solid rgba(62, 207, 142, .4); color: var(--nx-green); }
.nx-alert.err { background: rgba(239, 106, 91, .12); border: 1px solid rgba(239, 106, 91, .4); color: var(--nx-red); }
.nx-alert.info { background: rgba(91, 141, 239, .12); border: 1px solid rgba(91, 141, 239, .4); color: var(--nx-blue); }

/* ==========================================================================
   .sx-* — standalone module pages (verification / redemption / admin)
   ========================================================================== */
.sx-page { background: var(--nx-bg); color: var(--nx-ink); font-family: var(--nx-sans); min-height: 100vh;
           -webkit-font-smoothing: antialiased; line-height: 1.6; }
.sx-topbar { background: var(--nx-bg2); border-bottom: 1px solid var(--nx-line); padding: 16px 0; }
.sx-topbar .nx-wrap { display: flex; align-items: center; justify-content: space-between; }
.sx-topbar img { height: 34px; border-radius: 6px; }
.sx-topbar nav a { color: var(--nx-muted); text-decoration: none; font-size: 14px; margin-left: 22px; }
.sx-topbar nav a:hover, .sx-topbar nav a.on { color: var(--nx-ink); }
/* tables scroll horizontally instead of clipping on small screens */
.sx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sx-table-wrap table { min-width: 520px; }
.sx-main { padding: 44px 0 70px; }
.sx-h1 { font-family: var(--nx-serif); font-weight: 500; font-size: 34px; color: var(--nx-ink); margin: 0 0 8px; }
.sx-sub { color: var(--nx-muted); margin-bottom: 30px; }
.sx-grid { display: grid; gap: 18px; }
.sx-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.sx-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.sx-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.sx-table-wrap { background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sx-table-wrap table { width: 100%; border-collapse: collapse; }
.sx-table-wrap th { color: var(--nx-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
                    padding: 12px 16px; border-bottom: 1px solid var(--nx-line2); text-align: left; font-weight: 600; }
.sx-table-wrap td { padding: 13px 16px; border-bottom: 1px solid var(--nx-line); color: var(--nx-ink); font-size: 14px; vertical-align: middle; }
.sx-table-wrap tr:last-child td { border-bottom: none; }
.sx-foot { border-top: 1px solid var(--nx-line); padding: 22px 0; color: var(--nx-muted); font-size: 13px; text-align: center; }
.sx-file-drop { border: 2px dashed var(--nx-line2); border-radius: 16px; padding: 34px; text-align: center;
                color: var(--nx-muted); transition: border-color .18s; cursor: pointer; }
.sx-file-drop:hover { border-color: var(--nx-gold); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nx-plans { grid-template-columns: repeat(2, 1fr); }
  .nx-hero-grid { grid-template-columns: 1fr; }
  .nx-steps { grid-template-columns: 1fr; }
  .sx-grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .sx-grid.c3 { grid-template-columns: repeat(2, 1fr); }
  .nx-hero { padding: 56px 0 64px; }
  .nx-section { padding: 56px 0; }
}

/* ============================ PHONE / small tablets ============================ */
@media (max-width: 768px) {
  /* -- shared -- */
  .nx-wrap { padding: 0 16px; }
  html, body { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  /* -- public pages -- */
  .nx-hero { padding: 44px 0 52px; }
  .nx-hero-grid { gap: 32px; }
  .nx-hero-cta .nx-btn { flex: 1 1 100%; text-align: center; }
  .nx-h1 { font-size: clamp(30px, 8.5vw, 40px); }
  .nx-h2 { font-size: clamp(24px, 6.5vw, 32px); }
  .nx-section { padding: 44px 0; }
  .nx-footer { padding: 40px 0 28px; }
  .dx-card { padding: 20px; }
  .dx-stat { padding: 18px; }
  .dx-stat .dx-num { font-size: 24px; }
  .nx-faq-q { font-size: 15px; padding: 15px 16px; }

  /* -- NX module pages (verify/redeem/admin/withdraw_bank) -- */
  .sx-main { padding: 28px 0 50px; }
  .sx-h1 { font-size: 26px; }
  .sx-topbar .nx-wrap { flex-wrap: wrap; gap: 10px; }
  .sx-topbar nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .sx-topbar nav a { margin-left: 0; font-size: 13px; }
  /* admin console tab bar wraps */
  .sx-page nav a[style*="margin-left"] { margin-left: 0 !important; margin-right: 14px; }

  /* -- member dashboard (dash-navy) -- */
  .dash-navy .dx-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dash-navy .dx-hero-num { font-size: 34px; }
  .dash-navy .dx-hero-actions { width: 100%; }
  .dash-navy .dx-hero-actions .nx-btn { flex: 1 1 calc(50% - 10px); text-align: center; padding: 12px 8px; font-size: 14px; }
  .dash-navy .dash-title h3 { font-size: 18px; margin: 8px 0; }
  .dash-navy .container-xxl { padding-left: 12px; padding-right: 12px; }
  .dash-navy .dah-overall-pad { padding: 0 2px; }
  /* stat cards stack full width */
  .dash-navy .row.g-3 > [class*="col-"] { margin-bottom: 2px; }
  /* legacy tables scroll instead of breaking layout */
  .dash-navy .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-navy table { min-width: 480px; }
  /* canvas charts stay inside card */
  .dash-navy canvas { max-width: 100%; }
  /* forms: full width inputs, bigger touch targets */
  .dash-navy .form-control, .dash-navy .nx-input, .nx-input { font-size: 16px; min-height: 46px; }
  .dash-navy .btn-primary, .dash-navy .btn-secondary, .dash-navy .nx-btn { min-height: 46px; }
  /* two-column forms collapse */
  .dash-navy .row [class*="col-lg-6"], .dash-navy .row [class*="col-md-6"] { width: 100%; }
  /* owl plan cards fit viewport */
  .dash-navy .owl-carousel .owl-stage-outer { overflow: hidden; }
  .dash-navy .dep-box { margin: 0 4px; }
  .dash-navy .plan-info { margin: 0 10px; }
  .dash-navy .dep-box .box-content { padding: 18px 10px; }
  /* footer robot/decor images scale down */
  .side-bar-robot img { max-width: 120px; }

  /* -- signup: two-col grid -> one col -- */
  .nx-page form .row > [class*="col-md-6"] { width: 100%; }

  /* -- history tables: allow scroll hint -- */
  .sx-table-wrap { border-radius: 12px; }
  .sx-table-wrap th, .sx-table-wrap td { padding: 10px 12px; font-size: 13px; }

  /* -- mobile hamburger: visible, tappable -- */
  .dash-navy .layout-menu-toggle a, .dash-navy .layout-menu-toggle .nav-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; min-height: 46px; border: 1px solid var(--nx-line2); border-radius: 12px;
    color: var(--nx-gold) !important; background: var(--nx-bg2); }
  .dash-navy .layout-menu-toggle iconify-icon { font-size: 24px; }
  /* tighten navbar dead space */
  .dash-navy .layout-navbar { padding-top: 8px; padding-bottom: 8px; }
  .dash-navy #navbar-collapse .row > [class*="col-md-8"] { display: none; }
}

@media (max-width: 620px) {
  .nx-plans { grid-template-columns: 1fr; }
  .sx-grid.c2, .sx-grid.c3, .sx-grid.c4 { grid-template-columns: 1fr; }
  .nx-burger { display: block; }
  .nx-nav-links { display: none; position: absolute; top: 70px; right: 20px; left: 20px; background: var(--nx-bg2);
                  border: 1px solid var(--nx-line2); border-radius: 14px; padding: 18px; flex-direction: column;
                  z-index: 1000; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
  .nx-nav-links.nx-open { display: flex; }
}