/**
 * DwinPayment — 3D Colorful Icons (No Background)
 * ═══════════════════════════════════════
 * Large 3D SVG icons — no square, just the icon
 */

.nav-item .nav-icon {
  font-size: 0 !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background-size: 36px 36px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)) !important;
  transition: transform .2s ease, filter .2s ease !important;
}
.nav-item:hover .nav-icon {
  transform: scale(1.15) translateY(-2px) !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)) !important;
}

/* 📊 Dashboard — 3D bar chart */
[data-module="dashboard"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2360A5FA'/%3E%3Cstop offset='1' stop-color='%232563EB'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FBBF24'/%3E%3Cstop offset='1' stop-color='%23D97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='28' width='14' height='30' rx='4' fill='url(%23b)'/%3E%3Crect x='6' y='28' width='14' height='8' rx='4' fill='%23fff' opacity='.3'/%3E%3Crect x='25' y='16' width='14' height='42' rx='4' fill='url(%23a)'/%3E%3Crect x='25' y='16' width='14' height='10' rx='4' fill='%23fff' opacity='.3'/%3E%3Crect x='44' y='6' width='14' height='52' rx='4' fill='url(%23c)'/%3E%3Crect x='44' y='6' width='14' height='12' rx='4' fill='%23fff' opacity='.3'/%3E%3Crect x='2' y='58' width='60' height='3' rx='1.5' fill='%23CBD5E1'/%3E%3C/svg%3E") !important;
}

/* 💳 Wallet — 3D credit card */
[data-module="wallet"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2322D3EE'/%3E%3Cstop offset='1' stop-color='%230891B2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='12' width='60' height='40' rx='8' fill='url(%23a)'/%3E%3Crect x='2' y='12' width='60' height='10' rx='8' fill='%23fff' opacity='.25'/%3E%3Crect x='2' y='26' width='60' height='8' fill='%23065F68' opacity='.35'/%3E%3Crect x='8' y='40' width='22' height='5' rx='2.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23FFD700'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='53' cy='43' r='6' fill='%23FF8C00' opacity='.7'/%3E%3C/svg%3E") !important;
}

/* 💸 Payments — 3D dollar coin */
[data-module="payments"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='32' cy='36' rx='26' ry='8' fill='%23047857'/%3E%3Ccircle cx='32' cy='28' r='26' fill='url(%23a)'/%3E%3Ccircle cx='32' cy='28' r='22' fill='none' stroke='%23fff' stroke-width='2' opacity='.2'/%3E%3Cellipse cx='32' cy='24' rx='20' ry='14' fill='%23fff' opacity='.12'/%3E%3Ctext x='32' y='36' text-anchor='middle' font-family='Arial' font-weight='900' font-size='26' fill='%23fff'%3E%24%3C/text%3E%3Cellipse cx='26' cy='18' rx='8' ry='5' fill='%23fff' opacity='.15'/%3E%3C/svg%3E") !important;
}

