/* ==========================================================================
 * acx.css — Akun Pembeli v2 (4 Okt 2026)
 * --------------------------------------------------------------------------
 * Satu markup, tiga tata letak:
 *   ponsel  < 768px   : kartu profil, sakelar bagian lengket, panel 1 kolom
 *   tablet  768–1099  : sakelar bagian + kisi 2 kolom
 *   desktop >= 1100   : rel navigasi kiri lengket + kisi 2 kolom
 *
 * Token warna (--acx-*) dicetak acx_view.php dari warna merek toko (palet
 * kerangka aplikasi): terang dasar mutlak, gelap hanya lewat data-theme.
 * Semua pemilih berawalan .acx agar tidak bertabrakan dengan Tailwind,
 * gaya etalase, kerangka nsh, maupun template Mode Desktop.
 * ========================================================================== */

.acx {
  --acx-r-sm: 12px; --acx-r: 18px; --acx-r-lg: 24px;
  --acx-ease: cubic-bezier(.2, .8, .2, 1);
  --acx-spring: cubic-bezier(.34, 1.4, .64, 1);
  --acx-sh-1: 0 1px 2px rgba(15, 23, 42, .05);
  --acx-sh-2: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -10px rgba(15, 23, 42, .14);
  --acx-sh-3: 0 24px 60px -20px rgba(15, 23, 42, .32);
  --acx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --acx-serif: "Iowan Old Style", "Charter", "Source Serif Pro", Georgia, Cambria, "Times New Roman", serif;
  --acx-sticky: calc(var(--nsh-header-h, 0px) + 8px);
  font-family: var(--acx-font);
  color: var(--acx-text, #171c1c);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 4px 0 24px;
  position: relative;
}
/* .acx sendiri juga border-box: di dalam etalase Tailwind sudah mengaturnya,
   tetapi halaman /account mandiri tidak memuat Tailwind (hemat ±400 KB). */
.acx, .acx *, .acx *::before, .acx *::after { box-sizing: border-box; }
.acx a { color: inherit; text-decoration: none; }
.acx button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.acx img { max-width: 100%; display: block; }
.acx [hidden] { display: none !important; }
.acx .acx-i { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.acx :focus-visible { outline: 3px solid rgba(var(--acx-accent-rgb, 15, 118, 110), .45); outline-offset: 2px; border-radius: 10px; }
.acx--standalone { padding: 0 16px 40px; }
:root[data-theme="dark"] .acx, :root[data-dsk-theme="dark"] .acx { --acx-sh-1: 0 1px 2px rgba(0,0,0,.4); --acx-sh-2: 0 8px 24px -10px rgba(0,0,0,.6); --acx-sh-3: 0 24px 60px -20px rgba(0,0,0,.7); }

/* ---------- tipografi ---------- */
.acx .acx-display { font-family: var(--acx-serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.acx .acx-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--acx-text-2); }
.acx .acx-muted { color: var(--acx-text-3); font-size: 13px; }
.acx .acx-link { display: inline-flex; align-items: center; gap: 4px; color: var(--acx-accent); font-weight: 700; font-size: 13px; padding: 6px 2px; }
.acx .acx-help { color: var(--acx-text-3); font-size: 12px; }

/* ---------- topbar mandiri (account.php dibuka langsung) ---------- */
.acx-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px; margin: 0 -16px 8px; padding-left: 12px; padding-right: 12px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--acx-line-soft); }
.acx-topbar b { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.acx-topbar-sp { flex: 1; }
:root[data-theme="dark"] .acx-topbar { background: rgba(20,22,30,.86); }

/* ---------- tombol ---------- */
.acx .acx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 14px; font-weight: 700; font-size: 14.5px; letter-spacing: -.005em; transition: transform .18s var(--acx-spring), background-color .2s, box-shadow .2s, opacity .2s; position: relative; white-space: nowrap; user-select: none; touch-action: manipulation; }
.acx .acx-btn:active { transform: scale(.965); }
.acx .acx-btn--block { width: 100%; }
.acx .acx-btn--primary { background: var(--acx-accent); color: var(--acx-accent-on); box-shadow: 0 8px 20px -8px rgba(var(--acx-accent-rgb), .55), inset 0 -2px 0 rgba(0,0,0,.12); }
.acx .acx-btn--primary:hover { background: var(--acx-accent-lo); }
.acx .acx-btn--soft { background: var(--acx-accent-soft); color: var(--acx-accent); }
.acx .acx-btn--soft:hover { background: var(--acx-accent-soft-2); }
.acx .acx-btn--ghost { background: var(--acx-surface-3); color: var(--acx-text-2); }
.acx .acx-btn--danger { background: var(--acx-danger-soft); color: var(--acx-danger); margin-top: 14px; }
.acx .acx-btn[disabled] { opacity: .5; pointer-events: none; }
.acx .acx-btn.is-busy { color: transparent !important; pointer-events: none; }
.acx .acx-btn.is-busy::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-color: rgba(255,255,255,.4); border-top-color: #fff; animation: acx-spin .7s linear infinite; }
.acx .acx-btn--soft.is-busy::after, .acx .acx-btn--ghost.is-busy::after { border-color: rgba(var(--acx-accent-rgb), .25); border-top-color: var(--acx-accent); }
.acx .acx-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--acx-text-2); transition: background-color .2s, transform .18s var(--acx-spring); }
.acx .acx-icon-btn:hover { background: var(--acx-surface-3); }
.acx .acx-icon-btn:active { transform: scale(.9); }
@keyframes acx-spin { to { transform: rotate(360deg); } }

