/* ═══ SP × Investment Platform — dark-first fintech ═══
   Deep slate/navy surfaces, emerald as the money-positive accent,
   IBM Plex Sans (financial trust), minimal glow, strong data hierarchy.
   Light: neutral slate — deep emerald primary.
   Dark: "Market Terminal" — near-black slate dengan glow emerald lembut. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --font-display: 'IBM Plex Sans', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Sans', ui-monospace, 'Cascadia Mono', monospace;

    --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);
    /* 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);
    --input-border: rgba(15, 23, 42, 0.16);
    --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(8, 8, 12, 0.98);
    --nav-bar-bg: rgba(8, 8, 12, 0.99);
    /* 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);
    --input-border: rgba(255, 255, 255, 0.16);
    --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: 2px 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. */
    --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Aksen: cyan instrumen menggantikan emerald selama MC aktif. */
    --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(6, 12, 22, 0.92);
    --nav-bar-bg: rgba(6, 12, 22, 0.96);
    --modal-bg: rgba(10, 17, 29, 0.97);
    --input-bg: rgba(4, 9, 16, 0.82);
    --input-border: rgba(94, 152, 214, 0.30);
    --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);
    }
}