:root{--bg:#f6f7fb;--surface:#fff;--text:#1a1a2e;--muted:#6b7280;--border:#ececf3;--primary:#4f46e5;--primary-dark:#4338ca;--primary-soft:#eef2ff;--danger:#ef4444;--shadow-sm:0 1px 3px rgba(16,24,40,.06);--shadow-md:0 8px 24px rgba(16,24,40,.1);--shadow-lg:0 24px 60px rgba(16,24,40,.18);--radius:16px;--header-h:64px}*{box-sizing:border-box;margin:0;padding:0}body,html{max-width:100%;overflow-x:clip}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}button{cursor:pointer;border:none;background:none;color:inherit}button,input{font-family:inherit}.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}.header{position:-webkit-sticky;position:sticky;top:0;z-index:50;height:var(--header-h);background:hsla(0,0%,100%,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}.header-inner{height:100%;justify-content:space-between;gap:12px}.brand,.header-inner{display:flex;align-items:center}.brand{gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;box-shadow:var(--shadow-sm)}.brand-name span{color:var(--primary)}.header-actions{display:flex;align-items:center;gap:6px}.icon-btn{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--text);transition:background .18s ease,transform .18s ease}.icon-btn:hover{background:var(--primary-soft);color:var(--primary)}.icon-btn:active{transform:scale(.92)}.icon-btn svg{width:23px;height:23px}.user-chip{display:flex;align-items:center;gap:8px;padding:0 6px 0 14px;height:44px;border-radius:12px;font-size:14px;font-weight:600;transition:background .18s ease}.user-chip:hover{background:var(--primary-soft)}.user-chip .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#8b5cf6);place-items:center;font-size:13px}.cart-badge,.user-chip .avatar{color:#fff;display:grid;font-weight:700}.cart-badge{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);font-size:11px;place-items:center;border:2px solid var(--surface);animation:pop .28s ease}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}.cart-bump{animation:cartBump .5s cubic-bezier(.36,.07,.19,.97);color:var(--primary)}@keyframes cartBump{0%{transform:scale(1) rotate(0deg)}20%{transform:scale(1.2) rotate(-12deg)}40%{transform:scale(1.18) rotate(11deg)}60%{transform:scale(1.12) rotate(-7deg)}80%{transform:scale(1.06) rotate(4deg)}to{transform:scale(1) rotate(0deg)}}.hero{position:relative;overflow:hidden;border-radius:24px;margin-top:24px;padding:48px 40px;color:#fff;background:radial-gradient(120% 140% at 0 0,#6366f1 0,#8b5cf6 45%,#ec4899 100%);box-shadow:var(--shadow-md)}.hero h1{font-size:clamp(26px,5vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:16ch}.hero p{margin-top:14px;font-size:clamp(14px,2.4vw,17px);opacity:.92;max-width:44ch}.hero-cta{margin-top:24px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--primary-dark);font-weight:700;padding:12px 22px;border-radius:999px;font-size:15px;transition:transform .18s ease,box-shadow .18s ease}.hero-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22)}.hero-blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.25;background:#fff;pointer-events:none}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:40px 0 18px;gap:12px}.section-head h2{font-size:clamp(20px,3.5vw,26px);font-weight:800;letter-spacing:-.02em}.section-head p{color:var(--muted);font-size:14px}.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:8px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--muted);transition:all .18s ease;white-space:nowrap}.chip:hover{color:var(--primary)}.chip.active,.chip:hover{border-color:var(--primary)}.chip.active{background:var(--primary);color:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-gap:18px;gap:18px;padding-bottom:60px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease;animation:rise .45s ease both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.card-media{position:relative;aspect-ratio:4/3;display:grid;place-items:center;font-size:64px;overflow:hidden}.card-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.05))}.card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.oos-badge{position:absolute;top:10px;left:10px;z-index:2;background:rgba(17,24,39,.82);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.card-oos .card-media{filter:grayscale(.7);opacity:.75}.restock-label{margin-top:auto;text-align:center;font-size:13px;font-weight:700;color:var(--muted);background:#f3f4f6;border-radius:11px;padding:11px 10px}.card-cat{position:absolute;top:10px;left:10px;background:hsla(0,0%,100%,.9);color:var(--text);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.card-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1 1}.card-name{font-weight:700;font-size:15px;letter-spacing:-.01em}.card-desc{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px}.card-price{font-weight:800;font-size:16px}.add-btn{display:inline-flex;align-items:center;gap:6px;background:var(--primary);color:#fff;font-weight:700;font-size:13px;padding:9px 14px;border-radius:11px;transition:background .18s ease,transform .18s ease}.add-btn:hover{background:var(--primary-dark)}.add-btn:active{transform:scale(.94)}.add-btn.added{background:#10b981}.add-btn svg{width:16px;height:16px}.overlay{position:fixed;inset:0;z-index:100;background:rgba(17,24,39,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .2s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.auth-wrap{position:fixed;inset:0;z-index:101;display:grid;place-items:center;padding:16px;pointer-events:none}.auth-card{pointer-events:auto;width:100%;max-width:400px;background:var(--surface);border-radius:22px;padding:28px 26px 26px;box-shadow:var(--shadow-lg);animation:zoom .28s cubic-bezier(.16,1,.3,1)}@keyframes zoom{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.auth-head h3{font-size:22px;font-weight:800;letter-spacing:-.02em}.close-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:background .18s ease,color .18s ease}.close-btn:hover{background:#f3f4f6;color:var(--text)}.auth-sub{color:var(--muted);font-size:14px}.auth-sub,.tabs{margin-bottom:20px}.tabs{display:flex;background:#f3f4f6;border-radius:12px;padding:4px}.tab{flex:1 1;padding:9px;border-radius:9px;font-size:14px;font-weight:700;color:var(--muted);transition:all .2s ease}.tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.field input{width:100%;height:46px;border:1.5px solid var(--border);border-radius:12px;padding:0 14px;font-size:15px;background:#fafafe;transition:border .18s ease,box-shadow .18s ease,background .18s ease;outline:none}.field input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px var(--primary-soft)}.remember{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:2px 0 16px}.remember input{position:absolute;opacity:0;width:0;height:0}.remember .box{width:22px;height:22px;flex:0 0 auto;border-radius:7px;border:1.5px solid var(--border);background:#fafafe;display:grid;place-items:center;transition:background .18s ease,border-color .18s ease}.remember .box:after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .18s cubic-bezier(.16,1,.3,1);margin-top:-2px}.remember input:checked+.box{background:var(--primary);border-color:var(--primary)}.remember input:checked+.box:after{transform:rotate(45deg) scale(1)}.remember input:focus-visible+.box{box-shadow:0 0 0 4px var(--primary-soft)}.submit-btn{width:100%;height:48px;margin-top:6px;background:var(--primary);color:#fff;font-weight:700;font-size:15px;border-radius:12px;transition:background .18s ease,transform .12s ease}.submit-btn:hover{background:var(--primary-dark)}.submit-btn:active{transform:scale(.98)}.submit-btn:disabled{opacity:.6;cursor:progress}.shop-error{max-width:420px;margin:6vh auto 60px;text-align:center;color:var(--muted)}.shop-error .big{font-size:64px;margin-bottom:8px}.shop-error h4{color:var(--text);font-size:20px;font-weight:800;margin-bottom:6px}.shop-error .hint{margin-top:12px;font-size:13px}.shop-error code{background:#f3f4f6;padding:1px 6px;border-radius:6px;font-size:12px}.sk-block{background:linear-gradient(100deg,#eceef3 30%,#f6f7fb 50%,#eceef3 70%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}.sk-line.w40{width:40%}.sk-line.w30{width:30%}.auth-foot{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}.auth-foot button{color:var(--primary);font-weight:700}.profile{display:flex;align-items:center;gap:14px;padding:16px;margin:6px 0 16px;background:linear-gradient(135deg,var(--primary-soft),#faf5ff);border:1px solid var(--border);border-radius:16px}.profile-avatar{width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary),#8b5cf6);box-shadow:var(--shadow-sm)}.profile-id{min-width:0;flex:1 1}.profile-email{font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-uid{display:flex;align-items:center;gap:5px;margin-top:3px;max-width:100%;font-size:10.5px;font-weight:400;color:var(--muted);letter-spacing:.02em;padding:0;background:transparent;transition:color .16s ease}.profile-uid:hover{color:var(--primary)}.profile-uid .uid-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.profile-uid svg{flex:0 0 auto}.account-action{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:1.5px solid var(--border);border-radius:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.account-action:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)}.account-action-ic{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;color:var(--primary);background:var(--primary-soft)}.account-action-txt{flex:1 1;text-align:left;font-size:15px;font-weight:700}.account-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;height:48px;border-radius:14px;font-size:15px;font-weight:700;color:var(--danger);background:#fef2f2;transition:background .16s ease,transform .12s ease}.account-logout:hover{background:#fee2e2}.account-logout:active{transform:scale(.98)}.history-screen{position:fixed;inset:0;z-index:115;background:var(--bg);display:flex;flex-direction:column;animation:slideUp .34s cubic-bezier(.16,1,.3,1)}.history-top{height:var(--header-h);flex:0 0 auto;justify-content:space-between;gap:12px;padding:0 18px;background:var(--surface);border-bottom:1px solid var(--border)}.history-top,.history-top-left{display:flex;align-items:center}.history-top-left{gap:10px}.history-top h3{font-size:16px;font-weight:800;letter-spacing:-.01em}.history-body{flex:1 1;overflow-y:auto;padding:18px}.history-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px}.hist-card{display:flex;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm);animation:rise .35s ease both}.hist-index{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--primary);background:var(--primary-soft)}.hist-fields{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:7px}.hist-field{display:flex;align-items:center;gap:6px;font-size:14px;min-width:0}.hist-label{flex:0 0 76px;font-weight:600}.hist-colon,.hist-label{color:var(--muted)}.hist-value{flex:1 1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hist-value.mono{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;letter-spacing:.02em}.hist-value.muted{color:var(--muted);font-weight:500;font-style:italic}.hist-field.wrap{align-items:flex-start}.hist-field.wrap .hist-colon,.hist-field.wrap .hist-label{margin-top:1px}.hist-value.wrap{white-space:normal;overflow:visible;text-overflow:clip;text-align:justify;word-break:break-word;line-height:1.45}.hist-copy{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:background .16s ease,color .16s ease}.hist-copy:hover{background:var(--primary-soft);color:var(--primary)}.hist-card.skeleton{animation:none}.sk,.sk-line{background:linear-gradient(100deg,#eceef3 30%,#f6f7fb 50%,#eceef3 70%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:8px}.hist-index.sk{color:transparent}.sk-line{height:13px;border-radius:6px}.sk-line.w90{width:90%}.sk-line.w80{width:80%}.sk-line.w70{width:70%}.sk-line.w60{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.history-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}.page-info{font-size:13px;color:var(--muted);font-weight:600}.pager{display:flex;align-items:center;gap:6px}.pager-btn,.pager-num{height:36px;min-width:36px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--text);border:1px solid var(--border);background:var(--surface);transition:all .16s ease}.pager-btn:hover:not(:disabled),.pager-num:hover{border-color:var(--primary);color:var(--primary)}.pager-btn:disabled{opacity:.4;cursor:not-allowed}.pager-num.active{background:var(--primary);border-color:var(--primary);color:#fff}.support-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}.support-btn{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.support-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.support-btn .support-ico{width:46px;height:46px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;color:#fff}.support-btn.wa{border-color:#25d36633}.support-btn.wa:hover{border-color:#25d366}.support-btn.wa .support-ico{background:#25d366}.support-btn.tg{border-color:#229ed933}.support-btn.tg:hover{border-color:#229ed9}.support-btn.tg .support-ico{background:#229ed9}.support-btn .support-txt{display:flex;flex-direction:column;line-height:1.3}.support-btn .support-txt strong{font-size:15px;font-weight:700}.support-btn .support-txt small{font-size:12.5px;color:var(--muted)}.cart-screen{position:fixed;inset:0;z-index:110;background:var(--surface);display:flex;flex-direction:column;animation:slideUp .32s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.cart-top{height:var(--header-h);flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--border)}.cart-top h3{font-size:18px;font-weight:800}.cart-top .count-tag{font-size:13px;color:var(--muted);font-weight:600}.cart-body{flex:1 1;overflow-y:auto;padding:16px 20px}.cart-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}.cart-item{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;animation:rise .3s ease both}.cart-thumb{width:66px;height:66px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-size:32px}.cart-info{flex:1 1;min-width:0}.cart-info .nm{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cart-info .pr{color:var(--primary);font-weight:700;font-size:14px;margin-top:2px}.qty{display:inline-flex;align-items:center;gap:4px;margin-top:8px;background:#f3f4f6;border-radius:9px;padding:3px;width:-moz-fit-content;width:fit-content}.qty button{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:15px;line-height:1;font-weight:700;color:var(--text);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .12s ease}.qty button:active{transform:scale(.88)}.qty span{min-width:22px;text-align:center;font-weight:700;font-size:13px}.trash-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:background .18s ease,color .18s ease}.trash-btn:hover{background:#fef2f2;color:var(--danger)}.cart-empty{max-width:360px;margin:8vh auto 0;text-align:center;color:var(--muted)}.cart-empty .big{font-size:72px;margin-bottom:10px}.cart-empty h4{color:var(--text);font-size:20px;font-weight:800;margin-bottom:6px}.cart-empty button{margin-top:18px;background:var(--primary);color:#fff;font-weight:700;padding:12px 24px;border-radius:12px}.cart-foot{flex:0 0 auto;border-top:1px solid var(--border);padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:var(--surface)}.cart-closed-warn{max-width:760px;margin:0 auto 12px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:13px;font-weight:600;text-align:center;padding:10px 14px;border-radius:12px}.cart-foot-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:16px}.cart-foot .totals{flex:1 1}.cart-foot .totals .lbl{font-size:12px;color:var(--muted)}.cart-foot .totals .amt{font-size:22px;font-weight:800;letter-spacing:-.02em}.checkout-btn{flex:0 0 auto;background:var(--primary);color:#fff;font-weight:800;font-size:15px;padding:14px 28px;border-radius:14px;transition:background .18s ease,transform .12s ease}.checkout-btn:hover{background:var(--primary-dark)}.checkout-btn:active{transform:scale(.97)}.checkout-btn:disabled{background:#d1d5db;color:#6b7280;cursor:not-allowed}.checkout-btn:disabled:hover{background:#d1d5db}.checkout-btn:disabled:active{transform:none}.pay-screen{position:fixed;inset:0;z-index:118;background:var(--bg);display:flex;flex-direction:column;animation:slideUp .34s cubic-bezier(.16,1,.3,1)}.pay-top{height:var(--header-h);flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--surface);border-bottom:1px solid var(--border)}.pay-brand{display:flex;flex-direction:column;line-height:1.1}.pay-title{font-size:18px;font-weight:900;letter-spacing:.04em;color:var(--primary)}.pay-sub{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--muted)}.pay-body{flex:1 1;overflow-y:auto;padding:22px 18px 40px}.pay-wrap{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:14px}.pay-qris-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);text-align:center;animation:rise .4s ease both}.pay-countdown{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:6px 14px;margin-bottom:14px}.pay-countdown strong{color:#ea580c;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.pay-spinner.sm{width:13px;height:13px;border-width:2px;border-color:#ea580c #fed7aa #fed7aa}.pay-qris-frame{background:#fff;border:2px solid var(--border);border-radius:16px;padding:14px;width:100%;max-width:320px;margin:0 auto;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}.pay-qris-frame img{width:100%;height:100%;object-fit:contain}.pay-merchant{margin-top:16px;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--text)}.pay-total-line{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:2px}.pay-total-line>span{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.pay-scan-hint{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--muted)}.pay-detail-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);animation:rise .45s ease both}.pay-detail-card h4{font-size:16px;font-weight:800;margin-bottom:14px}.pay-detail-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:800;color:var(--text)}.pay-detail-toggle .chev{color:var(--muted);transition:transform .22s ease}.pay-detail-toggle.open .chev{transform:rotate(90deg)}.pay-detail-body{margin-top:14px;animation:rise .25s ease both}.pay-confirm-btn{width:100%;margin-top:14px;height:46px;border-radius:12px;font-size:14px;font-weight:700;color:var(--primary);background:var(--primary-soft);border:1.5px solid transparent;transition:border-color .16s ease,background .16s ease,transform .12s ease}.pay-confirm-btn:hover{border-color:var(--primary)}.pay-confirm-btn:active{transform:scale(.98)}.pay-confirm-btn:disabled{opacity:.6;cursor:progress}.pay-download-btn{width:100%;margin-top:8px;height:46px;border-radius:12px;font-size:14px;font-weight:700;color:var(--text);background:var(--surface);border:1.5px solid var(--border);transition:border-color .16s ease,transform .12s ease}.pay-download-btn:hover{border-color:var(--primary);color:var(--primary)}.pay-download-btn:active{transform:scale(.98)}.invoice{max-width:640px;margin:0 auto}.invoice-head{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.invoice-badge{gap:8px;font-size:14px;font-weight:800;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:8px 14px}.invoice-badge,.invoice-copy{display:inline-flex;align-items:center}.invoice-copy{gap:7px;font-size:13.5px;font-weight:700;color:#fff;background:var(--primary);border-radius:11px;padding:9px 14px;transition:background .16s ease,transform .12s ease}.invoice-copy:hover{background:var(--primary-dark)}.invoice-copy:active{transform:scale(.96)}.invoice-copy:disabled{opacity:.5;cursor:not-allowed}.invoice-note{margin:14px auto 16px;max-width:420px;text-align:center;font-size:13px;color:var(--muted)}.invoice-empty{color:var(--muted);font-size:14px;padding:20px 0}.invoice-list{display:flex;flex-direction:column;gap:12px}.invoice-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm);animation:rise .35s ease both}.invoice-card.skeleton{display:flex;flex-direction:column;gap:10px}.invoice-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--border)}.invoice-idx{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--primary);background:var(--primary-soft)}.invoice-type{font-size:15px;font-weight:800;letter-spacing:-.01em}.inv-row{display:flex;align-items:center;gap:6px;font-size:14px;margin-top:7px}.inv-row.wrap{align-items:flex-start}.inv-label{flex:0 0 78px;font-weight:600}.inv-colon,.inv-label{color:var(--muted)}.inv-value{flex:1 1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inv-value.mono{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;letter-spacing:.02em}.inv-value.muted{color:var(--muted);font-weight:500;font-style:italic}.inv-value.wrap{white-space:normal;overflow:visible;text-overflow:clip;text-align:justify;word-break:break-word;line-height:1.45}.pay-cta.full{width:100%;margin-top:18px}@media (min-width:721px){.invoice .pay-cta.full{width:auto;display:inline-flex;padding:10px 20px;font-size:14px}}.pay-items{flex-direction:column;margin-bottom:14px}.pay-item,.pay-items{display:flex;gap:10px}.pay-item{align-items:center}.pay-item-ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;font-size:20px}.pay-item-nm{flex:1 1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pay-item-nm small{color:var(--muted);font-weight:600;margin-left:6px}.pay-item-pr{font-size:14px;font-weight:700}.pay-rows{border-top:1px dashed var(--border);padding-top:14px;display:flex;flex-direction:column;gap:10px}.pay-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted)}.pay-row em{font-style:normal;font-size:11px;opacity:.8}.pay-row.total{border-top:1px solid var(--border);padding-top:12px;margin-top:2px;color:var(--text)}.pay-row.total>span:first-child{font-size:15px;font-weight:800}.pay-total-val{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--primary);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;transition:color .16s ease}.pay-total-val:hover{color:var(--primary-dark)}.pay-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted);background:var(--primary-soft);border-radius:12px;padding:12px 14px}.pay-waiting{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--muted)}.pay-spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--primary);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.pay-result{max-width:420px;margin:6vh auto 0;text-align:center;animation:zoom .4s cubic-bezier(.16,1,.3,1)}.pay-result-ic{width:92px;height:92px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:44px}.pay-result-ic.ok{color:#fff;background:#10b981;box-shadow:0 14px 34px rgba(16,185,129,.4);animation:pop .5s ease both}.pay-result-ic.exp{background:#fef2f2}.pay-result h3{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}.pay-result p{color:var(--muted);font-size:14.5px;margin-bottom:22px}.pay-cta{background:var(--primary);color:#fff;font-weight:800;font-size:15px;padding:14px 30px;border-radius:14px;transition:background .16s ease,transform .12s ease}.pay-cta:hover{background:var(--primary-dark)}.pay-cta:active{transform:scale(.97)}@media (max-width:720px){.pay-grid{grid-template-columns:1fr;gap:14px}.pay-body{padding:16px 14px 36px}.pay-qris-frame{max-width:250px}.pay-total-val{font-size:18px}}.toast-wrap{position:fixed;top:calc(var(--header-h) + 14px);right:18px;z-index:130;pointer-events:none}.toast-card{pointer-events:auto;position:relative;display:flex;align-items:center;gap:11px;min-width:240px;max-width:min(360px,calc(100vw - 36px));padding:13px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;animation:toastIn .4s cubic-bezier(.16,1,.3,1)}.toast-card.leaving{animation:toastOut .35s cubic-bezier(.4,0,1,1) forwards}@keyframes toastIn{0%{opacity:0;transform:translateX(120%) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes toastOut{to{opacity:0;transform:translateX(120%) scale(.96)}}.toast-ic{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;background:#10b981;animation:pop .4s ease .1s both}.toast-card.error .toast-ic{background:var(--danger)}.toast-msg{flex:1 1;font-size:14px;font-weight:700;letter-spacing:-.01em}.toast-close{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:background .16s ease,color .16s ease}.toast-close:hover{background:#f3f4f6;color:var(--text)}.toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;background:#10b981;opacity:.85;animation:toastBar 2.6s linear forwards}.toast-card.error .toast-bar{background:var(--danger)}@keyframes toastBar{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (max-width:640px){.toast-wrap{right:12px;left:12px}.toast-card{min-width:0;max-width:100%}}footer.site-foot{text-align:center;color:var(--muted);font-size:13px;padding:28px 20px 40px;border-top:1px solid var(--border)}@media (max-width:640px){:root{--header-h:56px;--radius:14px}.container{padding:0 14px}.brand{font-size:17px}.brand-mark{width:30px;height:30px;font-size:16px}.user-chip .label{display:none}.user-chip{width:44px;padding:0;justify-content:center}.icon-btn{width:42px;height:42px}.hero{margin-top:16px;padding:30px 22px;border-radius:20px}.hero-cta{display:none}.section-head{margin:28px 0 14px}.grid{grid-template-columns:repeat(2,1fr);gap:11px;padding-bottom:40px}.card-media{font-size:46px}.card-body{padding:10px;gap:4px}.card-name{font-size:13.5px}.card-desc{display:none}.card-price{font-size:14px}.add-btn{padding:8px;border-radius:10px}.add-btn .add-label{display:none}.add-btn svg{width:18px;height:18px}.cart-item{padding:10px;gap:10px}.cart-thumb{width:54px;height:54px;font-size:26px}.checkout-btn{padding:13px 20px;font-size:14px}.history-body{padding:14px}.hist-card{padding:13px;gap:10px}.hist-field{font-size:13px;gap:4px}.hist-label{flex-basis:62px}.history-foot{flex-direction:column;align-items:stretch;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}.page-info{text-align:center;font-size:12px}.pager{justify-content:center}}