/* ---------- chip & pil ---------- */
.acx .acx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.4; }
.acx .acx-chip--accent { background: var(--acx-accent-soft); color: var(--acx-accent); }
.acx .acx-chip--ok { background: var(--acx-ok-soft); color: var(--acx-ok); }
.acx .acx-chip--warn { background: var(--acx-warn-soft); color: var(--acx-warn); }
.acx .acx-chip--info { background: var(--acx-info-soft); color: var(--acx-info); }
.acx .acx-chip--danger { background: var(--acx-danger-soft); color: var(--acx-danger); }

/* ---------- isian ---------- */
.acx .acx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acx .acx-field > span:first-child { font-size: 13px; font-weight: 650; color: var(--acx-text-2); }
.acx .acx-field em { font-style: normal; font-weight: 500; color: var(--acx-text-3); margin-left: 4px; }
.acx .acx-input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--acx-line); background: var(--acx-surface); color: var(--acx-text); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s, background-color .2s; -webkit-appearance: none; appearance: none; }
.acx textarea.acx-input { resize: vertical; line-height: 1.5; min-height: 76px; }
.acx .acx-input:focus { outline: 0; border-color: var(--acx-accent); box-shadow: 0 0 0 4px rgba(var(--acx-accent-rgb), .14); }
.acx .acx-input:disabled { background: var(--acx-surface-3); color: var(--acx-text-3); }
.acx .acx-input-wrap { position: relative; display: flex; align-items: center; }
.acx .acx-input-wrap > .acx-i { position: absolute; left: 14px; color: var(--acx-text-3); pointer-events: none; }
.acx .acx-input-wrap > .acx-input { padding-left: 44px; }
.acx .acx-input-wrap > .acx-peek { position: absolute; right: 6px; }
.acx .acx-pin, .acx .acx-otp { letter-spacing: .32em; font-variant-numeric: tabular-nums; font-weight: 700; }
.acx .acx-otp { text-align: center; font-size: 22px; letter-spacing: .5em; padding-left: .5em; }
.acx .acx-pin:placeholder-shown, .acx .acx-otp:placeholder-shown { letter-spacing: normal; font-weight: 500; }
.acx .acx-otp:placeholder-shown { font-size: 16px; }
.acx .acx-peek { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--acx-text-3); }
.acx .acx-peek:hover { background: var(--acx-surface-3); }
.acx .acx-peek--light { color: inherit; opacity: .85; width: 28px; height: 28px; }
.acx .acx-peek--light:hover { background: rgba(255,255,255,.16); }
.acx .acx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acx .acx-row { display: flex; gap: 10px; align-items: stretch; }
.acx .acx-row > .acx-input { flex: 1 1 auto; min-width: 0; }
.acx .acx-row > .acx-btn { flex: 0 0 auto; }
.acx .acx-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; color: var(--acx-text-2); background: var(--acx-surface-2); border: 1px solid var(--acx-line-soft); padding: 10px 12px; border-radius: 12px; }
.acx .acx-hint .acx-i { margin-top: 2px; color: var(--acx-accent); }
.acx .acx-form { display: flex; flex-direction: column; gap: 14px; }
.acx .acx-captcha { display: flex; justify-content: center; min-height: 0; }

