@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.88) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
:root{
  --bg:#0a0a0a;--surface:#141414;--card:#161616;--card2:#1c1c1c;
  --border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.16);
  --accent:#2563EB;--accent2:#2563EB;--accent3:#2563EB;--accent4:#2563EB;
  --text:#f0f0f0;--text2:#d0d0d0;--text3:#c5c5c5;
  --danger:#EF4444;--success:#22C55E;--warning:#F59E0B;--info:#0EA5E9;
  --radius:12px;--radius-sm:8px;
  --topbar-bg:#1a1a1a;--nav-bg:#1a1a1a;

  /* Nan Design System (Indigo/Electric Blue) */
  --gradient-brand: linear-gradient(135deg, #2563EB 0%, #2563EB 50%, #2563EB 100%);
  --font-logo: 'Manrope', 'Inter', sans-serif;
  --font-product: 'Inter', sans-serif;
  --fs-display: 64px; --fs-hero: 48px; --fs-h1: 40px; --fs-h2: 32px;
  --fs-h3: 24px; --fs-h4: 20px; --fs-body: 16px; --fs-caption: 14px; --fs-meta: 12px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px;
  --radius-btn: 12px; --radius-input: 14px; --radius-card: 20px;
  --radius-container: 24px; --radius-dialog: 24px;
  --shadow-soft: 0 2px 8px rgba(17,24,39,.06);
  --shadow-elevated: 0 8px 24px rgba(17,24,39,.10);

  /* Precise typography hierarchy */
  --type-display-hero: 700 48px/1.15 var(--font-product);
  --type-page-title: 700 36px/1.2 var(--font-product);
  --type-section-heading: 600 28px/1.25 var(--font-product);
  --type-card-title: 600 22px/1.3 var(--font-product);
  --type-subheading: 500 18px/1.4 var(--font-product);
  --type-body: 400 16px/1.5 var(--font-product);
  --type-label: 500 14px/1.4 var(--font-product);
  --type-caption: 400 12px/1.4 var(--font-product);

  /* Precise spacing system, 8 point grid */
  --pad-card: 24px; --pad-card-lg: 32px;
  --gap-section: 48px; --margin-page: 40px;
  --height-btn: 48px; --height-input: 48px;
}

/* Reusable component classes implementing the system above */
.nan-btn-primary{ height:var(--height-btn); padding:0 24px; border-radius:var(--radius-btn); border:none; background:var(--gradient-brand); color:#fff; font:600 15px var(--font-product); box-shadow:var(--shadow-soft); cursor:pointer; transition:transform .15s,box-shadow .15s; }
.nan-btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-elevated); }
.nan-btn-secondary{ height:var(--height-btn); padding:0 24px; border-radius:var(--radius-btn); border:1.5px solid var(--accent); background:#fff; color:var(--accent); font:600 15px var(--font-product); cursor:pointer; transition:background .15s; }
.nan-btn-secondary:hover{ background:rgba(37,99,235,.06); }
.nan-btn-ghost{ height:var(--height-btn); padding:0 16px; border:none; background:transparent; color:var(--accent); font:600 15px var(--font-product); cursor:pointer; }
.nan-input{ height:var(--height-input); padding:0 16px; border-radius:var(--radius-input); border:1px solid var(--border); background:#fff; font:400 15px var(--font-product); }
.nan-card{ background:#fff; border-radius:var(--radius-card); padding:var(--pad-card); box-shadow:var(--shadow-soft); transition:box-shadow .2s,transform .15s; }
.nan-card:hover{ box-shadow:var(--shadow-elevated); transform:translateY(-2px); }
.nan-card-lg{ background:#fff; border-radius:var(--radius-container); padding:var(--pad-card-lg); box-shadow:var(--shadow-soft); }
.nan-display-hero{ font:var(--type-display-hero); color:var(--text); }
.nan-page-title{ font:var(--type-page-title); color:var(--text); }
.nan-section-heading{ font:var(--type-section-heading); color:var(--text); }
.nan-card-title{ font:var(--type-card-title); color:var(--text); }
.nan-subheading{ font:var(--type-subheading); color:var(--text2); }
.nan-body{ font:var(--type-body); color:var(--text); }
.nan-label{ font:var(--type-label); color:var(--text); }
.nan-caption{ font:var(--type-caption); color:var(--text3); }
.nan-empty-state{ text-align:center; padding:56px 24px; border:2px dashed var(--border); border-radius:var(--radius-card); color:var(--text3); }
.nan-empty-state .t{ font:var(--type-card-title); color:var(--text); margin-bottom:6px; }
.nan-skeleton{ background:linear-gradient(90deg, var(--surface) 25%, var(--card2) 37%, var(--surface) 63%); background-size:400% 100%; animation:nanSkeleton 1.4s ease infinite; border-radius:var(--radius-input); }
@keyframes nanSkeleton{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.nan-fade-in{ animation:fadeIn .2s ease; }

[data-theme="light"]{
  --bg:#f0f0f0;
  --surface:#ffffff;
  --card:#ffffff;
  --card2:#f5f5f5;
  --border:#e5e5e5;
  --border2:#E0E7FF;
  --accent:#2563EB;
  --accent2:#2563EB;
  --accent3:#2563EB;
  --accent4:#2563EB;
  --text:#111111;
  --text2:rgba(0,0,0,.45);
  --text3:rgba(0,0,0,.45);
  --danger:#EF4444;
  --success:#22C55E;
  --topbar-bg:#ffffff;
  --nav-bg:#ffffff;
  --card-shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
}
*{box-sizing:border-box;margin:0;padding:0;transition:background-color .25s,border-color .25s,color .25s;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--bg);-webkit-font-smoothing:antialiased;}
body{
  font-family:'Inter var','Inter',sans-serif;
  font-feature-settings:'liga' 1,'calt' 1,'tnum' 1,'ss01' 1;
  background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-.012em;
}

/* ── App shell ── */
#app-root{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;max-width:480px;margin:0 auto;height:100%;overflow:hidden;background:transparent;box-shadow:none;scrollbar-width:none;display:flex;flex-direction:column;}
#app-root::before{display:none;}
#app-root::after{display:none;}
#app-root::-webkit-scrollbar{display:none;}

/* ── Background effects — none, pure black ── */
body::before{display:none;}
body::after{display:none;}

/* ── Top bar ── */
#globalTopBar{position:absolute;top:0;left:0;right:0;height:68px;z-index:200;display:none;align-items:center;justify-content:space-between;padding:12px 18px 12px 180px;background:var(--topbar-bg);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);box-sizing:border-box;}
.brand{display:flex;align-items:center;gap:9px;}



.net-pill{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:#ffffff;border:1px solid rgba(255,255,255,.12);padding:5px 12px;border-radius:100px;background:#1c1c1c;display:flex;align-items:center;gap:5px;letter-spacing:-.01em;}
.net-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:#2563EB;animation:pulse 2s ease infinite;flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes floatOrb1{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(30px,-40px) scale(1.05);}66%{transform:translate(-20px,20px) scale(.95);}}
@keyframes floatOrb2{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(-40px,30px) scale(1.08);}66%{transform:translate(20px,-20px) scale(.92);}}
#connectTopBtn{background:#2563EB;color:#f0f0f0;border:none;border-radius:100px;padding:8px 16px;font-family:'Inter',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 3px 16px rgba(37,99,235,0.45),inset 0 1px 0 rgba(255,255,255,0.15);white-space:nowrap;display:none;}
#connectTopBtn:hover{transform:translateY(-1px);}
#connectTopBtn.connected{background:rgba(37,99,235,.12);border:1.5px solid rgba(37,99,235,.4);box-shadow:none;color:var(--text);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:700;cursor:default;letter-spacing:-.01em;}

/* ── Bottom Nav ── */
.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:76px;z-index:100;background:var(--nav-bg);backdrop-filter:blur(32px);border-top:1px solid rgba(255,255,255,0.06);padding:6px 10px 10px;display:none;}
.bottom-nav.show{display:block;}
.nav-pill-wrap{display:flex;max-width:480px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:4px;gap:2px;}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border:1px solid transparent;background:transparent;color:var(--text3);font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all .18s;text-transform:uppercase;letter-spacing:.04em;border-radius:13px;}
.nav-btn .ni{display:flex;align-items:center;justify-content:center;transition:all .2s;}
.nav-btn.active{color:#f0f0f0;background:#1a1a1a;border-color:#1a1a1a;box-shadow:none;}
.nav-btn.active .ni{filter:drop-shadow(0 0 5px rgba(37,99,235,.6));}
/* Action button press effect */
.action{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.action:active .action-ico,.action:active > div > div:first-child{transform:scale(.9);transition:transform .12s ease;}
.nav-send-hl{background:rgba(37,99,235,.08);color:var(--accent3);border-color:rgba(37,99,235,.16)!important;flex:1.2;}
.nav-send-hl.active{background:rgba(37,99,235,.2);}

/* ── Pages ── */
.page{display:none;position:absolute;top:68px;left:0;right:0;bottom:76px;z-index:10;overflow-y:auto;overflow-x:hidden;padding:12px 14px 90px;animation:up .28s ease both;scrollbar-width:none;}
.page::-webkit-scrollbar{display:none;}
.page.active{display:block;}.page[style*="flex-direction:column"].active{display:flex;}
.page-land{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;display:none;flex-direction:column;z-index:20;overflow-y:auto;box-sizing:border-box;}
.page-land.active{display:flex!important;flex-direction:column!important;}
@keyframes up{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}

/* ── HOME PAGE ── */
.home-greeting{font-size:.95rem;color:var(--text3);margin-bottom:3px;font-weight:500;}
.home-name{font-size:1.4rem;font-weight:700;color:var(--text);letter-spacing:-.5px;margin-bottom:14px;}

/* Home balance card */
.home-bal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:12px;position:relative;overflow:hidden;}
.home-bal-card::before{display:none;}
.home-bal-lbl{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:#ffffff;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;}
.home-bal-num{font-size:2.8rem;font-weight:700;letter-spacing:-1.5px;line-height:1;color:#f0f0f0;margin-bottom:4px;}
.home-bal-ngn{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:rgba(147,197,253,0.5);margin-bottom:12px;}
.home-tok-row{display:flex;gap:6px;margin-top:2px;}
.tok{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:100px;padding:4px 10px;font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:.95rem;font-weight:500;color:#ffffff;}
.tok-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.usdc-dot{background:#2563EB;box-shadow:0 0 5px rgba(37,99,235,.7);}
.eurc-dot{background:#2563EB;box-shadow:0 0 5px rgba(37,99,235,.7);}

/* Home quick actions */
.home-actions-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;}
.home-action{background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.18);border-radius:16px;padding:14px 8px;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.home-action:hover{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.1);transform:translateY(-2px);}
.home-action:first-child{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(37,99,235,.1));border-color:rgba(37,99,235,.3);box-shadow:0 4px 20px rgba(37,99,235,.15);}
.home-action:first-child:hover{background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(37,99,235,.18));box-shadow:0 6px 24px rgba(37,99,235,.22);}
.home-action-icon-box{width:34px;height:34px;border-radius:10px;background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 7px;}
.home-action:first-child .home-action-icon-box{background:#2563EB;border:none;box-shadow:0 4px 12px rgba(37,99,235,.4);}
.home-action-icon{font-size:1rem;line-height:1;}
.home-action-label{font-size:1rem;font-weight:700;color:var(--text2);letter-spacing:.02em;}
.home-action:first-child .home-action-label{color:#f0f0f0;}

/* Naira wide button */
.naira-wide-btn{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:13px 16px;cursor:pointer;margin-bottom:12px;transition:all .2s;position:relative;overflow:hidden;}
.naira-wide-btn::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);pointer-events:none;}
.naira-wide-btn:hover{border-color:#ffffff;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.06));transform:translateY(-1px);}
.naira-wide-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--text2);flex-shrink:0;}
.naira-wide-text{flex:1;}
.naira-wide-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:2px;}
.naira-wide-sub{font-size:1rem;color:rgba(147,197,253,.5);}
.naira-wide-arrow{font-size:1.1rem;color:#ffffff;}

/* Home assets section */
.home-section-title{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:.95rem;font-weight:600;color:var(--text3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;}
.home-asset-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;margin-bottom:6px;background:rgba(255,255,255,.02);border:1px solid rgba(37,99,235,.1);cursor:pointer;transition:all .18s;}
.home-asset-row:last-child{margin-bottom:0;}
.home-asset-row:hover{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.22);transform:translateX(2px);}
.home-asset-left{display:flex;align-items:center;gap:10px;flex:1;}
.home-asset-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#f0f0f0;flex-shrink:0;position:relative;}
.home-asset-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.1);}
.home-asset-name{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:2px;}
.home-asset-sub{font-size:1rem;color:var(--text3);}
.home-asset-val{font-size:1rem;font-weight:700;color:var(--text);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;text-align:right;}
.home-asset-change{font-size:.95rem;color:var(--text3);text-align:right;margin-top:1px;font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;}
.home-asset-change.neutral{color:var(--text3);}

/* ── Cards ── */
.card{background:rgba(255,255,255,0.04);border:1px solid rgba(37,99,235,0.18);border-radius:var(--radius);padding:20px;margin-bottom:14px;box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(37,99,235,0.12),inset 0 0 0 0.5px rgba(255,255,255,0.03);}
.card-title{font-size:1rem;font-weight:700;letter-spacing:.08em;margin-bottom:14px;display:flex;align-items:center;gap:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent3);opacity:0.85;}
.cticon{width:20px;height:20px;border-radius:6px;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.25);display:flex;align-items:center;justify-content:center;font-size:1rem;}

/* Old balance card (send page) */
.bal-card{background:linear-gradient(145deg,#1a1a1a 0%,#111111 50%,#1a1a1a 100%);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);padding:22px;margin-bottom:14px;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.5);}
.bal-card::before{content:'';position:absolute;top:-20px;right:-20px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.2),transparent 70%);pointer-events:none;}
.bal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.bal-lbl{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:#ffffff;letter-spacing:.18em;text-transform:uppercase;}
.bal-badge{display:flex;align-items:center;gap:4px;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);border-radius:100px;padding:3px 8px;font-size:1rem;color:var(--accent3);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;}
.bal-num{font-size:3rem;font-weight:700;letter-spacing:-2px;line-height:1;margin-bottom:6px;color:#f0f0f0;}
.bal-usd{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--text3);margin-bottom:7px;}
.token-row{display:flex;gap:7px;margin-bottom:8px;}
.wal-row{display:flex;align-items:center;gap:7px;padding-top:8px;border-top:1px solid var(--border);}
.wal-dot{width:26px;height:26px;border-radius:8px;flex-shrink:0;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#f5f5f5;}
.wal-addr{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.wal-addr:hover{color:var(--text);}

/* ── Skeleton ── */
.skel{display:inline-block;background:linear-gradient(90deg,rgba(37,99,235,.08) 25%,rgba(37,99,235,.18) 50%,rgba(37,99,235,.08) 75%);background-size:200% 100%;animation:shimmer 1.4s ease infinite;border-radius:4px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skel-bal{width:80px;height:28px;border-radius:6px;}
.skel-small{width:50px;height:14px;border-radius:4px;}

/* ── Wallet Modal ── */
.wallet-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9000;align-items:flex-end;justify-content:center;backdrop-filter:blur(8px);}
.wallet-modal-overlay.show{display:flex;}
.wallet-modal{background:var(--bg);border:1px solid var(--border2);border-radius:20px 20px 0 0;padding:20px 16px 32px;width:100%;max-width:480px;animation:up .3s ease both;}
.wallet-modal-title{font-size:1rem;font-weight:700;text-align:center;margin-bottom:4px;}
.wallet-modal-sub{font-size:1rem;color:var(--text3);text-align:center;margin-bottom:16px;}
.wallet-logos-row{display:flex;justify-content:center;gap:10px;margin-bottom:16px;}
.wallet-logo-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;cursor:pointer;border:2px solid transparent;transition:all .2s;}
.wallet-logo-icon:hover{transform:translateY(-2px);border-color:var(--accent);}
.wallet-opt{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:7px;transition:all .15s;background:var(--surface);}
.wallet-opt:hover{border-color:var(--border2);background:var(--card2);}
.wallet-opt-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.wallet-opt-name{font-size:1rem;font-weight:600;margin-bottom:2px;}
.wallet-opt-desc{font-size:1rem;color:var(--text3);}
.wallet-opt-badge{margin-left:auto;font-size:1rem;padding:3px 7px;border-radius:4px;font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wallet-divider{display:flex;align-items:center;gap:10px;margin:12px 0;}
.wallet-divider::before,.wallet-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.wallet-divider span{font-size:1rem;color:var(--text3);}

/* ── Send / Forms ── */
.send-tabs{display:flex;gap:6px;margin-bottom:10px;}
.stab{flex:1;padding:10px;border:none;outline:none;border-radius:var(--radius-sm);background:transparent;color:var(--text3);font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:4px;}
.stab:focus,.stab:focus-visible{outline:none;box-shadow:none;}
.mode-switch-btn{border:none;border-radius:10px;background:transparent;color:var(--text3);font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;}
.mode-switch-btn.active{background:#2563EB;color:#fff;}
.stab.active{background:#2563EB;border-color:#2563EB;color:#fff;}
.field{margin-bottom:8px;}
.flbl{display:block;font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
input{width:100%;background:#1a1a1a;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:.95rem;padding:10px 13px;outline:none;transition:all .2s;-webkit-appearance:none;appearance:none;cursor:pointer;}
select{width:100%;background:#1a1a1a;border:1px solid #1a1a1a;border-radius:var(--radius-sm);color:var(--text);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:.95rem;padding:10px 13px;outline:none;transition:all .2s;-webkit-appearance:auto;appearance:auto;cursor:pointer;}
input:focus{outline:none;box-shadow:none;border-color:var(--border);}
input::placeholder{color:#ffffff;}
input:disabled{opacity:.5;cursor:not-allowed;}
.type-sel{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.topt{padding:9px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text3);font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .15s;}
.topt .oi{font-size:.95rem;}
.topt.active{border-color:#2563EB;background:#2563EB;color:#fff;}
.supply-tab.active{background:#2563EB !important;color:#fff !important;}
.amt-row{display:flex;gap:7px;align-items:flex-end;}
.amt-row .field{flex:1;margin-bottom:0;}
.max-btn{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);border-radius:var(--radius-sm);color:var(--accent3);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;padding:8px 10px;cursor:pointer;transition:all .15s;margin-bottom:8px;}
.max-btn:hover{background:rgba(37,99,235,.18);}
.amt-token-badge{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2px 6px;color:var(--text2);font-size:1rem;cursor:pointer;transition:all .15s;}
.amt-token-badge:hover{border-color:var(--accent);color:var(--accent3);}
.res-bar{display:none;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--radius-sm);margin-top:5px;font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;}
.res-bar.ok{background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.22);color:var(--success);}
.res-bar.no{background:rgba(248,113,113,.07);border:1px solid rgba(248,113,113,.22);color:var(--danger);}
.gas-row{display:flex;align-items:center;gap:7px;font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--success);margin-bottom:8px;padding:10px 13px;background:rgba(37,99,235,0.05);border:1px solid rgba(37,99,235,0.15);border-radius:10px;}
.gas-row .gas-icon{font-size:.95rem;}

/* ── Buttons ── */
.btn{width:100%;padding:15px;background:#2563EB;border:none;border-radius:var(--radius-sm);color:#f0f0f0;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px rgba(37,99,235,0.45),inset 0 1px 0 rgba(255,255,255,0.15);letter-spacing:.03em;}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 28px rgba(37,99,235,0.55);}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;background:var(--surface);box-shadow:none;color:var(--text3);border:1px solid var(--border);}
.btn-outline{background:transparent;border:1px solid var(--border2);box-shadow:none;color:var(--text2);}
.btn-outline:hover:not(:disabled){border-color:var(--accent);color:var(--accent3);background:rgba(37,99,235,.06);}
.btn-green{background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.3);color:var(--success);box-shadow:none;}
.btn-green:hover:not(:disabled){background:rgba(37,99,235,.25);}
.big-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 34px;background:#2563EB;border:none;border-radius:100px;color:#f5f5f5;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 5px 24px rgba(37,99,235,.45);transition:all .2s;width:100%;margin-bottom:10px;}
.big-btn:hover{transform:translateY(-2px);}
.big-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;}
.ibtn{background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:1rem;padding:4px 8px;cursor:pointer;white-space:nowrap;font-family:'Inter',sans-serif;transition:all .15s;}
.ibtn:hover{border-color:var(--border2);color:var(--text);}
.ibtn.red{color:var(--danger);border-color:rgba(248,113,113,.22);}
.ibtn.red:hover{background:rgba(248,113,113,.06);}

/* ── Confirm / Success ── */
.confirm-wrap{display:none;background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);padding:15px;margin-bottom:7px;animation:up .25s ease both;}
.confirm-wrap.show{display:block;}
.confirm-title{font-size:1rem;font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:6px;}
.confirm-sub{font-size:1rem;color:var(--text3);margin-bottom:13px;}
.conf-rows{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px;margin-bottom:13px;}
.conf-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;}
.conf-row:last-child{border-bottom:none;}
.conf-lbl{color:var(--text3);}
.conf-val{color:var(--text);text-align:right;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conf-val.big{font-size:1rem;font-weight:600;font-family:'Inter',sans-serif;}
.conf-val.warn{color:var(--text2);}
.conf-btns{display:flex;gap:8px;}
.conf-btns .btn{flex:1;}
.success-wrap{display:none;text-align:center;padding:32px 20px 24px;animation:up .35s cubic-bezier(.34,1.56,.64,1) both;}
.success-wrap.show{display:block;}
/* Cash App style: big animated green circle */
.success-circle{width:80px;height:80px;border-radius:50%;margin:0 auto 20px;background:#2563EB;display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#f0f0f0;box-shadow:0 8px 32px rgba(37,99,235,.4);animation:successPop .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes successPop{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.success-amount{font-family:'Inter var','Inter',sans-serif;font-size:2.4rem;font-weight:800;color:#f0f0f0;letter-spacing:-.04em;margin-bottom:4px;}
.success-title{font-size:1rem;font-weight:600;color:#ffffff;margin-bottom:16px;}
.success-recipient{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 16px;margin-bottom:16px;}
.success-rec-label{font-size:.875rem;color:var(--text3);margin-bottom:3px;}
.success-rec-val{font-size:1rem;font-weight:700;color:#f0f0f0;}
.success-time{font-size:.875rem;color:var(--green);margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:6px;}
.success-sub{font-size:.875rem;color:var(--text3);margin-bottom:8px;}
.success-hash{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:.875rem;color:var(--accent3);margin-bottom:18px;word-break:break-all;}
.success-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* ── QR / Receive ── */
.qr-wrap{display:flex;flex-direction:row;align-items:center;gap:11px;padding:5px 0;}
.qr-frame{background:#fff;border-radius:16px;padding:12px;flex-shrink:0;box-shadow:0 0 0 3px #2563EB, 0 8px 32px rgba(37,99,235,0.35);}
.recv-addr{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--text2);word-break:break-all;padding:7px 9px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);flex:1;line-height:1.65;}

/* ── Swap ── */
.swap-input{width:100%;background:transparent;border:none;color:var(--text);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:600;outline:none;padding:0;}
.swap-input::placeholder{color:#ffffff;}

/* ── Earn / Lend ── */
.earn-apy-hero{background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(37,99,235,.04));border:1px solid rgba(37,99,235,.25);border-radius:var(--radius);padding:22px;text-align:center;margin-bottom:14px;}
.earn-apy-num{font-size:3.2rem;font-weight:700;color:var(--success);letter-spacing:-2px;line-height:1;margin-bottom:4px;}
.earn-apy-label{font-size:1rem;color:rgba(37,99,235,.7);margin-bottom:2px;}
.earn-apy-sub{font-size:1rem;color:var(--text3);}
.earn-step{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.earn-step:last-child{border-bottom:none;}
.earn-step-num{width:24px;height:24px;border-radius:8px;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.3);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--accent3);flex-shrink:0;}
.earn-step-text{font-size:1rem;color:var(--text2);line-height:1.6;}
.lend-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:8px;}
.lend-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px;text-align:center;}
.lend-stat .ls-label{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
.lend-stat .ls-value{font-size:.95rem;font-weight:700;}
.position-card{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--success);border-radius:var(--radius-sm);padding:10px;margin-bottom:8px;}
.position-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:.95rem;}
.position-row:last-child{border-bottom:none;}
.stake-panel{display:none;}
.stake-panel.active{display:block;}

/* ── More page ── */
.more-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(37,99,235,.15);border-radius:14px;cursor:pointer;transition:all .2s;margin-bottom:8px;}
.more-item:hover{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.06);}
.more-item-left{display:flex;align-items:center;gap:12px;}
.more-item-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.more-item-title{font-size:.95rem;font-weight:600;color:var(--text);}
.more-item-sub{font-size:1rem;color:var(--text3);}
.more-item-arrow{font-size:1rem;color:var(--text3);}
.more-item.danger{border-color:rgba(248,113,113,.15);}
.more-item.danger:hover{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.05);}
.more-item.danger .more-item-title{color:var(--danger);}

/* ── Arc Name ── */
.arcname-card{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--accent);border-radius:var(--radius-sm);padding:10px;margin-bottom:8px;}
.arcname-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);}
.arcname-row:last-child{border-bottom:none;}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.price-opt{padding:8px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;cursor:pointer;background:var(--surface);transition:all .15s;}
.price-opt.active{border-color:var(--accent);background:rgba(37,99,235,.1);}
.price-opt .po-dur{font-size:1rem;color:var(--text3);margin-bottom:3px;}
.price-opt .po-price{font-size:1rem;font-weight:700;color:var(--text);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;}
.send-sm{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);border-radius:7px;color:var(--accent3);font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;padding:4px 9px;cursor:pointer;}
.dir-item{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);gap:9px;}
.dir-item:last-child{border-bottom:none;}
.dir-av{width:28px;height:28px;border-radius:8px;background:var(--accent);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#f5f5f5;}
.dir-info{flex:1;min-width:0;}
.dir-handle{font-size:.95rem;font-weight:600;margin-bottom:2px;}
.dir-addr{font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--text3);}

