/* ============================================================
   nasabah-theme.css — TEMA SP Nasabah ("Trust Blue").

   Menimpa token tema (CSS custom property) HANYA di dalam kerangka nasabah
   (.nb-shell). Kelas nb-* dan komponen bersama (sp-btn, sp-input, form-group)
   yang hidup di dalamnya otomatis ikut bertema — tanpa mengubah satu baris
   markup pun. Area petugas TIDAK tersentuh (tulangnya di luar .nb-shell).

   Dimuat PALING AKHIR di index.html (sesudah nasabah.css); naikkan `?v=`
   setiap berkas ini diubah, kalau tidak WebView memakai salinan lama.

   Spesifikasi & angka kontras: docs/sp-nasabah-theme-spec.md
   Versi mesin: docs/sp-nasabah-tokens.json
   ============================================================ */

/* ── 1. MODE TERANG ─────────────────────────────────────────── */
.nb-shell {
	font-family: var(--font-body);

	/* Merek */
	--accent: #1E4BD8;
	--accent-hover: #1839AE;
	--accent-light: #E3EBFF;
	--accent-dark: #1839AE;
	--accent-green: #0B7A57;
	--accent-red: #C62828;
	--accent-orange: #A85A08;
	--accent-cyan: #0C7A6E;

	/* Permukaan & teks */
	--bg: #F4F7FB;
	--surface: #FFFFFF;
	--surface-solid: #FFFFFF;
	--surface-hover: #F8FAFC;
	--surface-alt: #F1F5F9;
	--panel-fill: #FFFFFF;
	--panel-border: #E4E9F0;
	--panel-shadow: var(--shadow-card);
	--qr-panel: #FFFFFF;          /* panel QRIS: putih FUNGSIONAL (QR harus ter-scan di latar terang) */
	--on-accent: #FFFFFF;         /* teks di atas isian aksen — selalu berpasangan dengan --nb-btn-primary / gradien merek */
	--text-primary: #0F172A;
	--text-secondary: #475569;
	--text-tertiary: #5A6980;
	--text-muted: #64748B;

	/* Garis */
	--border-color: #D3DAE4;
	--border-light: #E4E9F0;
	--border-subtle: #EEF2F7;
	--border-medium: #D3DAE4;
	--divider: #E9EEF5;

	/* Isian */
	--input-bg: #F8FAFC;
	--input-border: #8994A6;
	--input-border-hover: #7E8B9E;
	--input-text: #0F172A;

	/* Tabel & penanda */
	--table-stripe: #F1F5F9;
	--table-hover: #EEF2F7;
	--th-bg: #F8FAFC;
	--badge-bg: #E3EBFF;
	--badge-text: #1839AE;
	--modal-bg: #FFFFFF;
	--scrollbar-thumb: #CBD5E1;

	/* Bentuk */
	--radius-card: 16px;
	--radius-pill: 9999px;
	--nb-kartu-radius: 16px;
	--nb-hero-radius: 20px;
	--nb-nav-radius: 26px;
	--nb-btn-h: 48px;
	--nb-header-h: 48px;
	--nb-gutter: 16px;
	--nb-gap-kartu: 12px;
	--nb-pad-kartu: 14px;
	--nb-pad-hero: 16px;

	/* Bayangan */
	--shadow-card: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08);
	--shadow-dropdown: 0 24px 64px rgba(15,23,42,.24);
	--nb-shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
	--nb-shadow-nav: 0 4px 12px rgba(15,23,42,.10), 0 12px 32px rgba(15,23,42,.12);
	--nb-shadow-brand: 0 6px 16px rgba(30,75,216,.28);
	--nb-shadow-hero: 0 10px 30px rgba(30,75,216,.28);

	/* Merek sebagai LATAR (beda dari merek sebagai teks — lihat spec §0.4) */
	--nb-btn-primary: #1E4BD8;
	--nb-btn-primary-hover: #1839AE;
	--nb-btn-secondary: #0C7A6E;
	--nb-btn-secondary-hover: #0A6A60;
	--nb-btn-danger: #C62828;
	--nb-btn-danger-hover: #A31E1E;
	--nb-hero-from: #1E4BD8;
	--nb-hero-to: #12308F;
	--nb-header-bg: linear-gradient(135deg, #1E4BD8 0%, #1839AE 100%);
	--nb-hero-plat-bg: #FFFFFF;
	/* Teks di atas `--nb-btn-secondary` (spec §3.2 `on.secondary`): putih di mode terang,
	   hijau tua di mode gelap — sekunder mode gelap (#34D399) terlalu terang untuk teks putih. */
	--nb-on-secondary: #FFFFFF;

	/* Selubung putih di atas PERMUKAAN MEREK (kepala, hero, tombol ikon, chip).
	   Nilainya sama di kedua mode: gradien merek selalu gelap, jadi putih
	   transparan tetap terbaca di atasnya (spec §11.1 / §11.3). Dipakai
	   LayoutNasabah.razor + nasabah.css supaya tidak ada rgba keras di sana. */
	--nb-on-brand-fill: rgba(255,255,255,.16);
	--nb-on-brand-fill-hover: rgba(255,255,255,.26);
	--nb-on-brand-border: rgba(255,255,255,.42);
	--nb-on-brand-divider: rgba(255,255,255,.22);
	--nb-on-brand-deco: rgba(255,255,255,.10);
	--nb-on-brand-chip: rgba(255,255,255,.28);

	/* Radius tambahan (spec §6): radius.md untuk isian/chip/kotak pesan. */
	--nb-radius-md: 12px;

	/* Status */
	--nb-success-soft: #E7F8EF;
	--nb-danger-soft: #FEECEC;
	--nb-danger-border: rgba(198,40,40,.28);
	--nb-warning-soft: #FEF3C7;
	--nb-warning-text: #8A4B08;
	--nb-warning-fill: #F59E0B;
	--nb-warning-border: rgba(138,75,8,.25);
	--nb-on-warning: #3B2606;
	--nb-info-soft: #EEF4FF;
	--nb-info-text: #1E4BD8;
	--nb-scrim: rgba(15,23,42,.48);
	--focus-ring: rgba(30,75,216,.30);

	/* Huruf */
	--font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	/* ── Skala tipe §4.2 — semua ukuran huruf layar nasabah ───────────────── */
	--nb-fs-display: 34px;
	--nb-fs-headline: 30px;
	--nb-fs-title-lg: 20px;
	--nb-fs-title: 17px;
	--nb-fs-subtitle: 15px;
	--nb-fs-body: 14px;
	--nb-fs-body-sm: 13px;
	--nb-fs-label: 12px;
	--nb-fs-caption: 11.5px;
	--nb-fs-micro: 10.5px;
	--nb-fs-overline: 11px;
	--nb-fs-input: 16px;
	--nb-otp-letter: .4em;      /* jarak antar-huruf kode OTP (layar Daftar) */

	/* ── Ukuran ikon Material Symbols §10 ─────────────────────────────────── */
	--nb-ikon-16: 16px;
	--nb-ikon-17: 17px;
	--nb-ikon-18: 18px;
	--nb-ikon-19: 19px;
	--nb-ikon-20: 20px;
	--nb-ikon-22: 22px;
	--nb-ikon-24: 24px;
	--nb-ikon-26: 26px;
	--nb-ikon-28: 28px;
	--nb-ikon-38: 38px;
	--nb-ikon-40: 40px;        /* ikon keadaan kosong/gagal (spec §11.8) */
	--nb-ikon-nudge: -3px;        /* turun-naik ikon inline pada baris teks */
	--nb-ikon-nudge-sm: -2px;

	/* ── Spasi §5 — kisi 4px ──────────────────────────────────────────────── */
	--nb-sp-1: 4px;
	--nb-sp-2: 8px;
	--nb-sp-3: 12px;
	--nb-sp-4: 16px;
	--nb-sp-5: 20px;
	--nb-sp-6: 24px;
	--nb-sp-8: 32px;
	--nb-sp-10: 40px;
	--nb-sp-12: 48px;

	/* ── Radius §6 ────────────────────────────────────────────────────────── */
	--nb-r-xs: 6px;
	--nb-r-sm: 8px;
	--nb-r-md: 12px;
	--nb-r-lg: 16px;
	--nb-r-xl: 20px;
	--nb-r-nav: 26px;
	--nb-r-pill: 9999px;

	/* ── Garis §8 ─────────────────────────────────────────────────────────── */
	--nb-hairline: 1px;

	/* ── Jarak antar huruf (peran tipe §4.2) ──────────────────────────────── */
	--nb-ls-tighter: -.5px;
	--nb-ls-tight: -.2px;
	--nb-ls-bagian: .5px;
	--nb-ls-overline: .6px;
	--nb-ls-micro: .4px;
	--nb-ls-sembunyi: 3px;        /* titik-titik saldo tersembunyi */
	--nb-ls-otp: 4px;             /* kotak OTP */

	/* ── Sasaran sentuh §10 ───────────────────────────────────────────────── */
	--nb-tap: 44px;

	/* ── Ukuran komponen (nilai warisan dipertahankan; halaman tidak lagi
	      menulis angka mentah) ───────────────────────────────────────────── */
	--nb-avatar: 34px;
	--nb-kotak-kontrol: 36px;
	--nb-kotak-ikon: 32px;
	--nb-centang: 17px;           /* kotak centang */
	--nb-hero-plat: 72px;
	--nb-dekor-sudut: 176px;
	--nb-dekor-atas: -64px;
	--nb-dekor-kanan: -46px;
	--nb-sentuh-1: -6px;          /* bidang sentuh tambahan (::before) */
	--nb-sentuh-2: -5px;
	--nb-gulir-h: 226px;          /* tinggi daftar produk yang digulir */
	--nb-kerangka-max: 480px;
	--nb-teks-max: 260px;
	--nb-tab-teks-max: 120px;
	--nb-kosong-h: 104px;         /* tinggi minimum keadaan kosong */
	--nb-kosong-h-sm: 84px;
	--nb-kosong-h-xs: 56px;
	--nb-kisi-min: 140px;         /* lebar minimum butir kisi */
	--nb-kisi-min-sm: 96px;
	--nb-kisi-min-xs: 70px;
	--nb-blur-nav: 8px;

	/* ── Ukuran kepala & pil nav (spec §11.1 / §11.2) ─────────────────────
	   `--nb-header-pad`: padding tegak kepala — 10px membuat tinggi kepala
	   pas 48px (10 + isi 28 + 10) sama dengan `--nb-header-h`.
	   `--nb-nav-pad`: padding pil nav — wajib 6px supaya tab aktif
	   radius 20px + 6px = 26px = radius induk `--nb-nav-radius` (sebidang). */
	--nb-header-pad: 10px;
	--nb-nav-pad: 6px;

	/* ── Gerak §9 — dipakai transisi bersama (tombol, tab nav, label tab) ── */
	--nb-motion-fast: 120ms;
	--nb-motion-base: 180ms;
	--nb-motion-slow: 240ms;
	--nb-ease-standard: cubic-bezier(.2, 0, 0, 1);
	--nb-ease-out: cubic-bezier(0, 0, .2, 1);
}