/* ==========================================================================
   MASUK / DAFTAR
   ========================================================================== */
.acx-auth { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 460px; margin: 8px auto 0; }
.acx-auth-brand { display: none; }
.acx-auth-card { background: var(--acx-surface); border: 1px solid var(--acx-line-soft); border-radius: var(--acx-r-lg); padding: 22px 18px; box-shadow: var(--acx-sh-2); display: flex; flex-direction: column; gap: 18px; }
.acx-auth-head { display: flex; gap: 14px; align-items: center; }
.acx-auth-head h1 { font-size: 26px; }
.acx-auth-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--acx-text-2); }
.acx-auth-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--acx-accent-soft); color: var(--acx-accent); flex: 0 0 auto; }
.acx-auth-pane { display: flex; flex-direction: column; gap: 14px; animation: acx-pane-in .32s var(--acx-ease) both; }
.acx-otp-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--acx-surface-2); border: 1px dashed var(--acx-accent-line); animation: acx-pane-in .3s var(--acx-ease) both; }
.acx-divider { display: flex; align-items: center; gap: 12px; color: var(--acx-text-3); font-size: 12px; font-weight: 600; }
.acx-divider::before, .acx-divider::after { content: ""; flex: 1; height: 1px; background: var(--acx-line); }
.acx-steps { display: flex; gap: 6px; }
.acx-steps i { flex: 1; height: 4px; border-radius: 99px; background: var(--acx-surface-3); transition: background-color .3s; }
.acx-steps i.is-on { background: var(--acx-accent); }

@media (min-width: 900px) {
  .acx-auth { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); max-width: 980px; gap: 28px; align-items: stretch; margin-top: 20px; }
  .acx-auth-brand { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; position: relative; overflow: hidden; border-radius: 28px; padding: 36px; color: var(--acx-accent-on); background: linear-gradient(150deg, var(--acx-accent-hi), var(--acx-accent) 55%, var(--acx-accent-lo)); min-height: 520px; box-shadow: var(--acx-sh-3); }
  .acx-auth-brand h2 { font-family: var(--acx-serif); font-size: 34px; line-height: 1.1; margin: 0; letter-spacing: -.02em; }
  .acx-auth-brand p { margin: 0; opacity: .88; font-size: 15px; max-width: 34ch; }
  .acx-auth-brand ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
  .acx-auth-brand li { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 10px 14px; border-radius: 14px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .acx-auth-mark { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); margin-bottom: auto; }
  .acx-auth-orb { position: absolute; width: 420px; height: 420px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.32), transparent 65%); animation: acx-float 9s ease-in-out infinite alternate; pointer-events: none; }
  .acx-auth-card { padding: 32px 30px; align-self: center; }
}
@keyframes acx-float { to { transform: translate(-40px, 50px) scale(1.08); } }

/* ---------- sakelar bersegmen ---------- */
.acx .acx-seg { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--acx-surface-3); }
.acx .acx-seg button { position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 11px; font-weight: 700; font-size: 13.5px; color: var(--acx-text-2); transition: color .25s var(--acx-ease); white-space: nowrap; }
.acx .acx-seg button.is-on { color: var(--acx-text); }
.acx .acx-seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 5px); border-radius: 11px; background: var(--acx-surface); box-shadow: var(--acx-sh-1), 0 2px 6px rgba(15,23,42,.08); transition: transform .36s var(--acx-spring); }
.acx .acx-seg--auth[data-on="register"] .acx-seg-thumb { transform: translateX(calc(100% + 2px)); }

/* ==========================================================================
   DASBOR
   ========================================================================== */