/* ── Tx History ── */
/* ── History / Activity ── */
.tx-item{display:flex;align-items:center;gap:12px;background:var(--card);border-bottom:1px solid var(--border);padding:14px 16px;cursor:pointer;transition:background .15s;}
.tx-item:first-child{border-radius:14px 14px 0 0;}
.tx-item:last-child{border-radius:0 0 14px 14px;border-bottom:none;}
.tx-item:only-child{border-radius:14px;}
.tx-item:hover{background:rgba(37,99,235,.04);}
.tx-ico{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tx-ico.out{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);}
.tx-ico.in{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2);}
.tx-ico.swap{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2);}
.tx-ico.bridge{background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.2);}
.tx-ico.stake{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);}
.tx-info{flex:1;min-width:0;}
.tx-title{font-size:1rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}
.tx-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tx-time{font-size:.95rem;color:var(--text3);}
.tx-badge{font-size:1rem;border-radius:100px;padding:2px 8px;font-weight:600;display:inline-block;}
.tx-badge.confirmed{background:rgba(37,99,235,.1);color:#2563EB;border:1px solid rgba(37,99,235,.2);}
.tx-badge.pending{background:rgba(255,255,255,.06);color:#2563EB;border:1px solid rgba(255,255,255,.06);}
.tx-badge.failed{background:rgba(248,113,113,.1);color:#2563EB;border:1px solid rgba(248,113,113,.2);}
.tx-badge.simulated{background:rgba(255,255,255,.06);color:#2563EB;border:1px solid rgba(255,255,255,.06);}
.tx-right{text-align:right;flex-shrink:0;}
.tx-amt{font-family:'Inter var','Inter',sans-serif;font-size:1rem;font-weight:700;white-space:nowrap;}
.tx-amt.out{color:#2563EB;}
.tx-amt.in{color:#2563EB;}
.tx-amt.swap{color:#2563EB;}
.tx-amt.neutral{color:var(--text2);}
.tx-link{font-size:.95rem;color:var(--accent3);text-decoration:none;display:block;margin-top:2px;}
.tx-link:hover{text-decoration:underline;}
.tx-group-lbl{font-size:.95rem;color:var(--text3);letter-spacing:.14em;text-transform:uppercase;padding:12px 2px 6px;}
.tx-group-wrap{border-radius:14px;overflow:hidden;border:1px solid var(--border);margin-bottom:8px;}
/* stats */
.hist-stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 12px;text-align:center;}
.hist-stat-num{font-family:'Inter var','Inter',sans-serif;font-size:1.5rem;font-weight:800;color:#f0f0f0;}
.hist-stat-lbl{font-size:.95rem;color:var(--text3);margin-top:4px;letter-spacing:.08em;text-transform:uppercase;}
.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.clear-hist-btn{background:transparent;border:1px solid rgba(248,113,113,.22);border-radius:6px;color:var(--danger);font-family:'Inter',sans-serif;font-size:1rem;padding:3px 9px;cursor:pointer;opacity:.7;}
.clear-hist-btn:hover{opacity:1;background:rgba(248,113,113,.06);}

/* ── Bridge / Naira ── */
.chain-badge{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 11px;font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--text2);text-align:center;}
.live-badge{background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.25);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:8px;font-size:1rem;color:var(--success);line-height:1.55;display:flex;align-items:center;gap:7px;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 1.5s ease infinite;flex-shrink:0;}
.info-banner{background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.22);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:8px;font-size:1rem;color:#60A5FA;line-height:1.55;}
.wrong-net{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:7px;font-size:1rem;color:var(--text2);display:none;align-items:center;gap:7px;}
.wrong-net.show{display:flex;}
.switch-net-btn{margin-left:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--text2);font-family:'Inter',sans-serif;font-size:1rem;padding:3px 9px;cursor:pointer;}

/* ── Misc ── */
.empty{text-align:center;padding:22px 16px;color:var(--text3);}
/* Skeleton shimmer */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-bal{height:52px;width:170px;border-radius:12px;margin:6px 0 8px;}
.skel-sub{height:14px;width:110px;border-radius:6px;margin-bottom:16px;}
.skel-chip{height:24px;width:88px;border-radius:100px;display:inline-block;margin-right:6px;}
.empty-icon{font-size:1.6rem;margin-bottom:6px;opacity:.5;}
.empty-text{font-size:1rem;line-height:1.65;}
.page-title{font-size:1.5rem;font-weight:700;letter-spacing:-.5px;margin-bottom:5px;}
.back-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--text3);font-family:'Inter',sans-serif;font-size:.95rem;cursor:pointer;padding:0 0 12px;transition:color .15s;}
.back-btn:hover{color:var(--text);}
.page-sub{font-size:1rem;color:var(--text2);margin-bottom:14px;line-height:1.65;font-weight:400;}
.dev-badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 8px;font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--text2);}
.tx-polling{display:flex;align-items:center;gap:6px;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.2);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:7px;font-size:1rem;color:var(--accent3);font-family:'Inter var','Inter',sans-serif;font-variant-numeric:tabular-nums;}
a{color:var(--accent3);text-decoration:none;}
a:hover{color:var(--text);}

/* ── Toast ── */
#toast{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%) translateY(-100px);
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:16px 20px 14px;
  min-width:min(320px,88vw);
  max-width:min(380px,92vw);
  text-align:left;
  z-index:2147483647;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s;
  opacity:0;pointer-events:none;color:var(--text);
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09);
  backdrop-filter:blur(24px);
}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}

/* Type variants */
#toast.success{
  background:#111111;
  border-color:rgba(37,99,235,.2);
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(37,99,235,.1);
}
#toast.success #toastIconBadge{background:rgba(37,99,235,.15);color:#2563EB;}
#toast.success #toastTitle{color:#f0f0f0;}

#toast.error{
  background:#1a1a1a;
  border-color:rgba(248,113,113,.2);
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(248,113,113,.1);
}
#toast.error #toastIconBadge{background:rgba(248,113,113,.15);color:#2563EB;}
#toast.error #toastTitle{color:#f0f0f0;}

#toast.info{
  background:#111111;
  border-color:rgba(37,99,235,.2);
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(37,99,235,.1);
}
#toast.info #toastIconBadge{background:rgba(37,99,235,.15);color:#2563EB;}
#toast.info #toastTitle{color:#f0f0f0;}

#toast.warning{
  background:#1a1a1a;
  border-color:#ffffff;
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
}
#toast.warning #toastIconBadge{background:rgba(37,99,235,.15);color:#2563EB;}
#toast.warning #toastTitle{color:#f0f0f0;}

/* Mobile: full width at bottom */
/* ── NAN nav: permanently hide replaced buttons ── */
#nan-history-btn{display:none !important;}
#navFaucetBtn{display:none !important;}
#nanNotifBtn{display:none !important;}
#themeToggle{display:none !important;}
#disconnectTopBtn{display:none !important;}
#disconnectTopBtnMobile{display:none !important;}


/* ── Tower-style wallet + net pill ── */
#nanWalletDropBtn{
  display:flex;align-items:center;gap:7px;
  background:#1c1c1c !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:100px;padding:4px 14px 4px 4px;
  font-family:'Inter var','Inter',sans-serif;
  font-size:13px;font-weight:700;
  color:#ffffff !important;cursor:pointer;
  transition:.2s;white-space:nowrap;letter-spacing:-.01em;
}
#nanWalletDot{
  width:24px;height:24px;border-radius:50%;
  background:#2563EB;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#fff;
}
#nanWalletDropLabel{font-size:13px;font-weight:700;letter-spacing:-.01em;}
@media(max-width:480px){
  #toast{
    bottom:80px !important;
    left:14px !important;
    right:14px !important;
    max-width:none !important;
    min-width:0 !important;
  }
}

/* ── Spinner ── */
.spinner{display:inline-block;width:11px;height:11px;border:2px solid rgba(237,233,254,.3);border-top-color:#f5f5f5;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:5px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Swap page specific ── */
.swap-box-wrap{background:rgba(255,255,255,0.02);border:1px solid rgba(37,99,235,0.18);border-radius:var(--radius);padding:4px;margin-bottom:14px;}
.swap-inner{background:var(--surface);padding:14px 16px 10px;}
.swap-inner.top{border-radius:14px 14px 4px 4px;}
.swap-inner.bottom{border-radius:4px 4px 14px 14px;padding:10px 16px 14px;}

/* ── Mobile ── */
@media(max-width:480px){
  /* Full width, no side shadows */
  #app-root{left:0;transform:none;max-width:100%;box-shadow:none;height:100dvh;}
  #app-root::before,#app-root::after{display:none;}

  /* Landing card transparent on mobile */
  .land-form-col > div{background:transparent !important;border:none !important;padding:0 !important;box-shadow:none !important;}

  /* Pages */
  .page{top:50px;bottom:68px!important;padding:8px 12px 90px!important;}
  /* == MOBILE TOPBAR LOGO FIX == */
  #globalTopBar{
    height:68px !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  .brand{
    display:flex !important;
    align-items:center !important;
    height:68px !important;
    overflow:visible !important;
  }
  .brand-logo{
    display:flex !important;
    align-items:center !important;
    background:none !important;
    box-shadow:none !important;
    overflow:visible !important;
    width:auto !important;
    height:auto !important;
  }
  #secretTapZone{
    display:flex !important;
    align-items:center !important;
    overflow:visible !important;
  }
  #secretTapZone svg{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    display:block !important;
    overflow:visible !important;
  }
  .net-pill{ display:none !important; }
  .theme-toggle-btn{ display:none !important; }
  #connectTopBtn{
    font-size:.72rem !important;
    padding:3px 8px !important;
    border-radius:20px !important;
    max-width:90px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #disconnectTopBtn{
    font-size:.65rem !important;
    padding:2px 7px !important;
    border-radius:12px !important;
    white-space:nowrap !important;
  }
  #aiBtn{
    bottom:88px !important;
    right:12px !important;
    width:42px !important;
    height:42px !important;
  }
  .page-land{top:0!important;bottom:0!important;overflow:hidden!important;}

  /* Nav — bigger touch targets */
  .bottom-nav{height:72px!important;padding-bottom:max(env(safe-area-inset-bottom),8px)!important;}
  .nav-btn{font-size:1rem!important;gap:4px!important;padding:8px 4px!important;font-weight:600!important;}
  .nav-btn .ni svg{width:22px!important;height:22px!important;}
  .nav-btn.active{color:var(--accent3)!important;}

  /* Top bar */
  #globalTopBar{padding:8px 14px!important;}
  
  .net-pill{font-size:1rem!important;padding:3px 7px!important;}
  #connectTopBtn{font-size:1rem!important;padding:6px 12px!important;}

  /* Home page */
  .home-bal-num{font-size:2.3rem!important;letter-spacing:-2px!important;}
  .home-bal-card{padding:16px!important;margin-bottom:10px!important;}
  .home-actions-top{gap:6px!important;margin-bottom:6px!important;}
  .home-action{padding:11px 6px!important;border-radius:13px!important;}
  .home-action-icon{font-size:1.2rem!important;margin-bottom:3px!important;}
  .home-action-label{font-size:1rem!important;}
  .naira-wide-btn{padding:11px 13px!important;margin-bottom:12px!important;}
  .naira-wide-icon{width:32px!important;height:32px!important;font-size:1rem!important;}
  .naira-wide-title{font-size:1rem!important;}
  .naira-wide-sub{font-size:1rem!important;}

  /* Unified page cards — tighter on mobile */
  .page > div[style*="border-radius:22px"]{
    border-radius:16px!important;
    padding:14px!important;
  }
  /* Balance amount inside unified card */
  .page > div[style*="border-radius:22px"] [style*="2.6rem"]{font-size:2rem!important;}
  .page > div[style*="border-radius:22px"] [style*="2.4rem"]{font-size:1.9rem!important;}
  /* Section padding inside unified card */
  .page > div[style*="border-radius:22px"] > div[style*="padding:22px"]{padding:14px!important;}
  .page > div[style*="border-radius:22px"] > div[style*="padding:20px"]{padding:12px 14px!important;}
  .page > div[style*="border-radius:22px"] > div[style*="padding:18px"]{padding:12px 14px!important;}
  .page > div[style*="border-radius:22px"] > div[style*="padding:15px"]{padding:10px 14px!important;}
  .page > div[style*="border-radius:22px"] > div[style*="padding:14px"]{padding:10px 14px!important;}
  .page > div[style*="border-radius:22px"] > div[style*="padding:12px"]{padding:10px 14px!important;}
  /* Page title in unified card */
  .page > div[style*="border-radius:22px"] > [style*="1.1rem"]{font-size:.95rem!important;}
  /* Swap inputs */
  .page > div[style*="border-radius:22px"] .swap-input{font-size:1.8rem!important;}
  /* Asset icons */
  .page > div[style*="border-radius:22px"] [style*="width:42px"]{width:36px!important;height:36px!important;}
  .page > div[style*="border-radius:22px"] [style*="width:50px"]{width:44px!important;height:44px!important;}

  /* Cards */
  .card{padding:14px!important;border-radius:16px!important;margin-bottom:10px!important;}
  .bal-card{padding:14px!important;border-radius:16px!important;}

  /* Inputs — prevent iOS zoom */
  input,select{font-size:16px!important;}
  .swap-input{font-size:1.4rem!important;}

  /* Buttons */
  .btn{padding:14px!important;font-size:.95rem!important;}
  .big-btn{padding:14px!important;font-size:1rem!important;}
  .ibtn{padding:5px 10px!important;font-size:1rem!important;}
  .max-btn{padding:7px 9px!important;font-size:1rem!important;}

  /* Send page */
  .send-tabs .stab{font-size:1rem!important;padding:8px 6px!important;}
  .topt{font-size:1rem!important;padding:9px 4px!important;}
  .gas-row{font-size:1rem!important;padding:8px 10px!important;}

  /* More page */
  .more-item{padding:12px 14px!important;border-radius:12px!important;margin-bottom:6px!important;}
  .more-item-icon{width:32px!important;height:32px!important;font-size:1rem!important;}
  .more-item-title{font-size:1rem!important;}
  .more-item-sub{font-size:1rem!important;}

  /* Earn page */
  .earn-apy-num{font-size:2.6rem!important;}
  .earn-apy-hero{padding:16px!important;}
  .lend-stat-grid{gap:6px!important;}
  .lend-stat{padding:8px!important;}
  .lend-stat .ls-value{font-size:.95rem!important;}

  /* History */
  .tx-item{padding:8px 0!important;}
  .tx-title{font-size:1rem!important;}
  .tx-amt{font-size:1rem!important;}

  /* Toast */
  #toast{font-size:.95rem!important;bottom:76px!important;max-width:88%!important;}

  /* Wallet modal slides up */
  .wallet-modal{border-radius:22px 22px 0 0!important;padding:18px 14px 36px!important;max-height:88vh;overflow-y:auto;}
  .wallet-modal-overlay{align-items:flex-end!important;}
  .wallet-opt{padding:11px 12px!important;min-height:52px!important;}

  /* AI button */
  #aiBtn{bottom:80px!important;right:12px!important;width:42px!important;height:42px!important;}

  /* Confirm card */
  .conf-row{font-size:1rem!important;}
  .conf-btns{gap:6px!important;}

  /* Swap page */
  .swap-box-wrap{margin-bottom:10px!important;}
  .swap-inner{padding:12px 14px 10px!important;}

  /* Safe area bottom */
  .bottom-nav{padding-bottom:max(env(safe-area-inset-bottom),10px)!important;}

  /* Page title */
  .page-title{font-size:1.2rem!important;}
  .page-sub{font-size:1rem!important;margin-bottom:10px!important;}

  /* Naira tabs */
  .stab{font-size:1rem!important;padding:7px 4px!important;}
}