/* ⇄ Trading — 3D exchange arrows */
[data-module="trading"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23FB923C'/%3E%3Cstop offset='1' stop-color='%23EA580C'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%2360A5FA'/%3E%3Cstop offset='1' stop-color='%232563EB'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 20 L44 20' stroke='url(%23a)' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M36 10 L48 20 L36 30' fill='none' stroke='url(%23a)' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M56 44 L20 44' stroke='url(%23b)' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M28 34 L16 44 L28 54' fill='none' stroke='url(%23b)' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 📈 Earn — 3D chart trending up */
[data-module="earn"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%2310B981' stop-opacity='.1'/%3E%3Cstop offset='1' stop-color='%2310B981' stop-opacity='.4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 54 L20 38 L32 44 L56 12 L56 54 Z' fill='url(%23a)'/%3E%3Cpolyline points='6,54 20,38 32,44 56,12' fill='none' stroke='url(%23b)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='56' cy='12' r='6' fill='%23059669'/%3E%3Ccircle cx='56' cy='12' r='3' fill='%23fff'/%3E%3Crect x='2' y='56' width='60' height='3' rx='1.5' fill='%23CBD5E1'/%3E%3C/svg%3E") !important;
}

/* 🎨 NFT — 3D paint palette */
[data-module="nft"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F9A8D4'/%3E%3Cstop offset='1' stop-color='%23C026D3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 4 C14 4 2 18 2 32 C2 46 10 56 22 56 C26 56 28 52 26 50 C24 48 24 44 28 44 L34 44 C50 44 62 34 62 22 C62 12 48 4 32 4Z' fill='url(%23a)'/%3E%3Cellipse cx='28' cy='20' rx='12' ry='8' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='20' cy='20' r='5' fill='%23EF4444'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='34' cy='16' r='5' fill='%23FBBF24'/%3E%3Ccircle cx='34' cy='16' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='46' cy='22' r='5' fill='%233B82F6'/%3E%3Ccircle cx='46' cy='22' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='44' cy='34' r='5' fill='%2322C55E'/%3E%3Ccircle cx='44' cy='34' r='2' fill='%23fff' opacity='.4'/%3E%3C/svg%3E") !important;
}

/* 🏦 Treasury — 3D gold bank building */
[data-module="treasury"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FDE68A'/%3E%3Cstop offset='1' stop-color='%23D97706'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FBBF24'/%3E%3Cstop offset='1' stop-color='%23B45309'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 4 L60 20 L4 20 Z' fill='url(%23a)'/%3E%3Cpath d='M32 4 L60 20 L32 14 Z' fill='%23fff' opacity='.2'/%3E%3Crect x='4' y='20' width='56' height='5' fill='url(%23b)'/%3E%3Crect x='10' y='25' width='8' height='24' rx='2' fill='url(%23a)'/%3E%3Crect x='10' y='25' width='8' height='6' rx='2' fill='%23fff' opacity='.2'/%3E%3Crect x='23' y='25' width='8' height='24' rx='2' fill='url(%23a)'/%3E%3Crect x='23' y='25' width='8' height='6' rx='2' fill='%23fff' opacity='.2'/%3E%3Crect x='36' y='25' width='8' height='24' rx='2' fill='url(%23a)'/%3E%3Crect x='46' y='25' width='8' height='24' rx='2' fill='url(%23a)'/%3E%3Crect x='4' y='49' width='56' height='5' fill='url(%23b)'/%3E%3Crect x='2' y='54' width='60' height='5' rx='2' fill='url(%23b)'/%3E%3Crect x='2' y='54' width='60' height='2' rx='1' fill='%23fff' opacity='.15'/%3E%3C/svg%3E") !important;
}

/* 🏪 Merchant — 3D store */
[data-module="merchant"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%236D28D9'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F0ABFC'/%3E%3Cstop offset='1' stop-color='%23A855F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='24' width='52' height='36' rx='4' fill='%23EDE9FE'/%3E%3Crect x='6' y='24' width='52' height='36' rx='4' fill='none' stroke='%23C4B5FD' stroke-width='1'/%3E%3Cpath d='M2 10 L62 10 L58 28 L6 28 Z' fill='url(%23a)'/%3E%3Cpath d='M2 10 L62 10 L60 18 L4 18 Z' fill='%23fff' opacity='.2'/%3E%3Crect x='22' y='38' width='20' height='22' rx='4' fill='url(%23b)'/%3E%3Crect x='22' y='38' width='20' height='6' rx='4' fill='%23fff' opacity='.2'/%3E%3Ccircle cx='38' cy='50' r='2' fill='%23FFD700'/%3E%3Crect x='10' y='32' width='10' height='10' rx='2' fill='%2334D399' opacity='.4'/%3E%3Crect x='44' y='32' width='10' height='10' rx='2' fill='%23FBBF24' opacity='.4'/%3E%3C/svg%3E") !important;
}

/* 📒 Xero — 3D green ledger book */
[data-module="xero"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235EEAD4'/%3E%3Cstop offset='1' stop-color='%230D9488'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='14' y='4' width='44' height='56' rx='4' fill='url(%23a)'/%3E%3Crect x='14' y='4' width='44' height='14' rx='4' fill='%23fff' opacity='.2'/%3E%3Crect x='6' y='8' width='10' height='48' rx='4' fill='%230F766E'/%3E%3Crect x='6' y='8' width='10' height='12' rx='4' fill='%23fff' opacity='.1'/%3E%3Crect x='22' y='26' width='28' height='3' rx='1.5' fill='%23fff' opacity='.45'/%3E%3Crect x='22' y='33' width='22' height='3' rx='1.5' fill='%23fff' opacity='.35'/%3E%3Crect x='22' y='40' width='26' height='3' rx='1.5' fill='%23fff' opacity='.3'/%3E%3Crect x='22' y='47' width='18' height='3' rx='1.5' fill='%23fff' opacity='.2'/%3E%3Crect x='22' y='12' width='16' height='8' rx='2' fill='%23fff' opacity='.3'/%3E%3C/svg%3E") !important;
}

/* 🛡️ Security — 3D blue shield with check */
[data-module="security"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2393C5FD'/%3E%3Cstop offset='1' stop-color='%231D4ED8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 2 L58 16 L58 36 C58 50 46 58 32 62 C18 58 6 50 6 36 L6 16 Z' fill='url(%23a)'/%3E%3Cpath d='M32 2 L58 16 L58 30 C46 28 18 22 6 16 Z' fill='%23fff' opacity='.2'/%3E%3Cpath d='M24 32 L30 40 L42 26' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='28' cy='16' rx='12' ry='6' fill='%23fff' opacity='.1'/%3E%3C/svg%3E") !important;
}

/* 🔗 API Keys — 3D cyan key */
[data-module="apikeys"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2367E8F9'/%3E%3Cstop offset='1' stop-color='%230891B2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='22' cy='26' r='16' fill='url(%23a)'/%3E%3Cellipse cx='22' cy='22' rx='12' ry='8' fill='%23fff' opacity='.2'/%3E%3Ccircle cx='22' cy='26' r='7' fill='%23065F68' opacity='.35'/%3E%3Ccircle cx='22' cy='26' r='3.5' fill='%23fff' opacity='.5'/%3E%3Crect x='34' y='23' width='26' height='7' rx='3.5' fill='url(%23a)'/%3E%3Crect x='34' y='23' width='26' height='3' rx='1.5' fill='%23fff' opacity='.2'/%3E%3Crect x='50' y='30' width='5' height='10' rx='2.5' fill='url(%23a)'/%3E%3Crect x='43' y='30' width='5' height='7' rx='2.5' fill='url(%23a)'/%3E%3C/svg%3E") !important;
}

/* 🪪 KYC Identity — 3D ID card */
[data-module="identity"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237DD3FC'/%3E%3Cstop offset='1' stop-color='%230369A1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='10' width='60' height='44' rx='8' fill='url(%23a)'/%3E%3Crect x='2' y='10' width='60' height='14' rx='8' fill='%23fff' opacity='.2'/%3E%3Ccircle cx='20' cy='36' r='9' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='20' cy='34' r='5' fill='%230369A1' opacity='.25'/%3E%3Cellipse cx='20' cy='44' rx='8' ry='4' fill='%23fff' opacity='.6'/%3E%3Crect x='36' y='30' width='20' height='4' rx='2' fill='%23fff' opacity='.6'/%3E%3Crect x='36' y='38' width='16' height='3' rx='1.5' fill='%23fff' opacity='.4'/%3E%3Crect x='36' y='44' width='12' height='3' rx='1.5' fill='%23fff' opacity='.3'/%3E%3C/svg%3E") !important;
}

/* 📋 KYC Wizard — 3D purple clipboard */
[data-module="kyc"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23D8B4FE'/%3E%3Cstop offset='1' stop-color='%237C3AED'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='8' y='10' width='48' height='50' rx='6' fill='url(%23a)'/%3E%3Crect x='8' y='10' width='48' height='14' rx='6' fill='%23fff' opacity='.2'/%3E%3Crect x='20' y='2' width='24' height='14' rx='5' fill='%235B21B6'/%3E%3Crect x='20' y='2' width='24' height='6' rx='5' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='32' cy='9' r='3' fill='%23D8B4FE'/%3E%3Crect x='16' y='30' width='22' height='3.5' rx='1.75' fill='%23fff' opacity='.5'/%3E%3Crect x='16' y='38' width='32' height='3.5' rx='1.75' fill='%23fff' opacity='.4'/%3E%3Crect x='16' y='46' width='18' height='3.5' rx='1.75' fill='%23fff' opacity='.3'/%3E%3C/svg%3E") !important;
}

/* 📡 Monitoring — 3D red radar */
[data-module="monitor"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FCA5A5'/%3E%3Cstop offset='1' stop-color='%23DC2626'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='28' fill='url(%23a)'/%3E%3Cellipse cx='32' cy='26' rx='24' ry='16' fill='%23fff' opacity='.12'/%3E%3Ccircle cx='32' cy='32' r='20' fill='none' stroke='%23fff' stroke-width='2' opacity='.2'/%3E%3Ccircle cx='32' cy='32' r='12' fill='none' stroke='%23fff' stroke-width='2' opacity='.3'/%3E%3Ccircle cx='32' cy='32' r='4' fill='%23fff'/%3E%3Cline x1='32' y1='32' x2='50' y2='16' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='16' r='3' fill='%23FBBF24'/%3E%3C/svg%3E") !important;
}

/* ✅ Approvals — 3D green circle check */
[data-module="approval"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236EE7B7'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='28' fill='url(%23a)'/%3E%3Cellipse cx='32' cy='26' rx='24' ry='16' fill='%23fff' opacity='.15'/%3E%3Cpath d='M20 32 L28 42 L46 22' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ⚙️ Settings — 3D gear */
[data-module="settings"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23CBD5E1'/%3E%3Cstop offset='1' stop-color='%23475569'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M28 2h8l2 8 7 3 6-5 6 6-5 6 3 7 8 2v8l-8 2-3 7 5 6-6 6-6-5-7 3-2 8h-8l-2-8-7-3-6 5-6-6 5-6-3-7-8-2v-8l8-2 3-7-5-6 6-6 6 5 7-3z' fill='url(%23a)'/%3E%3Cpath d='M28 2h8l2 8 7 3 6-5 6 6-5 6 3 7 8 2v4L28 2z' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='32' cy='32' r='11' fill='%23334155'/%3E%3Ccircle cx='32' cy='32' r='7' fill='%23CBD5E1' opacity='.4'/%3E%3Ccircle cx='29' cy='28' r='3' fill='%23fff' opacity='.25'/%3E%3C/svg%3E") !important;
}

/* 🏧 Fiat Gateway — 3D green banknote */
[data-module="fiat"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='14' width='52' height='34' rx='6' fill='%23047857' opacity='.4'/%3E%3Crect x='4' y='10' width='56' height='34' rx='6' fill='url(%23a)'/%3E%3Crect x='4' y='10' width='56' height='10' rx='6' fill='%23fff' opacity='.2'/%3E%3Crect x='8' y='14' width='48' height='26' rx='4' fill='none' stroke='%23fff' stroke-width='1' opacity='.25'/%3E%3Cellipse cx='32' cy='27' rx='11' ry='11' fill='%23047857' opacity='.3'/%3E%3Cellipse cx='32' cy='27' rx='9' ry='9' fill='%23065F46' opacity='.35'/%3E%3Ctext x='32' y='33' text-anchor='middle' font-family='Arial' font-weight='900' font-size='16' fill='%23fff'%3E$%3C/text%3E%3Ccircle cx='14' cy='27' r='6' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='50' cy='27' r='6' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='11' cy='16' r='2.5' fill='%23fff' opacity='.3'/%3E%3Ccircle cx='53' cy='16' r='2.5' fill='%23fff' opacity='.3'/%3E%3Ccircle cx='11' cy='38' r='2.5' fill='%23fff' opacity='.3'/%3E%3Ccircle cx='53' cy='38' r='2.5' fill='%23fff' opacity='.3'/%3E%3Cellipse cx='28' cy='15' rx='14' ry='6' fill='%23fff' opacity='.12'/%3E%3Cpath d='M42 16 L50 16 L50 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='.5'/%3E%3Cpath d='M43 23 L50 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") !important;
}

/* ══════════════════════════════════════
   ROLE CARDS — 3D icons (bigger)
   ══════════════════════════════════════ */
.role-card .role-icon {
  font-size: 0 !important;
  width: 80px !important;
  height: 80px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: 72px 72px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.2)) !important;
  transition: transform .25s ease !important;
}
.role-card:hover .role-icon {
  transform: scale(1.12) translateY(-4px) !important;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25)) !important;
}

