@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'Inter', system-ui, -apple-system, sans-serif;

    /* ── FONT KERTAS — SENGAJA DI LUAR TEMA ──
       Laporan cetak (`…/cetak`, cetak.css) memakai token ini, BUKAN --font-body.
       Nilainya LITERAL (bukan `var(--font-body)`), jadi tema yang mengganti mesin
       huruf aplikasi — Mission Control (Space Grotesk) atau Digital Banking (Inter)
       — tidak mengubah satu huruf pun di kertas. Bug yang dicegah: `* { font-family:
       var(--font-body) }` di bawah ini dulu menurun ke halaman cetak, sehingga
       laporan yang sudah disetujui ikut berubah saat user berganti tema.

       Ganti bentuk huruf kertas = ubah tiga baris ini SAJA (jangan menaruhnya di
       blok .dark / .mc / .banking). */
    --font-cetak: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-cetak-judul: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-cetak-mono: 'Courier New', ui-monospace, monospace;

    /* Radius field M3 (ring + input) — satu angka untuk keduanya; tema boleh
     menimpanya (Digital Banking 12px). Dibaca shared.css blok 'Outlined Text Field'. */
    --m3-field-radius: 10px;

    --accent: #047857;
    --accent-hover: #065F46;
    --accent-light: #D1FAE5;
    --accent-dark: #065F46;
    --accent-cyan: #0E7490;
    --accent-green: #059669;
    --accent-orange: #C2410C;
    --accent-red: #DC2626;
    /* ── Tint ikon menu utama (sidebar + bottom nav) ──
       Satu warna per menu operasi, semuanya tetap di jalur tema (emerald/cyan/orange
       milik aksen di atas; sisanya pasangan indigo/violet/rose yang senada).
       Token ini punya nilai di KEDUA blok tema — jangan menulis warna langsung di
       MainLayout, supaya mode terang/gelap tidak bisa menyimpang sendiri.
       Dipakai lewat `--tint` per item `data-title` (lihat MainLayout.razor). */
    --tint-dashboard: #0E7490;   /* = --accent-cyan  */
    --tint-master: #4F46E5;
    --tint-transaksi: #C2410C;   /* = --accent-orange */
    --tint-akuntansi: #047857;   /* = --accent       */
    --tint-laporan: #7C3AED;
    --tint-tools: #BE123C;
    --gold: #B45309;
    --gold-soft: #FEF3C7;
    --near-black: #0F172A;
    --gray-700: #334155;
    --gray-500: #64748B;
    --gray-400: #94A3B8;
    --gray-200: #E2E8F0;
    --gray-100: #F1F5F9;
    --gray-50: #F8FAFC;
    --border-subtle: rgba(15, 23, 42, 0.06);
    --border-medium: rgba(15, 23, 42, 0.12);
    --radius-card: 16px;
    --radius-pill: 9999px;

    /* Permukaan SOLID — flat ala investment platform, tanpa frosted glass.
       (Nama token tetap --glass-* agar tidak mengubah pemakaian di komponen.) */
    --glass-bg: rgba(255, 255, 255, 0.96);
    --glass-bg-strong: rgba(255, 255, 255, 0.98);
    --glass-bg-soft: rgba(255, 255, 255, 0.90);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-blur: 0px;
    --glass-highlight: rgba(255, 255, 255, 1);
    --backdrop-1: #EEF2F7;
    --backdrop-2: #F4F6FA;
    --backdrop-3: #F8FAFC;

    /* Semantic tokens */
    --bg: #F4F6FA;
    --surface: rgba(255, 255, 255, 0.72);
    --surface-solid: rgb(255, 255, 255); /* versi opaque — untuk sticky footer */
    --surface-hover: rgba(255, 255, 255, 0.9);
    /* ── Permukaan PANEL yang NAIK dari halaman (entry form transaksi, kartu) ──
       Di mode terang arah elevasinya ke ATAS (putih); di mode gelap tint putih tipis.
       Sebelumnya panel transaksi memakai --table-stripe untuk latar: di mode terang
       token itu MENGELAP (2% hitam) sehingga panel jadi abu di atas halaman abu
       (kontras terukur 1.04:1) tanpa tepi — persis keluhan "abu di atas abu".
       --table-stripe tetap ada untuk permukaan yang MEMANG turun (track tab,
       chip, strip footer), jangan dipakai sebagai latar panel. */
    --panel-fill: #FFFFFF;
    --panel-border: rgba(15, 23, 42, 0.10);
    --panel-shadow: var(--shadow-card);
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-tertiary: #64748B;
    --text-muted: #64748B;
    --border-color: rgba(15, 23, 42, 0.10);
    /* Mode terang TIDAK punya warna yang lebih terang dari permukaan putih, jadi
       "border light" di sini tetap hairline GELAP. Sebelumnya nilainya
       rgba(255,255,255,0.7) -> garis putih di atas panel putih: 133 pemakaian
       (panel, tabel, kartu) kehilangan tepinya dan halaman terasa tanpa elevasi. */
    --border-light: rgba(15, 23, 42, 0.12);
    --divider: rgba(15, 23, 42, 0.08);
    --header-bg: rgba(255, 255, 255, 0.70);
    --header-border: rgba(15, 23, 42, 0.07);
    --nav-text: #475569;
    --nav-hover-bg: rgba(15, 23, 42, 0.05);
    --nav-hover-text: #0F172A;
    /* Permukaan navigasi (sidebar, bottom nav, bottom sheet) — lebih opaque dari card
       agar teks menu tetap terbaca di atas apapun yang bergulir di belakangnya. */
    --sidebar-bg: rgba(255, 255, 255, 0.88);
    --nav-bar-bg: rgba(255, 255, 255, 0.94);
    /* Pemisah surface chrome ↔ isi halaman (pemakaian: box-shadow .sidebar).
       Di tema TERANG tonal tidak bisa dipakai — putih di atas #EEF2F7 maksimal 1,12:1 —
       jadi pemisahnya bayangan tipis + garis kanan yang sudah ada. */
    --nav-elev: 4px 0 16px -10px rgba(15, 23, 42, 0.18);
    /* Modal — hampir solid: berisi form/tabel, harus konsisten antar semua dialog */
    --modal-bg: rgba(255, 255, 255, 0.96);
    --input-bg: rgba(255, 255, 255, 0.85);
    /* Garis field: 3:1 (WCAG 1.4.11) butuh alpha 0.46 di atas putih; di sini
       dipilih 0.34 (~2,3:1) karena 0.46 membuat bidang isian terlihat berat.
       Kalau ingin patuh penuh, ubah angka 0.34 -> 0.46: satu-satunya tempat. */
    --input-border: rgba(15, 23, 42, 0.34);
    --input-border-hover: rgba(15, 23, 42, 0.56);
    --input-text: #0F172A;
    /* Permukaan TURUN (track tab, chip, strip): 2% hitam nyaris tak terlihat di atas
       halaman abu muda — dinaikkan agar track tab/chip benar-benar terbaca. */
    --table-stripe: rgba(15, 23, 42, 0.06);
    --table-hover: rgba(15, 23, 42, 0.04);
    --th-bg: rgba(248, 250, 252, 0.98);
    --badge-bg: #D1FAE5;
    --badge-text: #047857;
    --loading-bg: #F4F6FA;
    --scrollbar-thumb: #CBD5E1;
    --shadow-card: rgba(15, 23, 42, 0.06) 0px 1px 2px, rgba(15, 23, 42, 0.08) 0px 8px 24px;
    --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
    --shadow-dropdown: 0 12px 40px rgba(15, 23, 42, 0.16);
    --focus-ring: rgba(4, 120, 87, 0.25);
}

