/**
 * DwinPayment — Bokeh Blur Override
 * Loaded AFTER main.css — keeps everything light bokeh
 */
:root {
  --sidebar-bg: rgba(255,255,255,.3);
  --sidebar-text: #1a4a63;
  --sidebar-active: #0097a7;
  --sidebar-hover: rgba(0,200,212,.06);
}
body { background: linear-gradient(160deg,#e8f7fc 0%,#b8e8f5 20%,#5ccbe8 45%,#2ab5db 65%,#0c9ec5 85%,#0889b0 100%) !important; }
.app-header { background: rgba(255,255,255,.45) !important; backdrop-filter: blur(24px) !important; border-bottom: 1px solid rgba(255,255,255,.5) !important; }
.header-brand-text { color: var(--navy) !important; }
.sidebar { background: rgba(255,255,255,.35) !important; backdrop-filter: blur(20px) !important; border-right: 1px solid rgba(255,255,255,.4) !important; }
.nav-section-title { color: #5a8ea5 !important; }
.nav-item { color: #1a4a63 !important; }
.nav-item:hover { background: rgba(0,200,212,.08) !important; color: #0097a7 !important; }
.nav-item.active { background: rgba(0,200,212,.12) !important; color: #0097a7 !important; border-left: 3px solid #0097a7 !important; }
.main-content { background: transparent !important; }
.balance-hero { background: rgba(255,255,255,.45) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,.5) !important; }
.card { background: rgba(255,255,255,.55) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,.45) !important; }
.card-header { background: rgba(255,255,255,.3) !important; }
.stat-card { background: rgba(255,255,255,.55) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,.45) !important; }
.sub-bal-card { background: rgba(255,255,255,.55) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,.45) !important; }
.tab-btn { background: rgba(255,255,255,.4) !important; border: 1px solid rgba(255,255,255,.5) !important; }
.tab-btn.active { background: rgba(0,200,212,.12) !important; border-color: #0097a7 !important; }
.header-user:hover { background: rgba(0,200,212,.08) !important; }
.badge-network { background: rgba(16,185,129,.12) !important; }
#app-shell { background: transparent !important; }
.app-body { background: transparent !important; }

/* Mobile sidebar */
@media(max-width:768px) {
  .sidebar { background: rgba(255,255,255,.9) !important; }
}

/* === CUTE 3D COLORFUL ICONS === */
.nav-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 17px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.1), inset 0 1px 1px rgba(255,255,255,.6) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.nav-item:hover .nav-icon { transform: scale(1.15) translateY(-1px) !important; box-shadow: 0 5px 14px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.7) !important; }
.nav-item.active .nav-icon { transform: scale(1.1) !important; box-shadow: 0 4px 12px rgba(0,0,0,.15) !important; }

/* Individual icon colors */
[data-module="dashboard"] .nav-icon { background: linear-gradient(135deg, #e0f7fa, #80deea) !important; }
[data-module="wallet"] .nav-icon { background: linear-gradient(135deg, #e3f2fd, #90caf9) !important; }
[data-module="payments"] .nav-icon { background: linear-gradient(135deg, #e8f5e9, #a5d6a7) !important; }
[data-module="trading"] .nav-icon { background: linear-gradient(135deg, #fff3e0, #ffcc80) !important; }
[data-module="earn"] .nav-icon { background: linear-gradient(135deg, #fce4ec, #f48fb1) !important; }
[data-module="nft"] .nav-icon { background: linear-gradient(135deg, #f3e5f5, #ce93d8) !important; }
[data-module="treasury"] .nav-icon { background: linear-gradient(135deg, #e0f2f1, #80cbc4) !important; }
[data-module="merchant"] .nav-icon { background: linear-gradient(135deg, #fff8e1, #ffe082) !important; }
[data-module="xero"] .nav-icon { background: linear-gradient(135deg, #e8eaf6, #9fa8da) !important; }
[data-module="security"] .nav-icon { background: linear-gradient(135deg, #e1f5fe, #81d4fa) !important; }
[data-module="apikeys"] .nav-icon { background: linear-gradient(135deg, #f1f8e9, #aed581) !important; }
[data-module="identity"] .nav-icon { background: linear-gradient(135deg, #e0f7fa, #4dd0e1) !important; }
[data-module="kyc"] .nav-icon { background: linear-gradient(135deg, #e8f5e9, #66bb6a) !important; }
[data-module="monitor"] .nav-icon { background: linear-gradient(135deg, #fce4ec, #ef9a9a) !important; }
[data-module="approval"] .nav-icon { background: linear-gradient(135deg, #e8f5e9, #81c784) !important; }
[data-module="settings"] .nav-icon { background: linear-gradient(135deg, #eceff1, #b0bec5) !important; }
[data-module="sandbox"] .nav-icon { background: linear-gradient(135deg, #ede9fe, #a5b4fc) !important; }

/* Role cards cute 3D */
.role-icon {
  font-size: 48px !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)) !important;
  transition: transform .3s !important;
}
.role-card:hover .role-icon { transform: scale(1.2) translateY(-4px) !important; }

/* Stat card icons */
.stat-label::before {
  display: inline-block;
  margin-right: 4px;
  font-size: 14px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.1));
}

/* Balance action buttons 3D */
.btn-primary, .btn-gold {
  box-shadow: 0 4px 14px rgba(0,151,167,.3), inset 0 1px 1px rgba(255,255,255,.3) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.1) !important;
}
.btn-primary:hover, .btn-gold:hover {
  box-shadow: 0 6px 20px rgba(0,151,167,.4), inset 0 1px 1px rgba(255,255,255,.4) !important;
  transform: translateY(-2px) !important;
}
.btn-secondary {
  box-shadow: 0 2px 8px rgba(0,0,0,.06), inset 0 1px 1px rgba(255,255,255,.8) !important;
}

/* Badge 3D effect */
.badge, .role-badge, .header-badge {
  box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* Cards subtle 3D lift */
.card, .stat-card, .sub-bal-card {
  box-shadow: 0 4px 16px rgba(0,105,125,.06), 0 1px 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.card:hover, .stat-card:hover, .sub-bal-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(0,105,125,.1), 0 2px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* Header avatar 3D */
.header-avatar {
  box-shadow: 0 3px 10px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.3) !important;
}

/* Security dots glow */
.sec-indicator {
  box-shadow: 0 0 8px rgba(16,185,129,.5), 0 0 16px rgba(16,185,129,.2) !important;
}

/* Bottom tabs cute */
.bottom-tab .tab-icon {
  font-size: 20px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)) !important;
  transition: transform .2s !important;
}
.bottom-tab:hover .tab-icon, .bottom-tab.active .tab-icon {
  transform: scale(1.2) translateY(-2px) !important;
}
.role-icon {
  font-size: 48px !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)) !important;
  transition: transform .3s !important;
}
.role-icon:hover {
  transform: scale(1.15) translateY(-2px) !important;
}