.acx-shell { display: block; }
.acx-rail { display: none; }
.acx-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* kartu profil */
.acx-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--acx-r-lg); padding: 18px 18px 16px; color: var(--acx-accent-on); background: linear-gradient(145deg, var(--acx-accent-hi), var(--acx-accent) 52%, var(--acx-accent-lo)); box-shadow: 0 18px 40px -22px rgba(var(--acx-accent-rgb), .9); }
.acx-hero-glow { position: absolute; z-index: -1; width: 360px; height: 360px; right: -120px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.30), transparent 62%); animation: acx-float 10s ease-in-out infinite alternate; pointer-events: none; }
.acx-hero-row { display: flex; align-items: center; gap: 14px; }
.acx-hero-avatar { position: relative; flex: 0 0 auto; border-radius: 22px; transition: transform .2s var(--acx-spring); }
.acx-hero-avatar:active { transform: scale(.95); }
.acx-hero-cam { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--acx-surface); color: var(--acx-accent); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.acx-hero-id { flex: 1 1 auto; min-width: 0; }
.acx-hero-id .acx-kicker { color: inherit; opacity: .82; }
.acx-hero-id h1 { font-size: 27px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acx-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; opacity: .95; font-variant-numeric: tabular-nums; }
.acx-hero-meta .acx-chip { background: rgba(255,255,255,.2); color: inherit; border: 1px solid rgba(255,255,255,.28); }
.acx-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.acx-hero-stats > div { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 10px 10px 9px; min-width: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.acx-hero-stats span { display: block; font-size: 11px; font-weight: 650; opacity: .82; }
.acx-hero-stats b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.acx-hero-progress { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; opacity: .95; }
.acx-hero-progress .acx-bar { background: rgba(255,255,255,.22); }
.acx-hero-progress .acx-bar i { background: #fff; }

.acx .acx-bar { height: 6px; border-radius: 99px; background: var(--acx-surface-3); overflow: hidden; }
.acx .acx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--acx-accent); transform-origin: left; animation: acx-grow 1s var(--acx-ease) both .2s; }
@keyframes acx-grow { from { transform: scaleX(0); } }

/* cincin level */
.acx-ring { --acx-ring: 0deg; position: relative; width: 66px; height: 66px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(#fff var(--acx-ring), rgba(255,255,255,.22) 0); display: grid; place-items: center; animation: acx-ring-in 1s var(--acx-ease) both .15s; }
.acx-ring-in { width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.acx-ring-in b { font-size: 10px; font-weight: 800; letter-spacing: .02em; max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes acx-ring-in { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }

/* avatar */
.acx .acx-avatar { position: relative; display: inline-grid; place-items: center; overflow: hidden; flex: 0 0 auto; border-radius: 30%; background: linear-gradient(140deg, var(--acx-accent-soft-2), var(--acx-accent-soft)); color: var(--acx-accent); font-weight: 800; }
.acx .acx-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.acx .acx-avatar--md { width: 44px; height: 44px; font-size: 15px; }
.acx .acx-avatar--lg { width: 68px; height: 68px; font-size: 22px; border: 3px solid rgba(255,255,255,.75); box-shadow: 0 8px 22px -8px rgba(0,0,0,.35); }
.acx .acx-avatar--xl { width: 84px; height: 84px; font-size: 26px; }

/* sakelar bagian (ponsel & tablet): bergulir menyamping, lengket */
/* Latar PEKAT: versi tembus pandang membuat baris pesanan terbaca menembus
   sakelar saat menggulir (terlihat di aplikasi terpasang penjual). */
.acx .acx-seg--tabs { position: sticky; top: var(--acx-sticky); z-index: 20; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; background: var(--acx-surface-2); box-shadow: 0 0 0 1px var(--acx-line-soft), 0 8px 18px -12px rgba(15, 23, 42, .28); scroll-snap-type: x proximity; }
.acx .acx-seg--tabs::-webkit-scrollbar { display: none; }
.acx .acx-seg--tabs button { flex: 0 0 auto; scroll-snap-align: start; padding: 0 14px; }
.acx .acx-seg--tabs button.is-on { background: var(--acx-surface); color: var(--acx-accent); box-shadow: var(--acx-sh-1), 0 2px 8px rgba(15,23,42,.08); }
.dsk-chrome-main .acx { --acx-sticky: 86px; }

/* panel */
.acx-panel { display: flex; flex-direction: column; gap: 14px; }
.acx-panel.is-enter { animation: acx-pane-in .34s var(--acx-ease) both; }
@keyframes acx-pane-in { from { opacity: 0; transform: translateY(10px); } }
.acx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }

/* kartu */
.acx .acx-card { background: var(--acx-surface); border: 1px solid var(--acx-line-soft); border-radius: var(--acx-r); padding: 16px; box-shadow: var(--acx-sh-1); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.acx .acx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acx .acx-card-head h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; }

/* status pesanan */
.acx-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; background: var(--acx-surface); border: 1px solid var(--acx-line-soft); border-radius: var(--acx-r); padding: 10px 6px; box-shadow: var(--acx-sh-1); }
.acx-status-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 2px; border-radius: 14px; font-size: 12px; font-weight: 650; color: var(--acx-text-2); text-align: center; transition: background-color .2s, transform .18s var(--acx-spring); min-width: 0; }
.acx-status-tile:active { transform: scale(.94); }
.acx-status-tile:hover { background: var(--acx-surface-2); }
.acx-status-ico { position: relative; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: var(--acx-accent-soft); color: var(--acx-accent); }
.acx-tone-waiting .acx-status-ico { background: var(--acx-warn-soft); color: var(--acx-warn); }
.acx-tone-review .acx-status-ico { background: var(--acx-info-soft); color: var(--acx-info); }
.acx-tone-done .acx-status-ico { background: var(--acx-ok-soft); color: var(--acx-ok); }
.acx-status-ico em { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--acx-danger); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--acx-surface); animation: acx-pop .4s var(--acx-spring) both .3s; }
@keyframes acx-pop { from { transform: scale(0); } }

