/* VERTEX YY — Tahap 7A: tema global layar lebar (HP mendatar, tablet, laptop). HANYA mode gelap (html.dark) dan layar >= 768 px; HP tegak (<= 767 px) tetap desain HP yang sudah ada,
 * kecuali tata letak lencana lonceng (semua ukuran). Murni tampilan: tidak mengubah data, logika, rute, atau izin. Dimuat SETELAH semua berkas vertex-*.css lain.
 * Titik patah (satu aturan untuk semua halaman):
 *   <= 767 px   desain HP (dock bawah)
 *   768-1099 px dock bawah TETAP; isi maks 1000 px di tengah; padding bawah isi = tinggi dock + 28 px; tinggi layar <= 500 px (HP mendatar): dock ringkas 60 px
 *   >= 1100 px  kapsul kaca samping; isi maks 1320 px
 *   Dock dan kapsul tidak pernah tampil bersamaan (dock = vertex-dock.css <= 1099, kapsul = vertex-kaca.css >= 1100).
 * Bagian: 0 token, 1 tata letak + dock ringkas, 2 bilah atas + lencana, 3 latar, 4 judul, 5 tabel, 6 isian, 7 tombol + lencana status, 8 filter/tab/paginasi/menu, 9 modal + toast.
 * Membalik: lihat CATATAN-PASANG.md (Tahap 7A). */

html.dark {
    --t7-kaca: linear-gradient(160deg, rgba(255, 232, 205, .13), rgba(255, 232, 205, .04));
    --t7-garis: rgba(255, 222, 185, .18);
    --t7-halus: rgba(255, 222, 185, .08);
    --t7-sorot: inset 0 1px 0 rgba(255, 240, 220, .12);
    --t7-input: #1A130D;
    --t7-input-garis: rgba(255, 222, 185, .14);
    --t7-amber: #F2A33A; --t7-amber2: #F2B261; --t7-krem: #F4E9DA; --t7-abu: #A8967F;
    --t7-utama: linear-gradient(145deg, #F7B955, #E0902A);
    --t7-tab: linear-gradient(160deg, rgba(242, 163, 58, .38), rgba(242, 163, 58, .14));
}

/* ===== 1. TATA LETAK ===== */
/* Isi tidak boleh melebar lebih dari layar (penyebab kolom "Selengkapnya"/tabel keluar kartu): semua pembungkus boleh menyempit; tabel bergulir DI DALAM kartunya. */
@media screen and (min-width: 768px) {
    html.dark .fi-main-ctn, html.dark .fi-main, html.dark .fi-page, html.dark .fi-page > section, html.dark .fi-ta, html.dark .fi-page .grid > * { min-width: 0; }
    html.dark .fi-ta { max-width: 100%; }
    html.dark .fi-main { width: 100%; margin-inline: auto; }
    .vk-lebih { display: none !important; }   /* "Selengkapnya" hanya ada di kartu HP; sisa tombolnya (setelah layar diputar) tidak boleh muncul di tabel */
}
@media screen and (min-width: 768px) and (max-width: 1099px) {
    html.dark .fi-main { max-width: 1000px; }
    html.dark .fi-main-ctn { padding-left: 0; }
}
@media screen and (min-width: 1100px) {
    html.dark .fi-main { max-width: 1320px; }
}

/* HP mendatar (tinggi <= 500 px): dock ringkas 60 px, tidak menutupi isi (ruang bawah isi = dock + 28 px) */
@media screen and (min-width: 768px) and (max-width: 1099px) and (max-height: 500px) {
    :root {
        --vy-d-tinggi: 60px; --vy-d-jarak: 12px;
        --vy-d-bawah: calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .vy-dock { border-radius: 30px; }
    .vy-dock-gelembung { top: 4px; width: 52px; height: 52px; border-radius: 22px; }
    .vy-dock-slot { gap: 2px; }
    .vy-dock-ikon, .vy-dock-ikon svg { width: 22px; height: 22px; }
    .vy-dock-nama { font-size: 10px; }
    html.dark body .fi-main-ctn { padding-bottom: calc(var(--vy-d-ruang) + 28px); }
}

/* ===== 2. BILAH ATAS + LENCANA LONCENG (semua ukuran) ===== */
/* lonceng dan foto profil berjarak >= 12 px; angka lencana di pojok kanan-atas lonceng dan tidak menimpa foto */
html.dark .fi-topbar > nav > div { gap: 16px; }
@media screen and (min-width: 768px) { html.dark .fi-topbar .fi-icon-btn { margin: 0; } }   /* Filament memberi tombol ikon margin -6 px (untuk 36 px); tombol bulat 44 px tidak boleh mengurangi jarak ke foto */
html.dark .fi-topbar { z-index: 30; }   /* lembar lonceng (modal) ada di dalam bilah atas: harus di atas kapsul/dock supaya tirai gelapnya menutup mereka */
html.dark .fi-topbar .fi-icon-btn-badge-ctn { top: -5px; inset-inline-end: -5px; left: auto; right: -5px; transform: none; }
html.dark .fi-topbar .fi-icon-btn-badge-ctn .fi-badge {
    min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; justify-content: center;
    background-color: #F2A33A; color: #2A1604; font-size: 11px; font-weight: 700; line-height: 20px; box-shadow: 0 0 0 2px #14100C; --tw-ring-shadow: 0 0 #0000;
}
html.dark .fi-topbar .fi-icon-btn-badge-ctn .fi-badge * { color: #2A1604; }

@media screen and (min-width: 1100px) {
    html.dark .fi-topbar-open-sidebar-btn, html.dark .fi-topbar-close-sidebar-btn { display: none !important; }
    /* laptop: bilah atas ikut gaya HP (judul besar kiri, lonceng + foto bulat kaca kanan), bukan bilah putih penuh */
    html.dark .fi-main-ctn { position: relative; }
    html.dark .fi-topbar { position: absolute; top: 22px; right: 32px; left: auto; width: auto; z-index: 20; background: none; overflow: visible; }
    html.dark .fi-topbar > nav { height: auto; padding: 0; background-color: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; }
    html.dark .fi-topbar .fi-icon-btn, html.dark .fi-topbar .fi-user-menu button {
        width: 44px; height: 44px; min-width: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #E8DCC8;
        background-color: rgba(22, 15, 10, .45); background-image: linear-gradient(160deg, rgba(255, 232, 205, .16), rgba(255, 232, 205, .06)); border: 1px solid rgba(255, 222, 185, .22);
        -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 240, 220, .28);
    }
    html.dark .fi-topbar .fi-user-menu .fi-avatar { width: 34px; height: 34px; }
    html.dark body .fi-main .fi-page { padding-top: 30px; }
    html.dark body .fi-main .fi-page:not(:has(.fi-header)) { padding-top: 84px; }
    html.dark .fi-header > div:first-child { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
    html.dark .fi-header > div:first-child { padding-right: 116px; }   /* tempat lonceng + foto di kanan atas; tombol aksi tetap rata dengan tepi kanan kartu */
    html.dark .fi-header .fi-breadcrumbs { display: block !important; margin: 0 0 4px; font-size: 12px; line-height: 1.3; }
    html.dark .fi-header .fi-breadcrumbs, html.dark .fi-header .fi-breadcrumbs a, html.dark .fi-header .fi-breadcrumbs span { color: #A8967F; }
    html.dark .fi-header .fi-breadcrumbs ol { gap: 4px; }
}

/* ===== 3. LATAR: pola garis (dari tema) + dua lingkaran cahaya amber di tablet; laptop sudah punya di vertex-kaca.css ===== */
@media screen and (min-width: 768px) and (max-width: 1099px) {
    html.dark body.fi-body { background-color: #14100C; }
    html.dark body.fi-body::before, html.dark body.fi-body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; }
    html.dark body.fi-body::before { left: -14vw; bottom: -22vh; width: 62vw; height: 62vh; background: radial-gradient(closest-side, rgba(217, 140, 60, .32), rgba(217, 140, 60, 0)); animation: vy-napas-a 8s ease-in-out infinite alternate; }
    html.dark body.fi-body::after { right: -12vw; top: -24vh; width: 54vw; height: 58vh; background: radial-gradient(closest-side, rgba(190, 112, 46, .24), rgba(190, 112, 46, 0)); animation: vy-napas-b 11s ease-in-out infinite alternate; }
    @keyframes vy-napas-a { from { opacity: .55; } to { opacity: .95; } }
    @keyframes vy-napas-b { from { opacity: .95; } to { opacity: .55; } }
}

/* ===== 4. JUDUL HALAMAN ===== */
@media screen and (min-width: 768px) {
    html.dark .fi-header-heading { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--t7-krem); }
}

/* ===== 5. TABEL = kartu kaca (>= 768 px; di bawahnya tabel sudah menjadi daftar kartu HP) ===== */
@media screen and (min-width: 768px) {
    html.dark:not([data-vy-padat="normal"]) { --vy-baris: 64px; }
    html.dark { --vk-garis-halus: rgba(255, 222, 185, .07); --vk-hover: rgba(255, 232, 205, .055); }

    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) {
        max-width: 100%; min-width: 0; border-radius: 26px; border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000;
        background-color: rgba(24, 17, 11, .62); background-image: linear-gradient(160deg, rgba(255, 232, 205, .08), rgba(255, 232, 205, .025));
        -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .38), var(--t7-sorot);
    }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) > *, html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-header-ctn > * { border-color: var(--t7-halus) !important; }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-header-toolbar { padding: 14px 24px; }
    /* tabel bergulir di dalam kartunya (tidak pernah keluar) */
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-content { max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 222, 185, .28) transparent; }
    /* kepala tabel: kaca tipis, huruf kecil kapital */
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table > thead > tr { background: transparent; border-bottom: 1px solid var(--t7-halus); }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table > thead > tr > th {
        background-color: rgba(31, 22, 15, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-top: 14px; padding-bottom: 14px; }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table > thead > tr > th .fi-ta-header-cell-label,
    html.dark .fi-body .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table > thead > tr > th .fi-ta-header-cell-label {
        font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--t7-abu); }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) > td { height: var(--vy-baris); min-height: 64px; }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table > tbody > tr.fi-ta-row { transition: background-color .2s ease; }
    /* sel aksi (menu ⋮, Ubah, Selengkapnya) di DALAM kolom tabel, rata kanan */
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table td.fi-ta-actions-cell { width: 1%; white-space: nowrap; text-align: right; }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table td.fi-ta-actions-cell .fi-ta-actions { justify-content: flex-end; }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-ta-table td.fi-ta-actions-cell .fi-icon-btn { border-radius: 50%; }
    /* teks "Menampilkan ..." dan jumlah */
    html.dark .fi-pagination-overview { color: var(--t7-abu); }
    html.dark .fi-ta-ctn:not(#tabel-item .fi-ta-ctn) .fi-pagination { padding-top: 14px; padding-bottom: 14px; }
}

