:root { --kuning-logo: #fff500; --hijau-logo: #85c226; }
    .fi-topbar, .fi-sidebar-header { border-top: 3px solid var(--kuning-logo); }
    .fi-simple-layout { background-image: radial-gradient(60rem 30rem at 50% -10%, color-mix(in oklab, var(--hijau-logo) 16%, transparent), transparent 70%); }
    .fi-simple-main { border-top: 4px solid var(--hijau-logo); }

    /* Halaman masuk dan daftar di HP: kartu langsung di bagian atas layar (tidak tertutup papan ketik), bersudut bulat. */
    @media (max-width: 39.99rem) {
        .fi-simple-main-ctn { align-items: flex-start; }
        .fi-simple-main { margin: 1.25rem .75rem 2rem; width: calc(100% - 1.5rem); padding-block: 2rem; padding-inline: 1.25rem; border-radius: .75rem; }
    }

    /* Rasa aplikasi: tanpa kilatan biru saat disentuh, tombol sedikit mengecil saat ditekan, ukuran teks tidak
       berubah saat HP diputar, dan di mode aplikasi terpasang halaman tidak "memantul" saat digulir. */
    html { -webkit-text-size-adjust: 100%; }
    .fi-btn, .fi-icon-btn, .fi-sidebar-item-btn, .fi-tabs-item, .fi-dropdown-list-item, .fi-ta-row, .nav-bawah-item, .beranda-menu-item { -webkit-tap-highlight-color: transparent; }
    @media (max-width: 63.99rem) {
        .fi-btn:active, .fi-icon-btn:active, .fi-sidebar-item-btn:active { transform: scale(.97); }
        .fi-header-heading { font-size: 1.3rem; line-height: 1.7rem; }
        .fi-header { row-gap: .75rem; }
    }
    @media (display-mode: standalone) {
        html, body { overscroll-behavior-y: none; }
        .fi-topbar > nav { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)); }
    }

    /* Bilah navigasi bawah di HP (lihat App\Support\NavigasiBawah): tujuan utama selalu dalam jangkauan ibu jari. */
    .nav-bawah { display: none; }
    @media (max-width: 63.99rem) {
        .nav-bawah {
            position: fixed; inset-inline: 0; bottom: 0; z-index: 20; display: flex; align-items: stretch;
            height: calc(3.6rem + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
            /* Latar padat tanpa efek blur: blur pada bilah yang menempel dihitung ulang setiap layar digulir (berat di HP murah). */
            background: var(--color-white);
            border-top: 1px solid var(--gray-200);
        }
        .dark .nav-bawah { background: var(--gray-900); border-color: color-mix(in oklab, var(--color-white) 10%, transparent); }
        .nav-bawah-item {
            flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
            padding: .3rem .15rem; color: var(--gray-500); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; user-select: none;
        }
        .dark .nav-bawah-item { color: var(--gray-400); }
        .nav-bawah-item.aktif { color: var(--primary-600); }
        .dark .nav-bawah-item.aktif { color: var(--primary-400); }
        .nav-bawah-ikon { position: relative; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 1.85rem; border-radius: 999px; transition: background-color .15s, transform .1s; }
        .nav-bawah-item.aktif .nav-bawah-ikon { background: color-mix(in oklab, var(--primary-600) 14%, transparent); }
        .nav-bawah-item:active .nav-bawah-ikon { transform: scale(.9); }
        .nav-bawah-ikon svg { width: 1.5rem; height: 1.5rem; }
        .nav-bawah-label { font-size: .75rem; font-weight: 500; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .nav-bawah-lencana { position: absolute; top: -.3rem; right: .3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px; background: var(--danger-600); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.15rem; text-align: center; }
        /* Isi halaman dan tombol Simpan yang menempel diberi ruang agar tidak tertutup bilah. */
        :root:has(.nav-bawah) .fi-main { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
        :root:has(.nav-bawah) .fi-sticky .fi-ac { bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
    }

    /* Remah roti di HP menjadi satu tombol kembali ("‹ Santri") seperti aplikasi, bukan deretan tautan. */
    @media (max-width: 63.99rem) {
        .fi-breadcrumbs { display: block; margin-bottom: .35rem; }
        .fi-breadcrumbs-item { display: none; }
        .fi-breadcrumbs-item.kembali { display: inline-flex; align-items: center; }
        .fi-breadcrumbs-item.kembali > .fi-breadcrumbs-item-separator { display: none; }
        .fi-breadcrumbs-item.kembali::before { content: ''; width: .5rem; height: .5rem; margin-inline: .15rem .45rem; border-inline-start: 2px solid var(--primary-600); border-bottom: 2px solid var(--primary-600); transform: rotate(45deg); }
        .fi-breadcrumbs-item.kembali .fi-breadcrumbs-item-label { color: var(--primary-600); font-weight: 500; }
        .dark .fi-breadcrumbs-item.kembali::before { border-color: var(--primary-400); }
        .dark .fi-breadcrumbs-item.kembali .fi-breadcrumbs-item-label { color: var(--primary-400); }
    }

    /* Tombol kepala halaman (Cetak, Ubah, ...) di HP dalam satu baris yang bisa digeser, tidak bertumpuk tiga baris. */
    @media (max-width: 39.99rem) {
        .fi-header-actions-ctn { overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; -webkit-overflow-scrolling: touch; }
        .fi-header-actions-ctn::-webkit-scrollbar { display: none; }
        .fi-header-actions-ctn .fi-ac { flex-wrap: nowrap; }
        .fi-header-actions-ctn .fi-btn { white-space: nowrap; }
    }

    /* Wizard di HP (misalnya proses kenaikan kelas): judul langkah ringkas agar semua langkah muat. */
    @media (max-width: 39.99rem) {
        .fi-sc-wizard-header-step-description { display: none; }
    }

    /* Halaman pendaftar PSB di HP: bingkai bersarang (bagian formulir, kotak berkas) dibuat lebih rapat agar isian
       selebar mungkin, dan area unggah cukup besar untuk diketuk. */
    @media (max-width: 39.99rem) {
        .fi-panel-psb .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-content-ctn > .fi-section-content { padding: 1rem; }
        .fi-panel-psb .fi-fieldset.berkas-psb { padding: .9rem; }
        .fi-panel-psb .berkas-psb .filepond--root { min-height: 4rem; }
    }

    /* Saat halaman bergulir ke kolom yang salah (setelah menekan simpan atau kirim), judul kolom tidak tertutup bilah atas,
       dan di HP juga tidak tertutup pemberitahuan yang muncul di bagian atas layar. */
    [data-field-wrapper] { scroll-margin-top: 6rem; }
    @media (max-width: 39.99rem) {
        [data-field-wrapper] { scroll-margin-top: 11rem; }
    }

    /* Tombol di paling bawah formulir PSB: "Kirim pendaftaran" dan "Simpan dulu" selebar layar di HP (bertumpuk),
       berdampingan di layar lebar. */
    .psb-tombol-kirim { display: flex; flex-wrap: wrap; gap: .75rem; }
    .psb-tombol-kirim .fi-btn { flex: 1 1 14rem; }

    /* Kaki halaman masuk: nama lembaga dan tautan kebijakan privasi. */
    .kaki-masuk { margin-top: 1.5rem; text-align: center; font-size: .75rem; color: var(--gray-500); }
    .kaki-masuk a { color: var(--primary-600); text-decoration: none; }

    /* Logo kecil di kepala halaman HP: tombol menu tetap paling kiri, logo di sebelahnya. */
    .logo-hp { display: none; }
    @media (max-width: 63.99rem) {
        .fi-topbar-semua-menu { order: -1; margin-inline-end: .2rem; }
        .logo-hp { display: flex; align-items: center; margin-inline: .25rem .5rem; flex-shrink: 0; }
        .logo-hp img { height: 2.25rem; width: auto; }
    }

    /* Sasaran sentuh yang nyaman di HP (tombol +/- kasir, tombol kecil buatan sendiri). */
    @media (max-width: 39.99rem) {
        .tombol-sentuh { min-width: 2.5rem; min-height: 2.5rem; font-size: 1.1rem; }
    }

    /* Tabel kecil di dalam halaman detail (riwayat bayar, saudara, leger) di HP: tiap baris jadi kartu ringkas,
       label kolom di kiri dan isi di kanan, seperti tabel utama. */
    @media (max-width: 63.99rem) {
        .fi-in-table-repeatable > table > tbody > tr { gap: .4rem; padding: .85rem 1rem; }
        .fi-in-table-repeatable > table > tbody > tr > td > .fi-in-entry { grid-template-columns: minmax(5.5rem, 36%) minmax(0, 1fr); column-gap: .75rem; align-items: start; }
        .fi-in-table-repeatable > table > tbody > tr > td > .fi-in-entry > .fi-in-entry-label-col { padding-top: .1rem; }
        .fi-in-table-repeatable > table > tbody > tr > td > .fi-in-entry > .fi-in-entry-content-col { grid-column: auto; }
        .fi-fo-table-repeater > table > tbody > tr { gap: .9rem; padding: 1rem; }
    }

    /* Halaman detail di HP: isian teks pendek (nama, tanggal, status) berlabel di kiri agar halaman tidak terlalu panjang.
       Foto, daftar berulang, dan tampilan khusus (peta hafalan) tetap selebar layar. */
    @media (max-width: 39.99rem) {
        .fi-in-entry:not(.fi-in-entry-has-inline-label):has(> .fi-in-entry-label-col):has(> .fi-in-entry-content-col :is(.fi-in-text, .fi-in-icon, .fi-in-color, .fi-in-placeholder)):not(:has(.fi-in-repeatable, .fi-in-table-repeatable, .fi-in-image, .fi-in-key-value)) {
            grid-template-columns: minmax(5.5rem, 36%) minmax(0, 1fr); column-gap: .75rem; align-items: start;
        }
        .fi-in-entry:not(.fi-in-entry-has-inline-label):has(> .fi-in-entry-label-col):has(> .fi-in-entry-content-col :is(.fi-in-text, .fi-in-icon, .fi-in-color, .fi-in-placeholder)):not(:has(.fi-in-repeatable, .fi-in-table-repeatable, .fi-in-image, .fi-in-key-value)) > .fi-in-entry-content-col { grid-column: auto; }
    }

    /* Ikon berwarna tema (Menu cepat). */
    .ikon-tema { color: var(--primary-600); }
    .dark .ikon-tema { color: var(--primary-400); }

:root {
        --kepala-1: var(--primary-600); --kepala-2: #345009; --kepala-3: #2a4207;
        --kepala-latar: linear-gradient(155deg, var(--kepala-1) 0%, var(--kepala-2) 70%, var(--kepala-3) 100%);
        --beranda-muda: color-mix(in oklab, var(--primary-600) 11%, white);
        --beranda-kuning: #fff6d1; --beranda-kuning-teks: #92400e;
        --beranda-teal: #e3f3ef; --beranda-teal-teks: #0f766e;
        --beranda-abu: var(--gray-100); --beranda-abu-teks: var(--gray-600);
        --beranda-bayang: 0 6px 20px rgb(17 24 39 / .08);
    }
    .dark {
        --beranda-muda: color-mix(in oklab, var(--primary-400) 16%, var(--gray-900));
        --beranda-kuning: color-mix(in oklab, #f59e0b 16%, var(--gray-900)); --beranda-kuning-teks: #fcd34d;
        --beranda-teal: color-mix(in oklab, #14b8a6 16%, var(--gray-900)); --beranda-teal-teks: #5eead4;
        --beranda-abu: var(--gray-800); --beranda-abu-teks: var(--gray-300);
        --beranda-bayang: 0 0 0 1px rgb(255 255 255 / .08);
    }

    /* ---------- Kepala halaman hijau di semua halaman ---------- */
    .fi-page .fi-header { position: relative; isolation: isolate; color: #fff; }
    .fi-page .fi-header::before { content: ''; position: absolute; z-index: -1; background: var(--kepala-latar); }
    .fi-page .fi-header .fi-header-heading { color: #fff; }
    .fi-page .fi-header .fi-header-subheading { color: rgb(255 255 255 / .85); }
    .fi-page .fi-header .fi-breadcrumbs-item-label, .fi-page .fi-header .fi-breadcrumbs-item-separator { color: rgb(255 255 255 / .8); }
    .fi-page .fi-header .fi-breadcrumbs-item a:hover .fi-breadcrumbs-item-label { color: #fff; }
    /* Tombol utama di atas latar hijau: putih bertulisan hijau; tombol ikon (⋮) putih. */
    .fi-page .fi-header .fi-btn.fi-color-primary { background: #fff; color: var(--primary-700); }
    .fi-page .fi-header .fi-btn.fi-color-primary:hover { background: color-mix(in oklab, #fff 88%, var(--primary-600)); }
    .fi-page .fi-header .fi-btn.fi-color-primary .fi-icon { color: var(--primary-700); }
    .fi-page .fi-header .fi-header-actions-ctn > .fi-ac > .fi-icon-btn,
    .fi-page .fi-header .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn { color: #fff; }

    @media (max-width: 63.99rem) {
        /* Bilah atas hijau menyambung dengan kepala halaman. */
        .fi-topbar { background: var(--kepala-1) !important; box-shadow: none !important; border-bottom: 0 !important; }
        .fi-topbar .fi-icon-btn, .fi-topbar .fi-icon-btn .fi-icon { color: #fff; }
        .fi-topbar .fi-icon-btn:hover { background: rgb(255 255 255 / .12); }
        .logo-hp { background: #fff; border-radius: 9999px; padding: .15rem; }
        .logo-hp img { height: 2rem; }
        .fi-topbar .fi-global-search-field .fi-input-wrp { background: rgb(255 255 255 / .14); box-shadow: none; --tw-ring-color: transparent; }
        .fi-topbar .fi-global-search-field input { color: #fff; }
        .fi-topbar .fi-global-search-field input::placeholder { color: rgb(255 255 255 / .75); }
        .fi-topbar .fi-global-search-field .fi-input-wrp-prefix .fi-icon { color: rgb(255 255 255 / .8); }
        .fi-topbar .fi-user-avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .65); }

        /* Kepala halaman selebar layar, melengkung di bawah, rapat dengan bilah atas. */
        .fi-page-header-main-ctn { padding-top: 1rem; row-gap: 1.5rem; }
        .fi-page .fi-header { padding: .25rem 0 1.4rem; }
        .fi-page .fi-header::before { inset: -1rem -1rem 0; border-radius: 0 0 1.5rem 1.5rem; }
        .fi-breadcrumbs-item.kembali::before { border-color: #fff !important; }
        .fi-page .fi-header .fi-breadcrumbs-item.kembali .fi-breadcrumbs-item-label { color: #fff !important; }
    }
    @media (min-width: 64rem) {
        /* Layar lebar: kepala halaman berupa pita hijau bersudut bulat. */
        .fi-page .fi-header { padding: 1.25rem 1.5rem; overflow: hidden; border-radius: 1.25rem; }
        .fi-page .fi-header::before { inset: 0; }
        .fi-page .fi-header::after { content: ''; position: absolute; z-index: -1; right: -2.5rem; top: -3rem; width: 12rem; height: 12rem; background: url('https://alfathsolobaru.com/ikon/logo.webp') center / contain no-repeat; filter: brightness(0) invert(1); opacity: .08; }
    }

    /* ---------- Beranda ---------- */
    .beranda { display: block; }
    .beranda-kepala { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--kepala-latar); padding: 1.25rem 1.5rem 5.5rem; border-radius: 1.5rem; }
    .beranda-kepala::after { content: ''; position: absolute; z-index: -1; right: -3.5rem; top: -2rem; width: 15rem; height: 15rem; background: url('https://alfathsolobaru.com/ikon/logo.webp') center / contain no-repeat; filter: brightness(0) invert(1); opacity: .08; }
    .beranda-kepala::before { content: ''; position: absolute; z-index: -1; left: -2.5rem; bottom: -4.5rem; width: 12rem; height: 12rem; border-radius: 9999px; background: rgb(255 255 255 / .05); }
    .beranda-salam { font-size: .875rem; opacity: .85; }
    .beranda-nama { margin: .1rem 0 0; font-size: 1.4rem; line-height: 1.25; font-weight: 700; color: #fff; }
    .beranda-chip { display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem; padding: .25rem .7rem; border-radius: 9999px; background: rgb(255 255 255 / .16); font-size: .78rem; font-weight: 500; }
    .beranda-chip i { width: .45rem; height: .45rem; border-radius: 9999px; background: var(--kuning-logo); }
    .beranda-keterangan { margin-top: .4rem; font-size: .8rem; opacity: .8; }
    .beranda-isi { position: relative; z-index: 1; margin-top: -4.25rem; display: grid; gap: 1rem; padding-inline: 0; }
    @media (max-width: 63.99rem) {
        /* Selebar layar dan menyambung dengan bilah atas hijau (menutup jarak atas halaman). */
        .beranda-kepala { margin: -1rem -1rem 0; border-radius: 0 0 1.75rem 1.75rem; padding: .5rem 1.25rem 5.25rem; }
    }
    @media (min-width: 64rem) {
        .beranda-isi { padding-inline: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
        .beranda-penuh { grid-column: 1 / -1; }
    }
    .beranda-kartu { min-width: 0; border-radius: 1.1rem; padding: 1rem; background: var(--color-white); box-shadow: var(--beranda-bayang); color: var(--gray-950); }
    .dark .beranda-kartu { background: var(--gray-900); color: var(--color-white); }
    .beranda-judul { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
    .beranda-judul h2 { margin: 0; font-size: 1rem; font-weight: 700; }
    .beranda-judul a, .beranda-tautan { padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 600; color: var(--primary-600); text-decoration: none; white-space: nowrap; cursor: pointer; }
    .dark .beranda-judul a, .dark .beranda-tautan { color: var(--primary-400); }
    /* Bagian yang dituju menu beranda tidak tertutup bilah atas. */
    .fi-sc-section[id] { scroll-margin-top: 5rem; }
    .beranda-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-feature-settings: 'liga' 0, 'calt' 0; color: var(--primary-600); }
    .dark .beranda-label { color: var(--primary-400); }
    .beranda-besar { font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
    .beranda-pesan { margin-top: .3rem; font-size: .875rem; line-height: 1.45; color: var(--gray-600); }
    .dark .beranda-pesan { color: var(--gray-300); }
    .beranda-baris { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
    .beranda-pil { flex-shrink: 0; padding: .2rem .6rem; border-radius: 9999px; background: var(--beranda-muda); color: var(--primary-700); font-size: .75rem; font-weight: 600; }
    .dark .beranda-pil { color: var(--primary-300); }
    .beranda-pil.kuning { background: var(--beranda-kuning); color: var(--beranda-kuning-teks); }
    .beranda-pil.merah { background: color-mix(in oklab, var(--danger-600) 12%, transparent); color: var(--danger-700); }
    .dark .beranda-pil.merah { color: var(--danger-300); }
    .beranda-sorot-judul { margin: .2rem 0 0; font-size: 1.2rem; line-height: 1.3; font-weight: 700; }
    .beranda-biaya { margin-top: .75rem; }
    .beranda-biaya small { display: block; font-size: .78rem; color: var(--gray-500); }
    .beranda-biaya b { font-size: 1.3rem; font-weight: 800; }
    @media (min-width: 64rem) { .beranda-hanya-hp { display: none; } }
    .beranda-merah { color: var(--danger-600) !important; }
    .dark .beranda-merah { color: var(--danger-400) !important; }
    .beranda-kosong { margin: 0; font-size: .875rem; color: var(--gray-500); }

    /* Profil di kartu utama. */
    .beranda-profil { display: flex; align-items: center; gap: .75rem; min-width: 0; }
    .beranda-foto { width: 3.25rem; height: 3.25rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px var(--beranda-muda); }
    .beranda-profil b { display: block; font-size: 1rem; line-height: 1.3; }
    .beranda-profil small { display: block; font-size: .8rem; color: var(--gray-500); }
    .beranda-pilih { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
    .beranda-pilih button { padding: .35rem .8rem; border-radius: 9999px; border: 0; background: var(--beranda-abu); color: var(--beranda-abu-teks); font-size: .8rem; font-weight: 600; cursor: pointer; }
    .beranda-pilih button.aktif { background: var(--primary-600); color: #fff; }

    /* Deret angka. */
    .beranda-angka { display: grid; grid-template-columns: repeat(var(--kolom), minmax(0, 1fr)); margin: .85rem 0 0; padding-top: .75rem; border-top: 1px dashed var(--gray-200); }
    .dark .beranda-angka { border-color: var(--gray-700); }
    .beranda-angka > div { min-width: 0; padding-inline: .35rem; text-align: center; }
    .beranda-angka > div + div { border-inline-start: 1px solid var(--gray-200); }
    .dark .beranda-angka > div + div { border-color: var(--gray-700); }
    .beranda-angka dt { font-size: .75rem; color: var(--gray-500); }
    .beranda-angka dd { margin: .15rem 0 0; font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; }
    .beranda-angka dd.beranda-angka-catatan { margin: 0; font-size: .75rem; font-weight: 500; color: var(--gray-500); }

    /* Sorotan tagihan dan bilah kemajuan. */
    .beranda-sorot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .85rem; padding: .75rem; border-radius: .9rem; background: color-mix(in oklab, var(--danger-600) 8%, transparent); }
    .beranda-sorot.lunas { background: var(--beranda-muda); }
    .beranda-sorot small { display: block; font-size: .75rem; color: var(--danger-700); }
    .beranda-sorot.lunas small { color: var(--primary-700); }
    .dark .beranda-sorot small { color: var(--danger-300); }
    .dark .beranda-sorot.lunas small { color: var(--primary-300); }
    .beranda-sorot b { font-size: 1.15rem; color: var(--danger-700); }
    .beranda-sorot.lunas b { color: var(--primary-700); }
    .dark .beranda-sorot b { color: var(--danger-300); }
    .dark .beranda-sorot.lunas b { color: var(--primary-300); }
    .beranda-bilah { height: .5rem; border-radius: 9999px; background: var(--beranda-muda); overflow: hidden; margin-top: .35rem; }
    .beranda-bilah span { display: block; height: 100%; min-width: .5rem; border-radius: 9999px; background: linear-gradient(90deg, var(--hijau-logo), var(--primary-600)); }
    .beranda-kemajuan { margin-top: .75rem; font-size: .78rem; color: var(--gray-500); }
    .beranda-kemajuan b { color: var(--gray-900); }
    .dark .beranda-kemajuan b { color: var(--color-white); }
    .beranda-langkah { display: flex; gap: .25rem; margin-top: .6rem; }
    .beranda-langkah i { flex: 1; height: .35rem; border-radius: 9999px; background: var(--gray-200); }
    .dark .beranda-langkah i { background: var(--gray-700); }
    .beranda-langkah i.selesai { background: var(--primary-600); }
    .beranda-langkah i.sekarang { background: var(--kuning-logo); box-shadow: inset 0 0 0 1px #c9bf00; }

    /* Tombol kartu: dua tombol sejajar. */
    .beranda-tombol { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin-top: .85rem; }
    .beranda-tombol .fi-btn { width: 100%; justify-content: center; }

    /* Menu ikon bulat. */
    .beranda-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1rem; column-gap: 0; }
    .beranda-menu-item { display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .beranda-menu-item:active .beranda-menu-ikon { transform: scale(.92); }
    .beranda-menu-ikon { position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1.1rem; transition: transform .1s; }
    .beranda-menu-ikon .fi-icon, .beranda-menu-ikon svg { width: 1.6rem; height: 1.6rem; }
    /* Label tidak dipotong di tengah kata ("Pengumuman" utuh). */
    .beranda-menu-label { font-size: .75rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: normal; word-break: keep-all; }
    .beranda-lencana { position: absolute; top: -.3rem; right: -.3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 9999px; background: var(--danger-600); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.15rem; box-shadow: 0 0 0 2px var(--color-white); }
    .dark .beranda-lencana { box-shadow: 0 0 0 2px var(--gray-900); }
    .beranda-warna-hijau { background: var(--beranda-muda); color: var(--primary-600); }
    .dark .beranda-warna-hijau { color: var(--primary-400); }
    .beranda-warna-kuning { background: var(--beranda-kuning); color: var(--beranda-kuning-teks); }
    .beranda-warna-teal { background: var(--beranda-teal); color: var(--beranda-teal-teks); }
    .beranda-warna-abu { background: var(--beranda-abu); color: var(--beranda-abu-teks); }
    .beranda-warna-merah { background: color-mix(in oklab, var(--danger-600) 12%, transparent); color: var(--danger-700); }
    .dark .beranda-warna-merah { color: var(--danger-300); }
    .beranda-warna-biru { background: color-mix(in oklab, #1d4ed8 11%, white); color: #1d4ed8; }
    .dark .beranda-warna-biru { background: color-mix(in oklab, #3b82f6 16%, var(--gray-900)); color: #93c5fd; }
    .beranda-warna-ungu { background: color-mix(in oklab, #6d28d9 11%, white); color: #6d28d9; }
    .dark .beranda-warna-ungu { background: color-mix(in oklab, #8b5cf6 16%, var(--gray-900)); color: #c4b5fd; }
    .beranda-tanda { position: absolute; top: -.15rem; right: -.15rem; width: .7rem; height: .7rem; border-radius: 9999px; background: var(--danger-600); box-shadow: 0 0 0 2px var(--color-white); }
    .dark .beranda-tanda { box-shadow: 0 0 0 2px var(--gray-900); }
    .beranda-warna-sekarang { background: var(--kuning-logo); color: #2a4207; }
    .beranda-warna-selesai { background: var(--primary-600); color: #fff; }

    /* Layanan umum di beranda semua panel: jadwal sholat paling atas (x-beranda.jadwal-sholat), menu layanan umum di kartu
       Menu (x-beranda.menu-umum), agenda dan ayat hari ini di bawah (x-beranda.layanan-umum). */
    .beranda-umum-kota { font-size: .78rem; font-weight: 500; color: var(--gray-500); }
    .beranda-umum-kota svg, .beranda-sholat-tautan svg { display: inline-block; width: .95rem; height: .95rem; vertical-align: -.15em; }
    .beranda-sholat-tautan { display: inline-flex; gap: .85rem; }
    .beranda-sholat-tautan a { display: inline-flex; align-items: center; gap: .25rem; }
    .beranda-sholat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; margin: 0; padding: 0; list-style: none; text-align: center; }
    .beranda-sholat li { padding: .45rem 0; border-radius: .75rem; font-size: .72rem; color: var(--gray-500); }
    .beranda-sholat li b { display: block; margin-top: .1rem; font-size: .9rem; color: var(--gray-950); font-variant-numeric: tabular-nums; }
    .dark .beranda-sholat li b { color: var(--color-white); }
    .beranda-sholat li.kini { background: var(--primary-600); color: #e7f2d6; }
    .beranda-sholat li.kini b { color: #fff; }
    .beranda-sholat-lagi { margin: .5rem 0 0; font-size: .8rem; font-weight: 600; text-align: center; color: var(--primary-600); }
    .dark .beranda-sholat-lagi { color: var(--primary-400); }
    .beranda-umum-judul { margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--gray-200); }
    .dark .beranda-umum-judul { border-color: var(--gray-700); }
    .beranda-kartu > .beranda-umum-judul:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

    /* Halaman Semua Menu (App\Filament\Pages\SemuaMenu): menu per kelompok berupa ikon, seperti halaman Semua Layanan. */
    .semua-menu { display: grid; gap: 1.1rem; }
    .semua-menu [hidden] { display: none !important; }
    .semua-menu-cari { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; min-height: 2.9rem; border-radius: 1rem; background: var(--color-white); box-shadow: var(--beranda-bayang); color: var(--gray-500); }
    .dark .semua-menu-cari { background: var(--gray-900); }
    .semua-menu-cari svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
    .semua-menu-cari input { flex: 1; min-width: 0; border: 0; padding: .6rem 0; background: transparent; font-size: 1rem; color: var(--gray-950); outline: none; box-shadow: none; }
    .dark .semua-menu-cari input { color: var(--color-white); }
    .semua-menu-grup h2 { margin: 0 .2rem .55rem; font-size: 1rem; font-weight: 700; color: var(--gray-950); }
    .dark .semua-menu-grup h2 { color: var(--color-white); }
    .semua-menu-kosong { margin: 0; padding: 1.5rem 1rem; text-align: center; color: var(--gray-500); }
    @media (min-width: 64rem) { .semua-menu .beranda-menu { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
    @font-face { font-family: 'Amiri Quran'; src: url('https://alfathsolobaru.com/fonts/amiri-quran/AmiriQuran.ttf') format('truetype'); font-display: swap; }
    .beranda-ayat-arab { margin: 0; font-family: 'Amiri Quran', 'Amiri', serif; direction: rtl; text-align: right; font-size: 1.5rem; line-height: 2.1; }
    .beranda-ayat-arab span { color: var(--primary-600); }
    .dark .beranda-ayat-arab span { color: var(--primary-400); }
    .beranda-ayat-arti { margin: .35rem 0 .5rem; font-size: .875rem; line-height: 1.55; color: var(--gray-700); }
    .dark .beranda-ayat-arti { color: var(--gray-300); }
    .beranda-ayat small { font-size: .78rem; font-weight: 700; color: var(--primary-600); }
    .dark .beranda-ayat small { color: var(--primary-400); }

    /* Daftar ringkas. */
    .beranda-daftar { display: grid; }
    .beranda-daftar-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; color: inherit; text-decoration: none; min-width: 0; }
    .beranda-daftar-item + .beranda-daftar-item { border-top: 1px solid var(--gray-100); }
    .dark .beranda-daftar-item + .beranda-daftar-item { border-color: var(--gray-800); }
    /* Butir pertama yang tampil setelah butir tersembunyi (alur PSB yang diringkas) tanpa garis atas. */
    .beranda-daftar-item[x-cloak] + .beranda-daftar-item, .beranda-daftar-item[style*="display: none"] + .beranda-daftar-item { border-top: 0; }
    .beranda-daftar-tanda { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; flex-shrink: 0; font-size: .85rem; font-weight: 700; }
    .beranda-daftar-tanda .fi-icon, .beranda-daftar-tanda svg { width: 1.3rem; height: 1.3rem; }
    .beranda-daftar-teks { flex: 1; min-width: 0; }
    .beranda-daftar-teks b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.35; }
    .beranda-daftar-teks small { display: block; margin-top: .1rem; font-size: .78rem; line-height: 1.35; color: var(--gray-500); }
    .beranda-daftar-waktu { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
    .beranda-daftar-panah { color: var(--gray-400); }
    .beranda-daftar-panah .fi-icon, .beranda-daftar-panah svg { width: 1.1rem; height: 1.1rem; }

    /* Banner pengumuman yang bisa digeser. */
    .beranda-banner-wrap { min-width: 0; }
    .beranda-banner-geser { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 1.1rem; }
    .beranda-banner-geser::-webkit-scrollbar { display: none; }
    .beranda-banner { position: relative; overflow: hidden; flex: 0 0 100%; scroll-snap-align: start; min-height: 7rem; padding: 1rem 1.15rem; color: #fff; background: linear-gradient(120deg, #3d6300, #5c8f05 60%, var(--hijau-logo)); }
    .beranda-banner::after { content: ''; position: absolute; right: -1.2rem; bottom: -2rem; width: 8rem; height: 8rem; border-radius: 9999px; border: 1.1rem solid rgb(255 245 0 / .35); }
    .beranda-banner-label { display: inline-block; padding: .1rem .5rem; border-radius: .4rem; background: var(--kuning-logo); color: #2a4207; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
    .beranda-banner b { position: relative; z-index: 1; display: block; margin-top: .45rem; font-size: 1rem; line-height: 1.3; max-width: 85%; }
    .beranda-banner p { position: relative; z-index: 1; margin: .25rem 0 0; font-size: .8rem; line-height: 1.4; opacity: .92; max-width: 88%; white-space: pre-line; }
    .beranda-titik { display: flex; justify-content: center; gap: .3rem; margin-top: .5rem; }
    .beranda-titik i { width: .4rem; height: .4rem; border-radius: 9999px; background: var(--gray-300); transition: width .2s; }
    .beranda-titik i.aktif { width: 1.1rem; background: var(--primary-600); }

    /* Kartu angka dasbor (WidgetStatistik): kotak berikon di dalam kartu beranda, sama untuk semua peran. */
    .widget-ringkasan .beranda-judul { margin-bottom: .75rem; }
    .ringkasan-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .ringkasan-butir { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .75rem; border-radius: .9rem; background: var(--gray-50); color: inherit; text-decoration: none; transition: background-color .15s; }
    .dark .ringkasan-butir { background: rgb(255 255 255 / .04); }
    a.ringkasan-butir:hover, a.ringkasan-butir:focus-visible { background: var(--beranda-muda); }
    .ringkasan-kepala { display: flex; align-items: center; gap: .5rem; min-width: 0; }
    .ringkasan-ikon { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: .65rem; }
    .ringkasan-ikon .fi-icon, .ringkasan-ikon svg { width: 1.1rem; height: 1.1rem; }
    .ringkasan-label { font-size: .78rem; line-height: 1.3; color: var(--gray-600); }
    .dark .ringkasan-label { color: var(--gray-300); }
    .ringkasan-butir b { margin-top: .2rem; font-size: 1.15rem; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
    .ringkasan-butir small { font-size: .75rem; line-height: 1.35; color: var(--gray-500); }
    .ringkasan-butir small.ringkasan-catatan-merah { color: var(--danger-700); }
    .ringkasan-butir small.ringkasan-catatan-kuning { color: var(--beranda-kuning-teks); }
    .dark .ringkasan-butir small.ringkasan-catatan-merah { color: var(--danger-300); }
    @media (min-width: 64rem) {
        .ringkasan-kisi { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
        /* Kartu dasbor di bawah kepala hijau sejajar dengan kartu di dalamnya. */
        .fi-page-content .fi-wi-widget:not(:has(> .beranda)) { margin-inline: 1.25rem; }
    }

    /* Kartu dan tabel di semua halaman berbentuk sama dengan kartu beranda: sudut bulat dan bayangan lembut. */
    .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.fi-compact):not(.fi-secondary), .fi-ta-ctn { border-radius: 1.1rem; box-shadow: var(--beranda-bayang); }
    .fi-section.fi-aside > .fi-section-content-ctn { border-radius: 1.1rem; box-shadow: var(--beranda-bayang); }
    .fi-ta-ctn:not(.fi-ta-ctn-with-footer) .fi-ta-content-ctn { border-bottom-left-radius: 1.1rem; border-bottom-right-radius: 1.1rem; }

    /* Kartu santri digital (QR) di Portal Santri. */
    .kartu-digital { display: grid; justify-items: center; gap: .5rem; text-align: center; }
    .kartu-digital-qr { width: 14rem; max-width: 100%; padding: .75rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px var(--gray-200); }
    .kartu-digital-qr svg { display: block; width: 100%; height: auto; }
    .kartu-digital b { font-size: 1.05rem; }
    .kartu-digital small { color: var(--gray-500); font-size: .8rem; }
    .beranda-qr { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: .9rem; border: 1px solid var(--gray-200); background: var(--color-white); color: var(--primary-700); cursor: pointer; }
    .dark .beranda-qr { background: var(--gray-800); border-color: var(--gray-700); color: var(--primary-300); }
    .beranda-qr .fi-icon, .beranda-qr svg { width: 2rem; height: 2rem; }

@media (max-width: 39.99rem) {
        /* ---------- Daftar: baris tabel menjadi kartu ringkas ---------- */
        /* Spesifisitas: aturan dasar sel memakai "tr > .fi-ta-cell" (0,2,2); aturan peran memakai ".fi-ta-cell.hp-x"
           (0,3,2) sehingga selalu menang atas aturan label (yang memakai :has) karena ditulis sesudahnya. */
        .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row {
            display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; row-gap: .1rem;
            padding: .8rem 1rem;
        }
        .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row.fi-clickable { padding-inline-end: 2.4rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row.fi-clickable::after {
            content: ''; position: absolute; inset-inline-end: 1.05rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem;
            border-inline-end: 2px solid var(--gray-400); border-bottom: 2px solid var(--gray-400); transform: rotate(-45deg);
        }
        /* Pemisah baris: judul dan "kanan" di baris pertama, sisanya di bawah. */
        .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row::before { content: ''; position: static; order: 3; flex-basis: 100%; height: 0; width: auto; background: none; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell { flex: 1 1 100%; min-width: 0; order: 50; padding: 0 !important; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell,
        .fi-ta-table-stacked-on-mobile > thead .fi-ta-page-checkbox,
        .fi-ta-header-toolbar > .fi-ta-actions,
        .fi-ta-selection-indicator,
        .fi-ta-col-manager-dropdown { display: none !important; }
        .fi-ta-table-stacked-on-mobile .fi-ta-cell-content { min-width: 0; }
        .fi-ta-table-stacked-on-mobile .fi-ta-cell-content :is(.fi-ta-text, .fi-ta-icon, .fi-ta-color, .fi-ta-image) { padding: 0; }
        .fi-ta-table-stacked-on-mobile .fi-ta-cell-content .fi-align-end { text-align: start; justify-content: flex-start; }

        /* Kolom tanpa peran: label kecil di kiri, isi di kanan. */
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-cell-label) {
            display: grid; grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr); column-gap: .75rem; align-items: baseline; padding-block: .12rem !important;
        }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-cell-label { font-size: .75rem; font-weight: 500; line-height: 1.2rem; color: var(--gray-500); text-align: start; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-cell-label) .fi-ta-text-item:not(.fi-badge) { font-size: .8125rem; }
        .fi-ta-table-stacked-on-mobile .fi-ta-cell:has(.fi-ta-image):not(:has(img)) { display: none !important; }

        /* Peran kolom (->hp()): label disembunyikan, isi mengikuti letaknya di kartu. */
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-kanan, .hp-catatan, .hp-status, .hp-avatar) { display: block; padding-block: 0 !important; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-sub, .hp-kanan, .hp-status, .hp-catatan, .hp-avatar) > .fi-ta-cell-label { display: none; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sembunyi { display: none !important; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-judul { order: 1; flex: 1 1 0; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan { order: 2; flex: 0 0 auto; max-width: 50%; margin-inline-start: auto; text-align: end; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub { order: 4; flex: 0 1 auto; display: flex; align-items: baseline; padding-block: 0 !important; }
        /* Status di ujung kanan baris sub; catatan (tanggal, rencana) selalu satu baris penuh di bawahnya. */
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-status { order: 5; flex: 0 0 auto; max-width: 60%; margin-inline-start: auto; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-catatan { order: 6; flex: 1 1 100%; }
        /* Sub: beberapa kolom sebaris, dipisah titik tengah, boleh berawalan ("Kamar A1"). */
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub ~ .fi-ta-cell.hp-sub::before { content: '·'; margin-inline: .3rem; color: var(--gray-400); }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub[data-hp-awalan]::before { content: attr(data-hp-awalan) '\00a0'; color: var(--gray-500); font-size: .8rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub ~ .fi-ta-cell.hp-sub[data-hp-awalan]::before { content: '·\00a0\00a0' attr(data-hp-awalan) '\00a0'; margin-inline: .3rem 0; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub .fi-badge { min-height: 0; padding: 0; background: none; --tw-ring-shadow: 0 0 #0000; color: var(--gray-500); font-size: .8rem; font-weight: 400; }
        /* Catatan dan kanan boleh berawalan kecil ("Jatuh tempo", "Poin"); keterangan kolom sebaris dipisah titik. */
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-catatan { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-sub, .hp-catatan) :is(.fi-ta-cell-content, .fi-ta-col, .fi-ta-text, .fi-ta-text > p) { display: inline; width: auto; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-sub, .hp-catatan) .fi-ta-text-description { font-size: .8rem; color: var(--gray-500); }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-sub, .hp-catatan) .fi-ta-text-description::before { content: '·'; margin-inline: .3rem; color: var(--gray-400); }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-catatan[data-hp-awalan]::before { content: attr(data-hp-awalan); color: var(--gray-500); font-size: .8rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan[data-hp-awalan] { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: .3rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan[data-hp-awalan]::before { content: attr(data-hp-awalan); color: var(--gray-500); font-size: .78rem; font-weight: 500; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-status { text-align: end; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-status :is(.fi-ta-text, .fi-ta-text-item, .fi-ta-icon) { justify-content: flex-end; text-align: end; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-status .fi-ta-text-description { font-size: .75rem; color: var(--gray-500); }
        /* Ukuran huruf per peran. */
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-kanan) .fi-ta-text-item:not(.fi-badge) { font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--gray-950); }
        .dark .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-kanan) .fi-ta-text-item:not(.fi-badge) { color: var(--color-white); }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-sub, .hp-catatan) .fi-ta-text-item:not(.fi-badge) { font-size: .8rem; line-height: 1.35; color: var(--gray-500); }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan :is(.fi-ta-text, .fi-ta-text-item) { justify-content: flex-end; text-align: end; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-kanan, .hp-catatan) .fi-ta-text-description { font-size: .78rem; color: var(--gray-500); }
        /* Avatar (foto atau inisial) di kiri kartu. */
        .fi-ta-table-stacked-on-mobile > tbody > tr:has(> .hp-avatar img) { padding-inline-start: 4.1rem; min-height: 4.1rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-avatar { position: absolute; inset-inline-start: 1rem; top: .85rem; width: 2.5rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-avatar img { width: 2.5rem !important; height: 2.5rem !important; border-radius: 9999px; object-fit: cover; }
        .fi-ta-table-stacked-on-mobile > tbody > tr.hp-tanpa-aksi > .fi-ta-cell:has(> .fi-ta-actions) { display: none !important; }

        /* Tabel tanpa peran kolom: kolom pertama menjadi judul kartu (tebal, tanpa label). */
        .fi-ta-table-stacked-on-mobile > tbody > tr:not(:has(> .hp-judul)) > .fi-ta-cell:nth-child(1 of .fi-ta-cell:has(> .fi-ta-cell-label):not(:has(.fi-ta-image))) { display: block; order: 1; margin-bottom: .2rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr:not(:has(> .hp-judul)) > .fi-ta-cell:nth-child(1 of .fi-ta-cell:has(> .fi-ta-cell-label):not(:has(.fi-ta-image))) > .fi-ta-cell-label { display: none; }
        .fi-ta-table-stacked-on-mobile > tbody > tr:not(:has(> .hp-judul)) > .fi-ta-cell:nth-child(1 of .fi-ta-cell:has(> .fi-ta-cell-label):not(:has(.fi-ta-image))) .fi-ta-text-item:not(.fi-badge) { font-size: .9375rem; font-weight: 700; color: var(--gray-950); }
        .dark .fi-ta-table-stacked-on-mobile > tbody > tr:not(:has(> .hp-judul)) > .fi-ta-cell:nth-child(1 of .fi-ta-cell:has(> .fi-ta-cell-label):not(:has(.fi-ta-image))) .fi-ta-text-item:not(.fi-badge) { color: var(--color-white); }

        /* Tombol baris (Ubah, Hapus, Setujui, ...) menjadi chip kecil di bawah kartu. */
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-actions) { order: 90; margin-top: .45rem; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-actions { justify-content: flex-start; flex-wrap: wrap; gap: .4rem; padding: 0; }
        .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-actions > :is(.fi-link, .fi-icon-btn, .fi-btn, .fi-dropdown > .fi-dropdown-trigger > *) {
            min-height: 2rem; padding: .25rem .7rem; border-radius: 9999px; background: var(--gray-100); font-size: .78rem;
        }
        .dark .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-actions > :is(.fi-link, .fi-icon-btn, .fi-btn, .fi-dropdown > .fi-dropdown-trigger > *) { background: rgb(255 255 255 / .06); }

        /* Urutan, halaman, dan keadaan kosong yang ringkas. */
        .fi-ta-table-stacked-on-mobile > thead .fi-ta-table-stacked-header-cell { padding: .5rem 1rem !important; }
        .fi-ta-table-stacked-sorting { display: flex; justify-content: flex-end; gap: .4rem; }
        .fi-ta-table-stacked-sorting > label { flex: 0 1 auto; }
        .fi-ta-table-stacked-sorting .fi-input-wrp { min-height: 2rem; border-radius: 9999px; box-shadow: none; --tw-ring-shadow: 0 0 0 1px var(--gray-200); background: transparent; }
        .fi-ta-table-stacked-sorting :is(select, .fi-input-wrp-label) { font-size: .78rem; padding-block: .2rem; }
        .fi-pagination { padding: .75rem 1rem; }
        .fi-pagination .fi-pagination-overview { display: none; }

        /* ---------- Kepala daftar: cari dan filter menyatu dengan kepala hijau ---------- */
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta > .fi-ta-ctn {
            background: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; border-radius: 0; overflow: visible;
        }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta > .fi-ta-ctn > .fi-ta-main > .fi-ta-header-ctn {
            margin: calc(-1.5rem - 1px) -1rem 0; padding: calc(.1rem + 1px) 1rem 1rem; border: 0; background: var(--kepala-2); border-radius: 0 0 1.5rem 1.5rem;
        }
        /* Kepala halaman daftar berwarna rata agar menyambung tanpa garis dengan kotak cari di bawahnya. */
        .fi-page:has(.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta) > .fi-page-header-main-ctn > .fi-header { padding-bottom: .9rem; }
        .fi-page:has(.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta) > .fi-page-header-main-ctn > .fi-header::before { border-radius: 0; background: var(--kepala-2); }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-header-toolbar { padding: 0; border: 0; gap: .5rem; }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-header-toolbar > div:last-child { width: 100%; gap: .5rem; }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-search-field { flex: 1; }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-search-field .fi-input-wrp { min-height: 2.75rem; border-radius: .9rem; background: #fff; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-search-field input { font-size: 1rem; }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown { margin-inline-start: auto; }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown > .fi-dropdown-trigger > .fi-icon-btn {
            width: 2.75rem; height: 2.75rem; border-radius: .9rem; background: var(--kuning-logo); color: #2a4207;
        }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown .fi-icon-btn-badge-ctn { top: -.3rem; inset-inline-end: -.3rem; }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown .fi-icon-btn-badge-ctn .fi-badge { background: var(--danger-600); color: #fff; --tw-ring-shadow: 0 0 #0000; }
        /* Daftar di bawah kepala menjadi satu kartu putih. */
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-content-ctn {
            margin-top: .6rem; border-radius: 1.1rem; background: var(--color-white); box-shadow: var(--beranda-bayang); overflow: hidden; border: 0;
        }
        .dark .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-content-ctn { background: var(--gray-900); }
        .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-pagination { margin-top: .6rem; border-radius: 1.1rem; background: var(--color-white); border: 0; }
        .dark .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-pagination { background: var(--gray-900); }

        /* Filter aktif: deret chip yang bisa digeser. */
        .fi-ta-filter-indicators { display: flex; align-items: center; gap: .4rem; padding: .7rem 0 0; background: transparent; border: 0; }
        .fi-ta-filter-indicators > div { display: flex; min-width: 0; flex: 1; }
        .fi-ta-filter-indicators-label { display: none; }
        .fi-ta-filter-indicators-badges-ctn { display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
        .fi-ta-filter-indicators-badges-ctn::-webkit-scrollbar { display: none; }
        .fi-ta-filter-indicators-badges-ctn .fi-badge {
            flex-shrink: 0; min-height: 1.9rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .78rem; font-weight: 600;
            background: var(--beranda-muda); color: var(--primary-800); --tw-ring-shadow: 0 0 0 1.5px color-mix(in oklab, var(--primary-600) 35%, transparent);
        }
        .dark .fi-ta-filter-indicators-badges-ctn .fi-badge { color: var(--primary-200); }
        .fi-ta-ctn:not(:has(.fi-ta-header-ctn)) .fi-ta-filter-indicators { padding-inline: 1rem; }

        /* ---------- Tombol "Buat ..." melayang di kanan bawah ---------- */
        .fi-page .fi-header:has(.aksi-melayang, .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"])) { z-index: 26; }
        .fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang),
        .fi-page-content .fi-ta-header .fi-btn.aksi-melayang {
            position: fixed; inset-inline-end: 1rem; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); z-index: 26;
            height: 3.25rem; padding-inline: 1rem 1.25rem; gap: .45rem; border-radius: 1rem;
            background: var(--primary-600) !important; color: #fff !important; font-size: .9375rem; font-weight: 700;
            box-shadow: 0 8px 20px color-mix(in oklab, var(--primary-700) 40%, transparent);
        }
        .fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang) .fi-icon,
        .fi-page-content .fi-ta-header .fi-btn.aksi-melayang .fi-icon { color: #fff !important; }
        /* Kepala tabel yang hanya berisi tombol melayang tidak perlu memakan tempat. */
        .fi-ta-header:not(:has(.fi-ta-header-heading)):has(.aksi-melayang) { padding: 0; min-height: 0; border: 0; }
        .fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"]):not(:has(.fi-icon))::before {
            content: ''; width: 1.35rem; height: 1.35rem; background: currentColor;
            -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M12 4.5v15m7.5-7.5h-15'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M12 4.5v15m7.5-7.5h-15'/></svg>") center / contain no-repeat;
        }
        /* Tanpa bilah bawah (portal tanpa navigasi), tombol melayang turun. */
        :root:not(:has(.nav-bawah)) :is(.fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang), .fi-page-content .fi-ta-header .fi-btn.aksi-melayang) { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
        /* Isi daftar tidak tertutup tombol melayang. */
        .fi-page:has(.fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang), .fi-ta-header .aksi-melayang) .fi-page-content { padding-bottom: 4.5rem; }

        /* ---------- Lembar dari bawah: menu tombol, filter, dan semua jendela aksi ---------- */
        /* Kepala halaman membuat konteks tumpukan sendiri; saat menunya terbuka (Filament menandai tombolnya aria-expanded)
           ia diangkat di atas bilah bawah. Jangan memeriksa atribut style di dalam :has(): setiap animasi mengubah style dan
           memaksa HP menyusun ulang seluruh halaman (membuka menu Super Admin sampai macet belasan detik). */
        .fi-page .fi-header:has(.fi-dropdown-trigger [aria-expanded="true"]) { z-index: 60; }
        html body .fi-dropdown-panel.fi-dropdown-panel {
            position: fixed !important; inset: auto 0 0 0 !important; width: 100% !important; max-height: 82dvh;
            z-index: 50 !important; overflow-y: auto; border-radius: 1.4rem 1.4rem 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px);
            transform: none !important; translate: none !important; scale: none !important;
            box-shadow: 0 0 0 100vmax rgb(10 20 0 / .45) !important;
        }
        .fi-dropdown-panel::before { content: ''; display: block; width: 2.5rem; height: .25rem; margin: .6rem auto .25rem; border-radius: 9999px; background: var(--gray-300); }
        .dark .fi-dropdown-panel::before { background: var(--gray-600); }
        .fi-dropdown-panel .fi-dropdown-list-item { min-height: 3rem; padding-inline: 1.25rem; font-size: .9375rem; }
        .fi-ta-filters { padding: .5rem 1.25rem 1.25rem; }
        .fi-ta-filters-heading { font-size: 1.125rem; font-weight: 700; }
        .fi-ta-filters-actions-ctn { position: sticky; bottom: 0; margin-inline: -1.25rem; padding: .75rem 1.25rem; background: inherit; }
        .fi-ta-filters-actions-ctn .fi-btn { width: 100%; min-height: 3rem; border-radius: .9rem; font-size: .9375rem; }

        .fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn { padding: 0 !important; grid-template-rows: 1fr auto !important; }
        .fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
            width: 100%; max-width: none !important; height: auto !important; max-height: 92dvh; margin: 0 !important; overflow-y: auto;
            border-radius: 1.4rem 1.4rem 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        .fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window::before { content: ''; display: block; flex-shrink: 0; width: 2.5rem; height: .25rem; margin: .6rem auto 0; border-radius: 9999px; background: var(--gray-300); }
        .dark .fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window::before { background: var(--gray-600); }
        .fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window:is(.fi-transition-enter-start, .fi-transition-leave-end) { scale: 1 !important; opacity: 1 !important; translate: 0 100% !important; }
        .fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window:is(.fi-transition-enter-end, .fi-transition-leave-start) { scale: 1 !important; translate: 0 0 !important; }
        .fi-modal:not(.fi-width-screen) .fi-modal-header { padding-top: .9rem; }
        .fi-modal:not(.fi-width-screen) .fi-modal-heading { font-size: 1.125rem; font-weight: 700; }
        .fi-modal:not(.fi-width-screen) .fi-modal-close-btn { top: 1.3rem !important; background: var(--gray-100); border-radius: 9999px; }
        .dark .fi-modal:not(.fi-width-screen) .fi-modal-close-btn { background: var(--gray-800); }
        .fi-modal:not(.fi-width-screen) .fi-modal-footer { padding-bottom: 1.1rem; }
        .fi-modal:not(.fi-width-screen) .fi-modal-footer-actions { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: .5rem; width: 100%; }
        .fi-modal:not(.fi-width-screen) .fi-modal-footer-actions > * { flex: 1 1 7rem; }
        .fi-modal:not(.fi-width-screen) .fi-modal-footer-actions > :first-child { flex-grow: 1.7; }
        .fi-modal:not(.fi-width-screen) .fi-modal-footer-actions .fi-btn { width: 100%; min-height: 3rem; border-radius: .9rem; font-size: .9375rem; }
    }

    @media (max-width: 39.99rem) {
        /* ---------- Halaman detail: deret tombol bulat di kartu putih yang menumpang di tepi kepala hijau ---------- */
        .fi-resource-view-record-page .fi-header { padding-bottom: 0; }
        .fi-resource-view-record-page .fi-header-actions-ctn {
            margin: .35rem 0 -2.75rem; padding: .8rem .2rem .7rem; overflow-x: auto; scrollbar-width: none;
            border-radius: 1.1rem; background: var(--color-white); box-shadow: var(--beranda-bayang);
        }
        .dark .fi-resource-view-record-page .fi-header-actions-ctn { background: var(--gray-900); }
        .fi-resource-view-record-page .fi-header-actions-ctn::-webkit-scrollbar { display: none; }
        .fi-resource-view-record-page:has(.fi-header-actions-ctn) .fi-page-header-main-ctn { row-gap: 4.1rem; }
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-ac { display: flex; flex-wrap: nowrap; gap: 0; min-width: 100%; width: max-content; }
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-ac > :is(.fi-btn, .fi-dropdown) { flex: 1 0 4.3rem; max-width: 5.5rem; }
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-ac > .fi-dropdown > .fi-dropdown-trigger { width: 100%; }
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-btn {
            display: flex !important; flex-direction: column; align-items: center; gap: .35rem; width: 100%; height: auto; min-height: 0; padding: 0 .15rem;
            background: transparent !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000;
            color: var(--gray-700) !important; font-size: .72rem; font-weight: 600; line-height: 1.15; white-space: normal; text-align: center;
        }
        .dark .fi-resource-view-record-page .fi-header-actions-ctn .fi-btn { color: var(--gray-200) !important; }
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-btn > .fi-icon {
            width: 2.75rem !important; height: 2.75rem !important; padding: .68rem; border-radius: .95rem;
            background: color-mix(in oklab, var(--color-500, var(--primary-600)) 14%, transparent); color: var(--color-600, var(--primary-600)) !important;
        }
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-btn:not(:has(> .fi-icon))::before {
            content: ''; width: 2.75rem; height: 2.75rem; border-radius: .95rem;
            background: color-mix(in oklab, var(--primary-600) 14%, transparent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7700' stroke-width='1.8' stroke-linecap='round'><path d='m8.25 4.5 7.5 7.5-7.5 7.5'/></svg>") center / 1.3rem no-repeat;
        }
        /* Menu ⋮ (kumpulan tindakan) ikut menjadi tombol bulat berlabel "Lainnya"; warna putih bawaan kepala hijau tidak
           terlihat di kartu putih. */
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn {
            display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; height: auto; padding: 0 .15rem;
            background: transparent; color: var(--gray-700) !important; font-size: .72rem; font-weight: 600; line-height: 1.15;
        }
        .dark .fi-resource-view-record-page .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn { color: var(--gray-200) !important; }
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn > .fi-icon {
            width: 2.75rem !important; height: 2.75rem !important; padding: .68rem; border-radius: .95rem;
            background: color-mix(in oklab, var(--gray-500) 14%, transparent); color: var(--gray-600);
        }
        .fi-resource-view-record-page .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn::after { content: 'Lainnya'; }

        /* Tab (data terkait di halaman detail, tab formulir) menjadi deret chip yang bisa digeser. */
        .fi-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: .4rem; margin-inline: 0; padding: .15rem 0 .35rem; background: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; border-radius: 0; }
        .fi-tabs::-webkit-scrollbar { display: none; }
        .fi-tabs-item { flex-shrink: 0; padding: .45rem .95rem !important; border-radius: 9999px; background: var(--color-white); box-shadow: inset 0 0 0 1.5px var(--gray-200); font-size: .8125rem; }
        .dark .fi-tabs-item { background: var(--gray-900); box-shadow: inset 0 0 0 1.5px var(--gray-700); }
        .fi-tabs-item.fi-active { background: var(--primary-600); box-shadow: none; }
        .fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon { color: #fff; }

        /* Isi halaman detail: label kecil di kiri, isi rata kanan, dipisah garis tipis. */
        .fi-section-content:has(> .fi-grid-col > .fi-sc-component > .fi-in-entry) { row-gap: 0 !important; }
        .fi-section-content > .fi-grid-col + .fi-grid-col > .fi-sc-component > .fi-in-entry { border-top: 1px solid var(--gray-100); }
        .dark .fi-section-content > .fi-grid-col + .fi-grid-col > .fi-sc-component > .fi-in-entry { border-color: rgb(255 255 255 / .06); }
        .fi-section-content > .fi-grid-col > .fi-sc-component > .fi-in-entry { padding-block: .6rem; }
        .fi-in-entry:not(.fi-in-entry-has-inline-label):has(> .fi-in-entry-label-col):has(> .fi-in-entry-content-col :is(.fi-in-text, .fi-in-icon, .fi-in-color, .fi-in-placeholder)):not(:has(.fi-in-repeatable, .fi-in-table-repeatable, .fi-in-image, .fi-in-key-value)) > .fi-in-entry-content-col {
            justify-self: end; text-align: end;
        }
        .fi-in-entry:not(.fi-in-entry-has-inline-label):has(> .fi-in-entry-label-col):has(> .fi-in-entry-content-col :is(.fi-in-text, .fi-in-icon, .fi-in-color, .fi-in-placeholder)):not(:has(.fi-in-repeatable, .fi-in-table-repeatable, .fi-in-image, .fi-in-key-value)) > .fi-in-entry-content-col :is(.fi-in-text, .fi-in-text-item, .fi-in-affixes) { justify-content: flex-end; text-align: end; }
        .fi-in-entry .fi-in-entry-label { font-size: .8125rem; font-weight: 500; color: var(--gray-500); }
        .fi-in-entry .fi-in-text-item:not(.fi-badge) { font-size: .875rem; font-weight: 600; }
        .fi-section-header { padding: .85rem 1.1rem; }
        .fi-section-content-ctn > .fi-section-content { padding: .35rem 1.1rem .5rem; }
        .fi-section-header-heading { font-size: .975rem; font-weight: 700; }

        /* ---------- Formulir isi/ubah: kepala ringkas, tanpa bilah atas dan bilah bawah, tombol Simpan menempel ---------- */
        :root:has(.fi-resource-create-record-page, .fi-resource-edit-record-page) :is(.fi-topbar-ctn, .nav-bawah) { display: none !important; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) > .fi-page-header-main-ctn { padding-top: 0; row-gap: 1rem; }
        :root:has(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-main { padding-top: 0; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header {
            position: sticky; top: 0; z-index: 25; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .5rem;
            min-height: calc(3.5rem + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 0 0;
        }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header::before { inset: 0 -1rem; border-radius: 0; background: var(--kepala-2); }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header > div:first-child { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header .fi-breadcrumbs { margin: 0 0 0 -.35rem; flex-shrink: 0; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header .fi-breadcrumbs-item.kembali::before { display: none; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header .fi-breadcrumbs-item.kembali a.fi-breadcrumbs-item-label {
            display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 9999px; font-size: 0; background: rgb(255 255 255 / .14);
        }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header .fi-breadcrumbs-item.kembali a.fi-breadcrumbs-item-label::before {
            content: ''; width: 1.3rem; height: 1.3rem; background: #fff;
            -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M6 18 18 6M6 6l12 12'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M6 18 18 6M6 6l12 12'/></svg>") center / contain no-repeat;
        }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header-heading { font-size: 1.05rem !important; line-height: 1.3 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header-actions-ctn { margin: 0; padding: 0; flex-shrink: 0; overflow: visible; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header-actions-ctn .fi-ac { gap: .35rem; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header-actions-ctn .fi-btn { min-height: 2.1rem; padding: .3rem .7rem; font-size: .78rem; border-radius: 9999px; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-page-main { margin-top: var(--tinggi-lompat, 0px); }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-section { scroll-margin-top: calc(3.5rem + var(--tinggi-lompat, 0px) + .75rem); }

        :root:has(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-main { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-sc-actions.fi-sticky .fi-ac {
            inset-inline: 0; bottom: 0 !important; width: 100%; margin: 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
            display: flex; flex-direction: row-reverse; gap: .5rem; border-radius: 0; box-shadow: 0 -6px 18px rgb(17 24 39 / .08);
        }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-sc-actions .fi-ac > .fi-btn { flex: 1 1 0; min-height: 3rem; border-radius: .9rem; font-size: .9375rem; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-sc-actions .fi-ac > .fi-btn[type="submit"] { flex-grow: 1.8; }
        :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-sc-actions .fi-btn[wire\:click*="createAnother"] { display: none; }

        /* Chip lompat ke bagian formulir (dibuat skrip di tema.blade.php), menempel di bawah kepala. */
        .lompat-bagian {
            position: fixed; inset-inline: 0; top: calc(3.5rem + env(safe-area-inset-top, 0px)); z-index: 24;
            display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 1rem;
            background: var(--color-white); box-shadow: 0 4px 12px rgb(17 24 39 / .06);
        }
        .dark .lompat-bagian { background: var(--gray-900); }
        .lompat-bagian::-webkit-scrollbar { display: none; }
        .lompat-bagian button { flex-shrink: 0; padding: .4rem .9rem; border: 0; border-radius: 9999px; background: var(--gray-100); color: var(--gray-700); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
        .dark .lompat-bagian button { background: var(--gray-800); color: var(--gray-200); }
        .lompat-bagian button.aktif { background: var(--primary-600); color: #fff; }
    }
    .lompat-bagian { display: none; }
    @media (max-width: 39.99rem) { .lompat-bagian { display: flex; } }

    /* ---------- Kepala profil (foto/inisial dan status) dan ringkasan angka di kepala halaman ---------- */
    .kepala-profil { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; }
    .kepala-profil img { width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 3px var(--kuning-logo); background: #fff; }
    .kepala-status { display: inline-block; margin-inline-start: .35rem; padding: .05rem .55rem; border-radius: 9999px; border: 1px solid rgb(255 255 255 / .55); background: rgb(255 255 255 / .16); color: #fff; font-size: .75rem; font-weight: 600; vertical-align: .05rem; }
    /* Hanya di kepala halaman (daftar tagihan); kartu angka dasbor memakai kelas yang sama untuk ikon dan labelnya. */
    .fi-header .ringkasan-kepala { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
    .fi-header .ringkasan-kepala > span { display: flex; flex-direction: column; min-width: 8.5rem; padding: .5rem .8rem; border-radius: .85rem; background: rgb(255 255 255 / .14); color: #fff; line-height: 1.25; }
    .fi-header .ringkasan-kepala small { font-size: .72rem; opacity: .85; }
    .fi-header .ringkasan-kepala b { font-size: 1.15rem; font-weight: 800; }
    @media (max-width: 39.99rem) {
        .fi-resource-view-record-page .fi-header-subheading { font-size: .8rem; margin-top: .25rem; }
        .fi-resource-view-record-page .fi-header:has(.kepala-profil) .fi-header-heading { font-size: 1.2rem !important; }
        .fi-header:has(.kepala-profil) .fi-header-subheading { padding-inline-start: 4rem; margin-top: -.6rem; }
        .fi-header .ringkasan-kepala > span { flex: 1 1 0; }
    }

    /* ---------- Tagihan portal wali: kartu total dan rekening di kepala halaman ---------- */
    .ringkas-wali { display: grid; gap: .6rem; margin-top: .6rem; max-width: 32rem; color: var(--gray-950); }
    .ringkas-wali small { display: block; font-size: .78rem; color: var(--gray-500); }
    .ringkas-wali-kartu { display: block; padding: .9rem 1rem; border-radius: 1.1rem; background: var(--color-white); box-shadow: var(--beranda-bayang); }
    .ringkas-wali-kartu .ringkas-wali-nama { margin-bottom: .2rem; font-weight: 700; color: var(--primary-700); }
    .ringkas-wali-kartu b { display: block; margin: .1rem 0; font-size: 1.6rem; line-height: 1.2; font-weight: 800; }
    .ringkas-wali-tombol { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; margin-top: .75rem; }
    .ringkas-wali-tombol a { display: flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .4rem .75rem; border-radius: .8rem; background: var(--beranda-muda); color: var(--primary-800); font-size: .85rem; font-weight: 700; text-decoration: none; }
    .ringkas-wali-tombol a.utama { background: var(--primary-600); color: #fff; }
    .ringkas-wali-rekening { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-radius: 1.1rem; border: 1.5px dashed color-mix(in oklab, var(--primary-600) 45%, white); background: color-mix(in oklab, var(--primary-600) 5%, white); }
    .ringkas-wali-rekening b { display: block; font-size: .9rem; line-height: 1.35; }
    .ringkas-wali-rekening button { flex-shrink: 0; padding: .45rem .8rem; border: 0; border-radius: .7rem; background: var(--beranda-muda); color: var(--primary-800); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
    .ringkas-wali-catatan { color: rgb(255 255 255 / .85) !important; }
    .ringkas-wali-riwayat { justify-self: start; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; }
    .dark .ringkas-wali { color: var(--color-white); }
    .dark .ringkas-wali-kartu { background: var(--gray-900); }
    .dark .ringkas-wali-rekening { background: var(--gray-900); }
    .dark :is(.ringkas-wali-tombol a:not(.utama), .ringkas-wali-rekening button) { color: var(--primary-200); }

    /* ---------- Halaman masuk/daftar: kepala hijau seperti halaman awal aplikasi, formulir di kartu putih ---------- */
    .kepala-masuk { display: none; }
    .pilih-akun-lain { margin: 1rem 0 0; text-align: center; font-size: .8125rem; color: var(--gray-500); }
    .pilih-akun-lain a { color: var(--primary-600); font-weight: 700; text-decoration: none; }
    .dark .pilih-akun-lain a { color: var(--primary-400); }
    @media (max-width: 39.99rem) {
        .fi-simple-layout:has(.kepala-masuk) { background: var(--gray-50); }
        .dark .fi-simple-layout:has(.kepala-masuk) { background: var(--gray-950); }
        .kepala-masuk {
            display: block; position: relative; isolation: isolate; align-self: stretch; width: 100%; height: 15.5rem; padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem 0; overflow: hidden;
            text-align: center; color: #fff; background: var(--kepala-2); border-radius: 0 0 50% 50% / 0 0 1.75rem 1.75rem;
        }
        .kepala-masuk::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .09;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='none' stroke='white' stroke-width='1.4'><path d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/><rect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/><circle cx='28' cy='28' r='5'/></g></svg>"); }
        .kepala-masuk-kembali { position: absolute; inset-inline-start: .85rem; top: calc(.85rem + env(safe-area-inset-top, 0px)); display: inline-flex; align-items: center; gap: .2rem; padding: .35rem .6rem .35rem .35rem; border-radius: 9999px; background: rgb(255 255 255 / .12); color: #fff; font-size: .8rem; font-weight: 600; text-decoration: none; }
        .kepala-masuk-kembali svg { width: 1.1rem; height: 1.1rem; }
        .kepala-masuk-mihrab { position: relative; width: 6.25rem; height: 7rem; margin: 2.1rem auto 0; }
        .kepala-masuk-mihrab svg { position: absolute; inset: 0; width: 100%; height: 100%; }
        .kepala-masuk-mihrab img { position: absolute; left: .95rem; bottom: .6rem; width: 4.35rem; height: 4.35rem; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); }
        .kepala-masuk-judul { margin: .55rem 0 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
        .kepala-masuk-pesantren { margin: .1rem 0 0; font-size: .8125rem; opacity: .85; }
        .fi-simple-layout:has(.kepala-masuk) .fi-simple-main {
            position: relative; margin-top: -2rem !important; border-top: 0 !important; border-radius: 1.4rem !important; padding-block: 1.5rem !important;
            box-shadow: 0 12px 30px rgb(17 24 39 / .12); --tw-ring-shadow: 0 0 #0000;
        }
        .fi-simple-layout:has(.kepala-masuk) .fi-simple-header .fi-logo { display: none; }
        .fi-simple-layout:has(.kepala-masuk) .fi-simple-header-heading { font-size: 1.25rem; }
        .fi-simple-main .fi-input-wrp { min-height: 3rem; border-radius: .85rem; }
        .fi-simple-main .fi-input { font-size: 1rem; }
        .fi-simple-main .fi-sc-form .fi-ac .fi-btn[type="submit"], .fi-simple-main form > .fi-btn[type="submit"] { min-height: 3rem; border-radius: .9rem; font-size: 1rem; font-weight: 700; }
        /* "Ingat saya" sebagai sakelar. */
        .fi-simple-main .fi-checkbox-input { appearance: none; -webkit-appearance: none; position: relative; width: 2.3rem; height: 1.35rem; border-radius: 9999px; background: var(--gray-300); border: 0; box-shadow: none; cursor: pointer; transition: background-color .15s; }
        .fi-simple-main .fi-checkbox-input::after { content: ''; position: absolute; top: .2rem; left: .2rem; width: .95rem; height: .95rem; border-radius: 9999px; background: #fff; transition: transform .15s; }
        .fi-simple-main .fi-checkbox-input:checked { background: var(--primary-600); background-image: none; }
        .fi-simple-main .fi-checkbox-input:checked::after { transform: translateX(.95rem); }
    }

    /* Lebar menu bawaan Filament memakai !important di lapisan "components"; hanya lapisan lebih awal yang bisa
       menimpanya, jadi aturan ini ditaruh di lapisan "base". */
    @layer base {
        @media (max-width: 39.99rem) {
            .fi-dropdown-panel { max-width: none !important; }
        }
    }