/* dompet */
.acx-wallet { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--acx-r); padding: 18px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, rgba(var(--acx-accent-rgb), .85), transparent 60%), linear-gradient(135deg, #1b1f2a, #0e1118); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 18px; }
.acx-wallet::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 45%, transparent 60%); transform: translateX(-100%); animation: acx-sheen 5s ease-in-out infinite 1.2s; }
@keyframes acx-sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.acx-wallet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.acx-wallet-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .03em; opacity: .8; }
.acx-wallet-amount { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; transition: filter .25s; }
.acx-wallet.is-masked .acx-wallet-amount { filter: blur(9px); user-select: none; }
.acx-wallet-chip { opacity: .75; }
.acx-wallet-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.acx-wallet-actions a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; opacity: .92; transition: transform .18s var(--acx-spring); }
.acx-wallet-actions a:active { transform: scale(.92); }
.acx-wallet-actions span { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); }
.acx-wallet-actions a:hover span { background: rgba(255,255,255,.2); }

/* kartu fitur (kelas, tutor, afiliasi) */
.acx .acx-feature { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--acx-r); background: var(--acx-surface); border: 1px solid var(--acx-line-soft); box-shadow: var(--acx-sh-1); transition: transform .2s var(--acx-spring), box-shadow .2s; min-width: 0; }
.acx .acx-feature:hover { box-shadow: var(--acx-sh-2); }
.acx .acx-feature:active { transform: scale(.98); }
.acx .acx-feature-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; background: var(--acx-accent); color: var(--acx-accent-on); }
.acx .acx-feature-ico img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; }
.acx .acx-feature-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.acx .acx-feature-body em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acx-accent); }
.acx .acx-feature-body b { font-size: 15.5px; font-weight: 800; margin-top: 1px; }
.acx .acx-feature-body small { font-size: 12.5px; color: var(--acx-text-2); margin-top: 2px; }
.acx .acx-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--acx-surface-2); color: var(--acx-accent); border: 1px solid var(--acx-line-soft); transition: transform .2s var(--acx-ease); }
.acx .acx-feature:hover .acx-go { transform: translateX(3px); }
.acx .acx-feature--learn .acx-feature-ico { background: #5b45d6; color: #fff; }
.acx .acx-feature--learn .acx-feature-body em { color: #6d5bd0; }
.acx .acx-feature--tutor .acx-feature-ico { background: #0d9488; color: #fff; }
.acx .acx-feature--tutor .acx-feature-body em { color: #0f766e; }
.acx .acx-feature--soon .acx-feature-ico { background: var(--acx-surface-3); color: var(--acx-text-2); }
.acx .acx-feature--soon .acx-feature-body em { color: var(--acx-text-3); }

/* daftar pesanan */
.acx .acx-orders { display: flex; flex-direction: column; }
.acx .acx-order { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--acx-line-soft); border-radius: 12px; transition: background-color .2s; min-width: 0; }
.acx .acx-order:first-child { border-top: 0; }
.acx .acx-order:hover { background: var(--acx-surface-2); }
.acx .acx-order:active { background: var(--acx-surface-3); }
.acx .acx-order-thumb { position: relative; width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; background: var(--acx-surface-3); color: var(--acx-text-3); }
.acx .acx-order-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acx .acx-order-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acx .acx-order-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acx .acx-order-top b { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acx .acx-order-title { font-size: 13px; color: var(--acx-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acx .acx-order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; font-size: 11.5px; color: var(--acx-text-3); }
.acx .acx-order-total { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--acx-text); }
.acx .acx-order-total .acx-i { color: var(--acx-text-3); }
.acx .acx-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 4px; }
.acx .acx-filter::-webkit-scrollbar { display: none; }
.acx .acx-pill { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--acx-text-2); background: var(--acx-surface); border: 1px solid var(--acx-line); transition: all .2s var(--acx-ease); }
.acx .acx-pill.is-on { background: var(--acx-text); color: var(--acx-surface); border-color: var(--acx-text); }
.acx .acx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 10px; color: var(--acx-text-3); }
.acx .acx-empty p { margin: 0; font-size: 13.5px; max-width: 32ch; }

/* layanan cepat */
.acx .acx-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.acx .acx-quick-item { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 2px; border-radius: 14px; font-size: 12px; font-weight: 650; color: var(--acx-text-2); text-align: center; line-height: 1.25; transition: background-color .2s, transform .18s var(--acx-spring); }
.acx .acx-quick-item:hover { background: var(--acx-surface-2); }
.acx .acx-quick-item:active { transform: scale(.93); }
.acx .acx-quick-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--acx-surface-2); border: 1px solid var(--acx-line-soft); color: var(--acx-accent); }