/* Admin — 3D shield star */
.role-card:nth-child(1) .role-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2393C5FD'/%3E%3Cstop offset='1' stop-color='%231D4ED8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 2 L58 16 L58 36 C58 50 46 58 32 62 C18 58 6 50 6 36 L6 16 Z' fill='url(%23a)'/%3E%3Cpath d='M32 2 L58 16 L58 28 C46 28 18 22 6 16 Z' fill='%23fff' opacity='.25'/%3E%3Cpath d='M32 18 L35 28 L46 28 L37 34 L40 44 L32 38 L24 44 L27 34 L18 28 L29 28 Z' fill='%23FFD700'/%3E%3Cpath d='M32 18 L35 28 L46 28 L37 34 Z' fill='%23fff' opacity='.2'/%3E%3C/svg%3E") !important;
}

/* User — 3D person */
.role-card:nth-child(2) .role-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2367E8F9'/%3E%3Cstop offset='1' stop-color='%230891B2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='22' r='14' fill='url(%23a)'/%3E%3Cellipse cx='32' cy='19' rx='10' ry='7' fill='%23fff' opacity='.2'/%3E%3Cpath d='M8 58 C8 44 18 36 32 36 C46 36 56 44 56 58' fill='url(%23a)'/%3E%3Cpath d='M8 58 C8 44 18 36 32 36 C46 36 56 44 56 50 L8 50 Z' fill='%23fff' opacity='.1'/%3E%3C/svg%3E") !important;
}