[data-theme="light"] body{background:#fafafa;}
[data-theme="light"] .bal-card{background:#2563EB;}
[data-theme="light"] .home-bal-card{background:#2563EB;}
[data-theme="light"] 
[data-theme="light"] .nav-btn{color:#2563EB;background:transparent;border-color:transparent;}
[data-theme="light"] .nav-btn.active{background:rgba(37,99,235,0.06);color:#2563EB;border-color:rgba(37,99,235,0.12);}
[data-theme="light"] .nav-btn:hover{background:#ffffff;color:#000000;}
[data-theme="light"] .card{background:#ffffff;border-color:#f0f0f0;box-shadow:0 1px 2px rgba(0,0,0,0.05);}
[data-theme="light"] input,[data-theme="light"] select{background:#ffffff;border-color:#f0f0f0;color:#111111;font-size:15px;}
[data-theme="light"] input::placeholder{color:#000000;}
[data-theme="light"] .btn{background:#2563EB;box-shadow:0 1px 2px rgba(0,0,0,0.1);font-size:15px;font-weight:600;letter-spacing:.01em;}
[data-theme="light"] .more-item{background:#ffffff;border-color:#f0f0f0;}
[data-theme="light"] .more-item:hover{background:#ffffff;}
[data-theme="light"] .swap-inner,[data-theme="light"] .swap-box-wrap{background:#ffffff;border-color:#f0f0f0;box-shadow:0 1px 2px rgba(0,0,0,0.04);}
[data-theme="light"] .page-title{color:#111111;font-size:1.35rem;font-weight:700;}
[data-theme="light"] .page-sub{color:#2563EB;font-size:1rem;}
[data-theme="light"] .tx-item{background:#ffffff;border-color:#f0f0f0;}
[data-theme="light"] .tx-item:hover{background:#ffffff;}
[data-theme="light"] .tx-title{color:#111111;font-size:1rem;font-weight:600;}
[data-theme="light"] .tx-time{color:#2563EB;font-size:.95rem;}
[data-theme="light"] #desktopNav{background:#ffffff;border-right-color:#f0f0f0;}
[data-theme="light"] .dnav-btn{color:#000000;font-size:1rem;font-weight:500;}
[data-theme="light"] .dnav-btn.active{background:transparent;color:#111111;font-weight:700;opacity:1;}
[data-theme="light"] .dnav-btn.active::before{background:#2563EB;}
[data-theme="light"] .dnav-btn:hover{background:transparent;color:#111111;opacity:.85;}
[data-theme="light"] .dnav-logo-row{border-bottom-color:#f0f0f0;}
[data-theme="light"] .dnav-section-label{color:#2563EB;}
[data-theme="light"] .dnav-divider{background:#ffffff;}
[data-theme="light"] #globalTopBar{background:rgba(17,17,17,0.97);border-bottom-color:#f0f0f0;}
[data-theme="light"] .swap-input{color:#111111!important;font-size:1.6rem!important;font-weight:700!important;}
[data-theme="light"] .home-asset-row{background:#ffffff;border-color:#f0f0f0;}
[data-theme="light"] .home-asset-row:hover{background:#ffffff;}
[data-theme="light"] .home-asset-name{color:#111111;font-weight:600;font-size:1rem;}
[data-theme="light"] .home-asset-sub{color:#2563EB;font-size:.95rem;}
[data-theme="light"] .home-asset-val{color:#111111;font-weight:700;font-size:.95rem;}
[data-theme="light"] .info-banner{background:#ffffff;border-color:#f0f0f0;color:#000000;}
[data-theme="light"] .topbar-page-name{color:#111111;font-weight:600;}
[data-theme="light"] .page{background:#ffffff;}
[data-theme="light"] .more-item:hover{background:rgba(37,99,235,0.1);}
[data-theme="light"] .bottom-nav{border-top:1px solid rgba(37,99,235,0.15);}
[data-theme="light"] #globalTopBar{border-bottom:1px solid rgba(37,99,235,0.15);}



/* ══ LIGHT MODE ══ */
[data-theme="light"] body,[data-theme="light"] #app-root,[data-theme="light"] .page,[data-theme="light"] .page-land{background:var(--bg)!important;}
[data-theme="light"] body::before{background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px)!important;}
[data-theme="light"] body::after{background:radial-gradient(ellipse 700px 500px at 90% -10%,rgba(37,99,235,.1) 0%,transparent 60%),radial-gradient(ellipse 400px 400px at -5% 80%,rgba(37,99,235,.06) 0%,transparent 60%)!important;}

/* Topbar & Nav */
[data-theme="light"] #globalTopBar{background:rgba(245,243,255,.97)!important;border-bottom:1px solid rgba(37,99,235,.15)!important;}
[data-theme="light"] .bottom-nav{background:rgba(245,243,255,.98)!important;border-top:1px solid rgba(37,99,235,.15)!important;}
[data-theme="light"] .nav-btn{color:rgba(37,99,235,.75)!important;}
[data-theme="light"] .nav-btn.active{color:#2563EB!important;background:rgba(37,99,235,.1)!important;}
[data-theme="light"] .net-pill{color:#2563EB!important;border-color:rgba(37,99,235,.25)!important;background:rgba(37,99,235,.07)!important;}
[data-theme="light"] .net-pill::before{background:#2563EB!important;box-shadow:0 0 6px #2563EB!important;}

/* Cards - override ALL card backgrounds */
[data-theme="light"] .card{background:#ffffff!important;border-color:rgba(37,99,235,.14)!important;box-shadow:0 4px 20px rgba(37,99,235,.07)!important;}
[data-theme="light"] #sendCard{background:#ffffff!important;}
[data-theme="light"] #confirmCard{background:#ffffff!important;}
[data-theme="light"] .position-card,[data-theme="light"] .arcname-card{background:#ffffff!important;border-color:rgba(37,99,235,.14)!important;}
[data-theme="light"] .lend-stat{background:#ffffff!important;border-color:rgba(37,99,235,.14)!important;}

/* Balance card stays dark gradient - looks premium */
[data-theme="light"] .bal-card{background:#2563EB!important;}
[data-theme="light"] .home-bal-card{background:#2563EB!important;}

/* Slim balance strip on send page */
[data-theme="light"] #page-send > div[style*="linear-gradient"]{background:#2563EB!important;}

/* Inputs */
[data-theme="light"] input,[data-theme="light"] select{background:#ffffff!important;border-color:rgba(37,99,235,.2)!important;color:#1a1a1a!important;}
[data-theme="light"] input:focus{outline:none!important;box-shadow:none!important;border-color:var(--border)!important;}
[data-theme="light"] input::placeholder,[data-theme="light"] .swap-input::placeholder{color:#000000 !important;}
[data-theme="light"] .swap-input{color:#1a1a1a!important;}
[data-theme="light"] .fake-input{background:#ffffff!important;color:rgba(37,99,235,.4)!important;}

/* Buttons */
[data-theme="light"] .btn{box-shadow:0 4px 16px rgba(37,99,235,.3)!important;}
[data-theme="light"] .btn:disabled{background:#f5f5f5!important;color:#2563EB !important;border:1px solid rgba(37,99,235,.15)!important;box-shadow:none!important;}
[data-theme="light"] .btn-outline{border-color:rgba(37,99,235,.3)!important;color:#2563EB!important;background:transparent!important;}
[data-theme="light"] .ibtn{background:#ffffff!important;border-color:rgba(37,99,235,.2)!important;color:#2563EB!important;}
[data-theme="light"] .ibtn.red{color:#2563EB!important;border-color:rgba(37,99,235,.25)!important;}
[data-theme="light"] .max-btn{background:rgba(37,99,235,.08)!important;border-color:rgba(37,99,235,.2)!important;color:#2563EB!important;}
[data-theme="light"] #connectTopBtn.connected{background:rgba(37,99,235,.08)!important;border-color:rgba(37,99,235,.25)!important;color:#2563EB!important;}
[data-theme="light"] #disconnectTopBtn{background:rgba(37,99,235,.08)!important;border-color:rgba(37,99,235,.2)!important;}

/* Tabs */
[data-theme="light"] .stab{border-color:rgba(37,99,235,.15)!important;color:rgba(37,99,235,.45)!important;}
[data-theme="light"] .stab.active{background:#2563EB!important;border-color:#2563EB!important;color:#fff!important;}
[data-theme="light"] .topt{background:#ffffff!important;border-color:rgba(37,99,235,.15)!important;color:rgba(37,99,235,.45)!important;}
[data-theme="light"] .topt.active{background:#2563EB!important;border-color:#2563EB!important;color:#fff!important;}

/* Gas row */
[data-theme="light"] .gas-row{background:rgba(37,99,235,.07)!important;border-color:rgba(37,99,235,.2)!important;color:#2563EB!important;}

/* Onboarding page */
[data-theme="light"] #emailLoginBox{background:rgba(37,99,235,.06)!important;border-color:rgba(37,99,235,.2)!important;}
[data-theme="light"] #page-land 

/* Home page */
[data-theme="light"] .home-action{background:#ffffff!important;border-color:rgba(37,99,235,.15)!important;}
[data-theme="light"] .home-action:hover{background:rgba(37,99,235,.06)!important;border-color:#2563EB!important;}
[data-theme="light"] .naira-wide-btn{background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(37,99,235,.04))!important;border-color:rgba(37,99,235,.18)!important;}
[data-theme="light"] .home-asset-row{border-color:rgba(37,99,235,.1)!important;}
[data-theme="light"] .home-section-title{color:var(--text2) !important;}

/* More page */
[data-theme="light"] .more-item{background:#ffffff!important;border-color:rgba(37,99,235,.12)!important;}
[data-theme="light"] .more-item:hover{background:rgba(37,99,235,.05)!important;border-color:rgba(37,99,235,.25)!important;}

/* Swap */
[data-theme="light"] .swap-box-wrap{background:rgba(255,255,255,.5)!important;border-color:rgba(37,99,235,.15)!important;}
[data-theme="light"] .swap-inner{background:#ffffff!important;}
[data-theme="light"] .swap-inner.top,[data-theme="light"] .swap-inner.bottom{background:#f5f5f5!important;}

/* Earn */
[data-theme="light"] .earn-apy-hero{background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(37,99,235,.04))!important;border-color:rgba(37,99,235,.25)!important;}
[data-theme="light"] .earn-step{border-color:rgba(37,99,235,.1)!important;}
[data-theme="light"] .earn-step-num{background:rgba(37,99,235,.1)!important;border-color:rgba(37,99,235,.25)!important;color:#2563EB!important;}

/* Misc */
[data-theme="light"] .tx-item{border-color:rgba(37,99,235,.1)!important;}
[data-theme="light"] .res-bar.ok{background:rgba(37,99,235,.07)!important;border-color:rgba(37,99,235,.22)!important;}
[data-theme="light"] .res-bar.no{background:rgba(37,99,235,.07)!important;border-color:rgba(37,99,235,.22)!important;}
[data-theme="light"] .info-banner{background:rgba(37,99,235,.06)!important;border-color:rgba(37,99,235,.2)!important;}
[data-theme="light"] .wrong-net{background:rgba(255,255,255,.1)!important;border-color:#ffffff!important;}
[data-theme="light"] .live-badge{background:rgba(37,99,235,.06)!important;border-color:rgba(37,99,235,.22)!important;}
[data-theme="light"] .tx-polling{background:rgba(37,99,235,.06)!important;border-color:rgba(37,99,235,.18)!important;}
[data-theme="light"] .confirm-wrap{background:#ffffff!important;border-color:rgba(37,99,235,.25)!important;}
[data-theme="light"] .conf-rows{background:#f5f5f5!important;border-color:rgba(37,99,235,.15)!important;}
[data-theme="light"] .conf-row{border-color:rgba(37,99,235,.1)!important;}
[data-theme="light"] .success-wrap .success-circle{background:rgba(37,99,235,.1)!important;border-color:rgba(37,99,235,.25)!important;}
[data-theme="light"] .wallet-modal{background:#f5f5f5!important;border-color:rgba(37,99,235,.2)!important;}
[data-theme="light"] .wallet-opt{background:#ffffff!important;border-color:rgba(37,99,235,.12)!important;}
[data-theme="light"] .wallet-opt:hover{background:#f5f5f5!important;border-color:rgba(37,99,235,.25)!important;}
[data-theme="light"] #toast{background:#ffffff!important;border-color:rgba(37,99,235,.25)!important;color:#1a1a1a!important;}
[data-theme="light"] #toast.success{border-color:rgba(37,99,235,.4)!important;}
[data-theme="light"] #toast.error{border-color:rgba(37,99,235,.4)!important;}
[data-theme="light"] #toast.info{border-color:rgba(37,99,235,.4)!important;}
[data-theme="light"] #toastTitle{color:#1a1a1a!important;}
[data-theme="light"] #toastMsg{color:#5a5a5a!important;}
[data-theme="light"] .qr-frame{background:#fff!important;box-shadow:0 2px 12px rgba(37,99,235,.1)!important;}
[data-theme="light"] .recv-addr{background:#ffffff!important;border-color:rgba(37,99,235,.15)!important;}
[data-theme="light"] .chain-badge{background:#ffffff!important;border-color:rgba(37,99,235,.15)!important;}
[data-theme="light"] .price-opt{background:#ffffff!important;border-color:rgba(37,99,235,.15)!important;}
[data-theme="light"] .price-opt.active{background:rgba(37,99,235,.09)!important;border-color:#2563EB!important;}

/* ══ MOBILE IMPROVEMENTS ══ */
/* AI Chat panel - full mobile friendly */
#agentPanel {
  position: fixed !important;
  top: 80px !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: 480px !important;
  max-width: 480px !important;
  border-radius: 0 !important;
  transform: translateX(100%) !important;
  transition: transform .35s cubic-bezier(.32,1,.23,1) !important;
  border-left: 1px solid rgba(37,99,235,.3) !important;
  border-top: 1px solid rgba(37,99,235,.15) !important;
  overflow: hidden !important;
}
#agentPanel.open {
  transform: translateX(0) !important;
}

/* Larger tap targets on mobile */
@media(max-width:480px){
  /* AI button always visible and accessible */
  #aiBtn {
    bottom: 84px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  /* Agent panel full screen on mobile */
  #agentPanel {
    left: 0 !important;
    transform: translateY(100%) !important;
    border-radius: 0 !important;
    max-width: 100% !important;
  }
  #agentPanel.open {
    transform: translateY(0) !important;
  }

  /* Agent messages better spacing */
  #agentMessages {
    padding: 12px !important;
    gap: 8px !important;
    bottom: 72px !important;
  }

  /* Agent input bar */
  #agentInput {
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  /* Voice button bigger tap target */
  #voiceBtn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 1.2rem !important;
  }

  /* Marketplace + Gigs: [style*="2563EB"] color-override rules match any
     element whose inline style merely mentions the accent color (even for
     background), so active-tab pills with a blue background + white text
     get their text forced to the same blue as the background — invisible
     text. Restore white text on just these active-state pills. */
  body #page-marketplace [style*="background:#2563EB"],
  body #page-gigs [style*="background:#2563EB"]{
    color:#fff !important;
  }

  /* Pay Requests page: desktop-oriented 40px side padding plus 4-column
     stat/tile grids don't fit a phone width — cards were getting clipped
     off the right edge entirely. */
  #page-payreq > div{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .pr-stats-grid,
  .pr-tiles-grid,
  #payrollStatsRow{
    grid-template-columns: repeat(2,1fr) !important;
  }
  #page-payreq .pr-tile{
    padding:16px 10px !important;
  }
  #page-payreq .pr-tile span{
    font-size:.75rem !important;
    text-align:center !important;
  }

  /* Payroll page: same desktop 40px side-padding + 4-column stat grid
     overflow pattern as Pay Requests — Wallet Balance card was cut off. */
  #page-bulk > div{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Fiat page: 3-up balance card grid overflows viewport because grid items
     and their flex children don't shrink below content width by default —
     the "Not yet supported" Naira card was the worst offender. */
  #page-cashinout .pcard {
    min-width: 0 !important;
    padding: 12px 10px !important;
  }
  #page-cashinout .pcard > div {
    min-width: 0 !important;
  }
  #page-cashinout .pcard > div > div:first-child {
    min-width: 0 !important;
  }
  #page-cashinout .pcard > div > div:first-child > div:nth-child(2) {
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }
  #page-cashinout .pcard > div > div:last-child {
    width: 26px !important;
    height: 26px !important;
    font-size: .75rem !important;
  }

  /* Better nav tap targets */
  .nav-btn {
    min-height: 52px !important;
    padding: 8px 4px !important;
  }

  /* Wallet options bigger tap targets */
  .wallet-opt {
    min-height: 56px !important;
    padding: 12px 14px !important;
  }

  /* Home action buttons bigger */
  .home-action {
    min-height: 72px !important;
    padding: 14px 8px !important;
  }

  /* Better scroll feel */
  .page {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Confirm buttons stack on small screens */
  .conf-btns {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Price grid 2 col on mobile */
  .price-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* More items full width */
  .more-item {
    min-height: 60px !important;
  }

  /* Swap input bigger on mobile */
  .swap-input {
    font-size: 1.6rem !important;
  }

  /* QR layout stack on small screens */
  .qr-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }

  /* Page title adjust */
  .page-title {
    font-size: 1.3rem !important;
    margin-bottom: 4px !important;
  }

  /* Type selector 2 col on very small */
  .type-sel {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stat grid spacing */
  .lend-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* Very small phones (SE, small Androids) */
@media(max-width:360px){
  .home-bal-num { font-size: 2rem !important; }
  .home-actions-top { grid-template-columns: repeat(3,1fr) !important; gap: 5px !important; }
  .home-action-label { font-size: .6rem !important; }
  .nav-btn span { font-size: 1rem !important; font-weight: 700 !important; }
  .bottom-nav { height: 64px !important; }
  .page { bottom: 64px !important; }
  #aiBtn { bottom: 76px !important; }
}

/* ══ TABLET (481px – 768px) ══ */
@media(min-width:481px) and (max-width:768px){
  #app-root{
    max-width:560px;
    border-radius:24px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    height:min(820px,95dvh);
    position:fixed;
  }
  .page{padding:18px 20px 24px;}
  .home-bal-num{font-size:3rem;}
  .card{padding:22px;}
}

/* ══ DESKTOP (769px+) ══ */
@media(min-width:769px){
  html,body{overflow:hidden;height:100%;background:var(--bg);}

  /* ── Landing page: full screen, no sidebar ── */
  .page-land.active{
    position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100vw !important;max-width:100vw !important;height:100vh !important;
    z-index:9999 !important;display:flex !important;
    flex-direction:column !important;overflow:hidden !important;
    transform:none !important;margin:0 !important;
    background:var(--bg) !important;
  }
  /* Top bar full width */
  .page-land.active > div:first-child{
    width:100% !important;max-width:100% !important;flex-shrink:0 !important;
  }
  /* Content area — two column layout on desktop */
  .page-land.active > div:last-child{
    flex:1 !important;display:flex !important;
    align-items:center !important;justify-content:center !important;
    overflow-y:auto !important;scrollbar-width:none !important;
    padding:40px 60px !important;max-width:100% !important;width:100% !important;
    gap:80px !important;flex-direction:row !important;
  }
  .page-land.active > div:last-child::-webkit-scrollbar{display:none !important;}
  /* Show hero branding column on desktop */
  .land-hero-col{display:flex !important;}
  /* Form column fixed width */
  .land-form-col{width:420px !important;flex-shrink:0 !important;max-width:420px !important;}
  /* Hide mobile-only trust bar on desktop */


  /* ── App root ── */
  #app-root{
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100%;max-width:100%;height:100vh;
    overflow:visible;box-shadow:none;transform:none;background:transparent;
  }
  #app-root::before,#app-root::after{display:none;}

  /* Hide mobile elements */
  #globalTopBar{display:none !important;}
  .bottom-nav{display:none !important;}

  /* ── Sidebar — starts below topbar ── */
  #desktopNav{
    flex-direction:column;
    position:fixed;top:0;left:0;
    width:220px;height:100vh;
    background:var(--bg);
    border-right:1px solid var(--border);
    padding:0;gap:0;z-index:100;
    overflow:hidden;
  }
  #desktopNav .dnav-logo-row{
    display:none;
  }
  #desktopNav .dnav-logo{
    width:40px;height:20px;
    background:none;
    display:flex;align-items:center;
    flex-shrink:0;box-shadow:none;
  }
  #desktopNav .dnav-brand{
    font-family:'Inter',sans-serif;
    font-size:1.25rem;font-weight:900;letter-spacing:.06em;color:#fff;
  }
  #desktopNav .dnav-section-label{
    font-size:.95rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text3);
    padding:12px 20px 4px;
    font-family:'Inter',sans-serif;
  }
  #desktopNav{padding:12px 0 0;}
  #desktopNav .dnav-btn{
    display:flex;align-items:center;gap:13px;
    padding:13px 18px;border-radius:12px;
    border:none;background:transparent;
    color:var(--text3);font-family:'Inter',sans-serif;
    font-size:1rem;font-weight:600;cursor:pointer;
    transition:all .15s;text-align:left;
    margin:2px 8px;width:calc(100% - 16px);
    position:relative;
  }
  #desktopNav .dnav-btn::before{
    content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
    width:4px;height:0;background:#2563EB;border-radius:0 4px 4px 0;
    transition:height .2s;
  }
  #desktopNav .dnav-btn.active::before{height:24px;}
  #desktopNav .dnav-btn svg{
    flex-shrink:0;width:22px;height:22px;
    opacity:.35;transition:opacity .15s;
  }
  #desktopNav .dnav-btn:hover{background:var(--card2);color:var(--text2);}
  #desktopNav .dnav-btn:hover svg{opacity:.65;}
  #desktopNav .dnav-btn:hover::before{height:14px;}
  #desktopNav .dnav-btn.active{background:rgba(37,99,235,.1);color:var(--text);font-weight:800;}
  #desktopNav .dnav-btn.active svg{opacity:1;}
  #desktopNav .dnav-btn.dnav-send{color:#60A5FA;}
  #desktopNav .dnav-btn.dnav-send svg{opacity:.6;}
  #desktopNav .dnav-btn.dnav-send.active{background:rgba(37,99,235,.15);color:#2563EB;}
  #desktopNav .dnav-divider{height:1px;background:var(--border);margin:10px 16px;}
  #desktopNav > button, #desktopNav .dnav-btn{margin-left:8px;margin-right:8px;width:calc(100% - 16px);}

  /* ── Desktop topbar — full width with logo on left like Relay ── */
  #globalTopBar{
    display:none;
    position:fixed;top:0;left:0;right:0;height:64px;
    background:var(--topbar-bg);
    border-bottom:1px solid var(--border);
    align-items:center;justify-content:space-between;
    padding:0 28px;z-index:200;
  }
  #globalTopBar.desktop-show{display:none !important;}
  #globalTopBar .brand{display:flex !important;align-items:center;gap:10px;flex-shrink:0;}
  #globalTopBar #topbarPageInfo{display:flex !important;}

  /* ── Pages: full width below topbar ── */
  .page{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:auto !important;max-width:none !important;
    display:none !important;
    overflow-y:auto !important;overflow-x:hidden !important;
    flex-direction:column !important;align-items:center !important;
    padding:32px 0 48px !important;
    animation:none !important;isolation:auto !important;transform:none !important;
  }
  .page.active{display:flex !important;}
  #page-agent-ai{padding-top:14px !important;padding-bottom:0 !important;}
  #page-swap{padding-top:14px !important;padding-bottom:20px !important;}
  #page-bridge{padding-top:14px !important;padding-bottom:20px !important;}
  #page-cashinout{padding-bottom:20px !important;}

  /* Balance amount — must override .page > * font-size */
  #homeBalAmt { font-size: 2.8rem !important; font-weight: 800 !important; color: var(--text) !important; letter-spacing: -.05em !important; }
  #homeBalNgn { color: var(--text2) !important; }

  /* All direct children centered at 600px */
  .page > *{
    width:100% !important;max-width:600px !important;
    flex-shrink:0 !important;box-sizing:border-box !important;
    padding-left:24px !important;padding-right:24px !important;
  }
  /* Elements that already have their own padding — don't double-pad */
  .page > .card,
  .page > .send-card{
    padding-left:22px !important;padding-right:22px !important;
  }

  /* Cards */
  .card{padding:22px;border-radius:18px;}
  .card-title{font-size:.95rem;margin-bottom:14px;}
  .home-bal-num{font-size:2.6rem;}
  .home-bal-card{padding:22px;margin-bottom:12px;}

  /* Ensure ALL page content respects 600px — catch nested containers */
  #page-home > *,#page-send > *,#page-lend > *,
  #page-swap > *,#page-bridge > *,#page-history > *,
  #page-more > *,#page-arcname > *,#page-naira > *,
  #page-bulk > *,#page-history > *{
    max-width:600px !important;width:100% !important;
    box-sizing:border-box !important;
  }

  /* Quick actions */
  .home-actions-top{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;margin-bottom:10px !important;}
  .home-action{padding:14px 8px !important;border-radius:14px !important;}
  .home-action-icon{font-size:1.3rem !important;margin-bottom:4px !important;}
  .home-action-label{font-size:1rem !important;}

  /* Inputs & buttons */
  input,select{font-size:1rem;padding:11px 14px;}
  .flbl{font-size:1rem;margin-bottom:7px;}
  .btn{padding:14px;font-size:1rem;border-radius:14px;}
  .max-btn{padding:9px 13px;font-size:.95rem;}
  .page-title{font-size:1.5rem;margin-bottom:5px;}
  .page-sub{font-size:.95rem;margin-bottom:14px;}

  /* AI button */
  #aiBtn{bottom:32px !important;right:32px !important;width:50px !important;height:50px !important;border-radius:14px !important;}

  /* Agent panel slides from right */
  #agentPanel{top:80px !important;right:0 !important;bottom:0 !important;left:auto !important;width:480px !important;max-width:480px !important;border-radius:0 !important;border-left:1px solid rgba(37,99,235,.3) !important;transform:translateX(100%) !important;}
  #agentPanel.open{transform:translateX(0) !important;}

  /* Modals centered */
  .wallet-modal-overlay{align-items:center !important;}
  .wallet-modal{border-radius:22px !important;max-width:420px !important;}

  /* Toast centered in content area */
  #toast{bottom:36px !important;left:50% !important;max-width:380px !important;width:auto !important;min-width:180px !important;padding:10px 24px !important;}

  /* Pickers as centered modals */
  #chainPickerSheet,#bankPickerSheet{
    left:50% !important;right:auto !important;bottom:auto !important;top:50% !important;
    transform:translate(-50%,-50%) !important;width:380px !important;max-width:380px !important;max-height:60vh !important;
    border-radius:24px !important;border:1px solid var(--border2) !important;
    box-shadow:0 24px 64px rgba(0,0,0,.6) !important;padding:0 0 8px !important;
    background:var(--bg) !important;overflow-y:auto !important;
  }
  #bankPickerSheet::-webkit-scrollbar{width:3px;}
  #bankPickerSheet::-webkit-scrollbar-track{background:transparent;}
  #bankPickerSheet::-webkit-scrollbar-thumb{background:rgba(37,99,235,.3);border-radius:3px;}

  /* Scrollbar */
  .page::-webkit-scrollbar{display:block;width:3px;}
  .page::-webkit-scrollbar-track{background:transparent;}
  .page::-webkit-scrollbar-thumb{background:rgba(37,99,235,.2);border-radius:3px;}

}

/* ══ WIDE DESKTOP (1200px+) ══ */
@media(min-width:1200px){
  #desktopNav{width:240px;}
  .page{left:0 !important;}
  .page > *{max-width:600px !important;}
  #page-career-agent > *, #page-supplier-agent > *, #page-marketplace > *, #page-gigs > *, #page-cashinout > *, #page-payreq > *, #page-groupsavings > *, #page-payreq-new > *, #page-payreq-view > *, #page-bulk > *, #page-agent-ai > *, #page-agent-escrow > *, #page-history > *, #page-agent-recurring > *, #page-agent-invoice > *, #page-agent-send > *, #page-agent-trust > *, #page-agent-activity > *, #page-agent-nanopay > * { max-width: 100% !important; }
  #page-agent-nanopay{padding-top:14px !important;}
  #page-agent-send{padding-top:14px !important;}
  #page-agent-trust{padding-top:14px !important;}
  #page-agent-activity{padding-top:14px !important;}
  #page-agent-invoice{padding-top:14px !important;}
  #page-agent-recurring{padding-top:14px !important;}
  #page-history{padding-top:14px !important;}
  #page-agent-escrow{padding-top:14px !important;}
  .home-bal-num{font-size:3rem;}
  #toast{left:50% !important;}
}

/* —— Desktop topbar: hide mobile-only Arc pill, enlarge brand mark, tune wordmark weight —— */
@media(min-width:769px){
  html body #mobileNetPill{display:none !important;}
  #mobileBrandLogo svg{width:19px !important;height:27px !important;}
  #mobileBrandLogo .mb-word{font-weight:700 !important;}
}

/* —— Topbar nav links: purple highlight on hover —— */
.tnav-btn:hover{color:#2563EB !important;opacity:1 !important;}
#tnav-agent:hover{color:#2563EB !important;}


/* ── Mobile polish (max-width:480px) ── */
@media(max-width:480px){

  /* Prevent horizontal scroll */
  body,#app-root{overflow-x:hidden !important;}

  /* Fix NaN text showing during balance load */
  #homeBalAmt:empty::before,
  #homeBalAmt[data-loading]::before{content:'—';color:var(--text2);}

  /* Better touch targets for all buttons */
  button{min-height:44px;}

  /* Send/swap/bridge amount inputs — no iOS zoom */
  input[type="text"],input[type="number"],input[type="email"]{
    font-size:16px !important;
  }

  /* Balance card — tighter but readable */
  .home-bal-card{
    padding:16px 14px !important;
    border-radius:18px !important;
  }

  /* Token pills wrap properly */
  .home-bal-pills{
    flex-wrap:wrap !important;
    gap:6px !important;
  }

  /* Action buttons — even spacing */
  .home-actions-top{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
  }

  /* Asset rows — proper padding */
  .home-asset-row{
    padding:12px 10px !important;
    border-radius:12px !important;
  }

  /* Swap page — full width inputs */
  .swap-from-card,.swap-to-card{
    border-radius:16px !important;
    padding:14px !important;
  }

  /* Send page — recipient input */
  #sendAddr{
    font-size:16px !important;
    word-break:break-all !important;
  }

  /* Bridge page — chain selector */
  #bridgeChainSel{
    font-size:16px !important;
    width:100% !important;
  }

  /* History items — readable on small screen */
  .tx-row{
    padding:10px 12px !important;
    gap:10px !important;
  }
  .tx-row .tx-hash{
    font-size:1rem !important;
    max-width:120px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Toast — full width on mobile */
  #toast{
    left:12px !important;
    right:12px !important;
    bottom:80px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    text-align:center !important;
  }

  /* Modal / confirm sheets — full width */
  .conf-sheet,.modal-sheet{
    border-radius:20px 20px 0 0 !important;
    padding:20px 16px !important;
  }

  /* Earn page — pool stats stack */
  .earn-stats{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  /* More page items */
  .more-grid{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  /* Right panel — hidden on mobile */
  #desktopRightPanel{display:none !important;}
}

/* ── Very small phones (360px) ── */
@media(max-width:360px){
  .home-bal-num{font-size:2rem !important;}
  .home-action-label{font-size:.95rem !important;}
  .nav-btn span{font-size:1rem !important;font-weight:700 !important;}
  
  .home-actions-top{grid-template-columns:repeat(3,1fr) !important;gap:5px !important;}
}

/* ══════════════════════════════════════════
   MOBILE — TARGETED (max-width: 480px)
   Only targets real classes/IDs in HTML
   Does NOT affect desktop (min-width:481px)
══════════════════════════════════════════ */
@media(max-width:480px){

  /* ── Core page sizing ── */
  .page{
    top:54px !important;
    bottom:70px !important;
    padding:12px 12px 24px !important;
  }

  /* ── Actions grid on home ── */
  .mob-actions{
    padding:12px 4px !important;
  }
  .mob-actions > div{
    /* Each action wrapper */
    flex:1;
    padding:6px 4px !important;
  }
  .mob-action-item{
    padding:6px 4px !important;
    gap:6px !important;
    min-height:64px;
    justify-content:center;
  }
  .mob-action-ico{
    width:44px !important;
    height:44px !important;
    border-radius:13px !important;
  }
  .mob-action-ico svg{
    width:20px !important;
    height:20px !important;
  }

  /* ── Asset rows ── */
  .mob-asset-row{
    padding:12px 14px !important;
    gap:10px !important;
  }
  .mob-asset-row img{
    width:34px !important;
    height:34px !important;
  }

  /* ── More page menu items ── */
  .mob-menu-item{
    padding:14px 14px !important;
    gap:12px !important;
    min-height:56px !important;
  }

  /* ── All page cards — comfortable padding ── */
  .mob-card{
    padding:14px !important;
    border-radius:16px !important;
  }

  /* ── Bottom nav — taller tap targets ── */
  .bottom-nav{
    height:70px !important;
    padding:6px 8px max(env(safe-area-inset-bottom),10px) !important;
  }
  .nav-btn{
    min-height:48px !important;
    padding:6px 8px !important;
    gap:3px !important;
    flex:1;
    border-radius:10px !important;
  }
  .nav-btn .nl{
    font-size:.78rem !important;
  }
  .nav-btn .ni svg{
    width:22px !important;
    height:22px !important;
  }
  .nav-pill-wrap{
    padding:3px !important;
    gap:2px !important;
    border-radius:14px !important;
  }

  /* ── Top bar ── */
  #globalTopBar{
    padding:8px 12px !important;
    min-height:54px !important;
  }

  /* ── All inputs — prevent iOS zoom ── */
  input,select,textarea{
    font-size:16px !important;
    min-height:46px !important;
  }
  /* Exception: large number inputs */
  .amt-input,
  input[style*="font-size:1.6rem"],
  input[style*="font-size:2rem"],
  input[style*="font-size:2.2rem"]{
    font-size:1.5rem !important;
    min-height:auto !important;
  }

  /* ── Buttons — easy to tap ── */
  .btn{
    min-height:50px !important;
    padding:14px 16px !important;
    font-size:.95rem !important;
    border-radius:13px !important;
  }

  /* ── Back button ── */
  .back-btn{
    min-height:auto !important;
    padding:0 0 12px !important;
    font-size:.9rem !important;
  }

  /* ── Earn tabs ── */
  .send-tabs{
    gap:2px !important;
    padding:3px !important;
  }
  .send-tabs .stab{
    font-size:.82rem !important;
    padding:8px 4px !important;
    min-height:36px !important;
  }

  /* ── Token selector buttons ── */
  .topt{
    padding:10px 6px !important;
    font-size:.875rem !important;
    min-height:44px !important;
    gap:5px !important;
  }

  /* ── Confirm card ── */
  .confirm-wrap{
    padding:16px !important;
    border-radius:16px !important;
  }
  .conf-rows{margin-bottom:12px !important;}
  .conf-row{
    font-size:.9rem !important;
    padding:8px 0 !important;
  }
  .conf-btns{
    gap:8px !important;
    margin-top:14px !important;
  }

  /* ── Success card ── */
  .success-wrap{padding:24px 16px 20px !important;}
  .success-circle{
    width:64px !important;
    height:64px !important;
    font-size:1.6rem !important;
  }
  .success-amount{font-size:1.8rem !important;}
  .success-actions{gap:8px !important;}

  /* ── History tx rows ── */
  .tx-item{
    padding:12px 12px !important;
    gap:10px !important;
    border-radius:8px !important;
  }
  .tx-ico{
    width:34px !important;
    height:34px !important;
    border-radius:10px !important;
    flex-shrink:0 !important;
  }
  .tx-title{font-size:.875rem !important;}
  .tx-amt{font-size:.875rem !important;}
  .tx-time{font-size:.75rem !important;}

  /* ── History stats ── */
  .hist-stat{padding:10px 6px !important;}
  .hist-stat-num{font-size:1.2rem !important;}
  .hist-stat-lbl{font-size:.72rem !important;}

  /* ── Toast on mobile ── */
  #toast{
    left:12px !important;
    right:12px !important;
    top:12px !important;
    width:auto !important;
    max-width:none !important;
    transform:translateY(-120px) !important;
  }
  #toast.show{
    transform:translateY(0) !important;
  }

  /* ── Wallet modal slides up ── */
  .wallet-modal{
    border-radius:20px 20px 0 0 !important;
    padding:16px 14px max(env(safe-area-inset-bottom),24px) !important;
    max-height:85vh !important;
    overflow-y:auto !important;
  }
  .wallet-modal-overlay{align-items:flex-end !important;}
  .wallet-opt{
    padding:13px 12px !important;
    min-height:52px !important;
    border-radius:12px !important;
  }

  /* ── AI floating button ── */
  #aiBtn{
    bottom:82px !important;
    right:12px !important;
    width:42px !important;
    height:42px !important;
  }

  /* ── Balance on home ── */
  #homeBalAmt{font-size:2.4rem !important;}
  #homeBalNgn{font-size:.875rem !important;}

  /* ── Earn APY ── */
  div[style*="font-size:2.8rem"]{font-size:2rem !important;}

  /* ── Bridge select ── */
  #bridgeChainSelect{
    font-size:16px !important;
    min-height:46px !important;
  }

  /* ── Prevent any horizontal overflow ── */
  .page,#app-root{overflow-x:hidden !important;}

}

/* ── Tiny phones (iPhone SE, small Androids) ── */
@media(max-width:360px){
  #homeBalAmt{font-size:2rem !important;}
  .nav-btn .nl{font-size:.7rem !important;}
  .btn{padding:12px 14px !important;min-height:46px !important;}
  .mob-actions{padding:8px 2px !important;}
  .mob-action-ico{width:40px !important;height:40px !important;}
  .send-tabs .stab{font-size:.75rem !important;padding:7px 3px !important;}
}

/* ── Relay Light Mode — Text & Color Fixes ── */
[data-theme="light"] body,
[data-theme="light"] #app-root,
[data-theme="light"] .page{
  background:#ffffff;
  color:#111111;
}

/* Fix all inline white-on-white text */
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:var(--text2)"]{
  color:#000000 !important;
}
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#ffffff"]{
  color:#000000 !important;
}
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#ffffff"]{
  color:#000000 !important;
}
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color:#fff"]{
  color:#1a1a1a !important;
}
[data-theme="light"] *[style*="color:#f0f0f0"],
[data-theme="light"] *[style*="color:#f5f5f5"]{
  color:#1a1a1a !important;
}
[data-theme="light"] *[style*="color:#000000"],
[data-theme="light"] *[style*="color:#000000"],
[data-theme="light"] *[style*="color:#000000"]{
  color:#000000 !important;
}
[data-theme="light"] *[style*="color:#000000"]{
  color:#000000 !important;
}

/* Card backgrounds */
[data-theme="light"] *[style*="background:var(--card)"],
[data-theme="light"] *[style*="background:var(--surface)"]{
  background:#f5f5f5 !important;
  border-color:#EEF2FF !important;
}
[data-theme="light"] *[style*="background:#1a1a1a"],
[data-theme="light"] *[style*="background:#111111"],
[data-theme="light"] *[style*="background:#111111"],
[data-theme="light"] *[style*="background:#111111"],
[data-theme="light"] *[style*="background:#222222"],
[data-theme="light"] *[style*="background:#111111"],
[data-theme="light"] *[style*="background:#1a1a1a"]{
  background:#EEF2FF !important;
  color:#1a1a1a !important;
}

/* Input fields */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea{
  background:#ffffff !important;
  color:#1a1a1a !important;
  border-color:#EEF2FF !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder{
  color:#000000 !important;
}

/* Borders */
[data-theme="light"] *[style*="border:1px solid rgba(255,255,255,.07)"],
[data-theme="light"] *[style*="border:1px solid rgba(255,255,255,.08)"],
[data-theme="light"] *[style*="border:1px solid rgba(255,255,255,.09)"],
[data-theme="light"] *[style*="border:1px solid rgba(255,255,255,.1)"],
[data-theme="light"] *[style*="border:1px solid var(--border)"]{
  border-color:#EEF2FF !important;
}

/* Balance card inline */
[data-theme="light"] *[style*="letter-spacing:.18em"]{
  color:#000000 !important;
}

/* Chips / pills that use white transparency */
[data-theme="light"] *[style*="background:rgba(255,255,255,.06)"],
[data-theme="light"] *[style*="background:rgba(255,255,255,.05)"],
[data-theme="light"] *[style*="background:rgba(255,255,255,.04)"],
[data-theme="light"] *[style*="background:rgba(255,255,255,.03)"]{
  background:#f5f5f5 !important;
  border-color:#E0E7FF !important;
  color:#000000 !important;
}

/* Arc testnet badge in light mode */
[data-theme="light"] *[style*="background:rgba(37,99,235,.08)"]{
  background:rgba(37,99,235,.08) !important;
}
[data-theme="light"] .net-pill,
[data-theme="light"] *[style*="color:#ffffff;"]{
  color:#2563EB !important;
}

/* Topbar in light mode */
[data-theme="light"] #globalTopBar,
[data-theme="light"] .topbar{
  background:#ffffff !important;
  border-bottom:1px solid #E0E7FF !important;
}
[data-theme="light"] .brand-name,
[data-theme="light"] *[style*="font-weight:800;color:#ffffff"]{
  color:#1a1a1a !important;
}

/* Nav */
[data-theme="light"] .bottom-nav{
  background:rgba(255,255,255,.96) !important;
  border-top:1px solid #EEF2FF !important;
}
[data-theme="light"] .nav-pill-wrap{
  background:#f0f0f0 !important;
  border:1px solid #EEF2FF !important;
}

/* Earn APY big number */
[data-theme="light"] *[style*="font-size:2.8rem"],
[data-theme="light"] *[style*="font-size:1.6rem;font-weight:800"]{
  color:#1a1a1a !important;
}

/* More page profile card */
[data-theme="light"] *[style*="background:linear-gradient(145deg"]{
  background:#f5f5f5 !important;
}

/* Success card */
[data-theme="light"] .success-circle{
  background:#2563EB !important;
  box-shadow:0 8px 24px rgba(37,99,235,.3) !important;
}

/* Buttons stay purple in light mode */
[data-theme="light"] .btn{
  color:#ffffff !important;
}
[data-theme="light"] .btn-outline{
  color:#1a1a1a !important;
  border-color:#EEF2FF !important;
  background:transparent !important;
}

/* Page titles */
[data-theme="light"] *[style*="color:var(--text)"]{
  color:#1a1a1a !important;
}
[data-theme="light"] *[style*="color:var(--text3)"]{
  color:#000000 !important;
}



/* ═══════════════════════════════════════════════════════
   MOBILE — Remove outer card wrappers on feature pages
   Cards still show on desktop (min-width:481px+)
═══════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* Remove outer card look from all .card elements inside pages */
  .page > .card,
  .page > .send-card,
  .page > .swap-box,
  .page > .arcname-card,
  .page > [class*="card"]{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Remove outer wrapper divs that use inline card styles */
  /* These are the first direct child divs of pages with card styling */
  .page > div:first-child:not(.page-title):not(.page-sub):not(.type-sel):not(.bottom-bar){
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Keep inner cards (nested ones) — they still show */
  .page > .card .card,
  .page > div > .card,
  .page > div > .send-card,
  .page > div > .position-card,
  .page > div > .swap-box,
  .page > div > [class*="card"]{
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(37,99,235,0.18) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
    border-radius: var(--radius) !important;
    padding: 14px !important;
  }

  /* Keep home balance card styled */
  .home-bal-card,
  .bal-card{
    background: linear-gradient(135deg,rgba(37,99,235,.18),rgba(37,99,235,.12)) !important;
    border: 1px solid rgba(37,99,235,.3) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
  }

  /* Reduce page padding on mobile since no outer card */
  .page{
    padding: 12px 14px 20px !important;
  }

  /* Page titles stay visible */
  .page-title{
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 6px;
  }
}

/* ══ TOPBAR & DISCONNECT FIX ══ */
[data-theme="light"] #disconnectTopBtn { color: #2563EB !important; }
[data-theme="light"] #moreArcName { color: #2563EB !important; }

/* == DISCONNECT BUTTON - hidden, replaced by wallet dropdown == */
#disconnectTopBtn { display: none !important; }

#disconnectTopBtn:hover {
  background-color: rgba(37,99,235,0.2) !important;
}

[data-theme="light"] #disconnectTopBtn {
  color: #2563EB !important;
  background-color: rgba(37,99,235,0.1) !important;
  border-color: rgba(37,99,235,0.3) !important;
}

/* == SIDEBAR NAV LABEL FIX == */
.nav-btn .nl {
  font-size: 1rem !important;
}

.nav-btn span {
  font-size: 1rem !important;
}

#desktopNav .nav-btn {
  font-size: 1rem !important;
  gap: 10px !important;
}

/* == SIDEBAR SECTION & NAV LABELS BOLD FIX == */
.dnav-section-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  opacity: 1 !important;
}

[data-theme="light"] .dnav-section-label {
  color: #666 !important;
  font-weight: 700 !important;
}

#desktopNav .nav-btn .nl {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

[data-theme="light"] #desktopNav .nav-btn .nl {
  color: #111 !important;
  font-weight: 600 !important;
}

/* == NAIRA BALANCE VISIBILITY FIX == */
#homeBalNgn {
  color: rgba(191,219,254,1) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

[data-theme="light"] #homeBalNgn {
  color: #444 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* == NAV BOLD RELAY STYLE FIX == */
.nav-btn span {
  font-size: 1rem !important;
  font-weight: 700 !important;
}
#desktopNav .nav-btn .nl {
  font-size: 1rem !important;
  font-weight: 700 !important;
}
[data-theme="light"] #desktopNav .nav-btn .nl {
  font-weight: 700 !important;
}
.dnav-section-label {
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}
[data-theme="light"] .dnav-section-label {
  font-weight: 700 !important;
}

/* == NAV BOLD FINAL FIX == */
.nav-btn span,
.nav-btn .nl,
#desktopNav .nav-btn .nl,
[data-theme="light"] #desktopNav .nav-btn .nl {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* == MOBILE LAYOUT FIX (max-width: 768px only) == */
@media (max-width: 768px) {

  /* 1. Top header - reduce clutter, shrink pills */
  .topbar, header, .app-header {
    padding: 8px 12px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  .topbar .network-pill, .chain-pill, [class*="testnet"], [class*="network"] {
    font-size: 11px !important;
    padding: 4px 8px !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .wallet-address, [class*="address"] {
    font-size: 11px !important;
    padding: 4px 8px !important;
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 2. Bottom nav labels bigger */
  .bottom-nav .nav-btn .nl,
  .bottom-nav .nav-btn span {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
  }

  /* 3. Fix "Withdraw anytime · No lockup" wrapping */
  .save-earn-sub, [class*="lockup"], [class*="withdraw"] {
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  /* 4. Better overall spacing */
  .home-content, .main-content, [class*="page"] {
    padding: 12px !important;
  }
  .balance-card, [class*="balance"] {
    padding: 16px !important;
  }
}

/* == HISTORY STAT NUMBERS FIX == */
.hist-stat-num {
  color: var(--text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* == MOBILE HEADER + NAV + LOCKUP FIX == */
@media (max-width: 768px) {

  /* 1. Fix top header cramping */
  #globalTopBar {
    padding: 6px 10px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  .net-pill {
    font-size: 10px !important;
    padding: 3px 7px !important;
    white-space: nowrap !important;
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }
  .pulse-dot {
    display: none !important;
  }

  /* 2. Fix "Withdraw anytime · No lockup" wrapping */
  .earn-sub, .save-sub, [class*="earn"] p, [class*="save"] p {
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  /* 3. Bottom nav labels bigger + bold */
  .bottom-nav .nl,
  .nav-btn .nl {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
  }
}

/* == KUDA-STYLE MOBILE OVERHAUL == */
@media (max-width: 768px) {

  /* HEADER - clean and minimal */
  #globalTopBar {
    padding: 8px 14px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .topbar-page-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
  }
  .net-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    border-radius: 20px !important;
  }
  .pulse-dot { display: none !important; }

  /* Hide wallet address on mobile - too cluttered */
  [class*="wallet-addr"], [class*="address-pill"], [class*="addr-btn"] {
    display: none !important;
  }

  /* BALANCE AREA - more breathing room */
  .home-balance, [class*="balance-card"], [class*="bal-card"] {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .home-balance-amt, [class*="balance-amt"] {
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }

  /* FIX "Withdraw anytime · No lockup" wrapping */
  .earn-meta, .save-meta, [class*="earn-sub"], [class*="no-lock"] {
    white-space: nowrap !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* BOTTOM NAV - Kuda style */
  .bottom-nav {
    padding: 8px 0 12px !important;
    height: auto !important;
  }
  .bottom-nav .nav-btn {
    gap: 4px !important;
    padding: 4px 8px !important;
  }
  .bottom-nav .nav-btn svg,
  .bottom-nav .nav-btn .ni {
    width: 24px !important;
    height: 24px !important;
  }
  .bottom-nav .nav-btn .nl {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }
  .bottom-nav .nav-btn.active .nl {
    color: #2563EB !important;
    font-weight: 700 !important;
  }
}

/* === MOBILE HEADER FIX === */

.theme-toggle-btn{width:30px;height:30px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
/* Mobile disconnect icon only, desktop text only */
#disconnectTopBtnMobile { display:none !important; }
/* === RELAY-STYLE TOPBAR — desktop only for the 180px left padding === */
@media(min-width:769px){
#globalTopBar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 28px 0 180px !important;
  gap: 0 !important;
}
}
#globalTopBar > div:last-child {
  margin-left: auto !important;
}
.brand {
  margin-right: 0 !important;
  padding-right: 0 !important;
  flex-shrink: 0 !important;
}
#topbarPageInfo {
  margin-left: 28px !important;
}
#topbarNav {
  flex: unset !important;
  margin-left: 0 !important;
}
.tnav-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px 18px;
  border-radius: 9px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-family: 'Inter var','Inter', sans-serif;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.tnav-btn:hover { background: rgba(37,99,235,.08); }
.tnav-btn.active {
  font-weight: 700;
  background: #1c1c1c;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.12);
}
[data-theme=light] .tnav-btn { color: #000000; }
[data-theme=light] .tnav-btn.active { background: #1c1c1c; color: #ffffff; border-color:#000000; }
#tnav-agent {
  opacity: 1 !important;
  background: #1c1c1c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
[data-theme=light] #tnav-agent { border-color:#000000 !important; }
.more-drop-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 9px;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.more-drop-btn:hover { background: rgba(37,99,235,.08); color: var(--accent); }
.more-drop-btn svg { opacity: .7; flex-shrink: 0; }
.brand { display:flex !important; align-items:center; gap:8px; }








.brand{display:flex;align-items:center;gap:0;}

.brand-logo{display:flex!important;align-items:center;flex-shrink:0;background:none!important;box-shadow:none!important;}

/* ══ MOBILE TOPBAR — show desktop features after wallet connect ══ */
/* Only adds behaviour, never overrides existing mobile styles */
@media(max-width:768px){
  /* Topbar compact on mobile: fixed position, 54px tall, full width */
  #globalTopBar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:68px !important;
    padding:8px 12px !important;
    z-index:200 !important;
  }
  /* Scale logo to match landing page */
  #globalTopBar .brand svg{
    width:48px !important;
    height:48px !important;
  }
  #globalTopBar .brand .logo-dark span,
  #globalTopBar .brand .logo-light span{
    font-size:22px !important;
  }
  /* Shrink pills/buttons so they all fit in one row */
  #netPill{font-size:.68rem !important;padding:2px 6px !important;}
  #navFaucetBtn{display:none !important;}
  .theme-toggle-btn{font-size:.85rem !important;padding:4px 6px !important;min-height:unset !important;}
  #connectTopBtn{font-size:.78rem !important;padding:4px 10px !important;}
  /* Hide full-text disconnect on mobile — the icon button already exists */
  #disconnectTopBtn{display:none !important;}
  /* Page content: top offset matches 54px topbar */
  .page{top:54px !important;}
  /* AI FAB: sit above bottom nav, not behind it */
  #aiBtn{bottom:84px !important;right:14px !important;}
}

/* ════════════════════════════════════════════
   MOBILE — Desktop feature parity
   Appended only. Nothing above touched.
   Applies at max-width:768px (phones + small tablets)
   Nav excluded — bottom-nav stays as-is
   ════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Balance card: same gradient glow as desktop ── */
  .home-bal-card{
    background:linear-gradient(145deg,#1a1a1a 0%,#111111 50%,#1a1a1a 100%) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    box-shadow:0 8px 32px rgba(0,0,0,0.5) !important;
  }
  .home-bal-card::before{
    content:'' !important;
    position:absolute !important;
    top:-20px !important;right:-20px !important;
    width:140px !important;height:140px !important;
    border-radius:50% !important;
    background:radial-gradient(circle,rgba(37,99,235,.22),transparent 70%) !important;
    pointer-events:none !important;
    display:block !important;
  }

  /* ── Cards: same purple-tinted border as desktop ── */
  .card{
    background:rgba(255,255,255,0.04) !important;
    border:1px solid rgba(37,99,235,0.18) !important;
    box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(37,99,235,0.12) !important;
  }

  /* ── Send balance card: same gradient ── */
  .bal-card{
    background:linear-gradient(145deg,#1a1a1a 0%,#111111 50%,#1a1a1a 100%) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    box-shadow:0 8px 32px rgba(0,0,0,0.5) !important;
  }
  .bal-card::before{
    content:'' !important;
    display:block !important;
    position:absolute !important;
    top:-20px !important;right:-20px !important;
    width:140px !important;height:140px !important;
    border-radius:50% !important;
    background:radial-gradient(circle,rgba(37,99,235,.2),transparent 70%) !important;
    pointer-events:none !important;
  }

  /* ── Agent panel: full-screen sheet on mobile ── */
  #agentPanel{
    left:0 !important;right:0 !important;
    bottom:0 !important;top:0 !important;
    width:100% !important;max-width:100% !important;
    border-radius:0 !important;
    transform:none !important !important;
  }

  /* ── Wallet modal: slides up from bottom ── */
  .wallet-modal-overlay{align-items:flex-end !important;}
  .wallet-modal{
    border-radius:22px 22px 0 0 !important;
    max-width:100% !important;
    width:100% !important;
  }

  /* ── Chain / bank pickers: bottom sheet on mobile ── */
  #chainPickerSheet,#bankPickerSheet{
    left:0 !important;right:0 !important;
    bottom:0 !important;top:auto !important;
    transform:none !important;
    width:100% !important;
    border-radius:20px 20px 0 0 !important;
    max-height:75vh !important;
  }

  /* ── Toast: full-width above nav ── */
  #toast{
    left:12px !important;
    right:12px !important;
    bottom:82px !important;
    max-width:none !important;
    min-width:0 !important;
    transform:translateX(0) translateY(-100px) !important;
  }
  #toast.show{
    transform:translateX(0) translateY(0) !important;
  }

  /* ── Home action first button: same purple gradient ── */
  .home-action:first-child{
    background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(37,99,235,.1)) !important;
    border-color:rgba(37,99,235,.3) !important;
    box-shadow:0 4px 20px rgba(37,99,235,.15) !important;
  }

  /* ── Earn APY hero: same desktop style ── */
  .earn-apy-num{color:var(--success) !important;}

  /* ── Inputs: prevent iOS zoom, same border focus ── */
  input:focus,select:focus{
    outline:none !important;
    box-shadow:none !important;
    border-color:var(--border) !important;
  }
}

/* ════════════════════════════════════════════
   LIGHT MODE ON MOBILE — remove cards, clean look
   ════════════════════════════════════════════ */
@media(max-width:768px){
  /* Light mode: make all page cards transparent so content feels native */
  [data-theme="light"] .page > .card,
  [data-theme="light"] .page > .send-card,
  [data-theme="light"] .page > .swap-box-wrap,
  [data-theme="light"] .page > [class*="card"]{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Light mode: outer wrapper divs on pages — transparent */
  [data-theme="light"] .page > div[style*="border-radius"]{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }

  /* Light mode: keep inner nested cards visible */
  [data-theme="light"] .page .card .card,
  [data-theme="light"] .page > div > .card,
  [data-theme="light"] .page > div > .send-card{
    background:#ffffff !important;
    border:1px solid #EEF2FF !important;
    box-shadow:0 1px 4px rgba(0,0,0,0.06) !important;
    border-radius:14px !important;
  }

  /* Light mode: balance card stays purple */
  [data-theme="light"] .home-bal-card,
  [data-theme="light"] .bal-card{
    background:#2563EB !important;
    border:none !important;
    box-shadow:0 8px 24px rgba(37,99,235,0.35) !important;
  }
  [data-theme="light"] .home-bal-card::before,
  [data-theme="light"] .bal-card::before{
    display:none !important;
  }

  /* Light mode: text on purple balance card stays white */
  [data-theme="light"] .home-bal-lbl,
  [data-theme="light"] .home-bal-num,
  [data-theme="light"] .home-bal-ngn{
    color:#ffffff !important;
  }
  [data-theme="light"] .tok{
    background:rgba(255,255,255,0.15) !important;
    border-color:#ffffff !important;
    color:#ffffff !important;
  }

  /* Light mode: page background clean white */
  [data-theme="light"] .page{
    background:#fafafa !important;
  }

  /* Light mode: reduce page padding since no outer card */
  [data-theme="light"] .page{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

/* ════════════════════════════════════════════
   TOPBAR ICON BUTTONS — unified circle style
   Works on both desktop and mobile
   ════════════════════════════════════════════ */
.tb-icon-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s;
  padding:0;
}
.tb-icon-btn:hover{background:var(--card2);color:var(--text);border-color:var(--border2);}
.tb-icon-btn.tb-faucet{color:var(--accent3);border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.08);}
.tb-icon-btn.tb-faucet:hover{background:rgba(37,99,235,.16);}
.tb-icon-btn.tb-disconnect{color:var(--danger);border-color:rgba(248,113,113,.25);background:rgba(248,113,113,.06);}
.tb-icon-btn.tb-disconnect:hover{background:rgba(248,113,113,.14);}
/* Hide text labels inside icon buttons on mobile */
.tb-icon-btn .tb-btn-text{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;margin-left:4px;}

/* Theme toggle SVG icons — sun shown in dark mode, moon in light mode */
.tb-theme .icon-sun{display:block;}
.tb-theme .icon-moon{display:none;}
.tb-theme.is-light .icon-sun{display:none;}
.tb-theme.is-light .icon-moon{display:block;}

/* Old emoji theme-toggle-btn kept working on desktop */
.theme-toggle-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;transition:all .15s;
}

/* ════════════════════════════════════════════
   MOBILE TOPBAR LAYOUT
   ════════════════════════════════════════════ */
@media(max-width:768px){
  /* Topbar layout: logo | addr-pill | icon-buttons */
  #globalTopBar{
    display:flex;align-items:center;
    gap:6px;
    padding:0 12px !important;
    height:54px !important;
  }
  /* Hide desktop nav pills on mobile */
  #topbarNav,#topbarPageInfo{display:none !important;}
  /* Address pill: takes up remaining center space */
  #mobileAddrPill{display:none;} /* shown via JS after connect */
  /* Net pill: hide long text, show short */
  .net-pill-full{display:none !important;}
  .net-pill-short{display:inline !important;}
  /* Faucet: hide text label, show icon only */
  .tb-faucet .tb-btn-text{display:none !important;}
  /* Keep icon buttons 30px on mobile */
  .tb-icon-btn{width:30px !important;height:30px !important;}
  /* Hide full-text disconnect on mobile */
  #disconnectTopBtn{display:none !important;}
  /* Hide old connectTopBtn connected state on mobile — addr pill replaces it */
  #connectTopBtn.connected{display:none !important;}
  /* Page offset */
  .page{top:54px !important;}
  /* AI FAB above nav */
  #aiBtn{bottom:84px !important;right:14px !important;}
}

@media(min-width:769px){
  /* Desktop: hide mobile addr pill and short net pill text */
  #mobileAddrPill{display:none !important;}
  .net-pill-full{display:inline !important;}
  .net-pill-short{display:none !important;}
  /* Faucet removed from nav - now in Settings dropdown */
  /* Disconnect: hide mobile icon on desktop */
  #disconnectTopBtnMobile{display:none !important;}
}

/* ════════════════════════════════════════════
   MOBILE FRIENDLY COLORS — both modes
   ════════════════════════════════════════════ */
@media(max-width:768px){

  /* Dark mode: ensure all page text is readable */
  .page-title{color:var(--text) !important;}
  .page-sub{color:var(--text2) !important;}
  .card-title{color:var(--accent3) !important;}
  .flbl{color:var(--text2) !important;}

  /* Inputs readable on both modes */
  input,select,textarea{
    color:var(--text) !important;
    background:var(--surface) !important;
    border-color:var(--border) !important;
  }
  input::placeholder{color:#ffffff !important;}

  /* More page items */
  .more-item-title{color:var(--text) !important;}
  .more-item-sub{color:var(--text2) !important;}

  /* History items */
  .tx-title{color:var(--text) !important;}
  .tx-time{color:#2563EB !important;}

  /* Gas row */
  .gas-row{color:var(--success) !important;}

  /* Confirm rows */
  .conf-lbl{color:#2563EB !important;}
  .conf-val{color:var(--text) !important;}
}

/* ════════════════════════════════════════════
   LIGHT MODE MOBILE — clean, native feel
   ════════════════════════════════════════════ */
@media(max-width:768px){
  [data-theme="light"] #globalTopBar{
    background:#ffffff !important;
    border-bottom:1px solid #EEF2FF !important;
  }
  [data-theme="light"] .tb-icon-btn{
    background:#EEF2FF !important;
    border-color:#E0E7FF !important;
    color:#000000 !important;
  }
  [data-theme="light"] .tb-icon-btn.tb-faucet{
    background:rgba(37,99,235,.06) !important;
    border-color:rgba(37,99,235,.18) !important;
    color:#2563EB !important;
  }
  [data-theme="light"] .tb-icon-btn.tb-disconnect{
    background:rgba(37,99,235,.05) !important;
    border-color:rgba(37,99,235,.2) !important;
    color:#2563EB !important;
  }
  /* ── Bridge chain dropdown: light mode fix ── */
[data-theme="light"] .chain-dropdown-btn {
  background: #f5f5f5 !important;
  border-color: #E0E7FF !important;
  color: #111 !important;
}
[data-theme="light"] .chain-dropdown-list {
  background: #ffffff !important;
  border-color: #E0E7FF !important;
}
[data-theme="light"] .chain-dropdown-item {
  background: #ffffff !important;
  color: #111 !important;
}
[data-theme="light"] .chain-dropdown-item:hover {
  background: rgba(37,99,235,.06) !important;
}
[data-theme="light"] .chain-dropdown-item.selected {
  background: rgba(37,99,235,.08) !important;
}
[data-theme="light"] .chain-dropdown-item span {
  color: #111 !important;
}

[data-theme="light"] #mobileAddrPill{
    background:#EEF2FF !important;
    border-color:#E0E7FF !important;
    color:#444 !important;
  }
  [data-theme="light"] .net-pill{
    background:rgba(37,99,235,.06) !important;
    border-color:rgba(37,99,235,.18) !important;
    color:#2563EB !important;
  }
  [data-theme="light"] .page{background:#fafafa !important;}
  [data-theme="light"] .bottom-nav{
    background:#ffffff !important;
    border-top:1px solid #EEF2FF !important;
  }
  [data-theme="light"] .nav-pill-wrap{
    background:rgba(37,99,235,.03) !important;
    border-color:rgba(37,99,235,.1) !important;
  }
  [data-theme="light"] input,[data-theme="light"] select{
    background:#ffffff !important;
    border-color:#E0E7FF !important;
    color:#111 !important;
  }
  [data-theme="light"] .card{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
    box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
  }
  [data-theme="light"] .more-item{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
  }
  [data-theme="light"] .tx-item{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
  }
  [data-theme="light"] .swap-inner,
  [data-theme="light"] .swap-box-wrap{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
  }
  [data-theme="light"] .home-asset-row{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
  }
}

/* ════════════════════════════════════════════
   LIGHT MODE — HOME PAGE INLINE COLOR FIXES
   Targets hardcoded rgba(255,255,255,...) text
   ════════════════════════════════════════════ */
@media(max-width:768px){
  /* Home balance card outer wrapper: transparent so inner card shows */
  [data-theme="light"] #page-home > div:first-child{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  /* Balance section inside card: hardcoded white text -> dark */
  [data-theme="light"] #page-home [style*="color:#ffffff"],
  [data-theme="light"] #page-home [style*="color:#ffffff"],
  [data-theme="light"] #page-home [style*="color:#ffffff"],
  [data-theme="light"] #page-home [style*="color:#ffffff"],
  [data-theme="light"] #page-home [style*="color:#ffffff"],
  [data-theme="light"] #page-home [style*="color:#ffffff"],
  [data-theme="light"] #page-home [style*="color:rgba(225,210,255,.8)"]{
    color:#000000 !important;
  }
  /* Arc Testnet pill on balance card */
  [data-theme="light"] #page-home [style*="background:rgba(37,99,235,.08)"][style*="border:1px solid rgba(37,99,235,.18)"],
  [data-theme="light"] #page-home [style*="background:rgba(37,99,235,.08)"][style*="border:1px solid rgba(37,99,235,.2)"]{
    background:rgba(37,99,235,.08) !important;
    border-color:rgba(37,99,235,.25) !important;
    color:#2563EB !important;
  }
  /* Token pills on balance card */
  [data-theme="light"] #page-home [style*="background:rgba(255,255,255,.06)"][style*="border-radius:100px"]{
    background:rgba(37,99,235,.06) !important;
    border-color:rgba(37,99,235,.2) !important;
    color:#2563EB !important;
  }
  /* Balance card background section */
  [data-theme="light"] #page-home [style*="background:var(--card)"][style*="padding:22px"]{
    background:linear-gradient(135deg,#2563EB,#1D4ED8) !important;
  }
  [data-theme="light"] #page-home [style*="background:var(--card)"][style*="padding:22px"] *{
    color:#fff !important;
  }
  /* "Total Balance" text and $amount in light mode */
  [data-theme="light"] #homeBalAmt,
  [data-theme="light"] #homeBalNgn,
  [data-theme="light"] #homeUsdcBal,
  [data-theme="light"] #homeEurcBal{
    color:#fff !important;
  }
  /* Actions section */
  [data-theme="light"] .mob-actions{
    background:#f5f5f5 !important;
    border-color:#EEF2FF !important;
  }
  [data-theme="light"] .mob-action-item span,
  [data-theme="light"] .mob-action-item [style*="color:var(--text)"]{
    color:#111 !important;
  }
  /* Earn promo section */
  [data-theme="light"] #page-home [style*="4.80%"],
  [data-theme="light"] #page-home [style*="letter-spacing:.12em"]{
    color:#000000 !important;
  }
  /* Asset rows text fixes */
  [data-theme="light"] .mob-asset-row [style*="color:var(--text)"]{
    color:#111 !important;
  }
  [data-theme="light"] #page-home [style*="border-bottom:1px solid var(--border)"]{
    border-bottom-color:#EEF2FF !important;
  }
  /* Outer card wrapper on home page dark mode: keep dark */
  #page-home > div:first-child{
    background:var(--card) !important;
    border:1px solid var(--border) !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }
}

/* ════════════════════════════════════════════
   LIGHT MODE — ALL PAGES INLINE COLOR FIXES
   Hardcoded rgba(255,255,255,...) text on other pages
   ════════════════════════════════════════════ */
@media(max-width:768px){
  /* Generic: any hardcoded white text in light mode */
  [data-theme="light"] .page [style*="color:#f0f0f0"],
  [data-theme="light"] .page [style*="color: #f0f0f0"],
  [data-theme="light"] .page [style*="color:#ffffff"],
  [data-theme="light"] .page [style*="color: #ffffff"]{
    color:#111111 !important;
  }
  /* But keep white text on purple buttons */
  [data-theme="light"] .page .btn,
  [data-theme="light"] .page [style*="background:#2563EB"] *,
  [data-theme="light"] .page [style*="background:linear-gradient(135deg,#2563EB"] *,
  [data-theme="light"] .mob-action-ico *{
    color:#ffffff !important;
  }
  /* Inputs on all pages */
  [data-theme="light"] .page input,
  [data-theme="light"] .page select,
  [data-theme="light"] .page textarea{
    background:#ffffff !important;
    color:#111111 !important;
    border-color:#E0E7FF !important;
  }
  /* Surface backgrounds */
  [data-theme="light"] .page [style*="background:var(--surface)"],
  [data-theme="light"] .page [style*="background:#1a1a1a"],
  [data-theme="light"] .page [style*="background:#111111"],
  [data-theme="light"] .page [style*="background:#111;"]{
    background:#EEF2FF !important;
  }
  /* Dark borders */
  [data-theme="light"] .page [style*="border:1px solid rgba(255,255,255,.1)"],
  [data-theme="light"] .page [style*="border:1px solid rgba(255,255,255,.08)"],
  [data-theme="light"] .page [style*="border:1px solid rgba(255,255,255,.07)"]{
    border-color:#E0E7FF !important;
  }
  /* Page title and sub in light mode */
  [data-theme="light"] .page-title{color:#111 !important;}
  [data-theme="light"] .page-sub{color:#666 !important;}
  [data-theme="light"] .flbl{color:#000000 !important;}
  [data-theme="light"] .card-title{color:#2563EB !important;}
}

/* ════════════════════════════════════════════
   SPENDA-STYLE MOBILE — Clean, cardless, friendly
   Light mode: pure white, no outer cards
   Dark mode: pure dark, no outer cards
   ════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Hide net pill entirely on mobile (saves space) ── */
  #netPill{display:none !important;}

  /* ── Page base: clean background, no card wrappers ── */
  .page{
    background:var(--bg) !important;
    padding:0 0 80px !important;
  }

  /* ── Remove ALL outer card wrappers on every page ── */
  /* These are the first direct child of each .page */
  .page > div[style*="border-radius:22px"],
  .page > div[style*="border-radius: 22px"]{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* ── Inner sections get clean padding ── */
  .page > div[style*="border-radius:22px"] > div,
  .page > div[style*="border-radius:22px"] > button{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* ── Home balance card: full-width, no rounded top corners ── */
  #page-home > div:first-child > div:first-child{
    border-radius:0 !important;
    margin-bottom:0 !important;
  }

  /* ── .card elements: clean with subtle border ── */
  .page .card{
    border-radius:16px !important;
    margin:12px 16px !important;
  }

  /* ── Swap page: no outer card, inner boxes clean ── */
  #page-swap > div[style*="border-radius:22px"] .swap-box-wrap,
  #page-swap .swap-box-wrap{
    margin:16px !important;
    border-radius:16px !important;
  }

  /* ── History page: no outer card ── */
  #page-history > div[style*="border-radius:22px"] > div{
    padding:16px !important;
  }
  #page-history .tx-group-wrap{
    margin:0 16px 8px !important;
  }
  #page-history .tx-item{
    padding:12px 16px !important;
  }

  /* ── All inner section padding: 16px sides ── */
  .page > div[style*="border-radius:22px"] > div[style*="padding:20px"],
  .page > div[style*="border-radius:22px"] > div[style*="padding:22px"],
  .page > div[style*="border-radius:22px"] > div[style*="padding:18px"],
  .page > div[style*="border-radius:22px"] > div[style*="padding:16px"]{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* ── Back button: proper padding ── */
  .page .back-btn{
    padding:16px 16px 8px !important;
    display:block !important;
  }
}

/* ── LIGHT MODE: clean white Spenda style ── */
@media(max-width:768px){
  [data-theme="light"] .page{
    background:#f5f5f5 !important;
  }
  [data-theme="light"] .page .card,
  [data-theme="light"] .page .send-card,
  [data-theme="light"] .page .swap-box-wrap,
  [data-theme="light"] .page .swap-inner{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
    box-shadow:0 1px 4px rgba(0,0,0,.06) !important;
  }
  [data-theme="light"] .page .hist-stat{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
  }
  /* Swap inner boxes */
  [data-theme="light"] #page-swap [style*="background:var(--card)"][style*="border-radius:20px"]{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
  }
  /* History stats and items */
  [data-theme="light"] #page-history > div[style*="border-radius:22px"]{
    background:#f5f5f5 !important;
  }
  [data-theme="light"] #page-history [style*="background:var(--surface)"]{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
  }
  /* Input fields in light mode */
  [data-theme="light"] .page .swap-input{
    color:#111111 !important;
  }
  [data-theme="light"] .page [style*="background:var(--surface)"],
  [data-theme="light"] .page [style*="background: var(--surface)"]{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
  }
  /* Text colors in light mode swap/history */
  [data-theme="light"] .page [style*="color:var(--text3)"]{
    color:#000000 !important;
  }
  [data-theme="light"] .page [style*="color:var(--text2)"]{
    color:#000000 !important;
  }
  [data-theme="light"] .page [style*="color:var(--text);"]{
    color:#111 !important;
  }
}

/* ── DARK MODE: pure dark Spenda style ── */
@media(max-width:768px){
  [data-theme="dark"] .page{
    background:#111111 !important;
  }
  [data-theme="dark"] .page .card{
    background:#1a1a1a !important;
    border-color:#ffffff !important;
  }
  [data-theme="dark"] #page-swap [style*="background:var(--card)"][style*="border-radius:20px"]{
    background:#1a1a1a !important;
    border-color:#ffffff !important;
  }
}

/* ════════════════════════════════════════════
   MOBILE TRANSACTION FIXES
   ════════════════════════════════════════════ */
@media(max-width:768px){
  /* Prevent iOS zoom on ALL inputs — must be 16px minimum */
  input,select,textarea{
    font-size:16px !important;
    -webkit-text-size-adjust:100% !important;
  }

  /* Page content padding: 16px sides so nothing touches screen edge */
  .page > div[style*="border-radius:22px"] > *{
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }

  /* Confirm card and success card need side padding too */
  .page .confirm-wrap{
    margin:0 16px 8px !important;
  }
  .page .success-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Send button: large tap target */
  #sendBtn,.btn{
    min-height:50px !important;
    font-size:16px !important;
    touch-action:manipulation !important;
  }

  /* Swap inputs: prevent iOS zoom */
  .swap-input{
    font-size:24px !important;
  }

  /* Bridge amount input */
  #bridgeAmt{
    font-size:16px !important;
  }

  /* Ensure all buttons are tappable */
  button{
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
  }

  /* Amount input on send page */
  #amtInput{
    font-size:18px !important;
    padding:14px !important;
  }
}

/* ════════════════════════════════════════════
   FINAL MOBILE POLISH
   ════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Action buttons: purple icons on light bg, no border lines ── */
  .mob-actions{
    background:transparent !important;
    border-top:none !important;
    border-bottom:none !important;
    padding:20px 8px 4px !important;
  }
  .mob-action-ico{
    background:#2563EB !important;
    box-shadow:0 4px 16px rgba(37,99,235,.35) !important;
  }
  .mob-action-item span,[style*="font-size:.875rem;font-weight:700;color:var(--text);"]{
    color:var(--text) !important;
  }
  [data-theme="light"] .mob-actions{
    background:transparent !important;
  }
  [data-theme="light"] .mob-action-ico{
    background:#2563EB !important;
    box-shadow:0 4px 16px rgba(37,99,235,.3) !important;
  }

  /* ── Remove the thin black divider line between content and nav ── */
  .bottom-nav{
    border-top:1px solid var(--border) !important;
    box-shadow:none !important;
  }
  [data-theme="light"] .bottom-nav{
    border-top:1px solid #EEF2FF !important;
    background:#ffffff !important;
  }
  /* Remove any extra bottom border on page content */
  .page > div:last-child{
    border-bottom:none !important;
  }
  /* Home page: remove border between earn section and bottom */
  #page-home [style*="border-bottom:1px solid var(--border)"][style*="padding:16px 18px"]{
    border-bottom:none !important;
  }

  /* ── Swap page: fix dark bg on token buttons ── */
  #page-swap #fromToken,
  #page-swap #toToken{
    background:var(--surface) !important;
    border-color:var(--border) !important;
  }
  [data-theme="light"] #page-swap #fromToken,
  [data-theme="light"] #page-swap #toToken{
    background:#f0f0f0 !important;
    border-color:#E0E7FF !important;
  }
  [data-theme="light"] #page-swap #fromToken span,
  [data-theme="light"] #page-swap #toToken span{
    color:#111 !important;
  }
  /* Swap sell/buy boxes in light mode */
  [data-theme="light"] #page-swap [style*="background:var(--card)"][style*="border-radius:20px"]{
    background:#ffffff !important;
    border-color:#EEF2FF !important;
    box-shadow:0 1px 4px rgba(0,0,0,.05) !important;
  }
  /* Swap rate bar */
  [data-theme="light"] #page-swap [style*="background:var(--card)"][style*="border-radius:12px"]{
    background:#f5f5f5 !important;
    border-color:#EEF2FF !important;
  }
  /* Flip button */
  [data-theme="light"] #page-swap [onclick="flipSwap()"][style*="background:var(--surface)"]{
    background:#f0f0f0 !important;
    border-color:#E0E7FF !important;
    color:#2563EB !important;
  }
  /* Swap input text color */
  [data-theme="light"] .swap-input{
    color:#111111 !important;
  }
  [data-theme="light"] #swapTo.swap-input{
    color:#2563EB !important;
  }
  /* Swap text labels */
  [data-theme="light"] #page-swap [style*="color:var(--text);"]{
    color:#111 !important;
  }
  [data-theme="light"] #page-swap [style*="color:var(--text3);"]{
    color:#000000 !important;
  }

  /* ── Dark mode: swap/send/bridge get purple card style ── */
  [data-theme="dark"] #page-swap [style*="background:var(--card)"][style*="border-radius:20px"]{
    background:rgba(37,99,235,.06) !important;
    border-color:rgba(37,99,235,.18) !important;
  }
  [data-theme="dark"] #page-swap [style*="background:var(--card)"][style*="border-radius:12px"]{
    background:rgba(37,99,235,.04) !important;
    border-color:rgba(37,99,235,.12) !important;
  }
  [data-theme="dark"] #page-send [style*="background:var(--card)"][style*="border-radius:22px"]{
    background:rgba(37,99,235,.04) !important;
    border-color:rgba(37,99,235,.12) !important;
  }
  [data-theme="dark"] #page-bridge [style*="background:var(--card)"][style*="border-radius:20px"]{
    background:rgba(37,99,235,.06) !important;
    border-color:rgba(37,99,235,.18) !important;
  }
  [data-theme="dark"] #page-swap #fromToken,
  [data-theme="dark"] #page-swap #toToken{
    background:rgba(37,99,235,.1) !important;
    border-color:rgba(37,99,235,.25) !important;
  }

  /* ── Topbar: compact, everything fits in 54px ── */
  #globalTopBar{
    gap:4px !important;
    padding:0 10px !important;
  }
  #globalTopBar .brand svg{
    width:48px !important;
    height:48px !important;
  }
  #mobileAddrPill{
    font-size:.68rem !important;
    padding:3px 8px !important;
    max-width:100px !important;
  }
  .tb-icon-btn{
    width:28px !important;
    height:28px !important;
    flex-shrink:0 !important;
  }
  .tb-icon-btn svg{
    width:13px !important;
    height:13px !important;
  }
  #netPill{display:none !important;}
}

