/* Nokos — tema violet & putih: latar putih keunguan, aksen violet
   #7C3AED, teks ungu sangat gelap #0F172A, hijau khusus total harga.
   Tipografi Plus Jakarta Sans (judul) & DM Sans (isi) / JetBrains Mono (kode & nomor).
   Tailwind terkompilasi statis (assets/tailwind.css). */
html {
  scroll-behavior: smooth;
}
/* Jangan biarkan satu elemen lebar (mis. <select> berisi teks panjang)
   menyeret seluruh halaman melebar di HP. */
html,
body {
  overflow-x: clip;
}
body {
  background: linear-gradient(180deg, #F8FAFC 0%, #F8FAFC 55%, #F1F5F9 100%);
  background-color: #F8FAFC;
}
h1,
h2,
h3 {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
select,
input,
textarea {
  max-width: 100%;
}
::selection {
  background: #DDD6FE;
  color: #0F172A;
}
/* Scrollbar ramping netral */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #eef2f7;
}
::-webkit-scrollbar-thumb {
  background: #DDD6FE;
  border-radius: 8px;
  border: 2px solid #eef2f7;
}
::-webkit-scrollbar-thumb:hover {
  background: #C4B5FD;
}
/* Bayangan lembut netral untuk kartu (menimpa shadow bawaan Tailwind) */
.shadow-sm {
  box-shadow: 0 2px 10px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.05) !important;
}
.shadow-lg {
  box-shadow: 0 20px 42px -14px rgba(15, 27, 45, 0.18) !important;
}
.shadow-xl {
  box-shadow: 0 22px 48px -12px rgba(15, 27, 45, 0.25) !important;
}
.spinner {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 3px solid #F5F3FF;
  border-top-color: #7c3aed;
  animation: otp-spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: -3px;
}
@keyframes otp-spin {
  to {
    transform: rotate(360deg);
  }
}
.pulse-dot {
  animation: otp-pulse 1.4s ease-in-out infinite;
}
@keyframes otp-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
/* Kotak digit OTP dekoratif */
.otp-digit {
  width: 2.75rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: 2px solid #DDD6FE;
  border-radius: 1rem;
  background: #ffffff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: #334155;
}
.otp-digit.filled {
  border-color: #7c3aed;
  color: #6D28D9;
  background: #F5F3FF;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}
@media (max-width: 380px) {
  .otp-digit {
    width: 2.35rem;
    height: 3rem;
    font-size: 1.25rem;
  }
}
/* Sorotan order yang baru dibuat / dibuka dari tautan */
.order-highlight {
  animation: otp-order-flash 1.2s ease-in-out 2;
}
@keyframes otp-order-flash {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(124, 58, 237, 0);
  }
  50% {
    box-shadow: inset 0 0 0 3px rgba(124, 58, 237, 0.75);
  }
}
/* QR dinamis top-up (SVG hasil qrcode-generator) */
#qris-qr svg {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================================================
   SISTEM DESAIN INTERIOR — menyelaraskan semua halaman dengan homepage
   violet-lavender (frontend/index.html): kartu border gradien lavender,
   jangkar gradien ungu tua, tombol gradien violet, dock melayang gelap.
   Semua gaya komponen ditulis sebagai CSS biasa di sini (bukan kelas
   Tailwind baru) agar tidak tergantung rebuild/purge Tailwind.
   ========================================================================== */

/* Kartu putih standar: radius 20px, border gradien lavender tipis,
   bayangan lembut ungu (shadow-card homepage). */
