@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");:root{--blue:#087bf5;--navy:#11245a;--ink:#17213a;--muted:#7180a3;--line:#e6ebf4;--soft:#f5f8fe;--success:#18a76c;--r:15px}*{box-sizing:border-box}body{margin:0;background:#f2f6fc;color:var(--ink);font-family:DM Sans,sans-serif}.shell{position:relative;max-width:480px;min-height:100vh;margin:auto;background:white;padding:22px 20px 100px;box-shadow:0 0 40px #cbd5e155}.topbar{justify-content:space-between}.brand,.topbar{display:flex;align-items:center}.brand{gap:8px;color:#0e2362;font:800 25px Plus Jakarta Sans}.brand>span:last-child span{color:var(--blue)}.brand-mark{width:33px;height:33px;border-radius:10px;background:linear-gradient(135deg,#0f96ff,#0950cc);color:#fff;display:grid;place-items:center;font-size:22px;font-style:italic}.icon-button{position:relative;border:0;background:var(--soft);color:var(--navy);width:40px;height:40px;border-radius:12px;display:grid;place-items:center}.icon-button i{width:7px;height:7px;border-radius:50%;background:#ff5f57;position:absolute;right:10px;top:9px;border:1px solid white}.welcome{padding:32px 0 22px}.muted,.welcome p{margin:0;color:var(--muted);font-size:14px}.welcome h1{font:800 27px/1.25 Plus Jakarta Sans;letter-spacing:-1px;margin:7px 0 12px;color:var(--navy)}.welcome span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#54709d;background:#eff7ff;padding:7px 10px;border-radius:8px}.search{height:48px;background:#f5f7fb;border:1px solid var(--line);border-radius:12px;display:flex;gap:10px;align-items:center;padding:0 13px;color:#8592ae}.search input{font:14px inherit;border:0;outline:0;background:transparent;min-width:0;width:100%}section{margin-top:27px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-title h2,.service-view h2{margin:0;color:var(--navy);font:700 18px Plus Jakarta Sans;letter-spacing:-.4px}.section-title button{border:0;background:transparent;color:var(--blue);font:600 12px inherit;display:flex;align-items:center}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:11px;gap:11px}.category{padding:13px 5px 10px;text-align:center;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);min-height:113px}.category span{margin:auto auto 7px;width:35px;height:35px;border-radius:10px;color:var(--blue);background:#edf6ff;display:grid;place-items:center}.category:nth-child(2) span{color:#e79800;background:#fff8e9}.category:nth-child(5) span{color:#11a26b;background:#edfcf6}.category b,.category small{display:block}.category b{font-size:12px}.category small{font-size:9px;color:var(--muted);line-height:1.25;margin-top:3px}.promo{background:linear-gradient(115deg,#096de4,#1596f2);padding:20px;border-radius:17px;color:#fff;min-height:176px;overflow:hidden;position:relative}.promo h2{font:700 21px/1.24 Plus Jakarta Sans;letter-spacing:-.7px;margin:7px 0}.promo span{font-size:10px;font-weight:700;letter-spacing:.5px;color:#cfeaff}.promo p{font-size:11px;opacity:.83;margin:0 0 13px}.promo button{background:white;color:#076cdd;border:0;border-radius:7px;padding:8px 12px;font:700 11px DM Sans}.promo-art{position:absolute;right:23px;bottom:21px;color:#d7f4ff;transform:rotate(-8deg)}.promo-art i{position:absolute;width:35px;height:46px;border:5px solid #fff;border-radius:8px;right:-7px;top:23px;opacity:.8}.game-row{display:flex;gap:10px;overflow:auto;padding-bottom:3px}.game-row button{flex:0 0 84px;padding:0;background:transparent;border:0;text-align:left;color:var(--ink)}.game-row span{width:84px;height:68px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}.game-row b{font-size:10px;display:block;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.secure-note{display:flex;gap:11px;background:#f2f8ff;border:1px solid #ddecfc;border-radius:12px;padding:13px;color:#3872ac;margin-bottom:0}.secure-note svg{flex:none}.secure-note b{font-size:12px;color:#275581}.secure-note p{font-size:10px;margin:3px 0 0;color:#6b90b7}.bottom-nav{height:72px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;z-index:2}.bottom-nav button{border:0;background:transparent;color:#91a0bd;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;font:600 10px DM Sans;min-width:62px}.bottom-nav .active{color:var(--blue)}.toast{position:fixed;bottom:85px;left:50%;translate:-50%;max-width:calc(100% - 40px);background:#17213a;color:#fff;border-radius:10px;padding:10px 14px;font-size:12px;z-index:5;text-align:center}.service-view{max-width:480px;min-height:100vh;margin:0 auto;padding:25px 20px 40px;background:white}.back{border:0;background:transparent;color:#36527f;font:600 14px DM Sans;padding:0;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.9px;color:var(--blue);font-weight:700;margin:0 0 7px}.service-view h2{font-size:24px;margin-bottom:8px}.service-view label{font-size:12px;color:#536689;font-weight:600;display:block;margin-top:28px}.service-view input{display:block;width:100%;height:50px;border:1px solid var(--line);border-radius:11px;margin-top:8px;padding:0 13px;font:14px DM Sans;outline-color:var(--blue)}.form-notice,.hint{font-size:11px;color:var(--muted);line-height:1.5}.service-view h3{font:700 15px Plus Jakarta Sans;color:var(--navy);margin:25px 0 12px}.nominal-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;gap:10px}.nominal-grid button{background:white;border:1px solid var(--line);border-radius:10px;padding:13px;text-align:left;color:var(--ink)}.nominal-grid button.selected{border:2px solid var(--blue);background:#f3f9ff}.nominal-grid b,.nominal-grid span{display:block}.nominal-grid b{font-size:13px}.nominal-grid span{font-size:12px;color:#5275a4;margin-top:5px}.primary{width:100%;height:51px;border:0;border-radius:11px;background:var(--blue);color:white;font:700 14px DM Sans;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:28px}.primary:disabled{background:#bac8dc}.order-card{border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:26px}.order-card div{display:flex;justify-content:space-between;gap:15px;padding:7px 0;font-size:13px}.order-card span{color:var(--muted)}.order-card b{font-weight:600;text-align:right}.order-card hr{border:0;border-top:1px solid var(--line);margin:10px 0}.order-card .total b{color:var(--blue);font-size:16px}.gateway-warning{display:flex;gap:10px;color:#876200;background:#fff9e8;border:1px solid #f9edbf;padding:13px;border-radius:11px;margin-top:16px}.gateway-warning p{margin:0;font-size:12px;line-height:1.45}@media(min-width:600px){.shell{margin:30px auto;min-height:calc(100vh - 60px);border-radius:22px}.bottom-nav{bottom:30px;border-radius:0 0 22px 22px}}@media(max-width:350px){.shell{padding-inline:15px}.welcome h1{font-size:24px}.category-grid{gap:7px}.category{min-height:105px}.category small{font-size:8px}}.catalog-list{display:grid;grid-gap:10px;gap:10px}.catalog-list>article,.catalog-list>button{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;color:var(--ink)}.catalog-list>button:active{border-color:var(--blue);background:#f3f9ff}.catalog-list b,.catalog-list small{display:block}.catalog-list b{font-size:13px}.catalog-list small{color:var(--muted);font-size:11px;margin-top:4px}.service-view label+label{margin-top:16px}.link-button{display:block;margin:15px auto;border:0;background:transparent;color:var(--blue);font:600 13px DM Sans}.catalog-list .primary{margin-top:4px}:root[data-theme=dark]{--blue:#45a5ff;--navy:#e5efff;--ink:#e6ecf7;--muted:#9baac5;--line:#263650;--soft:#18253a;--success:#33d394}html[data-theme=dark] .bottom-nav,html[data-theme=dark] .service-view,html[data-theme=dark] .shell,html[data-theme=dark] body{background:#0c1422}html[data-theme=dark] .catalog-list>article,html[data-theme=dark] .catalog-list>button,html[data-theme=dark] .category,html[data-theme=dark] .order-card{background:#121f32;color:var(--ink)}.header-actions{display:flex;gap:8px}.notification-popup{position:absolute;right:20px;top:68px;z-index:10;width:235px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--soft);box-shadow:0 10px 30px #0003}.notification-popup b,.notification-popup small{display:block}.notification-popup small{font-size:11px;color:var(--muted);margin-top:7px}.notification-popup button{border:0;background:transparent;color:var(--blue);padding:8px 0 0;font:600 12px DM Sans}.service-view select{display:block;width:100%;height:50px;border:1px solid var(--line);border-radius:11px;margin-top:8px;padding:0 13px;background:transparent;color:var(--ink);font:14px DM Sans}.support-link{display:block;text-decoration:none;background:var(--soft);padding:15px;border:1px solid var(--line);border-radius:12px;color:var(--ink)}.support-link b,.support-link small{display:block}.support-link small{margin-top:4px;color:var(--muted);font-size:11px}.outline-button{width:100%;height:51px;margin-top:12px;border:1px solid var(--blue);border-radius:11px;background:transparent;color:var(--blue);font:700 14px DM Sans}.operator-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:11px;gap:11px;margin-top:22px}.operator-grid button{min-height:86px;padding:13px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink)}.operator-grid b,.operator-grid small{display:block}.operator-grid b{font:700 15px Plus Jakarta Sans}.operator-grid small{margin-top:10px;color:var(--blue);font-size:11px;display:flex;align-items:center}.status-card{display:grid;place-items:center;text-align:center;grid-gap:8px;gap:8px;margin-top:22px;padding:24px 18px;border:1px solid #bfead6;border-radius:14px;background:#edfdf5;color:#16865b}.status-card b{font:700 16px Plus Jakarta Sans}.status-card p,.status-card small{margin:0;font-size:12px;line-height:1.5}.status-card small{color:#4f806c}@media(prefers-color-scheme:dark){html[data-theme=dark] .status-card{background:#12352a;border-color:#235741;color:#8de6b9}}.loading-card{display:flex;align-items:center;gap:10px;margin-top:18px;padding:13px;border:1px solid #cfe2fb;border-radius:11px;background:#f3f8ff;color:#3872ac;font-size:12px}.spinner{display:inline-block;width:16px;height:16px;flex:none;border:2px solid;border-right:2px solid transparent;border-radius:50%;animation:zulpay-spin .7s linear infinite}@keyframes zulpay-spin{to{transform:rotate(1turn)}}html[data-theme=dark] .loading-card{background:#142842;border-color:#294c75;color:#9dc9ff}.manual-card{margin-top:15px;padding:14px;border:1px solid #f0d7a4;border-radius:12px;background:#fff9e9;color:#805f16}.manual-card b{font-size:13px}.manual-card p{margin:5px 0 0;font-size:12px;line-height:1.45}@media(prefers-color-scheme:dark){html[data-theme=dark] .manual-card{background:#342b16;border-color:#6a5728;color:#f5db8d}}.result-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#091b3c80}.result-popup{width:min(340px,100%);display:grid;justify-items:center;grid-gap:10px;gap:10px;padding:25px 20px;border-radius:16px;background:#fff;color:var(--ink);text-align:center;box-shadow:0 20px 45px #06142d44}.result-popup b{font:700 17px Plus Jakarta Sans}.result-popup p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.result-popup .spinner{width:26px;height:26px;color:var(--blue);border-width:3px}.result-popup.success b{color:#16865b}.result-popup.error b{color:#cf3851}.result-popup button{min-width:100px;border:0;border-radius:9px;background:var(--blue);color:#fff;padding:9px 14px;font:700 13px DM Sans}.primary .spinner{width:15px;height:15px}html[data-theme=dark] .result-popup{background:#142136;color:var(--ink)}.qris-card{display:grid;justify-items:center;grid-gap:10px;gap:10px;margin-top:20px;padding:20px;border:1px solid #bcdcff;border-radius:16px;background:#f6fbff;text-align:center}.qris-card img{width:min(260px,100%);aspect-ratio:1;object-fit:contain;background:#fff;border-radius:10px;padding:8px}.qris-card b{font:700 15px Plus Jakarta Sans;color:var(--navy)}.qris-card small{font-size:11px;color:var(--muted);line-height:1.45}@media(prefers-color-scheme:dark){html[data-theme=dark] .qris-card{background:#12263f;border-color:#294e78}}.profile-home{padding-bottom:115px}.profile-identity{display:flex;gap:14px;align-items:center;padding:28px 0 24px;border-bottom:1px solid var(--line)}.about-logo,.avatar{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0a8dff,#164dc2);color:#fff;font:800 25px Plus Jakarta Sans}.profile-identity h1{margin:0;color:var(--navy);font:700 19px Plus Jakarta Sans}.profile-identity p{margin:3px 0;color:var(--muted);font-size:12px}.profile-identity button{border:0;background:transparent;color:var(--blue);font:700 12px DM Sans;padding:6px 0}.profile-label{margin:24px 0 7px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.8px}.profile-menu{border-top:1px solid var(--line)}.profile-menu button{width:100%;min-height:54px;display:flex;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--navy);text-align:left;padding:0 2px}.profile-menu button span{flex:1 1;font:600 14px DM Sans}.profile-menu button svg:first-child{color:var(--blue)}.profile-menu button.danger,.profile-menu button.danger svg:first-child{color:#d64a5c}.danger-button,.logout-button{width:100%;height:50px;margin-top:23px;border-radius:11px;background:transparent;font:700 14px DM Sans}.logout-button{border:1px solid #e78b96;color:#c83c50}.danger-button{border:0;background:#d64a5c;color:#fff}.profile-page{max-width:480px;min-height:100vh;margin:0 auto;padding:24px 20px 40px;background:#fff;color:var(--ink)}.profile-page header{margin-bottom:25px}.profile-page h1{margin:0;color:var(--navy);font:700 24px Plus Jakarta Sans}.profile-page h3{margin:24px 0 9px;color:var(--navy);font:700 16px Plus Jakarta Sans}.profile-page label{display:block;margin-top:17px;color:#536689;font-size:12px;font-weight:600}.profile-page input,.profile-page select,.profile-page textarea{display:block;width:100%;min-height:48px;margin-top:7px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:14px DM Sans;outline-color:var(--blue)}.profile-page textarea{height:106px;resize:vertical}.setting-list{margin-top:18px;border-top:1px solid var(--line)}.setting-list>div,.toggle-row{min-height:55px;display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0!important;border-bottom:1px solid var(--line);color:var(--ink)!important;font-size:13px!important}.setting-list b,.setting-list span{font-size:12px;color:var(--muted)}.toggle-row input{display:block;width:42px;min-height:24px;margin:0;accent-color:var(--blue)}.check{display:flex!important;align-items:center;gap:8px}.check input{width:auto;min-height:0;margin:0}.faq{padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}.faq b{font-size:13px;color:var(--navy)}.faq p{margin:4px 0 13px;color:var(--muted);font-size:12px;line-height:1.45}.faq p:last-child{margin-bottom:0}.danger-note{padding:13px;border-radius:11px;background:#fff1f3;color:#9b3e4b;font-size:12px;line-height:1.5}.about-logo{margin:10px auto 15px}.profile-page>h3,.profile-page>p{text-align:left}.profile-page .about-logo+h3{text-align:center}.profile-page .about-logo+h3+p{text-align:center;color:var(--blue)}html[data-theme=dark] .profile-page{background:#0c1422}html[data-theme=dark] .profile-menu button{color:var(--ink)}.otp-options{display:grid;grid-gap:10px;gap:10px;margin-top:18px}.otp-options button{padding:15px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink)}.otp-options button.selected{border:2px solid var(--blue);background:#f3f9ff}.otp-options b,.otp-options small{display:block}.otp-options b{font:700 14px Plus Jakarta Sans}.otp-options small{margin-top:4px;color:var(--muted);font-size:11px}html[data-theme=dark] .otp-options button.selected{background:#142842}.filter-tabs{display:flex;gap:8px;overflow:auto;margin:15px 0}.filter-tabs button{white-space:nowrap;border:1px solid var(--line);border-radius:18px;background:transparent;color:var(--muted);padding:7px 11px;font:600 12px DM Sans}.filter-tabs button.active{background:#edf6ff;border-color:#9bcfff;color:var(--blue)}.transaction-list{border-top:1px solid var(--line)}.transaction-list button{display:flex;width:100%;justify-content:space-between;gap:12px;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left}.transaction-list b,.transaction-list small{display:block}.transaction-list small{margin-top:3px;font-size:11px;color:var(--muted)}.transaction-list aside{text-align:right}.transaction-list aside>b{font-size:12px;white-space:nowrap}.status{display:inline-block!important;margin-top:7px;padding:3px 7px;border-radius:8px;background:#fff4da;color:#9a6b00;font-size:10px!important}.status.SUCCESS{background:#e8f8ef;color:#16865b}.status.PROCESSING{background:#eaf4ff;color:#1674c7}.status.CANCELLED,.status.EXPIRED,.status.FAILED{background:#fff0f1;color:#c64556}.empty-state{text-align:center;padding:32px 10px}.empty-state b{display:block}.empty-state .primary{max-width:240px;margin:18px auto}.timeline{display:grid;grid-gap:4px;gap:4px;margin-top:22px;padding-left:14px;border-left:2px solid #cde3fb}.timeline b{font-size:13px;color:var(--navy)}.timeline span{margin-bottom:12px;color:var(--muted);font-size:11px}