/* ════════════════════════════════════════════
   MOBILE FINAL FIXES — desktop untouched
   ════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Bridge button: force purple (has mob-action-ico class now) ── */
  .mob-action-ico{
    background:#2563EB !important;
    box-shadow:none !important;
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    flex-shrink:0 !important;
  }

  /* ── Dark line fix: page bottom = nav height exactly ── */
  .page{
    bottom:72px !important;
  }
  /* Ensure bottom nav height matches */
  .bottom-nav{
    height:72px !important;
  }

  /* ── Light mode: remove dark band ── */
  [data-theme="light"] #app-root{
    background:transparent !important;
  }
  [data-theme="light"] .page{
    background:#f5f5f5 !important;
  }

  /* ── Topbar: hide connectTopBtn when connected (addr pill replaces it) ── */
  #connectTopBtn.connected{
    display:none !important;
  }
  /* Hide desktop disconnect on mobile */
  #disconnectTopBtn{
    display:none !important;
  }

  /* ── Naira row: same border as USDC/EURC rows ── */
  .mob-asset-row{
    border-bottom:1px solid var(--border) !important;
  }
  .mob-asset-row:last-child{
    border-bottom:none !important;
  }
  [data-theme="light"] .mob-asset-row{
    border-bottom-color:#EEF2FF !important;
  }

  /* ── Transactions: page needs side padding for form content ── */
  #page-send .confirm-wrap,
  #page-send .success-wrap{
    padding:16px !important;
    margin:0 !important;
  }
  #page-send #tab-send,
  #page-send #tab-recv{
    padding:16px !important;
  }

  /* ── All inputs: 16px prevents iOS zoom ── */
  input,select,textarea{
    font-size:16px !important;
    -webkit-text-size-adjust:100% !important;
  }

  /* ── Buttons: responsive tap ── */
  button{
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
  }
  .btn{
    min-height:50px !important;
    font-size:16px !important;
  }
  #sendBtn{
    min-height:52px !important;
    font-size:16px !important;
  }

  /* ── Light mode text colors on asset rows ── */
  [data-theme="light"] .mob-asset-row [style*="color:var(--text3)"]{
    color:#000000 !important;
  }
}

