:root{--navy:#121212;--navy-light:#242424;--lime:#b4e61a;--green:#4c9a2a;--white:#fff;--lgray:#1e1e1e;--mgray:#333;--silver:#a6acb8;--text-dark:#f5f6f8;--text-muted:#9aa0ac;--danger:#ff6b6b;--gradient-accent:linear-gradient(135deg, var(--lime) 0%, var(--green) 100%);--radius:16px;--radius-sm:10px;--shadow-card:0 2px 14px #00000073}*{box-sizing:border-box}a{color:var(--lime)}html,body,#root{background:var(--lgray);height:100%;color:var(--text-dark);margin:0;font-family:Segoe UI,Inter,system-ui,-apple-system,sans-serif}.app-shell{background:var(--navy);max-width:430px;min-height:100vh;box-shadow:var(--shadow-card);flex-direction:column;margin:0 auto;display:flex;position:relative}.topbar{background:var(--navy);color:var(--white);align-items:center;gap:12px;padding:18px 20px;display:flex}.topbar-title{text-align:center;flex:1;margin-right:28px;font-size:17px;font-weight:600}.topbar-back{color:var(--white);cursor:pointer;background:0 0;border:none;padding:4px;font-size:20px}.screen-body{flex:1;padding:24px 20px 90px}.brand-hero{background:var(--navy);color:var(--white);text-align:center;padding:56px 24px 40px}.brand-hero img{width:96px;margin-bottom:14px}.brand-hero h1{margin:6px 0 2px;font-size:22px}.brand-hero p{color:var(--silver);margin:0;font-size:13px}.btn{cursor:pointer;border:none;border-radius:12px;width:100%;padding:15px;font-size:15px;font-weight:600;transition:opacity .15s}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):active{opacity:.85}.btn-primary{background:var(--navy-light);color:var(--white)}.btn-accent{background:var(--gradient-accent);color:var(--navy)}.btn-ghost{background:var(--lgray);color:var(--text-dark)}.card{background:var(--lgray);border:1px solid var(--mgray);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:18px}.card-row{border-bottom:1px solid var(--mgray);justify-content:space-between;align-items:center;padding:12px 0;font-size:14px;display:flex}.card-row:last-child{border-bottom:none}.card-row .label{color:var(--text-muted)}.card-row .value{font-weight:600}.balance-card{background:var(--lgray);color:var(--white);border-radius:var(--radius);margin-bottom:20px;padding:22px}.balance-card .eyebrow{color:var(--silver);letter-spacing:.04em;text-transform:uppercase;font-size:12px}.balance-card .amount{margin:6px 0 2px;font-size:30px;font-weight:700}.balance-card .sub{color:var(--silver);font-size:12px}.profile-header{text-align:center;padding:8px 0 20px}.avatar-circle{background:var(--gradient-accent);width:72px;height:72px;color:var(--navy);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 12px;font-size:24px;font-weight:700;display:flex;position:relative}.avatar-verified-badge{background:var(--green);border:2px solid var(--navy);width:22px;height:22px;color:var(--white);border-radius:50%;justify-content:center;align-items:center;font-size:11px;display:flex;position:absolute;bottom:-2px;right:-2px}.profile-header .business-name{color:var(--text-dark);font-size:18px;font-weight:700}.stats-row{margin:16px 0 20px;display:flex}.stats-row .stat-item{text-align:center;flex:1;padding:0 4px}.stats-row .stat-item+.stat-item{border-left:1px solid var(--mgray)}.stats-row .stat-value{color:var(--text-dark);font-size:20px;font-weight:700}.stats-row .stat-label{color:var(--text-muted);margin-top:2px;font-size:11px}.wallet-pill{background:var(--lgray);border-radius:999px;align-items:center;gap:14px;margin-bottom:20px;padding:10px 10px 10px 14px;display:flex}.wallet-pill .wallet-icon{background:var(--navy-light);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.wallet-pill .wallet-info{flex:1;min-width:0}.wallet-pill .wallet-amount{color:var(--text-dark);font-size:18px;font-weight:700}.wallet-pill .wallet-label{color:var(--text-muted);font-size:11px}.wallet-pill .wallet-cta{background:var(--gradient-accent);color:var(--navy);cursor:pointer;border:none;border-radius:999px;flex-shrink:0;padding:10px 16px;font-size:13px;font-weight:700}.demo-banner{color:#7a5b00;text-align:center;background:#fff7e0;border-bottom:1px solid #f0e0a0;padding:8px 14px;font-size:11.5px}.grid-actions{grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 8px;display:grid}.action-tile{background:var(--lgray);border-radius:var(--radius-sm);text-align:center;cursor:pointer;border:none;padding:14px 6px}.action-tile .icon-circle{background:var(--white);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin:0 auto 8px;font-size:18px;display:flex}.action-tile .tile-label{color:var(--text-dark);font-size:11px;font-weight:500}.section-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:24px 0 10px;font-size:13px;font-weight:700}.input-group{margin-bottom:16px}.input-group label{color:var(--text-muted);margin-bottom:6px;font-size:12px;font-weight:600;display:block}.input-group input,.input-group select{border:1.5px solid var(--mgray);background:var(--lgray);width:100%;color:var(--text-dark);border-radius:12px;padding:14px;font-size:15px}.input-group input:focus,.input-group select:focus{border-color:var(--green);outline:none}.amount-input{text-align:center;border:none;border-bottom:2px solid var(--mgray);border-radius:0;padding:10px;font-size:28px;font-weight:700}.provider-list{margin:0;padding:0;list-style:none}.provider-item{border-bottom:1px solid var(--mgray);cursor:pointer;align-items:center;gap:14px;padding:16px 4px;display:flex}.provider-item .badge{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:11px;font-weight:700;display:flex}.provider-item .name{flex:1;font-size:14.5px;font-weight:600}.otp-boxes{justify-content:center;gap:10px;margin:28px 0 18px;display:flex}.otp-box{border:1.5px solid var(--mgray);text-align:center;background:var(--lgray);width:min(52px,20% - 8px);height:60px;color:var(--text-dark);border-radius:12px;font-size:22px;font-weight:700}.otp-box:focus{border-color:var(--green);border-width:2px;outline:none}.resend-pill{background:var(--lgray);color:var(--text-muted);border:none;border-radius:20px;margin:0 auto;padding:10px 18px;font-size:13px;font-weight:600;display:block}.center-text{text-align:center}.muted{color:var(--text-muted);font-size:13px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.success-check{background:var(--gradient-accent);width:84px;height:84px;color:var(--navy);border-radius:50%;justify-content:center;align-items:center;margin:40px auto 20px;font-size:40px;display:flex}.badge-tag{background:var(--mgray);color:var(--text-muted);letter-spacing:.03em;border-radius:20px;padding:3px 9px;font-size:10px;font-weight:700;display:inline-block}