/* daftar menu & data */
.acx .acx-list { display: flex; flex-direction: column; margin: 0 -6px; }
.acx .acx-list-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 6px; border-radius: 12px; transition: background-color .2s; }
.acx .acx-list-item + .acx-list-item { border-top: 1px solid var(--acx-line-soft); }
.acx .acx-list-item:hover { background: var(--acx-surface-2); }
.acx .acx-list-item > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.acx .acx-list-item b { font-size: 14.5px; font-weight: 700; }
.acx .acx-list-item small { font-size: 12.5px; color: var(--acx-text-3); }
.acx .acx-list-item > .acx-i { color: var(--acx-text-3); }
.acx .acx-list-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--acx-accent-soft); color: var(--acx-accent); }
.acx .acx-dl { margin: 0; display: flex; flex-direction: column; }
.acx .acx-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--acx-line-soft); }
.acx .acx-dl > div:first-child { border-top: 0; }
.acx .acx-dl dt { display: inline-flex; align-items: center; gap: 8px; color: var(--acx-text-3); font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.acx .acx-dl dd { margin: 0; text-align: right; font-size: 14px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }

/* level */
.acx .acx-levels { list-style: none; margin: 0; padding: 2px 2px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.acx .acx-levels::-webkit-scrollbar { display: none; }
.acx .acx-level { scroll-snap-align: start; position: relative; padding: 14px; border-radius: 16px; border: 1.5px solid var(--acx-line-soft); background: var(--acx-surface-2); display: flex; flex-direction: column; gap: 3px; transition: transform .2s var(--acx-spring); }
.acx .acx-level b { font-size: 14.5px; font-weight: 800; margin-top: 6px; }
.acx .acx-level small { font-size: 11.5px; color: var(--acx-text-3); font-variant-numeric: tabular-nums; }
.acx .acx-level p { margin: 4px 0 0; font-size: 12px; color: var(--acx-text-2); }
.acx .acx-level-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--acx-surface-3); color: var(--acx-text-3); }
.acx .acx-level.is-past .acx-level-ico { background: var(--acx-accent-soft); color: var(--acx-accent); }
.acx .acx-level.is-now { border-color: var(--acx-accent); background: var(--acx-surface); box-shadow: 0 10px 26px -14px rgba(var(--acx-accent-rgb), .7); }
.acx .acx-level.is-now .acx-level-ico { background: var(--acx-accent); color: var(--acx-accent-on); }
.acx .acx-level b .acx-chip { font-size: 10.5px; padding: 2px 7px; margin-left: 4px; vertical-align: 2px; }
.acx .acx-points { flex-direction: row; align-items: center; gap: 14px; }
.acx .acx-points-ico { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; flex: 0 0 auto; background: var(--acx-warn-soft); color: var(--acx-warn); }
.acx .acx-points b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.acx .acx-points small { display: block; font-size: 12px; color: var(--acx-text-3); }

