@layer components{.papp{--app-bg:#f5f6f8;--app-card:#fff;--app-rail:#fff;--app-card-2:#f0f1f5;--app-field:#fff;--app-raise:#fff;--app-line:#191c1f14;--app-text:#191c1f;--app-ink:#191c1f;--app-on-ink:#fff;--app-muted:#62666f;--app-faint:#80858f;--app-accent:var(--teal);--app-accent-text:#3a5bdb;--app-pos:#0b7d46;--app-pos-bg:#0b7d461a;--app-warn:#a35f00;--app-warn-bg:#ffa02829;--app-neg:#d92d35;--app-neg-bg:#d92d3514;--app-glass:#191c1f0f;--app-glass-2:#191c1f1a;--app-glass-hero:#fff3;--app-mpesa:#3db54a;--dusk-night:#140c3a;--dusk-indigo:#2d1680;--dusk-violet:#6d2a9e;--dusk-plum:#5a2a8c;--dusk-glow:#4a2bb8;--dusk-sun:#ff6a2bd9;--dusk-amber:#ff9a52b3;--dusk-rose:#d9366fd9;--app-radius:16px;--app-radius-sm:12px;--app-nav-h:56px;--app-col:480px;color:var(--app-text);background:var(--app-bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-tap-highlight-color:transparent;font-feature-settings:"tnum" 0;min-height:100svh}.papp-bg{background:var(--app-bg)}.papp-hero{--hero-base:var(--dusk-plum);isolation:isolate;background:linear-gradient(180deg, var(--dusk-night) -60px, var(--dusk-indigo) 164px, var(--dusk-violet) 321px, var(--hero-base) 500px) top / 100% 500px no-repeat, var(--hero-base);position:relative;overflow:clip}.papp-hero:before,.papp-hero:after{content:"";z-index:-1;pointer-events:none;height:480px;position:absolute;top:0;left:0;right:0;-webkit-mask-image:linear-gradient(#000 72%,#0000);mask-image:linear-gradient(#000 72%,#0000)}.papp-hero:before{filter:blur(36px);-webkit-mask-composite:source-in;background:radial-gradient(45% 14% at 50% 86%, var(--dusk-sun) 0%, transparent 100%), radial-gradient(30% 11% at 34% 78%, var(--dusk-amber) 0%, transparent 100%), radial-gradient(35% 15% at 70% 72%, var(--dusk-rose) 0%, transparent 100%), radial-gradient(40% 24% at 38% 34%, var(--dusk-glow) 0%, transparent 100%);width:min(150%,820px);height:560px;top:-60px;left:50%;right:auto;translate:-50%;-webkit-mask-image:linear-gradient(#000 72%,#0000),linear-gradient(90deg,#0000,#000 15% 85%,#0000);mask-image:linear-gradient(#000 72%,#0000),linear-gradient(90deg,#0000,#000 15% 85%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.papp-hero:after{opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.papp-hero>header,.papp-on-hero{color:#fff}.papp-hero-end{position:relative}.papp-hero-end:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(180deg, transparent 0px, color-mix(in oklab, var(--app-bg) 4%, transparent) 24px, color-mix(in oklab, var(--app-bg) 16%, transparent) 52px, color-mix(in oklab, var(--app-bg) 36%, transparent) 80px, color-mix(in oklab, var(--app-bg) 60%, transparent) 108px, color-mix(in oklab, var(--app-bg) 80%, transparent) 136px, color-mix(in oklab, var(--app-bg) 93%, transparent) 164px, var(--app-bg) 200px);width:100vw;position:absolute;top:-24px;bottom:-100vh;left:50%;translate:-50%}.papp-card{background:var(--app-card);border-radius:var(--app-radius)}.papp-row{text-align:left;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 16px;display:flex}.papp-row-icon{background:var(--app-glass);border-radius:999px;flex-shrink:0;place-items:center;width:44px;height:44px;display:grid}.papp-row-title{font-size:17px;font-weight:500;line-height:22px;display:block}.papp-row-sub{color:var(--app-muted);margin-top:2px;font-size:15px;line-height:20px;display:block}.papp-kv{justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:14px 16px;font-size:15px;line-height:20px;display:flex}.papp-kv dt{color:var(--app-muted)}.papp-kv dd{text-align:right;font-weight:500}.papp-press{transition:transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, opacity var(--dur-ui) ease;touch-action:manipulation;cursor:pointer}.papp-press:active{transform:scale(.97)}.papp-row.papp-press:active{background-color:var(--app-glass);transform:none}.papp-check{appearance:none;border:2px solid var(--app-faint);width:24px;height:24px;transition:background-color var(--dur-ui) ease, border-color var(--dur-ui) ease;cursor:pointer;background:50%/14px no-repeat;border-radius:999px;flex-shrink:0;margin:0}.papp-check:checked{border-color:var(--app-accent);background-color:var(--app-accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}.papp-check:focus-visible{outline:2px solid var(--app-accent-text);outline-offset:2px}@media (prefers-reduced-motion:no-preference){.papp-reveal{animation:papp-reveal var(--dur-ui) var(--ease-out) both}}@keyframes papp-reveal{0%{opacity:0;transform:translateY(-4px)}}@media (hover:none){.papp-press:active{transition-delay:70ms}}.papp-press:focus-visible,.papp :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--app-accent-text);outline-offset:2px}.papp-btn{letter-spacing:-.01em;background:var(--app-ink);min-height:56px;color:var(--app-on-ink);border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 24px;font-size:16px;font-weight:600;line-height:1;display:inline-flex}.papp-btn[data-variant=accent]{background:var(--app-accent);color:#fff}.papp-btn[data-variant=ghost]{background:var(--app-raise);color:var(--app-text)}.papp-btn[data-variant=glass]{background:var(--app-glass);color:var(--app-text)}.papp-hero .papp-btn[data-variant=glass]{background:var(--app-glass-hero);color:#fff}.papp-btn[data-size=sm]{min-height:44px;padding:0 18px;font-size:15px}.papp-btn:disabled,.papp-btn[aria-disabled=true]{opacity:.4;cursor:not-allowed;transform:none}.papp-link{min-height:44px;color:var(--app-accent-text);align-items:center;font-size:16px;font-weight:500;display:inline-flex}.papp-link:disabled{color:var(--app-faint)}.papp-icon-btn{background:var(--app-glass);border-radius:999px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.papp-hero .papp-icon-btn{background:var(--app-glass-hero)}.papp-action{flex-direction:column;align-items:center;gap:10px;min-width:0;display:flex}.papp-action-circle{background:var(--app-glass-hero);border-radius:999px;place-items:center;width:48px;height:48px;display:grid}.papp-action-label{text-align:center;white-space:nowrap;font-size:15px;font-weight:500;line-height:20px}.papp-chip{background:var(--app-raise);min-height:40px;color:var(--app-text);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;padding:0 16px;font-size:15px;font-weight:500;display:inline-flex}.papp-chip[aria-selected=true],.papp-chip[data-selected=true]{background:var(--app-ink);color:var(--app-on-ink)}.papp-input{border-radius:var(--app-radius);background:var(--app-field);width:100%;min-height:56px;color:var(--app-text);border:1px solid #0000;padding:0 16px;font-size:16px}.papp-input::placeholder{color:var(--app-faint)}.papp-input:focus,.papp-input:focus-visible{border-color:var(--app-accent-text);outline:none}.papp-input[aria-invalid=true]{border-color:var(--app-neg)}.papp-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.papp-label{color:var(--app-muted);font-size:15px;font-weight:500;line-height:20px;display:block}.papp-help{color:var(--app-muted);font-size:14px;line-height:19px}.papp-error{color:var(--app-neg);font-size:15px;line-height:20px}.papp-otp{position:relative}.papp-otp input{opacity:.01;letter-spacing:2.2em;caret-color:#0000;color:#0000;background:0 0;width:100%;height:100%;font-size:16px;position:absolute;inset:0}html:not([data-hydrated]) .papp-otp input{opacity:1;background:var(--app-field);width:100%;height:56px;color:var(--app-text);caret-color:auto;letter-spacing:.5em;text-align:center;border-radius:16px;font-size:24px;font-weight:600;position:static}html:not([data-hydrated]) .papp-otp-slots{display:none}.papp-otp-slots{grid-template-columns:repeat(3,1fr) 12px repeat(3,1fr);align-items:center;gap:8px;display:grid}.papp-otp-dash{background:var(--app-faint);border-radius:1px;height:2px}.papp-otp-slot{border-radius:var(--app-radius-sm);background:var(--app-field);height:56px;transition:border-color var(--dur-ui) ease;border:1px solid #0000;place-items:center;font-size:24px;font-weight:600;display:grid;position:relative}.papp-otp-slot:empty:after{content:"";background:var(--app-faint);border-radius:999px;width:6px;height:6px}.papp-otp-slot[data-active=true]{border-color:var(--app-accent-text)}.papp-otp-slot[data-active=true]:empty:after{background:var(--app-text)}.papp-material{-webkit-backdrop-filter:blur(20px)saturate(160%);backdrop-filter:blur(20px)saturate(160%);border-top:1px solid var(--app-line);background:#ffffffd1}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.papp-material{background:var(--app-card)}}@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.papp-material{background:var(--app-card);-webkit-backdrop-filter:none;backdrop-filter:none}}@media (prefers-contrast:more){.papp{--app-muted:#4a4f57;--app-faint:#6b7079;--app-line:#191c1f3d}}html[data-perf=low] .papp-material{background:var(--app-card);-webkit-backdrop-filter:none;backdrop-filter:none}html[data-perf=low] .papp-hero:before{filter:none}html[data-perf=low] .papp-hero:after{display:none}html[data-perf=low] .papp-skeleton{animation:none}.papp-sheet{width:100%;max-width:560px;max-height:min(90svh,760px);color:var(--app-text);background:var(--app-card);padding:0;padding-bottom:env(safe-area-inset-bottom);transition:transform .26s var(--ease-out), opacity .2s ease, overlay .26s allow-discrete, display .26s allow-discrete;border:0;border-radius:24px 24px 0 0;margin:auto auto 0;transform:translateY(0)}.papp-sheet:not([open]){opacity:0;transform:translateY(100%)}@starting-style{.papp-sheet[open]{opacity:0;transform:translateY(100%)}}.papp-sheet::backdrop{transition:opacity .2s ease, overlay .26s allow-discrete, display .26s allow-discrete;background:#191c1f66}.papp-sheet:not([open])::backdrop{opacity:0}@starting-style{.papp-sheet[open]::backdrop{opacity:0}}@media (min-width:1024px){.papp-sheet{border-radius:24px;max-width:480px;margin:auto}}.papp-sheet[data-bare]{width:calc(100% - 24px);margin-bottom:calc(12px + env(safe-area-inset-bottom));border-radius:32px;padding-bottom:0}.papp-sheet .papp-card{background:var(--app-card-2)}.papp-sheet,.papp-card,.papp-keypad{--app-field:var(--app-card-2);--app-raise:var(--app-card-2)}.papp-title{letter-spacing:-.02em;font-size:30px;font-weight:700;line-height:36px}.papp-subtitle{color:var(--app-muted);margin-top:6px;font-size:15px;line-height:21px}.papp-section{font-size:17px;font-weight:600;line-height:22px}.papp-balance{letter-spacing:-.035em;justify-content:center;align-items:baseline;display:inline-flex}.papp-balance-whole{font-size:56px;font-weight:700;line-height:60px}.papp-balance-frac{letter-spacing:-.02em;font-size:24px;font-weight:700;line-height:28px}.papp-amount{letter-spacing:-.02em;font-size:30px;font-weight:700;line-height:36px}.papp-skeleton{background:linear-gradient(90deg,#191c1f0d,#191c1f17,#191c1f0d) 0 0/200% 100%;border-radius:12px;animation:1.4s linear infinite papp-shimmer}.papp-hero .papp-skeleton{background-image:linear-gradient(90deg,#ffffff2e,#ffffff4d,#ffffff2e)}.papp-hero .papp-hero-end .papp-skeleton{background-image:linear-gradient(90deg,#191c1f0d,#191c1f17,#191c1f0d)}@keyframes papp-shimmer{to{background-position:-200% 0}}.papp-spin{animation:.7s linear infinite papp-spin}@keyframes papp-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.papp-press:active{transform:none}.papp-sheet,.papp-sheet:not([open]){transition:opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;transform:none}@starting-style{.papp-sheet[open]{transform:none}}.papp-skeleton{animation:none}}.papp-sheet-grab{touch-action:none;cursor:grab}.papp-sheet[open]::backdrop{opacity:var(--scrim,1)}.papp-sheet[data-page]{height:calc(100svh - 12px - env(safe-area-inset-top));border-radius:16px 16px 0 0;max-height:none}@media (min-width:1024px){.papp-sheet[data-page]{border-radius:24px;height:min(760px,88svh)}}.papp-sheet[data-instant],.papp-sheet[data-instant]::backdrop{transition:none}@media (prefers-reduced-motion:reduce){.papp-sheet[data-page],.papp-sheet[data-page]::backdrop{transition-duration:.15s}}.papp-avatar{background:var(--app-card-2);letter-spacing:-.01em;width:44px;height:44px;color:var(--app-text);border-radius:999px;flex-shrink:0;place-items:center;font-size:16px;font-weight:600;display:grid}.papp-avatar[data-rail=mpesa]{color:#fff;background:var(--app-mpesa)}.papp-avatar[data-size=sm]{width:30px;height:30px;margin:-4px 0;font-size:14px}.papp-avatar[data-size=lg]{width:56px;height:56px;font-size:20px}.papp-float{border-radius:var(--app-radius);background:var(--app-field);text-align:left;width:100%;min-height:64px;color:var(--app-text);border:1px solid #0000;flex-direction:column;justify-content:center;padding:10px 16px;display:flex;position:relative}.papp-float:focus-within{border-color:var(--app-accent-text)}.papp-float[data-invalid=true]{border-color:var(--app-neg)}.papp-float-label{color:var(--app-muted);font-size:14px;line-height:18px}.papp-float-value{min-height:24px;font-size:17px;line-height:24px;display:block}.papp-float input{width:100%;color:var(--app-text);background:0 0;outline:none;padding:0;font-size:17px;line-height:24px}.papp-float input::placeholder{color:var(--app-faint)}.papp-float[data-readonly=true]{background:var(--app-card)}.papp-float[data-empty=true]:not(:focus-within) .papp-float-label{color:var(--app-faint);font-size:17px;line-height:24px}.papp-float[data-empty=true]:not(:focus-within) input{height:0;min-height:0}.papp-fab{background:var(--app-ink);width:56px;height:56px;color:var(--app-on-ink);border-radius:999px;flex-shrink:0;place-items:center;display:grid}.papp-fab:disabled{opacity:.4;cursor:not-allowed}.papp-big-amount{letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:transform .15s var(--ease-out);font-size:56px;font-weight:700;line-height:64px;display:inline-block}.papp-big-amount[data-empty=true]{color:var(--app-faint)}.papp-keypad{background:var(--app-card);padding:4px 6px calc(8px + env(safe-area-inset-bottom))}.papp-keypad-quick{grid-template-columns:repeat(4,1fr);display:grid}.papp-keypad-quick button{font-variant-numeric:tabular-nums;border-radius:10px;min-height:48px;font-size:17px;font-weight:500}.papp-keypad-keys{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.papp-keypad-key{background:var(--app-card-2);font-variant-numeric:tabular-nums;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:8px;place-items:center;min-height:52px;font-size:26px;font-weight:400;line-height:1;display:grid}.papp-keypad-key[data-plain=true]{background:0 0}.papp-keypad-key:active,.papp-keypad-quick button:active{background:var(--app-glass-2)}@media (min-width:1024px){.papp-keypad{border-radius:20px;padding:6px 6px 8px}}.papp-stack{padding:10px 16px}.papp-stack dt{color:var(--app-muted);font-size:15px;line-height:20px}.papp-stack dd{margin-top:4px;font-size:16px;line-height:22px}.papp-timeline li{grid-template-columns:20px minmax(0,1fr);column-gap:14px;min-height:56px;padding-bottom:14px;display:grid}.papp-timeline li:last-child{min-height:42px;padding-bottom:0}.papp-timeline-rail{justify-content:center;padding-top:1px;display:flex;position:relative}.papp-timeline li:not(:last-child) .papp-timeline-rail:after{content:"";background:var(--app-glass-2);border-radius:1px;width:2px;position:absolute;top:25px;bottom:-10px;left:9px}.papp-timeline li[data-state=done]:not(:last-child) .papp-timeline-rail:after{background:var(--app-pos)}.papp-timeline-dot{z-index:1;width:20px;height:20px;box-shadow:inset 0 0 0 2px var(--app-glass-2);border-radius:999px;place-items:center;display:grid;position:relative}.papp-timeline-dot[data-state=done]{background:var(--app-pos);color:var(--app-on-ink);box-shadow:none}.papp-timeline-dot[data-state=bad]{background:var(--app-neg);color:var(--app-on-ink);box-shadow:none}.papp-timeline-dot[data-state=active]{box-shadow:inset 0 0 0 2px var(--app-accent-text)}.papp-timeline-dot[data-state=active]:after{content:"";background:var(--app-accent-text);border-radius:999px;width:8px;height:8px}.papp-timeline li[data-state=todo] .papp-timeline-title{color:var(--app-muted)}.papp-timeline li[data-state=bad] .papp-timeline-title{color:var(--app-neg)}.papp-timeline li[data-state=active] .papp-timeline-title{font-weight:600}@media (prefers-reduced-motion:reduce){.papp-big-amount{transition:none}}.papp-rewards-link{border-radius:var(--app-radius-sm);background:var(--app-card-2);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:all;user-select:all;min-height:48px;padding:14px 16px;font-size:15px;line-height:20px;overflow:hidden}.papp-rewards-step{background:var(--app-glass);font-variant-numeric:tabular-nums;border-radius:999px;flex-shrink:0;place-items:center;width:32px;height:32px;margin:0 6px;font-size:15px;font-weight:600;display:grid}.papp-rewards-total{letter-spacing:-.035em;font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:44px;font-weight:700;line-height:48px;display:flex}.papp-rewards-total-frac{letter-spacing:-.02em;font-size:24px;line-height:28px}.papp-rewards-total-unit{letter-spacing:0;color:var(--app-muted);font-size:17px;font-weight:600;line-height:22px}.papp-rewards-month{border-radius:var(--app-radius-sm);background:var(--app-card-2);justify-content:space-between;align-items:center;gap:12px;min-height:48px;margin-top:16px;padding:12px 16px;display:flex}.papp-draw-art{isolation:isolate;background:radial-gradient(70% 45% at 50% 108%, var(--dusk-sun) 0%, transparent 100%), radial-gradient(45% 35% at 85% 92%, var(--dusk-rose) 0%, transparent 100%), radial-gradient(60% 50% at 20% 10%, var(--dusk-glow) 0%, transparent 100%), linear-gradient(170deg, var(--dusk-night) 0%, var(--dusk-indigo) 45%, var(--dusk-violet) 80%, var(--dusk-plum) 100%);color:#fff;position:relative;overflow:hidden}.papp-ticket{--notch:10px;--stub:56px;background:var(--app-card);color:var(--app-text);-webkit-mask:radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), transparent 97%, #000) right / 51% 100% no-repeat;-webkit-mask:radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), transparent 97%, #000) right / 51% 100% no-repeat;mask:radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), transparent 97%, #000) right / 51% 100% no-repeat;position:relative}.papp-ticket-perf{height:0;margin:0 calc(var(--notch) + 6px);border-top:2px dashed var(--app-glass-2)}.papp-draw-thumb{border-radius:var(--app-radius-sm);flex-shrink:0;place-items:center;width:48px;height:48px;display:grid}.papp-draw-thumb .papp-ticket{--notch:4px;--stub:50%;letter-spacing:-.01em;font-variant-numeric:tabular-nums;border-radius:5px;place-items:center;min-width:36px;height:26px;padding:0 7px;font-size:14px;font-weight:700;line-height:1;display:grid}.papp-ticket-lift{filter:drop-shadow(0 10px 24px #140c3a59)}.papp-cta-bar{padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg, #f5f6f800 0%, var(--app-bg) 28%);position:sticky;bottom:0}}