/* VERTEX YY — Desain 4: halaman RAB (daftar + isi) dan Harga di HP. HANYA layar <= 767 px, mode gelap (html.dark). Tablet/laptop dan mode terang tidak berubah.
 * Murni tampilan: CSS di berkas ini + markup Blade/Alpine pada halaman; tidak mengubah data, perhitungan, izin, atau skema.
 * Dimuat SETELAH vertex-dock.css. Selektor memakai ":not(#d4)" (menambah bobot ID) karena aturan vertex-kartu.css memakai :not(#tabel-item .fi-ta) yang berbobot ID.
 * Bagian: 0 = gaya umum, A = daftar RAB, B = isi RAB (langkah), C = Harga. Membalik: lihat CATATAN-PASANG.md (Desain 4). */

/* elemen khusus HP (Desain 4): tersembunyi di tablet/desktop dan mode terang; ditampilkan hanya di bawah (html.dark + <= 767 px) */
.d4-atas, .d4-lanjut, .d4-ringkas, .d4-kemajuan, .d4-tab, .d4-muat, .d4-latar, .d4-lembar-kepala, .d4-status.d4-isi { display: none; }
#d4-harga { display: grid; row-gap: var(--vy-gap, 2rem); }

@media screen and (max-width: 767px) {

    /* ===== 0. GAYA UMUM ===== */
    html.dark:not(#d4) {
        --d4-latar: #14100C; --d4-judul: #F4E9DA; --d4-ket: #A8967F; --d4-amber: #F2A33A; --d4-amber2: #F2B261; --d4-isi: #E6DCCD;
        --d4-kartu: linear-gradient(160deg, rgba(46, 32, 22, .9), rgba(21, 16, 11, .9));
        --d4-garis: rgba(255, 222, 185, .12);
        --d4-kaca: linear-gradient(160deg, rgba(255, 232, 205, .13), rgba(255, 232, 205, .04));
        --d4-sorot: inset 0 1px 0 rgba(255, 240, 220, .1);
        --d4-utama: radial-gradient(circle at 30% 18%, #F2B261, #B97B45);
    }

    /* dua pendar tembaga lembut di belakang halaman (napas pelan; hanya transform/opacity, tanpa filter) */
    html.dark:is(.d4-daftar, .d4-isi, .d4-harga) body::before,
    html.dark:is(.d4-daftar, .d4-isi, .d4-harga) body::after {
        content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; will-change: transform, opacity;
    }
    html.dark:is(.d4-daftar, .d4-isi, .d4-harga) body::before {
        width: 520px; height: 520px; left: -240px; top: -120px; background: radial-gradient(circle, rgba(185, 123, 69, .28), rgba(185, 123, 69, 0) 66%); animation: d4-napas 9s ease-in-out infinite alternate;
    }
    html.dark:is(.d4-daftar, .d4-isi, .d4-harga) body::after {
        width: 460px; height: 460px; right: -220px; bottom: 80px; background: radial-gradient(circle, rgba(215, 155, 94, .2), rgba(215, 155, 94, 0) 66%); animation: d4-napas 11s ease-in-out -4s infinite alternate;
    }
    @keyframes d4-napas { from { transform: scale(.92); opacity: .65; } to { transform: scale(1.1); opacity: 1; } }

    /* ruang bawah: 130 px bila tidak ada bar aksi (dock 88 px + napas) */
    html.dark.d4-daftar:not(#d4) .fi-main-ctn, html.dark.d4-harga:not(#d4) .fi-main-ctn { padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }

    /* ===== A. DAFTAR RAB ===== */
    /* kepala: breadcrumb "Proyek > RAB" segaris dengan tombol notifikasi, judul "RAB Anda" Sora 32 px */
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page { padding-top: 0 !important; }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page > section { padding-top: 0; padding-bottom: 0; row-gap: 16px; }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header { gap: 14px; }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header > div:first-child { padding-right: 0; min-height: 0; justify-content: flex-start; }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header .fi-breadcrumbs { display: none !important; }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header > div:first-child::before {
        content: "Proyek \203A  RAB"; display: block; margin: calc(env(safe-area-inset-top, 0px) + 14px + 14px) 108px 0 0; font-size: 12px; line-height: 16px; letter-spacing: .02em; color: var(--d4-ket);
    }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header-heading { margin-top: 14px; font-size: 32px; line-height: 1.12; font-weight: 700; color: var(--d4-judul); }

    /* baris aksi: Buat RAB (pil amber, ikon +, lebar fleksibel) + Impor Excel (pil kaca) */
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header > div:last-child { margin: 0; width: 100%; }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header .fi-ac { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header .fi-ac > a.fi-btn {
        height: 52px; min-height: 52px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; font-size: 15px; font-weight: 700; white-space: nowrap; -webkit-tap-highlight-color: transparent;
    }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header .fi-ac > a.fi-btn:first-child {
        flex: 1 1 auto; background: var(--d4-utama) !important; color: #26170A; border: 0; box-shadow: 0 10px 26px rgba(242, 163, 58, .32), inset 0 1px 0 rgba(255, 245, 225, .5); ring: none; --tw-ring-shadow: 0 0 #0000;
    }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header .fi-ac > a.fi-btn:first-child .fi-btn-label { color: #26170A; }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header .fi-ac > a.fi-btn:not(:first-child) {
        flex: 0 0 auto; background: var(--d4-kaca) !important; color: var(--d4-judul); border: 1px solid rgba(255, 222, 185, .2); box-shadow: var(--d4-sorot); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); --tw-ring-shadow: 0 0 #0000;
    }
    html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header .fi-ac > a.fi-btn:not(:first-child) .fi-btn-label, html.dark:not(#d4) .fi-resource-rabs.fi-resource-list-records-page .fi-header .fi-ac > a.fi-btn:not(:first-child) svg { color: var(--d4-judul); }

    /* Tahap 7C: pencarian, kartu RAB, tombol Buka, paginasi, dan keadaan kosong daftar RAB kini satu desain untuk semua ukuran layar: lihat bagian "7C" di vertex-tahap7.css. */
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    html.dark body::before, html.dark body::after { animation: none !important; }
}

@media screen and (max-width: 767px) {

    /* ===== B. ISI RAB (halaman Susun RAB, semua langkah) ===== */
    /* baris atas: tombol kembali bulat kaca 44 px (kiri), nama proyek kecil di tengah; tombol notifikasi (bawaan panel) di kanan */
    html.dark .d4-atas {
        display: flex; align-items: center; gap: 12px; position: absolute; z-index: 21; top: calc(env(safe-area-inset-top, 0px) + 14px); left: var(--vy-d-kiri); right: calc(var(--vy-d-kanan) + 108px); height: 44px; pointer-events: none;
    }
    html.dark .d4-kembali {
        flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: #E8DCC8; cursor: pointer; pointer-events: auto; text-decoration: none; -webkit-tap-highlight-color: transparent;
        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 .d4-kembali svg { width: 22px; height: 22px; }
    html.dark .d4-proyek { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--d4-ket); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* kepala halaman: judul RAB kecil + lencana status di kiri, tombol "Lainnya" bulat kaca di kanan, sejajar */
    html.dark.d4-isi:not(#d4) .fi-page { padding-top: 0 !important; }
    html.dark.d4-isi:not(#d4) .fi-page > section { padding-top: 0; padding-bottom: 0; row-gap: 14px; }
    html.dark.d4-isi:not(#d4) .fi-header { flex-direction: row; align-items: center; gap: 12px; margin-top: calc(env(safe-area-inset-top, 0px) + 14px + 44px + 8px); }
    html.dark.d4-isi:not(#d4) .fi-header > div:first-child { flex: 1 1 auto; min-width: 0; min-height: 0; padding-right: 0; }
    html.dark.d4-isi:not(#d4) .fi-header .fi-breadcrumbs { display: none !important; }
    html.dark.d4-isi:not(#d4) .fi-header-heading { font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--d4-judul); gap: 4px 10px; }
    html.dark.d4-isi:not(#d4) .fi-header > div:last-child { flex: 0 0 auto; width: auto; margin: 0; }
    html.dark.d4-isi:not(#d4) .fi-header > div:last-child .fi-ac { flex-wrap: nowrap; }
    html.dark.d4-isi:not(#d4) .fi-header .fi-dropdown-trigger > button, html.dark.d4-isi:not(#d4) .fi-header .fi-dropdown-trigger .fi-btn {
        width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0; gap: 0; color: #E8DCC8;
        background: var(--d4-kaca) !important; border: 1px solid rgba(255, 222, 185, .22); box-shadow: var(--d4-sorot); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); --tw-ring-shadow: 0 0 #0000;
    }
    html.dark.d4-isi:not(#d4) .fi-header .fi-dropdown-trigger .fi-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    html.dark.d4-isi:not(#d4) .fi-header .fi-dropdown-trigger svg { width: 22px; height: 22px; color: #E8DCC8; }

    /* kartu langkah: "Langkah N dari 6" + nama langkah amber di kanan, enam garis progres 6 px (aktif bercahaya) */
    html.dark:not(#d4) .jl { padding: 18px 20px 16px; border: 1px solid var(--d4-garis); border-radius: 26px; background: var(--d4-kartu); box-shadow: 0 16px 34px rgba(0, 0, 0, .3), var(--d4-sorot); }
    html.dark:not(#d4) .jl-ringkas-atas { align-items: baseline; font-size: 13px; color: var(--d4-ket); }
    html.dark:not(#d4) .jl-ringkas-nama { font-family: 'Sora', 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--d4-amber2); }
    html.dark:not(#d4) .jl-segmen { gap: 6px; margin-top: 8px; }
    html.dark:not(#d4) .jl-seg { padding: 8px 0; min-height: 22px; }
    html.dark:not(#d4) .jl-seg > span { height: 6px; border-radius: 3px; background: #3A2C20; transition: background-color .4s ease, box-shadow .4s ease; }
    html.dark:not(#d4) .jl-seg-selesai > span { background: var(--d4-amber); }
    html.dark:not(#d4) .jl-seg-aktif > span { background: var(--d4-amber2); box-shadow: 0 0 12px rgba(242, 163, 58, .75), 0 0 3px rgba(242, 178, 97, .9); }
    html.dark:not(#d4) .jl-lanjut { display: none; }
    html.dark:not(#d4) .jl-panel { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--d4-garis); font-size: 13px; color: var(--d4-ket); }
    html.dark:not(#d4) .jl-panel strong { color: var(--d4-judul); font-weight: 600; }
    html.dark:not(#d4) .jl-aksi { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px; border-color: rgba(242, 163, 58, .35); color: var(--d4-amber2); }
    html.dark:not(#d4) .jl-aksi-utama { background: rgba(242, 163, 58, .14); border-color: rgba(242, 163, 58, .35); }

    /* baris ringkasan: kartu Total RAB + pemilih lingkup (dua tombol bertumpuk dalam wadah gelap) */
    html.dark .d4-ringkas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
    html.dark .d4-ringkas.tanpa-total { grid-template-columns: minmax(0, 1fr); }
    html.dark .d4-total {
        display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 16px 18px; border-radius: 24px; border: 1px solid rgba(242, 163, 58, .3);
        background: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .2), rgba(242, 163, 58, 0) 55%), var(--d4-kartu); box-shadow: 0 14px 30px rgba(0, 0, 0, .3), var(--d4-sorot);
    }
    html.dark .d4-total .d4-ket { font-size: 12px; line-height: 1.3; color: var(--d4-ket); }
    html.dark .d4-total .d4-angka { font-family: 'Sora', 'Inter', sans-serif; font-size: clamp(19px, 6.1vw, 22px); line-height: 1.2; font-weight: 700; color: var(--d4-amber2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.dark .d4-lingkup { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 22px; background: #120D09; border: 1px solid var(--d4-garis); }
    html.dark .d4-ringkas.tanpa-total .d4-lingkup { flex-direction: row; }
    html.dark .d4-lk {
        min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 18px; background: none; color: var(--d4-ket); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
        transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    }
    html.dark .d4-lk:disabled { cursor: default; }
    html.dark .d4-ringkas.tanpa-total .d4-lk { flex: 1 1 0; }
    html.dark .d4-lk.is-aktif { color: #FFF3E0; background-image: linear-gradient(160deg, rgba(242, 163, 58, .38), rgba(242, 163, 58, .14)); border-color: rgba(255, 238, 215, .45); box-shadow: 0 6px 16px rgba(215, 155, 94, .25), inset 0 1px 0 rgba(255, 245, 225, .4); }

    /* keterangan RAB lama (judul, versi, lingkup, catatan status, rincian) menjadi kartu keterangan kecil */
    html.dark.d4-isi:not(#d4) .fi-page .d4-sek-lama { border: 1px solid var(--d4-garis); border-radius: 24px; background: var(--d4-kartu); box-shadow: var(--d4-sorot); --tw-ring-shadow: 0 0 #0000; }
    html.dark.d4-isi:not(#d4) .d4-sek-lama .fi-section-content { padding: 16px 18px; }
    html.dark:not(#d4) .d4-sek-lama .d4-judul-rab { font-family: 'Sora', 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--d4-judul); }
    html.dark:not(#d4) .d4-sek-lama .d4-info-rab, html.dark:not(#d4) .d4-sek-lama .d4-info-rab strong { font-size: 12px !important; line-height: 1.5; opacity: 1 !important; color: var(--d4-ket); }
    html.dark:not(#d4) .d4-sek-lama .d4-info-rab strong { color: var(--d4-isi); }
    html.dark:not(#d4) .d4-sek-lama .d4-daftar-rab, html.dark:not(#d4) .d4-sek-lama .d4-dup, html.dark:not(#d4) .d4-sek-lama .d4-dup2 { display: none !important; }
    html.dark:not(#d4) .d4-sek-lama .d4-rincian, html.dark:not(#d4) .d4-sek-lama .d4-rincian2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--d4-garis); font-size: 12px !important; }
    html.dark:not(#d4) .d4-sek-lama .d4-rincian2 { margin-top: 10px; padding-top: 0; border-top: 0; }
    html.dark:not(#d4) .d4-sek-lama .d4-rincian > div, html.dark:not(#d4) .d4-sek-lama .d4-rincian2 > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    html.dark:not(#d4) .d4-sek-lama .d4-rincian > div > div:first-child, html.dark:not(#d4) .d4-sek-lama .d4-rincian2 span { font-size: 12px !important; opacity: 1 !important; color: var(--d4-ket); }
    html.dark:not(#d4) .d4-sek-lama .d4-rincian > div > div:last-child, html.dark:not(#d4) .d4-sek-lama .d4-rincian2 strong { font-family: 'Sora', 'Inter', sans-serif; font-size: 15px !important; font-weight: 600; color: var(--d4-amber2); font-variant-numeric: tabular-nums; }

    /* judul bab + jumlah item */
    html.dark:not(#d4) #tabel-item .fi-ta-ctn { background: none !important; border: 0; box-shadow: none; --tw-ring-shadow: 0 0 #0000; overflow: visible; }
    html.dark:not(#d4) #tabel-item .fi-ta-ctn > *, html.dark:not(#d4) #tabel-item .fi-ta-header-ctn { border: 0 !important; }
    html.dark:not(#d4) #tabel-item .fi-ta-content { border: 0 !important; overflow: visible !important; }
    html.dark:not(#d4) #tabel-item .fi-ta-table > tbody { padding: 0; border-top-width: 0 !important; }
    html.dark:not(#d4) #tabel-item .fi-ta-header-toolbar { padding: 0 !important; margin: 0 0 10px; gap: 10px !important; justify-content: flex-end; }
    html.dark:not(#d4) #tabel-item .fi-ta-group-header { background: none !important; padding: 18px 2px 8px; gap: 10px; }
    html.dark:not(#d4) #tabel-item .fi-ta-group-header .grid { flex: 1 1 auto; min-width: 0; }
    html.dark:not(#d4) #tabel-item .fi-ta-group-header h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-family: 'Sora', 'Inter', sans-serif; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--d4-judul); }
    html.dark:not(#d4) #tabel-item .fi-ta-group-header h4[data-n]::after { content: attr(data-n) " item"; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--d4-ket); }
    html.dark:not(#d4) #tabel-item .fi-ta-group-header .fi-icon-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--d4-kaca); border: 1px solid var(--d4-garis); }

    /* item = kartu ringkas satu baris (>= 72 px): nama 15 px + volume, jumlah amber di kanan, panah turun; ketuk membuka akordeon (volume, harga satuan, rumus, aksi) */
    html.dark:not(#d4) #tabel-item tr.fi-ta-row:has(> td.fi-ta-cell) {
        position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto 30px; grid-template-areas: "nama nama nama jml chev" "vol vol harga harga harga" "rumus rumus rumus rumus rumus" "aksi aksi aksi aksi aksi"; align-items: center; column-gap: 12px; row-gap: 0;
        min-height: 72px; margin: 0 0 10px; padding: 14px 14px 14px 18px; border: 1px solid var(--d4-garis); border-radius: 24px; cursor: pointer; -webkit-tap-highlight-color: transparent;
        background: var(--d4-kartu); box-shadow: 0 10px 24px rgba(0, 0, 0, .28), var(--d4-sorot); transition: border-color .3s ease, box-shadow .3s ease;
    }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka { border-color: rgba(242, 163, 58, .32); box-shadow: 0 14px 30px rgba(0, 0, 0, .36), 0 0 0 1px rgba(242, 163, 58, .08), var(--d4-sorot); }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row:focus-visible { outline: 2px solid var(--d4-amber); outline-offset: 2px; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell::before { display: none !important; }
    /* panah turun berputar 180 derajat */
    html.dark:not(#d4) #tabel-item tr.fi-ta-row:has(> td.fi-ta-cell)::after {
        content: ""; grid-area: chev; justify-self: end; width: 22px; height: 22px; background: var(--d4-ket); transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), background-color .3s ease;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka:has(> td.fi-ta-cell)::after { transform: rotate(180deg); background: var(--d4-amber2); }

    /* nama (15 px) dan teks rumus dipisah dari satu sel (display: contents) */
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-uraian { display: contents !important; }
    html.dark:not(#d4) #tabel-item td.fi-table-cell-uraian .fi-ta-col-wrp, html.dark:not(#d4) #tabel-item td.fi-table-cell-uraian .fi-ta-col-wrp > div, html.dark:not(#d4) #tabel-item td.fi-table-cell-uraian .fi-ta-text, html.dark:not(#d4) #tabel-item td.fi-table-cell-uraian .fi-ta-text div:not(.fi-ta-text-item) { display: contents !important; }
    html.dark:not(#d4) #tabel-item td.fi-table-cell-uraian .fi-ta-text-item { grid-area: nama; display: block; min-width: 0; align-self: center; }
    html.dark:not(#d4) #tabel-item td.fi-table-cell-uraian .fi-ta-text-item-label { font-size: 15px !important; line-height: 1.35; font-weight: 600 !important; color: var(--d4-judul); -webkit-line-clamp: 2; }
    html.dark:not(#d4) #tabel-item td.fi-table-cell-uraian .fi-ta-text > p {
        grid-area: rumus; display: block !important; margin: 0 !important; max-height: 0; overflow: hidden; opacity: 0; font-size: 12px !important; line-height: 1.5 !important; color: var(--d4-ket) !important; -webkit-line-clamp: unset;
        transition: max-height .45s cubic-bezier(.34, 1.3, .64, 1), opacity .3s ease, margin .45s cubic-bezier(.34, 1.3, .64, 1);
    }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka td.fi-table-cell-uraian .fi-ta-text > p { max-height: 120px; opacity: 1; margin: 10px 0 0 !important; }

    /* volume: keterangan di bawah nama (tertutup) -> kotak "Volume" (terbuka) */
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume { grid-area: vol; display: block !important; padding: 0 !important; margin-top: 4px; text-align: left; min-width: 0; border-radius: 16px; border: 1px solid transparent; background: transparent;
        transition: padding .45s cubic-bezier(.34, 1.3, .64, 1), margin .45s cubic-bezier(.34, 1.3, .64, 1), background-color .3s ease, border-color .3s ease; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume .fi-ta-col-wrp, html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume .fi-ta-text,
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume .fi-ta-col-wrp > div, html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume .fi-ta-text div, html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume .fi-ta-text-item { display: inline !important; padding: 0 !important; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume .fi-ta-text-item { font-size: 13px; color: var(--d4-ket); font-variant-numeric: tabular-nums; text-align: left !important; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume .fi-ta-text-item-label { display: inline !important; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume::after { content: " " attr(data-satuan); font-size: 13px; color: var(--d4-ket); }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-volume::before { display: block !important; content: "Volume"; max-height: 0; overflow: hidden; opacity: 0; font-size: 11px; line-height: 1.3; color: var(--d4-ket); margin: 0; transition: max-height .45s cubic-bezier(.34, 1.3, .64, 1), opacity .3s ease; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka > td.fi-ta-cell.fi-table-cell-volume { margin-top: 14px; padding: 10px 14px !important; background: #120D09; border-color: var(--d4-garis); }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka > td.fi-ta-cell.fi-table-cell-volume::before { max-height: 18px; opacity: 1; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka > td.fi-ta-cell.fi-table-cell-volume .fi-ta-text-item, html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka > td.fi-ta-cell.fi-table-cell-volume::after { font-family: 'Sora', 'Inter', sans-serif; font-size: 15px; color: var(--d4-judul); }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-satuan { display: none !important; }

    /* harga satuan: kotak (tertutup: tak terlihat) */
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-harga-satuan { grid-area: harga; display: block !important; max-height: 0; overflow: hidden; opacity: 0; margin: 0; padding: 0 !important; text-align: left; border-radius: 16px; border: 0; background: #120D09; min-width: 0;
        transition: max-height .45s cubic-bezier(.34, 1.3, .64, 1), opacity .3s ease, padding .45s cubic-bezier(.34, 1.3, .64, 1), margin .45s cubic-bezier(.34, 1.3, .64, 1); }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka > td.fi-ta-cell.fi-table-cell-harga-satuan { max-height: 90px; opacity: 1; margin: 14px 0 0 0; padding: 10px 14px !important; border: 1px solid var(--d4-garis); }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-harga-satuan::before { display: block !important; content: "Harga satuan"; font-size: 11px; line-height: 1.3; color: var(--d4-ket); margin: 0; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-harga-satuan .fi-ta-text, html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-harga-satuan .fi-ta-col-wrp > div { justify-content: flex-start !important; text-align: left; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-harga-satuan .fi-ta-text-item { font-family: 'Sora', 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--d4-judul); white-space: nowrap; }

    /* jumlah amber di kanan */
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-jumlah { grid-area: jml; padding: 0 !important; text-align: right; min-width: 0; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-jumlah .fi-ta-text, html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-jumlah .fi-ta-col-wrp > div { justify-content: flex-end !important; text-align: right; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-jumlah .fi-ta-text-item, html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-jumlah .fi-ta-text-item-label { font-family: 'Sora', 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--d4-amber2) !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-peringatan > td.fi-ta-cell.fi-table-cell-jumlah::after { content: "\26A0  harga belum lengkap"; display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: #F2C879; white-space: nowrap; }

    /* aksi (Ubah / Hapus) hanya saat kartu terbuka */
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-actions-cell { grid-area: aksi; display: block !important; max-height: 0; overflow: hidden; opacity: 0; padding: 0 !important; margin: 0; justify-self: end;
        transition: max-height .45s cubic-bezier(.34, 1.3, .64, 1), opacity .3s ease, margin .45s cubic-bezier(.34, 1.3, .64, 1); }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row.d4-buka > td.fi-ta-actions-cell { max-height: 64px; opacity: 1; margin-top: 12px; overflow: visible; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-actions-cell .fi-dropdown-trigger button, html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-actions-cell button.fi-icon-btn {
        display: inline-flex; align-items: center; gap: 8px; height: 44px; width: auto !important; min-width: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--d4-isi);
        background: var(--d4-kaca) !important; border: 1px solid rgba(255, 222, 185, .22); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-actions-cell > div, html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions { padding: 0 !important; }
    html.dark:not(#d4) #tabel-item tr.fi-ta-row > td.fi-ta-actions-cell .sr-only { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; white-space: nowrap; }

    /* bar aksi melayang di atas dock (bottom 118 px, tinggi 56 px): tombol (+) bulat kaca + tombol amber "Lanjut: <langkah berikutnya>" */
    html.dark .d4-lanjut {
        display: flex; align-items: center; justify-content: center; gap: 10px; position: fixed; z-index: 23; right: var(--vy-d-kanan); left: var(--vy-d-kiri); bottom: 118px; height: 56px; padding: 0 22px; border: 0; border-radius: 999px;
        font-family: inherit; font-size: 15px; font-weight: 700; color: #26170A; cursor: pointer; -webkit-tap-highlight-color: transparent; max-width: calc(560px - 32px); margin-inline: auto;
        background: var(--d4-utama); box-shadow: 0 12px 30px rgba(242, 163, 58, .38), 0 4px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 245, 225, .5);
        transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, left .3s ease;
    }
    html.dark.vy-fab-ada .d4-lanjut { left: calc(var(--vy-d-kiri) + 66px); }
    html.dark .d4-lanjut:active { transform: scale(.97); }
    html.dark .d4-lanjut span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html.dark .d4-lanjut svg { flex: 0 0 20px; width: 20px; height: 20px; }
    html.vy-ketik .d4-lanjut { opacity: 0; pointer-events: none; transform: translateY(24px); }
    html.dark.d4-isi:not(#d4) .vy-fab {
        right: auto; left: var(--vy-d-kiri); bottom: 118px; color: var(--d4-amber2); background: var(--d4-kaca); border: 1px solid rgba(255, 222, 185, .26); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 240, 220, .3);
    }
    html.dark.d4-isi:not(#d4) .vy-fab-menu { right: auto; left: var(--vy-d-kiri); bottom: calc(118px + 56px + 10px); transform-origin: bottom left; }
    html.dark.d4-isi:not(#d4) .jl-bawah { display: none !important; }
    /* ruang bawah halaman ~190 px bila ada bar aksi (tidak menutupi isi) */
    html.dark.d4-isi:not(#d4) .fi-main-ctn { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    html.dark #tabel-item tr.fi-ta-row, html.dark #tabel-item tr.fi-ta-row *, html.dark #tabel-item tr.fi-ta-row::after, html.dark .d4-lanjut, html.dark .d4-lk, html.dark .jl-seg > span { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}

@media screen and (max-width: 767px) {

    /* ===== C. HARGA (halaman Harga Komponen) ===== */
    .d4-kemajuan, .d4-tab, .d4-muat { display: none; }
    /* kepala: breadcrumb "Harga > Surabaya" segaris tombol notifikasi, judul "Harga komponen" Sora 30 px */
    html.dark.d4-harga:not(#d4) .fi-page { padding-top: 0 !important; }
    html.dark.d4-harga:not(#d4) .fi-page > section { padding-top: 0; padding-bottom: 0; row-gap: 16px; }
    html.dark.d4-harga:not(#d4) .fi-header > div:first-child { padding-right: 0; min-height: 0; justify-content: flex-start; }
    html.dark.d4-harga:not(#d4) .fi-header .fi-breadcrumbs { display: none !important; }
    html.dark.d4-harga:not(#d4) .fi-header > div:first-child::before {
        content: "Harga \203A  Surabaya"; display: block; margin: calc(env(safe-area-inset-top, 0px) + 14px + 14px) 108px 0 0; font-size: 12px; line-height: 16px; letter-spacing: .02em; color: var(--d4-ket);
    }
    html.dark.d4-harga:not(#d4) .fi-header-heading { margin-top: 14px; font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--d4-judul); }

    /* kartu kemajuan: cincin SVG 74 px (isi amber bercahaya, stroke-dasharray beranimasi .7 dtk) + angka */
    html.dark .d4-kemajuan {
        display: block; padding: 18px 20px 14px; border-radius: 26px; border: 1px solid var(--d4-garis); background: radial-gradient(circle at 100% 0, rgba(242, 163, 58, .2), rgba(242, 163, 58, 0) 50%), var(--d4-kartu);
        box-shadow: 0 16px 34px rgba(0, 0, 0, .32), var(--d4-sorot);
    }
    html.dark .d4-kemajuan-atas { display: flex; align-items: center; gap: 16px; }
    html.dark .d4-cincin { position: relative; flex: 0 0 74px; width: 74px; height: 74px; }
    html.dark .d4-cincin svg { display: block; width: 74px; height: 74px; transform: rotate(-90deg); }
    html.dark .d4-cincin.nol .isi { stroke-opacity: 0; }
    html.dark .d4-cincin .trek { fill: none; stroke: #2D2118; stroke-width: 7; }
    html.dark .d4-cincin .isi { fill: none; stroke: #F2A33A; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(242, 163, 58, .8)); transition: stroke-dasharray .7s cubic-bezier(.22, 1, .36, 1); animation: d4-cincin .9s cubic-bezier(.22, 1, .36, 1) both; }
    @keyframes d4-cincin { from { stroke-dasharray: 0 194.8; } }
    html.dark .d4-cincin .d4-persen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Sora', 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--d4-amber2); font-variant-numeric: tabular-nums; }
    html.dark .d4-kemajuan-teks { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    html.dark .d4-kecil { font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: .12em; color: var(--d4-ket); }
    html.dark .d4-x { font-family: 'Sora', 'Inter', sans-serif; font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--d4-judul); font-variant-numeric: tabular-nums; }
    html.dark .d4-x [data-nilai] { color: var(--d4-amber2); }
    html.dark .d4-ket { font-size: 12px; line-height: 1.4; color: var(--d4-ket); }
    html.dark .d4-kemajuan-kaki { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--d4-garis); }
    html.dark .d4-kemajuan-kaki .d4-ket { min-width: 0; }
    html.dark .d4-petunjuk-btn {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--d4-isi); cursor: pointer; -webkit-tap-highlight-color: transparent;
        background: var(--d4-kaca); border: 1px solid rgba(255, 222, 185, .22); box-shadow: var(--d4-sorot); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    }
    html.dark .d4-petunjuk-btn svg { width: 18px; height: 18px; color: var(--d4-amber2); }

    /* petunjuk (teks lama "Pekerjaan favorit" dan "Petunjuk pengisian", tidak dihapus) = lembar kaca dari bawah */
    html.dark.d4-harga:not(#d4) .d4-lembar {
        position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); max-height: min(78vh, 640px); max-width: 560px; margin-inline: auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 6px 14px;
        border-radius: 28px; border: 1px solid rgba(255, 222, 185, .22); background-color: rgba(22, 15, 10, .94); background-image: linear-gradient(160deg, rgba(255, 232, 205, .14), rgba(255, 232, 205, .05));
        -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); box-shadow: 0 -10px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 240, 220, .3);
        visibility: hidden; opacity: 0; transform: translateY(40px); pointer-events: none; transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), opacity .25s ease, visibility 0s .45s;
    }
    html.dark:not(#d4) #d4-harga.d4-pet .d4-lembar { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), opacity .25s ease; }
    html.dark .d4-latar { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(10, 7, 5, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s .3s; }
    html.dark #d4-harga.d4-pet .d4-latar { visibility: visible; opacity: 1; transition: opacity .3s ease; }
    html.dark .d4-lembar-kepala { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 4px 18px; }
    html.dark .d4-lembar-judul { font-family: 'Sora', 'Inter', sans-serif; font-size: 18px; font-weight: 600; color: var(--d4-judul); }
    html.dark .d4-tutup { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--d4-isi); cursor: pointer; }
    html.dark .d4-lembar .fi-section { border: 0; background: none !important; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
    html.dark .d4-lembar .fi-section-content { padding: 6px 14px 4px; font-size: 14px; color: var(--d4-isi); }
    html.dark .d4-lembar .d4-sembunyi-hp { display: none !important; }
    html.dark .d4-lembar details { margin-top: 12px !important; }
    html.dark .d4-lembar details summary { min-height: 44px; display: flex; align-items: center; color: var(--d4-amber2); }

    /* tiga tab segmen dengan SATU gelembung kaca amber yang meluncur */
    html.dark .d4-tab { display: grid; position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 26px; background: #120D09; border: 1px solid var(--d4-garis); }
    html.dark .d4-tab-gel {
        position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 22px; pointer-events: none; opacity: 0; transform: translateX(calc(var(--i, 0) * 100%));
        background-image: linear-gradient(160deg, rgba(242, 163, 58, .38), rgba(242, 163, 58, .14)); border: 1px solid rgba(255, 238, 215, .45); box-shadow: 0 6px 16px rgba(215, 155, 94, .28), inset 0 1px 0 rgba(255, 245, 225, .4);
        transition: transform .6s cubic-bezier(.34, 1.45, .64, 1), opacity .3s ease;
    }
    html.dark .d4-tab[data-i="0"] .d4-tab-gel, html.dark .d4-tab[data-i="1"] .d4-tab-gel, html.dark .d4-tab[data-i="2"] .d4-tab-gel { opacity: 1; }
    html.dark .d4-tab button { position: relative; z-index: 1; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--d4-ket); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .3s ease; }
    html.dark .d4-tab button small { font-size: 12px; font-weight: 500; opacity: .9; }
    html.dark .d4-tab button.is-aktif { color: #FFF3E0; }

    /* baris cari pil 48 px + tombol Filter bulat kaca 48 px; chip filter aktif = pil kecil yang bisa dihapus satu per satu */
    html.dark:not(#d4) #d4-harga .fi-ta-ctn { background: none !important; border: 0; box-shadow: none; --tw-ring-shadow: 0 0 #0000; overflow: visible; }
    html.dark:not(#d4) #d4-harga .fi-ta-ctn > *, html.dark:not(#d4) #d4-harga .fi-ta-header-ctn { border: 0 !important; }
    html.dark:not(#d4) #d4-harga .fi-ta-content { border: 0 !important; overflow: visible !important; }
    html.dark:not(#d4) #d4-harga .fi-ta-table > tbody { padding: 0; border-top-width: 0 !important; }
    html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px !important; padding: 0 !important; margin: 0 0 12px; }
    html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar > div { margin: 0; }
    html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { order: 1; flex: 1 1 auto; min-width: 0; }
    html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar > div:not(:has(.fi-ta-search-field)) { order: 2; flex: 0 0 auto; }
    html.dark:not(#d4) #d4-harga .fi-ta-search-field { width: 100%; }
    html.dark:not(#d4) #d4-harga .fi-ta-search-field .fi-input-wrp { height: 48px; border-radius: 999px; background: var(--d4-kaca); box-shadow: var(--d4-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(#d4) #d4-harga .fi-ta-search-field .fi-input-wrp-prefix { padding-left: 16px; }
    html.dark:not(#d4) #d4-harga .fi-ta-search-field input { height: 48px; font-size: 15px; color: var(--d4-judul); }
    html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar .fi-ta-filters-trigger, html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar .fi-dropdown-trigger > button, html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar .fi-icon-btn, html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar button.fi-btn {
        position: relative; width: 48px; height: 48px; min-width: 48px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 0; font-size: 0; color: var(--d4-isi);
        background: var(--d4-kaca) !important; border: 1px solid rgba(255, 222, 185, .22); box-shadow: var(--d4-sorot); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); --tw-ring-shadow: 0 0 #0000;
    }
    html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar button.fi-btn .fi-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar button.fi-btn svg { width: 22px; height: 22px; color: var(--d4-isi); }
    html.dark:not(#d4) #d4-harga .fi-ta-header-toolbar .fi-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; font-weight: 700; background: var(--d4-amber) !important; color: #26170A !important; border-radius: 10px; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
    html.dark:not(#d4) #d4-harga .fi-ta-filter-indicators { background: none !important; padding: 0 0 12px; border: 0; gap: 8px; align-items: center; }
    html.dark:not(#d4) #d4-harga .fi-ta-filter-indicators > div:first-child { flex-direction: row; align-items: center; min-width: 0; }
    html.dark:not(#d4) #d4-harga .fi-ta-filter-indicators > div:first-child > span { display: none; }
    html.dark:not(#d4) #d4-harga .fi-ta-filter-indicators .fi-badge { max-width: 100%; min-height: 32px; padding: 0 10px 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(242, 163, 58, .12) !important; color: var(--d4-amber2) !important; border: 1px solid rgba(242, 163, 58, .35); --tw-ring-shadow: 0 0 #0000; box-shadow: none; }
    html.dark:not(#d4) #d4-harga .fi-ta-filter-indicators .fi-badge button { min-width: 32px; min-height: 32px; display: grid; place-items: center; margin: 0 -6px 0 0; color: var(--d4-amber2); }
    html.dark:not(#d4) #d4-harga .fi-ta-filter-indicators .fi-icon-btn { min-width: 44px; min-height: 44px; }

    /* satu komponen = satu kartu */
    html.dark:not(#d4) #d4-harga .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-areas: "nama status" "kode kode" "info aksi" "harga harga"; align-items: start; column-gap: 12px; row-gap: 0 !important;
        margin: 0 0 14px; padding: 18px 18px 16px; border: 1px solid var(--d4-garis) !important; border-radius: 26px; background: var(--d4-kartu); box-shadow: 0 14px 30px rgba(0, 0, 0, .32), var(--d4-sorot); transition: border-color .6s ease, box-shadow .6s ease;
    }
    html.dark:not(#d4) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row.d4-terisi:has(> td.fi-ta-cell) { border-color: rgba(127, 214, 160, .28) !important; }
    html.dark:not(#d4) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row.d4-terisi.d4-lama:has(> td.fi-ta-cell) { border-color: rgba(242, 200, 121, .38) !important; }
    html.dark:not(#d4) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell::before { display: none !important; }
    html.dark:not(#d4) #d4-harga .fi-ta-table > tbody > tr.fi-ta-row .fi-ta-text { padding: 0 !important; }

    /* nama (16 px) + "kode · satuan", status di kanan, "Dipakai di N pekerjaan" */
    html.dark:not(#d4) #d4-harga td.fi-table-cell-nama, html.dark:not(#d4) #d4-harga td.fi-table-cell-nama .fi-ta-col-wrp, html.dark:not(#d4) #d4-harga td.fi-table-cell-nama .fi-ta-col-wrp > div, html.dark:not(#d4) #d4-harga td.fi-table-cell-nama .fi-ta-text, html.dark:not(#d4) #d4-harga td.fi-table-cell-nama .fi-ta-text div:not(.fi-ta-text-item),
    html.dark:not(#d4) #d4-harga td.fi-table-cell-nama .fi-ta-text > p { display: contents !important; }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-nama .fi-ta-text-item { grid-area: nama; display: block; min-width: 0; }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-nama .fi-ta-text-item-label { font-family: 'Sora', 'Inter', sans-serif; font-size: 16px !important; line-height: 1.35; font-weight: 600 !important; color: var(--d4-judul); -webkit-line-clamp: 2; }
    html.dark:not(#d4) #d4-harga .d4-kodesat { grid-area: kode; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--d4-ket); }
    html.dark:not(#d4) #d4-harga .d4-sep { display: none; }
    html.dark:not(#d4) #d4-harga .d4-kodesat .d4-sep { display: inline; }
    html.dark:not(#d4) #d4-harga .d4-info { grid-area: info; align-self: center; margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--d4-ket); min-width: 0; }
    html.dark:not(#d4) #d4-harga .d4-info .d4-pakai::before { content: "Dipakai di "; }
    html.dark:not(#d4) #d4-harga .d4-info .d4-fav { display: block; color: var(--d4-amber2); }
    html.dark:not(#d4) #d4-harga .d4-info .d4-lama-teks { display: block; color: #F2C879; }
    html.dark:not(#d4) #d4-harga .d4-status { grid-area: status; justify-self: end; display: none; min-height: 28px; padding: 0 12px; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; text-transform: lowercase; }
    html.dark:not(#d4) #d4-harga .d4-status::first-letter { text-transform: uppercase; }
    html.dark:not(#d4) #d4-harga .d4-status.d4-kosong, html.dark:not(#d4) #d4-harga .d4-status.d4-isi { display: inline-flex; }
    html.dark:not(#d4) #d4-harga .d4-status.d4-kosong { color: var(--d4-amber2); border: 1px solid rgba(242, 163, 58, .6); background: transparent; }
    html.dark:not(#d4) #d4-harga .d4-status.d4-isi { text-transform: none; color: #7FD6A0; background: #16301F; border: 1px solid rgba(127, 214, 160, .3); }

    /* kolom harga lebar 56 px: awalan "Rp", angka besar rata kanan 20 px, "/ satuan"; kosong = "Ketuk untuk isi" */
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku { grid-area: harga; display: block !important; min-width: 0; margin-top: 12px; padding: 0 !important; }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku .fi-ta-col-wrp { display: block; }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku .fi-ta-text-input { position: relative; min-width: 0 !important; width: 100%; padding: 0 !important; }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku .fi-ta-text-input::before { content: "Rp"; position: absolute; z-index: 1; left: 18px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--d4-ket); pointer-events: none; }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku .fi-ta-text-input::after { content: "/ " attr(data-satuan); position: absolute; z-index: 1; right: 16px; top: 50%; transform: translateY(-50%); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--d4-ket); pointer-events: none; }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku .fi-input-wrp { height: 56px; border-radius: 18px; background: #120D09; box-shadow: none; --tw-ring-color: rgba(255, 222, 185, .14); --tw-ring-shadow: 0 0 0 1px rgba(255, 222, 185, .14); transition: box-shadow .3s ease; }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku .fi-input-wrp:focus-within { --tw-ring-shadow: 0 0 0 2px rgba(242, 163, 58, .75); }
    html.dark:not(#d4) #d4-harga tr.fi-ta-row.d4-terisi td.fi-table-cell-harga-berlaku .fi-input-wrp { --tw-ring-shadow: 0 0 0 1px rgba(127, 214, 160, .28); }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku input {
        height: 56px; padding: 0 76px 0 44px !important; text-align: right; font-family: 'Sora', 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: var(--d4-amber2); font-variant-numeric: tabular-nums; background: none; letter-spacing: -.01em;
    }
    html.dark:not(#d4) #d4-harga td.fi-table-cell-harga-berlaku input::placeholder { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: #B3A08A; letter-spacing: 0; }

    /* aksi lain (Isi/ubah harga, Batalkan, Riwayat): ikon kecil 44 px; tahan lama pada kartu juga membukanya */
    html.dark:not(#d4) #d4-harga td.fi-ta-actions-cell { grid-area: aksi; justify-self: end; align-self: end; margin-top: 4px; padding: 0 !important; }
    html.dark:not(#d4) #d4-harga td.fi-ta-actions-cell .fi-ta-actions { display: flex; justify-content: flex-end; width: auto; }
    html.dark:not(#d4) #d4-harga td.fi-ta-actions-cell .fi-dropdown-trigger button, html.dark:not(#d4) #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(--d4-garis); background: none !important; color: var(--d4-ket); box-shadow: none;
    }
    html.dark:not(#d4) #d4-harga td.fi-ta-actions-cell .fi-icon-btn svg { width: 20px; height: 20px; }

    /* pindah tab: kartu masuk bergeser dari kanan (ke tab kanan) atau kiri (ke tab kiri), 46 px + pudar, .6 dtk, jeda 80 ms per kartu; nama animasi A/B bergantian agar terulang */
    @keyframes d4-ka-a { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
    @keyframes d4-ka-b { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
    @keyframes d4-ki-a { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
    @keyframes d4-ki-b { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
    html[data-d4-anim="a"][data-d4-arah="kanan"] #d4-harga tr.fi-ta-row:has(> td.fi-ta-cell) { animation: d4-ka-a .6s cubic-bezier(.22, 1, .36, 1) calc(var(--d4i, 8) * 80ms) both; }
    html[data-d4-anim="b"][data-d4-arah="kanan"] #d4-harga tr.fi-ta-row:has(> td.fi-ta-cell) { animation: d4-ka-b .6s cubic-bezier(.22, 1, .36, 1) calc(var(--d4i, 8) * 80ms) both; }
    html[data-d4-anim="a"][data-d4-arah="kiri"] #d4-harga tr.fi-ta-row:has(> td.fi-ta-cell) { animation: d4-ki-a .6s cubic-bezier(.22, 1, .36, 1) calc(var(--d4i, 8) * 80ms) both; }
    html[data-d4-anim="b"][data-d4-arah="kiri"] #d4-harga tr.fi-ta-row:has(> td.fi-ta-cell) { animation: d4-ki-b .6s cubic-bezier(.22, 1, .36, 1) calc(var(--d4i, 8) * 80ms) both; }
    #d4-harga tr.fi-ta-row:nth-child(1) { --d4i: 0; } #d4-harga tr.fi-ta-row:nth-child(2) { --d4i: 1; } #d4-harga tr.fi-ta-row:nth-child(3) { --d4i: 2; } #d4-harga tr.fi-ta-row:nth-child(4) { --d4i: 3; }
    #d4-harga tr.fi-ta-row:nth-child(5) { --d4i: 4; } #d4-harga tr.fi-ta-row:nth-child(6) { --d4i: 5; } #d4-harga tr.fi-ta-row:nth-child(7) { --d4i: 6; } #d4-harga tr.fi-ta-row:nth-child(8) { --d4i: 7; }

    html.dark:not(#d4) #d4-harga .vk-lebih { display: none !important; }

    /* muat bertahap */
    html.dark .d4-muat { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
    html.dark .d4-muat button { min-height: 52px; padding: 0 28px; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--d4-amber2); cursor: pointer; background: rgba(242, 163, 58, .14); border: 1px solid rgba(242, 163, 58, .35); -webkit-tap-highlight-color: transparent; }
    html.dark .d4-muat .d4-ket { text-align: center; }
    html.dark:not(#d4) #d4-harga .fi-pagination, html.dark:not(#d4) #d4-harga .fi-ta-pagination, html.dark:not(#d4) #d4-harga .fi-pagination-records-per-page-select, html.dark:not(#d4) #d4-harga .fi-pagination-overview { display: none; }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    html.dark .d4-cincin .isi, html.dark .d4-tab-gel, html.dark .d4-tab button, html.dark .d4-lembar, html.dark .d4-latar, html.dark #d4-harga tr.fi-ta-row { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}