/* ══════════════════════════════════════════
   MOBILE REDESIGN (max-width:480px)
   All changes below are mobile-only.
   Desktop (min-width:481px) is NOT affected.
══════════════════════════════════════════ */
@media(max-width:480px){

  /* ── Base font size reduction ── */
  html { font-size: 13px; }

  /* ── Remove card wrapper on pages ── */
  .page > div[style*="border-radius:22px"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* ── Bottom nav: full width fixed ── */
  .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 64px !important;
    background: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    z-index: 100 !important;
  }
  .nav-pill-wrap {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    display: flex !important;
  }
  .nav-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    min-height: unset !important;
  }
  .nav-btn.active { color: #2563EB !important; }
  .nav-btn.active .ni svg { stroke: #2563EB !important; }

  /* ── Page sits above nav ── */
  .page {
    bottom: 64px !important;
    padding-bottom: 20px !important;
  }

  /* ── Topbar ── */
  #globalTopBar {
    height: 58px !important;
    padding: 0 12px !important;
  }

  /* ── Hide logo, show welcome block ── */
  #secretTapZone { display: none !important; }
  #mobileWelcome { display: flex !important; }

  /* ── Theme toggle: icon only, square ── */
  #themeToggle {
    display: flex !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    padding: 0 !important;
    min-height: unset !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #themeToggle svg { width: 15px !important; height: 15px !important; }

  /* ── Disconnect: icon + Exit label ── */
  #disconnectTopBtn { display: none !important; }
  #disconnectTopBtnMobile {
    display: flex !important;
    width: auto !important;
    padding: 0 10px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(248,113,113,.12) !important;
    border: 1px solid rgba(248,113,113,.25) !important;
    color: #2563EB !important;
    min-height: unset !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
  }
  #disconnectTopBtnMobile::after {
    content: 'Exit' !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    color: #2563EB !important;
  }
  #disconnectTopBtnMobile svg { width: 13px !important; height: 13px !important; }

  /* ── Faucet button: text only, no icon ── */
  .tb-faucet svg { display: none !important; }
  .tb-faucet .tb-btn-text { display: inline !important; }
  .tb-faucet {
    width: auto !important;
    padding: 0 10px !important;
    height: 30px !important;
    border-radius: 8px !important;
    font-size: .72rem !important;
    background: rgba(37,99,235,.1) !important;
    border: 1px solid rgba(37,99,235,.3) !important;
    color: var(--accent3) !important;
    min-height: unset !important;
  }

  /* Balance card: solid blue gradient */
  .home-bal-card {
    background: linear-gradient(135deg,#2563EB 0%,#2563EB 50%,#1D4ED8 100%) !important;
    border-radius: 20px !important;
    border: none !important;
  }
  /* Outer wrapper must be transparent to show gradient card */
  #page-home > div[style*="border-radius:22px"],
  #page-home > div[style*="var(--card)"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .home-bal-lbl {
    color:#ffffff !important;
    font-size: .65rem !important;
  }
  .home-bal-ngn {
    color:#ffffff !important;
  }
  .home-bal-card .tok {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    color: #fff !important;
  }

  /* ── Asset rows: flush to screen edges (mobile only) ── */
  .mob-asset-row {
    padding: 12px 16px !important;
    gap: 13px !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
  }
  /* ── Token logos: correct size, always circular, never hidden ── */
  .mob-asset-row img {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    background: #1c1c1c !important;
  }

  /* ── Hide wallet pill, settings gear, address pill on mobile ── */
  #nanWalletDropWrap { display: none !important; }
  #nanSettingsWrap   { display: none !important; }
  #mobileAddrPill    { display: none !important; }
  #navFaucetIconBtn  { display: none !important; }

  /* ── Hide AI FAB when already on the AI page ── */
  body:has(#page-agent-ai.active) #aiBtn { display: none !important; }

  /* ── Welcome text must be visible ── */
  #mobileWelcome { display: flex !important; align-items: center !important; }

  /* ── Font sizes ── */
  .page-title { font-size: 1.1rem !important; }
  .flbl { font-size: .72rem !important; }
  .home-name { font-size: 1.1rem !important; }
  .home-greeting { font-size: .8rem !important; }
  .home-asset-name { font-size: .85rem !important; }
  .home-asset-sub { font-size: .75rem !important; }
  .home-asset-val { font-size: .85rem !important; }
  .home-section-title { font-size: .7rem !important; }
  .home-action-label { font-size: .72rem !important; }
  .more-item-title { font-size: .85rem !important; }
  .more-item-sub { font-size: .75rem !important; }
  .earn-apy-num { font-size: 2.4rem !important; }
  .swap-input { font-size: 1.4rem !important; }

  /* ── Save & Earn section readable in light mode ── */
  [data-theme="light"] #page-home div[style*="border-bottom"] * {
    color: var(--text) !important;
  }
  [data-theme="light"] #page-home div[style*="border-bottom"] span {
    color: var(--text3) !important;
  }

  /* ── Balance $ sign styling ── */
  #homeBalAmt {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
  }

}

/* ════════════════════════════════════════════
   DARK MODE CONTRAST FIXES — mobile
   All pages: surface containers need to be
   visually distinct from the card background
   ════════════════════════════════════════════ */

/* Core fix: surface containers get a lighter bg in dark mode
   so they stand out against the #1a1a1a card background */
:root {
  --surface-raised: #1c1c1c;  /* slightly lighter than --surface for contrast */
  --input-bg: #222222;        /* input fields in dark mode */
  --border-strong: rgba(255,255,255,.12); /* stronger border for dark mode containers */
}

/* ── Earn / Lend page — input containers ── */
#page-lend [style*="background:var(--surface)"] {
  background: var(--surface-raised) !important;
  border-color:#ffffff !important;
}

/* Amount input rows across all pages */
#page-lend .stake-panel > div[style*="background:var(--surface)"],
#page-lend .stake-panel > div[style*="background: var(--surface)"] {
  background: var(--surface-raised) !important;
  border-color:#ffffff !important;
}

/* ── All pages — inner surface containers ── */
.page [style*="background:var(--surface)"] {
  background: var(--surface-raised) !important;
}

/* ── Send page — recipient input area ── */
#page-send [style*="background:var(--surface)"],
#page-send .conf-rows {
  background: var(--surface-raised) !important;
}

/* ── Swap page — swap box ── */
#page-swap [style*="background:var(--surface)"] {
  background: var(--surface-raised) !important;
}

/* ── Bridge page — inner cards ── */
#page-bridge [style*="background:var(--surface)"] {
  background: var(--surface-raised) !important;
}

/* ── More page — feature rows ── */
#page-more [style*="background:rgba(255,255,255,.03)"] {
  background: rgba(255,255,255,.04) !important;
  border-color:#ffffff !important;
}

/* ── Input fields — use surface-raised so they read as inputs ── */
input {
  background: var(--surface-raised) !important;
}

/* Inputs with background:none (earn page large inputs) stay transparent */
input[style*="background:none"],
input[style*="background: none"] {
  background: none !important;
}

/* ── Earn page APY text — hardcoded white fix ── */
#page-lend [style*="color:#ffffff"] {
  color: var(--text2) !important;
}
#page-lend [style*="color:#ffffff"] {
  color: var(--text3) !important;
}

/* ── History page ── */
#page-history [style*="background:var(--surface)"] {
  background: var(--surface-raised) !important;
}

/* ── Arc Name page ── */
#page-arcname [style*="background:var(--surface)"] {
  background: var(--surface-raised) !important;
}

/* ── Bulk pay page ── */
#page-bulk [style*="background:var(--surface)"] {
  background: var(--surface-raised) !important;
}

/* ── Pay request page ── */
#page-payreq [style*="background:var(--surface)"] {
  background: var(--surface-raised) !important;
}

/* ── Wallet modal ── */
.wallet-modal {
  background: var(--surface-raised) !important;
}