/* Member — 3D gold star */
.role-card:nth-child(3) .role-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FDE68A'/%3E%3Cstop offset='1' stop-color='%23D97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 2 L40 22 L62 24 L46 38 L50 60 L32 48 L14 60 L18 38 L2 24 L24 22 Z' fill='url(%23a)'/%3E%3Cpath d='M32 2 L40 22 L62 24 L46 38 L32 2Z' fill='%23fff' opacity='.25'/%3E%3Cellipse cx='28' cy='20' rx='8' ry='5' fill='%23fff' opacity='.15'/%3E%3C/svg%3E") !important;
}

/* ══════════════════════════════════════
   3D DEPTH — Cards & Buttons
   ══════════════════════════════════════ */
.balance-hero {
  box-shadow: 0 8px 32px rgba(0,80,100,.1), 0 2px 8px rgba(0,0,0,.06), inset 0 1px 2px rgba(255,255,255,.6) !important;
}
.card, .stat-card, .sub-bal-card {
  box-shadow: 0 4px 16px rgba(0,80,100,.08), 0 1px 4px rgba(0,0,0,.04), inset 0 1px 1px rgba(255,255,255,.6) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.card:hover, .stat-card:hover, .sub-bal-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,80,100,.12), 0 2px 8px rgba(0,0,0,.06), inset 0 1px 1px rgba(255,255,255,.7) !important;
}
.btn-primary {
  box-shadow: 0 4px 12px rgba(0,151,167,.3), 0 2px 4px rgba(0,0,0,.1), inset 0 1px 1px rgba(255,255,255,.2) !important;
}
.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,151,167,.4), 0 3px 6px rgba(0,0,0,.15) !important;
}