/* brankas */
.acx .acx-brankas p { margin: 0; }
.acx .acx-brankas-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: var(--acx-surface-2); border: 1px solid var(--acx-line-soft); font-size: 13px; color: var(--acx-text-2); }
.acx .acx-brankas-total b { font-size: 18px; color: var(--acx-text); font-variant-numeric: tabular-nums; }
.acx .acx-brankas .acx-row > .acx-btn { flex: 1 1 0; }

/* lembar geser (sheet)
   Lembar memakai kelas .acx juga (token warna & gaya isian ikut terbawa saat
   ia dipindah ke <body>); ukuran/margin kontainer .acx dinetralkan di sini. */
.acx.acx-sheet { max-width: none; margin: 0; padding: 0; width: auto; }
.acx-sheet { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 12, 18, 0); transition: background-color .3s var(--acx-ease); }
.acx-sheet.is-open { background: rgba(10, 12, 18, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.acx-sheet-panel { width: 100%; max-width: 560px; max-height: calc(100% - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; background: var(--acx-surface); color: var(--acx-text); border-radius: 26px 26px 0 0; padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--acx-sh-3); transform: translateY(104%); transition: transform .42s var(--acx-spring); }
.acx-sheet.is-open .acx-sheet-panel { transform: none; }
.acx-grabber { display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--acx-line); margin: 4px auto 6px; }
.acx-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; }
.acx-sheet-head h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.acx-photo { display: flex; gap: 16px; align-items: center; }
.acx-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acx-photo-actions small { flex-basis: 100%; color: var(--acx-text-3); font-size: 12px; }
@media (min-width: 768px) {
  .acx-sheet, .acx.acx-sheet { align-items: center; padding: 24px; }
  .acx-sheet-panel { border-radius: 26px; transform: translateY(18px) scale(.97); opacity: 0; transition: transform .34s var(--acx-spring), opacity .25s; padding-bottom: 24px; }
  .acx-sheet.is-open .acx-sheet-panel { opacity: 1; }
  .acx-grabber { display: none; }
}