/* ── Confirm wrap ── */
.confirm-wrap {
  background: var(--surface-raised) !important;
  border-color: var(--border-strong) !important;
}
.conf-rows {
  background: #1a1a1a !important;
}

/* ── Lend tabs ── */
#page-lend .send-tabs {
  background: rgba(255,255,255,.04) !important;
}
#page-lend .stab {
  background: transparent !important;
}
#page-lend .stab.active {
  background: #2563EB !important;
  color: #fff !important;
}

/* ── Light mode: undo surface-raised (light mode already works) ── */
[data-theme="light"] {
  --surface-raised: #f5f5f5;
  --input-bg: #EEF2FF;
}
[data-theme="light"] input {
  background: #EEF2FF !important;
  border-color: #E0E7FF !important;
  color: #1a1a1a !important;
}
[data-theme="light"] .page [style*="background:var(--surface)"] {
  background: #EEF2FF !important;
}
[data-theme="light"] .confirm-wrap {
  background: #ffffff !important;
  border-color: #E0E7FF !important;
}
[data-theme="light"] .conf-rows {
  background: #EEF2FF !important;
}
[data-theme="light"] .wallet-modal {
  background: #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE DARK MODE — match app colour palette (#111111 base, purple accents)
   Only fires on mobile (max-width:768px) in dark theme — desktop untouched
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Bridge: chain dropdown — DARK mode ── */
  :root .chain-dropdown-btn,
  [data-theme="dark"] .chain-dropdown-btn {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(37,99,235,.25) !important;
    color: var(--text) !important;
  }
  :root .chain-dropdown-list,
  [data-theme="dark"] .chain-dropdown-list {
    background: #111111 !important;
    border-color: rgba(37,99,235,.25) !important;
  }
  :root .chain-dropdown-item,
  [data-theme="dark"] .chain-dropdown-item {
    background: #111111 !important;
    color: var(--text) !important;
  }
  :root .chain-dropdown-item:hover,
  [data-theme="dark"] .chain-dropdown-item:hover {
    background: rgba(37,99,235,.15) !important;
  }
  :root .chain-dropdown-item.selected,
  [data-theme="dark"] .chain-dropdown-item.selected {
    background: rgba(37,99,235,.18) !important;
  }

  /* ── Bridge: chain dropdown — LIGHT mode (must come after dark to win) ── */
  [data-theme="light"] .chain-dropdown-btn {
    background: #f5f5f5 !important;
    border-color: #E0E7FF !important;
    color: #111 !important;
  }
  [data-theme="light"] .chain-dropdown-list {
    background: #ffffff !important;
    border-color: #E0E7FF !important;
  }
  [data-theme="light"] .chain-dropdown-item {
    background: #ffffff !important;
    color: #111 !important;
  }
  [data-theme="light"] .chain-dropdown-item:hover {
    background: rgba(37,99,235,.06) !important;
  }
  [data-theme="light"] .chain-dropdown-item.selected {
    background: rgba(37,99,235,.08) !important;
  }
  [data-theme="light"] .chain-dropdown-item span {
    color: #111 !important;
  }

  /* ── History: stat boxes (4 SENDS / 0 SWAPS / 0 BRIDGES) ── */
  :root .hist-stat,
  [data-theme="dark"] .hist-stat {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(37,99,235,.2) !important;
  }

  /* ── Market: search bar ── */
  :root #page-market .mkt-search,
  [data-theme="dark"] #page-market .mkt-search {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(37,99,235,.2) !important;
  }
  :root #page-market .mkt-search input,
  [data-theme="dark"] #page-market .mkt-search input {
    background: transparent !important;
  }

  /* ── Bridge: FROM box — DARK ── */
  :root #page-bridge .card,
  [data-theme="dark"] #page-bridge .card {
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(37,99,235,.18) !important;
  }
  /* ── Bridge: FROM box — LIGHT ── */
  [data-theme="light"] #page-bridge .card {
    background: #ffffff !important;
    border-color: rgba(37,99,235,.18) !important;
  }

  /* ── Bridge: amount inner surface — DARK ── */
  :root #page-bridge .card > div[style*="background:var(--surface)"],
  [data-theme="dark"] #page-bridge .card > div[style*="background:var(--surface)"] {
    background: rgba(255,255,255,.04) !important;
  }
  /* ── Bridge: amount inner surface — LIGHT ── */
  [data-theme="light"] #page-bridge .card > div[style*="background:var(--surface)"] {
    background: #f5f5f5 !important;
  }

  /* ── Bridge: FROM chain pill — LIGHT ── */
  [data-theme="light"] #page-bridge .card div[style*="background:var(--surface)"] {
    background: #f5f5f5 !important;
  }

}


/* ── page-payreq-view: ensure it scrolls and fills on mobile ── */
#page-payreq-view {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: none;
  flex-direction: column;
  padding-bottom: 100px !important;
}
#page-payreq-view.active {
  display: flex !important;
}
/* Prevent any child overflow:hidden clipping the content */
#page-payreq-view > * {
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════════════
   RECEIPT (SEND SUCCESS) — LIGHT MODE TEXT FIXES
   All hardcoded #f0f0f0 text becomes dark in light theme
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .success-amount {
  color: #1a1a1a !important;
}
[data-theme="light"] .success-title {
  color:#000000 !important;
}
[data-theme="light"] .success-rec-val {
  color: #1a1a1a !important;
}
[data-theme="light"] .success-rec-label {
  color:#000000 !important;
}
[data-theme="light"] .success-hash {
  color: #2563EB !important;
}
[data-theme="light"] .success-recipient {
  background: rgba(37,99,235,.06) !important;
  border-color: rgba(37,99,235,.18) !important;
}
[data-theme="light"] .success-time {
  color: #2563EB !important;
}
/* Outline buttons in light mode success card */
[data-theme="light"] .success-actions .btn-outline {
  color: #2563EB !important;
  border-color: rgba(37,99,235,.35) !important;
  background: rgba(37,99,235,.06) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   NOTIFICATION PANEL — VISIBILITY + BACKDROP FIXES
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Backdrop ── */
#nanNotifBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6) !important;
  z-index: 10998 !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#nanNotifBackdrop.open {
  display: block !important;
}

/* Panel itself */
#nanNotifPanel {
  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4) !important;
  z-index: 10999 !important;
  border: 1.5px solid rgba(37,99,235,.35) !important;
  background: #111111 !important;
}
#nanNotifPanel.open {
  display: flex !important;
}

/* Light mode panel — needs dark enough background to be readable */
[data-theme="light"] #nanNotifPanel {
  background: #ffffff !important;
  border-color: rgba(37,99,235,.25) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1) !important;
}
[data-theme="light"] #nanNotifHeader {
  background: #f5f5f5 !important;
  border-bottom-color: rgba(37,99,235,.15) !important;
}
[data-theme="light"] #nanNotifHeader span {
  color: #1a1a1a !important;
}
[data-theme="light"] #nanNotifClear {
  color: #2563EB !important;
}
[data-theme="light"] .nan-notif-title {
  color: #1a1a1a !important;
}
[data-theme="light"] .nan-notif-msg {
  color:#000000 !important;
}
[data-theme="light"] .nan-notif-time {
  color:#000000 !important;
}
[data-theme="light"] .nan-notif-item:hover {
  background: #f5f5f5 !important;
}
[data-theme="light"] #nanNotifEmpty {
  color:#000000 !important;
}
[data-theme="light"] #nanPushBanner {
  background: rgba(37,99,235,.06) !important;
  border-bottom-color: rgba(37,99,235,.15) !important;
}
[data-theme="light"] #nanPushBanner span {
  color:#000000 !important;
}

/* Mobile: full-width panel from topbar */
@media (max-width: 768px) {
  #nanNotifPanel {
    right: 0 !important;
    left: 0 !important;
    top: 57px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 72vh !important;
    border-radius: 0 0 20px 20px !important;
    border-left: 1.5px solid rgba(37,99,235,.35) !important;
    border-right: 1.5px solid rgba(37,99,235,.35) !important;
    border-top: none !important;
  }
}


/* ── Mobile: prevent content stretching on large phones (Galaxy Ultra, etc) ── */
@media (min-width: 481px) and (max-width: 768px) {
  .page {
    align-items: center;
  }
  .page > * {
    max-width: 480px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}



/* Legacy two-column bridge layout removed — Bridge now uses the same
   single unified-card structure as Swap, no special desktop overrides needed. */


.home-bal-chips{flex-wrap:wrap !important;max-width:200px !important;justify-content:flex-end !important;}


/* ════════════════════════════════════════════════════════════════
   NAN WALLET — UI POLISH TO 10/10
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Consistent font scale system ──────────────────────────── */
:root {
  --fs-xs:   .68rem;   /* 10.9px — timestamps, meta */
  --fs-sm:   .75rem;   /* 12px   — labels, captions */
  --fs-base: .875rem;  /* 14px   — body text */
  --fs-md:   1rem;     /* 16px   — default */
  --fs-lg:   1.125rem; /* 18px   — subheadings */
  --fs-xl:   1.5rem;   /* 24px   — headings */
  --fs-2xl:  2rem;     /* 32px   — balance amounts */
  --fs-3xl:  2.6rem;   /* 41.6px — hero balance */
  --lh-tight: 1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;
}

/* ── 2. Page transitions — slide in from right ─────────────────── */
@keyframes nanPageIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nanPageInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nanFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.page.active {
  animation: nanPageIn 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* Bottom-sheet pages slide up */
#page-payreq-view.active,
#page-payreq-new.active,
#page-pay-now.active {
  animation: nanPageInUp 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── 3. Prefers-color-scheme — auto dark/light ─────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --surface: #141414;
    --card: #161616;
    --text: #f0f0f0;
    --text2: #d0d0d0;
    --text3: #c5c5c5;
    --border: rgba(255,255,255,.07);
  }
}
/* Re-apply our charcoal palette over the prefers-color-scheme:dark block above
   (same specificity, later in source order wins). Excludes light theme and
   does not use !important, so it can't bleed into [data-theme="light"] or
   the mobile pure-black override. */
:root:not([data-theme="light"]) {
  --bg: #0a0a0a;
  --surface: #141414;
  --card: #161616;
  --card2: #1c1c1c;
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.16);
  --topbar-bg: #1a1a1a;
  --nav-bg: #1a1a1a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fafafa;
    --surface: #f5f5f5;
    --card: #ffffff;
    --text: #111111;
    --text2: rgba(0,0,0,.72);
    --text3: rgba(0,0,0,.55);
    --border: rgba(0,0,0,.08);
  }
}

/* ── 4. Reduced motion — respect user preference ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .page.active { animation: nanFadeIn 0.15s ease both; }
}

/* ── 5. Focus-visible for keyboard navigation ──────────────────── */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid rgba(37,99,235,.7) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(37,99,235,.7) !important;
  outline-offset: 3px !important;
}

/* ── 6. Font loading fallback ──────────────────────────────────── */
body {
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif !important;
}
.mono, .addr, input[type="text"].mono {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code',
               ui-monospace, 'Cascadia Code', monospace !important;
}

/* ── 7. Screen reader text for SVG icons ───────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── 8. Pull-to-refresh indicator ──────────────────────────────── */
#pullRefreshIndicator {
  position: fixed;
  top: 57px; left: 0; right: 0;
  height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--bg);
  transition: height 0.2s ease;
  z-index: 500;
  font-size: var(--fs-sm);
  color: var(--accent3);
  font-weight: 600;
  gap: 6px;
}
#pullRefreshIndicator.pulling { height: 44px; }
#pullRefreshIndicator.refreshing { height: 44px; }
#pullRefreshIndicator svg {
  transition: transform 0.3s ease;
}
#pullRefreshIndicator.pulling svg { transform: rotate(180deg); }
@keyframes nanSpin {
  to { transform: rotate(360deg); }
}
#pullRefreshIndicator.refreshing svg {
  animation: nanSpin 0.7s linear infinite;
}

/* ── 9. QR code wrapper — styled ───────────────────────────────── */
#qrBox canvas, #qrBox img {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(37,99,235,.15) !important;
}
#qrBox {
  padding: 12px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(37,99,235,.1) !important;
}

/* ── 10. Empty states — all list pages ─────────────────────────── */
.nan-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 10px;
  text-align: center;
}
.nan-empty-icon {
  font-size: 2.2rem;
  opacity: .4;
  margin-bottom: 4px;
}
.nan-empty-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text2);
}
.nan-empty-sub {
  font-size: var(--fs-sm);
  color: var(--text3);
  line-height: var(--lh-loose);
  max-width: 220px;
}

/* ── 11. Micro-interactions — button active state ──────────────── */
.btn:active,
button.btn:active,
.nav-btn:active,
.dnav-btn:active,
.mob-action-ico:active {
  transform: scale(0.97) !important;
  transition: transform 0.08s ease !important;
}
.mob-asset-row:active {
  background: rgba(255,255,255,.04) !important;
  transition: background 0.1s ease !important;
}

/* ── 12. Smooth scrolling everywhere ───────────────────────────── */
html { scroll-behavior: smooth; }
.page { scroll-behavior: smooth; }

/* ── 13. Better input styling ─────────────────────────────────── */
input::placeholder { color: var(--text3) !important; opacity: 1 !important; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; }
input[type="number"] { -moz-appearance: textfield !important; }

/* ── 14. Selection colour ─────────────────────────────────────── */
::selection { background: rgba(37,99,235,.25) !important; color: var(--text) !important; }

/* ── 15. Print — hide everything except key info ─────────────── */
@media print {
  body { background: #fff !important; }
  .bottom-nav, #desktopNav, #globalTopBar,
   #agentPanel, #nanNotifBackdrop, #nanNotifPanel,
  .btn { display: none !important; }
  .page { position: static !important; display: block !important; }
  #page-home { display: block !important; }
}

/* ── 16. Lazy image loading indicator ────────────────────────── */
img { loading: lazy; }
img[loading="lazy"] { background: var(--surface); min-height: 1px; }

/* ── 17. Keyboard shortcut hint pill (desktop only) ──────────── */
@media (min-width: 769px) {
  .kb-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 700;
    color: var(--text3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: auto;
    letter-spacing: .02em;
    font-family: ui-monospace, monospace;
  }
}
@media (max-width: 768px) {
  .kb-hint { display: none !important; }
}

/* ── 18. Swipe back hint animation (mobile) ──────────────────── */
@keyframes nanSwipeHint {
  0%   { transform: translateX(0); opacity: .5; }
  50%  { transform: translateX(8px); opacity: 1; }
  100% { transform: translateX(0); opacity: .5; }
}
.back-btn:hover .back-arrow,
.back-btn:focus .back-arrow {
  animation: nanSwipeHint 0.8s ease 2;
}

/* ── 19. Consistent card hover on desktop ────────────────────── */
@media (min-width: 769px) {
  .mob-asset-row:hover {
    background: rgba(255,255,255,.03) !important;
    transition: background .15s ease !important;
    cursor: pointer !important;
  }
  .card:hover {
    border-color: rgba(37,99,235,.2) !important;
    transition: border-color .2s ease !important;
  }
}

/* ── 20. Sticky balance card on scroll (mobile) ──────────────── */
@media (max-width: 768px) {
  #page-home {
    scroll-padding-top: 57px;
  }
}



/* ════════════════════════════════════════════════════════════════
   READABILITY OVERHAUL — WCAG AA compliant, no eye strain
   ════════════════════════════════════════════════════════════════ */

/* ── Fix CSS variables — all colours pass 4.5:1 contrast ──────── */

/* DARK MODE — base bg #111111 / card #111111 */
[data-theme="dark"],
:root:not([data-theme="light"]) {
  --text:   #f0f0f0  !important;   /* 18.4:1 on dark bg ✅ */
  --text2:  #d0d0d0  !important;   /* brightened further per confirmed testing */
  --text3:  #c5c5c5  !important;   /* brightened further per confirmed testing */
  --border: rgba(255,255,255,.10) !important;
  --border2:rgba(255,255,255,.18) !important;
}

/* LIGHT MODE — base bg #fafafa / card #ffffff */
[data-theme="light"] {
  --text:   #111111  !important;   /* 19.6:1 ✅ */
  --text2:  rgba(0,0,0,.78)  !important;   /* 9.7:1  ✅ (was rgba(0,0,0,.72) 7.4:1) */
  --text3:  rgba(0,0,0,.68)  !important;   /* 5.7:1  ✅ (was rgba(0,0,0,.55) 2.8:1 — was FAILING) */
  --border: rgba(0,0,0,.10)       !important;
  --border2:rgba(0,0,0,.16)       !important;
}

/* ── Global minimum font size — nothing smaller than 11px (0.6875rem) ── */
/* Catch all .6rem, .62rem, .65rem etc. in both CSS and inline styles */
* { font-size: max(var(--fs-current, inherit), 0px); }

/* Override tiny font sizes globally with CSS min() trick */
[style*="font-size:.6rem"]    { font-size: .75rem !important; }
[style*="font-size:.62rem"]   { font-size: .75rem !important; }
[style*="font-size:.65rem"]   { font-size: .75rem !important; }
[style*="font-size:.68rem"]   { font-size: .76rem !important; }
[style*="font-size:.7rem"]    { font-size: .78rem !important; }
[style*="font-size:.72rem"]   { font-size: .78rem !important; }
[style*="font-size:9px"]      { font-size: 11px  !important; }
[style*="font-size:10px"]     { font-size: 11px  !important; }

/* ── Fix hardcoded rgba-white — invisible in light mode ─────────── */
/* Replace with var(--text3) which adapts to theme */
[style*="color:#ffffff"] { color: var(--text3) !important; }
[style*="color:#ffffff"]  { color: var(--text3) !important; }
[style*="color:#ffffff"] { color: var(--text3) !important; }
[style*="color:var(--text2)"]  { color: var(--text2) !important; }
[style*="color:#ffffff"]  { color: var(--text2) !important; }
[style*="color:#ffffff"] { color: var(--text2) !important; }
[style*="color:#ffffff"]  { color: var(--text2) !important; }

/* ── Fix #f0f0f0 — near-invisible in light mode ─────────────────── */
[data-theme="light"] [style*="color:#f0f0f0"] { color: #1a1a1a !important; }
[data-theme="light"] [style*="color: #f0f0f0"]{ color: #1a1a1a !important; }

/* ── Fix --text3 in CSS classes to use new value ─────────────────── */
.page-sub, .sub, .caption, .meta,
.nan-notif-time, .nan-notif-msg,
.hist-stat-lbl, .tx-label,
.conf-lbl, .flbl,
.success-title, .success-rec-label, .success-time,
.addr, .empty, .empty-text,
[class*="-sub"], [class*="-label"], [class*="-meta"],
[class*="-caption"], [class*="-hint"] {
  color: var(--text2) !important;
}

/* ── Line height — comfortable reading ───────────────────────────── */
body, .page, p, span, div {
  line-height: 1.5;
}
h1, h2, h3, .page-title, .home-bal-num, .success-amount {
  line-height: 1.2 !important;
}
input, button { line-height: 1.4; }

/* ── Letter spacing — labels easier to read ────────────────────── */
.section-label, .page-sub, [style*="letter-spacing:.1em"],
[style*="text-transform:uppercase"] {
  letter-spacing: .08em !important;
}

/* ── Body text size floor — 14px minimum for paragraph text ─────── */
.page p, .page li, .page span:not(.ni):not(.nav-lbl) {
  font-size: max(.875rem, 14px) !important;
}

/* ── Earn page — fix hardcoded rgba-white colours ───────────────── */
#page-lend [style*="color:#ffffff"],
#page-lend [style*="color:#ffffff"],
#page-lend [style*="color:#ffffff"] {
  color: var(--text2) !important;
}
#page-lend [style*="color:#ffffff"] { color: var(--text3) !important; }

/* ── History page ─────────────────────────────────────────────── */
.tx-date, .tx-time, .hist-stat-lbl {
  color: var(--text3) !important;
  font-size: .78rem !important;
}
.tx-label { color: var(--text) !important; font-size: .88rem !important; }
.tx-amount { font-size: .9rem !important; font-weight: 700 !important; }

/* ── Market page — fix small fonts ──────────────────────────────── */
#page-market [style*="font-size:.6rem"],
#page-market [style*="font-size:.62rem"],
#page-market [style*="font-size:.65rem"],
#page-market [style*="font-size:.68rem"],
#page-market [style*="font-size:.7rem"] {
  font-size: .78rem !important;
}

/* ── Bridge + Swap labels ────────────────────────────────────────── */
#page-bridge [style*="font-size:.8rem"],
#page-swap   [style*="font-size:.875rem"] {
  color: var(--text) !important;
}

/* ── Notification panel text ─────────────────────────────────────── */
.nan-notif-title { font-size: .85rem !important; color: var(--text) !important; }
.nan-notif-msg   { font-size: .78rem !important; color: var(--text2) !important; }
.nan-notif-time  { font-size: .72rem !important; color: var(--text3) !important; }

/* ── Toast — bigger, easier to read ─────────────────────────────── */
#toast {
  font-size: .9rem !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

/* ── Admin dashboard text ────────────────────────────────────────── */
#page-admin [style*="font-size:.875rem"] { font-size: .9rem !important; }

/* ── Payment request view ────────────────────────────────────────── */
#page-payreq-view .nan-notif-time,
#page-payreq-view [style*="font-size:.72rem"],
#page-payreq-view [style*="font-size:.7rem"] {
  font-size: .78rem !important;
}
#page-payreq-view [style*="font-size:.85rem"],
#page-payreq-view [style*="font-size:.82rem"] {
  font-size: .875rem !important;
  color: var(--text) !important;
}

/* ── ARC identity page ───────────────────────────────────────────── */
#page-arcname .page-sub { color: var(--text2) !important; }

/* ── Modals and pickers ──────────────────────────────────────────── */
.wallet-modal, #bankPickerSheet, #chainPickerSheet {
  font-size: .9rem !important;
}

/* ── Success card ─────────────────────────────────────────────────── */
.success-title  { font-size: 1rem  !important; color: var(--text2) !important; }
.success-amount { font-size: 2rem  !important; color: var(--text)  !important; }
.success-rec-val{ font-size: .9rem !important; color: var(--text)  !important; }
.success-time   { font-size: .82rem !important; }

/* ── Confirm card ─────────────────────────────────────────────────── */
.conf-lbl { font-size: .875rem !important; color: var(--text2) !important; }
.conf-val { font-size: .9rem   !important; color: var(--text)  !important; font-weight: 600 !important; }
.conf-val.big { font-size: 1.1rem !important; font-weight: 800 !important; }

/* ── Tab switcher active ──────────────────────────────────────────── */
.tab-active, .stab.active, #tab-send-btn, .send-tab-active {
  font-weight: 700 !important;
}

/* ── Bottom nav labels ───────────────────────────────────────────── */
.nav-btn { font-size: .65rem !important; font-weight: 600 !important; letter-spacing: .04em !important; }
.nav-lbl { font-size: .65rem !important; }

/* ── Scrollable content breathing room ──────────────────────────── */
.page > * + * { margin-top: 0; }
.card + .card { margin-top: 10px; }

/* ── Link readability ─────────────────────────────────────────────── */
a { color: var(--accent3) !important; text-decoration: none !important; }
a:hover { text-decoration: underline !important; color: var(--accent4) !important; }



/* ── Send page: input visibility in dark mode (mobile) ─────────── */
@media (max-width: 768px) {
  /* Address input */
  [data-theme="dark"] #recipInput,
  :root:not([data-theme="light"]) #recipInput {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(37,99,235,.35) !important;
    color: #ffffff !important;
  }
  [data-theme="dark"] #recipInput:focus,
  :root:not([data-theme="light"]) #recipInput:focus {
    border-color: rgba(37,99,235,.7) !important;
    background: rgba(37,99,235,.08) !important;
  }

  /* Amount box wrapper */
  [data-theme="dark"] #amtWrap,
  :root:not([data-theme="light"]) #amtWrap {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(37,99,235,.35) !important;
  }

  /* Amount input text */
  [data-theme="dark"] #amtInput,
  :root:not([data-theme="light"]) #amtInput {
    color: #ffffff !important;
    caret-color: #2563EB !important;
  }

  /* Token buttons */
  [data-theme="dark"] #topt-usdc,
  [data-theme="dark"] #topt-eurc,
  :root:not([data-theme="light"]) #topt-usdc,
  :root:not([data-theme="light"]) #topt-eurc {
    background: rgba(255,255,255,.04) !important;
    border-color:#ffffff !important;
    color: #E0E7FF !important;
  }
  [data-theme="dark"] #topt-usdc.active,
  :root:not([data-theme="light"]) #topt-usdc.active {
    background: rgba(37,99,235,.15) !important;
    border-color: rgba(37,99,235,.6) !important;
    color: #ffffff !important;
  }

  /* Unified card on send page */
  [data-theme="dark"] #page-send > div,
  :root:not([data-theme="light"]) #page-send > div {
    background: #111111 !important;
    border-color: rgba(37,99,235,.2) !important;
  }
}