/* kartu isi halaman (bagian formulir, widget angka): kaca, radius 26 */
@media screen and (min-width: 768px) {
    html.dark .fi-section:not(#tabel-item .fi-section), html.dark .fi-wi-stats-overview-stat {
        border-radius: 26px; border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000;
        background-color: rgba(24, 17, 11, .62); background-image: linear-gradient(160deg, rgba(255, 232, 205, .08), rgba(255, 232, 205, .025));
        -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 14px 40px rgba(0, 0, 0, .3), var(--t7-sorot);
    }
    html.dark .fi-section:not(#tabel-item .fi-section) .fi-section-header, html.dark .fi-section:not(#tabel-item .fi-section) .fi-section-content-ctn { border-color: var(--t7-halus) !important; }
}

/* ===== 6. ISIAN: tinggi 48, radius 16, latar #1A130D, fokus amber ===== */
@media screen and (min-width: 768px) {
    html.dark .fi-input-wrp {
        border-radius: 16px; background-color: var(--t7-input); border: 1px solid var(--t7-input-garis);
        box-shadow: none !important; --tw-ring-shadow: 0 0 #0000; transition: border-color .2s ease, box-shadow .2s ease;
    }
    html.dark .fi-input-wrp:not(:has(textarea)):not(:has(.fi-fo-rich-editor)) { min-height: 48px; align-items: center; }
    html.dark .fi-input-wrp:focus-within { border-color: var(--t7-amber2); box-shadow: 0 0 0 4px rgba(242, 163, 58, .16) !important; }
    html.dark .fi-input-wrp .fi-input, html.dark .fi-input-wrp .fi-select-input { min-height: 46px; }
    html.dark .fi-input-wrp textarea.fi-input { min-height: 96px; }
    html.dark .fi-input-wrp .fi-input-wrp-prefix, html.dark .fi-input-wrp .fi-input-wrp-suffix { border-color: var(--t7-input-garis) !important; color: var(--t7-abu); }
    html.dark .fi-input-wrp.fi-disabled, html.dark .fi-input-wrp:has(:disabled) { opacity: .7; }
}

/* ===== 7. TOMBOL + LENCANA STATUS ===== */
@media screen and (min-width: 768px) {
    html.dark .fi-btn { border-radius: 999px; font-weight: 600; }
    html.dark .fi-btn:not(.fi-btn-size-xs):not(.fi-btn-size-sm) { min-height: 42px; padding-inline: 1.15rem; }
    /* utama = pil amber bergradien */
    html.dark body .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(label)[class*="bg-custom-"] {
        background-image: var(--t7-utama); background-color: #E0902A; color: #2A1604; border: 0;
        box-shadow: 0 8px 22px rgba(224, 144, 42, .28), inset 0 1px 0 rgba(255, 245, 225, .55); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }
    html.dark body .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(label)[class*="bg-custom-"]:hover { filter: brightness(1.06); transform: translateY(-1px); }
    html.dark body .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(label)[class*="bg-custom-"] .fi-btn-label,
    html.dark body .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(label)[class*="bg-custom-"] svg { color: #2A1604; }
    /* sekunder = kaca */
    html.dark body .fi-btn.fi-color-gray, html.dark body .fi-btn.fi-btn-outlined {
        background-color: rgba(26, 18, 12, .4); background-image: var(--t7-kaca); border: 1px solid var(--t7-garis); color: #F1E8DA; --tw-ring-shadow: 0 0 #0000; box-shadow: var(--t7-sorot);
        -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); transition: background-color .2s ease, border-color .2s ease;
    }
    html.dark body .fi-btn.fi-color-gray:hover, html.dark body .fi-btn.fi-btn-outlined:hover { border-color: rgba(242, 178, 97, .55); background-color: rgba(60, 42, 28, .5); }
    html.dark body .fi-btn.fi-color-gray .fi-btn-label, html.dark body .fi-btn.fi-color-gray svg { color: #F1E8DA; }

    /* lencana status = pil berwarna lembut: Draf amber, Disetujui hijau, Final krem, bahaya merah bata */
    html.dark .fi-badge { border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.35; }
    html.dark .fi-badge.fi-color-warning, html.dark .fi-badge.fi-color-primary { color: #F7C77E; background-color: rgba(242, 163, 58, .14); --tw-ring-color: rgba(242, 163, 58, .36); }
    html.dark .fi-badge.fi-color-success { color: #A9D8AE; background-color: rgba(120, 190, 130, .13); --tw-ring-color: rgba(159, 208, 164, .34); }
    html.dark .fi-badge.fi-color-danger { color: #F2A38E; background-color: rgba(196, 84, 62, .16); --tw-ring-color: rgba(224, 120, 96, .38); }
    html.dark .fi-badge.fi-color-gray, html.dark .fi-badge.fi-color-info { color: #EBDDC6; background-color: rgba(244, 233, 218, .09); --tw-ring-color: rgba(244, 233, 218, .24); }
}

/* ===== 8. FILTER AKTIF (chip amber), TAB (gelembung geser), PAGINASI (pil), MENU TARIK ===== */
@media screen and (min-width: 768px) {
    html.dark .fi-ta-filter-indicators { background: transparent; align-items: center; padding: 10px 24px; }
    html.dark .fi-ta-filter-indicators > div:first-child { align-items: center; row-gap: 8px; }
    html.dark .fi-ta-filter-indicators > div:first-child > span { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark .fi-ta-filter-indicators .fi-badge { height: 30px; padding: 0 8px 0 13px; box-sizing: border-box; align-items: center; color: #F7C77E; background-color: rgba(242, 163, 58, .16); --tw-ring-color: rgba(242, 163, 58, .42); }
    html.dark .fi-ta-filter-indicators .fi-badge-delete-button { width: 22px; height: 22px; margin: 0 0 0 4px; padding: 0; border-radius: 50%; color: #F7C77E; opacity: .85; }
    html.dark .fi-ta-filter-indicators .fi-badge-delete-button:hover { background: rgba(242, 163, 58, .22); opacity: 1; }

}
@media screen and (min-width: 768px) {
    /* tab: kapsul kaca + gelembung amber yang bergeser (posisi diukur vertex-tahap7.js: --tb-x, --tb-w) */
    html.dark .fi-tabs {
        position: relative; border-radius: 999px; padding: 5px; gap: 2px; border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000;
        background-color: rgba(26, 18, 12, .45); background-image: var(--t7-kaca); box-shadow: var(--t7-sorot); scrollbar-width: none;
        -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    }
    html.dark .fi-tabs::-webkit-scrollbar { display: none; }
    html.dark .fi-tabs::before {
        content: ""; position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--tb-w, 0px); transform: translateX(var(--tb-x, 0px)); border-radius: 999px; pointer-events: none; opacity: 0;
        background: var(--t7-tab); border: 1px solid rgba(255, 238, 215, .45); box-shadow: 0 6px 18px rgba(215, 155, 94, .28), inset 0 1px 0 rgba(255, 245, 225, .4);
        transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), width .5s cubic-bezier(.34, 1.45, .64, 1), opacity .25s ease;
    }
    html.dark .fi-tabs[data-tb]::before { opacity: 1; }
    html.dark .fi-tabs-item { position: relative; z-index: 1; transition-property: color; min-height: 40px; padding: 6px 18px; border-radius: 999px; background: transparent; box-shadow: none; }
    html.dark .fi-tabs-item.fi-active { background: transparent; }
    html.dark .fi-tabs:not([data-tb]) .fi-tabs-item.fi-active { background: var(--t7-tab); }   /* sebelum skrip berjalan: item aktif tetap bergelembung */
    html.dark .fi-tabs-item .fi-tabs-item-label { color: #CDBBA3; font-weight: 600; }
    html.dark .fi-tabs-item:hover .fi-tabs-item-label { color: var(--t7-krem); }
    html.dark .fi-tabs-item.fi-active .fi-tabs-item-label { color: #FFE3B8; }
    html.dark .fi-tabs-item:focus-visible { outline: 2px solid var(--t7-amber2); outline-offset: -2px; }
}
@media screen and (min-width: 768px) {
    /* paginasi = pil */
    html.dark .fi-pagination-items {
        display: flex; gap: 2px; padding: 4px; border-radius: 999px; background-color: rgba(26, 18, 12, .45); background-image: var(--t7-kaca); border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000; overflow: hidden; }
    html.dark .fi-pagination-item { border: 0 !important; }
    html.dark .fi-pagination-item .fi-pagination-item-button { min-width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 999px !important; background: transparent; }
    html.dark .fi-pagination-item .fi-pagination-item-label { color: #CDBBA3; }
    html.dark .fi-pagination-item:hover .fi-pagination-item-button { background: rgba(255, 232, 205, .08); }
    html.dark .fi-pagination-item.fi-active .fi-pagination-item-button { background-image: var(--t7-utama); background-color: #E0902A; box-shadow: 0 4px 14px rgba(224, 144, 42, .3); }
    html.dark .fi-pagination-item.fi-active .fi-pagination-item-label { color: #2A1604; }

    /* menu tarik (⋮, filter, pengguna) */
    html.dark .fi-dropdown-panel {
        border-radius: 22px; border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000; background-color: rgba(26, 18, 12, .92); background-image: var(--t7-kaca);
        -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 22px 60px rgba(0, 0, 0, .55), var(--t7-sorot);
    }
    html.dark .fi-dropdown-list-item { border-radius: 14px; }
    html.dark .fi-dropdown-list-item:hover, html.dark .fi-dropdown-list-item:focus-visible { background-color: rgba(255, 232, 205, .08); }
}

/* ===== 9. MODAL, LEMBAR SAMPING, TOAST ===== */
@media screen and (min-width: 768px) {
    html.dark .fi-modal-close-overlay { background-color: rgba(10, 7, 5, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    html.dark .fi-modal-window {
        border-radius: 30px; border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000; background-color: rgba(28, 20, 14, .92); background-image: var(--t7-kaca);
        -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), var(--t7-sorot);
    }
    html.dark .fi-modal-slide-over-window { border-radius: 30px; margin: 12px 12px 12px auto; height: calc(100dvh - 24px); }   /* jarak kanan 12 px (atas/bawah sama supaya sudutnya utuh) */
    html.dark .fi-modal-header.fi-sticky, html.dark .fi-modal-footer { background-color: transparent; border-color: var(--t7-halus); }
    html.dark .fi-modal-header.fi-sticky { background-color: rgba(28, 20, 14, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    html.dark .fi-modal-heading { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; font-size: 19px; }

    html.dark .fi-no-notification:not(.fi-no-database .fi-no-notification) {
        border-radius: 22px; border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000; background-color: rgba(26, 18, 12, .88); background-image: var(--t7-kaca);
        -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 18px 50px rgba(0, 0, 0, .5), var(--t7-sorot);
    }
}

/* modal terbuka: kapsul/dock/tombol melayang ada DI BAWAH tirai gelap (modal berada di dalam isi halaman, jadi z-index kapsul/dock tidak cukup) */
@media screen and (min-width: 768px) {
    html.dark:has(.fi-modal-open) :is(.vy-kaca-wadah, .vy-dock-wadah, .vy-fab, .vy-fab-menu, .gm-fab) { z-index: -1; }
}

@media screen and (prefers-reduced-motion: reduce) {
    html.dark .fi-tabs::before, html.dark .fi-ta-row, html.dark .fi-input-wrp, html.dark .fi-btn { transition-duration: .01ms !important; }
    html.dark body.fi-body::before, html.dark body.fi-body::after { animation: none; opacity: .75; }
}


/* ===== 7B-1. AVATAR: inisial/foto di kapsul samping (sama dengan avatar pojok kanan atas, mis. Owner Uji = OU) dan kepala Nara di Pengaturan ===== */
.vy-kaca-ava { background: none; box-shadow: none; }
.vy-kaca-ava .fp { width: 100%; height: 100%; }
.vy-kaca-ava .vy-kaca-online { z-index: 2; }
.d7-nara-kepala { background: radial-gradient(circle at 50% 60%, rgba(242, 163, 58, .5), rgba(46, 32, 22, .95) 75%); border: 1px solid rgba(242, 163, 58, .45); box-sizing: border-box; }
.d7-nara-kepala svg { display: block; width: 100%; height: 100%; }

/* ===== 7B-3. PUDAR TEPI ATAS/BAWAH daftar menu samping yang bisa digulir (vertex-tahap7.js memberi data-fade="atas bawah") ===== */
@media screen and (min-width: 1100px) {
    html.dark .vy-kaca-nav { --fa: 0px; --fb: 26px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fa), #000 calc(100% - var(--fb)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fa), #000 calc(100% - var(--fb)), transparent 100%); }
    html.dark .vy-kaca-nav[data-fade] { --fb: 0px; }
    html.dark .vy-kaca-nav[data-fade~="atas"] { --fa: 30px; }
    html.dark .vy-kaca-nav[data-fade~="bawah"] { --fb: 30px; }
}

/* ===== 7B. ASISTEN AI (layar lebar >= 768 px, mode gelap) =====
 * Markup SAMA dengan versi HP (blok .d5-hp di asisten-ai.blade.php) + sapaan .d5-sapa; logika/aksi Livewire dan gerak Nara (vertex-tahap5.js + CSS Nara di vertex-tahap5.css) tidak berubah.
 * Tata letak: bagian halaman menjadi grid 2 kolom: kiri panggung Nara (maks 400 px, tinggi penuh), kanan kartu percakapan (sapaan, jawaban, "COBA TANYA" 2x2, catatan) + kolom ketik kaca di bawahnya.
 * HP mendatar (tinggi <= 500 px): Nara kecil (kolom 220 px), saran berupa daftar yang bisa digulir. Bagian lama ("Pekerjaan yang dicari" dll.) disembunyikan seperti di HP. */
.d5-sapa { display: none; }
@media screen and (min-width: 768px) {
    html.dark.d5-ai:not(#d7) {
        --d5-judul: #F4E9DA; --d5-ket: #A8967F; --d5-amber: #F2A33A; --d5-amber2: #F2B261; --d5-isi: #E6DCCD;
        --d5-kartu: linear-gradient(160deg, rgba(46, 32, 22, .9), rgba(21, 16, 11, .9)); --d5-garis: rgba(255, 222, 185, .18);
        --d5-kaca: linear-gradient(160deg, rgba(255, 232, 205, .13), rgba(255, 232, 205, .04)); --d5-sorot: inset 0 1px 0 rgba(255, 240, 220, .1);
        --d5-utama: radial-gradient(circle at 30% 18%, #F2B261, #B97B45);
    }
    html.dark.d5-ai:not(#d7) .fi-header { display: none; }
    html.dark.d5-ai:not(#d7) .d5-lama, html.dark.d5-ai:not(#d7) .d5-sek-mas { display: none !important; }
    html.dark.d5-ai:not(#d7) .fi-page { padding-top: 30px !important; }
    html.dark.d5-ai:not(#d7) .fi-main-ctn { padding-bottom: calc(var(--vy-d-ruang, 88px) + 28px); }

    html.dark.d5-ai:not(#d7) .fi-page > section { padding-top: 0; padding-bottom: 0; }
    html.dark.d5-ai:not(#d7) div:has(> .d5-hp) {
        display: grid; grid-template-columns: clamp(260px, 38vw, 400px) minmax(0, 1fr); column-gap: 24px; row-gap: 0; align-items: start; padding-top: 0; padding-bottom: 0;
    }
    html.dark.d5-ai:not(#d7) .d5-hp { display: contents; }
    /* kartu percakapan kaca di belakang kolom kanan (baris 2-6); kolom ketik (baris 7) di bawahnya */
    html.dark.d5-ai:not(#d7) div:has(> .d5-hp)::before {
        content: ""; grid-column: 2; grid-row: 2 / span 5; align-self: stretch; z-index: 0; border-radius: 30px; border: 1px solid var(--d5-garis);
        background-color: rgba(22, 15, 10, .5); background-image: var(--d5-kaca); box-shadow: 0 18px 50px rgba(0, 0, 0, .38), var(--d5-sorot);
        -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
    }

    /* kiri: judul + panggung */
    html.dark.d5-ai:not(#d7) .d5-kepala { grid-column: 1; grid-row: 1; margin: 0 0 16px; min-height: 44px; }
    html.dark.d5-ai:not(#d7) .d5-judul { margin: 0; padding: 0; font-family: 'Sora', 'Inter', sans-serif; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--d5-judul); }
    html.dark.d5-ai:not(#d7) .d5-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--d5-ket); font-variant-numeric: tabular-nums; }
    html.dark.d5-ai:not(#d7) .d5-panggung {
        grid-column: 1; grid-row: 2 / span 6; align-self: stretch; position: relative; min-height: 480px; border-radius: 30px; overflow: hidden; container-type: inline-size;
        background: radial-gradient(ellipse 66% 52% at 50% 52%, rgba(242, 163, 58, .32), rgba(242, 163, 58, 0) 72%), var(--d5-kaca), rgba(22, 15, 10, .55);
        border: 1px solid var(--d5-garis); box-shadow: 0 16px 34px rgba(0, 0, 0, .36), var(--d5-sorot);
        -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    }
    html.dark.d5-ai:not(#d7) .d5-jalan { position: absolute; left: 24px; right: 24px; bottom: calc(50% - 78px); height: 0; border-top: 2px dashed rgba(255, 222, 185, .3); }
    html.dark.d5-ai:not(#d7) .d5-panggung .runner { bottom: calc(50% - 90px); z-index: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
    html.dark.d5-ai:not(#d7) .d5-panggung .runner:focus-visible { filter: drop-shadow(0 0 6px rgba(242, 178, 97, .8)); }
    html.dark.d5-ai:not(#d7) .d5-panggung .shadow { position: absolute; left: 25px; bottom: 3px; width: 100px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%); pointer-events: none; }
    html.dark.d5-ai:not(#d7) .d5-panggung .sp { position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 2px; background: #F2B261; transform: rotate(45deg); pointer-events: none; }
    html.dark.d5-ai:not(#d7) .d5-panggung .sp:nth-of-type(1) { left: 10px; top: 60px; animation-delay: 0s; }
    html.dark.d5-ai:not(#d7) .d5-panggung .sp:nth-of-type(2) { right: 8px; top: 48px; animation-delay: .25s; background: #FFD9A0; }
    html.dark.d5-ai:not(#d7) .d5-panggung .sp:nth-of-type(3) { left: 30px; top: 20px; animation-delay: .5s; width: 7px; height: 7px; }
    html.dark.d5-ai:not(#d7) .d5-panggung .sp:nth-of-type(4) { right: 30px; top: 18px; animation-delay: .75s; width: 7px; height: 7px; background: #FFD9A0; }
    html.dark.d5-ai:not(#d7) .d5-pil {
        position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .01em;
        color: var(--d5-amber2); background: rgba(242, 163, 58, .14); border: 1px solid rgba(242, 163, 58, .38); transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    }
    html.dark.d5-ai:not(#d7) .d5-pil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    html.dark.d5-ai:not(#d7) .d5-pil[data-status="selesai"] { color: #7FD6A0; background: #16301F; border-color: rgba(127, 214, 160, .35); }

    /* kanan atas: pilihan proyek */
    html.dark.d5-ai:not(#d7) .d5-chips { grid-column: 2; grid-row: 1; align-self: center; display: flex; gap: 8px; margin: 0 0 16px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
    html.dark.d5-ai:not(#d7) .d5-chips::-webkit-scrollbar { display: none; }
    html.dark.d5-ai:not(#d7) .d5-chip {
        flex: 0 0 auto; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; color: var(--d5-isi);
        background: var(--d5-kaca); border: 1px solid var(--d5-garis); box-shadow: var(--d5-sorot); transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    }
    html.dark.d5-ai:not(#d7) .d5-chip[aria-selected="true"] { background: rgba(242, 163, 58, .18); border-color: rgba(242, 163, 58, .55); color: var(--d5-amber2); }

    /* kartu percakapan: isi kolom kanan (di atas ::before) */
    html.dark.d5-ai:not(#d7) .d5-sapa, html.dark.d5-ai:not(#d7) .d5-peringatan, html.dark.d5-ai:not(#d7) .d5-jwb, html.dark.d5-ai:not(#d7) .d5-saran, html.dark.d5-ai:not(#d7) .d5-sek-input { position: relative; z-index: 1; grid-column: 2; margin-left: 26px; margin-right: 26px; }
    html.dark.d5-ai:not(#d7) .d5-sapa { grid-row: 2; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 26px; margin-bottom: 16px; }
    html.dark.d5-ai:not(#d7) .d5-ava, html.dark.d5-ai:not(#d7) .d5-jwb .d5-av {
        display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 60%, rgba(242, 163, 58, .5), rgba(46, 32, 22, .95) 75%); border: 1px solid rgba(242, 163, 58, .45);
    }
    html.dark.d5-ai:not(#d7) .d5-ava svg, html.dark.d5-ai:not(#d7) .d5-jwb .d5-av svg { display: block; width: 44px; height: 44px; }
    html.dark.d5-ai:not(#d7) .d5-gelembung { margin: 0; padding: 14px 18px; border-radius: 6px 22px 22px 22px; font-size: 15px; line-height: 1.55; color: var(--d5-judul); background: rgba(255, 232, 205, .07); border: 1px solid rgba(255, 222, 185, .12); box-shadow: var(--d5-sorot); }
    html.dark.d5-ai:not(#d7) .d5-peringatan { grid-row: 3; margin-top: 0; margin-bottom: 14px; padding: 12px 16px; border-radius: 18px; font-size: 13px; line-height: 1.45; color: #F2C879; background: #3A2A18; border: 1px solid rgba(242, 200, 121, .3); }
    html.dark.d5-ai:not(#d7) .d5-jwb { grid-row: 4; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 18px; scroll-margin-top: 90px; }
    html.dark.d5-ai:not(#d7) .d5-jwb:not(:has(*)) { display: none; }   /* pembungkus jawaban kosong tidak menambah jarak */
    html.dark.d5-ai:not(#d7) .d5-jwb > section { grid-column: 2; }
    html.dark.d5-ai:not(#d7) .d5-jwb .d5-av { grid-column: 1; grid-row: 1; }
    html.dark.d5-ai:not(#d7) .d5-jwb > section.fi-section {
        background: rgba(255, 232, 205, .07) !important; border: 1px solid rgba(255, 222, 185, .12); border-radius: 6px 22px 22px 22px; box-shadow: var(--d5-sorot); --tw-ring-shadow: 0 0 #0000;
        -webkit-backdrop-filter: none; backdrop-filter: none; animation: d5-masuk .45s cubic-bezier(.34, 1.3, .64, 1) both;
    }
    html.dark.d5-ai:not(#d7) .d5-jwb .fi-section-header-heading { display: none; }
    html.dark.d5-ai:not(#d7) .d5-jwb .fi-section-header:not(:has(.fi-section-header-description)) { display: none; }
    html.dark.d5-ai:not(#d7) .d5-jwb .fi-section-header-description { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--d5-ket); }
    html.dark.d5-ai:not(#d7) .d5-jwb .fi-section-header { padding: 14px 18px 0; }
    html.dark.d5-ai:not(#d7) .d5-jwb .fi-section-content-ctn { border-top-width: 0 !important; }
    html.dark.d5-ai:not(#d7) .d5-jwb .fi-section-content { padding: 14px 18px 16px; color: var(--d5-isi); }
    html.dark.d5-ai:not(#d7) .d5-q { display: block; margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--d5-ket); overflow-wrap: anywhere; }
    html.dark.d5-ai:not(#d7) .d5-q strong { color: var(--d5-amber2); font-weight: 700; }
    html.dark.d5-ai:not(#d7) #jawaban-ai { font-size: 15px; line-height: 1.6; color: var(--d5-judul); overflow-wrap: anywhere; }
    html.dark.d5-ai:not(#d7) .d5-jwb input[type="checkbox"] { width: 22px !important; height: 22px !important; accent-color: #F2A33A; flex: 0 0 22px; }
    html.dark.d5-ai:not(#d7) .d5-jwb .saran-volume { width: 100% !important; max-width: 12rem; }
    html.dark.d5-ai:not(#d7) .d5-jwb select, html.dark.d5-ai:not(#d7) .d5-jwb input[type="text"] { width: 100%; max-width: none; min-height: 48px; padding: 0 14px; border-radius: 16px; font-size: 15px; color: var(--d5-judul); background-color: var(--t7-input); border: 1px solid var(--t7-input-garis); color-scheme: dark; }
    html.dark.d5-ai:not(#d7) .d5-jwb select option { color: #F4E9DA; background: #1C150F; }
    html.dark.d5-ai:not(#d7) #terapkan-saran { min-height: 50px; width: 100%; border-radius: 999px; font-weight: 700; }

    /* "COBA TANYA": 4 kartu saran 2 x 2 */
    html.dark.d5-ai:not(#d7) .d5-saran { grid-row: 5; margin-bottom: 8px; }
    html.dark.d5-ai:not(#d7) .d5-label { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--d5-ket); }
    html.dark.d5-ai:not(#d7) .d5-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran {
        display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 108px; padding: 14px 16px 16px; border-radius: 22px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
        background: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .16), rgba(242, 163, 58, 0) 55%), var(--d5-kartu); border: 1px solid rgba(255, 222, 185, .12); box-shadow: 0 10px 22px rgba(0, 0, 0, .3), var(--d5-sorot);
        transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), border-color .25s ease;
    }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran:hover { transform: translateY(-3px); border-color: rgba(242, 163, 58, .5); }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran:active { transform: scale(.98); }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran:focus-visible { outline: 2px solid var(--d5-amber2); outline-offset: 2px; }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran .d5-tag { font-size: 12px; font-weight: 700; color: var(--d5-amber2); }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran .d5-isi { font-size: 14px; line-height: 1.4; color: var(--d5-judul); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
    html.dark.d5-ai:not(#d7) .d5-kecil { margin: 0; font-size: 12px; line-height: 1.5; color: var(--d5-ket); }
    html.dark.d5-ai:not(#d7) .d5-sek-input { grid-row: 6; margin-bottom: 20px; background: none !important; box-shadow: none !important; border: 0; backdrop-filter: none; --tw-ring-shadow: 0 0 #0000; }
    html.dark.d5-ai:not(#d7) .d5-sek-input .fi-section-content-ctn { border: 0 !important; }
    html.dark.d5-ai:not(#d7) .d5-sek-input .fi-section-content { padding: 0; }
    html.dark.d5-ai:not(#d7) .d5-sek-input details { margin-top: 0; font-size: 12px; color: var(--d5-ket); opacity: 1; }
    html.dark.d5-ai:not(#d7) .d5-sek-input details summary { min-height: 40px; display: flex; align-items: center; color: var(--d5-ket); cursor: pointer; }
    html.dark.d5-ai:not(#d7) .d5-sek-input details summary::before { content: "▸"; margin-right: 8px; font-size: 11px; }
    html.dark.d5-ai:not(#d7) .d5-sek-input details[open] summary::before { content: "▾"; }

    /* kolom ketik kaca (tinggi 58): input asli + tombol panah amber */
    html.dark.d5-ai:not(#d7) .d5-bar {
        position: static; grid-column: 2; grid-row: 7; align-self: start; max-width: none; margin: 14px 0 0; box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 6px 0 24px; border-radius: 29px;
        background-color: rgba(22, 15, 10, .62); background-image: var(--d5-kaca); border: 1px solid var(--d5-garis); box-shadow: 0 14px 34px rgba(0, 0, 0, .4), var(--d5-sorot);
        -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); transition: border-color .2s ease, box-shadow .2s ease;
    }
    html.dark.d5-ai:not(#d7) .d5-bar:focus-within { border-color: var(--d5-amber2); box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 4px rgba(242, 163, 58, .16); }
    html.dark.d5-ai:not(#d7) .d5-bar input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0; border: 0; outline: 0; box-shadow: none !important; background: none; font-size: 16px; color: var(--d5-judul); --tw-ring-shadow: 0 0 #0000; }
    html.dark.d5-ai:not(#d7) .d5-bar input::placeholder { color: #B3A08A; }
    html.dark.d5-ai:not(#d7) .d5-bar input:disabled { opacity: .7; }
    html.dark.d5-ai:not(#d7) .d5-bar button {
        flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; min-height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #26170A; background: var(--d5-utama);
        box-shadow: 0 6px 16px rgba(242, 163, 58, .35), inset 0 1px 0 rgba(255, 245, 225, .5); transition: transform .2s ease, opacity .2s ease;
    }
    html.dark.d5-ai:not(#d7) .d5-bar button:hover { transform: translateY(-1px); }
    html.dark.d5-ai:not(#d7) .d5-bar button:active { transform: scale(.92); }
    html.dark.d5-ai:not(#d7) .d5-bar button:disabled { opacity: .5; }
}
@media screen and (min-width: 1100px) {
    html.dark.d5-ai:not(#d7) .fi-main-ctn { padding-bottom: 40px; }
}

/* HP mendatar (tinggi <= 500 px): Nara kecil di kiri (220 px), percakapan + kolom ketik di kanan, saran = daftar yang bisa digulir; tidak ada yang tertutup dock */
@media screen and (min-width: 768px) and (max-width: 1099px) and (max-height: 500px) {
    html.dark.d5-ai:not(#d7) .fi-main-ctn { padding-bottom: calc(var(--vy-d-ruang) + 28px); }
    html.dark.d5-ai:not(#d7) .fi-page { padding-top: 20px !important; }
    html.dark.d5-ai:not(#d7) div:has(> .d5-hp) { grid-template-columns: 220px minmax(0, 1fr); column-gap: 16px; }
    html.dark.d5-ai:not(#d7) .d5-kepala { margin-bottom: 8px; min-height: 0; }
    html.dark.d5-ai:not(#d7) .d5-judul { font-size: 24px; }
    html.dark.d5-ai:not(#d7) .d5-sub { font-size: 12px; }
    html.dark.d5-ai:not(#d7) .d5-chips { margin-right: 120px; margin-bottom: 8px; }
    html.dark.d5-ai:not(#d7) .d5-panggung { min-height: 300px; border-radius: 24px; }
    html.dark.d5-ai:not(#d7) .d5-panggung .runner { width: 112px; left: calc(50% - 56px); bottom: calc(50% - 70px); }
    html.dark.d5-ai:not(#d7) .d5-panggung .runner .nara { width: 112px; height: 148px; }
    html.dark.d5-ai:not(#d7) .d5-panggung .shadow { left: 18px; width: 76px; height: 11px; }
    html.dark.d5-ai:not(#d7) .d5-jalan { left: 16px; right: 16px; bottom: calc(50% - 58px); }
    html.dark.d5-ai:not(#d7) .d5-pil { top: 12px; left: 12px; height: 26px; padding: 0 10px; font-size: 11px; }
    html.dark.d5-ai:not(#d7) div:has(> .d5-hp)::before { border-radius: 24px; }
    html.dark.d5-ai:not(#d7) .d5-sapa, html.dark.d5-ai:not(#d7) .d5-peringatan, html.dark.d5-ai:not(#d7) .d5-jwb, html.dark.d5-ai:not(#d7) .d5-saran, html.dark.d5-ai:not(#d7) .d5-sek-input { margin-left: 16px; margin-right: 16px; }
    html.dark.d5-ai:not(#d7) .d5-sapa { margin-top: 16px; margin-bottom: 10px; }
    html.dark.d5-ai:not(#d7) .d5-gelembung { padding: 10px 14px; font-size: 14px; }
    html.dark.d5-ai:not(#d7) .d5-kisi { grid-template-columns: 1fr; gap: 8px; max-height: 150px; overflow-y: auto; padding-right: 4px; margin-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 222, 185, .28) transparent; overscroll-behavior: contain; }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran { flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 10px 14px; border-radius: 18px; }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran .d5-tag { flex: 0 0 96px; }
    html.dark.d5-ai:not(#d7) .d5-kartu-saran .d5-isi { -webkit-line-clamp: 2; }
    html.dark.d5-ai:not(#d7) .d5-bar { height: 52px; margin-top: 10px; }
    html.dark.d5-ai:not(#d7) .d5-bar input { height: 48px; }
    html.dark.d5-ai:not(#d7) .d5-bar button { flex-basis: 42px; width: 42px; height: 42px; min-height: 42px; }
}

@media screen and (prefers-reduced-motion: reduce) {
    html.dark.d5-ai .d5-hp *, html.dark.d5-ai .d5-hp *::before, html.dark.d5-ai .d5-jwb *, html.dark.d5-ai .d5-panggung *, html.dark.d5-ai .d5-bar { animation: none !important; transition: none !important; }
    html.dark.d5-ai .d5-jwb > section.fi-section { animation: none !important; }
}


/* ===== 7C. DAFTAR RAB = KARTU KACA (semua ukuran; mode gelap) =====
 * Susunan: judul + tombol, 3 kartu ringkasan, [pencarian + chip filter] sebaris (melipat di layar sempit), grid kartu RAB (3 kolom >= 1100, 2 kolom 768-1099, 1 kolom <= 700).
 * Kartu = satu baris tabel Filament (data, urutan, pencarian, paginasi, izin harga TIDAK berubah): sel dipetakan ke area grid. Tabel disembunyikan kepalanya.
 * Mode terang: hanya gaya dasar kartu ringkasan dan garis kemajuan di bawah; tabel tetap tabel. */
.vr-ringkasan { display: flex; flex-wrap: wrap; gap: 16px; }
.vr-rk { flex: 1 1 0; min-width: 160px; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-radius: 20px; border: 1px solid #E4D8C6; background: #fff; }
.vr-rk-nilai { flex: 1.7 1 0; }
.vr-rk-label { font-size: 12px; line-height: 1.3; color: #5C4E3D; }
.vr-rk-angka { font-size: 24px; line-height: 1.2; font-weight: 700; color: #26170A; font-variant-numeric: tabular-nums; }
.vr-rk-rp { color: #7A4A12; }
.vr-rk-lama { font-size: 12px; line-height: 1.35; color: #5C4E3D; }
.vr-lg { display: grid; gap: 6px; min-width: 7rem; padding: 12px; }
.vr-lg-teks { font-size: 12px; color: #5C4E3D; white-space: nowrap; }
.vr-lg-garis { display: block; height: 6px; border-radius: 3px; background: #E4D8C6; overflow: hidden; }
.vr-lg-garis > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #B97B45, #D79B5E); }

@media screen {
    /* --- kartu ringkasan (gelap) --- */
    html.dark:not(#d7) .vr-ringkasan { gap: 16px; }
    html.dark:not(#d7) .vr-rk {
        position: relative; padding: 20px 24px; border-radius: 26px; border: 1px solid var(--t7-garis); overflow: hidden;
        background-color: rgba(24, 17, 11, .62); background-image: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .16), rgba(242, 163, 58, 0) 52%), linear-gradient(160deg, rgba(255, 232, 205, .08), rgba(255, 232, 205, .025));
        -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 14px 40px rgba(0, 0, 0, .3), var(--t7-sorot);
    }
    html.dark:not(#d7) .vr-rk-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark:not(#d7) .vr-rk-angka { font-family: 'Sora', 'Inter', ui-sans-serif, sans-serif; font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.01em; color: var(--t7-krem); }
    html.dark:not(#d7) .vr-rk-rp { color: var(--t7-amber2); }
    html.dark:not(#d7) .vr-rk-lama { font-size: 12px; line-height: 1.35; font-weight: 400; color: #C4B39B; font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) .vr-ringkasan-widget { margin: 0; }

    /* --- susunan: pencarian + chip sebaris, lalu grid kartu --- */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-ctn { display: contents; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page div.flex-col:has(> .fi-ta) { display: flex; flex-flow: row wrap; align-items: center; gap: 16px; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page div.flex-col > .fi-tabs { order: 2; flex: 0 1 auto; margin: 0; max-width: 100%; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta > form { position: absolute; width: 0; height: 0; overflow: hidden; }   /* formulir aksi kosong bawaan Filament: jangan ikut menambah celah */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-ctn > * { order: 5; flex: 1 1 100%; min-width: 0; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-ctn > .fi-ta-header-ctn { order: 1; flex: 1 1 300px; border: 0 !important; background: none; box-shadow: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-ctn > .fi-ta-content { order: 3; flex: 1 1 100%; border: 0 !important; background: none !important; overflow: visible !important; box-shadow: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-header-ctn > * { border: 0 !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-header-toolbar { padding: 0 !important; margin: 0; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-header-toolbar > div { margin: 0; width: 100%; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-header-toolbar > div:empty, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-header-toolbar > div.shrink-0:not(:has(*)) { display: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-search-field { width: 100%; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-search-field .fi-input-wrp {
        height: 52px; border-radius: 999px; background: var(--t7-kaca); box-shadow: var(--t7-sorot); --tw-ring-color: rgba(255, 222, 185, .2); --tw-ring-shadow: 0 0 0 1px rgba(255, 222, 185, .2);
        -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-search-field .fi-input-wrp:focus-within { --tw-ring-color: rgba(242, 178, 97, .75); --tw-ring-shadow: 0 0 0 2px rgba(242, 178, 97, .75); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-search-field .fi-input-wrp-prefix { padding-left: 18px; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-search-field input { height: 52px; font-size: 15px; color: var(--t7-krem); background: transparent; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-search-field input::placeholder { color: #B3A08A; }

    /* chip filter (Semua/Draf/Ditinjau/Disetujui/Terkunci): kapsul kaca + gelembung amber (juga di HP) */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs {
        position: relative; border-radius: 999px; padding: 5px; gap: 2px; border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000; height: 52px; align-items: center; scrollbar-width: none;
        background-color: rgba(26, 18, 12, .45); background-image: var(--t7-kaca); box-shadow: var(--t7-sorot); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs::-webkit-scrollbar { display: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs::before {
        content: ""; position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--tb-w, 0px); transform: translateX(var(--tb-x, 0px)); border-radius: 999px; pointer-events: none; opacity: 0;
        background: var(--t7-tab); border: 1px solid rgba(255, 238, 215, .45); box-shadow: 0 6px 18px rgba(215, 155, 94, .28), inset 0 1px 0 rgba(255, 245, 225, .4);
        transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), width .5s cubic-bezier(.34, 1.45, .64, 1), opacity .25s ease; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs[data-tb]::before { opacity: 1; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs-item { position: relative; z-index: 1; transition-property: color; min-height: 40px; padding: 6px 18px; border-radius: 999px; background: transparent; box-shadow: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs-item.fi-active { background: transparent; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs:not([data-tb]) .fi-tabs-item.fi-active { background: var(--t7-tab); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs-item .fi-tabs-item-label { color: #CDBBA3; font-weight: 600; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs-item:hover .fi-tabs-item-label { color: var(--t7-krem); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs-item.fi-active .fi-tabs-item-label { color: #FFE3B8; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs-item:focus-visible { outline: 2px solid var(--t7-amber2); outline-offset: -2px; }

    /* --- grid kartu --- */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-content .fi-ta-table, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-content .fi-ta-table > tbody { display: block; width: 100%; min-width: 0; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-content .fi-ta-table > thead { display: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-content .fi-ta-table > tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 !important; border: 0 !important; background: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-content .fi-ta-table > tbody > tr:not(.fi-ta-row:has(> td.fi-ta-cell)) { grid-column: 1 / -1; }

    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) {
        position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "status ver" "proyek proyek" "rab rab" "lg lg" "jml jml" "buka buka"; align-items: start; align-content: start; gap: 0 !important;
        margin: 0; padding: 22px 22px 20px; border: 1px solid var(--t7-garis) !important; border-radius: 26px; min-width: 0;
        background-color: rgba(24, 17, 11, .62); background-image: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .2), rgba(242, 163, 58, 0) 46%), linear-gradient(160deg, rgba(255, 232, 205, .08), rgba(255, 232, 205, .025));
        -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 16px 38px rgba(0, 0, 0, .34), var(--t7-sorot);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease; animation: vr-naik .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--vr-i, 0) * .08s);
    }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(1) { --vr-i: 0; } html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(2) { --vr-i: 1; } html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(3) { --vr-i: 2; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(4) { --vr-i: 3; } html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(5) { --vr-i: 4; } html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(6) { --vr-i: 5; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(7) { --vr-i: 6; } html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(8) { --vr-i: 7; } html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(n+9) { --vr-i: 8; }
    @keyframes vr-naik { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    @media (hover: hover) {
        html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):hover { transform: translateY(-6px); border-color: rgba(242, 163, 58, .55) !important; box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(242, 163, 58, .18), var(--t7-sorot); background-color: rgba(24, 17, 11, .62); }
    }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):focus-within { border-color: rgba(242, 163, 58, .55) !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell { display: block; min-width: 0; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell::before { display: none !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row .fi-ta-text { padding: 0 !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-col-wrp > a { display: block; width: 100%; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .vk-lebih { display: none !important; }

    /* pil status (kiri atas) */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-status { grid-area: status; grid-column: 1; grid-row: 1; align-self: center; justify-self: start !important; text-align: left !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-status .fi-badge {
        min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .01em; box-shadow: none; --tw-ring-shadow: 0 0 #0000; border: 1px solid rgba(227, 176, 121, .25);
        background-color: #2C2214 !important; color: #E3B079 !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-status .fi-badge.fi-color-success { background-color: #16301F !important; color: #7FD6A0 !important; border-color: rgba(127, 214, 160, .3); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-status .fi-badge.fi-color-warning { background-color: #3A2A18 !important; color: #F2C879 !important; border-color: rgba(242, 200, 121, .3); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-status .fi-badge.fi-color-info { background-color: #1E2F44 !important; color: #A9CBF5 !important; border-color: rgba(169, 203, 245, .3); }

    /* kolom RAB dibongkar (display: contents): nama RAB -> area rab, "Versi N · harga per ..." -> area ver */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-judul-tampil, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-judul-tampil .fi-ta-col-wrp, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-judul-tampil .fi-ta-col-wrp > a, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-judul-tampil .fi-ta-text { display: contents !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-judul-tampil .fi-ta-text > div { grid-area: rab; margin-top: 4px; min-width: 0; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-judul-tampil .fi-ta-text-item-label {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; white-space: normal;
        font-family: 'Sora', 'Inter', sans-serif; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--t7-krem); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-judul-tampil .fi-ta-text > p {
        grid-area: ver; align-self: center; margin: 0; padding-left: 12px; font-size: 12px !important; line-height: 1.4; font-weight: 400; color: #C4B39B !important; text-align: right; display: block !important; -webkit-line-clamp: unset; white-space: normal; }

    /* nama proyek: abu kecil di atas nama RAB */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-proyek\.nama { grid-area: proyek; margin-top: 18px; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-proyek\.nama .fi-ta-text-item-label { font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--t7-abu); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; overflow-wrap: anywhere; }

    /* garis kemajuan: "Langkah N dari 6" + garis 6 px gradasi tembaga -> amber */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-langkah { grid-area: lg; margin-top: 16px; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .vr-lg { padding: 0; gap: 8px; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .vr-lg-teks { font-size: 12px; font-weight: 500; color: var(--t7-abu); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .vr-lg-garis { height: 6px; border-radius: 3px; background: rgba(255, 222, 185, .1); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .vr-lg-garis > i { border-radius: 3px; background: linear-gradient(90deg, #B97B45, #F2A33A); box-shadow: 0 0 10px rgba(242, 163, 58, .5); transform-origin: left center; animation: vr-isi .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--vr-i, 0) * .08s + .25s); }
    @keyframes vr-isi { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* jumlah sebelum PPN: Sora 20 amber (kolom hanya ada bagi peran berizin harga) */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-total { grid-area: jml; margin-top: 16px; text-align: left !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-total::before { display: block !important; content: attr(data-label); margin: 0 0 3px; font-size: 12px; line-height: 1.3; color: var(--t7-abu); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-total .fi-ta-text, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-total .fi-ta-col-wrp > a > div, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-total .fi-ta-text > div { justify-content: flex-start !important; text-align: left; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-total .fi-ta-text-item-label, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-table-cell-total .fi-ta-text-item {
        display: inline; font-family: 'Sora', 'Inter', sans-serif; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--t7-amber2) !important; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }

    /* tombol Buka: pil amber transparan, panah di kanan (nama RAB, proyek, jumlah, dan garis kemajuan juga tautan ke RAB: recordUrl Filament) */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-ta-actions-cell { grid-area: buka; align-self: end; margin-top: 18px; width: auto !important; text-align: left; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-ta-actions-cell > div { padding: 0 !important; white-space: normal; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions { display: flex; width: 100%; justify-content: stretch; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions a {
        position: static; display: flex; flex: 1 1 auto; width: 100%; height: 46px; min-height: 46px; align-items: center; justify-content: center; flex-direction: row-reverse; gap: 8px; border-radius: 999px;
        font-size: 15px; font-weight: 700; background: rgba(242, 163, 58, .14) !important; border: 1px solid rgba(242, 163, 58, .35) !important; --tw-ring-shadow: 0 0 #0000; box-shadow: none; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .25s ease; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions a span { color: var(--t7-amber2); font-size: 15px; text-decoration: none !important; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions a svg { width: 22px; height: 22px; color: var(--t7-amber2); }
    @media (hover: hover) { html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions a:hover { background: rgba(242, 163, 58, .24) !important; } }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions a:focus-visible { outline: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page tr.fi-ta-row:has(.fi-ta-actions a:focus-visible) { outline: 3px solid var(--t7-amber2); outline-offset: 3px; }

    /* paginasi dan keadaan kosong */
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-ctn > .fi-ta-pagination, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-ctn > .fi-pagination, html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-ctn > nav { order: 4; border: 0 !important; padding: 0 0 8px; background: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-pagination-records-per-page-select { display: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-empty-state { padding: 40px 22px; border: 1px solid var(--t7-garis); border-radius: 26px; background-color: rgba(24, 17, 11, .62); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-empty-state-heading { font-family: 'Sora', sans-serif; font-size: 17px; color: var(--t7-krem); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-empty-state-description { font-size: 13px; color: var(--t7-abu); }
}
@media screen and (max-width: 1099px) {
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-content .fi-ta-table > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-content .fi-ta-table > tbody { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    html.dark:not(#d7) .vr-rk { flex-basis: calc(50% - 8px); min-width: 0; padding: 16px 18px; }
    html.dark:not(#d7) .vr-rk-nilai { flex-basis: 100%; }
    html.dark:not(#d7) .vr-rk-angka { font-size: 24px; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-ctn > .fi-ta-header-ctn { flex-basis: 100%; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page div.flex-col > .fi-tabs { flex: 1 1 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs-item { flex: 0 0 auto; white-space: nowrap; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs[data-geser~="kanan"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs[data-geser~="kiri"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs[data-geser~="kiri"][data-geser~="kanan"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}
@media screen and (prefers-reduced-motion: reduce) {
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) { animation: none; transition: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .vr-lg-garis > i { animation: none; }
    html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-tabs::before { transition-duration: .01ms !important; }
    @media (hover: hover) { html.dark:not(#d7) .fi-resource-rabs.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):hover { transform: none; } }
}

/* ===== 7D. HARGA KOMPONEN = KARTU-BARIS KACA (>= 768 px, mode gelap; HP <= 767 px tetap Desain 4C) =====
 * Tabel Filament dipertahankan; tiap baris dipetakan CSS ke kartu-baris (grid). Kolom "Jadi lengkap" dan "Dipakai favorit" tidak ditampilkan di kartu (ringkasannya ada di keterangan nama: ★ N favorit);
 * kepala tabel dipertahankan sebagai baris label tipis yang sejajar kolom kartu (urut lewat klik tetap bisa). Baris tanpa blur (25 kartu sekaligus) supaya ringan di tablet. */
@media screen and (min-width: 768px) {
    html.dark:not(#d7) #d4-harga .fi-ta-ctn { display: flex; flex-direction: column; gap: 14px; background: none !important; border: 0 !important; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html.dark:not(#d7) #d4-harga .fi-ta-ctn > *, html.dark:not(#d7) #d4-harga .fi-ta-ctn .fi-ta-header-ctn > * { border: 0 !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-ctn { background: none; }
    html.dark:not(#d7) #d4-harga .fi-ta-content { overflow: visible !important; background: none !important; border: 0 !important; }

    /* pencarian pil 52 px + tombol Filter kaca; filter aktif = chip amber ramping dengan × */
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px !important; padding: 0 !important; margin: 0; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar > div { margin: 0; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar > div:not(:has(*)) { display: none; }   /* kotak kosong bawaan Filament: jangan ikut menambah celah */
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { margin-inline-start: 0; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { flex: 1 1 auto; min-width: 0; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar > div:has(.fi-ta-search-field) .fi-ta-search-field { width: 100%; max-width: none; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar > div:has(.fi-ta-search-field) > * { flex: 0 0 auto; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar > div:has(.fi-ta-search-field) > .fi-ta-search-field { flex: 1 1 auto; }
    html.dark:not(#d7) #d4-harga .fi-ta-search-field .fi-input-wrp { height: 52px; border-radius: 999px; background: var(--t7-kaca); box-shadow: var(--t7-sorot) !important; border-color: rgba(255, 222, 185, .2); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
    html.dark:not(#d7) #d4-harga .fi-ta-search-field .fi-input-wrp-prefix { padding-left: 18px; }
    html.dark:not(#d7) #d4-harga .fi-ta-search-field input { height: 50px; font-size: 15px; color: var(--t7-krem); background: transparent; }
    html.dark:not(#d7) #d4-harga .fi-ta-search-field input::placeholder { color: #B3A08A; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar .fi-ta-filters-trigger, html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar button.fi-btn { position: relative; height: 52px; min-height: 52px; padding-inline: 20px 22px; border-radius: 999px; }
    html.dark:not(#d7) #d4-harga .fi-ta-header-toolbar .fi-badge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; font-weight: 700; background: var(--t7-amber) !important; color: #26170A !important; border-radius: 10px; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
    html.dark:not(#d7) #d4-harga .fi-ta-filter-indicators { padding: 0 !important; background: none !important; border: 0 !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-filter-indicators .fi-badge { height: 30px; min-height: 30px; }

    /* kepala tabel = baris label tipis (kapital kecil abu) di atas kartu */
    html.dark:not(#d7) #d4-harga .fi-ta-table { display: block; width: 100%; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead { display: block; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr { display: grid; align-items: center; padding: 0 22px 0 23px; background: none !important; border: 0 !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th { display: none; grid-row: 1; padding: 0 !important; min-width: 0; background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0 !important; width: auto !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-nama, html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-pakai, html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-tgl-harga, html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-harga-berlaku { display: block; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th .fi-ta-header-cell-label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t7-abu); white-space: nowrap; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th svg { width: 14px; height: 14px; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th > span { justify-content: flex-start !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th[class*="fi-table-header-cell-harga"] { padding-left: 4px !important; }

    /* kartu-baris */
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody { display: flex; flex-direction: column; gap: 12px; padding: 0; background: none !important; border-top-width: 0 !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) {
        position: relative; display: grid; align-items: center; min-width: 0; padding: 14px 22px 14px 23px; border: 1px solid var(--t7-garis) !important; border-radius: 22px;
        background-color: rgba(31, 22, 15, .78); background-image: linear-gradient(160deg, rgba(255, 232, 205, .08), rgba(255, 232, 205, .025)); box-shadow: 0 10px 28px rgba(0, 0, 0, .28), var(--t7-sorot);
        transition: border-color .3s ease, box-shadow .3s ease; animation: vr-naik .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--vr-i, 0) * .05s);
    }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:nth-child(1) { --vr-i: 0; } html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:nth-child(2) { --vr-i: 1; } html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:nth-child(3) { --vr-i: 2; } html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:nth-child(4) { --vr-i: 3; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:nth-child(5) { --vr-i: 4; } html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:nth-child(6) { --vr-i: 5; } html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:nth-child(7) { --vr-i: 6; } html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:nth-child(n+8) { --vr-i: 7; }
    @media (hover: hover) { html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):hover { border-color: rgba(242, 163, 58, .5) !important; background-color: rgba(31, 22, 15, .78); } }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):focus-within { border-color: rgba(242, 163, 58, .65) !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell { display: block; min-width: 0; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell::before { display: none !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-text, html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-col-wrp > div { padding: 0 !important; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-n-menyelesaikan, html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-n-favorit, html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-sumber-ket { display: none; }
    html.dark:not(#d7) #d4-harga .vk-lebih { display: none !important; }

    /* nama besar; di bawahnya kode · satuan kecil, keterangan favorit/kedaluwarsa, dan pil BELUM BERHARGA */
    html.dark:not(#d7) #d4-harga td.fi-table-cell-nama { grid-area: nama; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-nama .fi-ta-text { display: flex; flex-direction: column; gap: 6px; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-nama .fi-ta-text > div { display: block; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-nama .fi-ta-text-item-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-family: 'Sora', 'Inter', sans-serif; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--t7-krem); }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-nama .fi-ta-text > p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 12.5px; line-height: 1.4; color: #C4B39B; }
    html.dark:not(#d7) #d4-harga .d4-sep { display: none; }
    html.dark:not(#d7) #d4-harga .d4-kodesat .d4-sep { display: inline; }
    html.dark:not(#d7) #d4-harga .d4-info { display: contents; }
    html.dark:not(#d7) #d4-harga .d4-info .d4-pakai { display: none; }
    html.dark:not(#d7) #d4-harga .d4-info .d4-fav { color: var(--t7-amber2); }
    html.dark:not(#d7) #d4-harga .d4-info .d4-lama-teks { color: #F2C879; }
    html.dark:not(#d7) #d4-harga .d4-status { display: none; }
    html.dark:not(#d7) #d4-harga .d4-status.d4-kosong { display: inline-flex; align-items: center; min-height: 24px; padding: 0 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; color: var(--t7-amber2); background: rgba(242, 163, 58, .14); border: 1px solid rgba(242, 163, 58, .5); }

    /* "Dipakai" dan "Berlaku sejak": kecil dan abu */
    html.dark:not(#d7) #d4-harga td.fi-table-cell-pakai { grid-area: pakai; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-pakai .fi-ta-text-item { display: inline-flex; align-items: baseline; gap: 4px; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-pakai .fi-ta-text-item-label { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--t7-krem); font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-pakai .fi-ta-text-item::after { content: "pekerjaan"; font-size: 12px; color: #C4B39B; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-tgl-harga { grid-area: tgl; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-tgl-harga .fi-ta-text-item-label { font-size: 12.5px; line-height: 1.4; font-weight: 400; color: #C4B39B; white-space: nowrap; font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-tgl-harga .fi-ta-text-item-label[class*="danger"], html.dark:not(#d7) #d4-harga td.fi-table-cell-tgl-harga .fi-ta-text-item-label[style*="danger"] { color: #F2A38E; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-tgl-harga .fi-ta-text-item::before { content: "sejak"; margin-right: 5px; font-size: 12px; color: #A8967F; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-sumber-ket { grid-area: sumber; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-sumber-ket .fi-ta-text-item-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 12px; line-height: 1.4; font-weight: 400; color: #A8967F; }

    /* kolom harga: pil input lebar; "Rp" di kiri, "/ satuan" di kanan; kosong = "Ketuk untuk isi" (placeholder dipasang vertex-rab-hp.js) */
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku { grid-area: harga; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku .fi-ta-col-wrp > div { display: block; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku .fi-ta-text-input { position: relative; width: 100%; min-width: 0 !important; padding: 0 !important; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku .fi-ta-text-input::before { content: "Rp"; position: absolute; z-index: 1; left: 20px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--t7-abu); pointer-events: none; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku .fi-ta-text-input::after { content: "/ " attr(data-satuan); position: absolute; z-index: 1; right: 18px; top: 50%; transform: translateY(-50%); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--t7-abu); pointer-events: none; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku .fi-input-wrp { height: 52px; min-height: 52px; border-radius: 999px; background-color: #120D09; border: 1px solid rgba(255, 222, 185, .16); }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku .fi-input-wrp:focus-within { border-color: var(--t7-amber2); box-shadow: 0 0 0 4px rgba(242, 163, 58, .16) !important; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku input { height: 50px; min-height: 50px; padding: 0 74px 0 46px !important; text-align: right; font-family: 'Sora', 'Inter', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--t7-amber2); font-variant-numeric: tabular-nums; background: none; }
    html.dark:not(#d7) #d4-harga td.fi-table-cell-harga-berlaku input::placeholder { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #B3A08A; }
    html.dark:not(#d7) #d4-harga tr.fi-ta-row.d4-kosong td.fi-table-cell-harga-berlaku .fi-input-wrp { background-color: rgba(242, 163, 58, .07); border-color: rgba(242, 163, 58, .38); }
    html.dark:not(#d7) #d4-harga tr.fi-ta-row.d4-lama td.fi-table-cell-harga-berlaku .fi-input-wrp { border-color: rgba(242, 200, 121, .4); }

    /* aksi ⋮ di kanan */
    html.dark:not(#d7) #d4-harga td.fi-ta-actions-cell { grid-area: aksi; justify-self: end; width: auto !important; }
    html.dark:not(#d7) #d4-harga td.fi-ta-actions-cell > div { padding: 0 !important; }
    html.dark:not(#d7) #d4-harga td.fi-ta-actions-cell .fi-ta-actions { display: flex; justify-content: flex-end; width: auto; }
    html.dark:not(#d7) #d4-harga td.fi-ta-actions-cell .fi-dropdown-trigger button, html.dark:not(#d7) #d4-harga td.fi-ta-actions-cell button.fi-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--t7-halus); background: none !important; color: #C4B39B; box-shadow: none; }
    html.dark:not(#d7) #d4-harga td.fi-ta-actions-cell .fi-icon-btn svg { width: 20px; height: 20px; }
    @media (hover: hover) { html.dark:not(#d7) #d4-harga td.fi-ta-actions-cell button.fi-icon-btn:hover { border-color: rgba(242, 163, 58, .5); color: var(--t7-amber2); } }

    /* paginasi dan keadaan kosong */
    html.dark:not(#d7) #d4-harga .fi-ta-ctn > .fi-pagination, html.dark:not(#d7) #d4-harga .fi-ta-ctn > nav { padding: 4px 0 8px; background: none; }
    html.dark:not(#d7) #d4-harga .fi-pagination-overview { color: var(--t7-abu); }
    html.dark:not(#d7) #d4-harga .fi-ta-placeholder { display: none; }   /* tanda "-" di sel kosong (tanggal/sumber) disembunyikan di kartu */
    html.dark:not(#d7) #d4-harga .fi-ta-empty-state { padding: 40px 22px; border: 1px solid var(--t7-garis); border-radius: 26px; background-color: rgba(24, 17, 11, .62); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7) #d4-harga .fi-ta-empty-state-heading { font-family: 'Sora', sans-serif; font-size: 17px; color: var(--t7-krem); }
}
/* laptop (kapsul samping): satu baris per kartu; kepala label sejajar kolom */
@media screen and (min-width: 1100px) {
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr, html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) { grid-template-columns: minmax(0, 1fr) 156px 156px 280px 44px; column-gap: 20px; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) { grid-template-areas: "nama pakai tgl harga aksi" "nama pakai sumber harga aksi"; row-gap: 2px; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-nama { grid-column: 1; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-pakai { grid-column: 2; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-tgl-harga { grid-column: 3; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-harga-berlaku { grid-column: 4; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-sumber-ket { display: block; }
}
/* tablet / HP mendatar: "Dipakai" dan "Berlaku sejak" pindah ke baris kedua di bawah nama */
@media screen and (min-width: 768px) and (max-width: 1099px) {
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) {
        grid-template-columns: auto auto minmax(0, 1fr) minmax(210px, 260px) 44px; grid-template-areas: "nama nama nama harga aksi" "pakai tgl sumber harga aksi"; column-gap: 22px; row-gap: 8px; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 22px 0 23px; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr::before { content: "Urutkan"; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8F7E69; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > thead > tr > th.fi-table-header-cell-harga-berlaku { display: none; }
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-pakai .fi-ta-text-item { margin-top: 0; }
}
@media screen and (min-width: 1024px) and (max-width: 1099px) {
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-sumber-ket { display: block; }
}
@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
    html.dark:not(#d7) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) { animation: none; transition: none; }
}

/* ===== 7E-1. DASBOR, PROYEK, PEMBANDING RAB (semua ukuran, mode gelap; mode terang memakai dasar polos di bagian pertama) ===== */
.pb-pilih-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pb-label { display: block; font-size: .8125rem; opacity: .75; }
.pb-select { width: 100%; padding: .5rem; border-radius: .5rem; border: 1px solid rgba(128, 128, 128, .4); background: transparent; color: inherit; }
.pb-catatan { margin-top: .5rem; font-size: .8125rem; opacity: .75; }
.pb-area { padding: .5rem 0; border-top: 1px solid rgba(128, 128, 128, .2); }
.pb-area-nama { font-weight: 600; }
.pb-baris { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .875rem; }
.pb-total { margin-top: .5rem; padding-top: .5rem; border-top: 2px solid rgba(128, 128, 128, .4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-weight: 700; }
.pb-lbl { margin-right: .25rem; }
.pb-nil { white-space: nowrap; }
.pb-naik { color: #B45309; }
.pb-turun { color: #15803D; }
.vd-grup-grid { display: block; }

@media screen {
    /* --- Dasbor: sapaan + "Sedang online" --- */
    html.dark:not(#d7) .vd-sapa, html.dark:not(#d7) .vd-online {
        border-radius: 26px; border: 1px solid var(--t7-garis); --tw-ring-shadow: 0 0 #0000; overflow: hidden;
        background-color: rgba(24, 17, 11, .62); background-image: linear-gradient(160deg, rgba(255, 232, 205, .08), rgba(255, 232, 205, .025));
        -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 14px 40px rgba(0, 0, 0, .3), var(--t7-sorot);
    }
    html.dark:not(#d7) .vd-sapa { background-image: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .2), rgba(242, 163, 58, 0) 52%), linear-gradient(160deg, rgba(255, 232, 205, .08), rgba(255, 232, 205, .025)); }
    html.dark:not(#d7) .vd-sapa .fi-section-content { padding: 22px 26px; }
    html.dark:not(#d7) .vd-sapa-isi { gap: 20px !important; }
    html.dark:not(#d7) .vd-cincin { display: inline-flex; padding: 3px; border-radius: 50%; background: linear-gradient(145deg, #F7B955, #B97B45); box-shadow: 0 0 24px rgba(242, 163, 58, .35); }
    html.dark:not(#d7) .vd-halo { font-family: 'Sora', 'Inter', sans-serif; font-size: clamp(22px, 2.3vw, 28px) !important; line-height: 1.2; font-weight: 700 !important; color: var(--t7-krem); letter-spacing: -.01em; }
    html.dark:not(#d7) .vd-jabatan { margin-top: 6px; font-size: 14px !important; line-height: 1.5; opacity: 1 !important; color: #C4B39B; }
    html.dark:not(#d7) .vd-jabatan a { color: var(--t7-amber2); text-underline-offset: 3px; }
    html.dark:not(#d7) .vd-online .fi-section-header { padding: 22px 26px 4px; }
    html.dark:not(#d7) .vd-online .fi-section-header-heading { font-family: 'Sora', 'Inter', sans-serif; font-size: 18px; font-weight: 600; color: var(--t7-krem); }
    html.dark:not(#d7) .vd-online .fi-section-header-description { font-size: 13px; line-height: 1.5; color: #C4B39B; }
    html.dark:not(#d7) .vd-online .fi-section-content-ctn { border-top: 0 !important; }
    html.dark:not(#d7) .vd-online .fi-section-content { padding: 14px 26px 24px; }
    html.dark:not(#d7) .vd-grup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
    html.dark:not(#d7) .vd-grup { margin: 0 !important; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--t7-halus); background: rgba(255, 232, 205, .04); min-width: 0; }
    html.dark:not(#d7) .vd-grup-nama { margin: 0 0 12px !important; font-family: 'Sora', 'Inter', sans-serif; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35; opacity: 1 !important; color: var(--t7-krem); overflow-wrap: anywhere; }
    html.dark:not(#d7) .vd-orang-daftar { gap: 10px !important; }
    html.dark:not(#d7) .vd-orang { gap: 10px !important; padding: 4px 16px 4px 4px; border-radius: 999px; background: rgba(255, 232, 205, .07); border: 1px solid var(--t7-halus); min-width: 0; max-width: 100%; }
    html.dark:not(#d7) .vd-orang > span:last-child { font-size: 13px !important; line-height: 1.35; color: var(--t7-krem); }
    html.dark:not(#d7) .vd-orang > span:last-child span { opacity: 1 !important; color: #C4B39B; }
    html.dark:not(#d7) .vd-kosong { opacity: 1 !important; font-size: 13px !important; color: #A8967F; }

    /* --- Pembanding RAB --- */
    html.dark:not(#d7) .pb-pilih-kartu .fi-section-content { padding: 22px 26px; }
    html.dark:not(#d7) .pb-pilih-grid { gap: 16px; }
    html.dark:not(#d7) .pb-label { margin: 0 0 8px 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: 1; color: var(--t7-abu); }
    html.dark:not(#d7) .pb-select {
        height: 52px; padding: 0 46px 0 22px; border-radius: 999px; font-size: 15px; color: var(--t7-krem); -webkit-appearance: none; appearance: none; cursor: pointer; min-width: 0; text-overflow: ellipsis;
        border: 1px solid rgba(255, 222, 185, .2); background-color: rgba(26, 18, 12, .45); background-image: var(--t7-kaca), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMCcgaGVpZ2h0PScyMCcgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyNGMkIyNjEnIHN0cm9rZS13aWR0aD0nMi4yJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxwYXRoIGQ9J002IDlsNiA2IDYtNicvPjwvc3ZnPg==");
        background-repeat: no-repeat, no-repeat; background-position: 0 0, right 18px center; background-size: auto, 20px; box-shadow: var(--t7-sorot); transition: border-color .2s ease, box-shadow .2s ease; }
    html.dark:not(#d7) .pb-select:focus { outline: none; border-color: var(--t7-amber2); box-shadow: 0 0 0 4px rgba(242, 163, 58, .16); }
    html.dark:not(#d7) .pb-select option { background: #1A130D; color: var(--t7-krem); }
    html.dark:not(#d7) .pb-catatan { margin-top: 16px; font-size: 13px; line-height: 1.5; opacity: 1; color: #C4B39B; }
    html.dark:not(#d7) .pb-hasil .fi-section-header-heading { font-family: 'Sora', 'Inter', sans-serif; font-size: 18px; font-weight: 600; color: var(--t7-krem); }
    html.dark:not(#d7) .pb-hasil .fi-section-content { padding: 14px 26px 26px; }
    html.dark:not(#d7) .pb-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
    html.dark:not(#d7) .pb-area { padding: 18px 20px; border-radius: 22px; border: 1px solid var(--t7-halus); background: rgba(255, 232, 205, .04); min-width: 0; }
    html.dark:not(#d7) .pb-area-nama { margin-bottom: 14px; font-family: 'Sora', 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--t7-krem); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    html.dark:not(#d7) .pb-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; font-size: 13px; }
    html.dark:not(#d7) .pb-sel { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    html.dark:not(#d7) .pb-lbl { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark:not(#d7) .pb-nil { font-family: 'Sora', 'Inter', sans-serif; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--t7-krem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    html.dark:not(#d7) .pb-sel-selisih { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--t7-halus); flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
    html.dark:not(#d7) .pb-sel-selisih .pb-lbl { flex: 0 0 100%; }
    html.dark:not(#d7) .pb-sel-selisih .pb-nil { color: var(--t7-amber2); }
    html.dark:not(#d7) .pb-nil.pb-naik, html.dark:not(#d7) .pb-sel-selisih .pb-nil.pb-naik { color: #F2A38E; }
    html.dark:not(#d7) .pb-nil.pb-turun, html.dark:not(#d7) .pb-sel-selisih .pb-nil.pb-turun { color: #7FD6A0; }
    html.dark:not(#d7) .pb-persen.pb-naik { color: #F2A38E; background: rgba(242, 130, 100, .14); border-color: rgba(242, 163, 142, .38); }
    html.dark:not(#d7) .pb-persen.pb-turun { color: #7FD6A0; background: rgba(110, 210, 150, .14); border-color: rgba(127, 214, 160, .35); }
    html.dark:not(#d7) .pb-persen { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--t7-amber2); background: rgba(242, 163, 58, .14); border: 1px solid rgba(242, 163, 58, .3); font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) .pb-total {
        display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 14px 24px; margin-top: 18px; padding: 22px 26px; border-radius: 24px; border: 1px solid rgba(242, 163, 58, .35); font-weight: 400;
        background: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .2), rgba(242, 163, 58, 0) 55%), rgba(255, 232, 205, .04); }
    html.dark:not(#d7) .pb-total .pb-nil { font-size: clamp(18px, 1.9vw, 24px); }
    html.dark:not(#d7) .pb-total .pb-sel-selisih { grid-column: auto; padding-top: 0; border-top: 0; }
}
@media screen and (max-width: 767px) {
    /* HP: A, B, Total A, Total B satu baris penuh (label kiri, angka kanan) dan angka TIDAK PERNAH patah baris */
    html.dark:not(#d7) .pb-baris, html.dark:not(#d7) .pb-total { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    html.dark:not(#d7) .pb-sel:not(.pb-sel-selisih) { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }
    html.dark:not(#d7) .pb-nil { white-space: nowrap; font-size: clamp(14px, 4.4vw, 17px); }
    html.dark:not(#d7) .pb-total .pb-nil { font-size: clamp(15px, 4.8vw, 19px); }
    html.dark:not(#d7) .pb-total .pb-sel-selisih, html.dark:not(#d7) .pb-baris .pb-sel-selisih { grid-column: auto; padding-top: 12px; border-top: 1px solid var(--t7-halus); }
    html.dark:not(#d7) .pb-pilih-kartu .fi-section-content, html.dark:not(#d7) .pb-hasil .fi-section-content, html.dark:not(#d7) .vd-sapa .fi-section-content { padding-left: 18px; padding-right: 18px; }
    html.dark:not(#d7) .vd-online .fi-section-header { padding-left: 18px; padding-right: 18px; }
    html.dark:not(#d7) .vd-online .fi-section-content { padding-left: 18px; padding-right: 18px; }
    html.dark:not(#d7) .vd-sapa .vd-cincin { transform: scale(.92); transform-origin: left center; }
}

/* --- Proyek: daftar = kartu kaca (grid 3 / 2 / 1 kolom; tabel Filament tetap, baris dipetakan CSS; semua ukuran) --- */
@media screen {
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-ctn { display: flex; flex-direction: column; gap: 18px; background: none !important; border: 0 !important; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-ctn > *, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-ctn .fi-ta-header-ctn > * { border: 0 !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-ctn { background: none; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px !important; padding: 0 !important; margin: 0; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar > div { margin: 0; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar > div:not(:has(*)) { display: none; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar > div:has(.fi-ta-search-field) > * { flex: 0 0 auto; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar > div:has(.fi-ta-search-field) > .fi-ta-search-field { flex: 1 1 0; width: auto; min-width: 0; max-width: none; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-search-field .fi-input-wrp { height: 52px; border-radius: 999px; background: var(--t7-kaca); box-shadow: var(--t7-sorot) !important; border: 1px solid rgba(255, 222, 185, .2); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-search-field .fi-input-wrp:focus-within { border-color: var(--t7-amber2); box-shadow: 0 0 0 4px rgba(242, 163, 58, .16) !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-search-field .fi-input-wrp-prefix { padding-left: 18px; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-search-field input { height: 50px; font-size: 15px; color: var(--t7-krem); background: transparent; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-search-field input::placeholder { color: #B3A08A; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar .fi-dropdown, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar .fi-dropdown-trigger { flex: 0 0 52px; width: 52px; height: 52px; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar .fi-dropdown-trigger button, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-header-toolbar .fi-icon-btn { margin: 0 !important; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 222, 185, .2); background: var(--t7-kaca) !important; box-shadow: var(--t7-sorot); color: #E8DCC8; display: inline-flex; align-items: center; justify-content: center; }

    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-content { overflow: visible !important; background: none !important; border: 0 !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table { display: block; width: 100%; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > thead { display: none; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0; background: none !important; border-top-width: 0 !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) {
        position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-content: start; min-width: 0; padding: 22px; border: 1px solid var(--t7-garis) !important; border-radius: 26px; height: auto;
        grid-template-areas: "status status" "nama nama" "lokasi lokasi" "mulai selesai" "nilai nilai" "ubah ubah";
        background-color: rgba(24, 17, 11, .62); background-image: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .2), rgba(242, 163, 58, 0) 46%), linear-gradient(160deg, rgba(255, 232, 205, .08), rgba(255, 232, 205, .025));
        -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 16px 38px rgba(0, 0, 0, .34), var(--t7-sorot);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease; animation: vr-naik .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--vr-i, 0) * .08s);
    }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(1) { --vr-i: 0; } html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(2) { --vr-i: 1; } html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(3) { --vr-i: 2; } html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(4) { --vr-i: 3; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(5) { --vr-i: 4; } html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(6) { --vr-i: 5; } html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(7) { --vr-i: 6; } html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:nth-child(n+8) { --vr-i: 7; }
    @media (hover: hover) { html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):hover { transform: translateY(-6px); border-color: rgba(242, 163, 58, .55) !important; box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(242, 163, 58, .18), var(--t7-sorot); } }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):focus-within { border-color: rgba(242, 163, 58, .55) !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell { display: block; min-width: 0; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell::before { display: none !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row .fi-ta-text, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row .fi-ta-col-wrp > div { padding: 0 !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:has(.fi-ta-placeholder) { display: none; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .vk-lebih { display: none !important; }

    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-status { grid-area: status; justify-self: start; text-align: left !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-status .fi-badge { min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: none; --tw-ring-shadow: 0 0 #0000; border: 1px solid rgba(227, 176, 121, .25); background-color: #2C2214 !important; color: #E3B079 !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-status .fi-badge.fi-color-success { background-color: #16301F !important; color: #7FD6A0 !important; border-color: rgba(127, 214, 160, .3); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-status .fi-badge.fi-color-warning { background-color: #3A2A18 !important; color: #F2C879 !important; border-color: rgba(242, 200, 121, .3); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-status .fi-badge.fi-color-info { background-color: #1E2F44 !important; color: #A9CBF5 !important; border-color: rgba(169, 203, 245, .3); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-nama { grid-area: nama; margin-top: 14px; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-nama .fi-ta-text-item-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; white-space: normal; font-family: 'Sora', 'Inter', sans-serif; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--t7-krem); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-lokasi { grid-area: lokasi; margin-top: 6px; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-lokasi .fi-ta-text-item-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; color: var(--t7-abu); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-tgl-mulai { grid-area: mulai; margin-top: 16px; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-tgl-selesai { grid-area: selesai; margin-top: 16px; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-tgl-mulai::before, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-tgl-selesai::before { display: block !important; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-tgl-mulai::before { content: "Mulai"; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-tgl-selesai::before { content: "Selesai"; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-tgl-mulai .fi-ta-text-item-label, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-tgl-selesai .fi-ta-text-item-label { font-size: 14px; line-height: 1.4; color: #E6DCCD; font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-nilai-kontrak { grid-area: nilai; margin-top: 16px; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-nilai-kontrak::before { display: block !important; content: "Nilai kontrak"; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-nilai-kontrak .fi-ta-text, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-nilai-kontrak .fi-ta-col-wrp > div { justify-content: flex-start !important; text-align: left; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-table-cell-nilai-kontrak .fi-ta-text-item-label { font-family: 'Sora', 'Inter', sans-serif; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--t7-amber2) !important; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell { grid-area: ubah; margin-top: 18px; width: auto !important; text-align: left; align-self: end; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell > div { padding: 0 !important; white-space: normal; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions { display: flex; width: 100%; justify-content: stretch; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions a, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions button {
        display: flex; flex: 1 1 auto; width: 100%; height: 46px; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none;
        background: rgba(242, 163, 58, .14) !important; border: 1px solid rgba(242, 163, 58, .35) !important; --tw-ring-shadow: 0 0 #0000; box-shadow: none; -webkit-tap-highlight-color: transparent; transition: background-color .25s ease; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions a span, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions button span, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions svg { color: var(--t7-amber2) !important; text-decoration: none !important; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions svg { width: 20px; height: 20px; }
    @media (hover: hover) { html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions a:hover, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page td.fi-ta-actions-cell .fi-ta-actions button:hover { background: rgba(242, 163, 58, .24) !important; } }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-ctn > .fi-pagination, html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-ctn > nav { padding: 4px 0 8px; background: none; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-pagination-records-per-page-select { display: none; }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-pagination-overview { color: var(--t7-abu); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-empty-state { padding: 40px 22px; border: 1px solid var(--t7-garis); border-radius: 26px; background-color: rgba(24, 17, 11, .62); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-empty-state-heading { font-family: 'Sora', sans-serif; font-size: 17px; color: var(--t7-krem); }
}
@media screen and (max-width: 1099px) { html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 767px) { html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media screen and (prefers-reduced-motion: reduce) {
    html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) { animation: none; transition: none; }
    @media (hover: hover) { html.dark:not(#d7) .fi-resource-projects.fi-resource-list-records-page .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):hover { transform: none; } }
}

/* ===== 7E-2. GAMBAR dan PROGRES (>= 768 px, mode gelap): desain HP "kaca cair" dilebarkan = kartu berthumbnail / kartu butir dalam grid 3-2 kolom; langkah RAB 1-2 (Susun RAB, Rekap) dipoles =====
 * Kolom tabel tetap ada di DOM (data sama); kartu HP (kolom "kartu", hiddenFrom md) ditampilkan dan kolom lain disembunyikan. Mode terang dan HP tidak berubah. */
@media screen and (min-width: 768px) {
    /* ---------- GAMBAR ---------- */
    @keyframes gm-melayang-w { from { transform: rotateX(38deg) rotateY(-12deg) rotateZ(7deg) translateY(0); } to { transform: rotateX(34deg) rotateY(-8deg) rotateZ(5deg) translateY(-6px); } }
    html.dark:not(#d7).d5-gambar .gm-bp {
        order: -1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 36%); align-items: center; min-height: 176px; padding: 22px 12px 22px 30px; border-radius: 30px; overflow: hidden; isolation: isolate;
        background: radial-gradient(ellipse 70% 80% at 82% 60%, rgba(120, 170, 215, .22), rgba(120, 170, 215, 0) 70%), var(--t7-kaca), rgba(22, 15, 10, .55);
        border: 1px solid var(--t7-garis); box-shadow: 0 16px 34px rgba(0, 0, 0, .36), var(--t7-sorot); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
    html.dark:not(#d7).d5-gambar .gm-bp::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
        background-image: linear-gradient(rgba(170, 205, 235, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 205, 235, .14) 1px, transparent 1px), linear-gradient(rgba(170, 205, 235, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 205, 235, .07) 1px, transparent 1px);
        background-size: 44px 44px, 44px 44px, 11px 11px, 11px 11px; -webkit-mask-image: linear-gradient(100deg, transparent 10%, #000 70%); mask-image: linear-gradient(100deg, transparent 10%, #000 70%); }
    html.dark:not(#d7).d5-gambar .gm-bp-teks { display: grid; gap: 2px; align-content: center; min-width: 0; }
    html.dark:not(#d7).d5-gambar .gm-bp-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark:not(#d7).d5-gambar .gm-bp-angka { font: 700 72px/1 'Sora', 'Inter', sans-serif; letter-spacing: -.03em; background: linear-gradient(170deg, #FFF3DD 20%, #F2B261 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
    html.dark:not(#d7).d5-gambar .gm-bp-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--t7-amber2); }
    html.dark:not(#d7).d5-gambar .gm-bp-titik { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t7-amber); box-shadow: 0 0 0 4px rgba(242, 163, 58, .22); }
    html.dark:not(#d7).d5-gambar .gm-bp-sub2 { font-size: 12px; color: var(--t7-abu); }
    html.dark:not(#d7).d5-gambar .gm-bp-bidang { position: relative; align-self: stretch; display: grid; place-items: center; perspective: 520px; perspective-origin: 30% 40%; min-width: 0; }
    html.dark:not(#d7).d5-gambar .gm-bp-miring { width: 100%; max-width: 190px; aspect-ratio: 220 / 150; color: #C9DDEE; transform: rotateX(38deg) rotateY(-12deg) rotateZ(7deg); transform-style: preserve-3d; border-radius: 6px;
        background: linear-gradient(150deg, rgba(95, 140, 185, .34), rgba(40, 70, 105, .22)); border: 1px solid rgba(190, 220, 245, .45); box-shadow: -14px 18px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(190, 220, 245, .08) inset; animation: gm-melayang-w 7s ease-in-out infinite alternate; }
    html.dark:not(#d7).d5-gambar .gm-bp-miring svg { display: block; width: 100%; height: 100%; }

    html.dark:not(#d7).d5-gambar .fi-ta-ctn { display: flex; flex-direction: column; gap: 18px; background: none !important; border: 0 !important; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html.dark:not(#d7).d5-gambar .fi-ta-ctn > *, html.dark:not(#d7).d5-gambar .fi-ta-ctn .fi-ta-header-ctn > * { border: 0 !important; }
    html.dark:not(#d7).d5-gambar .fi-ta-header-ctn { background: none; }
    html.dark:not(#d7).d5-gambar .fi-ta-header-toolbar { padding: 0 !important; margin: 0; gap: 12px !important; }
    html.dark:not(#d7).d5-gambar .fi-ta-header-toolbar > div { margin: 0; }
    html.dark:not(#d7).d5-gambar .fi-ta-header-toolbar > div:not(:has(*)) { display: none; }
    html.dark:not(#d7).d5-gambar .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
    html.dark:not(#d7).d5-gambar .fi-ta-header-toolbar > div:has(.fi-ta-search-field) > .fi-ta-search-field { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
    html.dark:not(#d7).d5-gambar .fi-ta-search-field .fi-input-wrp { height: 52px; border-radius: 999px; background: var(--t7-kaca); box-shadow: var(--t7-sorot) !important; border: 1px solid rgba(255, 222, 185, .2); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
    html.dark:not(#d7).d5-gambar .fi-ta-search-field .fi-input-wrp-prefix { padding-left: 18px; }
    html.dark:not(#d7).d5-gambar .fi-ta-search-field input { height: 50px; font-size: 15px; color: var(--t7-krem); background: transparent; }
    html.dark:not(#d7).d5-gambar .fi-ta-content { overflow: visible !important; background: none !important; border: 0 !important; }
    html.dark:not(#d7).d5-gambar .fi-ta-table { display: block; width: 100%; }
    html.dark:not(#d7).d5-gambar .fi-ta-table > thead { display: none; }
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0; background: none !important; border-top-width: 0 !important; }
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) {
        position: relative; display: block; min-width: 0; padding: 18px; border: 1px solid var(--t7-garis) !important; border-radius: 26px; height: auto;
        background-color: rgba(22, 15, 10, .5); background-image: var(--t7-kaca); box-shadow: 0 12px 28px rgba(0, 0, 0, .32), var(--t7-sorot); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease; animation: vr-naik .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--vr-i, 0) * .06s); }
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:nth-child(2) { --vr-i: 1; } html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:nth-child(3) { --vr-i: 2; } html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:nth-child(4) { --vr-i: 3; }
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:nth-child(5) { --vr-i: 4; } html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:nth-child(n+6) { --vr-i: 5; }
    @media (hover: hover) { html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):hover { transform: translateY(-4px); border-color: rgba(242, 163, 58, .5) !important; } }
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell { display: none !important; min-width: 0; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-kartu { display: block !important; }
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell::before { display: none !important; }
    html.dark:not(#d7).d5-gambar .vk-lebih { display: none !important; }
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell { display: block !important; position: absolute; top: 12px; right: 12px; width: auto !important; padding: 0 !important; }
    html.dark:not(#d7).d5-gambar td.fi-ta-actions-cell > div { padding: 0 !important; }
    html.dark:not(#d7).d5-gambar td.fi-ta-actions-cell .fi-ta-actions { width: auto; }
    html.dark:not(#d7).d5-gambar td.fi-ta-actions-cell button { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; color: #E8DCC8; background-color: rgba(22, 15, 10, .45); background-image: linear-gradient(160deg, rgba(255, 232, 205, .16), rgba(255, 232, 205, .06)); border: 1px solid rgba(255, 222, 185, .22); }
    html.dark:not(#d7).d5-gambar .gm-kartu { white-space: normal; display: flex; gap: 14px; align-items: flex-start; padding-right: 44px; min-width: 0; }
    html.dark:not(#d7).d5-gambar .gm-thumb { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; color: #F2B261; border: 1px solid rgba(190, 220, 245, .3); box-shadow: inset 0 1px 0 rgba(255, 240, 220, .12);
        background-color: rgba(28, 44, 62, .55); background-image: linear-gradient(rgba(170, 205, 235, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 205, 235, .14) 1px, transparent 1px); background-size: 11px 11px; }
    html.dark:not(#d7).d5-gambar .gm-thumb svg { width: 46px; height: 46px; }
    html.dark:not(#d7).d5-gambar .gm-rev { position: absolute; right: -5px; bottom: -5px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font: 700 12px/1 'Sora', sans-serif; color: #2A1604; background: linear-gradient(145deg, #F7B955, #E0902A); border: 2px solid #1B140E; box-sizing: border-box; }
    html.dark:not(#d7).d5-gambar .gm-isi { display: grid; gap: 3px; min-width: 0; flex: 1; text-align: left; }
    html.dark:not(#d7).d5-gambar .gm-isi > span { display: block; min-width: 0; }
    html.dark:not(#d7).d5-gambar .gm-nomor { font: 700 16px/1.25 'Sora', 'Inter', sans-serif; letter-spacing: .01em; color: var(--t7-amber2); }
    html.dark:not(#d7).d5-gambar .gm-nomor small { margin-left: 8px; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark:not(#d7).d5-gambar .gm-judul { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--t7-krem); display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
    html.dark:not(#d7).d5-gambar .gm-meta { font-size: 13px; line-height: 1.4; color: var(--t7-abu); }
    html.dark:not(#d7).d5-gambar .gm-label { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
    html.dark:not(#d7).d5-gambar .gm-cp { font-style: normal; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; }
    html.dark:not(#d7).d5-gambar .gm-cp-sudah { color: #8FDDA9; background: rgba(60, 160, 100, .16); border-color: rgba(110, 210, 150, .35); }
    html.dark:not(#d7).d5-gambar .gm-cp-belum { color: #FFA796; background: rgba(230, 90, 70, .16); border-color: rgba(255, 140, 120, .4); }
    html.dark:not(#d7).d5-gambar .gm-cp-dampak { color: var(--t7-amber2); background: rgba(242, 163, 58, .16); border-color: rgba(242, 163, 58, .4); }
    html.dark:not(#d7).d5-gambar .gm-cp-arsip { color: var(--t7-abu); background: rgba(255, 232, 205, .08); border-color: var(--t7-garis); }
    html.dark:not(#d7).d5-gambar .gm-cp-kecil { padding: 0 2px; color: var(--t7-abu); }
    html.dark:not(#d7).d5-gambar .gm-arsip { opacity: .72; }
    html.dark:not(#d7).d5-gambar .gm-d-struktur .gm-thumb { color: #9CC3E4; } html.dark:not(#d7).d5-gambar .gm-d-mep .gm-thumb { color: #8FD3C0; } html.dark:not(#d7).d5-gambar .gm-d-shop .gm-thumb { color: #F0C890; } html.dark:not(#d7).d5-gambar .gm-d-as-built .gm-thumb { color: #C9BFAE; }
    html.dark:not(#d7).d5-gambar .fi-ta-empty-state { padding: 40px 22px; border: 1px solid var(--t7-garis); border-radius: 26px; background-color: rgba(24, 17, 11, .62); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7).d5-gambar .fi-ta-ctn > .fi-pagination, html.dark:not(#d7).d5-gambar .fi-ta-ctn > nav { padding: 4px 0 8px; background: none; }
    html.dark:not(#d7).d5-gambar .fi-pagination-overview { color: var(--t7-abu); }

    /* ---------- PROGRES ---------- */
    html.dark:not(#d7).d5-progres .pg-lama { display: none; }
    html.dark:not(#d7).d5-progres .pg-ring {
        display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 28px; padding: 22px 32px; border-radius: 30px; overflow: hidden; position: relative; isolation: isolate;
        background: radial-gradient(ellipse 50% 90% at 14% 50%, rgba(242, 163, 58, .2), rgba(242, 163, 58, 0) 70%), var(--t7-kaca), rgba(22, 15, 10, .55);
        border: 1px solid var(--t7-garis); box-shadow: 0 16px 34px rgba(0, 0, 0, .36), var(--t7-sorot); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
    html.dark:not(#d7).d5-progres .pg-ring-gbr { position: relative; width: 140px; height: 140px; }
    html.dark:not(#d7).d5-progres .pg-ring-gbr svg { display: block; width: 140px; height: 140px; transform: rotate(-90deg); overflow: visible; }
    html.dark:not(#d7).d5-progres .pg-ring-gbr circle { fill: none; stroke-linecap: round; }
    html.dark:not(#d7).d5-progres .pg-lintasan { stroke: rgba(255, 232, 205, .11); stroke-width: 11; }
    html.dark:not(#d7).d5-progres .pg-lintasan.pg-dlm { stroke-width: 9; }
    html.dark:not(#d7).d5-progres .pg-cincin { stroke-dasharray: var(--v) 100; animation: pg-cincin-w 1.1s cubic-bezier(.22, 1, .36, 1) both; }
    @keyframes pg-cincin-w { from { stroke-dasharray: 0 100; } }
    html.dark:not(#d7).d5-progres .pg-luar { stroke: #F2A33A; stroke-width: 11; filter: drop-shadow(0 0 6px rgba(242, 163, 58, .55)); }
    html.dark:not(#d7).d5-progres .pg-dalam { stroke: #E9D8BC; stroke-width: 9; animation-delay: .15s; filter: drop-shadow(0 0 5px rgba(233, 216, 188, .3)); }
    html.dark:not(#d7).d5-progres .pg-ring-tengah { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
    html.dark:not(#d7).d5-progres .pg-ring-tengah strong { font: 700 26px/1 'Sora', 'Inter', sans-serif; letter-spacing: -.02em; color: var(--t7-krem); font-variant-numeric: tabular-nums; }
    html.dark:not(#d7).d5-progres .pg-ring-tengah span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #D3C3AB; }
    html.dark:not(#d7).d5-progres .pg-ring-ket { display: grid; gap: 10px; min-width: 0; max-width: 420px; }
    html.dark:not(#d7).d5-progres .pg-ring-judul { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark:not(#d7).d5-progres .pg-leg { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #E6DCCD; }
    html.dark:not(#d7).d5-progres .pg-leg b { margin-left: auto; font: 700 18px/1 'Sora', 'Inter', sans-serif; color: var(--t7-krem); font-variant-numeric: tabular-nums; }
    html.dark:not(#d7).d5-progres .pg-t { flex: none; width: 10px; height: 10px; border-radius: 50%; }
    html.dark:not(#d7).d5-progres .pg-t-luar { background: #F2A33A; box-shadow: 0 0 0 3px rgba(242, 163, 58, .22); }
    html.dark:not(#d7).d5-progres .pg-t-dalam { background: #E9D8BC; box-shadow: 0 0 0 3px rgba(233, 216, 188, .18); }
    html.dark:not(#d7).d5-progres .pg-ring-tunggu { justify-self: start; margin-top: 2px; }
    html.dark:not(#d7).d5-progres .pg-tabs { --gi: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: min(100%, 440px); padding: 5px; overflow: hidden; border-radius: 999px;
        background: var(--t7-kaca); border: 1px solid var(--t7-garis); box-shadow: var(--t7-sorot), 0 10px 24px rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
    html.dark:not(#d7).d5-progres .pg-tabs::before { content: ""; position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px; box-sizing: border-box; pointer-events: none;
        background: linear-gradient(160deg, rgba(247, 185, 85, .3), rgba(224, 144, 42, .16)); border: 1px solid rgba(242, 163, 58, .6); box-shadow: 0 6px 16px rgba(224, 144, 42, .22), inset 0 1px 0 rgba(255, 240, 220, .25);
        transform: translateX(calc(var(--gi) * 100%)); transition: transform .5s cubic-bezier(.34, 1.45, .64, 1); }
    html.dark:not(#d7).d5-progres .pg-tab { position: relative; z-index: 1; min-height: 44px; padding: 0 4px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 600; color: #E6DCCD; transition: color .25s ease; }
    html.dark:not(#d7).d5-progres .pg-tab-aktif { background: none; color: #FFD596; }

    html.dark:not(#d7).d5-progres .fi-ta-ctn { display: flex; flex-direction: column; gap: 18px; background: none !important; border: 0 !important; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html.dark:not(#d7).d5-progres .fi-ta-ctn > *, html.dark:not(#d7).d5-progres .fi-ta-ctn .fi-ta-header-ctn > * { border: 0 !important; }
    html.dark:not(#d7).d5-progres .fi-ta-header-ctn { background: none; }
    html.dark:not(#d7).d5-progres .fi-ta-header-toolbar { padding: 0 !important; margin: 0; gap: 12px !important; }
    html.dark:not(#d7).d5-progres .fi-ta-header-toolbar > div { margin: 0; }
    html.dark:not(#d7).d5-progres .fi-ta-header-toolbar > div:not(:has(*)) { display: none; }
    html.dark:not(#d7).d5-progres .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
    html.dark:not(#d7).d5-progres .fi-ta-header-toolbar > div:has(.fi-ta-search-field) > .fi-ta-search-field { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
    html.dark:not(#d7).d5-progres .fi-ta-search-field .fi-input-wrp { height: 52px; border-radius: 999px; background: var(--t7-kaca); box-shadow: var(--t7-sorot) !important; border: 1px solid rgba(255, 222, 185, .2); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
    html.dark:not(#d7).d5-progres .fi-ta-search-field .fi-input-wrp-prefix { padding-left: 18px; }
    html.dark:not(#d7).d5-progres .fi-ta-search-field input { height: 50px; font-size: 15px; color: var(--t7-krem); background: transparent; }
    html.dark:not(#d7).d5-progres .fi-ta-header-toolbar .fi-ta-filters-trigger, html.dark:not(#d7).d5-progres .fi-ta-header-toolbar button.fi-btn { position: relative; height: 52px; min-height: 52px; padding-inline: 20px 22px; border-radius: 999px; }
    html.dark:not(#d7).d5-progres .fi-ta-header-toolbar .fi-badge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; font-weight: 700; background: var(--t7-amber) !important; color: #26170A !important; border-radius: 10px; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
    html.dark:not(#d7).d5-progres .fi-ta-filter-indicators { padding: 0 !important; background: none !important; border: 0 !important; }
    html.dark:not(#d7).d5-progres .fi-ta-content { overflow: visible !important; background: none !important; border: 0 !important; }
    html.dark:not(#d7).d5-progres .fi-ta-table { display: block; width: 100%; }
    html.dark:not(#d7).d5-progres .fi-ta-table > thead { display: none; }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; background: none !important; border-top-width: 0 !important; }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:has(.pg-kartu) {
        position: relative; display: block; min-width: 0; padding: 18px 18px 16px; border: 1px solid var(--t7-garis) !important; border-radius: 26px; height: auto;
        background-color: rgba(22, 15, 10, .5); background-image: var(--t7-kaca); box-shadow: 0 12px 28px rgba(0, 0, 0, .32), var(--t7-sorot); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease; animation: vr-naik .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--vr-i, 0) * .05s); }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:nth-child(2) { --vr-i: 1; } html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:nth-child(3) { --vr-i: 2; } html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:nth-child(4) { --vr-i: 3; }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:nth-child(n+5) { --vr-i: 4; }
    @media (hover: hover) { html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:has(.pg-kartu):hover { transform: translateY(-4px); border-color: rgba(242, 163, 58, .5) !important; } }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell { display: none !important; min-width: 0; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-kartu { display: block !important; }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell::before { display: none !important; }
    html.dark:not(#d7).d5-progres .vk-lebih { display: none !important; }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell { display: block !important; position: absolute; right: 16px; bottom: 16px; width: auto !important; padding: 0 !important; }
    html.dark:not(#d7).d5-progres td.fi-ta-actions-cell > div { padding: 0 !important; }
    html.dark:not(#d7).d5-progres td.fi-ta-actions-cell .fi-ta-actions { width: auto; }
    html.dark:not(#d7).d5-progres td.fi-ta-actions-cell .fi-ta-actions .pg-lapor { width: auto; min-width: 104px; min-height: 44px; padding: 0 20px; border-radius: 999px; gap: 8px; font-size: 14px; font-weight: 700; color: #2A1604; border: 0;
        background: linear-gradient(145deg, #F7B955, #E0902A); box-shadow: 0 8px 20px rgba(224, 144, 42, .3), inset 0 1px 0 rgba(255, 245, 225, .55); }
    html.dark:not(#d7).d5-progres td.fi-ta-actions-cell .pg-lapor, html.dark:not(#d7).d5-progres td.fi-ta-actions-cell .pg-lapor span, html.dark:not(#d7).d5-progres td.fi-ta-actions-cell .pg-lapor svg { color: #2A1604 !important; }
    html.dark:not(#d7).d5-progres .pg-lapor svg { width: 18px; height: 18px; }
    html.dark:not(#d7).d5-progres .pg-kartu { display: grid; width: 100%; gap: 6px; min-width: 0; white-space: normal; text-align: left; }
    html.dark:not(#d7).d5-progres .pg-kartu > span { display: block; min-width: 0; }
    html.dark:not(#d7).d5-progres .pg-judul { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--t7-krem); display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
    html.dark:not(#d7).d5-progres .pg-meta { font-size: 13px; line-height: 1.4; color: var(--t7-abu); display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    html.dark:not(#d7).d5-progres .pg-baris { display: flex !important; align-items: center; gap: 12px; margin-top: 4px; }
    html.dark:not(#d7).d5-progres .pg-batang { position: relative; flex: 1; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 232, 205, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
    html.dark:not(#d7).d5-progres .pg-batang i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transform-origin: left center; }
    html.dark:not(#d7).d5-progres .pg-isi { background: linear-gradient(90deg, #F7B955, #E0902A); animation: pg-tumbuh-w .9s cubic-bezier(.22, 1, .36, 1) both; }
    html.dark:not(#d7).d5-progres .pg-tunggu { background: repeating-linear-gradient(135deg, rgba(224, 144, 42, .5) 0 4px, rgba(224, 144, 42, .22) 4px 8px); animation: pg-tumbuh-w .9s cubic-bezier(.22, 1, .36, 1) .1s both; }
    @keyframes pg-tumbuh-w { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    html.dark:not(#d7).d5-progres .pg-persen { flex: none; min-width: 56px; text-align: right; font: 700 17px/1 'Sora', 'Inter', sans-serif; color: var(--t7-amber2); font-variant-numeric: tabular-nums; }
    html.dark:not(#d7).d5-progres .pg-kaki { display: flex !important; align-items: center; min-height: 28px; }
    html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:has(.pg-lapor) .pg-kaki { min-height: 44px; padding-right: 124px; }
    html.dark:not(#d7).d5-progres .pg-cp { font-style: normal; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; }
    html.dark:not(#d7).d5-progres .pg-cp-tunggu { color: var(--t7-amber2); background: rgba(242, 163, 58, .16); border-color: rgba(242, 163, 58, .4); }
    html.dark:not(#d7).d5-progres .pg-cp-selesai { color: #8FDDA9; background: rgba(60, 160, 100, .16); border-color: rgba(110, 210, 150, .35); }
    html.dark:not(#d7).d5-progres .pg-cp-tgl { padding: 0; color: var(--t7-abu); }
    html.dark:not(#d7).d5-progres .pg-selesai .pg-persen { color: #8FDDA9; }
    html.dark:not(#d7).d5-progres .pg-selesai .pg-isi { background: linear-gradient(90deg, #6CCB92, #3E9E6B); }
    html.dark:not(#d7).d5-progres .fi-ta-empty-state { padding: 40px 22px; border: 1px solid var(--t7-garis); border-radius: 26px; background-color: rgba(24, 17, 11, .62); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7).d5-progres .fi-ta-ctn > .fi-pagination, html.dark:not(#d7).d5-progres .fi-ta-ctn > nav { padding: 4px 0 8px; background: none; }
    html.dark:not(#d7).d5-progres .fi-pagination-overview { color: var(--t7-abu); }
}
@media screen and (min-width: 768px) and (max-width: 1099px) { html.dark:not(#d7).d5-gambar .fi-ta-table > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
    html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell), html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:has(.pg-kartu) { animation: none; transition: none; }
    html.dark:not(#d7).d5-gambar .gm-bp-miring, html.dark:not(#d7).d5-progres .pg-cincin, html.dark:not(#d7).d5-progres .pg-isi, html.dark:not(#d7).d5-progres .pg-tunggu { animation: none; }
    html.dark:not(#d7).d5-progres .pg-tabs::before { transition-duration: .01ms; }
    @media (hover: hover) { html.dark:not(#d7).d5-gambar .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):hover, html.dark:not(#d7).d5-progres .fi-ta-table > tbody > tr.fi-ta-row:has(.pg-kartu):hover { transform: none; } }
}

/* --- Langkah RAB 1-2: Susun RAB (jalur langkah, kartu RAB, tabel item) dan Rekap & SMKK (>= 768 px, mode gelap) --- */
@media screen and (min-width: 768px) {
    html.dark:not(#d7) .jl { border-radius: 26px; padding: 18px 24px; border: 1px solid var(--t7-garis); background-color: rgba(24, 17, 11, .62); background-image: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .12), rgba(242, 163, 58, 0) 50%), var(--t7-kaca);
        -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 14px 40px rgba(0, 0, 0, .3), var(--t7-sorot); }
    html.dark:not(#d7) .jl-bulat { flex-basis: 30px; width: 30px; height: 30px; font-size: 13px; font-weight: 700; }
    html.dark:not(#d7) .jl-aktif .jl-bulat { background: linear-gradient(145deg, #F7B955, #E0902A); color: #2A1604; box-shadow: 0 0 0 4px rgba(242, 163, 58, .2), 0 6px 14px rgba(224, 144, 42, .3); }
    html.dark:not(#d7) .jl-selesai .jl-bulat { background: rgba(242, 163, 58, .16); color: #F2B261; border: 1px solid rgba(242, 163, 58, .38); }
    html.dark:not(#d7) .jl-belum .jl-bulat { border: 1.5px solid rgba(255, 222, 185, .28); color: #A8967F; }
    html.dark:not(#d7) .jl-langkah:not(:last-child)::after { height: 2px; border-radius: 2px; background: rgba(255, 232, 205, .1); }
    html.dark:not(#d7) .jl-langkah.jl-selesai:not(:last-child)::after { background: linear-gradient(90deg, rgba(242, 163, 58, .75), rgba(242, 163, 58, .3)); }
    html.dark:not(#d7) .jl-btn { color: #C4B39B; font-size: 13.5px; }
    html.dark:not(#d7) .jl-aktif .jl-nama { color: var(--t7-krem); }
    html.dark:not(#d7) .jl-buka .jl-nama { text-decoration-color: var(--t7-amber2); }
    html.dark:not(#d7) .jl-lanjut { height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--t7-amber2); background: rgba(242, 163, 58, .14); border: 1px solid rgba(242, 163, 58, .35); transition: background-color .25s ease; }
    html.dark:not(#d7) .jl-aksi { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(242, 163, 58, .35); color: var(--t7-amber2); background: transparent; font-weight: 700; }
    html.dark:not(#d7) .jl-aksi-utama { background: rgba(242, 163, 58, .14); }
    @media (hover: hover) { html.dark:not(#d7) .jl-lanjut:hover, html.dark:not(#d7) .jl-aksi:hover { background: rgba(242, 163, 58, .24); } }
    html.dark:not(#d7) .jl-panel { border-top-color: var(--t7-halus); color: #D9CBB6; }
    html.dark:not(#d7) .jl-panel strong { color: var(--t7-krem); }

    html.dark:not(#d7) .d4-sek-lama .fi-section-content { padding: 22px 26px; }
    html.dark:not(#d7) .d4-judul-rab { font-family: 'Sora', 'Inter', sans-serif; font-size: 18px !important; font-weight: 600 !important; line-height: 1.35; color: var(--t7-krem); }
    html.dark:not(#d7) .d4-info-rab, html.dark:not(#d7) .d4-info-rab strong { opacity: 1 !important; color: #C4B39B; line-height: 1.5; }
    html.dark:not(#d7) .d4-info-rab strong { color: var(--t7-krem); }
    html.dark:not(#d7) .d4-rincian { gap: 14px !important; margin-top: 18px !important; }
    html.dark:not(#d7) .d4-rincian > div { padding: 14px 18px; border-radius: 20px; border: 1px solid var(--t7-halus); background: rgba(255, 232, 205, .04); min-width: 0; }
    html.dark:not(#d7) .d4-rincian > div > div:first-child { font-size: 11.5px !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: 1 !important; color: var(--t7-abu); }
    html.dark:not(#d7) .d4-rincian > div > div:last-child { margin-top: 4px; font-family: 'Sora', 'Inter', sans-serif; font-size: 18px !important; font-weight: 600 !important; color: var(--t7-krem); font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) .d4-rincian > .d4-dup { border-color: rgba(242, 163, 58, .35); background: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .18), rgba(242, 163, 58, 0) 60%), rgba(255, 232, 205, .04); }
    html.dark:not(#d7) .d4-rincian > .d4-dup > div:last-child { font-size: 22px !important; font-weight: 700 !important; color: var(--t7-amber2); }
    html.dark:not(#d7) .d4-rincian2 { margin-top: 14px !important; gap: 8px 18px !important; }
    html.dark:not(#d7) .d4-rincian2 span { opacity: 1 !important; color: #C4B39B; }
    html.dark:not(#d7) .d4-rincian2 strong { color: var(--t7-krem); font-variant-numeric: tabular-nums; }

    html.dark:not(#d7) #tabel-item .fi-ta-group-header { background: rgba(242, 163, 58, .07) !important; }
    html.dark:not(#d7) #tabel-item .fi-ta-group-header h4, html.dark:not(#d7) #tabel-item .fi-ta-group-header .fi-ta-group-header-heading { font-family: 'Sora', 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--t7-amber2); }
    html.dark:not(#d7) #tabel-item td.fi-table-cell-jumlah .fi-ta-text-item-label, html.dark:not(#d7) #tabel-item td.fi-table-cell-jumlah .fi-ta-text-item { font-family: 'Sora', 'Inter', sans-serif; font-weight: 700; color: var(--t7-amber2) !important; font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) #tabel-item td.fi-table-cell-harga-satuan .fi-ta-text-item-label, html.dark:not(#d7) #tabel-item td.fi-table-cell-volume .fi-ta-text-item-label { color: #D9CBB6; font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) #tabel-item td.fi-table-cell-uraian .fi-ta-col-wrp p { color: #C4B39B; }

    /* Rekap & SMKK */
    html.dark:not(#d7) table[aria-label="Rekap biaya"] tr { border-top-color: var(--t7-halus) !important; }
    html.dark:not(#d7) table[aria-label="Rekap biaya"] td { padding: 13px 8px !important; color: #E6DCCD; }
    html.dark:not(#d7) table[aria-label="Rekap biaya"] td > div { opacity: 1 !important; color: #C4B39B; }
    html.dark:not(#d7) table[aria-label="Rekap biaya"] td:last-child { font-family: 'Sora', 'Inter', sans-serif; font-weight: 600; color: var(--t7-krem); font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) table[aria-label="Rekap biaya"] tr:nth-last-child(3) td { color: var(--t7-krem); }
    html.dark:not(#d7) table[aria-label="Rekap biaya"] tr:nth-last-child(3) td:last-child { font-size: 17px; }
    html.dark:not(#d7) table[aria-label="Rekap biaya"] tr:last-child { background: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .2), rgba(242, 163, 58, 0) 60%), rgba(255, 232, 205, .04); }
    html.dark:not(#d7) table[aria-label="Rekap biaya"] tr:last-child td:first-child { border-radius: 18px 0 0 18px; padding-left: 18px !important; font-family: 'Sora', 'Inter', sans-serif; letter-spacing: .04em; }
    html.dark:not(#d7) table[aria-label="Rekap biaya"] tr:last-child td:last-child { border-radius: 0 18px 18px 0; padding-right: 18px !important; font-size: 24px; font-weight: 700; color: var(--t7-amber2); }
    html.dark:not(#d7) .fi-section:has(table[aria-label="Rekap biaya"]) .fi-section-content > div[style*="grid-template-columns"] { margin-top: 14px !important; gap: 8px 18px !important; }
    html.dark:not(#d7) .fi-section:has(table[aria-label="Rekap biaya"]) .fi-section-content > div[style*="grid-template-columns"] span { opacity: 1 !important; color: #C4B39B; }
    html.dark:not(#d7) .fi-section:has(table[aria-label="Rekap biaya"]) .fi-section-content > div[style*="grid-template-columns"] strong { color: var(--t7-krem); }
    html.dark:not(#d7) table[aria-label="SMKK per kategori"] tr { border-top-color: var(--t7-halus) !important; }
    html.dark:not(#d7) table[aria-label="SMKK per kategori"] td { padding: 12px 8px !important; color: #E6DCCD; }
    html.dark:not(#d7) table[aria-label="SMKK per kategori"] td.vk-jumlah, html.dark:not(#d7) table[aria-label="SMKK per kategori"] td.vk-jumlah .vk-nilai { font-family: 'Sora', 'Inter', sans-serif; font-weight: 600; color: var(--t7-amber2); font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) table[aria-label="SMKK per kategori"] td span[style*="opacity"] { opacity: 1 !important; color: #A8967F; }
}

/* ===== 7E-3. JADWAL & KURVA S, PEMBELIAN, RAB VS REALISASI (mode gelap; semua ukuran kecuali dinyatakan lain) =====
 * Jadwal: kartu Kurva S + Gantt per bab (desain HP Tahap 5 D) dipakai di layar lebar juga (bagian lama "jd-lama" disembunyikan di tahap5.css); >= 1100 px berdampingan.
 * Pembelian: ringkasan = dua kartu angka. RAB vs realisasi: ringkasan = kartu angka, "Per komponen" = kartu dengan batang kemajuan (hanya jumlah, tanpa harga). Murni tampilan. */
@media screen and (min-width: 768px) {
    html.dark.d5-jadwal:not(#d7) {
        --d5-judul: #F4E9DA; --d5-ket: #A8967F; --d5-amber: #F2A33A; --d5-amber2: #F2B261; --d5-isi: #E6DCCD;
        --d5-garis: rgba(255, 222, 185, .18); --d5-kaca: linear-gradient(160deg, rgba(255, 232, 205, .13), rgba(255, 232, 205, .04)); --d5-sorot: inset 0 1px 0 rgba(255, 240, 220, .1);
    }
    html.dark.d5-jadwal:not(#d7) .jd-kartu, html.dark.d5-jadwal:not(#d7) .jd-gantt { padding: 24px 26px 22px; }
    html.dark.d5-jadwal:not(#d7) .jd-judul { font-size: 22px; }
    html.dark.d5-jadwal:not(#d7) .jd-angka b { font-size: 24px; }
    html.dark.d5-jadwal:not(#d7) .jd-grafik { max-height: 340px; }
    html.dark.d5-jadwal:not(#d7) .jd-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
    html.dark.d5-jadwal:not(#d7) .jd-proyek > button { min-height: 40px; border-radius: 999px; padding: 0 18px; }
    html.dark.d5-jadwal:not(#d7) .jd-g-daftar { gap: 20px; }
    html.dark.d5-jadwal:not(#d7) .jd-g-nama { font-size: 15px; }
    html.dark.d5-jadwal:not(#d7) .jd-g-tgl { font-size: 12.5px; }
}
@media screen {
    html.dark.d5-jadwal:not(#d7) .jd-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
    html.dark:not(#d7) .jd-duo:not(:has(.jd-gantt)) { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (min-width: 1100px) {
    html.dark.d5-jadwal:not(#d7) .jd-duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    html.dark.d5-jadwal:not(#d7) .jd-duo:not(:has(.jd-gantt)) { grid-template-columns: minmax(0, 1fr); }
}

@media screen {
    /* ---------- PEMBELIAN: ringkasan ---------- */
    html.dark:not(#d7) .bl-ringkas .fi-section-content { padding: 18px 22px 20px; }
    html.dark:not(#d7) .bl-angka { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; align-items: stretch !important; }
    html.dark:not(#d7) .bl-tile { min-width: 0; padding: 14px 18px; border-radius: 20px; background: rgba(255, 232, 205, .05); border: 1px solid var(--t7-halus); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7) .bl-label { font-size: 12px !important; letter-spacing: .07em; text-transform: uppercase; opacity: 1 !important; color: var(--t7-abu); }
    html.dark:not(#d7) .bl-nilai { margin-top: 4px; font-family: 'Sora', 'Inter', sans-serif; font-size: clamp(22px, 5.6vw, 30px) !important; line-height: 1.15; font-weight: 700 !important; color: var(--t7-krem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    html.dark:not(#d7) .bl-tile:last-child .bl-nilai { color: var(--t7-amber2); }

    /* ---------- RAB VS REALISASI ---------- */
    html.dark:not(#d7) .rv-ringkas .fi-section-content, html.dark:not(#d7) .rv-komponen .fi-section-content { padding: 18px 22px 22px; }
    html.dark:not(#d7) .rv-tiles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px !important; }
    html.dark:not(#d7) .rv-tile { min-width: 0; padding: 16px 18px; border-radius: 22px; background: rgba(255, 232, 205, .05); border: 1px solid var(--t7-halus); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7) .rv-tile > div:nth-child(1) { font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; opacity: 1 !important; color: var(--t7-abu); }
    html.dark:not(#d7) .rv-tile > div:nth-child(2) { margin-top: 6px; font-family: 'Sora', 'Inter', sans-serif; font-size: 17px; line-height: 1.35; font-weight: 700 !important; color: var(--t7-krem); overflow-wrap: anywhere; }
    html.dark:not(#d7) .rv-tile > div:nth-child(3) { margin-top: 6px; font-size: 13px !important; opacity: 1 !important; color: #C4B39B; }
    html.dark:not(#d7) .rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
    html.dark:not(#d7) .rv-kartu {
        min-width: 0; display: grid; gap: 10px; align-content: start; padding: 16px 18px !important; border-radius: 22px; border: 1px solid var(--t7-garis) !important;
        background: var(--t7-kaca), rgba(22, 15, 10, .5); box-shadow: 0 10px 26px rgba(0, 0, 0, .26), var(--t7-sorot);
    }
    html.dark:not(#d7) .rv-kepala { align-items: flex-start; flex-wrap: nowrap !important; }
    html.dark:not(#d7) .rv-nama { min-width: 0; font-family: 'Sora', 'Inter', sans-serif; font-size: 16px; line-height: 1.35; font-weight: 600 !important; color: var(--t7-krem); overflow-wrap: anywhere; }
    html.dark:not(#d7) .rv-tipe { font-family: 'Inter', sans-serif; font-size: 13px; opacity: 1 !important; color: var(--t7-abu); }
    html.dark:not(#d7) .rv-kepala .fi-badge { flex: none; }
    html.dark:not(#d7) .rv-bar { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 232, 205, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); }
    html.dark:not(#d7) .rv-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F7B955, #E0902A); box-shadow: 0 0 8px rgba(242, 163, 58, .4); transition: width .6s cubic-bezier(.22, 1, .36, 1); }
    html.dark:not(#d7) .rv-lebih .rv-bar > i { background: linear-gradient(90deg, #FFA796, #E5604A); box-shadow: 0 0 8px rgba(229, 96, 74, .4); }
    html.dark:not(#d7) .rv-baris { font-size: 13.5px !important; line-height: 1.55; color: #D6C8B4; overflow-wrap: anywhere; }
    html.dark:not(#d7) .rv-lain .fi-section-content > div { color: #D6C8B4; }
}
@media screen and (max-width: 767px) {
    html.dark:not(#d7).d5-jadwal .fi-header-heading, html.dark:not(#d7) .fi-header-heading { text-wrap: balance; }   /* judul HP tidak menyisakan satu huruf di baris kedua ("Kurva S") */
    html.dark:not(#d7) .rv-tiles { grid-template-columns: minmax(0, 1fr); }
    html.dark:not(#d7) .bl-angka { gap: 10px !important; }
    html.dark:not(#d7) .bl-tile { padding: 12px 14px; }
}
@media screen and (prefers-reduced-motion: reduce) {
    html.dark:not(#d7) .rv-bar > i { transition: none; }
}

/* ===== Tahap 7 E-4: Absensi, Gaji mingguan, Gaji bulanan, Pekerja & penempatan =====
 * Markup: kelas ab-* (absensi-harian.blade.php) dan gj-* (gaji-*.blade.php, kelola-pekerja.blade.php); hanya tampilan. Tabel Filament dipertahankan; di HP baris menjadi kartu (vertex-kartu.css). */
@media screen and (min-width: 640px) {
    /* tombol di kepala halaman turun ke baris sendiri bila tidak muat (844 px: tiga tombol gaji sempat keluar layar) */
    html.dark:not(#d7) .fi-header { flex-wrap: wrap; row-gap: 12px; }
    html.dark:not(#d7) .fi-header > div:first-child { flex: 1 1 340px; min-width: 0; }
    html.dark:not(#d7) .fi-header .fi-ac { flex-wrap: wrap; }
}
@media screen {
    html.dark:not(#d7) .gj-ket { color: #C4B39B; opacity: 1 !important; line-height: 1.55; }
    html.dark:not(#d7) .gj-ket strong { color: var(--t7-krem); font-weight: 600; }
    html.dark:not(#d7) .gj-ringkas .fi-section-content { padding: 20px 24px; }
    html.dark:not(#d7) .gj-ringkas .gj-total { font-family: 'Sora', 'Inter', sans-serif; font-size: 28px !important; line-height: 1.15; color: var(--t7-amber2); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    html.dark:not(#d7) .gj-ringkas .fi-section-content > div { align-items: center !important; gap: 10px 28px !important; }
    html.dark:not(#d7) .gj-ringkas .fi-section-content > div > div > div:first-child { font-size: 12.5px !important; opacity: 1 !important; color: var(--t7-abu); }
    html.dark:not(#d7) .gj-ringkas .fi-section-content > div > div:last-child { font-size: 13.5px !important; opacity: 1 !important; color: #D6C8B4; }
    html.dark:not(#d7) .gj-tabel .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:last-of-type .fi-ta-text-item { font-variant-numeric: tabular-nums; }

    /* Absensi: kartu per orang, dua kolom di layar >= 768 px */
    html.dark:not(#d7) .ab-saring .fi-section-content { padding: 18px 22px 20px; }
    html.dark:not(#d7) .ab-saring label, html.dark:not(#d7) .ab-kartu label { color: var(--t7-abu); font-size: 12.5px !important; }
    html.dark:not(#d7) .ab-daftar { grid-template-columns: minmax(0, 1fr); gap: 14px !important; }
    html.dark:not(#d7) .ab-kartu {
        min-width: 0; gap: 10px !important; padding: 16px 18px !important; border-radius: 22px !important; border: 1px solid var(--t7-garis) !important;
        background: var(--t7-kaca), rgba(22, 15, 10, .5) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .26), var(--t7-sorot);
    }
    html.dark:not(#d7) .ab-nama { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: 'Sora', 'Inter', sans-serif; font-size: 16px; line-height: 1.35; font-weight: 600 !important; color: var(--t7-krem); overflow-wrap: anywhere; }
    html.dark:not(#d7) .ab-peran { font-family: 'Inter', sans-serif; font-size: 13px !important; opacity: 1 !important; color: var(--t7-abu); }
    html.dark:not(#d7) .ab-baris { grid-template-columns: minmax(0, 1fr) 8.5rem !important; gap: 10px !important; }
    html.dark:not(#d7) .ab-kartu :is(select, input[type="text"]), html.dark:not(#d7) .ab-saring :is(select, input) {
        min-height: 46px; padding: 0 14px !important; border-radius: 14px !important; border: 1px solid var(--t7-garis) !important; background-color: rgba(255, 232, 205, .06) !important;
        color: var(--t7-krem); font-size: 15px !important; color-scheme: dark; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
    }
    html.dark:not(#d7) .ab-kartu :is(select, input[type="text"]):focus, html.dark:not(#d7) .ab-saring :is(select, input):focus { outline: none; border-color: var(--t7-amber2) !important; box-shadow: 0 0 0 4px rgba(242, 163, 58, .16); }
    html.dark:not(#d7) .ab-kartu :is(select, input)::placeholder { color: #8F7F6A; }
    html.dark:not(#d7) .ab-kartu :is(select, input):disabled { opacity: .7; }
    html.dark:not(#d7) .ab-kartu select option, html.dark:not(#d7) .ab-saring select option { background: #1C150F; color: var(--t7-krem); }
}
@media screen and (min-width: 768px) {
    html.dark:not(#d7) .ab-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
    /* kartu gaji/pekerja: total di baris sendiri, label kiri nilai kanan */
    html.dark:not(#d7) .gj-tabel td.fi-ta-cell:is([data-label="Total"], [data-label="Dibayar"]):not(.hidden) {
        grid-column: 1 / -1 !important; display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 10px !important; border-top: 1px solid var(--t7-halus) !important;
    }
    html.dark:not(#d7) .gj-tabel td.fi-ta-cell:is([data-label="Total"], [data-label="Dibayar"])::before { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--t7-abu); }
    html.dark:not(#d7) .gj-tabel td.fi-ta-cell:is([data-label="Total"], [data-label="Dibayar"]) .fi-ta-text-item { font-family: 'Sora', 'Inter', sans-serif; font-size: 20px; color: var(--t7-amber2) !important; }
    html.dark:not(#d7) .gj-ringkas .gj-total { font-size: 24px !important; }
    /* Jadwal: kotak pilih-baris (aksi massal "Atur jadwal yang dipilih") lebih besar, amber, berlabel */
    html.dark.d5-jadwal:not(#d7) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell { display: flex; align-items: center; gap: 10px; padding: 0 !important; border: 0 !important; }
    html.dark.d5-jadwal:not(#d7) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell::after { content: "Pilih untuk atur jadwal banyak butir"; font-size: 12.5px; color: var(--t7-abu); }
    html.dark.d5-jadwal:not(#d7) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--t7-amber); }
}

/* ===== Tahap 7 E-5: Laporan mingguan, Laporan Direksi, Faktor besi =====
 * Markup: kelas lm-* (laporan-mingguan.blade.php), ld-* (laporan-direksi.blade.php), fb-* (faktor-besi.blade.php); hanya tampilan. */
@media screen {
    html.dark:not(#d7) .lm-susun .fi-section-description, html.dark:not(#d7) .ld-ket { color: #C4B39B; opacity: 1 !important; }
    html.dark:not(#d7) .lm-rekap .fi-section-content { padding: 14px 18px 18px; }
    html.dark:not(#d7) .lm-baris {
        display: block; margin: 0 0 10px; padding: 12px 14px !important; border: 1px solid var(--t7-halus) !important; border-radius: 16px; background: rgba(255, 232, 205, .04);
        font-size: 14px !important; line-height: 1.55; color: #D6C8B4; overflow-wrap: anywhere;
    }
    html.dark:not(#d7) .lm-baris:last-child { margin-bottom: 0; }
    html.dark:not(#d7) .lm-baris strong { color: var(--t7-krem); font-weight: 600; }
    html.dark:not(#d7) .lm-baris > div:not(.fi-badge) { margin-top: 4px; color: #BDAD96; opacity: 1 !important; }
    html.dark:not(#d7) .lm-baris .fi-badge { display: inline-flex; width: auto; margin: 0 0 0 6px; vertical-align: middle; }

    html.dark:not(#d7) .ld-pilih .fi-section-content { padding: 16px 20px 20px; }
    html.dark:not(#d7) .ld-pilih label { color: var(--t7-abu); opacity: 1 !important; font-size: 12.5px !important; }
    html.dark:not(#d7) .ld-pilih select {
        min-height: 46px; margin-top: 6px; padding: 0 14px !important; border-radius: 14px !important; border: 1px solid var(--t7-garis) !important; background-color: rgba(255, 232, 205, .06) !important;
        color: var(--t7-krem) !important; font-size: 15px; color-scheme: dark; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
    }
    html.dark:not(#d7) .ld-pilih select option { background: #1C150F; color: var(--t7-krem); }
    html.dark:not(#d7) .ld-ringkas .fi-section-content { padding: 18px 22px 22px; }
    html.dark:not(#d7) .ld-tiles { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px !important; }
    html.dark:not(#d7) .ld-tile { min-width: 0; padding: 16px 18px; border-radius: 22px; background: rgba(255, 232, 205, .05); border: 1px solid var(--t7-halus); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7) .ld-tile > div:nth-child(1) { font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; opacity: 1 !important; color: var(--t7-abu); }
    html.dark:not(#d7) .ld-tile > div:nth-child(2) { margin-top: 6px; font-family: 'Sora', 'Inter', sans-serif; font-size: 20px !important; line-height: 1.25; color: var(--t7-krem); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) .ld-tile:first-child > div:nth-child(2) { color: var(--t7-amber2); }
    html.dark:not(#d7) .ld-ket { line-height: 1.6; font-size: 13.5px !important; }
    html.dark:not(#d7) .ld-area .fi-section-content { padding: 6px 22px 20px; }
    html.dark:not(#d7) .ld-baris { padding: 12px 0 !important; border-color: var(--t7-halus) !important; line-height: 1.5; color: var(--t7-krem); }
    html.dark:not(#d7) .ld-baris > span > span, html.dark:not(#d7) .ld-sub > span > span { color: #BDAD96; opacity: 1 !important; font-size: 13px; }
    html.dark:not(#d7) .ld-baris > strong { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t7-amber2); }
    html.dark:not(#d7) .ld-elemen { margin: 8px 0; padding: 14px 16px !important; border: 1px solid var(--t7-garis) !important; border-radius: 18px; background: var(--t7-kaca), rgba(22, 15, 10, .45); box-shadow: var(--t7-sorot); }
    html.dark:not(#d7) .ld-elemen-nama { font-family: 'Sora', 'Inter', sans-serif; font-size: 15.5px; color: var(--t7-krem); }
    html.dark:not(#d7) .ld-elemen-nama span { font-family: 'Inter', sans-serif; color: var(--t7-abu); opacity: 1 !important; }
    html.dark:not(#d7) .ld-sub { padding: 8px 0 8px 12px !important; margin-top: 6px; border-left: 2px solid rgba(242, 163, 58, .35); color: #D6C8B4; }
    html.dark:not(#d7) .ld-sub > span:last-child { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t7-krem); }
    html.dark:not(#d7) .ld-jml { margin-top: 8px; color: #C4B39B; opacity: 1 !important; }
    html.dark:not(#d7) .ld-total { margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid var(--t7-garis) !important; color: var(--t7-krem); font-family: 'Sora', 'Inter', sans-serif; font-size: 14.5px; font-variant-numeric: tabular-nums; }
    html.dark:not(#d7) .ld-total span:first-child { color: var(--t7-amber2); }
    html.dark:not(#d7) .fb-ket .fi-section-content { padding: 16px 22px; }
}
@media screen and (max-width: 767px) {
    html.dark:not(#d7) .ld-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px !important; }
    html.dark:not(#d7) .ld-tile { padding: 12px 14px; }
    html.dark:not(#d7) .ld-ringkas .fi-section-content, html.dark:not(#d7) .ld-area .fi-section-content { padding-left: 16px; padding-right: 16px; }
    html.dark:not(#d7) .ld-total { flex-direction: column; gap: 4px !important; font-size: 14px; }
    /* Faktor besi (kartu HP): nilai di kiri sejajar label, angka amber Sora */
    html.dark:not(#d7) .fb-tabel td.fi-ta-cell { text-align: left !important; }
    html.dark:not(#d7) .fb-tabel td.fi-ta-cell .fi-ta-text, html.dark:not(#d7) .fb-tabel td.fi-ta-cell .fi-ta-col-wrp > div { justify-content: flex-start !important; text-align: left !important; }
    html.dark:not(#d7) .fb-tabel td.fi-ta-cell[data-label="Dipakai"] * { justify-content: flex-start !important; padding-left: 0 !important; margin-left: 0 !important; }
    html.dark:not(#d7) .fb-tabel td.fi-ta-cell[data-label="kg per m3"] .fi-ta-text-item, html.dark:not(#d7) .fb-tabel td.fi-ta-cell.vk-rp .fi-ta-text-item { font-family: 'Sora', 'Inter', sans-serif; font-size: 18px; color: var(--t7-amber2) !important; }
}

/* ===== Tahap 7 E-6: Pengaturan RAB, Pengaturan sistem, Pengguna, Profil =====
 * Markup: kelas ps-* (pengaturan-sistem.blade.php, profil-saya.blade.php); Pengguna memakai tabel Filament (kartu di HP lewat vertex-kartu.css). Hanya tampilan. */
@media screen {
    html.dark:not(#d7) .ps-seksi .fi-section-content { padding: 18px 22px 22px; }
    html.dark:not(#d7) .ps-seksi label { color: #D6C8B4; line-height: 1.5; }
    html.dark:not(#d7) .ps-isian {
        min-height: 46px; margin-top: 6px; padding: 0 14px !important; border-radius: 14px !important; border: 1px solid var(--t7-garis) !important; background-color: rgba(255, 232, 205, .06) !important;
        color: var(--t7-krem); font-size: 15px; color-scheme: dark; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); max-width: 100%;
    }
    html.dark:not(#d7) .ps-isian:focus { outline: none; border-color: var(--t7-amber2) !important; box-shadow: 0 0 0 4px rgba(242, 163, 58, .16); }
    html.dark:not(#d7) .ps-isian::placeholder { color: #8F7F6A; }
    html.dark:not(#d7) .ps-log {
        margin: 0 0 10px; padding: 12px 14px !important; border: 1px solid var(--t7-halus) !important; border-radius: 16px; background: rgba(255, 232, 205, .04);
        font-size: 13.5px !important; line-height: 1.55; color: #D6C8B4; overflow-wrap: anywhere;
    }
    html.dark:not(#d7) .ps-log strong { color: var(--t7-krem); font-weight: 600; }
    html.dark:not(#d7) .ps-log > div { opacity: 1 !important; }
    html.dark:not(#d7) .ps-log > div:nth-child(n+2) { color: #BDAD96; }
}
@media screen and (max-width: 767px) {
    html.dark:not(#d7) .ps-seksi .fi-section-content { padding-left: 16px; padding-right: 16px; }
    html.dark:not(#d7) .ps-isian { width: 100% !important; }
    html.dark:not(#d7) .pr-form :is(input.fi-input, select.fi-input) { min-height: 46px; }   /* isian Pengaturan RAB tidak lebih rendah dari 44 px di HP */
    /* Pengguna (kartu HP): email dan jabatan satu baris penuh, email boleh turun baris */
    html.dark:not(#d7) .fi-resource-users td.fi-ta-cell:is([data-label="Email"], [data-label="Jabatan per proyek"]):not(.hidden) { grid-column: 1 / -1; }
    html.dark:not(#d7) .fi-resource-users td.fi-ta-cell .fi-ta-text-item-label { overflow-wrap: anywhere; }
}

/* ---------- Tahap 6: beranda Tamu (belum ada proyek) dan layar "Cek email Anda" ---------- */
html.dark:not(#d7) .tm-kosong { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; padding: 2.5rem 1.25rem; border-radius: 22px;
    background: var(--t7-kaca, rgba(42, 29, 18, .55)); border: 1px solid var(--t7-garis, rgba(242, 163, 58, .18)); box-shadow: inset 0 1px 0 var(--t7-sorot, rgba(255, 240, 220, .08)); }
html.dark:not(#d7) .tm-ikon { color: var(--t7-amber, #F2A33A); }
html.dark:not(#d7) .tm-judul { margin: 0; font: 700 1.5rem/1.2 'Sora', ui-sans-serif, system-ui, sans-serif; color: var(--t7-krem, #F4E9DA); }
html.dark:not(#d7) .tm-isi { margin: 0; max-width: 34rem; font-size: 1rem; line-height: 1.5; color: var(--t7-krem, #F4E9DA); }
html.dark:not(#d7) .tm-kecil { margin: .25rem 0 0; max-width: 34rem; font-size: .875rem; line-height: 1.45; color: var(--t7-abu, #BFAE98); }
html.dark:not(#d7) .tm-tombol { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.75rem; border-radius: 999px; text-decoration: none; font-weight: 600;
    background: linear-gradient(135deg, var(--t7-amber, #F2A33A), var(--t7-amber2, #D98C3C)); color: #1C140E; box-shadow: 0 8px 20px rgba(217, 140, 60, .28); }
html.dark:not(#d7) .tm-tombol:focus-visible { outline: 3px solid rgba(242, 163, 58, .6); outline-offset: 3px; }
.vy-cek-email { display: flex; flex-direction: column; align-items: center; gap: .85rem; text-align: center; }
.vy-cek-ikon { color: #F2A33A; }
.vy-cek-isi { margin: 0; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.vy-cek-kecil { margin: 0; font-size: .8125rem; opacity: .75; }
.vy-cek-aksi { margin-top: .25rem; }
.vy-cek-keluar button { background: none; border: 0; padding: .5rem; font-size: .875rem; text-decoration: underline; opacity: .8; cursor: pointer; color: inherit; }
.vy-cek-status { margin: 0; font-size: .8125rem; opacity: .85; min-height: 1.2em; }
.vy-cek-sudah { appearance: none; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: .6rem; min-height: 44px; padding: 0 1rem; font: inherit; font-size: .875rem; cursor: pointer; opacity: .9; }
.vy-cek-sudah:disabled { opacity: .5; cursor: progress; }
.ps-bahaya { border: 1px solid rgba(155, 44, 31, .5) !important; }
.ps-bahaya .fi-section-header-heading { color: #C0463A; }