/* ── 2. MODE GELAP (class .dark dipasang ThemeService di <html>/<body>) ── */
/* Peran ganda 2026-10-17: `.nb-dark` (kunci localStorage `snr-theme-nasabah`)
   menentukan gelap/terang NASABAH sendiri — kelas ini dipasang di kerangka
   LayoutNasabah, sehingga dokumen global boleh tetap `light` (petugas) tanpa
   memaksa PWA ikut terang. Token gelap SAMA di dua tempat itu; jangan ubah
   salah satunya tanpa mengikutkan yang lain. */
.dark .nb-shell,
.nb-dark.nb-shell {
	--accent: #6E93FF;
	--accent-hover: #8FB0FF;
	--accent-light: rgba(110,147,255,.16);
	--accent-dark: #8FB0FF;
	--accent-green: #34D399;
	--accent-red: #F87171;
	--accent-orange: #FBBF24;
	--accent-cyan: #34D399;

	--bg: #0A0F1C;
	--surface: #121A2B;
	--surface-solid: #121A2B;
	--surface-hover: #1A2440;
	--surface-alt: rgba(255,255,255,.05);
	--panel-fill: #182136;
	--panel-border: rgba(255,255,255,.08);
	--panel-shadow: none;
	--qr-panel: #FFFFFF;
	--on-accent: #FFFFFF;
	--text-primary: #E8EDF7;
	--text-secondary: #AEBBD0;
	--text-tertiary: #8A99B3;
	--text-muted: #8A99B3;

	--border-color: rgba(255,255,255,.18);
	--border-light: rgba(255,255,255,.10);
	--border-subtle: rgba(255,255,255,.06);
	--border-medium: rgba(255,255,255,.18);
	--divider: rgba(255,255,255,.08);

	--input-bg: rgba(255,255,255,.06);
	--input-border: rgba(255,255,255,.36);
	--input-border-hover: rgba(255,255,255,.50);
	--input-text: #E8EDF7;

	--table-stripe: rgba(255,255,255,.05);
	--table-hover: rgba(255,255,255,.08);
	--th-bg: #121A2B;
	--badge-bg: rgba(110,147,255,.16);
	--badge-text: #8FB0FF;
	--modal-bg: #182136;
	--scrollbar-thumb: rgba(255,255,255,.24);

	--shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.32);
	--shadow-dropdown: 0 24px 64px rgba(0,0,0,.60);
	--nb-shadow-1: 0 1px 2px rgba(0,0,0,.40);
	--nb-shadow-nav: 0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.50);
	--nb-shadow-brand: 0 6px 16px rgba(0,0,0,.45);
	--nb-shadow-hero: 0 10px 30px rgba(0,0,0,.45);

	--nb-btn-primary: #2C55E6;
	--nb-btn-primary-hover: #3B62F6;
	--nb-btn-secondary: #34D399;
	--nb-btn-secondary-hover: #6EE7B7;
	--nb-btn-danger: #C62828;
	--nb-btn-danger-hover: #A31E1E;
	--nb-hero-from: #2C55E6;
	--nb-hero-to: #1B3690;
	--nb-header-bg: linear-gradient(135deg, #2C55E6 0%, #14245F 100%);
	--nb-hero-plat-bg: #FFFFFF;
	--nb-on-secondary: #04231F;   /* teks di atas sekunder gelap #34D399 (spec §3.2) */

	--nb-success-soft: rgba(52,211,153,.16);
	--nb-danger-soft: rgba(248,113,113,.16);
	--nb-danger-border: rgba(248,113,113,.32);
	--nb-warning-soft: rgba(251,191,36,.16);
	--nb-warning-text: #FBBF24;
	--nb-warning-fill: #FBBF24;
	--nb-warning-border: rgba(251,191,36,.32);
	--nb-on-warning: #3B2606;
	--nb-info-soft: rgba(110,147,255,.16);
	--nb-info-text: #8FB0FF;
	--nb-scrim: rgba(2,6,16,.68);
	--focus-ring: rgba(110,147,255,.40);
}