/* ══════════════════════════════════════════════
   NAN PREMIUM MOBILE UI  (max-width:767px only)
   #2563EB colour system · desktop untouched
══════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   NAN WALLET — SINGLE AUTHORITATIVE MOBILE CSS
   max-width: 767px only. Desktop untouched above this block.
   Last rule wins — this block is always last in the file.
══════════════════════════════════════════════════════════════ */
@media(max-width:767px){

  /* ─────────────────────────────────────────
     THEME TOKENS (mobile overrides)
  ───────────────────────────────────────── */
  :root {
    --card: transparent !important;
    --card2: transparent !important;
    --surface: #141414 !important;
    --bg: #0a0a0a !important;
    --border: rgba(255,255,255,.10) !important;
    --text: #f0f0f0 !important;
    --text2: #d0d0d0 !important;
    --text3: #c5c5c5 !important;
  }
  /* Remove all blur — kills lag on mobile */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Strip card wrappers — flat layout */
  .card, .send-card,
  [style*="border-radius:22px"],
  [style*="border-radius:18px"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .page, #app-root, body, html {
    background: var(--bg) !important;
  }

  /* ─────────────────────────────────────────
     TOP BAR
  ───────────────────────────────────────── */
  #globalTopBar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 52px !important;
    padding: 0 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--border) !important;
    z-index: 200 !important;
  }
  [data-theme=light] #globalTopBar {
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
  }
  /* Brand logo — scale down */
  #globalTopBar .brand-logo svg,
  #globalTopBar .brand svg { width: 32px !important; height: 32px !important; }
  /* Hide elements we moved to drawer */
  #themeToggle         { display: none !important; }
  #disconnectTopBtn    { display: none !important; }
  #disconnectTopBtnMobile { display: none !important; }
  #nanNotifBtn         { display: none !important; }
  #navFaucetBtn        { display: none !important; }
  #topbarPageInfo      { display: none !important; }
  #nan-history-btn     { display: none !important; }
  .desktop-only-btn    { display: none !important; }
  .tb-btn-text         { display: none !important; }
  /* Show net pill short form */
  .net-pill            { display: flex !important; align-items: center !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 7px !important; border-radius: 6px !important; }
  .net-pill-full       { display: none !important; }
  .net-pill-short      { display: inline !important; }
  /* Address pill */
  /* Hide connectTopBtn on mobile — drawer shows address */
  #connectTopBtn,
  #connectTopBtn.connected { display: none !important; }
  #mobileAddrPill { display: none !important; }
  /* connectTopBtn hidden on mobile in both themes */
  /* Burger */
  #nanDrawerBurger { display: flex !important; }
  .nan-burger-line { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); }

  /* ─────────────────────────────────────────
     PAGE AREA
  ───────────────────────────────────────── */
  .page {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important; right: 0 !important;
    bottom: 58px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 24px !important;
    z-index: 10 !important;
  }
  /* Hide greeting text on home — topbar shows address */
  .wal-addr, .home-greeting, .home-name { display: none !important; }

  /* ─────────────────────────────────────────
     BOTTOM NAV
  ───────────────────────────────────────── */
  .bottom-nav {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 58px !important;
    padding: 6px 8px 8px !important;
    background: var(--nav-bg) !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    z-index: 100 !important;
  }
  [data-theme=light] .bottom-nav {
    border-top: 1px solid rgba(0,0,0,.07) !important;
  }
  .nav-pill-wrap {
    display: flex !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    gap: 4px !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .nav-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 5px 4px 4px !important;
    border-radius: 10px !important;
    font-size: .55rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    color:#ffffff !important;
    background: none !important;
    border: 1px solid transparent !important;
    transition: all .15s !important;
    text-transform: uppercase !important;
  }
  [data-theme=light] .nav-btn { color:#000000 !important; }
  .nav-btn .ni svg { width: 19px !important; height: 19px !important; }
  .nav-btn.active {
    color: #2563EB !important;
    background: rgba(37,99,235,.1) !important;
    border-color: transparent !important;
  }
  .nav-btn.active svg { filter: drop-shadow(0 0 4px rgba(37,99,235,.5)) !important; }
  [data-theme=light] .nav-btn.active { color: #2563EB !important; }

  /* ─────────────────────────────────────────
     HOME PAGE
  ───────────────────────────────────────── */
  /* Outer card wrapper — remove */
  #page-home > div:first-child {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  /* Balance section */
  #page-home > div:first-child > div:first-child {
    background: transparent !important;
    padding: 20px 16px 16px !important;
    border-bottom: 1px solid rgba(37,99,235,.1) !important;
    position: relative !important;
    overflow: visible !important;
  }
  /* Purple glow */
  #page-home > div:first-child > div:first-child::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(37,99,235,.1) 0%, transparent 65%);
    pointer-events: none;
    border-radius: 50%;
  }
  /* "Total Balance" label */
  #page-home > div:first-child > div:first-child > div:first-child {
    font-size: .6rem !important;
    letter-spacing: .16em !important;
    color: var(--text2) !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
  }
  [data-theme=light] #page-home > div:first-child > div:first-child > div:first-child {
    color:#000000 !important;
  }
  /* Balance amount — no double $ */
  #homeBalAmt {
    font-family: 'Inter',sans-serif !important;
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
  }
  #homeBalAmt::before { content: none !important; }
  /* NGN line */
  #homeBalNgn {
    font-size: .7rem !important;
    color: rgba(37,99,235,.5) !important;
    margin-bottom: 20px !important;
    font-family: 'DM Mono','Roboto Mono',monospace !important;
  }
  /* Actions row */
  .mob-actions {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(37,99,235,.1) !important;
    padding: 14px 10px 16px !important;
  }
  .mob-action-item,
  .mob-actions > div > div {
    gap: 7px !important;
    padding: 4px 6px !important;
  }
  .mob-action-ico {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
  /* Send + Receive = solid purple */
  .mob-actions > div > div:nth-child(1) .mob-action-ico,
  .mob-actions > div > div:nth-child(2) .mob-action-ico {
    background: #2563EB !important;
    box-shadow: none !important;
    border: none !important;
  }
  .mob-actions > div > div:nth-child(1) .mob-action-ico svg,
  .mob-actions > div > div:nth-child(2) .mob-action-ico svg {
    stroke: #ffffff !important;
  }
  /* All 4 action icons solid purple */
  .mob-actions > div > div:nth-child(3) .mob-action-ico,
  .mob-actions > div > div:nth-child(4) .mob-action-ico {
    background: #2563EB !important;
    border: none !important;
    box-shadow: none !important;
  }
  .mob-actions > div > div:nth-child(3) .mob-action-ico svg,
  .mob-actions > div > div:nth-child(4) .mob-action-ico svg {
    stroke: #ffffff !important;
  }
  .mob-actions span {
    font-size: .7rem !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    color: var(--text2) !important;
  }
  [data-theme=light] .mob-actions span { color: var(--text2) !important; }
  /* .arc Identity strip */
  #page-home > div:first-child > div:nth-child(3) {
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(37,99,235,.08) !important;
    background: transparent !important;
    border-top: none !important;
  }
  /* Asset rows */
  .mob-asset-row {
    padding: 11px 16px !important;
    border-bottom: 1px solid rgba(37,99,235,.07) !important;
  }
  .mob-asset-row img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
  }
  .asset-name { font-size: .85rem !important; font-weight: 600 !important; }
  .asset-sub  { font-size: .7rem !important; color: var(--text2) !important; }
  .asset-amt  { font-size: .82rem !important; font-weight: 600 !important; font-family: 'DM Mono','Roboto Mono',monospace !important; }
  .asset-usd  { font-size: .7rem !important; color: var(--text2) !important; }
  [data-theme=light] .asset-sub,
  [data-theme=light] .asset-usd { color:#000000 !important; }
  /* Recent transactions section (mobile only) */
  .mob-recent-section { display: block !important; border-top: 1px solid var(--border) !important; }
  .mob-tx-row { display: flex !important; align-items: center !important; gap: 11px !important; padding: 10px 16px !important; border-bottom: 1px solid rgba(37,99,235,.05) !important; }
  .mob-tx-row:last-child { border-bottom: none !important; }
  .mob-tx-ico { width: 34px !important; height: 34px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
  .mob-tx-out { background: rgba(255,255,255,.05) !important; border: 1px solid var(--border) !important; }
  .mob-tx-in  { background: rgba(255,255,255,.05) !important; border: 1px solid var(--border) !important; }
  .mob-tx-inf { flex: 1 !important; min-width: 0 !important; }
  .mob-tx-name { font-size: .8rem !important; font-weight: 600 !important; color: var(--text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 2px !important; }
  .mob-tx-date { font-size: .67rem !important; color: var(--text2) !important; }
  .mob-tx-amt  { font-family: 'DM Mono','Roboto Mono',monospace !important; font-size: .78rem !important; font-weight: 600 !important; flex-shrink: 0 !important; }
  .mob-tx-amt.neg { color: rgba(248,113,113,.9) !important; }
  .mob-tx-amt.pos { color: var(--text) !important; }
  [data-theme=light] .mob-tx-date { color: var(--text2) !important; }

  /* ─────────────────────────────────────────
     SECTION LABELS
  ───────────────────────────────────────── */
  .section-label, .dnav-section-label {
    font-size: .6rem !important;
    letter-spacing: .14em !important;
    color:#ffffff !important;
    padding: 12px 16px 8px !important;
  }
  [data-theme=light] .section-label { color:#000000 !important; }

  /* ─────────────────────────────────────────
     MARKET PAGE
  ───────────────────────────────────────── */
  #page-market .mkt-wrap   { border-radius: 16px !important; }
  #page-market .mkt-inner  { padding: 12px !important; }
  #page-market .mbal       { padding: 12px 14px !important; margin-bottom: 10px !important; }
  #page-market .mbal-lbl   { font-size: 10px !important; }
  #page-market .mbal-amt   { font-size: 1.6rem !important; }
  #page-market .mbal-ngn   { font-size: 12px !important; }
  #page-market .msl        { font-size: 11px !important; margin-bottom: 8px !important; opacity: 1 !important; }
  #page-market .mleg-item  { font-size: 12px !important; }
  #page-market .moc        { padding: 14px !important; }
  #page-market .moc-name   { font-size: 15px !important; font-weight: 700 !important; }
  #page-market .moc-desc   { font-size: 12px !important; }
  #page-market .msn        { font-size: 13px !important; font-weight: 700 !important; }
  #page-market .msd        { font-size: 11px !important; }
  #page-market .msi        { width: 36px !important; height: 36px !important; margin-bottom: 8px !important; }
  #page-market .msc        { padding: 13px !important; border-radius: 13px !important; }
  #page-market .mrn        { font-size: 14px !important; font-weight: 700 !important; }
  #page-market .mrs        { font-size: 12px !important; }
  #page-market .mrp        { font-size: 13px !important; font-weight: 700 !important; }
  #page-market .mri        { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
  #page-market .mrow       { padding: 12px 0 !important; gap: 11px !important; }
  #page-market .mrow-wrap  { padding: 0 12px !important; border-radius: 13px !important; }
  #page-market .live-tag   { font-size: 11px !important; padding: 2px 7px !important; }
  #page-market .mcta       { padding: 13px !important; border-radius: 13px !important; }
  #page-market .mcta-t     { font-size: 14px !important; font-weight: 700 !important; }
  #page-market .mcta-s     { font-size: 12px !important; }
  #page-market .mkt-search input { font-size: 16px !important; }
  #page-market .mkt-search,
  #page-market .mkt-search input { background: var(--surface) !important; color: var(--text) !important; }

  /* ─────────────────────────────────────────
     BRIDGE PAGE
  ───────────────────────────────────────── */
  #bridgeAmt { font-size: 15px !important; font-weight: 600 !important; width: 100% !important; min-width: 0 !important; }
  #page-bridge #bridgeBtn { font-size: 16px !important; font-weight: 700 !important; padding: 16px !important; border-radius: 14px !important; width: 100% !important; }
  #page-bridge .chain-dropdown-btn { font-size: 15px !important; padding: 10px 13px !important; border-radius: 12px !important; }

  /* ─────────────────────────────────────────
     BANK PICKER
  ───────────────────────────────────────── */
  #bankPickerSheet {
    left: 5% !important; right: 5% !important;
    bottom: 70px !important; width: 90% !important;
    max-height: 55vh !important;
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
  }
  #bankOptionsList { max-height: 35vh !important; overflow-y: auto !important; }
  [data-theme=dark] #bankPickerSheet { background: #111111 !important; border-color: rgba(37,99,235,.3) !important; }
  [data-theme=dark] #bankSearchInput { background: rgba(255,255,255,.06) !important; color: #f5f5f5 !important; border-color: rgba(37,99,235,.3) !important; }
  [data-theme=dark] #bankOptionsList > div { color: #f5f5f5 !important; }
  [data-theme=dark] #bankOptionsList > div:hover { background: rgba(37,99,235,.12) !important; }
  [data-theme=light] #bankPickerSheet { background: #ffffff !important; border-color: rgba(37,99,235,.2) !important; }
  [data-theme=light] #bankSearchInput { background: #f5f5f5 !important; color: #111 !important; }
  [data-theme=light] #bankOptionsList > div { color: #111 !important; background: #fff !important; }

  /* ─────────────────────────────────────────
     CHAIN DROPDOWN
  ───────────────────────────────────────── */
  [data-theme=dark] .chain-dropdown-list  { background: #111111 !important; border-color: rgba(37,99,235,.25) !important; }
  [data-theme=dark] .chain-dropdown-item  { color: var(--text) !important; background: #111111 !important; }
  [data-theme=dark] .chain-dropdown-item:hover { background: rgba(37,99,235,.15) !important; }
  [data-theme=dark] .chain-dropdown-btn   { color: var(--text) !important; background: rgba(255,255,255,.04) !important; border-color: rgba(37,99,235,.25) !important; }

  /* ─────────────────────────────────────────
     NOTIFICATION PANEL
  ───────────────────────────────────────── */
  #nanNotifPanel {
    top: 52px !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 0 0 16px 16px !important;
  }

  /* ─────────────────────────────────────────
     AI FAB — hide on mobile (use agent nav)
  ───────────────────────────────────────── */
  

  /* ─────────────────────────────────────────
     SIDE DRAWER
  ───────────────────────────────────────── */
  .nan-drow {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter var','Inter',sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color:#ffffff;
    text-align: left;
    position: relative;
    transition: background .12s;
  }
  .nan-drow:active,
  .nan-drow.nan-drow-active {
    background: rgba(37,99,235,.08) !important;
    color: #fff !important;
  }
  .nan-drow.nan-drow-active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: #2563EB;
    border-radius: 0 2px 2px 0;
  }
  .nan-drow-ic {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: rgba(37,99,235,.07);
    border: 1px solid rgba(37,99,235,.13);
    color: rgba(37,99,235,.8);
  }
  .nan-drow.nan-drow-active .nan-drow-ic {
    background: rgba(37,99,235,.14) !important;
    border-color: rgba(37,99,235,.28) !important;
  }
  .nan-drow-lbl { flex: 1; }
  #nanDrawer {
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    transform: translateX(-100%);
  }
  #nanDrawer.nan-drawer-open { transform: translateX(0) !important; }
  #nanDrawerOverlay { transition: opacity .22s; opacity: 0; }
  #nanDrawerOverlay.nan-drawer-open { opacity: 1 !important; }
  /* Drawer always dark */
  #nanDrawer { background: #111111 !important; color: #fff !important; }
  /* Drawer light mode */
  [data-theme=light] #nanDrawer { background: #ffffff !important; border-right-color: rgba(37,99,235,.15) !important; }
  [data-theme=light] .nan-drow { color:#000000 !important; }
  [data-theme=light] .nan-drow.nan-drow-active { color: #111 !important; background: rgba(37,99,235,.07) !important; }
  [data-theme=light] .nan-drow-ic { background: rgba(37,99,235,.07) !important; border-color: rgba(37,99,235,.12) !important; color: #2563EB !important; }
  [data-theme=light] #nanDrawerAddr { color:#000000 !important; }
  [data-theme=light] #nanDrawer [style*="color:#ffffff"] { color:#000000 !important; }
  [data-theme=light] .nan-drow-lbl { color:#000000 !important; }
  [data-theme=light] .nan-drow.nan-drow-active .nan-drow-lbl { color: #111 !important; }

  /* ─────────────────────────────────────────
     GENERAL FONT SIZES
  ───────────────────────────────────────── */
  .card-title { font-size: .85rem !important; }
  h2, .page-title { font-size: 1.1rem !important; }
  button:not(.nav-btn):not(#connectTopBtn):not(#disconnectTopBtnMobile):not(.nan-drow) {
    font-size: .85rem !important;
  }

}

  /* ── Kill purple balance card bg on mobile ── */
  #page-home [style*="background:var(--card)"][style*="padding:22px"],
  #page-home [style*="background:var(--card)"][style*="padding:20px"],
  #page-home > div:first-child > div:first-child {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  #page-home > div:first-child > div:first-child * {
    color: var(--text) !important;
  }
  /* ── Hide brand logo on mobile ── */
  #globalTopBar .brand-logo,
  #globalTopBar #secretTapZone,
  #globalTopBar .brand { display: none !important; }
  /* ── Hide wallet address display on mobile ── */
  #walAddr, .wal-addr,
  #homeGreet, .home-greeting,
  #homeGreetName, .home-name { display: none !important; }
  /* ── Hide AI FAB on mobile ── */
  
  /* ── Burger moves to the right, grouped with the Arc pill ── */
  #nanDrawerBurger { display: flex !important; flex-shrink: 0; order: 3; margin-left: 8px; }

  /* ── Logo hidden on mobile per request — only the arc-name/wallet pill shows now ── */
  #mobileBrandLogo {
    display: none !important;
  }
  /* ── Fix: with the brand logo removed from flex flow (position:absolute) and
     other items hidden, the wallet/profile pill group was the only remaining
     flex child in a space-between row, collapsing it to the left edge and
     overlapping the brand logo. Force it to the right explicitly. ── */
  /* Previously forced margin-left:auto here to avoid overlapping the mobile
     logo. Logo is now hidden entirely, so removed — the pill naturally sits
     left now, which is what's wanted. Scoped to mobile only — this was
     leaking globally before and canceling the desktop right-alignment fix. */
  @media(max-width:767px){
    #globalTopBar > div:last-of-type { margin-left: 0 !important; }
  }
  /* ── Fix: a claimed arc name (e.g. "zarafatolu.arc") is much longer than
     the default "Agent Wallet" label, making the pill wide enough to
     overlap the logo on narrow screens. Truncate with ellipsis instead. ── */
  #nanProfilePill { max-width: 46vw !important; }
  #nanProfileLabel { max-width: 32vw !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; display: inline-block !important; }

  /* ── Mobile network pill (right side, grouped with burger) ── */
  #mobileNetPill {
    display: flex !important; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', 'Inter', monospace; font-size: .68rem; font-weight: 700;
    letter-spacing: .04em; color: #2563EB;
    background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.22);
    border-radius: 100px; padding: 4px 10px; flex-shrink: 0;
    margin-left: auto !important; order: 2;
  }
  #mobileNetPill .dot {
    width: 6px; height: 6px; border-radius: 50%; background: #2563EB;
    animation: pulse 2s ease infinite; flex-shrink: 0;
  }
  [data-theme="light"] #mobileNetPill {
    background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.18);
  }



  /* ── Bridge page ── */
  #page-bridge .chain-dropdown-btn {
    font-size: .85rem !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }
  #page-bridge #bridgeAmt {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
  }
  #page-bridge #bridgeBtn {
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 15px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-shadow: 0 6px 24px rgba(37,99,235,.4) !important;
  }
  /* Chain pills in gateway section — intentionally hidden per request, was
     being force-shown by this !important rule despite inline display:none */
  #gatewayChains {
    display: none !important;
  }
  #gatewayChains > div {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 8px !important;
    padding: 5px 9px !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    color:#ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  #gatewayChains > div[style*="color:rgba(52,211,153"] {
    border-color: rgba(37,99,235,.2) !important;
    color: rgba(37,99,235,.8) !important;
  }


  /* ── Strip unified card wrapper on mobile for market/agent (Bridge now matches Swap, keeps its card) ── */
  #page-market > div[style*="background:var(--card)"],
  #page-agent-wallet > div[style*="background:var(--card)"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }


  /* ── AI button: show on mobile above bottom nav ── */
  #aiBtn {
    display: flex !important;
    bottom: 84px !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
  }

/* end @media(max-width:767px) */

@media(min-width:769px){
  /* ── Desktop: Bridge card now matches Swap's card exactly — no override needed. ── */

  /* ── Desktop: no boxed card on market page (full-width colorful redesign) ── */
  html body #page-market > div:first-child {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    max-width: none !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Desktop: no boxed card on agent wallet page ── */
  html body #page-agent-wallet > div:first-child {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    max-width: none !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN PAGE — readability fix
   Labels/captions inside #adminOverlay were using var(--text2)/
   var(--text3) at small font sizes on near-black card backgrounds,
   making them very hard to read. Brighten just this page so it
   doesn't affect --text2/--text3 anywhere else in the app.
══════════════════════════════════════════════════════════════ */
#adminOverlay [style*="color:var(--text2)"],
#adminOverlay [style*="color: var(--text2)"],
#adminOverlay [style*="color:var(--text3)"],
#adminOverlay [style*="color: var(--text3)"] {
  color:#000000 !important;
}
#adminOverlay [style*="color:var(--text)"],
#adminOverlay [style*="color: var(--text)"] {
  color: #f5f5f7 !important;
}
/* Card backgrounds are nearly transparent (.02-.03 alpha) — give them
   a touch more depth so the cards read as distinct surfaces, which
   also helps the text sitting on them appear higher contrast. */
#adminOverlay [style*="background:rgba(255,255,255,.02)"],
#adminOverlay [style*="background:rgba(255,255,255,.03)"] {
  background: rgba(255,255,255,.05) !important;
  border-color:#ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   BILL PAYMENT / AJO MODAL — now properly follows light/dark mode.
   The old approach forced an always-dark backdrop with forced-light
   text (see removed block below this comment, kept as history in
   git). All bill-payment/Ajo JS now generates real theme-aware hex
   colors directly via bpColors(), and #billTitle already uses
   var(--text) which is correctly dark-on-light / light-on-dark on
   its own — only the backdrop itself needs an explicit light-mode
   override below, plus the always-red Close button needs adjusting
   so it doesn't look too saturated against a white background.
══════════════════════════════════════════════════════════════ */
[data-theme="light"] #billOverlay {
  background: rgba(255,255,255,.98) !important;
}
[data-theme="light"] #billOverlay button[onclick="closeBillModal()"] {
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.25) !important;
  color: #5b21b6 !important;
}

/* ══════════════════════════════════════════════════════════════
   MARKET PAGE — light mode readability fix
   The entire Market page (search bar, Naira services, Nigerian
   services tiles, Money services, AI services) used hardcoded
   rgba(255,255,255,.0X) backgrounds and rgba(255,255,255,.2-.5)
   text — all assume a dark page background and become low-contrast
   to invisible in light mode. This predates today's bill-payment
   work; scoped fix here rather than touching every inline style.
══════════════════════════════════════════════════════════════ */
[data-theme="light"] #page-market [style*="background:rgba(255,255,255,.02)"],
[data-theme="light"] #page-market [style*="background:rgba(255,255,255,.03)"] {
  background: #f5f5f5 !important;
  border-color: #E0E7FF !important;
}
[data-theme="light"] #page-market [style*="color:#ffffff"] {
  color:#000000 !important;
}
[data-theme="light"] #page-market [style*="color:#ffffff"],
[data-theme="light"] #page-market [style*="color:#ffffff"] {
  color:#000000 !important;
}
[data-theme="light"] #page-market [style*="color:#ffffff"] {
  color:#000000 !important;
}
[data-theme="light"] #page-market [style*="color:#ffffff"] {
  color: #aaaaaa !important;
}
[data-theme="light"] #page-market svg[stroke*="rgba(255,255,255"] {
  stroke: rgba(0,0,0,.45) !important;
}

/* ══════════════════════════════════════════════════════════════
   AGENT WALLET (now Home) — break out of the global 600px desktop
   column so it renders full-bleed, matching its console-style
   redesign. Every other page intentionally keeps the narrow
   centered card look — this is scoped to this one page only.
══════════════════════════════════════════════════════════════ */
#page-agent-wallet{
  padding:0 !important;
  background:transparent !important;
}
[data-theme="light"] #page-agent-wallet{
  background:#ffffff !important;
}
#page-agent-wallet > *{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
@media(min-width:769px){
  #page-agent-wallet{
    align-items:stretch !important;
  }
}


/* ══════════════════════════════════════════════════════════
   NAN AURORA — premium agent wallet view
   ══════════════════════════════════════════════════════════ */
#page-agent-wallet > div:first-child{
  background: transparent !important;
}
[data-theme=light] #page-agent-wallet > div:first-child{
  background: transparent !important;
}