.nk-card {
  border: 1px solid transparent;
  background:
    linear-gradient(150deg, #ffffff 0%, #F8FAFC 75%, #F8FAFC 100%) padding-box,
    linear-gradient(135deg, #DDD6FE 0%, #C4B5FD 42%, #D1FAE5 100%) border-box;
  border-radius: 20px;
  box-shadow:
    0 14px 36px rgba(30, 27, 75, 0.09),
    0 2px 8px rgba(30, 27, 75, 0.035) !important;
}

/* Kartu jangkar gelap (saldo Beranda): gradien ungu tua seperti hero. */
.nk-hero-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(221, 214, 254, 0.25);
  background:
    radial-gradient(ellipse at 85% 12%, rgba(196, 181, 253, 0.35), transparent 42%),
    radial-gradient(ellipse at 5% 95%, rgba(124, 58, 237, 0.28), transparent 36%),
    linear-gradient(135deg, #7C3AED, #8B5CF6 48%, #6D28D9);
  color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 22px 55px rgba(30, 27, 75, 0.2) !important;
}
.nk-hero-card .text-cocoa-400 {
  color: #DDD6FE;
}
.nk-hero-card .text-cocoa-900 {
  color: #ffffff;
}

/* Kepala Beranda (referensi owner): sapaan teks di area putih,
   kartu saldo melayang radius besar dengan dua tombol kaca. */
.nk-hello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding: 0 4px;
}
.nk-hello-sub {
  font-size: 14px;
  color: #94A3B8;
}
.nk-hello-name {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nk-hero-balance {
  border-radius: 28px;
  box-shadow: 0 24px 48px rgba(139, 92, 246, 0.32) !important;
}
.nk-hero-label {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.nk-hero-amount {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin-top: 4px;
}
.nk-hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.nk-btn-glass {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.2s;
}
.nk-btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.nk-btn-glass svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Tombol primer: gradien violet homepage (modal-submit). */
.nk-btn-primary {
  background-image: linear-gradient(110deg, #7C3AED, #6D28D9);
  background-color: #7C3AED;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.22);
}
.nk-btn-primary:hover {
  background-image: linear-gradient(110deg, #6D28D9, #5B21B6);
  background-color: #6D28D9;
}

/* Tombol CTA terang di atas permukaan gelap (gaya .primary-cta homepage). */
.nk-btn-lav {
  background: linear-gradient(115deg, #C4B5FD, #A78BFA 68%, #6EE7B7);
  color: #1E1B4B;
  border-color: transparent;
  box-shadow: 0 9px 24px rgba(139, 92, 246, 0.3);
}
.nk-btn-lav:hover {
  background: linear-gradient(115deg, #DDD6FE, #A78BFA 68%, #6EE7B7);
  color: #1E1B4B;
}

/* Tombol sekunder: lavender pucat, teks violet tua (gaya .order-button). */
.nk-btn-secondary {
  background: linear-gradient(120deg, #F5F3FF, #ECFDF5);
  color: #7C3AED;
  border: 1px solid #EDE9FE;
  box-shadow: 0 3px 9px rgba(30, 27, 75, 0.06);
}
.nk-btn-secondary:hover {
  background: linear-gradient(110deg, #8B5CF6, #A78BFA);
  color: #ffffff;
  border-color: transparent;
}

/* Header shell: blur lavender-putih seperti header homepage. */
.nk-header {
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(221, 214, 254, 0.78);
  box-shadow: 0 5px 22px rgba(30, 27, 75, 0.05);
}
/* Chip saldo header: border gradien seperti .wallet-button homepage. */
.nk-chip {
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(130deg, #DDD6FE, #C4B5FD, #D1FAE5) border-box;
  box-shadow: 0 5px 16px rgba(76, 29, 149, 0.06);
}

/* Footer gelap (renderFooter): gradien ungu tua seperti footer homepage. */
.nk-footer {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(139, 92, 246, 0.24), transparent 38%),
    linear-gradient(125deg, #1E1B4B, #4C1D95 65%, #5B21B6);
  color: #DDD6FE;
}
.nk-footer .text-cocoa-900 {
  color: #FFFFFF;
}
.nk-footer .text-cocoa-500 {
  color: #C4B5FD;
}
.nk-footer a:hover {
  color: #FFFFFF;
}
.nk-footer-note {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(237, 233, 254, 0.16);
  color: #DDD6FE;
}
.nk-footer-note .text-cocoa-800 {
  color: #ffffff;
}
.nk-footer-bottom {
  border-top: 1px solid rgba(237, 233, 254, 0.16);
  color: #C4B5FD;
}

/* Form auth (daftar/masuk): tombol mata, meter password, tips, checkbox. */
.nk-eye-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #A78BFA;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nk-eye-btn:hover {
  color: #7C3AED;
  background: #F5F3FF;
}
.nk-eye-btn svg {
  width: 20px;
  height: 20px;
}
.nk-seg {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  background: #EDE9FE;
  transition: background 0.2s ease;
}
.nk-tips-badge {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 9999px;
  background: #EDE9FE;
  color: #6D28D9;
}
.nk-rule-ic {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 1.5px solid #DDD6FE;
  display: grid;
  place-items: center;
  flex: none;
  color: transparent;
  margin-top: 1px;
}
.nk-rule-ic svg {
  width: 10px;
  height: 10px;
}
.nk-rule li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #64748B;
}
.nk-rule li.met {
  color: #059669;
}
.nk-rule li.met .nk-rule-ic {
  background: #10B981;
  border-color: #10B981;
  color: #ffffff;
}
.nk-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.nk-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.nk-check-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #C4B5FD;
  background: #ffffff;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 1px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nk-check-box svg {
  width: 12px;
  height: 12px;
  color: #ffffff;
  opacity: 0;
}
.nk-check input:checked + .nk-check-box {
  background: #7C3AED;
  border-color: #7C3AED;
}
.nk-check input:checked + .nk-check-box svg {
  opacity: 1;
}
.nk-check input:focus-visible + .nk-check-box {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}
.nk-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bilah navigasi bawah (app.html): bilah PUTIH bersih dengan garis atas
   slate-200, lima tab ikon+label (+ Admin khusus admin). Status aktif
   ditentukan kelas text-brand-600 yang ditoggle app-shell.js — jangan
   ubah nama kelas itu. Tab aktif: ikon varian terisi (filled) indigo-600
   + label tebal; nonaktif slate-400 (text-cocoa-400). */
.nk-dock-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #ffffff;
  border-top: 1px solid #E2E8F0;
}
.nk-dock {
  margin: 0 auto;
  width: min(100%, 640px);
  padding-bottom: env(safe-area-inset-bottom);
}
.nk-tabs {
  display: flex;
}
.nk-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 2px 8px;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  transition: color 0.2s;
}
.nk-tab.hidden {
  display: none;
}
.nk-tab .ic-fill {
  display: none;
}
.nk-dock a[data-tab].text-brand-600 {
  font-weight: 800;
}
.nk-dock a[data-tab].text-brand-600 .ic-fill {
  display: block;
}
.nk-dock a[data-tab].text-brand-600 .ic-out {
  display: none;
}

/* Pill status order: menunggu=lavender, sukses=mint, gagal=merah lembut. */
.nk-st-wait {
  background: #EDE9FE;
  color: #6D28D9;
  border: 1px solid #DDD6FE;
}
.nk-st-ok {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}
.nk-st-bad {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

/* Input/select/textarea berbatas #DDD6FE (semua form interior + widget):
   border gradien lavender seperti .search-box homepage, radius 11px.
   Selector atribut agar berlaku juga untuk markup hasil render JS. */
input:not(:disabled)[class*='DDD6FE'],
select:not(:disabled)[class*='DDD6FE'],
textarea:not(:disabled)[class*='DDD6FE'] {
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #DDD6FE, #C4B5FD, #D1FAE5) border-box;
  border-radius: 11px;
}

/* Panel "Menunggu SMS" pada detail order: lavender menggantikan amber. */
[data-od='waiting'] {
  background: #F5F3FF;
  border-color: #DDD6FE;
}
[data-od='waiting'] .text-amber-800 {
  color: #6D28D9;
}

/* Nomor langkah pada widget Beli OTP: lingkaran gradien violet. */
.nk-stepnum {
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.25);
}

/* Ubin logo "N" gradien — gaya .modal-mark homepage, dipakai di kartu
   login/register agar sama dengan modal masuk di homepage. */
.nk-modal-mark {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.28);
}

/* Header tabel admin: lavender pucat. */
#admin-main thead tr {
  background: linear-gradient(120deg, #F5F3FF, #ECFDF5);
}
#admin-main thead th {
  color: #6D28D9;
}

/* =============================================================================
   ROMBAK STRUKTUR INTERIOR (31 Okt) — tata letak BARU per tab, berbeda
   secara struktur dari SendOTP: Beranda = jangkar gelap menyatu + strip
   populer + timeline; Beli OTP = grid ubin katalog + bar beli sticky;
   Pesanan = segmented Aktif|Riwayat; Akun = kepala profil gradien + menu.
   ========================================================================== */

/* Tombol hantu di atas permukaan gelap (aksi kedua di kartu saldo). */
.nk-btn-ghost-dark {
  border: 1px solid rgba(221, 214, 254, 0.45);
  color: #EDE9FE;
  background: rgba(255, 255, 255, 0.06);
}
.nk-btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* Strip "Layanan Populer" Beranda: ubin horizontal bisa digeser. */
.nk-pop-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.nk-pop-strip::-webkit-scrollbar {
  height: 6px;
}
.nk-pop-tile {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 132px;
  text-align: left;
  cursor: pointer;
  padding: 12px;
  border-radius: 17px;
  border: 1px solid transparent;
  background:
    linear-gradient(150deg, #ffffff 0%, #F8FAFC 75%, #F8FAFC 100%) padding-box,
    linear-gradient(135deg, #DDD6FE 0%, #C4B5FD 42%, #D1FAE5 100%) border-box;
  box-shadow: 0 10px 26px rgba(30, 27, 75, 0.07);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.nk-pop-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(30, 27, 75, 0.13);
}

/* Keadaan kosong daftar order di Beranda: kotak putus-putus, bukan kartu. */
#dash-active > p {
  border: 1.5px dashed #DDD6FE;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
}

/* Bilah progres meluncur pada panel tunggu order aktif di Beranda. */
#dash-active [data-od='waiting'] {
  position: relative;
  overflow: hidden;
}
#dash-active [data-od='waiting']::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, #7C3AED, #10B981);
  animation: nk-progress 1.6s ease-in-out infinite;
}
@keyframes nk-progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(280%);
  }
}