/* ── 2b. MODE GELAP NASABAH SENDIRI (`nb-dark`) ───────────────────────────
   Nasabah menentukan gelap/terang sendiri, TERPISAH dari aplikasi petugas.
   Petugas memakai class `.dark` di <html>/<body> (ThemeService), yang berdampak
   ke SEMUA elemen termasuk `.nb-shell` — sehingga tema petugas menimpa pilihan
   nasabah. Kelas `.nb-dark` dipasang di `.nb-shell` oleh LayoutNasabah.razor
   (kunci localStorage `snr-theme-nasabah`), jadi memilih gelap/terang di PWA
   nasabah tidak lagi bergantung pada apa yang disetel petugas.
   Token-nya SAMA dengan `.dark .nb-shell` di atas; ditulis sebagai block sendiri
   agar berlaku walau dokumen global justru `light`. */
.nb-dark.nb-shell {
	--accent: #6E93FF;
	--accent-hover: #8FB0FF;
	--accent-light: rgba(110,147,255,.16);
	--accent-dark: #8FB0FF;
	--accent-green: #34D399;
	--accent-red: #F87171;
	--accent-orange: #FBBF24;
	--accent-cyan: #34D399;

	--bg: #0A0F1C;
	--surface: #121A2B;
	--surface-solid: #121A2B;
	--surface-hover: #1A2440;
	--surface-alt: rgba(255,255,255,.05);
	--panel-fill: #182136;
	--panel-border: rgba(255,255,255,.08);
	--panel-shadow: none;
	--qr-panel: #FFFFFF;
	--on-accent: #FFFFFF;
	--text-primary: #E8EDF7;
	--text-secondary: #AEBBD0;
	--text-tertiary: #8A99B3;
	--text-muted: #8A99B3;

	--border-color: rgba(255,255,255,.18);
	--border-light: rgba(255,255,255,.10);
	--border-subtle: rgba(255,255,255,.06);
	--border-medium: rgba(255,255,255,.18);
	--divider: rgba(255,255,255,.08);

	--input-bg: rgba(255,255,255,.06);
	--input-border: rgba(255,255,255,.36);
	--input-border-hover: rgba(255,255,255,.50);
	--input-text: #E8EDF7;

	--table-stripe: rgba(255,255,255,.05);
	--table-hover: rgba(255,255,255,.08);
	--th-bg: #121A2B;
	--badge-bg: rgba(110,147,255,.16);
	--badge-text: #8FB0FF;
	--modal-bg: #182136;
	--scrollbar-thumb: rgba(255,255,255,.24);

	--shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.32);
	--shadow-dropdown: 0 24px 64px rgba(0,0,0,.60);
	--nb-shadow-1: 0 1px 2px rgba(0,0,0,.40);
	--nb-shadow-nav: 0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.50);
	--nb-shadow-brand: 0 6px 16px rgba(0,0,0,.45);
	--nb-shadow-hero: 0 10px 30px rgba(0,0,0,.45);

	--nb-btn-primary: #2C55E6;
	--nb-btn-primary-hover: #3B62F6;
	--nb-btn-secondary: #34D399;
	--nb-btn-secondary-hover: #6EE7B7;
	--nb-btn-danger: #C62828;
	--nb-btn-danger-hover: #A31E1E;
	--nb-hero-from: #2C55E6;
	--nb-hero-to: #1B3690;
	--nb-header-bg: linear-gradient(135deg, #2C55E6 0%, #14245F 100%);
	--nb-hero-plat-bg: #FFFFFF;
	--nb-on-secondary: #04231F;

	--nb-success-soft: rgba(52,211,153,.16);
	--nb-danger-soft: rgba(248,113,113,.16);
	--nb-danger-border: rgba(248,113,113,.32);
	--nb-warning-soft: rgba(251,191,36,.16);
	--nb-warning-text: #FBBF24;
	--nb-warning-fill: #FBBF24;
	--nb-warning-border: rgba(251,191,36,.32);
	--nb-on-warning: #3B2606;
	--nb-info-soft: rgba(110,147,255,.16);
	--nb-info-text: #8FB0FF;
	--nb-scrim: rgba(2,6,16,.68);
	--focus-ring: rgba(110,147,255,.40);
}

