:root{
  --primary:#1E63FF; --primary-d:#1547CC; --accent:#06B6D4;
  --ink:#0B1524; --muted:#5b6b7f; --bg:#f4f7fb; --surface:#fff;
  --border:#e3e8ef; --dark:#0b1220; --radius:16px;
  --success:#16a34a; --error:#dc2626; --warn:#d97706;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55}
a{color:var(--primary);text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--muted)}
.error{color:var(--error);font-size:13px;margin-top:8px}
.center{text-align:center}

/* Buttons & inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border:1px solid var(--border);border-radius:12px;background:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:.15s}
.btn:hover{background:#f8fafc}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-d)}
.btn.block{width:100%}
.btn.sm{padding:8px 12px;font-size:13px}
.btn.ghost{background:transparent}
label{display:block;font-weight:600;font-size:13px;margin:12px 0 6px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;font-size:15px;font-family:inherit;background:#fff}
.field{margin-bottom:4px}

/* Auth screens (mobile-app style) */
.authwrap{min-height:100vh;max-width:520px;margin:0 auto;padding:20px 20px 36px;background:linear-gradient(180deg,#eef3ff 0%,#fbfcff 40%)}
.auth-top{display:flex}
.back{width:42px;height:42px;border-radius:13px;background:#fff;border:1px solid var(--border);box-shadow:0 8px 18px -12px rgba(15,30,70,.4);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.auth-head{margin:22px 0 20px}
.auth-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
.auth-brand .logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff}
.auth-h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:16px 0 6px}
.auth-sub{color:var(--muted);margin:0;font-size:15px;max-width:340px}
.inp2{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:14px;padding:9px 14px;background:#fff;margin-bottom:12px}
.inp2:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,99,255,.12)}
.inp2 .ic{width:40px;height:40px;border-radius:11px;background:#eef4ff;color:var(--primary);display:grid;place-items:center;flex:0 0 40px}
.inp2 .prefix{font-weight:800;color:var(--ink);padding:0 6px;border-right:1px solid var(--border);white-space:nowrap}
.inp2 .col{flex:1;min-width:0;display:flex;flex-direction:column}
.inp2 .col b{font-size:13px;font-weight:700}
.inp2 .col input{border:none;padding:2px 0 0;font-size:15px;background:transparent;width:100%}
.inp2 .col input:focus{outline:none}
.inp2 .eye{background:none;border:none;color:var(--muted);cursor:pointer;padding:6px}
.inp2.invalid{border-color:#dc2626;background:#fff6f6}
body.dark .inp2.invalid{background:#2a1416}
.fld-err{color:#dc2626;font-size:12.5px;margin:0 6px}
.fld-err:not(:empty){margin:-7px 6px 12px}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0 16px;font-size:14px}
.check{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);cursor:pointer}
.check input{width:auto;accent-color:var(--primary)}
.check.terms{align-items:flex-start;font-weight:500;font-size:13px;margin:6px 0 16px}
.check.terms input{margin-top:3px}
.pwhint{display:flex;align-items:center;gap:8px;background:#eef4ff;border-radius:12px;padding:11px 13px;color:var(--ink);font-size:13px;font-weight:600;margin-bottom:14px}
.pwhint .ic{color:var(--primary)}
.btn-xl{width:100%;padding:16px;border-radius:14px;background:var(--primary);color:#fff;border:none;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 14px 26px -14px rgba(30,99,255,.7)}
.btn-xl:hover{background:var(--primary-d)}
.divider{display:flex;align-items:center;gap:14px;color:var(--muted);margin:20px 0;font-size:14px}
.divider:before,.divider:after{content:'';height:1px;background:var(--border);flex:1}
.alt-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f4f7ff;border-radius:14px;padding:14px 16px}
.alt-card b{font-size:14px}
.alt-card .s{font-size:12px}
.alt-link{color:var(--primary);font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.auth-bottom{text-align:center;margin-top:20px;color:var(--muted);font-size:14px}
.auth-bottom a{font-weight:800}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px;margin-top:24px}
.secure .ic{color:var(--primary)}
.err.error{margin:2px 0 12px}

/* App shell */
.app{max-width:900px;margin:0 auto;min-height:100vh;background:var(--bg);padding-bottom:78px}
.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.topbar .brand{font-weight:800;display:flex;align-items:center;gap:8px}
.topbar .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff;font-size:12px}
.topbar .brand-img{display:block;width:auto;height:38px;max-width:170px;object-fit:contain}
.topbar .bell{color:var(--muted);position:relative;cursor:pointer}
.view{padding:16px}

/* Cards */
.wallet{background:linear-gradient(135deg,var(--dark),#15233d);color:#fff;border-radius:var(--radius);padding:20px;margin-bottom:16px}
.wallet .lbl{color:#9fb0c9;font-size:12px}
.wallet .bal{font-size:30px;font-weight:800;margin:6px 0 14px}
.wallet .actions{display:flex;gap:10px}
.wallet .actions .btn{flex:1;background:rgba(255,255,255,.12);border:none;color:#fff}
.subcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.subcard{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.subcard .k{font-size:11px;color:var(--muted)}
.subcard .v{font-weight:800;margin-top:4px;font-size:15px}

/* Quick actions */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.qa .item{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 6px;text-align:center;cursor:pointer;transition:.15s}
.qa .item:hover{transform:translateY(-2px)}
.qa .ic{width:40px;height:40px;border-radius:11px;background:#eef4ff;color:var(--primary);display:grid;place-items:center;margin:0 auto 7px}
.qa .item span{font-size:12px;font-weight:600}

/* Panels & lists */
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.panel h3{margin:0 0 12px;font-size:15px}
.list-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
.list-row:last-child{border-bottom:none}
.list-row .t{font-size:14px;font-weight:600}
.list-row .s{font-size:12px;color:var(--muted)}
.amt{font-weight:800}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700}
.badge.success{background:#dcfce7;color:#166534}
.badge.failed,.badge.reversed{background:#fee2e2;color:#991b1b}
.badge.pending,.badge.processing{background:#fef3c7;color:#92400e}
.badge.refunded{background:#e0e7ff;color:#3730a3}

/* Grid selectors */
.netgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.netgrid .net{border:1px solid var(--border);border-radius:12px;padding:12px 4px;text-align:center;cursor:pointer;font-weight:700;font-size:13px}
.netgrid .net.active{border-color:var(--primary);background:#eef4ff;color:var(--primary)}
.plan{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer}
.plan.active{border-color:var(--primary);background:#eef4ff}

/* Data type tabs (chips) */
.dtype-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dtype-tabs::-webkit-scrollbar{display:none}
.dtype{flex:0 0 auto;border:1px solid var(--border);background:#fff;color:var(--muted);font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.12s}
.dtype.active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 6px 14px -6px rgba(30,99,255,.6)}
body.dark .dtype{background:#0e1729;color:var(--muted)}

/* Data plan grid */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:520px){.plan-grid{grid-template-columns:repeat(2,1fr)}}
.plan-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid var(--border);border-radius:14px;padding:16px 8px;background:#fff;cursor:pointer;transition:.12s;text-align:center}
.plan-card:hover{border-color:#c7d6ff}
.plan-card.active{border-color:var(--primary);background:#eef4ff;box-shadow:0 0 0 3px rgba(30,99,255,.12)}
body.dark .plan-card{background:#0e1729;color:var(--ink)}
body.dark .plan-card.active{background:#16233f}
.pc-size{font-size:20px;font-weight:800;line-height:1.1}
.pc-amt{font-size:14px;font-weight:700;color:var(--ink)}
.pc-valid{font-size:12px;color:var(--muted)}
.pc-check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;display:none;place-items:center}
.pc-check svg{width:13px;height:13px}
.plan-card.active .pc-check{display:grid}
.preview{background:#eef4ff;border-radius:12px;padding:12px 14px;margin:12px 0;font-weight:700}

/* Bottom nav */
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:900px;background:#fff;border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:8px 4px;z-index:20}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:11px;font-weight:600;padding:4px 10px;border-radius:10px}
.bottomnav a.active{color:var(--primary)}

/* Toast + modal + pin */
.toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(20px);background:#0f172a;color:#fff;padding:12px 18px;border-radius:12px;opacity:0;transition:.25s;z-index:100;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--error)}
.result{text-align:center;padding:20px}
.result .ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px}
.result.ok .ic{background:#dcfce7;color:var(--success)}
.result.bad .ic{background:#fee2e2;color:var(--error)}
.token{background:#0b1220;color:#fff;border-radius:12px;padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:18px;letter-spacing:2px;margin:12px 0;word-break:break-all}
.loading{padding:40px;text-align:center;color:var(--muted)}
/* Top progress bar + view fade for smooth navigation */
#nprogress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));z-index:300;opacity:0;transition:width .3s ease}
#nprogress.go{opacity:1;box-shadow:0 0 8px rgba(30,99,255,.5)}
.view.fade{animation:viewFade .22s ease}
@keyframes viewFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Buy screens */
.buy-title{font-size:28px;font-weight:800;margin:6px 0 2px}
.buy-title span{color:var(--primary)}
.buy-sub{color:var(--muted);margin:0 0 16px}
.paycard{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:16px}
.paycard label,.flabel{display:block;font-weight:700;font-size:14px;margin:0 0 10px}
.netsel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.netcard{position:relative;border:1.5px solid var(--border);border-radius:14px;padding:12px 6px;text-align:center;cursor:pointer;transition:.12s}
.netcard.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,99,255,.1)}
.nlogo{width:44px;height:44px;margin:0 auto 6px;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.nlogo img{width:44px;height:44px;object-fit:cover;border-radius:50%}
.np{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}
.netcard span.nm{font-size:12px;font-weight:600}
.ncheck{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}
.ncheck svg{width:13px;height:13px}
.phonebox,.amtbox{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px;background:#fff}
.phonebox .cc{display:flex;align-items:center;gap:6px;padding:12px;border-right:1px solid var(--border);font-weight:700;white-space:nowrap}
.phonebox .flag{width:18px;height:14px;border-radius:2px;background:linear-gradient(90deg,#008751 33%,#fff 33% 66%,#008751 66%)}
.phonebox input,.amtbox input{border:none;flex:1;padding:13px;font-size:15px;min-width:0}
.phonebox input:focus,.amtbox input:focus{outline:none}
.phonebox .contact{background:none;border:none;color:var(--primary);padding:0 12px;cursor:pointer}
.amtbox .naira{padding:0 14px;font-weight:800;color:var(--muted)}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.preset{border:1px solid var(--border);border-radius:11px;padding:11px 4px;text-align:center;font-weight:800;color:var(--primary);cursor:pointer;background:#fff}
.preset.active{background:#eef4ff;border-color:var(--primary)}
.switchrow{display:flex;align-items:center;gap:12px}
.switch{position:relative;width:44px;height:26px;flex:0 0 44px;border-radius:99px;background:#cbd5e1;cursor:pointer;transition:.15s}
.switch.on{background:var(--primary)}
.switch:after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.switch.on:after{left:21px}
.securenote{display:flex;align-items:center;gap:12px;background:#eef3ff;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.securenote .ic{width:40px;height:40px;border-radius:11px;background:var(--primary);color:#fff;display:grid;place-items:center;flex:0 0 40px}
.securenote b{display:block;font-size:14px}.securenote span{font-size:13px;color:var(--muted)}
.btn-continue{width:100%;padding:16px;border-radius:14px;background:var(--primary);color:#fff;border:none;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.btn-continue:disabled{opacity:.7}
select.sel{width:100%;padding:13px;border:1px solid var(--border);border-radius:12px;font-size:15px;margin-bottom:14px;background:#fff}

/* Confirm-transaction sheet */
body.modal-open{overflow:hidden}
.sheet-bg{position:fixed;inset:0;background:rgba(11,18,32,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:130;animation:sheetFade .18s ease}
.sheet{background:#fff;border-radius:18px;width:100%;max-width:440px;max-height:calc(100vh - 48px);overflow:auto;box-shadow:0 30px 70px -20px rgba(11,18,32,.55);animation:sheetPop .2s cubic-bezier(.2,.8,.25,1)}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}
@keyframes sheetPop{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.sheet-head{background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;font-weight:800;font-size:18px}
.sheet-head span{display:flex;align-items:center;gap:10px}.sheet-head span svg{color:#f97316}
.sheet-x{background:rgba(255,255,255,.15);border:none;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.sheet-sum{background:#f6f8fc;padding:6px 20px}
.crow{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px}
.crow:last-child{border-bottom:none}.crow span{color:var(--muted)}.crow b{color:var(--ink)}
.sheet-body{padding:20px}
.pinbox{width:100%;text-align:center;letter-spacing:14px;font-size:24px;padding:16px;border:2px solid #f7c9a6;border-radius:14px;background:#f9fafb;margin:10px 0 16px}
.pinbox:focus{outline:none;border-color:#f97316}
.btn-auth{width:100%;padding:16px;border-radius:14px;background:#f97316;color:#fff;border:none;font-weight:800;font-size:16px;cursor:pointer}
.btn-auth.blue{background:var(--primary)}

/* PIN setup + notice modals */
.pin-modal{text-align:center;max-width:440px}
.pin-ic{width:74px;height:74px;border-radius:50%;background:#fde8dc;color:#f97316;display:grid;place-items:center;margin:0 auto 14px}
.pin-ic svg{width:32px;height:32px}
.pin-modal h3{font-size:22px;margin:0 0 8px}
.pin-modal p{color:var(--muted);margin:0 0 18px}
.pin-row{display:flex;gap:14px;margin-bottom:18px}
.pin-row>div{flex:1;text-align:left}
.pin-row label{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;display:block}
.pin-row input{text-align:center;letter-spacing:10px;font-size:20px;padding:14px;border:1px solid var(--border);border-radius:12px;width:100%}
.notice-modal{text-align:center;max-width:420px}
.notice-ic{width:74px;height:74px;border-radius:50%;background:#dcf5e6;color:#16a34a;display:grid;place-items:center;margin:0 auto 14px}
.notice-ic svg{width:34px;height:34px}
.notice-modal h3{font-size:22px;margin:0 0 8px}.notice-modal p{color:var(--muted);margin:0 0 20px}
.btn-ok{background:#16a34a;color:#fff;border:none;padding:14px 40px;border-radius:12px;font-weight:800;cursor:pointer}

/* Profile */
.profile-hero{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:16px}
.ph-cover{height:88px;background:linear-gradient(120deg,var(--dark),#1b2b4d)}
.ph-body{padding:0 18px 18px;position:relative}
.avatar{width:76px;height:76px;border-radius:16px;background:linear-gradient(135deg,#f97316,#fb923c);display:grid;place-items:center;color:#fff;font-size:30px;font-weight:800;border:4px solid #fff;margin-top:-38px}
.ph-name{font-size:22px;font-weight:800;margin:10px 0 2px}
.ph-handle{color:var(--muted);font-size:14px}
.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:14px;margin-top:14px}
.ph-stat{padding:14px;text-align:center}.ph-stat+.ph-stat{border-left:1px solid var(--border)}
.ph-stat .k{font-size:11px;color:var(--muted);letter-spacing:.05em}.ph-stat .v{font-size:20px;font-weight:800;margin-top:4px}
.edit-btn{position:absolute;right:18px;top:14px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-weight:700;font-size:13px;display:inline-flex;gap:6px;align-items:center}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);gap:10px}
.info-row:last-child{border-bottom:none}.info-row .k{color:var(--muted);font-size:14px}.info-row .v{font-weight:700;text-align:right}
.pill-copy{background:#fde8dc;color:#f97316;border-radius:8px;padding:5px 10px;font-weight:800;display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.sec-row{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;cursor:pointer}
.sec-row .ic{width:40px;height:40px;border-radius:11px;background:#f1f5f9;color:var(--ink);display:grid;place-items:center;flex:0 0 40px}
.sec-row b{display:block;font-size:14px}.sec-row .s{font-size:12px;color:var(--muted)}
.sec-row .chev{margin-left:auto;color:var(--muted)}
.sec-head{display:flex;align-items:center;gap:8px;font-weight:800;margin:6px 0 12px}
.sec-head .ic{color:var(--primary)}
.pcard{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:16px}

/* Settings */
.set-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:8px 14px;margin-bottom:14px}
.set-cap{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;padding:12px 0 6px}
.set-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--border);cursor:pointer}
.set-row:first-of-type{border-top:none}
.set-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:0 0 38px}
.set-row b{display:block;font-size:14px}.set-row .s{font-size:12px;color:var(--muted)}
.set-row .chev{margin-left:auto;color:var(--muted)}
.signout{width:100%;background:#fff;border:1px solid var(--border);border-radius:14px;padding:15px;font-weight:800;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}

/* Receipt */
.rcpt-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rcpt{background:#fff;border:1px solid var(--border);border-radius:18px;padding:4px 16px;margin-bottom:16px}
.rrow{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border)}
.rrow:last-child{border-bottom:none}
.rrow .ic{width:44px;height:44px;border-radius:12px;background:#eef4ff;color:var(--primary);display:grid;place-items:center;flex:0 0 44px}
.rrow .k{color:var(--muted);font-size:13px}
.rrow .v{font-weight:700;font-size:16px;margin-top:2px;word-break:break-word}
.rcpt-actions{display:flex;gap:12px}
.rcpt-actions .btn{flex:1;justify-content:center;color:var(--primary);border-color:var(--primary);font-weight:800}

/* Dark mode */
body.dark{--bg:#0b1220;--surface:#111a2e;--ink:#e6ecf5;--muted:#93a4bd;--border:#1e2c47}
body.dark .panel,body.dark .paycard,body.dark .pcard,body.dark .set-section,body.dark .profile-hero,body.dark .netcard,body.dark .phonebox,body.dark .amtbox,body.dark .preset,body.dark .signout,body.dark .modal,body.dark .sheet{background:#111a2e;color:var(--ink)}
body.dark .topbar,body.dark .bottomnav{background:#0e1626}
/* Dashboard tiles, stat sub-cards and the receipt card are hardcoded white;
   flip them to the dark surface so their light text stays visible. */
body.dark .subcard,body.dark .qa .item,body.dark .rcpt{background:#111a2e;border-color:#1e2c47}
body.dark .qa .ic,body.dark .rrow .ic{background:#16233f}
.subcard .mv{margin-top:6px;font-size:11px;color:var(--primary);font-weight:700;cursor:pointer;background:none;border:none;padding:0}
.modal-bg{position:fixed;inset:0;background:rgba(11,18,32,.55);display:flex;align-items:flex-end;justify-content:center;z-index:120}
.modal{background:#fff;border-radius:18px 18px 0 0;width:100%;max-width:900px;padding:22px 18px 28px}
.modal h3{margin:0 0 12px}
.modal .row{display:flex;gap:10px;margin-top:12px}
@media(min-width:600px){.modal-bg{align-items:center}.modal{border-radius:18px;max-width:420px}}
/* Always-centered variant (used by PIN + notice + message modals) */
.modal-bg.center{align-items:center}
.modal-bg.center .modal{border-radius:18px;max-width:440px}

/* PIN validation note */
.pin-msg{min-height:18px;font-size:13px;font-weight:700;text-align:center;margin:-6px 0 14px}
.pin-msg.err{color:#dc2626}
.pin-msg.warn{color:#d97706}
.pin-msg.ok{color:#16a34a}

/* Centered message modal (success / error / warning / info) */
.msg-bg{position:fixed;inset:0;background:rgba(11,18,32,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;animation:msgFade .15s ease}
@keyframes msgFade{from{opacity:0}to{opacity:1}}
.msg-card{position:relative;background:#fff;border-radius:20px;width:100%;max-width:400px;padding:28px 22px 22px;text-align:center;box-shadow:0 30px 60px -25px rgba(11,18,32,.5);animation:msgPop .18s ease}
@keyframes msgPop{from{transform:translateY(8px) scale(.97);opacity:.6}to{transform:none;opacity:1}}
body.dark .msg-card{background:#111a2e;color:var(--ink)}
.msg-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:none;background:#f1f4f9;color:#64748b;display:grid;place-items:center;cursor:pointer}
.msg-x:hover{background:#e6ebf3}
body.dark .msg-x{background:#1b2740;color:#8ea0bd}
.msg-x svg{width:18px;height:18px}
.msg-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:2px auto 14px}
.msg-ic svg{width:34px;height:34px}
.msg-card h3{margin:0 0 8px;font-size:20px}
.msg-card p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5;word-break:break-word}
.msg-ok{border:none;color:#fff;padding:13px 40px;border-radius:12px;font-weight:800;font-size:15px;cursor:pointer;min-width:140px}
.msg-card.success .msg-ic{background:#dcf5e6;color:#16a34a}
.msg-card.success .msg-ok{background:#16a34a}
.msg-card.error .msg-ic{background:#fee2e2;color:#dc2626}
.msg-card.error .msg-ok{background:#dc2626}
.msg-card.warning .msg-ic{background:#fef3c7;color:#d97706}
.msg-card.warning .msg-ok{background:#d97706}
.msg-card.info .msg-ic,.msg-card.notice .msg-ic{background:#e0ecff;color:var(--primary)}
.msg-card.info .msg-ok,.msg-card.notice .msg-ok{background:var(--primary)}
.msg-card p{white-space:pre-line}

/* Airtime to Cash */
.a2c-steps{display:flex;gap:8px;margin:4px 0 16px}
.a2c-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.a2c-step span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef2f9;color:var(--muted);font-weight:800}
.a2c-step.active span{background:var(--primary);color:#fff}
.a2c-step.done span{background:#dcf5e6;color:#16a34a}
.a2c-step.active{color:var(--ink)}
body.dark .a2c-step span{background:#1b2740}
.a2c-rate{background:#eef3ff;border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink);margin-top:10px}
body.dark .a2c-rate{background:#16233f}
.a2c-payout{font-size:13px;color:var(--ink);margin-top:10px;min-height:18px}
.a2c-resend{color:var(--primary);font-weight:700;font-size:13px;margin-top:10px;cursor:pointer}

/* Developer API page */
.devkey{display:flex;gap:8px;align-items:center;margin-top:6px}
.devkey input{flex:1;min-width:0}
.devcode{background:#0f172a;color:#e2e8f0;padding:12px 14px;border-radius:10px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre;margin:8px 0 0}
body.dark .devcode{background:#0b1220}
.devtbl-wrap{overflow-x:auto;margin-top:8px;-webkit-overflow-scrolling:touch}
.devtbl{width:100%;border-collapse:collapse;font-size:13px}
.devtbl th,.devtbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.devtbl th{color:var(--muted);font-weight:600;font-size:12px}
.devtbl td:first-child{font-weight:700;color:var(--primary)}

/* Fund wallet (redesigned) */
.fund-head h2{margin:0 0 4px;font-size:24px}
.fund-head .sub{margin:0 0 16px;color:var(--muted);font-size:14px}
.fund-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:0 12px 30px -22px rgba(11,18,32,.35)}
body.dark .fund-card{background:#111a2e;border-color:#1e2b47}
.fund-card .fc-top{display:flex;gap:14px}
.fc-ic{width:46px;height:46px;flex:0 0 46px;border-radius:13px;background:var(--primary);color:#fff;display:grid;place-items:center}
.fc-ic.purple{background:#7c3aed}
.fc-body{flex:1;min-width:0}
.fc-title{font-size:16px;font-weight:800}
.fc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fc-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;margin:8px 0}
.fc-badge svg{width:14px;height:14px}
.fc-badge.green{background:#dcf5e6;color:#16a34a}
.fc-badge.sm{margin:0}
.fc-desc{color:var(--muted);font-size:13.5px;margin:8px 0 14px;line-height:1.5}
.fc-note{color:var(--muted);font-size:13px;margin:12px 0 0;line-height:1.5}
.fc-fee{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);font-size:13px;color:var(--muted)}
.fc-fee b{color:var(--ink)}
.fc-lbl{display:block;font-size:13px;font-weight:700;margin:10px 0 6px}
.fc-sel{width:100%;padding:13px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:15px;margin-bottom:14px}
body.dark .fc-sel{background:#0e1729;color:var(--ink)}
.fc-recv{font-size:13px;margin:2px 0 8px;min-height:16px;color:var(--primary);font-weight:600}
.fund-card .btn.primary{width:auto;display:inline-flex;align-items:center;gap:8px}
.fund-card .btn.block{width:100%;justify-content:center}
.va-list{margin:12px 0 0;display:flex;flex-direction:column;gap:10px}
.va-acct{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f3f7ff;border-radius:12px;padding:12px 14px}
body.dark .va-acct{background:#16233f}
.va-bank{font-weight:700;font-size:14px}
.va-name{font-size:12.5px;color:var(--muted)}
.va-num{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:.5px;color:var(--primary);background:none;border:none;cursor:pointer}
.va-num svg{width:16px;height:16px;opacity:.7}

/* KYC verify modal */
.msg-card.kyc{max-width:440px;text-align:left}
.msg-card.kyc h3{text-align:left}
.kyc-sub{margin:0 0 14px !important;color:var(--muted);font-size:13px;line-height:1.5}
.kyc-form label{display:block;font-size:12.5px;font-weight:700;margin:10px 0 5px}
.kyc-form input,.kyc-form select{width:100%;padding:11px;border:1px solid var(--border);border-radius:10px;font-size:14px;background:#fff}
body.dark .kyc-form input,body.dark .kyc-form select{background:#0e1729;color:var(--ink)}
.kyc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:13px;padding:5px;margin-bottom:12px}
.kyc-tabs button{border:0;background:transparent;color:var(--muted);font-weight:800;font-size:13px;border-radius:10px;padding:10px;cursor:pointer}
.kyc-tabs button.active{background:#fff;color:var(--primary);box-shadow:0 8px 18px -14px rgba(11,18,32,.45)}
body.dark .kyc-tabs button.active{background:#111a2e}
.kyc-two{display:flex;gap:10px}
.kyc-two>div{flex:1;min-width:0}
.kyc-err{color:#dc2626;font-size:12.5px;margin-top:10px;min-height:16px;text-align:left}
.msg-card.kyc .msg-ok{margin-top:16px;background:var(--primary)}

/* Centered form modal (security actions: change/reset PIN, change password) */
.msg-card.form{max-width:420px;text-align:left}
.msg-card.form h3{text-align:left}
.fm-body label{display:block;font-size:12.5px;font-weight:700;margin:12px 0 5px}
.fm-body input{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;font-size:15px;background:#fff}
.fm-body input:focus{outline:none;border-color:var(--primary)}
body.dark .fm-body input{background:#0e1729;color:var(--ink)}
.fm-note{margin:0 0 6px;font-size:13px;color:var(--muted);line-height:1.5}
.fm-err{color:#dc2626;font-size:12.5px;margin-top:10px;min-height:16px;text-align:left}
.msg-card.form .msg-ok{margin-top:16px;background:var(--primary)}

/* Bulk SMS */
.step{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin:6px 0 10px}
.stepn{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:13px}
.charc{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);background:#eef2f9;border-radius:999px;padding:3px 10px}
body.dark .charc{background:#16233f}
.seg{display:flex;gap:10px;margin-bottom:12px}
.seg-b{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1.5px solid var(--border);border-radius:12px;background:#fff;font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer}
.seg-b svg{width:16px;height:16px}
.seg-b.active{border-color:var(--primary);color:var(--primary);background:#eef4ff}
body.dark .seg-b{background:#0e1729}
.smsarea{width:100%;min-height:110px;border:1px solid var(--border);border-radius:12px;padding:13px;font-size:15px;font-family:inherit;resize:vertical;background:#fff}
.smsarea:focus{outline:none;border-color:var(--primary)}
body.dark .smsarea{background:#0e1729;color:var(--ink)}
.sms-sum{display:flex;align-items:center;gap:10px;background:#f3f7ff;border-radius:14px;padding:16px;margin-top:16px}
body.dark .sms-sum{background:#16233f}
.sms-sum .k{font-size:13px;color:var(--muted)}
.sms-sum .v{font-size:20px;font-weight:800;color:var(--primary);margin-top:2px}
.sms-div{width:1px;align-self:stretch;background:var(--border);margin:0 6px}