/* Timeline "Aktivitas Terakhir": titik + garis vertikal lavender. */
.nk-timeline {
  position: relative;
}
.nk-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #DDD6FE, #EDE9FE);
}
.nk-timeline > p {
  position: relative;
}
.nk-tl-item {
  position: relative;
  display: block;
  padding: 9px 0 9px 26px;
}
.nk-tl-dot {
  position: absolute;
  left: 2px;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  background: #C4B5FD;
  box-shadow: 0 0 0 1.5px #DDD6FE;
}
.nk-tl-dot.ok {
  background: #10B981;
  box-shadow: 0 0 0 1.5px #A7F3D0;
}
.nk-tl-dot.bad {
  background: #EF4444;
  box-shadow: 0 0 0 1.5px #FECACA;
}
.nk-tl-dot.wait {
  background: #7C3AED;
  box-shadow: 0 0 0 1.5px #DDD6FE;
}

/* Kode OTP pada baris order: mono besar berjarang. */
.nk-code-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.22em;
}

/* Pil segmented (Pesanan: Aktif | Riwayat). */
.nk-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: #F5F3FF;
  border: 1px solid #EDE9FE;
}
.nk-seg button {
  border-radius: 999px;
  padding: 7px 18px;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  transition:
    background 0.2s,
    color 0.2s;
}
.nk-seg button.nk-seg-on {
  background: linear-gradient(110deg, #7C3AED, #A78BFA);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.25);
}

/* Kicker langkah (Beli OTP): gaya .section-kicker homepage. */
.nk-step-head {
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: #7C3AED;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Ubin katalog Beli OTP: kartu visual gaya .service-card homepage. */
.nk-svc-tile {
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  cursor: pointer;
  padding: 14px;
  border-radius: 17px;
  border: 1px solid transparent;
  background:
    linear-gradient(150deg, #ffffff 0%, #F8FAFC 75%, #F8FAFC 100%) padding-box,
    linear-gradient(135deg, #DDD6FE 0%, #C4B5FD 42%, #D1FAE5 100%) border-box;
  box-shadow: 0 10px 26px rgba(30, 27, 75, 0.07);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.nk-svc-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(30, 27, 75, 0.13);
}
.nk-avail-pill {
  font-size: 9.5px;
  font-weight: 700;
  color: #059669;
  background: #ECFDF5;
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.nk-svc-go {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #6D28D9;
  white-space: nowrap;
}

/* Chip negara populer pada widget Beli OTP. */
.nk-cchip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid #DDD6FE;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
}
.nk-cchip:hover {
  border-color: #A78BFA;
}
.nk-cchip.on {
  background: linear-gradient(110deg, #7C3AED, #A78BFA);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(139, 92, 246, 0.25);
}

/* Pil jumlah (statis: satu pesanan = satu nomor). */
.nk-qty-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid #EDE9FE;
  background: #F5F3FF;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.nk-qty-pill b {
  color: #6D28D9;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Bar ringkasan + tombol Beli: sticky melayang DI ATAS dock bawah,
   permukaan gelap seperti dock (bukan panel form statis). */
.nk-buybar {
  position: sticky;
  bottom: calc(94px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(115deg, rgba(30, 27, 75, 0.97), rgba(76, 29, 149, 0.97));
  border: 1px solid rgba(221, 214, 254, 0.3);
  box-shadow: 0 16px 38px rgba(30, 27, 75, 0.35);
  color: #ffffff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nk-buybar [data-w='total-label'] {
  color: #94A3B8;
}
.nk-buybar [data-w='stock'] {
  color: #94A3B8;
}

/* Ubin nominal cepat Isi Ulang (nonaktif selama SEGERA HADIR). */
.nk-nom-tile {
  border: 1.5px dashed #DDD6FE;
  background: #F8FAFC;
  border-radius: 16px;
  padding: 14px 6px;
  text-align: center;
  cursor: not-allowed;
}

/* Kepala profil gradien (Profil): avatar inisial lingkaran gaya kaca —
 * selaras ubin statistik kartu yang sama; tanpa gradasi/mint. */
.nk-avatar-init {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 24px rgba(30, 27, 75, 0.3);
  flex: none;
}
.nk-stat-dark {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(221, 214, 254, 0.22);
  padding: 10px 12px;
}
.nk-stat-dark .lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* Daftar menu Akun: baris ikon + label + chevron (bukan kartu bertumpuk). */
.nk-menu-list > * + * {
  border-top: 1px solid #F5F3FF;
}
.nk-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: #0F172A;
  transition: background 0.18s;
}
.nk-menu-row:hover {
  background: #F8FAFC;
}
.nk-menu-row.hidden {
  display: none;
}
.nk-menu-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #F5F3FF;
  color: #7C3AED;
  border: 1px solid #EDE9FE;
  flex: none;
}
.nk-menu-ic.danger {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}
.nk-menu-ic svg {
  width: 19px;
  height: 19px;
}
.nk-menu-chev {
  margin-left: auto;
  color: #DDD6FE;
  font-size: 20px;
  line-height: 1;
}