/* [FIX 2026-10-03] BUG "sudah login tapi disuruh login lagi": .jx-gate{display:flex} & .jx-tab{display:inline-flex} MENGALAHKAN
   atribut [hidden] bawaan browser → kotak "Masuk dulu" (dan tab Zoom saya / Stok siap) SELALU tampil walau sudah login.
   Aturan ini memastikan [hidden] benar-benar menyembunyikan elemen di halaman Akun Otomatis. */
#page-jaspay [hidden],.jx-modal [hidden],.jx-toast[hidden]{display:none!important}
/* public/xv-jaspay.css — [NEW 2026-09-30] halaman "Akun Otomatis" (#page-jaspay) di web utama. Logika: /xv-jaspay.js.
   Arah desain: "lini produksi" — akun dibuat sungguhan di perangkat, jadi tampilan menonjolkan mesin yang bekerja (slot menyala),
   rel proses pesanan (diterima → antre → dikerjakan → selesai), dan harga yang berdetak saat pilihan berubah.
   Mengikuti token warna web utama (--vio/--cy/--glass/--line, tema gelap & terang). Semua animasi mati bila prefers-reduced-motion. */
#page-jaspay,.jx-vars{--jx-a:var(--vio,#8b5cf6);--jx-b:var(--cy,#2dd4ff);--jx-ok:var(--green,#3ddc97);--jx-bad:var(--red,#ff5c7a);--jx-warn:var(--amber,#ffb020);
  --jx-r:20px;--jx-ease:cubic-bezier(.2,.8,.2,1)}
.jx{max-width:1180px;margin:0 auto;padding:18px 16px calc(80px + var(--bnav-h,0px))}
.jx *{box-sizing:border-box}
.jx svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jx :focus-visible{outline:3px solid color-mix(in srgb,var(--jx-b) 70%,transparent);outline-offset:2px;border-radius:10px}
.jx button{font:inherit;color:inherit;cursor:pointer}
.jx button:disabled{cursor:not-allowed}

/* ---------- hero ---------- */
.jx-hero{position:relative;overflow:hidden;border-radius:28px;padding:30px 28px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--jx-a) 30%,transparent),transparent 55%),radial-gradient(100% 120% at 100% 100%,color-mix(in srgb,var(--jx-b) 22%,transparent),transparent 60%),var(--bg2,#0a0c1c);
  border:1px solid var(--line)}