.nan-aur-wrap{max-width:760px;margin:0 auto;padding:64px 24px 60px;text-align:center;}
.nan-aur-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#93c5fd;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:100px;padding:7px 16px;margin-bottom:26px;}
.nan-aur-h1{font-size:clamp(30px,5.4vw,54px);font-weight:600;line-height:1.1;letter-spacing:-.03em;margin-bottom:20px;background:linear-gradient(180deg,#ffffff 0%,#93c5fd 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nan-aur-sub{font-size:16px;color:#ffffff;line-height:1.75;max-width:520px;margin:0 auto 32px;}
.nan-aur-input{width:100%;max-width:360px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 16px;color:#fff;font-size:14px;margin-bottom:12px;box-sizing:border-box;outline:none;font-family:inherit;}
.nan-aur-input::placeholder{color:#ffffff;}
.nan-aur-input:focus{border-color:rgba(37,99,235,.6);}
.nan-aur-cta{background:linear-gradient(180deg,#2563EB,#1D4ED8);color:#fff;border:none;border-radius:14px;padding:16px 38px;font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;box-shadow:0 12px 40px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s,box-shadow .2s;}
.nan-aur-cta:hover{transform:translateY(-1px);box-shadow:0 16px 48px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.3);}
.nan-aur-note{font-size:12px;color:#ffffff;margin-top:16px;}
.nan-aur-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left;margin-top:56px;}
.nan-aur-card{background:rgba(255,255,255,.09);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px rgba(0,0,0,.4);}
.nan-aur-tile{width:36px;height:36px;border-radius:11px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
.nan-aur-ct{font-size:15px;color:#fff;margin-bottom:7px;font-weight:500;}
.nan-aur-cd{font-size:13px;color:#ffffff;line-height:1.65;}

[data-theme=light] .nan-aur-h1{background:linear-gradient(180deg,#1a1a1a 0%,#2563EB 100%);-webkit-background-clip:text;background-clip:text;}
[data-theme=light] .nan-aur-sub{color:#000000;}
[data-theme=light] .nan-aur-badge{color:#2563EB;background:rgba(0,0,0,.04);border-color:#000000;}
[data-theme=light] .nan-aur-input{background:rgba(0,0,0,.04);border-color:#000000;color:#111;}
[data-theme=light] .nan-aur-input::placeholder{color:#000000;}
[data-theme=light] .nan-aur-card{background:rgba(255,255,255,.72);border-color:#000000;box-shadow:inset 0 1px 0 #fff,0 14px 34px rgba(0,0,0,.08);}
[data-theme=light] .nan-aur-ct{color:#111111;}
[data-theme=light] .nan-aur-cd{color:#000000;}
[data-theme=light] .nan-aur-note{color:#000000;}

@media(max-width:700px){
  .nan-aur-grid{grid-template-columns:1fr;margin-top:40px;}
  .nan-aur-wrap{padding:44px 18px 44px;}
  .nan-aur-sub{font-size:14px;}
}

/* nav refinement */
#topbarNav .tnav-btn{font-size:13px !important;}
#topbarNav .tnav-btn.active{background:rgba(255,255,255,.11) !important;border:1px solid rgba(255,255,255,.14) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16);color:#ffffff !important;border-radius:9px !important;}
[data-theme=light] #topbarNav .tnav-btn.active{background:rgba(0,0,0,.06) !important;border-color:#000000 !important;color:#111111 !important;box-shadow:none;}

/* Aurora — compact rhythm so cards clear the fold */
#page-agent-wallet > div:first-child > div:first-child{padding:10px 24px !important;}
.nan-aur-wrap{padding:26px 24px 30px !important;}
.nan-aur-badge{margin-bottom:14px !important;padding:5px 13px !important;font-size:11px !important;}
.nan-aur-h1{font-size:clamp(26px,3.6vw,40px) !important;margin-bottom:12px !important;}
.nan-aur-sub{font-size:14px !important;line-height:1.6 !important;max-width:470px !important;margin-bottom:20px !important;}
.nan-aur-cta{padding:13px 30px !important;font-size:14px !important;border-radius:12px !important;}
.nan-aur-note{margin-top:10px !important;font-size:11px !important;}
.nan-aur-grid{margin-top:28px !important;gap:12px !important;}
.nan-aur-card{padding:16px !important;border-radius:15px !important;}
.nan-aur-tile{width:30px !important;height:30px !important;margin-bottom:10px !important;font-size:15px !important;border-radius:9px !important;}
.nan-aur-ct{font-size:14px !important;margin-bottom:5px !important;}
.nan-aur-cd{font-size:12px !important;line-height:1.55 !important;}

/* Aurora — mobile: swipe carousel, clear of the tab bar */
@media(max-width:767px){
  .nan-aur-wrap{padding:16px 14px 90px !important;}
  .nan-aur-badge{margin-bottom:10px !important;font-size:10px !important;padding:4px 11px !important;}
  .nan-aur-h1{font-size:24px !important;margin-bottom:8px !important;}
  .nan-aur-sub{font-size:12.5px !important;margin-bottom:14px !important;}
  .nan-aur-cta{padding:12px 26px !important;font-size:13px !important;}
  .nan-aur-note{margin-top:8px !important;font-size:10px !important;}
  .nan-aur-grid{display:flex !important;grid-template-columns:none !important;overflow-x:auto !important;scroll-snap-type:x mandatory;gap:10px !important;margin-top:18px !important;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .nan-aur-grid::-webkit-scrollbar{display:none;}
  .nan-aur-card{flex:0 0 78% !important;scroll-snap-align:center;padding:14px !important;}
  .nan-aur-tile{width:28px !important;height:28px !important;margin-bottom:8px !important;font-size:14px !important;}
  .nan-aur-ct{font-size:13px !important;}
  .nan-aur-cd{font-size:11.5px !important;}
}

/* Aurora — final pass: purple icon tiles, gradient-edge cards, status row hidden */
#page-agent-wallet > div:first-child > div:first-child{display:none !important;}
.nan-aur-wrap{padding-top:34px !important;}

.nan-aur-tile{width:40px !important;height:40px !important;border-radius:12px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:14px !important;background:#dbeafe !important;color:#2563EB !important;box-shadow:none !important;}
.nan-aur-tile svg{width:20px;height:20px;display:block;}
[data-theme=dark] .nan-aur-tile,html:not([data-theme=light]) .nan-aur-tile{background:rgba(37,99,235,.18) !important;color:#2563EB !important;}

.nan-aur-card{background:linear-gradient(#ffffff,#ffffff) padding-box,linear-gradient(160deg,rgba(37,99,235,.5),rgba(37,99,235,.1) 55%,rgba(37,99,235,.28)) border-box !important;border:1px solid transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-radius:18px !important;padding:20px !important;box-shadow:0 10px 30px rgba(37,99,235,.12) !important;transition:transform .18s ease,box-shadow .22s ease !important;}
.nan-aur-card:hover{transform:translateY(-3px) !important;box-shadow:0 18px 44px rgba(37,99,235,.2) !important;}
[data-theme=dark] .nan-aur-card,html:not([data-theme=light]) .nan-aur-card{background:linear-gradient(#131318,#131318) padding-box,linear-gradient(160deg,rgba(37,99,235,.55),rgba(37,99,235,.12) 55%,rgba(37,99,235,.28)) border-box !important;box-shadow:0 12px 34px rgba(0,0,0,.5) !important;}

.nan-aur-ct{font-size:15px !important;font-weight:600 !important;letter-spacing:-.01em !important;}
.nan-aur-cd{font-size:12.5px !important;line-height:1.6 !important;}

/* ══════════════════════════════════════════════════════════
   NAN REFERENCE TREATMENT — agent wallet
   ══════════════════════════════════════════════════════════ */
#page-agent-wallet > div:first-child{position:relative;background:transparent !important;}

.nan-status-row{display:none !important;}

.nan-tex{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.nan-tex svg{position:absolute;top:0;right:0;width:66%;height:100%;opacity:.62;}
.nan-tex-fade{display:none;}
html[data-theme=light] .nan-tex svg{opacity:.5;}
html[data-theme=light] .nan-tex-fade{background:linear-gradient(90deg,#f4f3ef 0%,transparent 45%);}

#agentLoginSection,#agentOtpSection,#agentPendingSection{position:relative;z-index:1;}

html .nan-aur-wrap{padding:26px 24px 26px !important;}
html .nan-aur-badge{background:none !important;border:none !important;padding:0 !important;color:#2563EB !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.15em !important;margin-bottom:14px !important;}
html[data-theme=light] .nan-aur-badge{color:#2563EB !important;}
html .nan-aur-h1{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:#EEF2FF !important;font-size:clamp(30px,3.6vw,44px) !important;font-weight:800 !important;letter-spacing:-.04em !important;line-height:1 !important;margin-bottom:14px !important;}
html[data-theme=light] .nan-aur-h1{color:#111111 !important;}
html .nan-aur-sub{color:#ffffff !important;font-size:13.5px !important;line-height:1.6 !important;max-width:450px !important;margin-bottom:20px !important;}
html[data-theme=light] .nan-aur-sub{color:#000000 !important;}
html .nan-aur-cta{background:#2563EB !important;color:#ffffff !important;font-size:12.5px !important;font-weight:700 !important;padding:12px 24px !important;border-radius:6px !important;box-shadow:none !important;}
html .nan-aur-cta:hover{background:#1D4ED8 !important;transform:none !important;}
html .nan-aur-note{color:#ffffff !important;font-size:11px !important;margin-top:10px !important;}
html[data-theme=light] .nan-aur-note{color:#000000 !important;}

html .nan-aur-grid{margin-top:28px !important;gap:0 !important;border-top:1px solid rgba(255,255,255,.1) !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
html[data-theme=light] .nan-aur-grid{border-top-color:#000000 !important;}
html .nan-aur-card{background:none !important;border:none !important;border-right:1px solid rgba(255,255,255,.1) !important;border-radius:0 !important;box-shadow:none !important;padding:18px 22px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
html[data-theme=light] .nan-aur-card{border-right-color:#000000 !important;}
html .nan-aur-grid > .nan-aur-card:last-child{border-right:none !important;}
html .nan-aur-card:hover{transform:none !important;box-shadow:none !important;}
html .nan-aur-tile{background:none !important;box-shadow:none !important;width:auto !important;height:auto !important;justify-content:flex-start !important;color:#2563EB !important;margin-bottom:10px !important;}
html[data-theme=light] .nan-aur-tile{color:#2563EB !important;}
html .nan-aur-tile svg{width:18px;height:18px;}
html .nan-aur-ct{color:#ffffff !important;font-size:13.5px !important;font-weight:700 !important;margin-bottom:4px !important;}
html[data-theme=light] .nan-aur-ct{color:#111111 !important;}
html .nan-aur-cd{color:#ffffff !important;font-size:12px !important;line-height:1.55 !important;}
html[data-theme=light] .nan-aur-cd{color:#000000 !important;}

@media(max-width:767px){
  html .nan-aur-grid{grid-template-columns:1fr !important;}
  html .nan-aur-card{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.1) !important;}
  html[data-theme=light] .nan-aur-card{border-bottom-color:#000000 !important;}
  .nan-tex svg,.nan-tex-fade{width:100% !important;}
  html .nan-aur-h1{font-size:26px !important;}
}

/* ══════════════════════════════════════════════════════════════
   MAIN APP BACKGROUND — match the React landing page
   Uses the same dark/light base, soft purple orbs, and flowing
   ribbon language from src/components/NanRibbons.jsx.
══════════════════════════════════════════════════════════════ */
:root,
html[data-theme="dark"]{
  --bg:#0a0a0a !important;
  --topbar-bg:rgba(17,17,17,.85) !important;
  --nav-bg:rgba(17,17,17,.85) !important;
}

html[data-theme="light"]{
  --bg:#fafafa !important;
  --topbar-bg:rgba(250,250,250,.85) !important;
  --nav-bg:rgba(250,250,250,.85) !important;
}

html,
body{
  background:var(--bg) !important;
}

body{
  position:relative;
}

#app-root,
.page,
.page-land{
  background:transparent !important;
}

#globalTopBar,
.bottom-nav{
  background:var(--topbar-bg) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
}

.bottom-nav{
  background:var(--nav-bg) !important;
}

.nan-tex{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:var(--bg) !important;
}

.nan-tex svg,
.nan-tex-fade{
  display:none !important;
}

.nan-tex::before{
  display:none;
}

.nan-tex::after{
  display:none;
}

@keyframes nanLandingFlow{
  to{background-position:-1360px 0;}
}

@media (prefers-reduced-motion: reduce){
  .nan-tex::after{animation:none !important;}
}

/* Fit the agent-wallet intro inside the visible browser viewport. */
#page-agent-wallet{
  overflow-y:auto !important;
}

#page-agent-wallet > div:first-child{
  min-height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
}

#agentLoginSection{
  width:100% !important;
}

html .nan-aur-wrap{
  width:min(100%, 1100px) !important;
  max-width:1100px !important;
  padding:clamp(18px, 3vh, 34px) 24px clamp(24px, 5vh, 52px) !important;
}

html .nan-aur-h1{
  font-size:clamp(34px, 4.5vw, 58px) !important;
}

html .nan-aur-grid{
  margin-top:clamp(18px, 3.2vh, 30px) !important;
}

@media(max-height:820px) and (min-width:768px){
  html .nan-aur-wrap{
    padding:16px 24px 24px !important;
  }

  html .nan-aur-badge{
    margin-bottom:10px !important;
  }

  html .nan-aur-h1{
    font-size:clamp(32px, 3.6vw, 48px) !important;
    margin-bottom:10px !important;
  }

  html .nan-aur-sub{
    font-size:13px !important;
    line-height:1.45 !important;
    margin-bottom:14px !important;
  }

  html .nan-aur-cta{
    padding:11px 24px !important;
  }

  html .nan-aur-note{
    margin-top:8px !important;
  }

  html .nan-aur-grid{
    margin-top:18px !important;
  }

  html .nan-aur-card{
    padding:14px 18px !important;
  }

  html .nan-aur-tile{
    margin-bottom:7px !important;
  }

  html .nan-aur-cd{
    line-height:1.45 !important;
  }
}

/* ══ Agent wallet hero v2 — two-column layout with globe visual, light/dark aware ══ */
.nan-hero-cols{display:grid !important;grid-template-columns:1.15fr 1fr !important;gap:32px !important;align-items:center !important;margin-bottom:8px !important;}
.nan-hero-left{min-width:0 !important;}
.nan-hero-left .nan-aur-h1{
  font-size:2.3rem !important;font-weight:800 !important;line-height:1.15 !important;letter-spacing:-.03em !important;
  background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;
  color:var(--text,#fff) !important;margin-bottom:14px !important;
}
html[data-theme=light] .nan-hero-left .nan-aur-h1{color:var(--text,#111) !important;}
.nan-hero-left .nan-aur-h1 .nan-hero-accent{
  font-size:inherit !important;font-weight:inherit !important;line-height:inherit !important;letter-spacing:inherit !important;
  color:#2563EB !important;background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;
  text-decoration:none !important;display:inline !important;
}
/* ID-based final override — confirmed via console test to reliably win over the legacy cascade
   in a way the class-based rules above sometimes didn't, depending on theme/rule load order */
#nanRealHeroH1{font-size:2.3rem !important;font-weight:800 !important;line-height:1.15 !important;}
#nanRealHeroAccent{font-size:inherit !important;font-weight:inherit !important;line-height:inherit !important;color:#2563EB !important;}
@media(max-width:600px){
  .nan-hero-left .nan-aur-h1{font-size:1.8rem !important;}
  #nanRealHeroH1{font-size:1.8rem !important;}
}
.nan-hero-btnrow{display:flex !important;gap:12px !important;flex-wrap:wrap !important;align-items:center !important;margin:6px 0 0 !important;}
.nan-hero-left .nan-aur-cta{padding:13px 24px !important;font-size:.88rem !important;border-radius:10px !important;}
.nan-hero-left .nan-aur-note{margin-top:10px !important;}
.nan-hero-docs-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text,#fff);font-weight:700;font-size:.88rem;padding:13px 24px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.nan-hero-docs-btn:hover{border-color:rgba(37,99,235,.5);}
html[data-theme=light] .nan-hero-docs-btn{border-color:rgba(0,0,0,.18);}

.nan-hero-globe-wrap{position:relative !important;height:340px !important;max-height:340px !important;display:flex !important;align-items:center !important;justify-content:center !important;overflow:visible !important;}
.nan-hero-globe{
  width:340px !important;height:340px !important;min-width:340px !important;min-height:340px !important;max-width:340px !important;max-height:340px !important;
  flex-shrink:0 !important;border-radius:50% !important;position:absolute !important;right:-40px !important;top:50% !important;transform:translateY(-50%) !important;overflow:hidden !important;
  background:radial-gradient(circle at 32% 28%,#1e3a8a 0%,#0f1f42 45%,#0b0b14 75%) !important;
  box-shadow:0 0 90px rgba(37,99,235,.3) inset,0 0 60px rgba(37,99,235,.2),0 12px 40px rgba(37,99,235,.15) !important;
  border:1px solid rgba(37,99,235,.28) !important;
}
.nan-hero-globe-svg{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;display:block !important;}
.nan-hero-grid-line ellipse{fill:none !important;stroke:rgba(255,255,255,.07) !important;stroke-width:1 !important;}
.nan-hero-trail line{stroke:rgba(37,99,235,.3) !important;stroke-width:1 !important;}

/* Keep the bigger globe from bleeding into the nav above or the feature strip below */
#agentLoginSection{overflow:hidden !important;}

/* Light theme: the globe stays a dark "night sky" sphere on purpose (it's meant to read as
   Earth from space), but gets a softer surrounding glow so it doesn't look like a hole on white */
html[data-theme=light] .nan-hero-globe{
  box-shadow:0 0 60px rgba(37,99,235,.22) inset,0 0 40px rgba(37,99,235,.14),0 14px 34px rgba(37,99,235,.18) !important;
  border-color:rgba(37,99,235,.22) !important;
}

.nan-hero-tagline{text-align:center !important;margin-top:28px !important;font-size:.85rem !important;color:var(--text3,#888) !important;}
.nan-hero-tagline .nan-hero-accent{font-weight:700 !important;}

@media(max-width:900px){
  .nan-hero-cols{grid-template-columns:1fr !important;}
  .nan-hero-globe-wrap{display:none !important;}
}

/* Escape the legacy .nan-aur-card specificity conflicts entirely for the hero feature strip —
   using the extra wrapper class here beats every older rule regardless of !important/order */
.nan-hero-features.nan-aur-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:0 !important;}
.nan-hero-features.nan-aur-grid .nan-aur-card{background:none !important;border:none !important;border-right:1px solid var(--border,rgba(255,255,255,.1)) !important;border-radius:0 !important;box-shadow:none !important;padding:8px 22px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.nan-hero-features.nan-aur-grid .nan-aur-card:last-child{border-right:none !important;}
.nan-hero-features.nan-aur-grid .nan-aur-tile{background:none !important;box-shadow:none !important;width:auto !important;height:auto !important;justify-content:flex-start !important;color:#2563EB !important;margin-bottom:10px !important;}
.nan-hero-features.nan-aur-grid .nan-aur-tile svg{width:18px !important;height:18px !important;}
.nan-hero-features.nan-aur-grid .nan-aur-ct{color:var(--text,#fff) !important;font-size:.9rem !important;font-weight:700 !important;margin-bottom:4px !important;}
.nan-hero-features.nan-aur-grid .nan-aur-cd{color:var(--text3,#888) !important;font-size:.8rem !important;line-height:1.55 !important;}
@media(max-width:767px){
  .nan-hero-features.nan-aur-grid{grid-template-columns:1fr !important;}
  .nan-hero-features.nan-aur-grid .nan-aur-card{border-right:none !important;border-bottom:1px solid var(--border,rgba(255,255,255,.1)) !important;}
  .nan-hero-features.nan-aur-grid .nan-aur-card:last-child{border-bottom:none !important;}
}

/* ══════════════════════════════════════════════════════════
   PERSISTENT LEFT SIDEBAR — Home/Send/Swap/Bridge/Payroll/Naira/History
   Uses the site's existing theme CSS vars so it auto-follows light/dark,
   no custom JS re-theming needed.
   ══════════════════════════════════════════════════════════ */
#nanSidebar{
  position:fixed;top:0;left:0;bottom:0;width:220px;z-index:99998;
  display:flex;flex-direction:column;padding:10px 14px;box-sizing:border-box;
  background:var(--card);border-right:1px solid var(--border);
  transition:width .2s;overflow:hidden;
}
#nanSidebarCollapseBtn{
  position:absolute;top:16px;right:14px;width:28px;height:28px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .15s;z-index:1;
}
#nanSidebarCollapseBtn:hover{background:var(--card2);}
.nan-sb-brand{display:flex;align-items:center;gap:8px;padding:0 6px 16px;}
.nan-sb-logo{width:28px;height:28px;border-radius:50%;background:#2563EB;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nan-sb-brand-label{font-weight:800;font-size:1rem;color:var(--text);}
.nan-sb-items{flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.nan-sb-items::-webkit-scrollbar{display:none;}
.nan-sb-item-row{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
  cursor:pointer;font-size:15px;font-weight:500;color:var(--text2);font-family:'Inter',sans-serif;
  transition:background .15s,color .15s;
}
.nan-sb-item-row:hover{background:rgba(37,99,235,.08);color:var(--text);}
.nan-sb-item-row.active{
  background:#2563EB;
  color:#fff;font-weight:700;
}
.nan-sb-section-label{
  padding:10px 12px 4px;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3);font-family:'Inter',sans-serif;
}
.nan-sb-divider{height:1px;background:var(--border);margin:8px 12px;}
body.nan-sidebar-collapsed .nan-sb-section-label,
body.nan-sidebar-collapsed .nan-sb-divider{display:none;}
.nan-sb-item-row svg{flex-shrink:0;}
.nan-sb-naira-icon{width:17px;text-align:center;font-weight:700;flex-shrink:0;color:inherit;}
.nan-sb-theme-row{display:flex;align-items:center;gap:6px;padding:10px 6px;border-top:1px solid var(--border);margin-top:8px;}
.nan-sb-theme-row button{width:32px;height:32px;border-radius:9px;border:none;background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.nan-sb-wallet-btn{
  margin-top:10px;background:#2563EB;border:none;color:#fff;font-weight:700;font-size:.85rem;
  padding:12px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
}

/* Collapsed state */
body.nan-sidebar-collapsed #nanSidebar{width:72px;}
body.nan-sidebar-collapsed #nanSidebarCollapseBtn{transform:rotate(180deg);}
body.nan-sidebar-collapsed .nan-sb-label{display:none;}
body.nan-sidebar-collapsed .nan-sb-item-row{justify-content:center;}
body.nan-sidebar-collapsed .nan-sb-wallet-btn{padding:12px 0;}

/* Shift page content to make room for the sidebar (ID-level rule needed for
   #page-agent-wallet specifically, since it has its own `padding:0 !important`
   that would otherwise beat a plain .page class rule) */
.page,#globalTopBar,#agentLoginSection{padding-left:220px !important;box-sizing:border-box !important;transition:padding-left .2s;}
#page-agent-wallet{padding-left:220px !important;}
body.nan-sidebar-collapsed .page,
body.nan-sidebar-collapsed #globalTopBar,
body.nan-sidebar-collapsed #agentLoginSection{padding-left:72px !important;}
body.nan-sidebar-collapsed #page-agent-wallet{padding-left:72px !important;}
body.nan-sidebar-collapsed #supportPanel{left:72px !important;}

/* Fixes the CSS-grid blowout/cutoff bug on the feature-card tab rows (Career/Marketplace/Gigs)
   now that the page is narrower due to the sidebar taking up space */
.nan-feat-card{min-width:0 !important;}

@media(max-width:900px){
  #nanSidebar{display:none;}
  .page,#globalTopBar,#agentLoginSection,#page-agent-wallet{padding-left:0 !important;}
  #supportPanel{left:0 !important;}
}

/* Desktop with sidebar: the top bar (brand mark, network pill, Profile
   dropdown) fully duplicates what the sidebar already provides — remove it
   entirely and let page content use the reclaimed vertical space instead of
   leaving it floating alone in the top-right. */
@media(min-width:901px){
  #globalTopBar{display:none !important;}
  .page{top:0 !important;padding-top:6px !important;}
}

/* Old floating theme toggle + old top-nav Wallet dropdown are both redundant now
   that the sidebar has its own theme toggle and covers everything the Wallet
   dropdown used to (Send/Swap/Bridge/Payroll/Naira/History) */
#nanFloatThemeToggle{display:none !important;}
#tnav-trade-btn{display:none !important;}

/* ── Page titles: unify to NAN purple across all features ── */
.page-title{color:#2563EB !important;}
[data-theme="light"] .page-title{color:#2563EB !important;}

/* ── Bottom nav contrast fix: many accumulated .nav-btn rules across this
   file were conflicting, leaving inactive tab icons/labels too faint to
   read clearly in both themes. Target .bottom-nav .nav-btn specifically
   (higher specificity, placed last) to guarantee this wins. Bottom nav is
   mobile-only (hidden entirely on desktop), so this can't affect desktop. ── */
.bottom-nav .nav-btn:not(.active) { color: #d8d8d8 !important; }
.bottom-nav .nav-btn:not(.active) svg { stroke: #d8d8d8 !important; }
[data-theme="light"] .bottom-nav .nav-btn:not(.active) { color: rgba(37,99,235,.8) !important; }
[data-theme="light"] .bottom-nav .nav-btn:not(.active) svg { stroke: rgba(37,99,235,.8) !important; }

/* ── Wallet dropdown menu (navWalletMenu) was staying dark regardless of
   theme, even though it's set to background:var(--surface) inline — adding
   an explicit, guaranteed-priority override rather than continuing to
   chase why the variable wasn't resolving as expected. ── */
#navWalletMenu { background: var(--surface) !important; color: var(--text) !important; }
[data-theme="light"] #navWalletMenu { background: #ffffff !important; border-color: rgba(0,0,0,.12) !important; box-shadow: 0 8px 24px rgba(0,0,0,.15) !important; }
[data-theme="light"] #navWalletMenu * { color: #111111 !important; }
[data-theme="light"] #navWalletMenu button[onclick*="navMenuAgentDisconnect"],
[data-theme="light"] #navWalletMenu button[onclick*="navMainWalletDisconnect"] { color: #2563EB !important; }
[data-theme="light"] #navWalletMenu button[onclick*="navShowWelcomeModal"] { color: #2563EB !important; }

/* ══════════════════════════════════════════════════════════════════
   PREMIUM BOTTOM NAV — OPay-inspired redesign, final override.
   Placed at end of file + #bottomNav ID scoping so it wins over the
   ~40 accumulated legacy .nav-btn rules earlier in this file.
   ══════════════════════════════════════════════════════════════════ */
#bottomNav.bottom-nav{
  background:var(--nav-bg) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  border-top:1px solid var(--border) !important;
  box-shadow:0 -6px 24px rgba(0,0,0,.18) !important;
}
#bottomNav .nav-pill-wrap{
  display:flex !important;
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:2px 0 0 !important;
  gap:0 !important;
}
#bottomNav .nav-btn{
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:8px 2px 6px !important;
  border:none !important;
  background:transparent !important;
  color:var(--text3) !important;
  font-family:'Inter',sans-serif !important;
  font-size:.66rem !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  border-radius:0 !important;
  position:relative !important;
  opacity:.62 !important;
  transition:color .18s ease,opacity .18s ease,transform .15s ease !important;
}
#bottomNav .nav-btn .ni{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:transform .18s ease !important;
}
#bottomNav .nav-btn .ni svg{
  width:23px !important;
  height:23px !important;
  stroke-width:1.8 !important;
  transition:stroke-width .18s ease !important;
}
#bottomNav .nav-btn.active{
  color:#2563EB !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
}
#bottomNav .nav-btn.active .ni{
  transform:translateY(-1px) !important;
}
#bottomNav .nav-btn.active .ni svg{
  stroke-width:2.4 !important;
  filter:none !important;
}
#bottomNav .nav-btn.active::before{
  content:'' !important;
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:20px !important;
  height:3px !important;
  border-radius:0 0 4px 4px !important;
  background:#2563EB !important;
}
#bottomNav .nav-btn:active{
  transform:scale(.94) !important;
}
/* Career agent + Real Estate removed from mobile bottom nav (already hidden on desktop sidebar) */
#bottomNav #nav-career,
#bottomNav #nav-supplier{
  display:none !important;
}

[data-theme="light"] #bottomNav.bottom-nav{
  background:var(--nav-bg) !important;
  border-top:1px solid rgba(37,99,235,.12) !important;
  box-shadow:0 -6px 20px rgba(0,0,0,.06) !important;
}
[data-theme="light"] #bottomNav .nav-btn{
  color:rgba(0,0,0,.5) !important;
}
[data-theme="light"] #bottomNav .nav-btn.active{
  color:#2563EB !important;
}

@media(max-width:360px){
  #bottomNav .nav-btn{font-size:.6rem !important;}
  #bottomNav .nav-btn .ni svg{width:21px !important;height:21px !important;}
}