:root{
  --ink:#10211A; --muted:#5B6B63; --line:#E4EAE6; --bg:#F5F7F6; --surface:#FFFFFF;
  --primary:#0C8A5B; --primary-d:#086B47; --primary-soft:#E4F3EC; --accent:#FFB020;
  --danger:#C0392B; --brand:var(--primary);
  --radius:15px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;margin:0;letter-spacing:-.3px;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{max-width:100%;}
.muted{color:var(--muted);}
.center{text-align:center;}
.small{font-size:12px;}

/* App shell: mobile-first, centred like a phone on wider screens */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative;}
.app-body{flex:1;padding:18px 20px 90px;}

.appbar{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px;max-width:480px;margin:0 auto;width:100%;}
.brand{display:flex;align-items:center;gap:9px;font-family:Sora;font-weight:800;font-size:19px;}
.brand .logo{width:30px;height:30px;border-radius:9px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border-radius:var(--radius);font-weight:700;font-size:15px;transition:filter .15s;}
.btn:hover{filter:brightness(.97);}
.btn-primary{background:var(--brand);color:#fff;}
.btn-accent{background:var(--accent);color:#3d2a00;}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink);}
.btn-soft{background:var(--primary-soft);color:var(--primary-d);}
.btn-block{display:flex;width:100%;}
.btn-sm{height:40px;font-size:13px;padding:0 14px;border-radius:11px;}

/* Cards & layout bits */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;}
.card + .card{margin-top:14px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.stack{display:flex;flex-direction:column;gap:14px;}
.row{display:flex;align-items:center;gap:12px;}
.spread{display:flex;align-items:center;justify-content:space-between;}
hr.sep{border:none;border-top:1px solid var(--line);margin:12px 0;}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary-d);}
.pill-accent{background:#FFF2DC;color:#B9791A;}
.pill-muted{background:var(--bg);color:var(--muted);}

.h1{font-size:28px;line-height:1.1;}
.h2{font-size:22px;}
.lead{font-size:15px;color:var(--muted);}

/* Forms */
.label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 6px;}
.input{width:100%;height:50px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 14px;font-size:15px;color:var(--ink);outline:none;}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.field + .field{margin-top:14px;}
.help{font-size:12px;color:var(--muted);margin-top:6px;}

/* Flash */
.flash{padding:12px 14px;border-radius:12px;font-size:13px;font-weight:600;margin-bottom:14px;}
.flash-ok{background:var(--primary-soft);color:var(--primary-d);}
.flash-error{background:#FDE8E8;color:var(--danger);}

/* Wallet hero */
.wallet{background:var(--brand);color:#fff;border-radius:20px;padding:18px;box-shadow:0 12px 26px rgba(12,138,91,.22);}
.wallet .bal{font-family:Sora;font-weight:800;font-size:34px;margin-top:2px;}
.wallet .sub{font-size:13px;opacity:.85;}

/* Stat tiles */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;}
.stat .label{margin:0;}
.stat .value{font-family:Sora;font-weight:800;font-size:22px;margin-top:3px;}

/* Lists */
.list{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 16px;}
.list .item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);}
.list .item:first-child{border-top:none;}
.net-ic{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;}
.ic-mtn{background:#FFF2DC;color:#B9791A;} .ic-glo{background:#E8F0E6;color:#3B7A2E;}
.ic-airtel{background:#FDE8E8;color:#C0392B;} .ic-9mobile{background:#E6F0EE;color:#0C6B57;}

/* Tabbar */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;height:72px;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:20;}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--muted);}
.tab.active{color:var(--primary-d);}
.tab svg{width:22px;height:22px;}

/* Network chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{padding:9px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);}
.chip.active{background:var(--brand);color:#fff;border-color:transparent;}

/* Bundle grid (storefront) */
.bundle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.bundle{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px;display:flex;flex-direction:column;gap:2px;position:relative;}
.bundle .size{font-family:Sora;font-weight:800;font-size:20px;}
.bundle .price{margin-top:8px;font-size:15px;font-weight:800;color:var(--primary-d);}

/* Landing page */
.landing{max-width:760px;margin:0 auto;padding:22px 22px 60px;}
.nav{display:flex;align-items:center;justify-content:space-between;}
.hero{margin-top:36px;}
.hero h1{font-size:40px;line-height:1.05;}
.section{margin-top:40px;}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;}
.feature h3{font-size:16px;margin-bottom:6px;}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin-top:10px;}
.tick .b{flex:none;width:22px;height:22px;border-radius:7px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;}

/* Store page templates */
.store-top{background:var(--surface);border-bottom:1px solid var(--line);padding:18px 20px 16px;}
.store-logo{width:46px;height:46px;border-radius:14px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Sora;font-weight:800;font-size:18px;}
.tpl-bold .app{background:#0E1726;color:#EAF0F7;}
.tpl-bold .store-top,.tpl-bold .card,.tpl-bold .bundle,.tpl-bold .list{background:#182236;border-color:#273349;color:#EAF0F7;}
.tpl-bold .chip{background:#182236;border-color:#273349;color:#9fb0c7;}
.tpl-bold .muted,.tpl-bold .help,.tpl-bold .label{color:#9fb0c7;}
.tpl-bold .bundle .price{color:var(--accent);}
.tpl-sunrise .app{background:#FFF8EE;}
.tpl-sunrise .store-top{background:#FFF2DC;}
.tpl-minimal .bundle{border-radius:10px;box-shadow:none;}
.tpl-minimal .store-logo{border-radius:10px;}

.footer-note{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:11px;font-weight:600;padding:18px;}

/* Admin */
.admin{max-width:1000px;margin:0 auto;padding:24px 22px 60px;}
.admin .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0;}
.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.table th,.table td{text-align:left;padding:11px 14px;font-size:13px;border-top:1px solid var(--line);}
.table th{background:var(--bg);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-top:none;}
.tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;}
.tag-live{background:var(--primary-soft);color:var(--primary-d);} .tag-pending{background:#FFF2DC;color:#B9791A;}

@media(max-width:520px){ .hero h1{font-size:32px;} }