.jx-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;
  mask-image:radial-gradient(80% 90% at 30% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(80% 90% at 30% 30%,#000 30%,transparent 80%);opacity:.55;pointer-events:none}
.jx-hero>*{position:relative}
.jx-hero h1{font-family:var(--font-d);font-size:clamp(1.7rem,3.8vw,2.7rem);line-height:1.08;letter-spacing:-.8px;margin:0 0 12px}
.jx-hero h1 .g{background:linear-gradient(100deg,var(--jx-a),var(--jx-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.jx-hero p{color:var(--mut);max-width:52ch;margin:0 0 18px;line-height:1.6}
.jx-steps{display:flex;flex-wrap:wrap;gap:8px}
.jx-steps span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:var(--glass);border:1px solid var(--line);font-size:.8rem;font-weight:600}
.jx-steps b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:linear-gradient(135deg,var(--jx-a),var(--jx-b));color:#fff}
.jx-rise{animation:jxRise .7s var(--jx-ease) both;animation-delay:calc(var(--d,0) * 90ms)}
@keyframes jxRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* panel mesin — [UPDATE 2026-09-30 v2] "lini produksi" (pengukur + statistik + ban berjalan + lampu mesin), terang & gelap */
.jx-machine{--speed:4s;position:relative;overflow:hidden;border-radius:26px;padding:18px 18px 16px;isolation:isolate;
  background:linear-gradient(160deg,color-mix(in srgb,var(--jx-a) 10%,var(--bg2,#fff)),var(--bg2,#fff) 60%);border:1px solid color-mix(in srgb,var(--jx-a) 22%,var(--line));
  box-shadow:0 30px 60px -40px color-mix(in srgb,var(--jx-a) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.jx-machine::before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-120px;border-radius:50%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--jx-b) 26%,transparent),transparent 65%);animation:jxDrift 10s ease-in-out infinite alternate}
@keyframes jxDrift{to{transform:translate(-50px,30px)}}
.jx-mh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.jx-mh b{font-family:var(--font-d);font-size:1rem;letter-spacing:-.2px}
.jx-livepill{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:900;letter-spacing:.8px;color:#16a34a;padding:4px 9px;border-radius:99px;background:rgba(34,197,94,.12)}
.jx-livepill i{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:jxLive 1.6s ease-out infinite}
@keyframes jxLive{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}80%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.jx-machine[data-load=off] .jx-livepill{color:var(--mut);background:var(--glass2)}.jx-machine[data-load=off] .jx-livepill i{background:var(--mut);animation:none}
.jx-mbody{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.jx-gauge{position:relative;width:132px;height:132px}
.jx-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.jx-gauge .g1{stop-color:var(--jx-b)}.jx-gauge .g2{stop-color:var(--jx-a)}
.jx-gauge .trk{fill:none;stroke:color-mix(in srgb,var(--jx-a) 12%,var(--line));stroke-width:11}
.jx-gauge .val{fill:none;stroke:url(#jxGg);stroke-width:11;stroke-linecap:round;stroke-dasharray:314.2;stroke-dashoffset:314.2;transition:stroke-dashoffset 1.2s var(--jx-ease);filter:drop-shadow(0 4px 8px color-mix(in srgb,var(--jx-a) 45%,transparent))}
.jx-gnum{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.jx-gnum b{font-family:var(--font-d);font-size:1.7rem;letter-spacing:-.6px;line-height:1}
.jx-gnum span{font-size:.68rem;color:var(--mut);font-weight:700;margin-top:3px}
.jx-mstats{display:grid;gap:8px}
.jx-mstats div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:13px;background:var(--glass);border:1px solid var(--line)}
.jx-mstats span{font-size:.74rem;color:var(--mut);font-weight:700}.jx-mstats b{font-size:.88rem}
.jx-machine[data-load=high] #jxStatS{color:#ea580c}.jx-machine[data-load=low] #jxStatS{color:#16a34a}
/* ban berjalan: kartu akun masuk polos → lewat mesin → keluar tercentang */
.jx-belt{position:relative;height:56px;margin:14px 0 10px;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--jx-a) 9%,transparent) 0 14px,transparent 14px 28px),var(--glass);border:1px solid var(--line);background-size:28px 100%;animation:jxBeltMove var(--speed) linear infinite}
@keyframes jxBeltMove{to{background-position:28px 0}}
.jx-belt-track{position:absolute;inset:0}
.jx-tok{position:absolute;top:50%;left:-40px;width:34px;height:24px;margin-top:-12px;border-radius:7px;background:var(--bg2,#fff);border:1.5px solid var(--line);box-shadow:0 4px 10px -6px #0f172a;
  animation:jxTok calc(var(--speed) * 1.75) linear infinite;animation-delay:calc(var(--k) * var(--speed) * -.25)}
.jx-tok i{position:absolute;left:6px;right:10px;height:2.5px;border-radius:2px;background:var(--line)}
.jx-tok i:first-child{top:7px}.jx-tok i:last-child{top:13px;right:16px}
.jx-tok::after{content:"";position:absolute;right:-6px;top:-6px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2px solid var(--bg2,#fff);transform:scale(0);animation:jxTokOk calc(var(--speed) * 1.75) linear infinite;animation-delay:inherit}
@keyframes jxTok{0%{left:-40px}49%{background:var(--bg2,#fff);border-color:var(--line)}52%{background:linear-gradient(135deg,var(--jx-b),var(--jx-a));border-color:transparent}100%{left:calc(100% + 10px);background:linear-gradient(135deg,var(--jx-b),var(--jx-a));border-color:transparent}}
@keyframes jxTokOk{0%,50%{transform:scale(0)}56%{transform:scale(1.25)}60%,100%{transform:scale(1)}}
.jx-press{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:14px;display:grid;place-items:center;color:#fff;z-index:2;
  background:linear-gradient(135deg,var(--jx-b),var(--jx-a));box-shadow:0 8px 20px -8px var(--jx-a),0 0 0 4px color-mix(in srgb,var(--bg2,#fff) 80%,transparent);animation:jxStamp calc(var(--speed) * .44) ease-in-out infinite}
.jx-press svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:jxSpin calc(var(--speed) * 2) linear infinite}
@keyframes jxStamp{0%,100%{transform:scale(1)}45%{transform:scale(.9)}55%{transform:scale(1.06)}}
.jx-machine[data-load=off] .jx-belt,.jx-machine[data-load=off] .jx-tok,.jx-machine[data-load=off] .jx-tok::after,.jx-machine[data-load=off] .jx-press,.jx-machine[data-load=off] .jx-press svg{animation-play-state:paused}
/* lampu tiap mesin */
.jx-leds{display:grid;grid-template-columns:repeat(auto-fill,minmax(18px,1fr));gap:6px;margin-bottom:10px}
.jx-led{height:8px;border-radius:5px;background:color-mix(in srgb,var(--jx-a) 12%,var(--line));transition:background .5s}
.jx-led.on{background:linear-gradient(90deg,var(--jx-b),var(--jx-a));box-shadow:0 0 10px -2px var(--jx-b);animation:jxLed 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * 120ms)}
@keyframes jxLed{50%{opacity:.55}}
.jx-mcap{font-size:.84rem;color:var(--mut);line-height:1.5}
.jx-mcap b{color:var(--txt)}

/* ---------- tab ---------- */
.jx-tabs{position:relative;display:flex;gap:4px;padding:5px;margin:22px 0 18px;border-radius:16px;background:var(--glass);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.jx-tabs::-webkit-scrollbar{display:none}
.jx-tab{position:relative;z-index:1;flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;background:none;padding:10px 16px;border-radius:12px;font-weight:700;font-size:.86rem;color:var(--mut);transition:color .3s}
.jx-tab[aria-selected=true]{color:#fff}
.jx-tab .n{min-width:18px;padding:0 6px;border-radius:99px;background:var(--jx-warn);color:#1b1200;font-size:.68rem;line-height:18px}
.jx-ind{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:12px;background:linear-gradient(135deg,var(--jx-a),var(--jx-b));box-shadow:0 8px 20px -10px var(--jx-a);transition:transform .45s var(--jx-ease),width .45s var(--jx-ease)}
.jx-pane{display:none}
.jx-pane.on{display:block;animation:jxFade .45s var(--jx-ease)}
@keyframes jxFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- katalog + konfigurator ---------- */
.jx-shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:18px;align-items:start}
.jx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:12px}
.jx-card{position:relative;min-width:0;text-align:left;border:1px solid var(--line);background:var(--glass);border-radius:var(--jx-r);padding:16px;display:flex;flex-direction:column;gap:10px;
  transition:transform .35s var(--jx-ease),border-color .3s,box-shadow .35s;animation:jxRise .55s var(--jx-ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.jx-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--jx-a) 55%,var(--line));box-shadow:0 18px 36px -24px var(--jx-a)}
.jx-card[aria-pressed=true]{border-color:transparent;box-shadow:0 0 0 2px var(--jx-a),0 20px 40px -22px var(--jx-a)}
.jx-mono{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-.5px}
.jx-card b{font-size:1rem}
.jx-card .pr{font-family:var(--font-d);font-weight:800;font-size:1.05rem}
.jx-card small{color:var(--mut);font-size:.76rem;line-height:1.4}
.jx-tag{position:static;align-self:flex-start;font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--jx-b) 18%,transparent);color:var(--jx-b)}
.jx-card.off{opacity:.5;cursor:default;animation:none}
.jx-card.off:hover{transform:none;box-shadow:none;border-color:var(--line)}

.jx-panel{position:sticky;top:84px;border-radius:24px;border:1px solid var(--line);background:var(--bg2,#0a0c1c);padding:20px;box-shadow:0 30px 60px -40px #000}
.jx-panel-empty{display:grid;place-items:center;text-align:center;min-height:320px;color:var(--mut);gap:10px}
.jx-panel-empty svg{width:54px;height:54px;stroke-width:1.4;opacity:.6;animation:jxFloat 3.4s ease-in-out infinite}
@keyframes jxFloat{50%{transform:translateY(-8px)}}
.jx-ph{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.jx-ph h2{font-family:var(--font-d);font-size:1.25rem;margin:0}
.jx-close{margin-left:auto;display:none;width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:var(--glass);align-items:center;justify-content:center}
.jx-field{margin-bottom:14px}
.jx-lbl{display:block;font-size:.74rem;font-weight:800;color:var(--mut);margin-bottom:7px;letter-spacing:.2px}
.jx-chips{display:flex;flex-wrap:wrap;gap:7px}
.jx-chip{max-width:100%;white-space:normal;text-align:left;overflow-wrap:anywhere;border:1px solid var(--line);background:var(--glass);border-radius:12px;padding:9px 13px;font-size:.84rem;font-weight:700;transition:transform .2s,background .3s,border-color .3s,color .3s}
.jx-chip:hover:not(:disabled){transform:translateY(-1px);border-color:color-mix(in srgb,var(--jx-a) 55%,var(--line))}
.jx-chip[aria-pressed=true]{background:linear-gradient(135deg,var(--jx-a),var(--jx-b));border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px var(--jx-a)}
.jx-chip:disabled{opacity:.4}
.jx-chip small{display:block;font-size:.66rem;font-weight:600;opacity:.8}
.jx-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--glass);border:1px solid var(--line)}
.jx-seg button{border:0;background:none;padding:10px;border-radius:10px;font-weight:700;font-size:.84rem;color:var(--mut);transition:background .3s,color .3s}
.jx-seg button[aria-pressed=true]{background:var(--bg2,#0a0c1c);color:var(--txt);box-shadow:0 2px 10px -4px #000}
.jx-in,.jx-ta{width:100%;border:1px solid var(--line);background:var(--glass);color:var(--txt);border-radius:12px;padding:11px 13px;font:500 .9rem var(--font-b)}
.jx-ta{min-height:104px;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem}
.jx-in:focus,.jx-ta:focus{outline:none;border-color:var(--jx-a);box-shadow:0 0 0 4px color-mix(in srgb,var(--jx-a) 22%,transparent)}
.jx-hint{color:var(--mut);font-size:.76rem;margin:6px 0 0;line-height:1.5}
.jx-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--glass)}
.jx-stepper button{width:44px;height:42px;border:0;background:none;font-size:1.2rem;font-weight:700}
.jx-stepper button:hover:not(:disabled){background:var(--glass2)}
.jx-stepper output{min-width:46px;text-align:center;font-family:var(--font-d);font-weight:800;font-size:1.05rem}
.jx-note{border:1px dashed color-mix(in srgb,var(--jx-warn) 60%,transparent);background:color-mix(in srgb,var(--jx-warn) 8%,transparent);border-radius:14px;padding:10px 12px;font-size:.8rem;line-height:1.5;margin-bottom:12px}
.jx-total{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:18px 0 12px;padding-top:14px;border-top:1px dashed var(--line)}
.jx-total small{color:var(--mut);font-size:.76rem}
.jx-total .v{font-family:var(--font-d);font-weight:800;font-size:1.7rem;letter-spacing:-.5px;background:linear-gradient(100deg,var(--txt),color-mix(in srgb,var(--jx-b) 70%,var(--txt)));-webkit-background-clip:text;background-clip:text;color:transparent}
.jx-total .v.bump{animation:jxBump .45s var(--jx-ease)}
@keyframes jxBump{40%{transform:scale(1.08)}}
.jx-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.jx-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:13px 16px;font-weight:800;font-size:.9rem;color:#fff;
  background:linear-gradient(135deg,var(--jx-a),var(--jx-b));box-shadow:0 12px 24px -14px var(--jx-a);transition:transform .2s,filter .2s,opacity .2s}
.jx-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}
.jx-btn:active:not(:disabled){transform:scale(.97)}
.jx-btn:disabled{opacity:.45}
.jx-btn.ghost{background:var(--glass);color:var(--txt);border:1px solid var(--line);box-shadow:none}
.jx-btn.sm{padding:8px 12px;font-size:.78rem;border-radius:11px}
.jx-btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:jxRip .6s ease-out;pointer-events:none}
@keyframes jxRip{to{transform:scale(2.6);opacity:0}}
.jx-btn.busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:jxSpin .7s linear infinite}
.jx-msg{font-size:.82rem;font-weight:600;margin-top:10px;min-height:1em}
.jx-msg.ok{color:var(--jx-ok)}.jx-msg.bad{color:var(--jx-bad)}
.jx-res{display:grid;gap:6px;margin-top:10px}
.jx-res div{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:11px;background:var(--glass);border:1px solid var(--line);font-size:.8rem;animation:jxRise .35s var(--jx-ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.jx-res code{font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.jx-pill{font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap;background:var(--glass2)}
.jx-pill.ok{background:color-mix(in srgb,var(--jx-ok) 16%,transparent);color:var(--jx-ok)}
.jx-pill.bad{background:color-mix(in srgb,var(--jx-bad) 16%,transparent);color:var(--jx-bad)}
.jx-pill.run{background:color-mix(in srgb,var(--jx-warn) 18%,transparent);color:var(--jx-warn)}
.jx-scrim{display:none}

/* ---------- pesanan: rel proses ---------- */
.jx-orders{display:grid;gap:12px}
.jx-order{border:1px solid var(--line);background:var(--glass);border-radius:var(--jx-r);padding:16px;animation:jxRise .5s var(--jx-ease) both;animation-delay:calc(var(--i,0) * 50ms)}
.jx-oh{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jx-oh b{font-size:.98rem}
.jx-oh .sp{flex:1}
.jx-meta{color:var(--mut);font-size:.78rem;margin-top:5px}
.jx-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 6px}
.jx-rail i{position:relative;height:6px;border-radius:9px;background:var(--glass2);overflow:hidden}
.jx-rail i.done{background:linear-gradient(90deg,var(--jx-a),var(--jx-b))}
.jx-rail i.now::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--jx-b),transparent);animation:jxSweep 1.3s linear infinite}
@keyframes jxSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.jx-rail-l{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:.68rem;color:var(--mut);font-weight:700}
.jx-rail-l .on{color:var(--txt)}
.jx-acc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--jx-ok) 35%,transparent);background:color-mix(in srgb,var(--jx-ok) 7%,transparent);font-size:.82rem}
.jx-acc code{font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.jx-snk{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--glass2);font-size:.8rem;line-height:1.5;color:var(--mut)}
.jx-empty{padding:40px 20px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:var(--jx-r)}
.jx-empty svg{width:44px;height:44px;stroke-width:1.4;margin-bottom:8px;opacity:.7}
.jx-gate{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;padding:16px 18px;border-radius:var(--jx-r);border:1px solid color-mix(in srgb,var(--jx-a) 40%,var(--line));background:color-mix(in srgb,var(--jx-a) 9%,transparent);margin-bottom:16px}
.jx-skel{height:120px;border-radius:var(--jx-r);background:linear-gradient(90deg,var(--glass) 0%,var(--glass2) 50%,var(--glass) 100%);background-size:200% 100%;animation:jxShim 1.3s linear infinite}
@keyframes jxShim{to{background-position:-200% 0}}
.jx-table{width:100%;border-collapse:collapse;font-size:.84rem}
.jx-table th{text-align:left;color:var(--mut);font-size:.72rem;padding:8px 10px}
.jx-table td{padding:10px;border-top:1px solid var(--line)}
.jx-tw{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--glass)}
.jx-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.jx-check{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:11px;border:1px solid var(--line);background:var(--glass);font-size:.8rem}
.jx-check input{accent-color:var(--jx-a)}

/* ---------- modal QRIS ---------- */
.jx-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,4,12,.66);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.jx-modal.on{opacity:1;pointer-events:auto}
.jx-modal>div{width:100%;max-width:360px;border-radius:26px;background:var(--bg2,#0a0c1c);border:1px solid var(--line);padding:22px;text-align:center;transform:translateY(24px) scale(.96);transition:transform .45s var(--jx-ease)}
.jx-modal.on>div{transform:none}
.jx-modal h3{font-family:var(--font-d);margin:0 0 4px}
.jx-qr{position:relative;width:236px;max-width:100%;margin:14px auto;padding:10px;border-radius:18px;background:#fff}
.jx-qr img{display:block;width:100%;border-radius:10px}
.jx-qr::after{content:"";position:absolute;left:10px;right:10px;top:10px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--jx-b),transparent);animation:jxScan 2.2s ease-in-out infinite}
@keyframes jxScan{50%{top:calc(100% - 13px)}}
.jx-toast{position:fixed;left:50%;bottom:calc(24px + var(--bnav-h,0px));z-index:1300;transform:translate(-50%,20px);opacity:0;padding:11px 16px;border-radius:14px;background:var(--bg2,#0a0c1c);border:1px solid var(--line);font-weight:700;font-size:.85rem;box-shadow:0 18px 40px -20px #000;transition:opacity .3s,transform .35s var(--jx-ease);pointer-events:none;max-width:calc(100vw - 32px)}
.jx-toast.on{opacity:1;transform:translate(-50%,0)}
.jx-toast.bad{border-color:color-mix(in srgb,var(--jx-bad) 60%,transparent)}

/* ---------- responsif ---------- */
@media (max-width:980px){
  .jx-hero{grid-template-columns:1fr;padding:24px 20px}
  .jx-shop{grid-template-columns:1fr}
  .jx-panel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1100;max-height:88vh;overflow-y:auto;border-radius:26px 26px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .5s var(--jx-ease)}
  .jx-panel.open{transform:none}
  .jx-panel::before{content:"";display:block;width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 12px}
  .jx-close{display:inline-flex}
  .jx-scrim{display:block;position:fixed;inset:0;z-index:1090;background:rgba(3,4,12,.55);opacity:0;pointer-events:none;transition:opacity .35s}
  .jx-scrim.on{opacity:1;pointer-events:auto}
  .jx-panel-empty{display:none}
}
@media (max-width:520px){
  .jx{padding-left:12px;padding-right:12px}
  .jx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .jx-card{padding:13px}
  .jx-mbody{grid-template-columns:104px 1fr;gap:12px}.jx-gauge{width:104px;height:104px}.jx-gnum b{font-size:1.35rem}
  .jx-pay{grid-template-columns:1fr}
  .jx-rail-l{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  #page-jaspay *,#page-jaspay *::before,#page-jaspay *::after{animation:none!important;transition:none!important}
}
/* [FIX 2026-09-30] anti terpotong: semua kolom boleh menyusut, teks boleh turun baris */
#page-jaspay .jx-hero>*,#page-jaspay .jx-shop>*,#page-jaspay .jx-mstats div,#page-jaspay .jx-oh>*,#page-jaspay .jx-panel{min-width:0}
#page-jaspay .jx-card b,#page-jaspay .jx-card small,#page-jaspay .jx-card .pr,#page-jaspay .jx-rail-l span,#page-jaspay .jx-mstats b,#page-jaspay .jx-acc code{overflow-wrap:anywhere}
#page-jaspay .jx-rail-l span{line-height:1.25}
#page-jaspay .jx-steps{flex-wrap:wrap}
#page-jaspay .jx-ph{flex-wrap:wrap}#page-jaspay .jx-ph h2{flex:1;min-width:0}
#page-jaspay .jx-total{flex-wrap:wrap}
@media (min-width:981px) and (max-width:1180px){
  .jx-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .jx-shop{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}
}
@media (min-width:721px) and (max-width:980px){
  .jx-grid{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
  .jx-machine{max-width:640px}
}

/* [NEW 2026-10-03] masa aktif & ringkasan pesanan — supaya pembeli tahu persis berapa hari akun aktif (mis. ExpressVPN) */
.jx-dur{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;max-width:100%;font-size:.72rem;font-weight:800;padding:4px 9px;border-radius:99px;
  background:color-mix(in srgb,var(--jx-ok) 15%,transparent);color:var(--jx-ok);overflow-wrap:anywhere}
.jx-dur svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jx-chip.fixed{display:inline-flex;align-items:center;gap:7px;cursor:default}
.jx-chip.fixed svg,.jx-note svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jx-note{display:flex;gap:8px;align-items:flex-start}
.jx-note.warn{border-style:solid;border-color:color-mix(in srgb,var(--jx-bad) 45%,transparent);background:color-mix(in srgb,var(--jx-bad) 8%,transparent)}
.jx-sum{display:flex;flex-direction:column;gap:3px;margin-top:16px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--jx-a) 14%,transparent),color-mix(in srgb,var(--jx-b) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--jx-a) 30%,var(--line));animation:jxSumIn .45s var(--jx-ease,cubic-bezier(.2,.8,.2,1))}
.jx-sum small{color:var(--mut);font-size:.72rem}
.jx-sum b{font-size:.92rem;line-height:1.45;overflow-wrap:anywhere}
@keyframes jxSumIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jx-sum{animation:none}}
@media (max-width:720px){html body #page-jaspay .jx-sum{border-radius:12px}}

/* ============ [REWRITE 2026-10-05] Akun Otomatis Instan (Jaky) — SEWA AKSES, di halaman Generate Akun ============ */
.jk-sec{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.jk-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.jk-head h3{font-size:1.08rem;font-weight:800;letter-spacing:-.2px}
.jk-head p{color:var(--mut);font-size:.82rem;line-height:1.5;margin-top:2px;overflow-wrap:anywhere}
.jk-badge{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;padding:6px 11px;border-radius:99px;color:#1b1200;
  background:linear-gradient(135deg,var(--jx-warn,#ffb020),#ffd166);box-shadow:0 8px 20px -10px var(--jx-warn,#ffb020)}
.jk-ic{width:17px;height:17px;flex:none}.jk-ic.sm{width:14px;height:14px}
.jk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.jk-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--jx-r,18px);border:1px solid var(--line);
  background:linear-gradient(165deg,color-mix(in srgb,var(--jx-a,#8b5cf6) 8%,transparent),transparent 55%),var(--glass,rgba(255,255,255,.04));
  animation:jkIn .5s var(--jx-ease,cubic-bezier(.2,.8,.2,1)) both;animation-delay:calc(var(--i,0) * 55ms);transition:transform .3s,border-color .3s,box-shadow .3s}
@keyframes jkIn{from{opacity:0;transform:translateY(12px)}}
@media(hover:hover){.jk-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--jx-a,#8b5cf6) 40%,var(--line));box-shadow:0 20px 44px -26px var(--jx-a,#8b5cf6)}.jk-card:hover .jk-fic{transform:rotate(-8deg) scale(1.08)}}
.jk-card.active{border-color:color-mix(in srgb,var(--jx-ok,#3ddc97) 45%,var(--line));background:linear-gradient(165deg,color-mix(in srgb,var(--jx-ok,#3ddc97) 9%,transparent),transparent 55%),var(--glass,rgba(255,255,255,.04))}
.jk-ct{display:flex;align-items:center;gap:12px}
.jk-fic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--jx-a,#8b5cf6),color-mix(in srgb,var(--jx-b,#2dd4ff) 72%,var(--jx-a,#8b5cf6)));box-shadow:0 10px 22px -12px var(--jx-a,#8b5cf6);transition:transform .45s var(--jx-spring,cubic-bezier(.34,1.56,.64,1))}
.jk-card.active .jk-fic{background:linear-gradient(135deg,var(--jx-ok,#3ddc97),var(--jx-b,#2dd4ff))}
.jk-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.jk-nm b{font-size:.98rem;line-height:1.25;overflow-wrap:anywhere}
.jk-dur{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:99px;max-width:100%;overflow-wrap:anywhere;
  background:color-mix(in srgb,var(--jx-warn,#ffb020) 15%,transparent);color:var(--jx-warn,#ffb020)}
.jk-note-t{color:var(--mut);font-size:.8rem;line-height:1.5;margin:0;overflow-wrap:anywhere}
.jk-meta{display:flex;flex-wrap:wrap;gap:6px}
.jk-chip{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.06);color:var(--mut)}
.jk-chip.ok{background:color-mix(in srgb,var(--jx-ok,#3ddc97) 15%,transparent);color:var(--jx-ok,#3ddc97)}
.jk-chip.soft{background:color-mix(in srgb,var(--jx-b,#2dd4ff) 12%,transparent);color:var(--jx-b,#2dd4ff)}
.jk-field{display:flex;flex-direction:column;gap:5px}
.jk-lbl{display:flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;color:var(--mut);overflow-wrap:anywhere}
.jk-sel,.jk-ta{width:100%;background:rgba(5,6,15,.5);border:1px solid var(--line);border-radius:11px;padding:9px 12px;color:var(--txt);font-size:.86rem;outline:none;box-sizing:border-box;transition:border-color .2s}
.jk-ta{min-height:72px;resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:.78rem;line-height:1.5}
.jk-sel:focus,.jk-ta:focus{border-color:var(--jx-a,#8b5cf6)}
.jk-hint{font-size:.72rem;color:var(--mut);line-height:1.45;overflow-wrap:anywhere}
.jk-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.jk-b{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--glass,rgba(255,255,255,.04));
  color:var(--txt);border-radius:12px;padding:10px 12px;font-weight:700;font-size:.82rem;cursor:pointer;text-decoration:none;white-space:normal;text-align:center;
  transition:transform .2s,border-color .25s,box-shadow .25s,filter .2s}
.jk-b:hover{transform:translateY(-1px)}.jk-b:active{transform:scale(.98)}.jk-b:disabled{opacity:.55;cursor:default;transform:none}
.jk-b.pay{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--jx-a,#8b5cf6),color-mix(in srgb,var(--jx-b,#2dd4ff) 70%,var(--jx-a,#8b5cf6)))}
.jk-b.pay:hover{filter:brightness(1.08)}
.jk-b.qr{border-color:color-mix(in srgb,var(--jx-b,#2dd4ff) 45%,var(--line));color:var(--jx-b,#2dd4ff)}
.jk-b.gh{color:var(--mut)}.jk-b.sm{flex:none;padding:7px 11px;font-size:.76rem}
.jk-msg{font-size:.82rem;line-height:1.5;color:var(--mut);overflow-wrap:anywhere}
.jk-msg.bad{color:var(--jx-bad,#ff5c7a)}
.jk-link{background:none;border:0;color:var(--jx-b,#2dd4ff);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.jk-note{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.jk-note.warn{border-color:color-mix(in srgb,var(--jx-bad,#ff5c7a) 40%,transparent);background:color-mix(in srgb,var(--jx-bad,#ff5c7a) 8%,transparent)}
/* hasil (akun/link) */
.jk-result{margin-top:4px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--jx-ok,#3ddc97) 8%,transparent);border:1px solid color-mix(in srgb,var(--jx-ok,#3ddc97) 30%,var(--line));animation:jkIn .4s var(--jx-ease,cubic-bezier(.2,.8,.2,1))}
.jk-result .rh{display:flex;align-items:center;gap:7px;color:var(--jx-ok,#3ddc97);font-size:.84rem;margin-bottom:8px;overflow-wrap:anywhere}
.jk-result .rh b{color:var(--txt)}
.jk-copyrow{display:flex;gap:7px;align-items:stretch}
.jk-code,.jk-linkbox{flex:1;min-width:0;background:rgba(5,6,15,.55);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:.78rem;overflow-wrap:anywhere;word-break:break-all}
.jk-linkbox{color:var(--jx-b,#2dd4ff);text-decoration:underline}
/* QRIS */
.jk-qris{margin-top:4px;padding:12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--jx-b,#2dd4ff) 35%,var(--line));background:rgba(5,6,15,.4)}
.jk-qris .qh{display:flex;align-items:center;gap:6px;color:var(--jx-b,#2dd4ff);font-size:.82rem}.jk-qris .qh b{color:var(--txt)}
.jk-qris .qimg{position:relative;max-width:200px;margin:10px auto 6px;border-radius:12px;overflow:hidden;background:#fff;padding:8px}
.jk-qris .qimg img{display:block;width:100%}
.jk-qris .qimg .scan{position:absolute;left:8px;right:8px;top:8px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--jx-b,#2dd4ff),transparent);box-shadow:0 0 12px var(--jx-b,#2dd4ff);animation:jkScan 2.4s ease-in-out infinite}
@keyframes jkScan{0%,100%{top:8px}50%{top:calc(100% - 11px)}}
.jk-qris .qb{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
/* skeleton */
.jk-card.sk{gap:12px}
.sk{display:block;border-radius:8px;background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.11),rgba(255,255,255,.05) 70%);background-size:200% 100%;animation:jkShim 1.2s linear infinite}
.sk-row{display:flex;align-items:center;gap:12px}.sk-ic{width:46px;height:46px;border-radius:14px;flex:none}.sk-ln{height:12px}.sk-btn{height:40px;border-radius:12px;margin-top:auto}
@keyframes jkShim{from{background-position:200% 0}to{background-position:-200% 0}}
/* riwayat */
.jk-mytitle{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;margin:2px 0 10px}.jk-mytitle .jk-ic{color:var(--jx-warn,#ffb020)}
.jk-order{padding:14px 16px;border-radius:var(--jx-r,16px);border:1px solid var(--line);background:var(--glass,rgba(255,255,255,.04));margin-bottom:11px;animation:jkIn .45s var(--jx-ease,cubic-bezier(.2,.8,.2,1)) both;animation-delay:calc(min(var(--i,0),8) * 40ms)}
.jk-oh{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.jk-oh b{overflow-wrap:anywhere;min-width:0;flex:1}
.jk-pill{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:99px}
.jk-pill.ok{background:color-mix(in srgb,var(--jx-ok,#3ddc97) 15%,transparent);color:var(--jx-ok,#3ddc97)}
.jk-pill.rent{background:color-mix(in srgb,var(--jx-a,#8b5cf6) 15%,transparent);color:var(--jx-a,#8b5cf6)}
.jk-ometa{font-size:.74rem;color:var(--mut);margin-top:4px;overflow-wrap:anywhere}
.jk-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.jk-acc code{flex:1;min-width:120px;background:rgba(5,6,15,.5);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:.76rem;overflow-wrap:anywhere}
.jk-snk{font-size:.76rem;color:var(--mut);margin-top:7px;line-height:1.5;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.jk-card,.jk-order,.jk-result,.sk,.jk-qris .qimg .scan{animation:none}.jk-card{transition:none}}
@media (max-width:720px){
  html body #page-generate .jk-grid{grid-template-columns:1fr;gap:0}
  html body #page-generate .jk-card{border-radius:0;border-left:0;border-right:0;margin:0 -16px;padding:16px}
  html body #page-generate .jk-card+.jk-card{border-top:0}
  html body #page-generate .jk-sec{margin-top:20px}
}