/* toast */
.acx-toast { position: fixed; left: 50%; bottom: calc(var(--nsh-content-bottom, 24px) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 2147483001; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; background: #111827; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); transition: opacity .25s, transform .35s var(--acx-spring); }
.acx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.acx-toast.is-bad { background: #9f1239; }
.acx-toast { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; line-height: 1.4; text-align: center; -webkit-font-smoothing: antialiased; }

/* ---------- lembar & toast yang dipindah ke <body> (6 Okt 2026) ----------
   AKAR "semua tombol macet setelah Ubah PIN": `.acx [hidden]` hanya berlaku
   untuk TURUNAN .acx. Begitu lembar dipindah ke <body> ia tak punya leluhur
   .acx lagi, sehingga `.acx-sheet{display:flex}` mengalahkan [hidden] bawaan
   peramban: lembar yang "ditutup" tetap terbentang fixed inset:0 dengan
   z-index tertinggi — lapisan transparan yang menelan setiap ketukan.
   Tiga lapis pengaman:
   1. [hidden] berlaku juga pada elemen .acx / .acx-sheet itu sendiri;
   2. lembar yang tidak .is-open tidak pernah menangkap ketukan (juga selama
      animasi menutup), jadi halaman langsung bisa dipakai lagi;
   3. `body > .acx-sheet` (kekhususan 0,1,1) mengalahkan aturan template
      seperti aurora `.dsk-body > *{position:relative;z-index:1}`. */
.acx[hidden], .acx-sheet[hidden], .acx-toast[hidden] { display: none !important; }
.acx-sheet:not(.is-open) { pointer-events: none; }
.acx-sheet:not(.is-open) .acx-sheet-panel { pointer-events: none; }
body > .acx-sheet { position: fixed; z-index: 2147483000; }
body > .acx-toast { position: fixed; z-index: 2147483001; }
.acx-sheet-panel { -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.acx-sheet-panel:focus { outline: none; }
/* Selama lembar terbuka toast pindah ke atas layar: di bawah ia menutupi
   tombol utama lembar ("Perbarui PIN", "Simpan perubahan"). */
html[data-acx-lock] body > .acx-toast { bottom: auto; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -16px); }
html[data-acx-lock] body > .acx-toast.is-on { transform: translate(-50%, 0); }

/* masuk bertahap */
.acx .acx-reveal { animation: acx-rise .5s var(--acx-ease) both; }
.acx .acx-grid > .acx-reveal:nth-child(2) { animation-delay: .05s; }
.acx .acx-grid > .acx-reveal:nth-child(3) { animation-delay: .1s; }
.acx .acx-grid > .acx-reveal:nth-child(4) { animation-delay: .15s; }
.acx .acx-grid > .acx-reveal:nth-child(n+5) { animation-delay: .2s; }
@keyframes acx-rise { from { opacity: 0; transform: translateY(14px); } }
.acx .acx-flash { animation: acx-flash .8s var(--acx-ease); }
@keyframes acx-flash { 30% { color: var(--acx-accent); transform: scale(1.06); } }

/* ==========================================================================
   TABLET (768–1099): kisi dua kolom
   ========================================================================== */
@media (min-width: 768px) {
  .acx { font-size: 15.5px; }
  .acx-hero { padding: 22px 24px 20px; }
  .acx-hero-id h1 { font-size: 32px; }
  .acx-hero-stats { gap: 10px; }
  .acx-hero-stats b { font-size: 18px; }
  .acx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Pesanan terbaru selebar panel: baris pesanan butuh ruang untuk kode,
     nama produk, status, dan total. Kartu setengah lebar membuatnya sesak. */
  .acx .acx-card--orders { grid-column: 1 / -1; order: 5; }
  .acx .acx-brankas { order: 6; }
  .acx-status { padding: 12px; }
  .acx .acx-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acx .acx-seg--tabs { justify-content: flex-start; }
  .acx .acx-levels { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}

/* ==========================================================================
   DESKTOP (>=1100): rel navigasi kiri lengket
   ========================================================================== */
@media (min-width: 1100px) {
  .acx-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
  .acx-rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--acx-sticky) + 8px); padding: 14px; border-radius: var(--acx-r-lg); background: var(--acx-surface); border: 1px solid var(--acx-line-soft); box-shadow: var(--acx-sh-1); animation: acx-rise .5s var(--acx-ease) both; }
  .acx-rail-id { display: flex; align-items: center; gap: 12px; padding: 6px 6px 14px; border-bottom: 1px solid var(--acx-line-soft); }
  .acx-rail-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
  .acx-rail-who b { font-size: 14.5px; font-weight: 800; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acx-rail-nav { display: flex; flex-direction: column; gap: 2px; }
  .acx .acx-rail-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; font-weight: 650; font-size: 14px; color: var(--acx-text-2); text-align: left; transition: background-color .2s, color .2s; }
  .acx .acx-rail-link:hover { background: var(--acx-surface-2); color: var(--acx-text); }
  .acx .acx-rail-link.is-on { background: var(--acx-accent-soft); color: var(--acx-accent); }
  .acx .acx-rail-link.is-on::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acx-accent); animation: acx-pop .3s var(--acx-spring); }
  .acx .acx-rail-link span { flex: 1 1 auto; }
  .acx .acx-count { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; background: var(--acx-danger); color: #fff; }
  .acx .acx-rail-shop { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--acx-surface-2); border: 1px solid var(--acx-line-soft); font-size: 13.5px; font-weight: 700; color: var(--acx-text-2); transition: background-color .2s; }
  .acx .acx-rail-shop span { flex: 1; }
  .acx .acx-rail-shop:hover { background: var(--acx-accent-soft); color: var(--acx-accent); }
  .acx .acx-seg--tabs { display: none; }
  .acx-hero { padding: 26px 28px 22px; }
  .acx-hero-row { gap: 18px; }
  .acx-hero-id h1 { font-size: 36px; }
  .acx .acx-avatar--lg { width: 76px; height: 76px; font-size: 25px; }
  .acx-ring { width: 78px; height: 78px; }
  .acx-ring-in { width: 64px; height: 64px; }
  .acx-ring-in b { font-size: 11px; max-width: 60px; }
  .acx-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
  .acx-hero-progress { max-width: 640px; }
  .acx .acx-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acx .acx-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acx .acx-card { padding: 18px 20px; }
}

/* ---------- gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
  .acx *, .acx *::before, .acx *::after, .acx-sheet, .acx-sheet-panel, .acx-toast { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}
/* ---------- kontras tinggi Windows ---------- */
@media (forced-colors: active) {
  .acx .acx-card, .acx .acx-btn, .acx .acx-input, .acx-status, .acx .acx-feature { border: 1px solid CanvasText; }
}