/* 💳➕ Wallet Provision */
[data-module="walletprovision"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322D3EE'/%3E%3Cstop offset='1' stop-color='%230891B2'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='14' width='60' height='38' rx='8' fill='url(%23a)'/%3E%3Crect x='2' y='14' width='60' height='12' rx='8' fill='%23fff' opacity='.2'/%3E%3Crect x='2' y='28' width='60' height='8' fill='%23065F68' opacity='.3'/%3E%3Crect x='8' y='40' width='18' height='5' rx='2.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23FFD700'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='53' cy='43' r='6' fill='%23FF8C00' opacity='.7'/%3E%3Ccircle cx='52' cy='10' r='10' fill='url(%23b)'/%3E%3Cline x1='52' y1='5' x2='52' y2='15' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='47' y1='10' x2='57' y2='10' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* 💳➕ Wallet Provision */
[data-module="wallet-provision"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322D3EE'/%3E%3Cstop offset='1' stop-color='%230891B2'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='14' width='60' height='38' rx='8' fill='url(%23a)'/%3E%3Crect x='2' y='14' width='60' height='12' rx='8' fill='%23fff' opacity='.2'/%3E%3Crect x='2' y='28' width='60' height='8' fill='%23065F68' opacity='.3'/%3E%3Crect x='8' y='40' width='18' height='5' rx='2.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23FFD700'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='53' cy='43' r='6' fill='%23FF8C00' opacity='.7'/%3E%3Ccircle cx='52' cy='10' r='10' fill='url(%23b)'/%3E%3Cline x1='52' y1='5' x2='52' y2='15' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='47' y1='10' x2='57' y2='10' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* 💳➕ Wallet Provision */
[data-module="provision"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322D3EE'/%3E%3Cstop offset='1' stop-color='%230891B2'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='14' width='60' height='38' rx='8' fill='url(%23a)'/%3E%3Crect x='2' y='14' width='60' height='12' rx='8' fill='%23fff' opacity='.2'/%3E%3Crect x='2' y='28' width='60' height='8' fill='%23065F68' opacity='.3'/%3E%3Crect x='8' y='40' width='18' height='5' rx='2.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23FFD700'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='53' cy='43' r='6' fill='%23FF8C00' opacity='.7'/%3E%3Ccircle cx='52' cy='10' r='10' fill='url(%23b)'/%3E%3Cline x1='52' y1='5' x2='52' y2='15' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='47' y1='10' x2='57' y2='10' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* 💳➕ Wallet Provision */
[data-module="walletprov"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322D3EE'/%3E%3Cstop offset='1' stop-color='%230891B2'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='14' width='60' height='38' rx='8' fill='url(%23a)'/%3E%3Crect x='2' y='14' width='60' height='12' rx='8' fill='%23fff' opacity='.2'/%3E%3Crect x='2' y='28' width='60' height='8' fill='%23065F68' opacity='.3'/%3E%3Crect x='8' y='40' width='18' height='5' rx='2.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23FFD700'/%3E%3Ccircle cx='47' cy='43' r='6' fill='%23fff' opacity='.15'/%3E%3Ccircle cx='53' cy='43' r='6' fill='%23FF8C00' opacity='.7'/%3E%3Ccircle cx='52' cy='10' r='10' fill='url(%23b)'/%3E%3Cline x1='52' y1='5' x2='52' y2='15' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='47' y1='10' x2='57' y2='10' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* 🧪 Sandbox — 3D purple-indigo grid connector */
[data-module="sandbox"] .nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='sg1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236366f1'/%3E%3Cstop offset='1' stop-color='%238b5cf6'/%3E%3C/linearGradient%3E%3ClinearGradient id='sg2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2306b6d4'/%3E%3Cstop offset='1' stop-color='%230891b2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='4' y='4' width='24' height='24' rx='5' fill='url(%23sg1)'/%3E%3Crect x='4' y='4' width='24' height='8' rx='5' fill='%23fff' opacity='.25'/%3E%3Crect x='36' y='4' width='24' height='24' rx='5' fill='url(%23sg2)' opacity='.75'/%3E%3Crect x='36' y='4' width='24' height='8' rx='5' fill='%23fff' opacity='.18'/%3E%3Crect x='4' y='36' width='24' height='24' rx='5' fill='url(%23sg2)' opacity='.75'/%3E%3Crect x='4' y='36' width='24' height='8' rx='5' fill='%23fff' opacity='.18'/%3E%3Crect x='36' y='36' width='24' height='24' rx='5' fill='url(%23sg1)'/%3E%3Crect x='36' y='36' width='24' height='8' rx='5' fill='%23fff' opacity='.25'/%3E%3Ccircle cx='32' cy='32' r='9' fill='%23fff' opacity='.95'/%3E%3Ccircle cx='32' cy='32' r='5' fill='%236366f1'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23fff' opacity='.45'/%3E%3C/svg%3E") !important;
}