/* Trailing icon (search/clear di dalam input) */
.input-trailing-wrapper{position:relative;}
.input-trailing-wrapper .sp-input{padding-right:40px;}
.trailing-icon-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:transparent;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);transition:all 0.12s;padding:0;}
.trailing-icon-btn:hover{background:var(--nav-hover-bg,var(--table-hover));color:var(--accent);}
.trailing-icon-btn + .trailing-icon-btn{right:38px;}
/* Native form controls — popup dropdown <select>, date picker & scrollbar ikut tema.
   Tanpa color-scheme: dark, popup dropdown dirender putih oleh OS di dark theme. */
:root { color-scheme: light; }
.dark { color-scheme: dark; }

/* Popup dropdown native — paint rows eksplisit: sebagian browser/WebView2
   mengabaikan color-scheme untuk popup <select> dan tetap merender putih. */
.dark select option,
.dark select optgroup {
    background-color: #16202F;
    color: #F8FAFC;
}
.dark select option:checked,
.dark select option:hover {
    background-color: #10B981;
    color: #04110B;
}

.dark {
    /* ── "Market Terminal" — dark theme persis gaya investment platform
       referensi (uupm.cc/demo/investment-platform): bg near-black #09090B,
       kartu = tint putih 5% (rgba(255,255,255,.05)) + hairline border
       rgba(255,255,255,.10), radius 16px, tanpa blur/glass. ── */
    --accent: #34D399;
    --accent-hover: #6EE7B7;
    --accent-light: rgba(52, 211, 153, 0.14);
    --accent-dark: #10B981;
    --accent-cyan: #22D3EE;
    --accent-green: #34D399;
    --accent-orange: #FBBF24;
    --accent-red: #F87171;
    /* Tint menu utama — versi mode gelap (lebih terang, di atas near-black).
       Urutan & perannya sama dengan blok :root di atas. */
    --tint-dashboard: #22D3EE;   /* = --accent-cyan   */
    --tint-master: #A5B4FC;
    --tint-transaksi: #FBBF24;   /* = --accent-orange */
    --tint-akuntansi: #34D399;   /* = --accent        */
    --tint-laporan: #C4B5FD;
    --tint-tools: #FDA4AF;
    --gold: #FCD34D;
    --gold-soft: rgba(252, 211, 77, 0.10);
    --near-black: #F8FAFC;
    --gray-700: #CBD5E1;
    --gray-500: #94A3B8;
    --gray-400: #64748B;
    --gray-200: #334155;
    --gray-100: #1E293B;
    --gray-50: #16202F;
    --border-subtle: rgba(255,255,255,0.10);
    --border-medium: rgba(255,255,255,0.16);
    --radius-card: 16px;
    --radius-pill: 9999px;

    /* Glass tokens — PERMUKAAN SLATE SEMI-SOLID (bukan tint biru):
       card master data, stat card & panel solid ke arah slate-900 —
       konsisten dengan datagrid/sidebar/modal; kaca terasa lewat
       border tipis + highlight atas + glow emerald. */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-strong: rgba(255, 255, 255, 0.08);
    --glass-bg-soft: rgba(255, 255, 255, 0.035); /* data-card, data-table, filter-panel */
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --glass-sheen: none;
    --edge-glow: none;
    --backdrop-1: #0C0C11;
    --backdrop-2: #0B0B10;
    --backdrop-3: #09090D;

    /* Semantic tokens */
    --bg: #0B0B10;
    /* Surface & datagrid — tint putih tipis di atas bg gelap (gaya referensi). */
    --surface: rgba(255, 255, 255, 0.05);
    --surface-solid: rgb(22, 22, 27); /* versi opaque — untuk sticky footer */
    --surface-hover: rgba(255, 255, 255, 0.09);
    /* Panel naik dari halaman — di dark sudah benar arahnya (tint putih di atas
       near-black); samakan lewat token agar mode terang & gelap tidak bisa lagi
       menyimpang sendiri-sendiri. */
    --panel-fill: rgba(255, 255, 255, 0.04);
    --panel-border: rgba(255, 255, 255, 0.10);
    --panel-shadow: none;
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-muted: #94A3B8;
    --border-color: rgba(255, 255, 255, 0.10);
    --border-light: rgba(255, 255, 255, 0.12);
    --divider: rgba(255, 255, 255, 0.08);
    --header-bg: rgba(11, 11, 16, 0.55);
    --header-border: rgba(255, 255, 255, 0.08);
    --nav-text: #9AA4B2;
    --nav-hover-bg: rgba(255, 255, 255, 0.07);
    --nav-hover-text: #F8FAFC;
    /* Navigasi hampir solid — sedikit lebih gelap dari bg utama */
    --sidebar-bg: rgba(32, 33, 44, 0.97);
    --nav-bar-bg: rgba(32, 33, 44, 0.99);
    --nav-elev: 6px 0 18px -12px rgba(0, 0, 0, 0.60), inset -1px 0 0 rgba(255, 255, 255, 0.05);
    /* Modal — satu warna untuk SEMUA dialog (page modal, confirm, find) */
    --modal-bg: rgba(22, 22, 27, 0.98);
    --input-bg: rgba(255, 255, 255, 0.06);
    /* 3:1 di atas near-black = alpha 0.34; dipakai 0.30 (~2,7:1). */
    --input-border: rgba(255, 255, 255, 0.30);
    --input-border-hover: rgba(255, 255, 255, 0.52);
    --input-text: #F8FAFC;
    --table-stripe: rgba(255, 255, 255, 0.02);
    --table-hover: rgba(255, 255, 255, 0.05);
    --th-bg: rgba(22, 22, 27, 0.98);
    --badge-bg: rgba(52, 211, 153, 0.16);
    --badge-text: #6EE7B7;
    --loading-bg: #0B0B10;
    --scrollbar-thumb: rgba(255, 255, 255, 0.25);
    --shadow-card: rgba(0,0,0,0.35) 0px 1px 2px, rgba(0,0,0,0.22) 0px 8px 24px;
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.03);
    --shadow-dropdown: 0 12px 40px rgba(0,0,0,0.55);
    --focus-ring: rgba(52, 211, 153, 0.40);
}

