:root{--ink:#0b2f6f;--panel:#0d4da6;--panel2:#155ebd;--lime:#ef3b4f;--purple:#4f8ef7;--blue:#2f80ed;--blue-soft:#76b8ff;--muted:#b9c9e3;--line:rgba(255,255,255,.16);--danger:#ff5f6d;--success:#42d79a}
*{box-sizing:border-box}html{background:#dceaff}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 8% 0%,rgba(239,59,79,.22),transparent 25%),radial-gradient(circle at 92% 10%,rgba(47,128,237,.30),transparent 30%),linear-gradient(160deg,#eaf3ff,#cfe2ff);color:#f8fbff;min-height:100vh;margin:0}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{width:min(100%,430px);min-height:100vh;margin:0 auto;background:linear-gradient(180deg,#0c4ba2 0%,#0b4596 48%,#123b78 100%);position:relative;overflow-x:hidden;box-shadow:0 26px 80px rgba(24,67,135,.28)}
.app-shell:before{content:"";position:absolute;inset:0 0 auto 0;height:230px;pointer-events:none;background:radial-gradient(circle at 82% 12%,rgba(239,59,79,.22),transparent 34%),radial-gradient(circle at 20% 5%,rgba(118,184,255,.18),transparent 32%)}
.app-screen{display:none;min-height:100vh;padding:22px 18px 102px;position:relative;z-index:1}.app-screen.active{display:block;animation:fadeUp .28s ease}.auth-screen{padding-bottom:28px}.glass{background:linear-gradient(180deg,rgba(255,255,255,.145),rgba(255,255,255,.075));border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 45px rgba(14,55,122,.18)}
.card{border-radius:24px}.pill{border-radius:999px}.muted{color:var(--muted)}.lime{color:var(--lime)}.gradient-text{background:linear-gradient(90deg,#ffffff 0%,#ffb5bd 38%,#ef3b4f 58%,#8bc4ff 100%);-webkit-background-clip:text;color:transparent}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#c6d9f5;font-weight:800}
.btn-primary{width:100%;border:0;border-radius:18px;background:linear-gradient(135deg,#ef3b4f,#ff6575);color:#fff;font-weight:900;padding:15px 18px;box-shadow:0 14px 30px rgba(239,59,79,.24);transition:.2s}.btn-primary:hover{filter:brightness(1.04)}.btn-primary:active{transform:scale(.985)}.btn-secondary{width:100%;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.10);color:#fff;font-weight:800;padding:14px 16px}.icon-btn{width:42px;height:42px;border-radius:15px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.11);display:grid;place-items:center;color:#fff}.field{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(7,51,118,.58);color:#fff;border-radius:18px;padding:15px 16px;outline:0}.field:focus{border-color:rgba(239,59,79,.82);box-shadow:0 0 0 4px rgba(239,59,79,.13)}.field::placeholder{color:#9db7db}.label{display:block;font-size:12px;font-weight:800;color:#d6e3f6;margin:0 0 8px}.input-wrap{position:relative}.input-wrap .field{padding-left:48px}.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#b4cae7}.otp-box{width:50px;height:58px;text-align:center;border:1px solid rgba(255,255,255,.18);background:rgba(7,51,118,.58);color:#fff;border-radius:17px;font-size:22px;font-weight:900;outline:none}.otp-box:focus{border-color:var(--lime);box-shadow:0 0 0 4px rgba(239,59,79,.13)}
.brand-orb{width:88px;height:88px;border-radius:27px;background:linear-gradient(145deg,rgba(239,59,79,.22),rgba(47,128,237,.28));border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;margin-bottom:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px rgba(10,54,128,.16)}.brand-orb img{width:58px}.auth-hero{min-height:33vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:42px}.auth-copy{font-size:35px;line-height:1.02;font-weight:950;letter-spacing:-.045em;margin:10px 0 12px}.auth-form{margin-top:28px;padding:20px}
.home-hero{padding:19px;background:linear-gradient(145deg,rgba(47,128,237,.36),rgba(239,59,79,.22));overflow:hidden;position:relative}.home-hero:before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;left:-100px;bottom:-130px;background:radial-gradient(circle,rgba(115,182,255,.32),transparent 68%)}.home-hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-75px;background:radial-gradient(circle,rgba(239,59,79,.30),transparent 68%)}.home-hero>*{position:relative;z-index:1}.balance{font-size:34px;font-weight:950;letter-spacing:-.04em}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.quick-action{text-align:center}.quick-icon{width:56px;height:56px;border-radius:18px;margin:0 auto 8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17);display:grid;place-items:center;font-size:23px}.quick-action:first-child .quick-icon{background:rgba(239,59,79,.18);border-color:rgba(255,160,172,.26)}.quick-action span{font-size:11px;color:#dce8f8;font-weight:700}.section-title{font-size:17px;font-weight:900;letter-spacing:-.02em}.service-card{padding:16px;display:flex;gap:13px;align-items:center}.service-icon{width:48px;height:48px;border-radius:16px;background:rgba(239,59,79,.16);display:grid;place-items:center;color:#ff8390;font-size:22px}.service-card small{color:var(--muted)}
.bottom-nav{position:fixed;z-index:30;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,430px);height:82px;padding:10px 15px 18px;background:rgba(11,63,139,.94);backdrop-filter:blur(22px);border-top:1px solid rgba(255,255,255,.15);display:none;grid-template-columns:repeat(5,1fr);box-shadow:0 -12px 36px rgba(13,62,132,.18)}.bottom-nav.visible{display:grid}.nav-item{border:0;background:none;color:#9bbbe4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:800}.nav-item.active{color:#ff7785}.nav-dot{width:4px;height:4px;border-radius:50%;background:transparent}.nav-item.active .nav-dot{background:#ef3b4f}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:18px 0 22px}.step{height:4px;border-radius:999px;background:rgba(255,255,255,.16)}.step.done,.step.active{background:linear-gradient(90deg,#ef3b4f,#ff7785)}.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.provider{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:18px;padding:13px 8px;text-align:center;color:#fff}.provider.active{border-color:rgba(255,119,133,.72);background:rgba(239,59,79,.15);box-shadow:0 8px 20px rgba(239,59,79,.08)}.provider-logo{width:44px;height:44px;border-radius:15px;background:#fff;color:#0b3f8d;margin:0 auto 9px;display:grid;place-items:center;font-weight:950;font-size:10px}.provider small{font-size:10px;font-weight:800;color:#d0def1}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.amount-chip{border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.08);border-radius:15px;color:#fff;font-size:13px;font-weight:850;padding:12px 6px}.amount-chip.active{background:linear-gradient(135deg,#ef3b4f,#ff6676);color:#fff;border-color:#ff7886;box-shadow:0 8px 18px rgba(239,59,79,.18)}.payment-option{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.08)}.payment-option.active{border-color:rgba(255,119,133,.72);background:rgba(239,59,79,.13)}.radio{width:20px;height:20px;border-radius:50%;border:2px solid #9ab7dc;display:grid;place-items:center}.payment-option.active .radio{border-color:#ff7785}.payment-option.active .radio:after{content:"";width:10px;height:10px;border-radius:50%;background:#ef3b4f}
.receipt{padding:20px;text-align:center}.token-box{background:rgba(5,57,132,.58);border:1px dashed rgba(255,124,139,.68);border-radius:20px;padding:18px;margin:15px 0}.token-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:24px;line-height:1.35;letter-spacing:.08em;font-weight:950;color:#fff;word-break:break-word}.success-ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:rgba(66,215,154,.16);border:1px solid rgba(87,236,173,.42);font-size:33px;color:#67edb0}.list-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.11)}.list-row:last-child{border-bottom:0}.avatar{width:44px;height:44px;border-radius:15px;background:linear-gradient(145deg,rgba(239,59,79,.26),rgba(72,143,246,.38));display:grid;place-items:center;font-weight:950}.status{padding:5px 9px;border-radius:999px;font-size:9px;font-weight:900}.status.success{background:rgba(66,215,154,.14);color:#7af0bc}.status.pending{background:rgba(255,195,76,.16);color:#ffd26f}.status.failed{background:rgba(255,95,109,.16);color:#ff9aa4}
.chat-fab{position:fixed;z-index:40;right:max(18px,calc((100vw - 430px)/2 + 18px));bottom:96px;width:58px;height:58px;border-radius:20px;border:1px solid rgba(255,255,255,.26);background:linear-gradient(135deg,#ef3b4f,#ff6676);color:#fff;box-shadow:0 16px 34px rgba(239,59,79,.25);font-size:23px}.chat-panel{position:fixed;z-index:60;left:50%;bottom:0;transform:translate(-50%,110%);width:min(100%,430px);height:min(78vh,720px);background:linear-gradient(180deg,#0d4da6,#0a3c83);border-radius:28px 28px 0 0;border:1px solid rgba(255,255,255,.16);box-shadow:0 -30px 70px rgba(21,73,151,.32);transition:.3s ease;display:flex;flex-direction:column}.chat-panel.open{transform:translate(-50%,0)}.chat-head{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.13);display:flex;align-items:center;gap:12px}.chat-body{flex:1;overflow:auto;padding:16px}.bubble{max-width:82%;padding:12px 14px;border-radius:18px;margin:8px 0;font-size:13px;line-height:1.5}.bubble.bot{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.15);border-bottom-left-radius:6px}.bubble.me{margin-left:auto;background:linear-gradient(135deg,#ef3b4f,#ff6575);color:#fff;border-bottom-right-radius:6px;font-weight:700}.chat-chips{display:flex;flex-wrap:wrap;gap:8px}.chat-chip{border:1px solid rgba(255,137,151,.38);background:rgba(239,59,79,.12);color:#ffdce0;border-radius:999px;padding:9px 11px;font-size:11px;font-weight:800}.chat-compose{padding:12px;border-top:1px solid rgba(255,255,255,.13);display:flex;gap:8px}.chat-compose input{flex:1}.drawer-overlay{position:fixed;inset:0;background:rgba(20,62,126,.52);z-index:49;opacity:0;pointer-events:none;transition:.25s}.drawer-overlay.show{opacity:1;pointer-events:auto}.toast{position:fixed;z-index:100;left:50%;top:18px;transform:translate(-50%,-120px);width:min(calc(100% - 32px),398px);padding:13px 15px;border-radius:16px;background:#1658ad;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(28,78,154,.28);font-size:12px;font-weight:750;transition:.3s}.toast.show{transform:translate(-50%,0)}
@keyframes fadeUp{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}@media(min-width:760px){body{padding:24px 0}.app-shell{min-height:calc(100vh - 48px);border-radius:34px}.bottom-nav{bottom:24px;border-radius:0 0 34px 34px}.chat-panel{bottom:24px;border-radius:28px}.chat-fab{bottom:118px}.app-screen{min-height:calc(100vh - 48px)}}

/* --- Power Units branded intro / splash refresh --- */
html.intro-pending,html.intro-pending body{overflow:hidden}.intro-pending .app-shell{visibility:hidden}.intro-experience{display:none;position:fixed;z-index:999;inset:0;margin:auto;width:min(100vw,430px);height:100dvh;background:#073b8d;color:#fff;overflow:hidden;box-shadow:0 28px 90px rgba(6,45,112,.32)}.intro-pending .intro-experience{display:block}.intro-stage{display:none;position:absolute;inset:0}.intro-stage.active{display:flex;animation:introFade .35s ease}.splash-stage{align-items:stretch;justify-content:center;overflow:hidden}.splash-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.splash-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,37,103,.06) 0%,rgba(3,37,103,.18) 44%,rgba(3,31,87,.72) 100%)}.splash-top{position:absolute;top:max(18px,env(safe-area-inset-top));right:16px;z-index:4}.intro-skip{border:1px solid rgba(255,255,255,.28);background:rgba(4,51,124,.48);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;border-radius:999px;padding:10px 14px;font-size:11px;font-weight:900;letter-spacing:.03em}.splash-brand{position:absolute;left:22px;right:22px;top:max(36px,calc(env(safe-area-inset-top) + 24px));z-index:3;text-align:center}.splash-logo{width:min(255px,72vw);height:auto;filter:drop-shadow(0 12px 26px rgba(3,30,91,.38))}.splash-brand p{margin:7px 0 0;font-size:10px;font-weight:850;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.84)}.splash-loading{position:absolute;z-index:4;left:22px;right:22px;bottom:max(31px,calc(env(safe-area-inset-bottom) + 20px));display:grid;justify-items:center;gap:12px;font-size:12px;font-weight:800;color:#eef6ff}.loader-ring{width:38px;height:38px;border-radius:50%;border:4px solid rgba(255,255,255,.26);border-top-color:#fff;border-right-color:#ef3b4f;animation:spin .85s linear infinite}
.onboarding-stage{flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));overflow:auto;background:radial-gradient(circle at 86% 8%,rgba(239,59,79,.32),transparent 28%),radial-gradient(circle at 10% 35%,rgba(72,162,255,.30),transparent 31%),linear-gradient(180deg,#0a52c0 0%,#08479f 45%,#062e73 100%)}.intro-topbar{display:flex;align-items:center;justify-content:space-between;min-height:52px;position:relative;z-index:4}.intro-logo{width:128px;height:auto;filter:drop-shadow(0 10px 20px rgba(3,33,90,.25))}.onboarding-track{flex:1;min-height:0;position:relative}.onboarding-slide{display:none;min-height:100%;padding:8px 0 6px}.onboarding-slide.active{display:flex;flex-direction:column;animation:slideIn .32s ease}.onboarding-picture{height:min(44dvh,390px);min-height:278px;border-radius:30px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.23);box-shadow:0 22px 50px rgba(3,34,91,.28);background:#0a4caf}.onboarding-picture:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 56%,rgba(2,31,80,.38) 100%);pointer-events:none}.onboarding-picture img{width:100%;height:100%;object-fit:cover;object-position:center 38%}.onboarding-picture.alt img{object-position:center 48%}.onboarding-copy{padding:20px 6px 0}.intro-kicker{display:inline-flex;color:#ff9daa;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.18em}.onboarding-copy h1{font-size:31px;line-height:1.02;letter-spacing:-.045em;margin:8px 0 11px;font-weight:950}.onboarding-copy p{margin:0;color:#c8daf4;font-size:13px;line-height:1.62}.intro-feature-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.intro-feature-row span{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);border-radius:999px;padding:8px 10px;color:#fff;font-size:10px;font-weight:850}.intro-feature-row svg{width:13px;height:13px;color:#ff7080}.onboarding-benefits{min-height:48dvh;display:flex;flex-direction:column;justify-content:center}.benefit-orb{width:150px;height:88px;margin:6px auto 18px;display:grid;place-items:center}.benefit-orb img{width:148px;filter:drop-shadow(0 16px 28px rgba(4,34,90,.28))}.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.benefit-grid>div{min-height:132px;padding:15px;border-radius:21px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.075));border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:7px;box-shadow:0 16px 34px rgba(3,40,99,.18)}.benefit-grid svg{width:22px;height:22px;color:#ff7786}.benefit-grid b{font-size:13px}.benefit-grid small{font-size:10px;line-height:1.5;color:#c7d8ef}.final-copy{padding-top:14px}.intro-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:10px}.intro-dots{display:flex;gap:7px}.intro-dots button{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.32);transition:.2s}.intro-dots button.active{width:26px;border-radius:999px;background:#ef3b4f}.intro-next{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;background:linear-gradient(135deg,#ef3b4f,#ff6678);color:#fff;font-weight:950;padding:13px 17px;min-width:116px;box-shadow:0 14px 30px rgba(239,59,79,.25)}.intro-next svg{width:16px}.intro-note{text-align:center;font-size:9px;line-height:1.45;color:#9ebce5;margin:10px 14px 0}.network-banner{position:fixed;z-index:998;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%,-110px);width:min(calc(100% - 24px),406px);display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:14px;background:#8d2131;color:#fff;font-size:11px;font-weight:850;box-shadow:0 12px 30px rgba(82,16,29,.22);transition:.28s}.network-banner.show{transform:translate(-50%,0)}.network-banner svg{width:14px;height:14px}

/* --- Logo and mobile experience refinements --- */
.welcome-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 12px}.welcome-logo{width:122px;height:auto}.welcome-brand span{font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#b8d0f0;font-weight:900;text-align:right}.welcome-hero{padding-top:12px;min-height:auto}.welcome-art-card{height:230px;border-radius:27px;overflow:hidden;position:relative;margin-bottom:20px;border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 45px rgba(2,38,97,.22)}.welcome-art-card>img{width:100%;height:100%;object-fit:cover;object-position:center 42%}.welcome-art-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,57,137,.04),rgba(6,44,106,.16) 55%,rgba(5,40,99,.68))}.welcome-art-badge{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 11px;border-radius:999px;background:rgba(6,55,132,.68);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.24);font-size:10px;font-weight:900}.welcome-art-badge svg{width:14px;height:14px;color:#ff6676}.welcome-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:19px}.welcome-trust span{display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;text-align:center;padding:10px 4px;border-radius:15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);font-size:9px;color:#c6d8ef;font-weight:850}.welcome-trust svg{width:15px;height:15px;color:#ff7988}.auth-brand-lockup{display:flex;align-items:center;justify-content:space-between;gap:12px}.auth-brand-lockup img{width:152px}.auth-brand-lockup span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#b9cee9;font-weight:900}.brand-orb{width:116px;height:78px;border-radius:24px}.brand-orb img{width:96px;max-height:58px;object-fit:contain}.home-brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 16px}.home-brandbar img{width:112px;height:auto}.home-brandbar span{display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);font-size:8px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:#cce0f8}.home-brandbar svg{width:12px;height:12px;color:#6de4b0}.app-ready-card{background:linear-gradient(145deg,rgba(31,118,237,.22),rgba(239,59,79,.12))}.mini-action{border:1px solid rgba(255,255,255,.18);background:#fff;color:#0b4a9f;border-radius:12px;padding:9px 11px;font-size:10px;font-weight:950;white-space:nowrap}.profile-card{position:relative;overflow:hidden}.profile-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -20%,rgba(63,147,255,.24),transparent 42%),radial-gradient(circle at 90% 10%,rgba(239,59,79,.16),transparent 30%);pointer-events:none}.profile-card>*{position:relative}.profile-logo{width:126px;margin:0 auto 15px}.profile-badges{display:flex;justify-content:center;gap:8px;margin-top:11px}.profile-badges span{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:900;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#cce0f6}.profile-badges svg{width:11px;height:11px;color:#70e6b2}.chat-brand{width:51px;height:40px;border-radius:13px;background:#fff;display:grid;place-items:center;padding:5px}.chat-brand img{width:100%;height:100%;object-fit:contain}.app-screen{padding-top:max(22px,calc(env(safe-area-inset-top) + 12px));padding-bottom:max(102px,calc(env(safe-area-inset-bottom) + 94px))}.bottom-nav{padding-bottom:max(18px,env(safe-area-inset-bottom));height:calc(82px + env(safe-area-inset-bottom))}.chat-fab{bottom:calc(96px + env(safe-area-inset-bottom))}

@keyframes spin{to{transform:rotate(360deg)}}@keyframes introFade{from{opacity:.2}to{opacity:1}}@keyframes slideIn{from{opacity:.15;transform:translateX(10px)}to{opacity:1;transform:none}}
@media(max-height:720px){.onboarding-picture{height:38dvh;min-height:238px}.onboarding-copy h1{font-size:27px}.onboarding-copy p{font-size:12px}.intro-note{display:none}.benefit-grid>div{min-height:112px}.welcome-art-card{height:205px}}
@media(min-width:760px){.intro-experience{top:24px;bottom:24px;height:calc(100dvh - 48px);border-radius:34px}.network-banner{top:34px}}
.processing-logo{width:150px;margin:0 auto 24px;filter:drop-shadow(0 12px 22px rgba(3,36,94,.26))}.receipt-logo{width:132px;margin:0 auto 18px;filter:drop-shadow(0 10px 18px rgba(3,36,94,.2))}.mini-action.install-ready{background:linear-gradient(135deg,#ef3b4f,#ff6678);color:#fff;border-color:transparent;box-shadow:0 10px 20px rgba(239,59,79,.2)}

/* ============================================================
   POWER UNITS — WHITE BRAND THEME
   White is the primary canvas. Red, blue and magenta are used
   only as controlled brand accents from the supplied logo.
   ============================================================ */
:root{
  --pu-red:#ed1c24;
  --pu-red-2:#ff3b45;
  --pu-blue:#0873e6;
  --pu-blue-deep:#0759b6;
  --pu-magenta:#b01767;
  --pu-ink:#10233f;
  --pu-muted:#6f7e93;
  --pu-line:#e5eaf1;
  --pu-soft:#f7f9fc;
  --pu-blue-soft:#eef6ff;
  --pu-red-soft:#fff0f1;
  --pu-magenta-soft:#fff2f8;
}
html{background:#f4f7fb}
body{
  color:var(--pu-ink);
  background:
    radial-gradient(circle at 12% 5%,rgba(237,28,36,.055),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(8,115,230,.06),transparent 24%),
    #f4f7fb;
}
.app-shell{
  background:#fff;
  color:var(--pu-ink);
  box-shadow:0 26px 70px rgba(16,35,63,.11);
}
.app-shell:before{
  height:175px;
  background:
    radial-gradient(circle at 88% 4%,rgba(8,115,230,.065),transparent 35%),
    radial-gradient(circle at 12% 0%,rgba(237,28,36,.055),transparent 35%);
}
.app-screen{color:var(--pu-ink)}
.glass{
  background:#fff;
  border:1px solid var(--pu-line);
  box-shadow:0 10px 28px rgba(16,35,63,.065);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.muted{color:var(--pu-muted)}
.lime{color:var(--pu-red)}
.brand-blue{color:var(--pu-blue)}
.gradient-text{
  background:linear-gradient(90deg,var(--pu-red) 0%,var(--pu-magenta) 46%,var(--pu-blue) 100%);
  -webkit-background-clip:text;
  color:transparent;
}
.eyebrow{color:var(--pu-blue-deep)}
.btn-primary{
  background:linear-gradient(135deg,var(--pu-red),var(--pu-red-2));
  color:#fff;
  box-shadow:0 12px 24px rgba(237,28,36,.18);
}
.btn-secondary{
  background:#fff;
  color:var(--pu-blue-deep);
  border:1px solid #cfe0f5;
  box-shadow:0 7px 18px rgba(8,115,230,.06);
}
.icon-btn{
  color:var(--pu-ink);
  background:#fff;
  border:1px solid var(--pu-line);
  box-shadow:0 6px 16px rgba(16,35,63,.05);
}
.field,
.otp-box{
  color:var(--pu-ink);
  background:#fff;
  border:1px solid #dbe2ec;
  box-shadow:inset 0 1px 2px rgba(16,35,63,.02);
}
.field::placeholder{color:#9aa7b9}
.field:focus,.otp-box:focus{
  border-color:rgba(8,115,230,.62);
  box-shadow:0 0 0 4px rgba(8,115,230,.09);
}
.label{color:#42526b}
.input-icon{color:#7890ae}
.brand-orb{
  background:linear-gradient(145deg,#fff4f5,#f2f7ff);
  border:1px solid #e5eaf1;
  box-shadow:0 12px 28px rgba(16,35,63,.06);
}
.home-hero{
  background:linear-gradient(135deg,#fff 0%,#fff8f8 48%,#f4f9ff 100%);
  border-color:#e3e9f2;
}
.home-hero:before{background:radial-gradient(circle,rgba(8,115,230,.10),transparent 67%)}
.home-hero:after{background:radial-gradient(circle,rgba(237,28,36,.10),transparent 67%)}
.quick-icon{
  background:#f8fafc;
  border:1px solid #e7ecf3;
  color:var(--pu-blue-deep);
}
.quick-action:first-child .quick-icon{background:var(--pu-red-soft);border-color:#ffd7da;color:var(--pu-red)}
.quick-action:nth-child(2) .quick-icon{background:var(--pu-blue-soft);border-color:#d7e9ff;color:var(--pu-blue)}
.quick-action:nth-child(3) .quick-icon{background:var(--pu-magenta-soft);border-color:#f6d7e7;color:var(--pu-magenta)}
.quick-action:nth-child(4) .quick-icon{background:#f3f6fa;border-color:#e3e8ef;color:#435570}
.quick-action span{color:#53647b}
.service-icon{
  background:var(--pu-red-soft);
  color:var(--pu-red);
}
.secondary-icon{
  background:var(--pu-blue-soft)!important;
  color:var(--pu-blue)!important;
}
.service-card small{color:var(--pu-muted)}
.bottom-nav{
  background:rgba(255,255,255,.97);
  border-top:1px solid #e6ebf2;
  box-shadow:0 -10px 30px rgba(16,35,63,.07);
}
.nav-item{color:#8592a5}
.nav-item.active{color:var(--pu-red)}
.nav-item.active .nav-dot{background:var(--pu-red)}
.step{background:#e7ebf1}
.step.done,.step.active{background:linear-gradient(90deg,var(--pu-red),var(--pu-magenta))}
.provider{
  color:var(--pu-ink);
  border:1px solid #e1e7ef;
  background:#fff;
  box-shadow:0 7px 18px rgba(16,35,63,.035);
}
.provider.active{
  border-color:rgba(237,28,36,.5);
  background:var(--pu-red-soft);
  box-shadow:0 8px 20px rgba(237,28,36,.07);
}
.provider-logo{background:#f7f9fc;color:var(--pu-blue-deep);border:1px solid #edf0f4}
.provider small{color:#65758c}
.amount-chip{
  color:#34435a;
  background:#fff;
  border:1px solid #dfe5ed;
}
.amount-chip.active{
  background:linear-gradient(135deg,var(--pu-red),var(--pu-red-2));
  color:#fff;
  border-color:var(--pu-red);
}
.payment-option{
  color:var(--pu-ink);
  background:#fff;
  border:1px solid #e0e6ee;
}
.payment-option.active{
  border-color:rgba(8,115,230,.5);
  background:var(--pu-blue-soft);
}
.radio{border-color:#b7c4d4}
.payment-option.active .radio{border-color:var(--pu-blue)}
.payment-option.active .radio:after{background:var(--pu-blue)}
.token-box{
  background:linear-gradient(135deg,#fff8f8,#f3f8ff);
  border:1px dashed rgba(237,28,36,.5);
}
.token-value{color:var(--pu-blue-deep)}
.success-ring{background:#ebfff5;border-color:#bcebd3;color:#16a765}
.list-row{border-bottom:1px solid #edf0f4}
.avatar{background:linear-gradient(145deg,var(--pu-red-soft),var(--pu-blue-soft));color:var(--pu-blue-deep)}
.status.success{background:#e9fff4;color:#15955e}
.status.pending{background:#fff8e6;color:#a96c00}
.status.failed{background:#fff0f1;color:#d73140}
.chat-fab{
  border:1px solid #ff737a;
  background:linear-gradient(135deg,var(--pu-red),var(--pu-magenta));
  box-shadow:0 14px 30px rgba(237,28,36,.2);
}
.chat-panel{
  color:var(--pu-ink);
  background:#fff;
  border:1px solid #e1e6ee;
  box-shadow:0 -24px 65px rgba(16,35,63,.16);
}
.chat-head,.chat-compose{border-color:#e8ecf2}
.bubble.bot{background:#f5f8fc;border:1px solid #e3e9f1;color:var(--pu-ink)}
.bubble.me{background:linear-gradient(135deg,var(--pu-red),var(--pu-magenta));color:#fff}
.chat-chip{border-color:#d8e6f8;background:var(--pu-blue-soft);color:var(--pu-blue-deep)}
.drawer-overlay{background:rgba(16,35,63,.28)}
.toast{background:#fff;color:var(--pu-ink);border:1px solid #e2e7ee;box-shadow:0 18px 40px rgba(16,35,63,.14)}
.network-banner{background:#fff4f4;color:#a91f2b;border:1px solid #ffd7db;box-shadow:0 12px 28px rgba(126,24,34,.10)}

/* First-run splash and onboarding now use white as the dominant surface. */
.intro-experience{
  background:#fff;
  color:var(--pu-ink);
  box-shadow:0 28px 90px rgba(16,35,63,.14);
}
.splash-stage{background:#fff}
.splash-art{
  inset:auto 16px 118px 16px;
  width:calc(100% - 32px);
  height:58%;
  border-radius:30px;
  object-fit:cover;
  object-position:center;
  border:1px solid #e5eaf1;
  box-shadow:0 20px 44px rgba(16,35,63,.09);
}
.splash-shade{
  background:
    radial-gradient(circle at 84% 8%,rgba(8,115,230,.07),transparent 24%),
    radial-gradient(circle at 12% 4%,rgba(237,28,36,.07),transparent 24%);
}
.intro-skip{
  border:1px solid #dfe5ee;
  background:rgba(255,255,255,.92);
  color:var(--pu-blue-deep);
  box-shadow:0 6px 18px rgba(16,35,63,.055);
}
.splash-brand{top:max(28px,calc(env(safe-area-inset-top) + 18px))}
.splash-logo{filter:drop-shadow(0 10px 22px rgba(16,35,63,.10))}
.splash-brand p{color:#6c7c92}
.splash-loading{color:#65758b}
.loader-ring{border-color:#e6ebf2;border-top-color:var(--pu-blue);border-right-color:var(--pu-red)}
.onboarding-stage{
  color:var(--pu-ink);
  background:
    radial-gradient(circle at 90% 0%,rgba(8,115,230,.055),transparent 24%),
    radial-gradient(circle at 0% 36%,rgba(237,28,36,.05),transparent 26%),
    #fff;
}
.intro-logo{filter:drop-shadow(0 8px 18px rgba(16,35,63,.08))}
.onboarding-picture{
  border:1px solid #e3e9f0;
  background:#fff;
  box-shadow:0 18px 42px rgba(16,35,63,.08);
}
.onboarding-picture:after{background:linear-gradient(180deg,transparent 72%,rgba(255,255,255,.2))}
.onboarding-picture img{object-position:center}
.intro-kicker{color:var(--pu-red)}
.onboarding-copy p{color:#68798f}
.intro-feature-row span{border:1px solid #e1e7ef;background:#fff;color:#475970;box-shadow:0 5px 14px rgba(16,35,63,.03)}
.intro-feature-row svg{color:var(--pu-red)}
.benefit-orb img{filter:drop-shadow(0 12px 22px rgba(16,35,63,.08))}
.benefit-grid>div{background:#fff;border:1px solid #e5eaf1;box-shadow:0 10px 26px rgba(16,35,63,.055)}
.benefit-grid svg{color:var(--pu-red)}
.benefit-grid small{color:#6d7d92}
.intro-dots button{background:#d6dde7}
.intro-dots button.active{background:linear-gradient(90deg,var(--pu-red),var(--pu-magenta))}
.intro-note{color:#8a97a9}

/* Welcome/auth and branded utility elements. */
.welcome-brand span,.auth-brand-lockup span{color:#718197}
.welcome-art-card{border:1px solid #e5eaf1;box-shadow:0 16px 36px rgba(16,35,63,.08);background:#fff}
.welcome-art-gradient{background:linear-gradient(180deg,transparent 70%,rgba(255,255,255,.75))}
.welcome-art-badge{background:rgba(255,255,255,.94);color:var(--pu-ink);border:1px solid #e2e7ef;box-shadow:0 8px 20px rgba(16,35,63,.08)}
.welcome-trust span{background:#fff;border:1px solid #e5eaf1;color:#66778d;box-shadow:0 5px 14px rgba(16,35,63,.03)}
.home-brandbar span{background:#f8fafc;border:1px solid #e7ecf2;color:#607189}
.app-ready-card{background:linear-gradient(145deg,#f1f7ff,#fff3f4)}
.mini-action{border:1px solid #d7e5f6;background:#fff;color:var(--pu-blue-deep)}
.profile-card:before{background:radial-gradient(circle at 50% -20%,rgba(8,115,230,.08),transparent 42%),radial-gradient(circle at 90% 10%,rgba(237,28,36,.07),transparent 30%)}
.profile-badges span{background:#f8fafc;border:1px solid #e5eaf1;color:#617087}
.chat-brand{border:1px solid #e5eaf1}
.processing-logo,.receipt-logo{filter:drop-shadow(0 10px 18px rgba(16,35,63,.08))}
.mini-action.install-ready{background:linear-gradient(135deg,var(--pu-red),var(--pu-magenta));color:#fff}

/* Keep explicitly white text only where the surface is intentionally colored. */
.btn-primary,.intro-next,.chat-fab,.bubble.me,.amount-chip.active,.mini-action.install-ready{color:#fff}

/* ============================================================
   POWER UNITS — V4 REFRESH
   Blue-led styling for splash + activity while keeping white BG.
   ============================================================ */
:root{
  --pu-blue:#0b73ea;
  --pu-blue-deep:#0a56b4;
  --pu-blue-soft:#eef6ff;
  --pu-blue-soft-2:#f5f9ff;
  --pu-red:#ed1c24;
  --pu-red-soft:#fff2f3;
  --pu-magenta:#c11971;
}
.btn-primary{
  background:linear-gradient(135deg,var(--pu-blue),#1b86ff 55%,#4ea2ff 100%);
  box-shadow:0 14px 28px rgba(11,115,234,.18);
}
.btn-secondary{color:var(--pu-blue-deep)}
.nav-item.active,.lime{color:var(--pu-blue)}
.nav-item.active .nav-dot{background:var(--pu-blue)}
.step.done,.step.active{background:linear-gradient(90deg,var(--pu-blue),#53a9ff)}
.amount-chip.active{
  background:linear-gradient(135deg,var(--pu-blue),#2490ff);
  border-color:#2085ef;
}
.payment-option.active{
  border-color:rgba(11,115,234,.45);
  background:linear-gradient(180deg,#f7fbff,#edf6ff);
}
.payment-option.active .radio{border-color:var(--pu-blue)}
.payment-option.active .radio:after{background:var(--pu-blue)}
.chat-fab,.mini-action.install-ready,.bubble.me{
  background:linear-gradient(135deg,var(--pu-blue),#3a98ff 72%,var(--pu-magenta));
}
.intro-next{
  background:linear-gradient(135deg,var(--pu-blue-deep),var(--pu-blue));
  box-shadow:0 14px 26px rgba(11,115,234,.18);
}
.intro-kicker,.benefit-grid svg,.intro-feature-row svg{color:var(--pu-blue)}
.intro-dots button.active{background:linear-gradient(90deg,var(--pu-blue),#52a8ff)}

/* Enhanced splash */
.intro-experience{
  background:
    radial-gradient(circle at 86% 7%,rgba(11,115,234,.09),transparent 22%),
    radial-gradient(circle at 6% 12%,rgba(193,25,113,.05),transparent 24%),
    #fff;
}
.splash-stage{position:relative;background:#fff;overflow:hidden}
.splash-orb{position:absolute;border-radius:50%;filter:blur(8px);pointer-events:none}
.splash-orb.orb-one{width:180px;height:180px;top:-58px;right:-50px;background:radial-gradient(circle,rgba(11,115,234,.14),rgba(11,115,234,0) 72%)}
.splash-orb.orb-two{width:160px;height:160px;left:-48px;top:184px;background:radial-gradient(circle,rgba(237,28,36,.08),rgba(237,28,36,0) 72%)}
.splash-top{right:18px;top:max(16px,env(safe-area-inset-top))}
.splash-brand{left:18px;right:18px;top:max(26px,calc(env(safe-area-inset-top) + 16px));text-align:left}
.splash-logo{width:min(220px,62vw)}
.splash-brand p{margin-top:8px;font-size:10px;font-weight:900;letter-spacing:.16em;color:#69809c}
.splash-art{
  inset:138px 18px auto 18px;
  width:calc(100% - 36px);
  height:36%;
  min-height:245px;
  border-radius:34px;
  object-fit:cover;
  box-shadow:0 28px 60px rgba(16,35,63,.10);
}
.splash-shade{
  background:
    linear-gradient(180deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.0) 54%,rgba(255,255,255,.92) 100%),
    radial-gradient(circle at 88% 10%,rgba(11,115,234,.06),transparent 23%),
    radial-gradient(circle at 10% 24%,rgba(237,28,36,.05),transparent 23%);
}
.splash-floating-card{
  position:absolute;z-index:3;max-width:180px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid #e5edf7;box-shadow:0 16px 38px rgba(16,35,63,.10);border-radius:22px;padding:12px 13px;
}
.splash-floating-meter{top:210px;right:24px}
.splash-floating-payment{top:374px;left:24px}
.float-label{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:900;color:var(--pu-blue);margin-bottom:8px}
.float-label svg{width:13px;height:13px}
.splash-floating-card strong{display:block;font-size:12px;line-height:1.35;color:var(--pu-ink)}
.splash-floating-card small{display:block;margin-top:5px;font-size:10px;line-height:1.45;color:#71839a}
.splash-copy{
  position:absolute;left:20px;right:20px;bottom:118px;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.96),#fff);
  border:1px solid #e8edf4;border-radius:28px;padding:22px 18px 18px;box-shadow:0 18px 42px rgba(16,35,63,.08);
}
.splash-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:var(--pu-blue)}
.splash-kicker:before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--pu-blue),#60b0ff)}
.splash-copy h1{margin:10px 0 10px;font-size:30px;line-height:1.04;letter-spacing:-.045em;font-weight:950;color:var(--pu-ink)}
.splash-copy p{margin:0;color:#6e8097;font-size:12.5px;line-height:1.62}
.splash-pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.splash-pill-row span{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;border:1px solid #e1e8f1;background:#f8fbff;font-size:10px;font-weight:850;color:#3f5573}
.splash-pill-row span svg{width:12px;height:12px;color:var(--pu-blue)}
.splash-loading-card{
  left:20px;right:20px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 10px));
  z-index:4;display:flex;align-items:center;gap:12px;justify-content:flex-start;
  background:rgba(255,255,255,.95);border:1px solid #e6edf6;border-radius:22px;padding:14px 16px;box-shadow:0 12px 30px rgba(16,35,63,.09);
}
.splash-loading{font-size:12px;color:#576a84}
.splash-loading strong{display:block;color:var(--pu-ink);font-size:12px;line-height:1.3}
.splash-loading small{display:block;margin-top:3px;font-size:10px;color:#7890a8}
.loader-ring{width:34px;height:34px;border-width:3px;border-color:#dce5ef;border-top-color:var(--pu-blue);border-right-color:#8ec3ff}

/* Refined onboarding for blue-led look */
.onboarding-stage{background:radial-gradient(circle at 88% 4%,rgba(11,115,234,.06),transparent 22%),radial-gradient(circle at 4% 35%,rgba(237,28,36,.04),transparent 24%),#fff}
.onboarding-copy h1{color:#0f2442}
.onboarding-feature-row span{background:#f8fbff}
.onboarding-picture{background:linear-gradient(180deg,#fff,#f8fbff)}
.benefit-grid>div{background:linear-gradient(180deg,#fff,#f8fbff)}
.benefit-grid svg{color:var(--pu-blue)}

/* Activity page redesign */
.activity-hero{padding:18px;background:linear-gradient(145deg,#f7fbff 0%,#f2f8ff 42%,#fff 100%);border:1px solid #deebf9;box-shadow:0 16px 36px rgba(16,35,63,.07)}
.activity-hero-top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.activity-label{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eaf4ff;color:var(--pu-blue);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.activity-hero h3{margin:10px 0 8px;font-size:21px;line-height:1.15;letter-spacing:-.03em;color:#10233f}
.activity-hero p{margin:0;color:#6d7f97;font-size:12px;line-height:1.55;max-width:230px}
.activity-ring{width:74px;height:74px;flex:0 0 74px;border-radius:50%;display:grid;place-items:center;text-align:center;background:conic-gradient(var(--pu-blue) 0 345deg,#d7e8fb 345deg 360deg);padding:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.activity-ring span,.activity-ring small{display:block}
.activity-ring:before{content:"";position:absolute}
.activity-ring > span,.activity-ring > small{position:relative;z-index:1}
.activity-ring{position:relative}
.activity-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #e5eef9}
.activity-ring span{font-size:18px;font-weight:950;color:var(--pu-blue)}
.activity-ring small{font-size:9px;font-weight:900;color:#6a819b;margin-top:28px}
.activity-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.activity-stat{padding:12px;border-radius:18px;background:#fff;border:1px solid #e6edf6;box-shadow:0 8px 20px rgba(16,35,63,.04)}
.activity-stat span{display:block;font-size:10px;font-weight:800;color:#6a7e97}
.activity-stat strong{display:block;margin-top:6px;font-size:20px;line-height:1.05;font-weight:950;color:#10233f}
.activity-stat small{display:block;margin-top:6px;font-size:10px;line-height:1.4;color:#8a98ab}
.activity-filter-wrap{padding:10px 10px;background:#fff}
.activity-filter-row{padding-bottom:2px}
.history-filter{border:1px solid #dce7f4;background:#fff;color:#46607c;border-radius:999px;padding:10px 14px;font-size:11px;font-weight:850;white-space:nowrap;box-shadow:0 4px 14px rgba(16,35,63,.03)}
.history-filter.active{background:linear-gradient(135deg,var(--pu-blue),#3794ff);border-color:transparent;color:#fff;box-shadow:0 10px 18px rgba(11,115,234,.18)}
.activity-timeline{display:grid;gap:16px;margin-top:16px}
.history-group{display:grid;gap:10px}
.history-group.hidden{display:none}
.history-group-title{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#6d819a;padding:0 2px}
.activity-item{display:flex;gap:12px;padding:14px;border-radius:22px;border:1px solid #e6edf6;background:#fff;box-shadow:0 10px 26px rgba(16,35,63,.045)}
.activity-item.hidden{display:none}
.activity-icon{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;flex:0 0 48px;border:1px solid #e5edf7}
.activity-icon.electricity{background:#eef6ff;color:var(--pu-blue)}
.activity-icon.wallet{background:#f3f7ff;color:#5f46e8}
.activity-icon.airtime{background:#fff4f5;color:var(--pu-red)}
.activity-icon.reward{background:#fff7ea;color:#d98a00}
.activity-content{min-width:0;flex:1}
.activity-title-row{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.activity-title-row strong{font-size:13px;line-height:1.35;color:#112742}
.activity-amount{font-size:14px;font-weight:950;color:#112742;white-space:nowrap}
.activity-amount.positive{color:var(--pu-blue)}
.activity-meta{margin-top:5px;font-size:11px;line-height:1.5;color:#72849b}
.activity-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.activity-footer small{font-size:10px;color:#8a98ab;font-weight:700}
.status.success{background:#ecf6ff;color:var(--pu-blue-deep)}

@media(max-width:380px){
  .splash-art{height:33%;min-height:220px}
  .splash-floating-card{max-width:158px;padding:11px}
  .splash-floating-payment{top:358px}
  .splash-copy{padding:18px 16px 16px;bottom:112px}
  .splash-copy h1{font-size:26px}
  .activity-hero-top{flex-direction:column}
  .activity-ring{margin-left:auto}
  .activity-stats{grid-template-columns:1fr}
}
@media(max-height:760px){
  .splash-art{height:31%;min-height:210px;inset:122px 18px auto 18px}
  .splash-floating-meter{top:190px}
  .splash-floating-payment{top:332px}
  .splash-copy{bottom:108px;padding-top:18px}
  .splash-copy h1{font-size:27px}
  .splash-pill-row span{padding:7px 9px}
}

/* ============================================================
   V6 Branded splash + auth redesign
   Uses a single hero background image for splash and auth pages.
   ============================================================ */
.brand-link{color:var(--pu-blue-deep)}
.muted-light{color:rgba(235,244,255,.86)}
.eyebrow-light{color:#d6e8ff}
.gradient-text-light{
  background:linear-gradient(90deg,#ffffff 0%,#ffd0d4 34%,#ff6c76 55%,#9dd4ff 100%);
  -webkit-background-clip:text;
  color:transparent;
}

/* Simplified splash using one background image */
.splash-stage{background:#071f4e;overflow:hidden}
.splash-art-full{inset:0;width:100%;height:100%;min-height:100%;border-radius:0;border:0;object-fit:cover;object-position:center;box-shadow:none}
.splash-shade-full{background:linear-gradient(180deg,rgba(5,25,62,.10) 0%,rgba(5,25,62,.14) 30%,rgba(5,25,62,.34) 58%,rgba(4,18,44,.82) 100%)}
.splash-skip-white{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;box-shadow:none;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.splash-bottom-card{position:absolute;z-index:3;left:18px;right:18px;bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));padding:18px 18px 16px;border-radius:28px;background:linear-gradient(180deg,rgba(5,21,56,.68),rgba(5,19,48,.88));border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 50px rgba(0,0,0,.22);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.splash-logo-bottom{width:min(165px,46vw);filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.splash-bottom-copy{margin-top:12px}.splash-kicker-light{color:rgba(215,232,255,.92)}.splash-kicker-light:before{background:linear-gradient(135deg,#7fc1ff,#ffffff)}
.splash-bottom-copy h1{margin:10px 0 8px;font-size:28px;line-height:1.06;letter-spacing:-.045em;font-weight:950;color:#fff}
.splash-bottom-copy p{margin:0;color:rgba(231,240,255,.86);font-size:12.5px;line-height:1.62}
.splash-loading-inline{margin-top:16px;display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);color:#d8e7ff}
.splash-loading-inline strong{display:block;font-size:12px;line-height:1.3;color:#fff}
.splash-loading-inline small{display:block;margin-top:3px;font-size:10px;color:rgba(216,231,255,.82)}
.loader-ring-light{width:34px;height:34px;border-width:3px;border-color:rgba(255,255,255,.28);border-top-color:#fff;border-right-color:#7fc1ff}

/* Welcome screen */
.welcome-screen-branded{padding:0;overflow:hidden;min-height:100vh}
.welcome-bg-media,.welcome-bg-overlay{position:absolute;inset:0}
.welcome-bg-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.welcome-bg-overlay{background:linear-gradient(180deg,rgba(4,20,54,.18) 0%,rgba(4,20,54,.34) 32%,rgba(4,19,49,.70) 64%,rgba(4,17,44,.92) 100%)}
.welcome-content-wrap{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh;padding:max(20px,calc(env(safe-area-inset-top) + 12px)) 18px max(24px,calc(env(safe-area-inset-bottom) + 18px))}
.welcome-brand-light span{color:#dbe9ff}.welcome-brand-light .welcome-logo{filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.welcome-hero-branded{justify-content:flex-end;min-height:56vh;padding-top:0}.auth-copy-light{color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.18)}
.welcome-cta-wrap{margin-top:28px}.welcome-btn{background:linear-gradient(135deg,var(--pu-red),#ff4f5c 58%,#ff6c76);box-shadow:0 14px 28px rgba(237,28,36,.22)}
.welcome-btn-secondary{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.welcome-trust-light{margin-top:18px}.welcome-trust-light span{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:#eef4ff;box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.welcome-trust-light span svg{color:#89c4ff}

/* Login redesign */
.login-screen-branded{padding-bottom:34px}
.login-hero-panel{position:relative;min-height:300px;border-radius:30px;overflow:hidden;box-shadow:0 18px 44px rgba(16,35,63,.12)}
.login-hero-media,.login-hero-overlay{position:absolute;inset:0}.login-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.login-hero-overlay{background:linear-gradient(180deg,rgba(5,24,61,.20) 0%,rgba(5,24,61,.36) 35%,rgba(5,19,49,.82) 100%)}
.login-hero-top,.login-hero-copy{position:relative;z-index:2}.login-hero-top{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 0}
.icon-btn-light{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.login-hero-copy{padding:52px 20px 24px}.auth-brand-lockup-light span{color:#dce9ff}.auth-brand-lockup-light img{filter:drop-shadow(0 10px 18px rgba(0,0,0,.15))}
.login-form-branded{margin-top:-30px;position:relative;z-index:3;border-top-left-radius:28px;border-top-right-radius:28px;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.login-form-branded .label{color:#44556d}.login-form-branded .field{background:#fff}

@media(max-width:380px){
  .splash-bottom-card{left:14px;right:14px;padding:16px 16px 14px}
  .splash-bottom-copy h1{font-size:24px}
  .splash-bottom-copy p{font-size:12px}
  .login-hero-panel{min-height:280px}
}
@media(max-height:760px){
  .splash-bottom-copy h1{font-size:24px}
  .splash-bottom-card{padding-top:16px}
  .welcome-hero-branded{min-height:52vh}
}

/* ============================================================
   V7 Onboarding cleanup + softer brand balance
   ============================================================ */
:root{
  --pu-blue:#1769c7;
  --pu-blue-deep:#0f4f9e;
  --pu-blue-soft:#f1f7fd;
  --pu-red:#e92732;
  --pu-magenta:#b61968;
  --pu-cream:#fbfaf8;
}

/* Overall onboarding is now warm white, not a blue wall */
.onboarding-stage{
  background:
    radial-gradient(circle at 95% 0%,rgba(23,105,199,.055),transparent 26%),
    radial-gradient(circle at 0% 56%,rgba(233,39,50,.04),transparent 28%),
    var(--pu-cream)!important;
  color:var(--pu-ink);
  padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));
  overflow:hidden;
}
.intro-topbar-light{min-height:50px;z-index:12}
.intro-brand-mini{display:flex;align-items:center;gap:9px;min-width:0}
.intro-brand-mini .intro-logo{width:108px;max-height:40px;object-fit:contain;filter:none}
.intro-brand-mini span{font-size:8.5px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:#8290a3;white-space:nowrap}
.intro-skip-light{background:#fff;color:var(--pu-blue-deep);border:1px solid #dfe6ef;box-shadow:0 5px 14px rgba(16,35,63,.04)}

.onboarding-track{padding-bottom:98px;overflow:hidden}
.onboarding-slide{padding:8px 0 0;min-height:100%}
.onboarding-slide.active{display:flex;flex-direction:column}
.clean-onboarding-picture{
  height:min(36dvh,315px)!important;
  min-height:230px!important;
  border-radius:26px!important;
  overflow:hidden;
  border:1px solid #e4e9ef!important;
  background:#fff!important;
  box-shadow:0 16px 38px rgba(16,35,63,.07)!important;
}
.clean-onboarding-picture img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 47%!important;
  transform:scale(1.02);
}
.clean-onboarding-picture.alt img{object-position:center 58%!important}
.onboarding-picture:after{background:linear-gradient(180deg,transparent 76%,rgba(255,255,255,.16))!important}
.onboarding-copy{padding:18px 6px 0!important}
.intro-kicker{color:var(--pu-red)!important}
.onboarding-copy h1{font-size:30px!important;line-height:1.04!important;color:#132743!important;margin:7px 0 10px!important}
.onboarding-copy p{color:#65768c!important;font-size:12.5px!important;line-height:1.58!important}
.intro-feature-row{margin-top:13px!important;gap:8px!important}
.intro-feature-row span{background:#fff!important;border:1px solid #e3e8ef!important;color:#43566e!important;box-shadow:0 4px 12px rgba(16,35,63,.025)!important}
.intro-feature-row svg{color:var(--pu-blue)!important}

/* Bottom controls have their own surface and cannot be covered by slide content */
.intro-footer-panel{
  position:absolute;z-index:30;left:0;right:0;bottom:0;
  padding:12px 16px max(12px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(251,250,248,.88),rgba(251,250,248,.99) 32%);
  border-top:1px solid rgba(219,226,235,.8);
  box-shadow:0 -10px 28px rgba(16,35,63,.035);
  pointer-events:auto;
}
.intro-controls{padding:0;position:relative;z-index:31;pointer-events:auto}
.intro-next{
  position:relative;z-index:35;pointer-events:auto;touch-action:manipulation;
  min-width:116px;padding:13px 18px;border-radius:16px;
  background:linear-gradient(135deg,var(--pu-blue-deep),var(--pu-blue))!important;
  box-shadow:0 10px 22px rgba(23,105,199,.16)!important;
}
.intro-next:active{transform:scale(.98)}
.intro-dots{position:relative;z-index:35}
.intro-dots button{pointer-events:auto;touch-action:manipulation}
.intro-dots button.active{background:linear-gradient(90deg,var(--pu-blue),#69a9e7)!important}
.intro-note{margin:8px 0 0!important;color:#8b97a8!important;font-size:8.5px!important}

/* Last benefits slide made lighter */
.onboarding-benefits{min-height:auto;padding-top:6px}
.benefit-orb{height:64px;margin:4px auto 12px}
.benefit-orb img{width:118px}
.benefit-grid{gap:8px}
.benefit-grid>div{min-height:110px!important;padding:13px!important;border-radius:18px!important;background:#fff!important;border:1px solid #e5eaf0!important;box-shadow:0 7px 18px rgba(16,35,63,.035)!important}
.benefit-grid svg{color:var(--pu-blue)!important}
.benefit-grid small{color:#718196!important}
.final-copy{padding-top:10px!important}

/* Softer blue throughout primary auth controls */
.btn-primary{background:linear-gradient(135deg,var(--pu-blue-deep),var(--pu-blue))!important;box-shadow:0 12px 24px rgba(23,105,199,.16)!important}
.welcome-btn{background:linear-gradient(135deg,var(--pu-red),#ff5661)!important;box-shadow:0 12px 24px rgba(233,39,50,.18)!important}

@media(max-width:390px){
  .intro-brand-mini span{display:none}
  .clean-onboarding-picture{height:33dvh!important;min-height:215px!important}
  .onboarding-copy h1{font-size:27px!important}
}
@media(max-height:720px){
  .clean-onboarding-picture{height:30dvh!important;min-height:190px!important}
  .onboarding-copy{padding-top:14px!important}
  .onboarding-copy h1{font-size:25px!important}
  .onboarding-copy p{font-size:11.5px!important;line-height:1.48!important}
  .intro-feature-row{margin-top:10px!important}
}

/* ============================================================
   V8 LIVE API INTEGRATION UI STATES
   ============================================================ */
.api-banner{position:fixed;z-index:997;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%,-120px);width:min(calc(100% - 24px),406px);display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:14px;font-size:11px;font-weight:850;box-shadow:0 12px 30px rgba(16,35,63,.13);transition:.28s;background:#f5f8fc;color:#51637b;border:1px solid #e0e7f0}.api-banner.show{transform:translate(-50%,0)}.api-banner.ok{background:#edfff6;color:#15764c;border-color:#c9efd9}.api-banner.fail{background:#fff1f2;color:#9d2430;border-color:#ffd2d6}.api-banner.checking{background:#eef6ff;color:#0a5bb5;border-color:#d7e9ff}.api-banner svg{width:14px;height:14px;flex:none}
.empty-state{padding:22px 16px;text-align:center;border:1px dashed #dce4ee;border-radius:18px;color:#78879b;background:#fafcff;font-size:12px;line-height:1.55}.empty-state.compact{padding:16px}.empty-state.error{background:#fff6f7;color:#9d2430;border-color:#ffd7db}.provider-loading{padding:20px 10px;text-align:center;color:#718299;font-size:12px}
.secure-sheet-overlay{position:fixed;z-index:79;inset:0;background:rgba(16,35,63,.32);opacity:0;pointer-events:none;transition:.25s}.secure-sheet-overlay.open{opacity:1;pointer-events:auto}.secure-sheet{position:fixed;z-index:80;left:50%;bottom:0;transform:translate(-50%,110%);width:min(100%,430px);padding:14px 18px max(22px,calc(env(safe-area-inset-bottom) + 14px));border-radius:28px 28px 0 0;background:#fff;border:1px solid #e3e9f1;box-shadow:0 -26px 70px rgba(16,35,63,.18);transition:.28s ease}.secure-sheet.open{transform:translate(-50%,0)}.secure-sheet-handle{width:44px;height:5px;border-radius:999px;background:#dbe2eb;margin:0 auto 16px}.notification-row.unread{background:#f4f9ff}.notification-row.unread:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--pu-blue);margin-left:auto}.field select,select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6f8096 50%),linear-gradient(135deg,#6f8096 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 13px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
#processingBackBtn{max-width:330px;margin-left:auto;margin-right:auto}.transaction-row{cursor:pointer}.transaction-row.hidden{display:none}.payment-option[disabled],button:disabled{cursor:not-allowed;opacity:.64}.status.pending{background:#fff7e7;color:#9c6500}.status.failed{background:#fff0f1;color:#bf2d39}
@media(min-width:760px){.api-banner{top:34px}.secure-sheet{bottom:24px;border-radius:28px}}

/* v8.1 registration navigation and security affordances */
.auth-return-links{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:15px;border-top:1px solid #e7ecf3;flex-wrap:wrap}
.auth-return-links a,.auth-return-links button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#0a63ca;font-size:11px;font-weight:850;text-decoration:none;padding:7px 0}
.auth-return-links a:hover,.auth-return-links button:hover{text-decoration:underline}

/* v2.2 mobile side drawer and production polish */
.app-menu-btn{margin-left:-2px}.app-side-drawer{position:fixed;z-index:90;top:0;bottom:0;left:max(0px,calc(50% - 215px));width:min(360px,88vw);transform:translateX(-112%);visibility:hidden;pointer-events:none;background:#fff;border-right:1px solid var(--pu-line);box-shadow:24px 0 70px rgba(16,35,63,.18);transition:transform .24s ease,visibility 0s linear .24s;display:flex;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));overflow:auto}.app-side-drawer.open{transform:translateX(0);visibility:visible;pointer-events:auto;transition:transform .24s ease}.side-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 14px;border-bottom:1px solid var(--pu-line)}.side-drawer-head img{width:138px;height:auto}.side-drawer-head .icon-btn svg{width:18px}.side-drawer-profile{display:flex;align-items:center;gap:12px;margin:16px 0;padding:14px;border:1px solid var(--pu-line);border-radius:18px;background:linear-gradient(135deg,#fff8f8,#f3f8ff)}.side-drawer-profile strong,.side-drawer-profile small{display:block}.side-drawer-profile strong{font-size:14px}.side-drawer-profile small{color:var(--pu-muted);font-size:11px;margin-top:3px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side-drawer-nav{display:grid;gap:5px}.side-drawer-nav button,.side-drawer-foot button{width:100%;border:0;background:transparent;border-radius:14px;padding:12px 13px;display:flex;align-items:center;gap:12px;text-align:left;color:#31435b;font-size:13px;font-weight:850}.side-drawer-nav button:hover,.side-drawer-nav button:focus{background:#f5f8fc;color:var(--pu-blue-deep);outline:none}.side-drawer-nav svg,.side-drawer-foot svg{width:18px;height:18px;flex:0 0 auto}.side-drawer-nav button:nth-child(2) svg,.side-drawer-nav button:nth-child(7) svg{color:var(--pu-red)}.side-drawer-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--pu-line);display:grid;gap:6px}.side-drawer-foot .drawer-install{background:var(--pu-blue-soft);color:var(--pu-blue-deep)}.side-drawer-foot .drawer-signout{background:var(--pu-red-soft);color:#b92b39}.drawer-overlay.menu-open{display:block;opacity:1;pointer-events:auto}@media(min-width:760px){.app-side-drawer{left:calc(50% - 215px);transform:translateX(-112%)}.app-side-drawer.open{transform:translateX(0)}}

/* v2.3 provider search + recognizable utility badges */
.provider-search-card .field{margin:0;background:transparent;border:0;box-shadow:none}
.provider-search-card .field:focus{outline:none}
.provider{min-height:104px;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.provider:active{transform:scale(.98)}
.provider-logo{position:relative;overflow:hidden;font-size:0}
.provider-logo::before{content:"⚡";font-size:21px;line-height:1}
.provider-logo::after{content:attr(data-code);position:absolute;right:3px;bottom:2px;font-size:6px;font-weight:950;letter-spacing:.02em;background:#0b3f8d;color:white;border-radius:5px;padding:1px 3px}
.provider-name{display:block;line-height:1.25}
.provider-empty{grid-column:1/-1}
@media (max-width:380px){.provider-grid{grid-template-columns:repeat(2,1fr)}}


/* v2.4 clickable activity records */
.transaction-row{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.transaction-row:hover{transform:translateY(-1px);box-shadow:0 15px 34px rgba(16,35,63,.10)}.transaction-row:active{transform:scale(.995)}
.tx-detail-modal{position:fixed;inset:0;z-index:95;display:none;align-items:flex-end;justify-content:center}.tx-detail-modal.open{display:flex}.tx-detail-backdrop{position:absolute;inset:0;border:0;background:rgba(6,22,45,.58);backdrop-filter:blur(5px)}.tx-detail-sheet{position:relative;width:min(620px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:30px 30px 0 0;padding:22px 20px 28px;box-shadow:0 -24px 70px rgba(16,35,63,.22)}.tx-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #e7edf5}.tx-detail-head h2{font-size:22px;font-weight:900;margin:3px 0}.tx-detail-head small{color:#75869d;overflow-wrap:anywhere}.tx-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}.tx-detail-field{padding:13px;border:1px solid #e3eaf3;border-radius:16px;background:linear-gradient(145deg,#fff,#f7faff);min-width:0}.tx-detail-field small{display:block;text-transform:uppercase;letter-spacing:.06em;color:#7a8aa0;font-size:9px;font-weight:900;margin-bottom:5px}.tx-detail-field strong{display:block;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.tx-detail-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.tx-detail-actions button{flex:1;min-width:130px}.tx-detail-actions i{width:16px}.tx-detail-modal .hidden{display:none!important}@media(max-width:520px){.tx-detail-grid{grid-template-columns:1fr}.tx-detail-sheet{max-height:92vh;padding-bottom:calc(25px + env(safe-area-inset-bottom))}}

.tx-detail-brand{display:flex;align-items:center;gap:12px;min-width:0}.tx-detail-brand img{width:66px;height:44px;object-fit:contain;flex:0 0 auto}.tx-detail-brand>div{min-width:0}

/* v2.4.1 transaction detail modal reliability */
body.tx-modal-open{overflow:hidden;touch-action:none}
.tx-detail-modal{pointer-events:none}
.tx-detail-modal.open{pointer-events:auto}
.tx-detail-backdrop{cursor:pointer;z-index:0}
.tx-detail-sheet{z-index:1;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tx-detail-head{position:sticky;top:0;z-index:3;background:#fff}
#transactionDetailClose{position:relative;z-index:4;flex:0 0 auto;cursor:pointer}
@media(max-width:520px){.tx-detail-head{padding-top:2px}.tx-detail-sheet{max-height:94dvh}}


/* ============================================================
   v2.5.1 mobile polish: compact dashboard, provider selection,
   bigger notifications and aligned export actions.
   ============================================================ */
.home-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.home-metric{position:relative;overflow:hidden;text-align:left;min-height:122px;padding:14px;border:1px solid #e5ebf3;border-radius:22px;background:#fff;box-shadow:0 10px 25px rgba(16,35,63,.055);color:#10233f}
.home-metric:after{content:"";position:absolute;width:75px;height:75px;border-radius:50%;right:-25px;top:-24px;background:currentColor;opacity:.07}
.home-metric .metric-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;margin-bottom:11px;background:rgba(255,255,255,.78);box-shadow:0 4px 12px rgba(16,35,63,.06)}
.home-metric .metric-icon svg{width:17px;height:17px}.home-metric small{display:block;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;opacity:.72}.home-metric strong{display:block;font-size:20px;line-height:1.1;margin-top:4px;font-weight:950;overflow-wrap:anywhere}.home-metric em{display:block;margin-top:6px;font-size:9px;font-style:normal;font-weight:750;opacity:.62}
.home-metric-blue{background:linear-gradient(145deg,#eef7ff,#fff);color:#075fc7;border-color:#d7eaff}.home-metric-red{background:linear-gradient(145deg,#fff1f3,#fff);color:#ce2638;border-color:#ffdbe0}.home-metric-green{background:linear-gradient(145deg,#edfff6,#fff);color:#128052;border-color:#d3f5e4}.home-metric-gold{background:linear-gradient(145deg,#fff8e9,#fff);color:#a36800;border-color:#fbe7bd}
.provider-tap-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin:16px 0 0;color:#708198;font-size:10px;font-weight:800}.provider-tap-hint svg{width:14px;height:14px;color:var(--pu-blue)}
.provider-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:12px}.provider-logo:has(img)::before{display:none}.provider-code{display:inline-flex;margin-top:7px;padding:3px 7px;border-radius:999px;background:#f3f7fb;color:#51677f;font-size:8px;font-weight:950;letter-spacing:.05em}.provider.active .provider-code{background:#fff;color:var(--pu-red)}
.selected-disco-card{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:13px 14px;border:1px solid #dceafd;border-radius:20px;background:linear-gradient(135deg,#f4f9ff,#fff);box-shadow:0 9px 22px rgba(8,90,180,.06)}
.selected-disco-icon{width:48px;height:48px;border-radius:15px;background:#fff;border:1px solid #e2eaf4;display:grid;place-items:center;flex:0 0 48px;overflow:hidden;color:#0b62bc;font-size:9px;font-weight:950}.selected-disco-icon img{width:100%;height:100%;object-fit:contain}.selected-disco-icon span{font-size:8px;font-weight:950}.selected-disco-copy{min-width:0;flex:1}.selected-disco-copy small{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#7d8da2;font-weight:900}.selected-disco-copy strong{display:block;margin-top:3px;font-size:13px;color:#10233f;line-height:1.2}.selected-disco-copy>span{display:inline-block;margin-top:4px;font-size:9px;color:#0b62bc;font-weight:900}.selected-disco-change{flex:0 0 auto;border:1px solid #dbe6f4;background:#fff;color:#0b62bc;border-radius:12px;padding:8px 9px;font-size:9px;font-weight:900}
/* large, vivid notification/toast */
.toast{top:max(18px,calc(env(safe-area-inset-top) + 10px));width:min(calc(100% - 24px),414px);padding:17px 18px;border-radius:22px;background:linear-gradient(135deg,#095fca,#1a88f4 65%,#ee3348);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:0 20px 45px rgba(9,79,164,.28);font-size:14px;line-height:1.45;font-weight:850;text-align:center}
/* aligned, colorful transaction exports */
.tx-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;margin-top:18px}.tx-export-btn{min-height:50px;border:0;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:12px;font-weight:900;box-shadow:0 9px 20px rgba(16,35,63,.12)}.tx-export-btn svg{width:17px;height:17px}.tx-export-csv{background:linear-gradient(135deg,#0d72e7,#31a0ff)}.tx-export-pdf{background:linear-gradient(135deg,#ef334a,#ff6677)}.tx-receipt-btn{grid-column:1/-1;min-width:0!important}.tx-detail-actions button{width:100%;min-width:0}
@media(max-width:380px){.home-metrics{gap:8px}.home-metric{min-height:112px;padding:12px;border-radius:19px}.home-metric strong{font-size:17px}.home-metric em{font-size:8px}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.quick-action{min-width:0}.home-hero .flex.gap-2.mt-5{display:grid;grid-template-columns:1fr 1fr}.home-hero .flex.gap-2.mt-5 .btn-primary,.home-hero .flex.gap-2.mt-5 .btn-secondary{width:100%!important;justify-content:center;padding-left:10px!important;padding-right:10px!important;font-size:11px}.home-brandbar img{width:96px}.home-brandbar span{font-size:7px;padding:6px 8px}.selected-disco-card{padding:11px}.selected-disco-icon{width:42px;height:42px;flex-basis:42px}.tx-detail-actions{gap:8px}.tx-export-btn{min-height:48px;font-size:11px}.toast{font-size:13px}}
@media(max-width:330px){.home-metrics{grid-template-columns:1fr 1fr}.home-metric{min-height:106px;padding:10px}.home-metric .metric-icon{width:30px;height:30px;margin-bottom:8px}.home-metric strong{font-size:15px}.home-metric em{display:none}.selected-disco-change{padding:7px;font-size:8px}}


/* v2.5.6 — Meter validation request visibility */
.meter-debug-panel{margin-top:16px;border:1px solid #cbd5e1;border-radius:20px;background:#f8fafc;padding:16px;color:#0f172a;box-shadow:0 10px 28px rgba(15,23,42,.07)}
.meter-debug-panel.hidden{display:none!important}
.meter-debug-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.meter-debug-head strong{font-size:15px;font-weight:900;color:#0f172a}
.meter-debug-badge{display:inline-flex;align-items:center;border-radius:999px;background:#dbeafe;color:#1d4ed8;padding:6px 10px;font-size:11px;font-weight:900;letter-spacing:.04em}
.meter-debug-note{margin:0 0 12px;font-size:12px;line-height:1.55;color:#475569}
.meter-debug-row{display:grid;grid-template-columns:minmax(112px,34%) minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid #e2e8f0}
.meter-debug-label{font-size:12px;color:#64748b;line-height:1.45}
.meter-debug-value{font-size:12px;color:#0f172a;font-weight:800;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}
.meter-debug-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;background:#eef2ff;border:1px solid #dbeafe;border-radius:10px;padding:8px 10px;color:#1e3a8a}
@media(max-width:380px){.meter-debug-row{grid-template-columns:1fr;gap:5px}.meter-debug-value{font-size:11px}.meter-debug-panel{padding:13px;border-radius:16px}}

/* v2.7 auth/navigation hardening */
body.auth-active #appSideDrawer,body.auth-active #drawerOverlay{display:none!important}.app-side-drawer:not(.open){visibility:hidden!important;pointer-events:none!important}.vas-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.vas-service-card{border:1px solid #e1e8f1;border-radius:20px;background:linear-gradient(145deg,#fff,#f7fbff);padding:16px;text-align:left;min-width:0}.vas-service-card i{width:22px;height:22px;color:var(--pu-blue)}.vas-service-card strong,.vas-service-card small{display:block}.vas-service-card small{margin-top:4px;color:var(--pu-muted);font-size:10px}.vas-product-grid{display:grid;gap:10px}.vas-product{width:100%;text-align:left;border:1px solid #e0e8f2;border-radius:16px;background:#fff;padding:13px}.vas-product.active{border-color:var(--pu-blue);background:#eff7ff}.vas-status-note{border-radius:16px;padding:12px 14px;background:#eef8ff;color:#245b8f;font-size:11px;line-height:1.5}@media(max-width:350px){.vas-service-grid{grid-template-columns:1fr}}