:root{--bg:#eff4ff;--bg2:#e5edff;--surface:#fff;--surface2:#f5f8ff;--surface3:#ebf0fc;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--primary:#2563eb;--primary-dark:#1d4ed8;--primary-deep:#1e40af;--primary-light:#60a5fa;--primary-pale:#eff6ff;--primary-pale2:#dbeafe;--sky:#0ea5e9;--indigo:#6366f1;--success:#10b981;--success-pale:#dcfce7;--danger:#ef4444;--danger-pale:#fee2e2;--warning:#f59e0b;--warning-pale:#fef9c3;--text-main:#0b1426;--text-body:#1e293b;--text-sub:#475569;--text-muted:#94a3b8;--text-white:#fff;--border:#e2e8f0;--border2:#cbd5e1;--shadow-xs:0 1px 3px rgba(15,23,42,.06);--shadow-sm:0 2px 10px rgba(37,99,235,.08);--shadow-md:0 6px 22px rgba(37,99,235,.13);--shadow-lg:0 12px 40px rgba(37,99,235,.17);--shadow-card:0 2px 12px rgba(15,23,42,.06),0 0 0 1px rgba(37,99,235,.06);--r-sm:8px;--r-md:14px;--r-lg:18px;--r-xl:22px;--r-2xl:28px;--r-full:9999px;--nav-h:68px;--header-h:60px}*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{font-family:Plus Jakarta Sans,-apple-system,sans-serif;background:var(--bg);color:var(--text-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;max-width:480px;margin:0 auto}.app-shell,body{min-height:100vh}.app-shell{display:flex;flex-direction:column;padding-bottom:var(--nav-h)}.page-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:hsla(0,0%,100%,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 18px;height:var(--header-h);display:flex;align-items:center;gap:14px}.page-header h1{font-size:17px;font-weight:800;color:var(--text-main);flex:1 1}.back-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text-main);cursor:pointer;font-size:15px;text-decoration:none;transition:all .2s;flex-shrink:0}.back-btn:hover{background:var(--surface3)}.hero-header{background:linear-gradient(145deg,#1e3a8a,#1d4ed8 40%,#2563eb 70%,#3b82f6);padding:20px 20px 28px;position:relative;overflow:hidden}.hero-header:before{top:-40px;right:-40px;width:160px;height:160px;background:hsla(0,0%,100%,.06)}.hero-header:after,.hero-header:before{content:"";position:absolute;border-radius:50%;pointer-events:none}.hero-header:after{bottom:-30px;left:-20px;width:120px;height:120px;background:hsla(0,0%,100%,.04)}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:var(--nav-h);background:hsla(0,0%,100%,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:100;padding:0 8px;box-shadow:0 -4px 24px rgba(15,23,42,.08)}.bottom-nav,.nav-item{display:flex;align-items:center}.nav-item{flex:1 1;flex-direction:column;justify-content:center;gap:4px;padding:8px 4px;cursor:pointer;text-decoration:none;color:var(--text-muted);transition:all .2s;border-radius:var(--r-lg);position:relative}.nav-item.active{color:var(--primary)}.nav-item.active .nav-icon{background:var(--primary-pale2);color:var(--primary)}.nav-icon{width:40px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;transition:all .2s}.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.3px}.nav-badge{position:absolute;top:6px;right:calc(50% - 18px);width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid #fff}.wrap{padding:16px 16px 8px;flex:1 1;animation:fadeIn .22s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--surface);border-radius:var(--r-xl);padding:18px;margin-bottom:14px;border:1px solid var(--border);box-shadow:var(--shadow-card)}.card,.w-card{position:relative;overflow:hidden}.w-card{border-radius:var(--r-xl);padding:20px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}.w-card.main{background:linear-gradient(140deg,#1e40af,#2563eb,#3b82f6);box-shadow:0 8px 28px rgba(29,78,216,.35)}.w-card.nokos{background:linear-gradient(140deg,#0e7490,#0891b2,#06b6d4);box-shadow:0 8px 28px rgba(14,116,144,.32)}.w-card.prem{background:linear-gradient(140deg,#4338ca,#6366f1,#818cf8);box-shadow:0 8px 28px rgba(67,56,202,.32)}.w-card:before{content:"";position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;background:hsla(0,0%,100%,.1);pointer-events:none}.w-label{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:hsla(0,0%,100%,.7);text-transform:uppercase}.w-val{font-size:24px;font-weight:900;color:#fff;letter-spacing:-.5px;margin:4px 0}.w-btn{display:inline-flex;align-items:center;gap:5px;background:hsla(0,0%,100%,.2);border:1px solid hsla(0,0%,100%,.28);color:#fff;border-radius:var(--r-full);padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s;align-self:flex-start}.w-btn:hover{background:hsla(0,0%,100%,.3)}.grid-2{grid-template-columns:1fr 1fr;grid-gap:10px}.grid-2,.grid-3{display:grid;gap:10px}.grid-3{grid-template-columns:1fr 1fr 1fr;grid-gap:10px}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 24px;border:none;border-radius:var(--r-full);font-family:inherit;font-weight:700;font-size:14.5px;background:linear-gradient(135deg,var(--blue-700),var(--blue-500));color:#fff;cursor:pointer;transition:all .22s ease;text-decoration:none;box-shadow:0 4px 16px rgba(37,99,235,.3);margin-bottom:10px;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,hsla(0,0%,100%,.14),transparent);pointer-events:none}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.4)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn.ghost{background:transparent;border:1.5px solid var(--blue-200);color:var(--primary);box-shadow:none}.btn.ghost:after{display:none}.btn.ghost:hover{background:var(--blue-50)}.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 14px rgba(239,68,68,.25)}.btn.success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px rgba(16,185,129,.25)}.btn.sm{padding:9px 18px;font-size:12.5px}.btn.sm,.btn.xs{width:auto;margin-bottom:0}.btn.xs{padding:6px 12px;font-size:11.5px}.inp{width:100%;padding:13px 16px;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r-md);font-size:14px;color:var(--text-main);outline:none;transition:all .2s;margin-bottom:12px;font-family:inherit;font-weight:500}.inp::placeholder{color:var(--text-muted);font-weight:400}.inp:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.1)}select.inp option{background:#fff;color:var(--text-main)}textarea.inp{resize:vertical;min-height:80px}.inp-wrap{position:relative}.inp-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:15px}.inp-wrap .inp{padding-left:40px}.list-item{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:var(--r-md);padding:14px 16px;margin-bottom:8px;border:1px solid var(--border);text-decoration:none;color:inherit;transition:all .2s;cursor:pointer;box-shadow:var(--shadow-xs)}.list-item:hover{border-color:var(--blue-200);transform:translateY(-1px);box-shadow:var(--shadow-md)}.list-item:active{transform:scale(.985)}.ib{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px}.ib-blue{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.3)}.ib-cyan{background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff;box-shadow:0 3px 10px rgba(14,165,233,.3)}.ib-green{background:linear-gradient(135deg,#10b981,#34d399);color:#fff;box-shadow:0 3px 10px rgba(16,185,129,.3)}.ib-purple{background:linear-gradient(135deg,#7c3aed,#8b5cf6);color:#fff;box-shadow:0 3px 10px rgba(124,58,237,.3)}.ib-orange{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;box-shadow:0 3px 10px rgba(245,158,11,.3)}.ib-red{background:linear-gradient(135deg,#ef4444,#f87171);color:#fff;box-shadow:0 3px 10px rgba(239,68,68,.3)}.ib-indigo{background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;box-shadow:0 3px 10px rgba(99,102,241,.3)}.ib-teal{background:linear-gradient(135deg,#14b8a6,#2dd4bf);color:#fff;box-shadow:0 3px 10px rgba(20,184,166,.3)}.ib-pink{background:linear-gradient(135deg,#ec4899,#f472b6);color:#fff;box-shadow:0 3px 10px rgba(236,72,153,.3)}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-full);font-size:11.5px;font-weight:700;border:1px solid transparent}.badge-success{background:var(--success-pale);color:#065f46;border-color:#a7f3d0}.badge-danger{background:var(--danger-pale);color:#991b1b;border-color:#fca5a5}.badge-warning{background:var(--warning-pale);color:#92400e;border-color:#fcd34d}.badge-blue{background:var(--blue-50);color:var(--primary);border-color:var(--blue-200)}.badge-purple{background:#ede9fe;color:#5b21b6;border-color:#c4b5fd}.badge-gray{background:#f8fafc;color:var(--text-sub);border-color:var(--border)}.section-title{font-size:15px;font-weight:800;color:var(--text-main);margin-bottom:12px;display:flex;align-items:center;gap:8px}.amount-pills{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-bottom:12px}.amount-pill{padding:12px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--surface);text-align:center;font-size:13.5px;font-weight:700;color:var(--text-body);cursor:pointer;transition:all .18s}.amount-pill:hover{border-color:var(--blue-300);background:var(--blue-50)}.amount-pill.active{border-color:var(--primary);background:var(--primary-pale2);color:var(--primary-dark)}.inv-wrap{text-align:center;padding:20px 0 16px}.inv-status-icon{font-size:52px;margin-bottom:10px}.inv-amount{font-size:32px;font-weight:900;color:var(--text-main);letter-spacing:-1px}.inv-id{font-size:11px;color:var(--text-muted);margin-top:4px;font-family:monospace}.inv-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed var(--border);font-size:13.5px}.inv-row:last-child{border-bottom:none}.inv-row .label{color:var(--text-sub);font-weight:500}.inv-row .val{font-weight:700;color:var(--text-main);text-align:right;max-width:60%;word-break:break-all}.qr-wrap{background:#fff;border:2px solid var(--border);border-radius:var(--r-xl);padding:16px;display:flex;align-items:center;justify-content:center;margin:12px 0}.qr-wrap img{width:200px;height:200px;border-radius:8px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px;margin-bottom:6px}.service-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-decoration:none;color:var(--text-body);transition:all .2s;box-shadow:var(--shadow-xs)}.service-item:hover{border-color:var(--blue-200);transform:translateY(-2px);box-shadow:var(--shadow-md)}.service-item:active{transform:scale(.96)}.service-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px}.service-label{font-size:11px;font-weight:700;text-align:center;line-height:1.3;color:var(--text-body)}.tabs{display:flex;gap:4px;background:var(--surface3);padding:4px;margin-bottom:16px}.tab-btn,.tabs{border-radius:var(--r-full)}.tab-btn{flex:1 1;padding:9px;border:none;background:transparent;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-sub);cursor:pointer;transition:all .2s}.tab-btn.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(37,99,235,.12)}.auth-page{min-height:100vh;background:linear-gradient(160deg,#060f2e,#0d1f5c 35%,#1240ab 65%,#1a56db);display:flex;align-items:flex-end;justify-content:center;padding:0}.auth-card{background:#fff;border-radius:32px 32px 0 0;width:100%;max-width:480px;padding:32px 24px 40px;box-shadow:0 -16px 60px rgba(0,0,0,.3);min-height:65vh}.auth-logo{text-align:center;padding:40px 0 20px;color:#fff}.auth-logo-icon{width:76px;height:76px;border-radius:22px;background:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1.5px solid hsla(0,0%,100%,.3);display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 16px;box-shadow:0 16px 48px rgba(0,0,0,.35);animation:pk-float 3s ease-in-out infinite}@keyframes pk-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.auth-logo h1{font-size:26px;font-weight:900;letter-spacing:1.5px}.auth-logo p{font-size:13px;color:hsla(0,0%,100%,.6);margin-top:4px;letter-spacing:1px}.banner-slider{border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px;position:relative}.banner-slider img{width:100%;height:140px;object-fit:cover;display:block}.trending-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}.trending-item:last-child{border-bottom:none}.trending-rank{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0}.rank-1{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff}.rank-2,.rank-3{background:var(--surface3);color:var(--text-sub)}.phone-field{position:relative}.carrier-badge{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:var(--blue-50);color:var(--primary);border:1px solid var(--blue-200);padding:3px 10px;font-size:11px;font-weight:700}.carrier-badge,.toast{border-radius:var(--r-full)}.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:9999;background:#1e293b;color:#fff;padding:10px 20px;font-size:13.5px;font-weight:600;box-shadow:0 8px 32px rgba(0,0,0,.25);display:flex;align-items:center;gap:8px;animation:toastIn .3s ease;white-space:nowrap;max-width:calc(100vw - 40px)}.toast.success{background:linear-gradient(135deg,#10b981,#059669)}.toast.error{background:linear-gradient(135deg,#ef4444,#dc2626)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}.ewallet-logo{width:52px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;letter-spacing:-.3px;flex-shrink:0}.logo-dana{background:#118eea;color:#fff}.logo-ovo{background:#4c3494;color:#fff}.logo-gopay{background:#00aed6;color:#fff}.logo-shoppe{background:#ee4d2d;color:#fff}.logo-link{background:#ed2026;color:#fff}.acc-card{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1.5px solid var(--blue-200);border-radius:var(--r-xl);padding:16px 18px;margin-bottom:10px}.acc-label{font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.acc-val{font-size:15px;font-weight:800;color:var(--text-main);word-break:break-all}.spinner{width:24px;height:24px;border:2.5px solid hsla(0,0%,100%,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(1turn)}}.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}.empty-state .icon{font-size:48px;margin-bottom:12px;opacity:.5}.empty-state h3{font-size:15px;font-weight:700;color:var(--text-sub);margin-bottom:6px}.empty-state p{font-size:13px}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}.modal-sheet{background:#fff;border-radius:28px 28px 0 0;width:100%;max-width:480px;padding:24px 20px 36px;max-height:90vh;overflow-y:auto;animation:slideUp .28s cubic-bezier(.34,1.56,.64,1)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-handle{width:40px;height:4px;border-radius:4px;background:var(--border2);margin:0 auto 20px}.info-box{background:var(--blue-50);border:1px solid var(--blue-200);border-radius:var(--r-md);padding:12px 14px;font-size:12.5px;color:var(--primary-dark);margin-bottom:14px;line-height:1.6}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-xs)}.stat-label{font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-val{font-size:20px;font-weight:900;color:var(--text-main)}.stat-sub{font-size:11px;color:var(--text-muted)}.cs-fab{position:fixed;bottom:calc(var(--nav-h) + 16px);right:16px;width:48px;height:48px;background:linear-gradient(135deg,#25d366,#128c7e);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:0 6px 24px rgba(37,211,102,.4);cursor:pointer;z-index:90;transition:all .2s;text-decoration:none}.cs-fab:hover{transform:scale(1.08)}.cs-fab:active{transform:scale(.95)}.copy-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surface3);border:1px solid var(--border);border-radius:var(--r-full);padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--text-sub);cursor:pointer;transition:all .2s;font-family:inherit}.copy-btn:hover{background:var(--blue-50);color:var(--primary);border-color:var(--blue-200)}