* { font-family: var(--font-body); }

html, body {
    min-height: 100vh;
}

/* Ambient gradient backdrop — the light behind the glass */
/* Light backdrop — echo arah cahaya dark theme: glow biru lembut kiri-bawah */
body {
    background:
        radial-gradient(900px 600px at 15% 88%, rgba(15, 23, 42, 0.05), transparent 55%),
        linear-gradient(315deg, var(--backdrop-1) 0%, var(--backdrop-2) 48%, var(--backdrop-3) 100%) fixed;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Dark backdrop — aurora ala uupm.cc (https://uupm.cc/): near-black #0B0B10
   + tiga glow radial lembut (emerald atas, emas kanan, emerald kiri-bawah),
   diadaptasi dari palet biru/oranye aslinya agar konsisten dengan aksen
   emerald investment-platform. Tanpa blur, tanpa glass. */
.dark body {
    background:
        radial-gradient(80% 80% at 50% -20%, rgba(16, 185, 129, 0.14), transparent 60%),
        radial-gradient(50% 50% at 80%, rgba(251, 191, 36, 0.07), transparent 60%),
        radial-gradient(50% 50% at 20% 80%, rgba(52, 211, 153, 0.09), transparent 60%),
        linear-gradient(315deg, var(--backdrop-1) 0%, var(--backdrop-2) 52%, var(--backdrop-3) 100%) fixed;
}

/* ── Glass panel utility ── */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
}

/* ── Kartu solid ala investment platform: tanpa lift, sheen, atau glow ── */
.stat-card, .master-card, .sp-card, .data-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stat-card::before, .master-card::before, .sp-card::before, .data-card::before,
.stat-card::after, .master-card::after, .sp-card::after, .data-card::after {
    content: none;
}
.stat-card:hover, .master-card:hover, .data-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
}
/* Mobile: hilangkan efek glow/sheen/lift pada card list — flat & clean */
@media (max-width: 899px) {
    .stat-card, .master-card, .sp-card, .data-card {
        overflow: hidden;
    }
    .stat-card::before, .master-card::before, .sp-card::before, .data-card::before,
    .stat-card::after, .master-card::after, .sp-card::after, .data-card::after {
        display: none;
    }
    .stat-card:hover, .master-card:hover, .data-card:hover {
        transform: none;
        box-shadow: var(--shadow-glass);
        border-color: var(--glass-border);
    }
}
.sp-btn {
    position: relative;
    overflow: hidden;
    transition: background 0.15s, opacity 0.15s, transform 0.15s ease, box-shadow 0.15s ease;
}
.sp-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}
.sp-btn:active:not(:disabled) {
    transform: translateY(0);
}
.sp-btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(4, 120, 87, 0.35);
}
/* Dark: tombol isi emerald solid + teks gelap (kontras tinggi),
   khas tombol aksi di platform investasi; accent terang dipakai
   untuk teks/ikon/fokus, bukan untuk fill. */
