/* =============================================================
   STANBIC ASSETS — ACCOUNT & ADMIN VISUAL REDESIGN
   Modern Fintech Dashboard Theme
   Applied on top of DashLite / NioKit framework
   ============================================================= */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand */
  --sa-primary:        #6c63ff;
  --sa-primary-dark:   #5652cc;
  --sa-primary-dim:    rgba(108, 99, 255, 0.12);
  --sa-primary-glow:   rgba(108, 99, 255, 0.30);
  --sa-gradient:       linear-gradient(135deg, #6c63ff 0%, #4b9cfc 100%);

  /* Surface */
  --sa-body-bg:        #f0f2fc;
  --sa-sidebar-bg:     #0f172a;
  --sa-sidebar-hover:  rgba(108, 99, 255, 0.14);
  --sa-sidebar-active: rgba(108, 99, 255, 0.24);
  --sa-card:           #ffffff;
  --sa-card-dark:      #1e293b;
  --sa-header:         #ffffff;

  /* Text */
  --sa-text:           #1e293b;
  --sa-text-muted:     #64748b;
  --sa-text-faint:     #94a3b8;
  --sa-sidebar-text:   #94a3b8;
  --sa-sidebar-active-text: #ffffff;

  /* Border */
  --sa-border:         #e2e8f0;
  --sa-border-dark:    rgba(255, 255, 255, 0.07);

  /* Semantic */
  --sa-success:        #10b981;
  --sa-warning:        #f59e0b;
  --sa-danger:         #ef4444;
  --sa-info:           #3b82f6;

  /* Radius & shadow */
  --sa-radius:         16px;
  --sa-radius-sm:      10px;
  --sa-radius-xs:      6px;
  --sa-shadow-sm:      0 1px 8px rgba(0, 0, 0, 0.06);
  --sa-shadow:         0 4px 24px rgba(0, 0, 0, 0.08);
  --sa-shadow-lg:      0 8px 40px rgba(0, 0, 0, 0.12);
  --sa-shadow-primary: 0 4px 20px var(--sa-primary-glow);
}

/* ── GLOBAL BASE ────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
body.nk-body {
  background-color: var(--sa-body-bg) !important;
  color: var(--sa-text) !important;
  font-family: 'Nunito', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
}

/* Override DashLite's "bg-white" body */
body.bg-white {
  background-color: var(--sa-body-bg) !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sa-body-bg); }
::-webkit-scrollbar-thumb { background: var(--sa-primary); border-radius: 3px; }
::selection { background: var(--sa-primary-dim); color: var(--sa-primary); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.nk-sidebar,
.nk-sidebar.nk-sidebar-fixed {
  background: var(--sa-sidebar-bg) !important;
  border-right: 1px solid var(--sa-border-dark) !important;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.25) !important;
}

/* Sidebar head (logo area) */
.nk-sidebar-head,
.nk-sidebar-element.nk-sidebar-head {
  border-bottom: 1px solid var(--sa-border-dark) !important;
  padding: 20px 20px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
}

/* Force logo to appear white on dark sidebar */
.nk-sidebar-brand img,
.nk-sidebar-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Section headings inside sidebar */
.nk-sidebar .nk-menu-heading,
.nk-sidebar .overline-title {
  color: rgba(148, 163, 184, 0.35) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  padding: 18px 22px 6px !important;
}

/* Menu items */
.nk-sidebar .nk-menu-item {
  padding: 1px 10px !important;
}