.nb-dark.nb-shell .sp-btn-primary {
	background: var(--nb-btn-primary);
	color: var(--on-accent);
}
.nb-dark.nb-shell .sp-btn-primary:hover:not(:disabled) { background: var(--nb-btn-primary-hover); }
.nb-dark.nb-shell .sp-btn-green { background: var(--nb-btn-secondary); color: var(--nb-on-secondary); }
.nb-dark.nb-shell .sp-btn-green:hover:not(:disabled) { background: var(--nb-btn-secondary-hover); }
.nb-dark.nb-shell .sp-btn-red { background: var(--nb-btn-danger); color: var(--on-accent); }
.nb-dark.nb-shell .sp-btn-red:hover:not(:disabled) { background: var(--nb-btn-danger-hover); }
.nb-dark.nb-shell .sp-btn-orange { background: var(--nb-warning-fill); color: var(--nb-on-warning); }

/* ── 3. Permukaan berkemampuan merek: gradient WAJIB dari token ini ──
   `var(--accent)` tidak boleh jadi latar berteks putih di mode gelap
   (teks putih di atas aksen biru terang hanya 2,4:1). Lihat spec §0.4. */
.nb-shell .nb-hero,
.nb-shell .nb-saldo {
	background: linear-gradient(135deg, var(--nb-hero-from) 0%, var(--nb-hero-to) 100%);
	box-shadow: var(--nb-shadow-hero);
}
/* Kepala = permukaan kartu tipis ala AgenKilat (permintaan pemilik 2026-10-16):
   BUKAN gradient merek. Di PWA frame gradient biru terlihat "aneh"; permukaan
   terang + garis rambut bawah lebih tenang & elegan. Teks memakai warna teks
   biasa (bukan on-accent putih) karena latarnya kini permukaan. */
