@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}button,input{font-family:inherit}:root{--bg:#fff;--surface:#f6f3f1;--surface-muted:#ebe6e4;--border:#e0dbd8;--track:#f1edeb;--text-primary:#1c1816;--text-secondary:#5c5754;--text-muted:#8a8582;--indigo:#d37153;--indigo-light:#faeeea;--indigo-dark:#b85a3c;--green:#067034;--green-light:#e8f5ee;--red:#b50027;--red-light:#fceef1;--amber:#d97706;--amber-light:#fef3c7;--shadow-card:none;--shadow-elevated:none;--nav-height:auto}body{background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Nunito,sans-serif}#root{background:var(--bg);flex-direction:column;max-width:390px;min-height:100vh;margin:0 auto;display:flex;position:relative;overflow-x:hidden}.page-scroll{scrollbar-width:none;-ms-overflow-style:none;flex:1;overflow:hidden auto}.page-scroll::-webkit-scrollbar{display:none}.page-scroll-locked{overflow:hidden}.page-content{padding-top:8px;padding-bottom:130px}.nav-glass{z-index:90;pointer-events:none;-webkit-backdrop-filter:blur(18px)saturate(1.15);background:linear-gradient(#fff0 0%,#ffffff8c 52%,#ffffffe6 100%);height:100px;position:absolute;bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(#0000,#000 44%);mask-image:linear-gradient(#0000,#000 44%)}.bottom-nav{z-index:100;pointer-events:none;background:0 0;justify-content:center;align-items:flex-start;gap:20px;width:100%;padding:0 20px;display:flex;position:absolute;bottom:28px;left:0}.tap-zoom{-webkit-tap-highlight-color:transparent;transition:transform .15s}.tap-zoom:active{transform:scale(1.08)}.press-in{-webkit-tap-highlight-color:transparent;transition:transform .15s,background .15s}.press-in:active{transform:scale(.96)}.amount-check{background:#ffffff38;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;animation:.18s check-in;display:flex;position:absolute;top:8px;right:8px}@keyframes check-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.topup-error{opacity:0;pointer-events:none;grid-template-rows:0fr;margin-top:-12px;transition:grid-template-rows .34s cubic-bezier(.32,.72,0,1),margin-top .34s cubic-bezier(.32,.72,0,1),opacity .28s;display:grid}.topup-error.is-open{opacity:1;pointer-events:auto;grid-template-rows:1fr;margin-top:0}.topup-error-inner{min-height:0;overflow:hidden}.topup-error-card{color:#b50027;background:#fceef1;border-radius:16px;padding:12px 16px;font-size:13px;font-weight:400;transition:transform .34s cubic-bezier(.32,.72,0,1);transform:translateY(-8px)}.topup-error.is-open .topup-error-card{transform:translateY(0)}.nav-item{pointer-events:auto;cursor:pointer;background:0 0;border:none;outline:none;flex-direction:column;align-items:center;gap:6px;min-width:52px;padding:0;display:flex}.nav-circle{border:none;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;transition:background .15s;display:flex}.nav-circle.active{background:#111}.nav-circle:not(.active){border:1px solid var(--border);background:#fff}.nav-label{letter-spacing:.02em;color:var(--text-muted);font-family:Nunito,sans-serif;font-size:11px;font-weight:500}.nav-label.active{color:#111;font-weight:700}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.12)}}.status-chip-low-dot,.pulse-dot{animation:1.2s ease-in-out infinite pulse-dot}@keyframes bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.load-bar{transform-origin:0;animation:.9s cubic-bezier(.32,.72,0,1) both bar-fill}@keyframes bar-fill-up{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.load-bar-up{transform-origin:bottom;animation:.8s cubic-bezier(.32,.72,0,1) both bar-fill-up}.usage-tabs{background:var(--surface-muted);border-radius:100px;margin:8px 16px 0;padding:3px;display:flex;position:relative}.usage-tab-thumb{pointer-events:none;background:#fff;border-radius:100px;width:calc(50% - 3px);height:calc(100% - 6px);transition:transform .34s cubic-bezier(.32,.72,0,1);position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0000000f}.usage-tab-thumb.is-payments{transform:translate(100%)}.usage-tab{z-index:1;cursor:pointer;text-align:center;text-transform:capitalize;color:#8a8493;background:0 0;border:none;flex:1;padding:10px 0;font-family:Nunito,sans-serif;font-size:14px;font-weight:500;transition:color .22s,font-weight .22s;position:relative}.usage-tab.is-active{color:#1c1820;font-weight:600}.filter-pills{gap:8px;display:flex;position:relative}.filter-pills-thumb{background:var(--indigo);pointer-events:none;border-radius:100px;height:32px;transition:transform .34s cubic-bezier(.32,.72,0,1),width .34s cubic-bezier(.32,.72,0,1);position:absolute;top:0;left:0}@keyframes success-pop{0%{opacity:0;transform:scale(.72)}12%{opacity:1;transform:scale(1)}24%{transform:scale(1.12)}36%{transform:scale(1)}48%{transform:scale(1.12)}60%{transform:scale(1)}72%{transform:scale(1.12)}84%{transform:scale(1)}to{opacity:1;transform:scale(1)}}@keyframes success-check-draw{to{stroke-dashoffset:0}}.success-circle{animation:1.25s ease-in-out both success-pop}.success-check{stroke-dasharray:28;stroke-dashoffset:28px;animation:.55s ease-out .42s forwards success-check-draw}.success-line-check{stroke-dasharray:28;stroke-dashoffset:28px;animation:.38s ease-out forwards success-check-draw}.success-line-connector{opacity:.35;transform-origin:top;background:#067034;flex:1;width:2px;min-height:14px;margin-bottom:8px;animation:.28s ease-out forwards success-connector-grow;transform:scaleY(0)}@keyframes success-connector-grow{to{transform:scaleY(1)}}.success-line-sun{flex-shrink:0;overflow:visible}.success-line-sun-core{transform-box:fill-box;transform-origin:50%;animation:.32s ease-out forwards success-dot-in;transform:scale(0)}.success-line-sun-rays{transform-box:fill-box;transform-origin:50%;opacity:0;animation:.4s ease-out forwards success-sun-rays}@keyframes success-sun-rays{0%{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}@keyframes success-dot-in{to{transform:scale(1)}}@keyframes success-label-green{to{color:#067034}}.success-line-final{color:#5a5563;animation:.4s ease-out 2.4s forwards success-label-green}.sheet-root{z-index:200;flex-direction:column;justify-content:flex-end;display:flex;position:absolute;inset:0}.sheet-backdrop{cursor:pointer;background:#1c182066;border:none;padding:0;animation:.2s fade-in;position:absolute;inset:0}.sheet-backdrop.is-closing{pointer-events:none;animation:.38s forwards fade-out}.sheet{scrollbar-width:none;-ms-overflow-style:none;background:#fff;border-radius:24px 24px 0 0;max-height:92%;animation:.58s cubic-bezier(.16,1,.3,1) sheet-up;position:relative;overflow-y:auto}.sheet.is-closing{pointer-events:none;animation:.38s cubic-bezier(.32,.72,0,1) forwards sheet-down}.sheet::-webkit-scrollbar{display:none}.sheet-handle{background:var(--border);border-radius:100px;width:36px;height:4px;margin:10px auto 4px}.sheet-body{padding:8px 24px 72px}.topup-steps{justify-content:center;gap:8px;display:flex}.topup-step{background:var(--surface-muted);border-radius:2px;width:24px;height:4px;position:relative;overflow:hidden}.topup-step:after{content:"";background:var(--indigo);border-radius:inherit;transform-origin:0;transition:transform .34s cubic-bezier(.32,.72,0,1);position:absolute;inset:0;transform:scaleX(0)}.topup-step.is-on:after{transform:scaleX(1)}.step-viewport{overflow:hidden}.step-pane.is-forward{animation:.38s cubic-bezier(.32,.72,0,1) step-in-forward}.step-pane.is-back{animation:.38s cubic-bezier(.32,.72,0,1) step-in-back}@keyframes step-in-forward{0%{opacity:.2;transform:translate(32%)}to{opacity:1;transform:translate(0)}}@keyframes step-in-back{0%{opacity:.2;transform:translate(-32%)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion:reduce){.step-pane.is-forward,.step-pane.is-back,.success-circle,.success-check,.success-line-check,.success-line-connector,.success-line-sun-core,.success-line-sun-rays{animation:none}.success-line-sun-core{transform:scale(1)}.success-line-sun-rays{opacity:1;transform:scale(1)}.success-check,.success-line-check{stroke-dashoffset:0}.success-line-connector{transform:scaleY(1)}.success-line-final{color:#067034;animation:none}.topup-error,.topup-error-card,.topup-step:after{transition:none}.topup-error-card{transform:none}}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@media (width>=481px){html,body{height:100vh;overflow:hidden}body{background:#0d0d0d;justify-content:center;align-items:center;min-height:100vh;padding:24px 0;display:flex}.iphone-frame{background:#1c1c1e;border-radius:54px;width:410px;height:864px;padding:10px;position:relative;box-shadow:inset 0 0 0 1px #ffffff14,0 0 0 2px #3a3a3c,0 40px 100px #000c,0 10px 40px #00000080}.iphone-frame:before{content:"";background:#3a3a3c;border-radius:2px 0 0 2px;width:3px;height:28px;position:absolute;top:120px;left:-3px;box-shadow:0 44px #3a3a3c,0 84px #3a3a3c}.iphone-frame:after{content:"";background:#3a3a3c;border-radius:0 2px 2px 0;width:3px;height:72px;position:absolute;top:180px;right:-3px}#root{width:390px;max-width:390px;height:844px;min-height:unset;background:var(--bg);border-radius:44px;position:relative;overflow:hidden}.page-content{padding-top:12px;padding-bottom:130px}#root:before{content:"";z-index:1000;pointer-events:none;background:#000;border-radius:16px;width:100px;height:28px;display:block;position:absolute;top:12px;left:50%;transform:translate(-50%)}#root:after{content:"";z-index:1000;pointer-events:none;background:#0003;border-radius:100px;width:134px;height:5px;display:block;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}}@media (width<=480px){body{background:var(--bg);padding:0}#root{width:100%;max-width:100%;height:100%;min-height:100vh;box-shadow:none;scrollbar-width:none;-ms-overflow-style:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);border-radius:0;overflow:hidden auto}#root::-webkit-scrollbar{display:none}.nav-glass{position:fixed}.bottom-nav{z-index:100;width:100%;padding-bottom:env(safe-area-inset-bottom,0px);position:fixed;bottom:24px;left:0}}