.nk-sidebar .nk-menu-link {
  color: var(--sa-sidebar-text) !important;
  border-radius: var(--sa-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.18s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.nk-sidebar .nk-menu-link:hover {
  background: var(--sa-sidebar-hover) !important;
  color: #fff !important;
}

.nk-sidebar .nk-menu-link .nk-menu-icon em {
  color: inherit !important;
}

/* Active menu item */
.nk-sidebar .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu-link.active {
  background: var(--sa-sidebar-active) !important;
  color: var(--sa-sidebar-active-text) !important;
  box-shadow: 0 2px 12px rgba(108, 99, 255, 0.2) !important;
}

/* Sidebar icon */
.nk-menu-icon {
  width: 34px !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

/* User card inside sidebar (mobile) */
.nk-sidebar .user-avatar {
  background: var(--sa-gradient) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.nk-sidebar .lead-text,
.nk-sidebar .user-name {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

.nk-sidebar .sub-text,
.nk-sidebar .user-email {
  color: var(--sa-sidebar-text) !important;
  font-size: 11px !important;
}

/* Sidebar footer */
.nk-sidebar-footer {
  border-top: 1px solid var(--sa-border-dark) !important;
  padding: 12px 10px !important;
}

.nk-sidebar-footer .nk-menu-link {
  color: var(--sa-sidebar-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER / TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.nk-header,
.nk-header.nk-header-fixed {
  background: var(--sa-header) !important;
  border-bottom: 1px solid var(--sa-border) !important;
  box-shadow: var(--sa-shadow-sm) !important;
  height: 72px !important;
}

.nk-header-wrap {
  padding: 0 28px !important;
}

/* Logo in mobile header */
.nk-header-brand img {
  max-height: 36px !important;
}

/* Nav quick items */
.nk-quick-nav > li > a {
  color: var(--sa-text-muted) !important;
  transition: color 0.2s ease !important;
}

.nk-quick-nav > li > a:hover {
  color: var(--sa-primary) !important;
}

/* Notification bell */
.icon-status-info {
  color: var(--sa-primary) !important;
}

/* ── HEADER NEWS TICKER ──────────────────────────────────────── */
.nk-news-list .nk-news-item {
  color: var(--sa-text-muted) !important;
  font-size: 13px !important;
}

.nk-news-list .nk-news-item:hover {
  color: var(--sa-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════ */
.nk-wrap {
  background: var(--sa-body-bg) !important;
}

.nk-content,
.nk-content-fluid {
  background: var(--sa-body-bg) !important;
  padding: 28px 24px !important;
}

/* ── BLOCK HEAD ──────────────────────────────────────────────── */
.nk-block-head {
  padding-bottom: 18px !important;
}

.nk-block-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--sa-text) !important;
  letter-spacing: -0.2px !important;
}

.nk-block-head-sub {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--sa-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 4px !important;
}

.nk-block-des p {
  color: var(--sa-text-muted) !important;
  font-size: 13.5px !important;
}

/* Back link */
.back-to {
  color: var(--sa-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  transition: color 0.2s ease !important;
}

.back-to:hover {
  color: var(--sa-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--sa-card) !important;
  border: 1px solid var(--sa-border) !important;
  border-radius: var(--sa-radius) !important;
  box-shadow: var(--sa-shadow-sm) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.card:hover {
  box-shadow: var(--sa-shadow) !important;
}

.card-bordered {
  border: 1px solid var(--sa-border) !important;
}

/* Dark card variant (overview panel) */
.card.is-dark,
.card-bordered.is-dark,
.card.bg-dark {
  background: linear-gradient(135deg, #1e2d4a 0%, #0f172a 100%) !important;
  border-color: rgba(108, 99, 255, 0.22) !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3) !important;
}

.card.bg-light {
  background: #f8fafc !important;
  border-color: var(--sa-border) !important;
}

.card-inner {
  padding: 24px !important;
}

.card-head {
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--sa-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.card-title .title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--sa-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   WALLET WIDGET (nk-wgw)
   ═══════════════════════════════════════════════════════════════ */
.nk-wgw {
  border-radius: var(--sa-radius-sm) !important;
}

.nk-wgw-inner {
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.nk-wgw-name {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.nk-wgw-icon {
  background: var(--sa-primary-dim) !important;
  color: var(--sa-primary) !important;
  border-radius: 10px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  flex-shrink: 0 !important;
}

.nk-wgw-title.title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sa-text) !important;
  margin: 0 !important;
}

.nk-wgw-balance .amount {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--sa-text) !important;
}

/* ── OVERVIEW STATS (nk-wg7) ────────────────────────────────── */
.nk-wg7 {
  padding: 4px 0 !important;
}

.nk-wg7-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.9px !important;
  color: rgba(148, 163, 184, 0.7) !important;
  margin-bottom: 6px !important;
}

.nk-wg7 .number-lg,
.nk-wg7 .amount {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  letter-spacing: -0.5px !important;
}

.nk-wg7-stats {
  margin-bottom: 16px !important;
}

.nk-wg7-stats-group {
  display: flex !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.nk-wg7-stats-group .nk-wg7-stats .number {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
}

.nk-wg7-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 12px !important;
}

.nk-wg7-note {
  font-size: 11px !important;
  color: rgba(148, 163, 184, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TRANSACTION LIST
   ═══════════════════════════════════════════════════════════════ */
.tranx-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  transition: background 0.15s ease !important;
}

.tranx-item:hover {
  background: #f8faff !important;
}

.tranx-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sa-text) !important;
}

.tranx-date {
  font-size: 12px !important;
  color: var(--sa-text-muted) !important;
}

.tranx-amount .number {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sa-text) !important;
  text-align: right !important;
}

.tranx-amount .number-sm {
  font-size: 11px !important;
  color: var(--sa-text-faint) !important;
  text-align: right !important;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.nk-tb-list {
  border-radius: var(--sa-radius) !important;
  overflow: hidden !important;
}

.tranx-list.card {
  border-radius: var(--sa-radius) !important;
}

.nk-tb-item.nk-tb-head {
  background: #f8fafc !important;
  border-bottom: 2px solid var(--sa-border) !important;
}

.nk-tb-head .sub-text,
.nk-tb-head th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--sa-text-faint) !important;
  padding: 14px 16px !important;
}

.nk-tb-item:not(.nk-tb-head) {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.15s ease !important;
}

.nk-tb-item:not(.nk-tb-head):hover {
  background: #f8faff !important;
}

.nk-tb-col {
  padding: 14px 16px !important;
  vertical-align: middle !important;
}

/* Status badges */
.badge,
span.badge {
  border-radius: 50px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

.badge-success, .bg-success { background: rgba(16, 185, 129, 0.12) !important; color: #10b981 !important; }
.badge-warning, .bg-warning { background: rgba(245, 158, 11, 0.12) !important; color: #f59e0b !important; }
.badge-danger,  .bg-danger  { background: rgba(239, 68, 68, 0.12)  !important; color: #ef4444  !important; }
.badge-info,    .bg-info    { background: rgba(59, 130, 246, 0.12)  !important; color: #3b82f6  !important; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-primary {
  background: var(--sa-gradient) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
  box-shadow: var(--sa-shadow-primary) !important;
  transition: all 0.22s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 28px var(--sa-primary-glow) !important;
  color: #fff !important;
  background: var(--sa-gradient) !important;
  border: none !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
}

.btn-lg {
  padding: 13px 28px !important;
  font-size: 15px !important;
}

.btn-sm {
  padding: 6px 16px !important;
  font-size: 12px !important;
  border-radius: 50px !important;
}

.btn-block,
.btn.w-100 {
  width: 100% !important;
  display: block !important;
}

.btn-light {
  background: #f1f5f9 !important;
  border: 1px solid var(--sa-border) !important;
  color: var(--sa-text) !important;
  border-radius: 50px !important;
}

.btn-light:hover {
  background: var(--sa-primary-dim) !important;
  border-color: var(--sa-primary) !important;
  color: var(--sa-primary) !important;
}

.btn-outline-primary {
  border: 1.5px solid var(--sa-primary) !important;
  color: var(--sa-primary) !important;
  background: transparent !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
}

.btn-outline-primary:hover {
  background: var(--sa-primary-dim) !important;
  color: var(--sa-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-group {
  margin-bottom: 20px !important;
}

.form-label,
label.form-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--sa-text-muted) !important;
  margin-bottom: 7px !important;
  display: block !important;
  letter-spacing: 0.2px !important;
}

.form-label-group {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 7px !important;
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  background: #f8fafc !important;
  border: 1.5px solid var(--sa-border) !important;
  border-radius: var(--sa-radius-sm) !important;
  color: var(--sa-text) !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  height: auto !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  width: 100% !important;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  background: #ffffff !important;
  border-color: var(--sa-primary) !important;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.14) !important;
  outline: none !important;
  color: var(--sa-text) !important;
}

.form-control::placeholder {
  color: var(--sa-text-faint) !important;
  font-size: 13px !important;
}

.form-control-lg {
  padding: 13px 18px !important;
  font-size: 15px !important;
  border-radius: var(--sa-radius-sm) !important;
}

/* Form icon (eye / show-hide password) */
.form-icon {
  color: var(--sa-text-faint) !important;
  transition: color 0.2s ease !important;
}

.form-icon:hover {
  color: var(--sa-primary) !important;
}

/* Inline form note */
.form-note-s2 {
  color: var(--sa-text-muted) !important;
  font-size: 13.5px !important;
  margin-top: 4px !important;
}

.form-note-s2 a {
  color: var(--sa-primary) !important;
  font-weight: 600 !important;
}

/* "Forgot password" link */
.link-primary,
a.link.link-primary {
  color: var(--sa-primary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.link-primary:hover {
  color: var(--sa-primary-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES (Login / Register / Forgot Password)
   ═══════════════════════════════════════════════════════════════ */
.nk-split-page {
  min-height: 100vh !important;
}

.nk-block-area-column,
.nk-auth-container {
  background: linear-gradient(145deg, #f8faff 0%, #ffffff 100%) !important;
  position: relative !important;
}

/* Subtle decorative circles */
.nk-block-area-column::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.06) 0%, transparent 70%);
  top: -100px;
  left: -100px;
  pointer-events: none;
}

.nk-auth-body {
  padding: 48px 52px !important;
  width: 100% !important;
  max-width: 460px !important;
}

.nk-auth-body .brand-logo {
  margin-bottom: 32px !important;
}

.nk-auth-body .brand-logo img {
  max-height: 48px !important;
}

/* Auth block heading */
.nk-auth-body .nk-block-head-content .nk-block-title {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 6px !important;
}

.nk-auth-body .nk-block-des {
  color: var(--sa-text-muted) !important;
  margin-bottom: 28px !important;
}

/* Auth footer area */
.nk-auth-footer {
  padding: 24px 52px !important;
}

/* Error div */
#errordiv {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: var(--sa-radius-xs) !important;
  color: #ef4444 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   USER AVATAR
   ═══════════════════════════════════════════════════════════════ */
.user-avatar {
  background: var(--sa-gradient) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
}

.user-avatar.sm {
  width: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN MENUS
   ═══════════════════════════════════════════════════════════════ */
.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--sa-border) !important;
  border-radius: var(--sa-radius) !important;
  box-shadow: var(--sa-shadow-lg) !important;
  padding: 8px !important;
  overflow: hidden !important;
}

.dropdown-inner {
  border-bottom: 1px solid var(--sa-border) !important;
  padding: 8px 0 !important;
}

.dropdown-inner:last-child {
  border-bottom: none !important;
}

/* User info inside dropdown */
.dropdown-inner.user-card-wrap {
  background: #f8fafc !important;
  border-radius: var(--sa-radius-sm) !important;
  padding: 14px 16px !important;
  margin: 4px !important;
}

.dropdown-inner.user-account-info {
  padding: 12px 16px !important;
}

.overline-title-alt {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: var(--sa-text-faint) !important;
  margin-bottom: 6px !important;
}

.user-balance {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--sa-text) !important;
  letter-spacing: -0.3px !important;
}

.link-list li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-radius: var(--sa-radius-xs) !important;
  color: var(--sa-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.link-list li a:hover {
  background: var(--sa-primary-dim) !important;
  color: var(--sa-primary) !important;
}

/* Dropdown head */
.dropdown-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--sa-border) !important;
}

.nk-dropdown-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--sa-text-faint) !important;
}

.dropdown-head a {
  color: var(--sa-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Notification item */
.nk-notification-item {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--sa-border) !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.nk-notification-content {
  color: var(--sa-text-muted) !important;
  font-size: 13px !important;
}

.dropdown-foot {
  padding: 12px 16px !important;
  text-align: center !important;
}

.dropdown-foot a {
  color: var(--sa-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.nk-footer {
  background: var(--sa-header) !important;
  border-top: 1px solid var(--sa-border) !important;
  padding: 16px 28px !important;
}

.nk-footer-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.nk-footer-copyright {
  color: var(--sa-text-faint) !important;
  font-size: 12.5px !important;
}

/* ═══════════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════════ */
.loading-spinner .spinner {
  border-color: #e2e8f0 !important;
  border-top-color: var(--sa-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TITLE OVERLINE
   ═══════════════════════════════════════════════════════════════ */
.overline-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════
   USER INFO DISPLAY
   ═══════════════════════════════════════════════════════════════ */
.user-info .lead-text,
.user-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sa-text) !important;
}

.user-info .sub-text,
.user-status {
  font-size: 12px !important;
  color: var(--sa-text-muted) !important;
}

.user-status-unverified {
  color: var(--sa-warning) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD TOOLS / TAB NAV
   ═══════════════════════════════════════════════════════════════ */
.card-tools-nav {
  display: flex !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}

.card-tools-nav li a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--sa-text-muted) !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  transition: all 0.2s ease !important;
}

.card-tools-nav li.active a,
.card-tools-nav li a:hover {
  color: var(--sa-primary) !important;
  background: var(--sa-primary-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════════════════════ */
.user-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.user-card-wrap {
  padding: 8px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   KYC PAGE
   ═══════════════════════════════════════════════════════════════ */
.nk-kyc-app-image img {
  border-radius: var(--sa-radius) !important;
  box-shadow: var(--sa-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PMOS (Promo banners — hide or neutralize)
   ═══════════════════════════════════════════════════════════════ */
.pmo-lv,
.pmo-st {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .nk-content {
    padding: 24px 16px !important;
  }
  .nk-auth-body {
    padding: 36px 32px !important;
  }
}

@media (max-width: 768px) {
  .nk-auth-body {
    padding: 28px 24px !important;
  }
  .nk-block-title {
    font-size: 1.2rem !important;
  }
  .card-inner {
    padding: 18px 16px !important;
  }
}