.nb-shell .nb-header {
	background: var(--surface-solid, var(--surface));
	border-bottom: var(--nb-hairline) solid var(--border-light);
	min-height: var(--nb-header-h);
}
.nb-shell .nb-header .nb-nama { color: var(--text-primary); }
.nb-shell .nb-header .nb-sub { color: var(--text-tertiary); }
.nb-shell .nb-hero-plat { background: var(--nb-hero-plat-bg); }
.nb-shell .nb-saldo-mata { background: var(--nb-on-brand-chip); }

/* Isian merek lain (segmen/tab/segmen-aktif di dalam halaman — .ntf-seg.aktif,
   .nkr-seg.aktif, .ntg-chip.aktif, .ntf-opsi.aktif) WAJIB memakai pasangan yang sama:
     background: var(--nb-btn-primary); color: var(--on-accent);
   bukan `background: var(--accent)` dengan teks putih — di mode gelap aksennya biru
   terang dan teks putih di atasnya hanya 2,4:1 (audit §3.1: empat baris warna putih keras).
   Aturannya ditulis di spec §11.5; tidak ada selektor tetap di sini karena kelasnya
   milik masing-masing halaman. */

/* Panel QRIS: putih FUNGSIONAL di kedua mode (QR harus ter-scan di latar terang).
   .nq-qr { background: var(--qr-panel); }  — warna putih keras yang kini diganti token. */