.dark .sp-btn-primary,
.dark .sp-btn-green { background: #10B981; color: #04110B; }
.dark .sp-btn-primary:hover:not(:disabled),
.dark .sp-btn-green:hover:not(:disabled) { background: #34D399; }
.dark .sp-btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.40);
}
.dark .sidebar-user-icon { background: #10B981; }

/* ── Single font — Inter everywhere, tabular digits for figures ── */
.stat-value, .card-amount, .view-money, .table-summary strong, .paging-info strong {
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.2px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }

/* ── Accessible focus ring (keyboard) ──
   PENTING: input teks TIDAK boleh menggambar ring/outline sendiri —
   styling fokus global ada di shared.css (M3 form-group: 1px accent via
   ::before; input di luar form-group: border-color accent).
   Ring ganda (box-shadow focus-ring + outline focus-visible + outline M3)
   adalah sumber "double border saat focus". */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Input teks: cukup border-color (single border), tanpa ring/outline */
.sp-input:focus,
.sp-select:focus,
.numinput:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: none;
    outline: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══ Theme: Mission Control (opsi) ═══
   Konsol kendali gelap ala film sci-fi: lantai kisi berperspektif, panel kaca
   dengan kurung sudut menyala, aksen cyan instrumen, angka bermesin huruf mono.

   ATURAN AKTIFNYA:
   - Seluruh blok ini hanya berlaku saat ada class `mc` (html/body/.app-layout).
   - `mc` SELALU bersama `dark` — MC adalah turunan tema gelap, jadi semua
     override di blok .dark tetap jalan dan di sini hanya diubah yang perlu.
   - Tanpa `mc`: nol byte dari blok ini berlaku. Tema Terang & Gelap tidak
     tersentuh sama sekali — itulah kenapa MC jadi OPSI, bukan default.
   - Dipilih lewat Tools ▸ Setting ▸ Per-Perangkat ▸ Tema (localStorage
     `snr-theme` = "mc"). Tombol tema di sidebar tetap Terang ↔ Gelap.

   CATATAN SPECIFICITY: aturan yang menimpa blok .dark ditulis `.mc.dark …`
   (3 kelas, mengalahkan `.dark …` 2 kelas) supaya urutan berkas tidak
   menentukan pemenangnya. */
.mc {
    /* Mesin huruf MC: display & mono diganti, body tetap IBM Plex agar
       teks panjang tidak ikut berubah karakter. */
    --accent: #35D0FF;
    --accent-hover: #7FE0FF;
    --accent-light: rgba(53, 208, 255, 0.14);
    --accent-dark: #1C9FCB;
    --accent-cyan: #35D0FF;
    --accent-green: #3CE397;
    --accent-orange: #FFC247;
    --accent-red: #FF5D73;

    /* Tint menu — versi MC (urutan & peran sama dengan blok .dark). */
    --tint-dashboard: #35D0FF;
    --tint-master: #7B6CFF;
    --tint-transaksi: #FFC247;
    --tint-akuntansi: #3CE397;
    --tint-laporan: #9AA7FF;
    --tint-tools: #FF8FA3;

    --gold: #FFC247;
    --gold-soft: rgba(255, 194, 71, 0.10);

    --glass-bg: rgba(11, 19, 32, 0.66);
    --glass-bg-strong: rgba(13, 22, 38, 0.86);
    --glass-bg-soft: rgba(11, 19, 32, 0.45);
    --glass-border: rgba(94, 152, 214, 0.22);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --backdrop-1: #04070E;
    --backdrop-2: #070D18;
    --backdrop-3: #03050A;

    --bg: #04070E;
    --surface: rgba(11, 19, 32, 0.66);
    --surface-solid: #0A111D;
    --surface-hover: rgba(53, 208, 255, 0.08);
    --panel-fill: rgba(11, 19, 32, 0.55);
    --panel-border: rgba(94, 152, 214, 0.22);
    --panel-shadow: 0 22px 60px -42px #000;
    --text-primary: #D8E6F8;
    --text-secondary: #A9C2DC;
    --text-tertiary: #7D94B0;
    --text-muted: #7D94B0;
    --border-color: rgba(94, 152, 214, 0.20);
    --border-light: rgba(94, 152, 214, 0.16);
    --border-subtle: rgba(94, 152, 214, 0.10);
    --divider: rgba(94, 152, 214, 0.14);
    --header-bg: rgba(6, 12, 22, 0.80);
    --header-border: rgba(94, 152, 214, 0.20);
    --nav-text: #7D94B0;
    --nav-hover-bg: rgba(53, 208, 255, 0.08);
    --nav-hover-text: #EAF6FF;
    --sidebar-bg: rgba(20, 32, 47, 0.94);
    --nav-bar-bg: rgba(18, 30, 44, 0.97);
    --nav-elev: 6px 0 20px -12px rgba(0, 0, 0, 0.70), inset -1px 0 0 rgba(53, 208, 255, 0.10);
    --modal-bg: rgba(10, 17, 29, 0.97);
    --input-bg: rgba(4, 9, 16, 0.82);
    --input-border: rgba(94, 152, 214, 0.42);
    --input-border-hover: rgba(94, 152, 214, 0.62);
    --input-text: #D8E6F8;
    --table-stripe: rgba(53, 208, 255, 0.03);
    --table-hover: rgba(53, 208, 255, 0.06);
    --th-bg: rgba(10, 17, 29, 0.95);
    --badge-bg: rgba(53, 208, 255, 0.12);
    --badge-text: #7FE0FF;
    --loading-bg: #04070E;
    --scrollbar-thumb: rgba(94, 152, 214, 0.35);
    --shadow-card: 0 22px 60px -42px #000, inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-glass: 0 22px 60px -42px rgba(0, 0, 0, 0.9);
    --shadow-dropdown: 0 24px 70px -30px rgba(0, 0, 0, 0.85);
    --focus-ring: rgba(53, 208, 255, 0.45);

    /* MC lebih tajam daripada tema lain. */
    --radius-card: 12px;
}

/* ── Backdrop MC: cahaya cyan dari atas + glow violet kanan-bawah.
   Selector ganda: html.mc body (pre-paint dari index.html) dan
   body.mc (setelah Blazor menambah class di body). */
.mc body, body.mc {
    background:
        radial-gradient(80% 55% at 50% -10%, rgba(53, 208, 255, 0.13), transparent 62%),
        radial-gradient(55% 45% at 100% 100%, rgba(123, 108, 255, 0.10), transparent 62%),
        linear-gradient(180deg, var(--backdrop-1) 0%, var(--backdrop-2) 55%, var(--backdrop-3) 100%) fixed;
}

/* ── Lantai kisi berperspektif: lapisan dekoratif TERPISAH dari isi.
   body::before/::after tidak dipakai tema mana pun di SP (dicek:
   shared.css, mobile.css, style MainLayout), jadi aman dipakai di sini. */
.mc body::before, body.mc::before {
    content: ""; position: fixed; z-index: 0; left: -50%; right: -50%; bottom: -6%; height: 62vh;
    background-image:
        linear-gradient(rgba(53, 208, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 208, 255, 0.15) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(520px) rotateX(72deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(transparent, #000 40%, transparent 92%);
    mask-image: linear-gradient(transparent, #000 40%, transparent 92%);
    animation: mc-floor 22s linear infinite;
    pointer-events: none;
}
@keyframes mc-floor {
    to { background-position: 0 64px, 64px 0; }
}
/* Isi aplikasi naik SATU lapis di atas lantai kisi. Elemen fixed di dalamnya
   (modal, topbar) ikut berada di dalam context ini — urutan internal tidak berubah. */
.mc .app-layout { position: relative; z-index: 1; }

/* Garis pindai halus di atas semuanya — penanda "ini layar".
   pointer-events:none, jadi tidak pernah mengganggu klik. */
.mc body::after, body.mc::after {
    content: ""; position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .30;
    background: repeating-linear-gradient(rgba(190, 225, 255, 0.045) 0 1px, transparent 1px 3px);
}

/* ── Kurung sudut ala instrumen pada kartu.
   snr-theme.css menonaktifkan pseudo kartu dengan `content: none` — di sini
   dihidupkan lagi khusus MC (specificity .mc lebih tinggi, jadi urutan aman). */
.mc .stat-card, .mc .master-card, .mc .sp-card, .mc .data-card { position: relative; }
.mc .stat-card::before, .mc .master-card::before, .mc .sp-card::before, .mc .data-card::before,
.mc .stat-card::after, .mc .master-card::after, .mc .sp-card::after, .mc .data-card::after {
    content: ""; position: absolute; inset: 5px; pointer-events: none; opacity: .45;
    background:
        linear-gradient(var(--accent), var(--accent)) left top / 12px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left top / 1px 12px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right top / 12px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right top / 1px 12px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left bottom / 12px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left bottom / 1px 12px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right bottom / 12px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right bottom / 1px 12px no-repeat;
}

/* ── Tombol aksi: cyan solid + teks gelap (menggantikan emerald blok .dark —
   .mc.dark mengalahkan specificity .dark). */
.mc.dark .sp-btn-primary,
.mc.dark .sp-btn-green { background: linear-gradient(180deg, #35D0FF, #1C9FCB); color: #03131C; }
.mc.dark .sp-btn-primary:hover:not(:disabled),
.mc.dark .sp-btn-green:hover:not(:disabled) { background: #35D0FF; box-shadow: 0 6px 18px rgba(53, 208, 255, 0.40); }
.mc.dark .sidebar-user-icon { background: #35D0FF; }

/* ── Tipografi: judul bermesin display, angka/kode bermesin mono.
   Font-body (IBM Plex) sengaja TIDAK diganti agar teks panjang tetap nyaman. */
.mc .page-title, .mc h1, .mc h2, .mc h3 {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}
.mc code, .mc pre, .mc .mono { font-family: var(--font-mono); }

/* ── Efek 3D halus pada kartu — HANYA layar lebar; kemiringan di atas tabel
   kecil bikin angka sulit dibaca (pelajaran dari panel Termux). */
@media (min-width: 980px) {
    .mc .stat-card, .mc .master-card, .mc .sp-card, .mc .data-card {
        transform: rotateX(1.6deg);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.15s ease;
    }
    .mc .stat-card:hover, .mc .master-card:hover, .mc .sp-card:hover, .mc .data-card:hover {
        transform: rotateX(0) translateZ(10px);
        box-shadow: 0 30px 70px -38px rgba(53, 208, 255, 0.55);
    }
}

/* ═══ Tema: Digital Banking — MANDIRI, dua versi (terang & gelap) ═══
   Acuan bentuk: uupm.cc/demo/digital-banking — perbankan digital: kaca tipis,
   hairline putih, radius 20px, tombol gradien royal blue, judul Space Grotesk.

   BEDA DENGAN MISSION CONTROL — INI BUKAN TURUNAN TEMA LAIN:
   - Palet ditulis LENGKAP di dua blok di bawah (terang & gelap). Tidak ada satu
     token pun yang dipinjam dari `.dark` (emerald) atau dari `.mc` (cyan).
   - `banking` sendirian    = versi TERANG.
     `banking` + `dark`     = versi GELAP. Class `dark` di situ HANYA penanda
     "mode gelap" milik aplikasi (aturan struktural di shared.css/mobile.css/
     halaman memakainya), bukan sumber warnanya.
   - Karena itu MC bisa dihapus kelak tanpa menyentuh blok ini.

   Nilai 'snr-theme': "banking" (gelap, sesuai acuan) dan "banking-terang".
   Tombol tema di sidebar berganti DI DALAM keluarga ini (gelap ↔ terang) dan
   tidak melempar user ke tema lain.

   ATURAN SPECIFICITY (berkas ini dibaca berurutan):
   - `.banking` (1 kelas, di bawah :root) mengalahkan token Terang bawaan.
   - `.banking.dark` (2 kelas) mengalahkan `.dark` DAN `.banking`.
   - Aturan struktural yang menimpa aturan `.dark …` ditulis `.banking.dark …`.
   - Font kertas (--font-cetak*) sengaja TIDAK disentuh di mana pun di sini. */

/* ── Digital Banking · TERANG (putih + royal blue) ── */
.banking {
    --accent: #0052CC;
    --accent-hover: #0043A8;
    --accent-light: #E4EDFF;
    --accent-dark: #003D99;
    --accent-cyan: #0A6BFF;
    --accent-green: #00875A;
    --accent-orange: #B45309;
    --accent-red: #C62828;

    /* Tint menu — urutan & peran sama dengan :root / .dark. */
    --tint-dashboard: #0052CC;
    --tint-master: #6554C0;
    --tint-transaksi: #B45309;
    --tint-akuntansi: #00875A;
    --tint-laporan: #6D3BD1;
    --tint-tools: #BE123C;

    --gold: #B45309;
    --gold-soft: #FFF3D6;
    --near-black: #0B1F3A;
    --gray-700: #33475F;
    --gray-500: #64748B;
    --gray-400: #94A3B8;
    --gray-200: #E2E8F0;
    --gray-100: #F1F5F9;
    --gray-50: #F8FAFC;
    --border-subtle: rgba(11, 31, 58, 0.06);
    --border-medium: rgba(11, 31, 58, 0.12);
    /* Kartu acuan 20–24px: SP 20px supaya tabel padat tidak jadi kapsul. */
    --radius-card: 20px;
    --m3-field-radius: 12px;

    --glass-bg: #FFFFFF;
    --glass-bg-strong: #FFFFFF;
    --glass-bg-soft: #F7FAFF;
    --glass-border: rgba(11, 31, 58, 0.08);
    --glass-highlight: #FFFFFF;
    --backdrop-1: #EAF1FB;
    --backdrop-2: #F2F6FC;
    --backdrop-3: #F8FBFF;

    --bg: #F2F6FC;
    --surface: #FFFFFF;
    --surface-solid: #FFFFFF;
    --surface-hover: #F6F9FF;
    --panel-fill: #FFFFFF;
    --panel-border: rgba(11, 31, 58, 0.10);
    --panel-shadow: var(--shadow-card);
    --text-primary: #0B1F3A;
    --text-secondary: #33475F;
    --text-tertiary: #64748B;
    --text-muted: #64748B;
    --border-color: rgba(11, 31, 58, 0.12);
    --border-light: rgba(11, 31, 58, 0.10);
    --divider: rgba(11, 31, 58, 0.08);
    --header-bg: rgba(255, 255, 255, 0.82);
    --header-border: rgba(11, 31, 58, 0.07);
    --nav-text: #47617F;
    --nav-hover-bg: rgba(0, 82, 204, 0.08);
    --nav-hover-text: #0052CC;
    --sidebar-bg: rgba(255, 255, 255, 0.94);
    --nav-bar-bg: rgba(255, 255, 255, 0.97);
    --nav-elev: 4px 0 18px -12px rgba(11, 31, 58, 0.18);
    /* Penanda posisi menu (dipakai MainLayout + blok .banking di bawah). */
    --nav-active-bg: #E4EDFF;
    --nav-active-text: #0052CC;
    --modal-bg: #FFFFFF;
    --input-bg: #FFFFFF;
    /* 3:1 di atas putih = 0.47; dipakai 0.36 supaya tetap ringan. */
    --input-border: rgba(11, 31, 58, 0.36);
    --input-border-hover: rgba(11, 31, 58, 0.58);
    --input-text: #0B1F3A;
    --table-stripe: rgba(0, 82, 204, 0.04);
    --table-hover: rgba(0, 82, 204, 0.06);
    --th-bg: #F4F8FE;
    --badge-bg: #E4EDFF;
    --badge-text: #0052CC;
    --loading-bg: #F2F6FC;
    --scrollbar-thumb: #C3D2E4;
    --shadow-card: 0 1px 2px rgba(11, 31, 58, 0.06), 0 14px 34px -22px rgba(11, 31, 58, 0.35);
    --shadow-glass: 0 18px 40px -26px rgba(11, 31, 58, 0.30), inset 0 1px 0 #FFFFFF;
    --shadow-dropdown: 0 18px 44px -20px rgba(11, 31, 58, 0.28);
    --focus-ring: rgba(0, 82, 204, 0.30);
}

/* ── Digital Banking · GELAP (navy #0A1628 + kaca putih 7–11%) ──
   Daftar token SAMA PERSIS dengan blok terang di atas: setiap token yang bisa
   muncul di layar wajib punya nilai gelap, kalau tidak satu-dua permukaan akan
   memakai nilai putih (teks putih di atas putih). */
.banking.dark {
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Inter', ui-monospace, 'Cascadia Mono', monospace;

    --accent: #4C9AFF;
    --accent-hover: #7FB6FF;
    --accent-light: rgba(0, 82, 204, 0.22);
    --accent-dark: #0052CC;
    --accent-cyan: #06A9FF;
    --accent-green: #36B37E;
    --accent-orange: #FFAB00;
    --accent-red: #FF5630;

    --tint-dashboard: #06A9FF;
    --tint-master: #8C7BFF;
    --tint-transaksi: #FFAB00;
    --tint-akuntansi: #36B37E;
    --tint-laporan: #B3A1FF;
    --tint-tools: #FF8A65;

    --gold: #FFAB00;
    --gold-soft: rgba(255, 171, 0, 0.12);
    --near-black: #F7FBFF;
    --gray-700: #C3D2E4;
    --gray-500: #A3B3C9;
    --gray-400: #7C8FA9;
    --gray-200: #2A3D57;
    --gray-100: #1A2C45;
    --gray-50: #14243A;
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-medium: rgba(255, 255, 255, 0.14);
    --radius-card: 20px;
    --m3-field-radius: 12px;

    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-strong: rgba(255, 255, 255, 0.11);
    --glass-bg-soft: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-highlight: rgba(255, 255, 255, 0.06);
    --backdrop-1: #08111F;
    --backdrop-2: #0A1628;
    --backdrop-3: #0F1D32;

    --bg: #0A1628;
    --surface: rgba(255, 255, 255, 0.07);
    --surface-solid: #0F1D32;
    --surface-hover: rgba(255, 255, 255, 0.12);
    --panel-fill: rgba(255, 255, 255, 0.05);
    --panel-border: rgba(255, 255, 255, 0.12);
    --panel-shadow: 0 18px 44px -30px #000000;
    --text-primary: #FFFFFF;
    --text-secondary: #C9D6E6;
    --text-tertiary: #A3B3C9;
    --text-muted: #8FA2BA;
    --border-color: rgba(255, 255, 255, 0.12);
    --border-light: rgba(255, 255, 255, 0.14);
    --divider: rgba(255, 255, 255, 0.09);
    /* Navbar acuan #0a1628e6 — dibiarkan nyaris solid agar rel sidebar tidak
       "berkedip" di atas isi yang bergulir. */
    --header-bg: rgba(10, 22, 40, 0.82);
    --header-border: rgba(255, 255, 255, 0.10);
    --nav-text: #A3B3C9;
    --nav-hover-bg: rgba(0, 82, 204, 0.20);
    --nav-hover-text: #FFFFFF;
    --sidebar-bg: rgba(34, 51, 76, 0.97);
    --nav-bar-bg: rgba(34, 51, 76, 0.99);
    /* #22334C di atas background #0A1628 = 1,42:1 — surface chrome terbaca sebagai panel
       sendiri. Sebelumnya rgba(8,17,31,.96) hanya 1,04:1 (= tak terbedakan). */
    --nav-elev: 6px 0 20px -14px rgba(0, 0, 0, 0.55), inset -1px 0 0 rgba(255, 255, 255, 0.06);
    /* Aksen #4C9AFF di atas panel #22334C hanya 4,48:1 — di bawah 4,5 untuk teks 13,6px.
       Nilai ini dipakai HANYA untuk teks menu aktif di sisi gelap Digital Banking. */
    --nav-active-text: #7FB6FF;
    /* Pil menu aktif: `--accent-light` (biru tua 22%) di atas panel yang SEKARANG lebih
       terang justru terlihat seperti lubang. Diganti biru muda tipis. */
    --nav-active-bg: rgba(127, 182, 255, 0.16);
    --modal-bg: rgba(15, 29, 50, 0.98);
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.30);
    --input-border-hover: rgba(255, 255, 255, 0.52);
    --input-text: #FFFFFF;
    --table-stripe: rgba(255, 255, 255, 0.03);
    --table-hover: rgba(255, 255, 255, 0.07);
    --th-bg: rgba(15, 29, 50, 0.98);
    --badge-bg: rgba(0, 82, 204, 0.24);
    --badge-text: #9CC3FF;
    --loading-bg: #0A1628;
    --scrollbar-thumb: rgba(163, 179, 201, 0.35);
    --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.28), 0 16px 40px -28px rgba(0, 0, 0, 0.90);
    --shadow-glass: 0 24px 48px -32px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-dropdown: 0 20px 56px -28px rgba(0, 0, 0, 0.80);
    --focus-ring: rgba(76, 154, 255, 0.45);
}

/* ── Latar halaman ──
   Terang: kabut biru muda dari kiri-atas. Gelap: navy dua arah (acuan
   linear-gradient 135deg #0a1628 → #0f1d32) + glow blue & violet.
   Selector ganda: `html.banking body` (pre-paint dari index.html) dan
   `body.banking` (setelah Blazor memasang class di body). */
.banking body, body.banking {
    /* body punya font-family sendiri di <style> index.html (IBM Plex) dengan
       specificity lebih tinggi daripada `* { font-family: var(--font-body) }`,
       jadi tema yang mengganti mesin huruf harus menimpanya di sini. */
    font-family: var(--font-body);
    background:
        radial-gradient(70% 55% at 10% -10%, rgba(0, 82, 204, 0.10), transparent 60%),
        linear-gradient(135deg, var(--backdrop-1) 0%, var(--backdrop-2) 55%, var(--backdrop-3) 100%) fixed;
}
.banking.dark body, body.banking.dark {
    background:
        radial-gradient(70% 55% at 12% -10%, rgba(0, 82, 204, 0.28), transparent 62%),
        radial-gradient(55% 50% at 100% 100%, rgba(101, 84, 192, 0.20), transparent 62%),
        linear-gradient(135deg, var(--backdrop-1) 0%, var(--backdrop-2) 55%, var(--backdrop-3) 100%) fixed;
}

/* ── Kartu: kaca tipis (acuan .glass-card). Blur hanya di versi gelap — di
   atas putih ia tak terlihat dan hanya memakan GPU. Hover NAIK 2px hanya layar
   lebar: di HP kartu harus diam (aturan pemilik 2026-09-26). */
.banking .stat-card,
.banking .master-card,
.banking .sp-card,
.banking .data-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-radius: var(--radius-card);
}
.banking.dark .stat-card,
.banking.dark .master-card,
.banking.dark .sp-card,
.banking.dark .data-card {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
@media (min-width: 900px) {
    .banking .stat-card:hover,
    .banking .master-card:hover,
    .banking .sp-card:hover,
    .banking .data-card:hover {
        transform: translateY(-2px);
        border-color: var(--accent);
        box-shadow: 0 20px 40px -18px rgba(0, 82, 204, 0.35);
    }
    .banking.dark .stat-card:hover,
    .banking.dark .master-card:hover,
    .banking.dark .sp-card:hover,
    .banking.dark .data-card:hover {
        box-shadow: 0 20px 40px -18px rgba(0, 82, 204, 0.55);
    }
}

/* ── Ubin utama beranda (DPK) = "KARTU SALDO" acuan.
   Di demo digital-banking, angka uang terbesar TIDAK tinggal di kartu kaca biasa:
   ia menempati blok gradien padat biru → violet dengan teks putih, ikon chip
   putih transparan, dan grafik putih. Itu elemen yang membuat halaman terasa
   "digital banking", jadi ditiru persis di sini (bukan cuma diwarnai tipis).
   Specificity 4–5 kelas supaya menang atas blok <style> Home.razor; atribut
   presentasi SVG (stroke/fill/opacity inline) dikalahkan CSS tanpa !important —
   satu-satunya !important di sini adalah chip ikon, karena latarnya ditulis
   inline di markup (`style="background:var(--accent-light)"`). */
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero {
    background: linear-gradient(135deg, #0052CC 0%, #6554C0 100%);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 18px 44px -22px rgba(0, 82, 204, 0.70);
}
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-value { color: #FFFFFF; }
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-label,
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-sub { color: rgba(255, 255, 255, 0.84); }
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-icon {
    background: rgba(255, 255, 255, 0.20) !important;
}
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-icon svg path,
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-icon svg rect,
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-icon svg circle,
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-arrow svg path { stroke: #FFFFFF; }
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-arrow { background: rgba(255, 255, 255, 0.20); }
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-delta {
    background: rgba(255, 255, 255, 0.22); color: #FFFFFF;
}
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-spark polyline { stroke: rgba(255, 255, 255, 0.95); }
.banking .dashboard-grid.ringkasan-sec .stat-card.dash-hero .stat-spark polygon { fill: #FFFFFF; opacity: 0.28; }

/* ── Tombol aksi: gradien royal blue + teks putih (acuan .btn-primary). */
.banking .sp-btn-primary,
.banking .sp-btn-green {
    background: linear-gradient(135deg, #0052CC 0%, #2A6BFF 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 82, 204, 0.28);
}
.banking .sp-btn-primary:hover:not(:disabled),
.banking .sp-btn-green:hover:not(:disabled) {
    background: linear-gradient(135deg, #0043A8 0%, #1E5BDE 100%);
}
.banking.dark .sp-btn-primary,
.banking.dark .sp-btn-green {
    background: linear-gradient(135deg, #0052CC 0%, #0A6BFF 100%);
    box-shadow: 0 4px 14px rgba(0, 82, 204, 0.40);
}
.banking.dark .sp-btn-primary:hover:not(:disabled),
.banking.dark .sp-btn-green:hover:not(:disabled) {
    background: linear-gradient(135deg, #0A6BFF 0%, #2A86FF 100%);
    box-shadow: 0 8px 24px rgba(0, 82, 204, 0.55);
}
.banking .sidebar-user-icon { background: linear-gradient(135deg, #0052CC, #6554C0); }
.banking.dark .sidebar-user-icon { background: linear-gradient(135deg, #0052CC, #6554C0); }

/* ── Bentuk khas acuan: tombol & isian bersudut 12px (acuan .btn-primary
   `border-radius:12px`), bukan 10px bawaan. Padding/tinggi TIDAK diubah —
   layar petugas padat, tombol 48px ala halaman marketing akan memakan baris. */
.banking .sp-btn { border-radius: 12px; }
.banking .sp-input,
.banking .sp-select { border-radius: var(--m3-field-radius); }

/* ── Menu aktif: satu pill lembut + teks aksen (2026-10-31) ──
   Dulu gradien biru→violet dengan teks putih (3–4 kelas supaya menang atas
   `.dark .sidebar-item.active` di <style> MainLayout). Gradien itu kini DIPENSIUNKAN:
   bentuknya terlalu kuat untuk penanda posisi yang muncul di setiap halaman, dan
   membuat grup induk + sub-item sama-sama "menyala penuh". Nilai warnanya pindah ke
   token `--nav-active-bg` / `--nav-active-text` di blok tema, jadi SATU pemilik —
   MainLayout tinggal memakainya. */
.banking .sidebar-item.active {
    background: var(--nav-active-bg, #E4EDFF);
    color: var(--nav-active-text, #0052CC);
}
/* Sub-item: TANPA pill — penandanya rail 3px di MainLayout. Kalau induk dan anak
   sama-sama berpil, hierarkinya hilang. */
.banking .sidebar-sub-item.active {
    background: transparent;
    color: var(--nav-active-text, #0052CC);
}
.banking.dark .sidebar-item.active {
    background: var(--nav-active-bg, rgba(0, 82, 204, 0.60));
    color: var(--nav-active-text, #FFFFFF);
    font-weight: 600;
}
.banking.dark .sidebar-sub-item.active {
    background: transparent;
    color: var(--nav-active-text, #FFFFFF);
    font-weight: 600;
}

/* ── Tipografi: judul & angka besar bermesin display Space Grotesk (acuan
   .stat-number). Teks panjang tetap Inter. */
.banking .page-title,
.banking h1,
.banking h2,
.banking h3 { font-family: var(--font-display); letter-spacing: -0.01em; }
.banking .stat-value,
.banking .card-amount { font-family: var(--font-display); }

/* ── Popup <select> native: dirender OS, jadi diwarnai eksplisit — emerald
   milik blok `.dark` diganti navy/blue. */
.banking.dark select option,
.banking.dark select optgroup {
    background-color: #0F1D32;
    color: #FFFFFF;
}
.banking.dark select option:checked,
.banking.dark select option:hover {
    background-color: #0052CC;
    color: #FFFFFF;
}

/* ── DIALOG: kaca di mode GELAP, SOLID di mode TERANG ──
   Riwayat singkat (supaya tidak diulang): dialog transparan pernah ditolak pada
   2026-09-21 — saat itu permukaannya `--glass-bg-strong` versi gelap
   rgba(255,255,255,0.08) = 92% tembus, walau blur 20px sudah dipakai; yang salah
   alphanya, bukan blur-nya. 2026-10-31 pemilik meminta kaca lagi, lalu:

   - GELAP  : alpha 0.55 + blur(32px) saturate(1.5). Di atas navy, kaca terbaca
              sebagai kaca (ada kontras permukaan) dan teks di belakang tetap kabur.
   - TERANG : SOLID (#FFFFFF), tanpa backdrop-filter. Di atas halaman terang, putih
              tembus nyaris tak berbeda dari putih solid tetapi memunculkan latar
              kusam dan warna hangat (emas/amber #B45309, strip baris) yang menembus
              jadi COKELAT — laporan pemilik. Overlay terang juga tanpa blur.
   - Yang TIDAK pernah dibuat kaca: `.pin-kartu` (dialog PIN memakai
     `--surface-solid` — angka PIN tidak boleh bertumpuk dengan isi halaman).

   Semua permukaan dialog memakai token/kelas yang sama (`--modal-bg`, `.modal`,
   `.confirm-dialog`, `.find-modal`, `.kk-dialog`, `.fba-dialog`, `.pt-dialog`,
   `.tt-dialog`), jadi satu blok ini cukup untuk semuanya. */
.banking {
    /* Terang: TIDAK transparan (keputusan pemilik 2026-10-31). Kaca hanya
       berguna kalau ada kontras permukaan di belakangnya; di atas halaman
       terang, putih tembus nyaris tak terlihat bedanya — yang tersisa cuma
       latar kusam dan risiko warna hangat (emas/amber) menembus jadi coklat.
       Jadi: permukaan solid, tanpa backdrop-filter (hemat GPU juga). */
    --dialog-bg: #FFFFFF;
    --dialog-blur: none;
}
.banking.dark {
    /* Gelap: lebih tembus lagi (permintaan pemilik) — blur dinaikkan supaya
       teks di belakang tetap tidak terbaca. */
    --dialog-bg: rgba(10, 18, 32, 0.55);
    --dialog-blur: blur(32px) saturate(1.5);
}

.banking .modal,
.banking .confirm-dialog,
.banking .find-modal,
.banking .kk-dialog,
.banking .fba-dialog,
.banking .pt-dialog,
.banking .tt-dialog {
    background: var(--dialog-bg);
    -webkit-backdrop-filter: var(--dialog-blur);
    backdrop-filter: var(--dialog-blur);
    border-color: var(--glass-border);
}
.banking.dark .modal,
.banking.dark .confirm-dialog,
.banking.dark .find-modal,
.banking.dark .kk-dialog,
.banking.dark .fba-dialog,
.banking.dark .pt-dialog,
.banking.dark .tt-dialog {
    /* `.dark …` tinggal di shared.css/berkas halaman yang dimuat SESUDAH berkas ini;
       specificity 3 kelas memastikan versi gelap menang tanpa bergantung urutan. */
    background: var(--dialog-bg);
    border-color: rgba(255, 255, 255, 0.14);
}

/* Overlay: lebih gelap + blur lebih besar (4px → 10px). Sengaja tidak 20px —
   dua lapis blur (overlay + dialog) di WebView HP membebani GPU saat modal dibuka
   dari halaman bertabel panjang. */
.banking .modal-overlay {
    /* Terang: tanpa blur juga — veil tipis sudah cukup memisahkan dialog solid
       dari halaman; blur di atas latar terang tak terlihat dan hanya memakan GPU. */
    background: rgba(11, 31, 58, 0.24);
}
.banking.dark .modal-overlay { background: rgba(3, 8, 18, 0.45); }
/* Peramban/WebView TANPA `backdrop-filter` (WebView Android lama, mode hemat):
   kaca 0.74 di atas halaman bertabel akan terbaca kusam/beige karena tidak ada
   pengaburan sama sekali — ini yang membuat dialog mode terang terlihat "coklat".
   Di lingkungan seperti itu permukaan dialog dibalikkan ke hampir solid supaya
   tetap bersih; peramban yang mendukung blur tidak tersentuh. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .banking .modal,
    .banking .confirm-dialog,
    .banking .find-modal,
    .banking .kk-dialog,
    .banking .fba-dialog,
    .banking .pt-dialog,
    .banking .tt-dialog,
    .banking.dark .modal,
    .banking.dark .confirm-dialog,
    .banking.dark .find-modal,
    .banking.dark .kk-dialog,
    .banking.dark .fba-dialog,
    .banking.dark .pt-dialog,
    .banking.dark .tt-dialog { background: var(--modal-bg); }
}

/* Isian di dalam dialog kaca butuh latar sedikit lebih tegas, kalau tidak
   kotaknya melebur dengan halaman yang mengabur di belakangnya. */
.banking.dark .modal .sp-input,
.banking.dark .modal .sp-select,
.banking.dark .confirm-dialog .sp-input,
.banking.dark .find-modal .sp-input {
    background: rgba(255, 255, 255, 0.08);
}