/* ── 4. Tombol: aksen sebagai LATAR tidak boleh memakai --accent terang di mode gelap ──
   Varian lengkap (primer/sekunder/amber/bahaya/outline) sekarang dipetakan ke token
   di `nasabah.css` bagian 12 — berlaku di KEDUA mode, jadi di sini tinggal memastikan
   mode gelap memakai `--nb-btn-*` (bukan `--accent` biru terang).
   Dua selektor gelap (2026-10-17): `.dark` = tema global petugas, `.nb-dark` = tema
   gelap NASABAH sendiri (ter-scoped di `.nb-shell`, tidak bergantung `.dark`). */
.dark .nb-shell .sp-btn-primary,
.nb-dark.nb-shell .sp-btn-primary {
	background: var(--nb-btn-primary);
	color: var(--on-accent);
}
.dark .nb-shell .sp-btn-primary:hover:not(:disabled),
.nb-dark.nb-shell .sp-btn-primary:hover:not(:disabled) { background: var(--nb-btn-primary-hover); }
.dark .nb-shell .sp-btn-green,
.nb-dark.nb-shell .sp-btn-green { background: var(--nb-btn-secondary); color: var(--nb-on-secondary); }
.dark .nb-shell .sp-btn-green:hover:not(:disabled),
.nb-dark.nb-shell .sp-btn-green:hover:not(:disabled) { background: var(--nb-btn-secondary-hover); }
.dark .nb-shell .sp-btn-red,
.nb-dark.nb-shell .sp-btn-red { background: var(--nb-btn-danger); color: var(--on-accent); }
.dark .nb-shell .sp-btn-red:hover:not(:disabled),
.nb-dark.nb-shell .sp-btn-red:hover:not(:disabled) { background: var(--nb-btn-danger-hover); }
.dark .nb-shell .sp-btn-orange,
.nb-dark.nb-shell .sp-btn-orange { background: var(--nb-warning-fill); color: var(--nb-on-warning); }

/* ── 5. Kotak pesan: satu-satunya warna keras di nasabah.css dibuang dari sini ── */
/* Catatan 2026-10-17: aturan tombol di atas juga berlaku untuk `.nb-dark`
   (mode gelap nasabah sendiri) — tambahkan selektornya di samping `.dark`
   setiap ada aturan komponen baru yang bergantung mode gelap. */
.nb-shell .nb-ok { background: var(--nb-success-soft); color: var(--accent-green); }
.nb-shell .nb-info { background: var(--nb-info-soft); color: var(--nb-info-text); }
.nb-shell .nb-galat {
	background: var(--nb-danger-soft);
	border: var(--nb-hairline) solid var(--nb-danger-border);
	color: var(--accent-red);
}

/* ── 6. Sasaran sentuh & tinggi kontrol HP ── */
.nb-shell .nb-tab { min-height: var(--tap, var(--nb-tap)); }
@media (max-width: 56.1875em) {
	.nb-shell .sp-btn { height: var(--nb-btn-h); min-height: var(--nb-btn-h); }
}
/* Tepi kiri/kanan ditambah `--safe-l`/`--safe-r` (spec §10 — tepi takik saat HP lanskap);
   aturan ini spesifisitasnya lebih tinggi dari padding `.nb-badan` di LayoutNasabah.razor
   (0,2,0 vs 0,1,0), jadi rumusnya WAJIB ditulis lengkap di sini juga. */
.nb-shell .nb-badan { padding: var(--nb-sp-4) calc(var(--nb-gutter) + var(--safe-r, 0px)) var(--nb-sp-5) calc(var(--nb-gutter) + var(--safe-l, 0px)); }

/* ── 6b. Breakpoint §10 — HP BESAR (≥428px): gutter naik ke `space.5` (20px) ──
   Spec §10: "Gutter 16px; di ≥428px boleh 20px" (§5: tidak ada angka di luar skala
   4px). Kondisi media TIDAK bisa membaca var() (catatan di nasabah.css bag. 12),
   jadi angka mentah hanya muncul sebagai kondisi; isi aturannya murni token:
   `--nb-gutter` → `--nb-sp-5`. Kepala, badan, pil nav, hero, dan kartu saldo semuanya
   membaca `--nb-gutter`, jadi satu aturan ini menjaga semuanya sejajar — tidak ada
   layar yang bergeser sendiri-sendiri. Layar ≤427px tetap 16px (spec §5: 14px lama
   memotong tepi kartu di layar 360px). */
@media (min-width: 428px) {
	.nb-shell { --nb-gutter: var(--nb-sp-5); }
}

/* ── 6c. Breakpoint §10 — TABLET SENTUH (≥900px + pointer:coarse) ──
   Sapuan mobile `mobile.css` berhenti di 899px, jadi tablet lanskap dengan layar sentuh
   jatuh ke aturan DESKTOP: tombol 38px (shared.css) dan isian M3 46px TANPA label —
   keduanya perlu dinaikkan ke sasaran sentuh 44px (spec §10), terukur di audit
   `audit/sentuh.mjs` (pass 1024x768 + emulasi sentuh: 26 pelanggaran). Blok ini memakai
   token yang SAMA dengan sapuan HP: `--nb-btn-h` (48px, tindakan uang), `--tinggi-isian`
   (46px, spec §10 "jangan diubah"), `--tap` (44px, isian tanpa label / elemen bebas).
   Kondisi media tidak bisa membaca var() (catatan di nasabah.css bag. 12), jadi angka
   mentah hanya muncul sebagai KONDISI — isi aturannya murni token. `pointer: coarse`
   membuat mouse desktop (≥900px, presisi) TIDAK kena.
   Aturan `:not(:focus)` sengaja ditiadakan: isian M3 berlabel memakai `:focus-within`
   (shared.css), jadi tinggi fokus tak berubah; dan `input:not(.sp-input)` hanya menimpa
   isian telanjang di luar `.form-aksi` (tinggi 38px di desktop) → `--tap`. */
@media (min-width: 900px) and (pointer: coarse) {
	.nb-shell .sp-btn { height: var(--nb-btn-h); min-height: var(--nb-btn-h); }
	.nb-shell input.sp-input,
	.nb-shell .sp-select,
	.nb-shell .numinput,
	.nb-shell textarea { min-height: var(--tinggi-isian); }
	.nb-shell input:not(.sp-input) { min-height: var(--tap, var(--nb-tap)); }
}

/* ── 7. Hormati pengguna yang mematikan animasi ── */
@media (prefers-reduced-motion: reduce) {
	.nb-shell *, .nb-shell *::before, .nb-shell *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}