/* Custom Scrollbar for cleaner look */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Utility for chart animations
           Animasi TIDAK boleh menyentuh stroke-dashoffset: tiap segmen
           donut memakai offset kumulatif yang ditulis JS. Animasi hanya
           menambah panjang busur (dasharray) dari 0 ke nilai yang sudah
           terpasang di atribut, sehingga cincin "tergambar" sendiri. */
        @keyframes dash {
            from {
                stroke-dasharray: 0 238.76;
            }
        }

        .chart-circle {
            animation: dash 1.5s ease-out forwards;
            transition: stroke-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
            cursor: pointer;
            transform-origin: center;
        }

        /* Efek saat segmen warna di-hover */
        .chart-circle:hover,
        .chart-circle.active {
            stroke-width: 14px !important;
            opacity: 1 !important;
        }

        /* Efek redup untuk segmen lain */
        .chart-circle.dimmed {
            opacity: 0.35;
        }

        /* Baris legend ikut memicu highlight segmennya. */
        .legend-item {
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

        .legend-item.dimmed {
            opacity: 0.4;
        }

        main {
            animation: fadeInContent 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes fadeInContent {
            0% {
                opacity: 0;
                transform: translateY(8px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        :root {
            /* Status: sukses | diproses | revisi | ditolak */
            --paud-status-sukses: #79d3b2;
            --paud-status-diproses: #3e7bd1;
            --paud-status-revisi: #FBBF24;
            --paud-status-ditolak: #F87171;

            /* Badge status: pasangan latar / teks. Dipakai oleh pill
               status di tooltip tiket. Sukses = "Terbit" (hijau
               emerald-500 di atas hijau-50, sesuai acuan desain). */
            --paud-badge-sukses-bg: #ECFDF5;
            --paud-badge-sukses-fg: #18ab7a;
            --paud-badge-diproses-bg: #F1F5F9;
            --paud-badge-diproses-fg: #475569;
            --paud-badge-revisi-bg: #FFFBEB;
            --paud-badge-revisi-fg: #B45309;
            --paud-badge-ditolak-bg: #FEF2F2;
            --paud-badge-ditolak-fg: #B91C1C;

            --paud-kategori-sd: #fd8282;
            --paud-kategori-smp: #4ba7f2;
            --paud-kategori-pkbm: #ff972f;
            --paud-kategori-lainnya: #8af67c;

            /* Catatan kosong */
            --paud-label: #64748B;
        }

        /* Isi batang per kategori — menggantikan atribut fill hardcode
           pada <path> yang ditulis skrip. */
        .paud-kategori-sd {
            fill: var(--paud-kategori-sd);
        }

        .paud-kategori-smp {
            fill: var(--paud-kategori-smp);
        }

        .paud-kategori-pkbm {
            fill: var(--paud-kategori-pkbm);
        }

        .paud-kategori-lainnya {
            fill: var(--paud-kategori-lainnya);
        }

        /* Var --paud-hatch-garis beserta kelas .paud-hatch-garis dan blok
           <pattern id="paud-md-*"> DIHAPUS: segmen bertanggal masa
           depan tidak lagi diarsir, melainkanwarnanya Solid seperti
           segmen biasa (satu slot bulan = satu batang utuh). */

        /* Swatch kategori SD/MI, SMP/MTs, PKBM, Lainnya. Muncul di DUA
           tempat dalam card "Statistik Penerbitan Rekomendasi": legenda
           di bawah grafik dan item dropdown filter Jenjang. Keduanya
           memakai kelas yang sama supaya warna + bentuknya tidak
           mungkin berbeda.

           Bentuk: KOTAK (rounded-sm), bukan lingkaran — diganti
           4 Okt 2026. Alasannya: batang pada grafik adalah persegi
           (lihat pathBatang() di js/dashboard.js), jadi swatch
           persegi ikut bahasa bentuk grafik itu. Bulat membuat
           kategori terasa seperti kelompok bentuk tersendiri,
           terpisah dari batang yang diwarnainya.

           Ukuran + radius ditulis Tailwind di markup
           (w-2 h-2 rounded-sm); file ini hanya menyimpan warnanya. */
        .paud-swatch {
            display: inline-block;
        }

        .paud-swatch--sd {
            background: var(--paud-kategori-sd);
        }

        .paud-swatch--smp {
            background: var(--paud-kategori-smp);
        }

        .paud-swatch--pkbm {
            background: var(--paud-kategori-pkbm);
        }

        .paud-swatch--lainnya {
            background: var(--paud-kategori-lainnya);
        }

        /* Label sumbu (angka Y & nama bulan X) dan catatan data kosong:
           minimal #64748B, bukan abu terang #94a3b8/#cbd5e1 lama. */
        .paud-axis-label {
            fill: var(--paud-label);
        }

        .paud-chart-note {
            fill: var(--paud-label);
        }

        /* Teks legenda — warna & ukuran (text-xs) dari variabel. */
        .paud-legend-label {
            color: var(--paud-label);
            font-size: 0.75rem;
            line-height: 1rem;
        }

        /* Legenda berupa TOMBOL: klik = tampilkan/sembunyikan satu
           kategori pada grafik tanpa mengubah data maupun warna.
           State mati ditulis lewat aria-pressed="false" (sekaligus
           terbaca pembaca layar) — JANGAN ditulis sebagai atribut
           class manual karena tombol ikut me-render ulang. */
        .paud-legend-item {
            background: transparent;
            border: 0;
            border-radius: 9999px;
            padding: 0.25rem 0.5rem;
            cursor: pointer;
            transition: opacity .15s ease, background-color .15s ease;
        }

        .paud-legend-item[aria-pressed="false"] {
            opacity: .45;
            text-decoration: line-through;
        }

        /* Di luar filter jenjang aktif: tombol dinonaktifkan, jadi
           tampilan harus kalah telak dari aturan aria-pressed di atas. */
        .paud-legend-item:disabled {
            opacity: .35;
            text-decoration: none;
            cursor: default;
        }
        .paud-kartu.paud-kartu--nol {
            background: #FFFFFF;
            /* putih bersih, bukan abu: kartu jadi "tidak ada apa-apa" */
            border-color: #E2E8F0;
            /* slate-200 */
            box-shadow: none;
        }

        .paud-kartu--nol .paud-kartu-judul {
            color: #94A3B8;
            /* slate-400 */
        }

        .paud-kartu--nol .paud-kartu-angka {
            color: #64748B;
            /* slate-500 — tetap terbaca, tapi tidak "menyala" seperti
               angka yang isinya. */
        }

        .paud-kartu--nol .paud-kartu-sub {
            color: #94A3B8;
        }

        /* Ikon: czerwakan + redupkan supaya tidak menyala. Pada kartu
           ber-ilustrasi (img PNG) hasilnya abu; pada ikon Phosphor
           (ph-*) filter yang sama berlaku karena warnanya ikut
           meredup. */
        .paud-kartu--nol .paud-kartu-ikon {
            filter: grayscale(1);
            opacity: .5;
        }

        /* ==========================================
           TOOLTIP (Rincian Bulanan & Rincian Segmen)
           ========================================== */
        .paud-tip {
            position: fixed;
            z-index: 60;
            pointer-events: none;
            background: #FFFFFF;
            /* bg-white */
            border: 1px solid #F1F5F9;
            /* border-slate-100 */
            border-radius: 16px;
            /* rounded-2xl */
            overflow: hidden;
            /* banner dipotong ikut radius kartu */
            font-family: 'Inter', sans-serif;
            width: 310px;
            /* w-[310px] */
            max-width: calc(100vw - 16px);
            /* w-[310px] tidak muat di layar sempit */
            box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .1),
                0 8px 10px -6px rgba(15, 23, 42, .1);
            /* shadow-xl */
        }

        /* --- 1. Banner atas ---
           `background` TIDAK ditulis di sini: isinya di-set inline oleh
           isiTooltipBars() dari --paud-kategori-*, jadi warnanya
           dijamin identik dengan batang yang sedang di-hover. Nilai di
           bawah hanya jaring pengaman sebelum JS sempat jalan.

            TEKS: banner memakai warna batang yang berupa pastel sangat
            terang (sama persis dengan soft background kartu statistik),
            sehingga teksnya memakai varian gelap
            (.paud-tip-banner--terang). Keterbacaan tetap dinaikkan dari
            sisi TEKS: weight 800. Slot status dipisah dari teks kategori,
            jadi operator tidak wajib membaca bagian itu untuk tahu
            kategori apa yang sedang di-hover. */
        .paud-tip-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 16px;
            /* px-4 py-2.5 */
            background: #F0EEFF;
            color: #FFFFFF;
            text-shadow: 0 1px 2px rgba(15, 23, 42, .28);
        }

        /* Semua kategori saat ini sangat terang, sehingga banner selalu
           memakai teks gelap. Varian ini dipasang JS lewat kelas
           .paud-tip-banner--terang untuk setiap key di KATEGORI_TERANG. */
        .paud-tip-banner--terang {
            color: #334155;
            text-shadow: none;
        }

        /* Kategori di kiri: uppercase, tebal, tracking lebar. */
        .paud-tip-banner-kode {
            font-size: 12px;
            /* text-xs */
            font-weight: 700;
            /* font-bold */
            letter-spacing: .05em;
            /* tracking-wider */
            text-transform: uppercase;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Bulan + tahun di kanan, sedikit diturunkan supaya kategori
           tetap jadi titik baca pertama. */
        .paud-tip-banner-bulan {
            font-size: 12px;
            /* text-xs */
            font-weight: 600;
            /* font-semibold */
            opacity: .95;
            white-space: nowrap;
        }

        /* --- 2. Body --- */
        .paud-tip-body {
            padding: 16px;
            /* p-4 */
        }

        .paud-tip-kepala {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            /* gap-3 */
        }

        /* Judul unit bisa sangat panjang ("PKBM DAARUL FIKRI
           AL-ANDALUSY"), jadi kolom teks boleh menyusut dan judul
           membungkus — bukan nowrap seperti versi lama. */
        .paud-tip-kepala-teks {
            min-width: 0;
        }

        /* Sub-label. Sengaja TANPA strip pemisah dan tanpa nama
           kategori di sini — kategorinya sudah ada di banner, jadi
           mengulangnya di sini hanya menambah strip. */
        .paud-tip-sub {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #94A3B8;
            /* slate-400 */
        }

        .paud-tip-judul {
            font-size: 12px;
            /* text-xs */
            font-weight: 700;
            /* font-bold */
            line-height: 1.375;
            /* leading-snug */
            color: #0F172A;
            /* slate-900 */
            overflow-wrap: anywhere;
        }

        /* --- Status pill, pojok kanan atas body ---
           Warna diambil dari pasangan --paud-badge-*-bg/fg di :root
           supaya "Terbit" di sini tetap sama dengan warna status
           di donut dan kartu statistik, tidak memakai warna baru
           per status. */
        .paud-tip-pill {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            padding: 4px 10px;
            /* px-2.5 py-1 */
            font-size: 10px;
            font-weight: 600;
            /* font-semibold */
            border-radius: 9999px;
            /* rounded-full */
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .paud-tip-pill--sukses {
            background: #ECFDF5;
            /* emerald-50 */
            color: #059669;
            /* emerald-600 */
            border-color: #A7F3D0;
            /* emerald-200 */
        }

        .paud-tip-pill--diproses {
            background: #F1F5F9;
            /* slate-100 */
            color: #475569;
            /* slate-600 */
            border-color: #E2E8F0;
            /* slate-200 */
        }

        .paud-tip-pill--revisi {
            background: #FFFBEB;
            /* amber-50 */
            color: #B45309;
            /* amber-700 */
            border-color: #FDE68A;
            /* amber-200 */
        }

        .paud-tip-pill--ditolak {
            background: #FEF2F2;
            /* rose-50 */
            color: #B91C1C;
            /* rose-700 */
            border-color: #FECACA;
            /* rose-200 */
        }

        /* Rincian per kategori — hanya muncul saat hover RINGKASAN
           BULAN (scope 'bulan'). Di scope 'segmen' angka besar di
           footer sudah menyebut nilai yang sama, jadi barisnya
           disembunyikan supaya tidak mengulang dirinya sendiri. */
        .paud-tip-rincian {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 10px;
        }

        .paud-tip-baris {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 500;
            color: #334155;
            /* bodyColor */
        }

        /* Warna seri (displayColors + usePointStyle): kotak 8x8, tepi
           dibulatkan rapi supaya tidak bergerigi di layar retina. */
        .paud-tip-titik {
            width: 8px;
            height: 8px;
            border-radius: 2px;
            flex-shrink: 0;
        }

        /* Label kecil di atas daftar unit: "UNIT TERBIT" / "3 UNIT". */
        .paud-tip-unit-judul {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #94A3B8;
            margin-top: 12px;
        }

        /* Item daftar unit. TIDAK memakai bullet "•": penandanya
           digantikan garis vertikal 2px di kiri — jauh lebih halus dan
           tidak menambah karakter ke tiap baris. */
        .paud-tip-item {
            font-size: 11px;
            line-height: 1.5;
            color: #475569;
            /* slate-600 */
            border-left: 2px solid #E2E8F0;
            /* slate-200 */
            padding-left: 8px;
            margin-top: 4px;
            overflow-wrap: anywhere;
        }

        /* Baris tanpa data / "+N unit lain" — sengaja lebih redup
           supaya tidak bersaing dengan judul. */
        .paud-tip-item--redup {
            color: #94A3B8;
            border-left-color: #F1F5F9;
        }

        /* --- 3. Garis pemisah putus-putus --- */
        .paud-tip-garis {
            height: 0;
            border-top: 1px dashed #E2E8F0;
            /* slate-200 */
        }

        /* --- 4. Footer: metrik kiri, pill tren kanan ---
           items-end (bukan center) supaya pill tren duduk rata dengan
           baseline blok metrik, bukan mengambang di tengah. */
        .paud-tip-kaki {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 8px;
            /* gap-2 */
            padding-top: 2px;
            /* pt-0.5 */
        }

        /* Angka dan kata "Rekomendasi" sengaja DIAMETERAI: memakai
           align-items:center (bukan baseline) karena keduanya punya
           ukuran berbeda dan baseline membuat angka terlihat turun
           relatif terhadap kata di sebelahnya. */
        .paud-tip-angka-baris {
            display: flex;
            align-items: center;
            gap: 6px;
            /* gap-1.5 */
        }

        /* Angka sengaja TIDAK dibuat raksasa. Di kartu 310px, text-2xl
           mengambil hampir seluruh lebar baris dan membuat "1
           Rekomendasi" terlihat seperti dua elemen terpisah; text-sm
           + weight 800 menjaga angka tetap jadi titik baca pertama
           tanpa menutupi kata di sebelahnya. */
        .paud-tip-angka-nilai {
            font-size: 14px;
            /* text-sm */
            font-weight: 800;
            /* font-extrabold */
            line-height: 1;
            color: #0F172A;
            /* slate-900 */
        }

        .paud-tip-angka-satuan {
            font-size: 12px;
            /* text-xs */
            font-weight: 700;
            /* font-bold */
            line-height: 1.25;
            color: #0F172A;
            /* slate-900 */
        }

        /* "Total <kategori> bulan ini: N" — kalimat utuh, bukan
           "Total bulan ini: N", supaya operator tahu angka ini milik
           kategori apa. Angkanya ditebalkan + digelapkan supaya tidak
           tersamar di antara label dan pill tren. */
        .paud-tip-total {
            font-size: 11px;
            font-weight: 500;
            line-height: 1.25;
            /* leading-tight */
            color: #475569;
            /* slate-600 */
            margin-top: 6px;
        }

        .paud-tip-total strong {
            font-weight: 700;
            color: #1E293B;
            /* slate-800 */
        }

        /* Kalimat pembanding. "vs Jan 2026" terlalu kaku dan terlalu
           pucat untuk dibaca sambil memindai panel; kalimat utuh
           "Dibandingkan bulan Jan 2026" lebih jelas dan tetap satu
           baris di 310px. Wajib sebagai teks, bukan attribute title —
           panelnya pointer-events:none jadi title tidak akan pernah
           ter-hover. */
        .paud-tip-banding {
            font-size: 10px;
            font-weight: 500;
            line-height: 1.25;
            /* leading-tight */
            color: #94A3B8;
            /* slate-400 */
            margin-top: 4px;
        }

        /* --- Pill tren: SOFT & MINIMALIS ---
           Hijau emerald pucat, jauh lebih selaras dengan kartu putih
           daripada navy + neon. Turun/datar tetap punya warna sendiri
           supaya hijau tidak pernah berarti "penurunan". */
        .paud-tip-tren {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            padding: 4px 10px;
            /* px-2.5 py-1 */
            border-radius: 9999px;
            background: #ECFDF5;
            /* emerald-50 */
            color: #059669;
            /* emerald-600 */
            border: 1px solid #A7F3D0;
            /* emerald-200 */
            font-size: 11px;
            font-weight: 600;
            /* font-semibold */
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
            /* shadow-sm */
        }

        /* Tren Turun sengaja TIDAK memakai hijau: warna hijau untuk
           penurunan akan menyesatkan operator, jadi dikembalikan ke
           rose. Sama untuk tren datar (slate). */
        .paud-tip-tren--turun {
            background: #FEF2F2;
            /* rose-50 */
            color: #E11D48;
            /* rose-600 */
            border-color: #FECACA;
            /* rose-200 */
        }

        .paud-tip-tren--datar {
            background: #F1F5F9;
            /* slate-100 */
            color: #475569;
            /* slate-600 */
            border-color: #E2E8F0;
            /* slate-200 */
        }

        /* Batang yang sedang di-hover sedikit ditebalkan (memberi
           umpan balik visual saat pointer tinggal di satu segmen). */
        .paud-bar-group.is-hover .paud-bar {
            filter: brightness(1.06);
        }

        /* ==========================================
           BAR CHART (Statistik Penerbitan Rekomendasi)
           Batang digambar JS ke <svg id="paudChartBars"> sebagai <path>
           bertumpuk (satu batang per bulan, belasan ke bawah), bukan pakai
           library chart.

           PENTING soal viewBox: `preserveAspectRatio="none"` (dipakai
           line chart lama) TIDAK boleh dipakai di sini. Sumbu itu akan
           meregangkan batang secara tidak seragam sehingga sudut
           membulat ikut tergencet dan lebar batang antarbulan terlihat
           tidak sama. Karena itu batang ditulis dalam satuan viewBox
           yang dipetakan ke lebar kontainer lewat CSS (preserveAspectRatio
           default "xMidYMid meet"), dan sumbu X/Y tetap gambar ulang
           bersama batang supaya tidak pernah salah tempat.
           ========================================== */

/* Area hover tak terlihat satu slot bulan (selebar slot, setinggi
           area plot). Bertumpu di ATAS batang supaya kursor di ruang
           kosong maupun di batang sama-sama memunculkan tooltip
           rincian bulan itu. */
        .paud-slot-hover {
            fill: transparent;
            pointer-events: all;
        }

        /* Batang: ujung atas membulat (radius 6), bawah siku-siku rata
           dengan garis sumbu-X. Dicapai lewat helper
           pathBatang(x,y,w,h,r) yang hanya membulatkan SUDUT ATAS
           segmen teratas tumpukan. */
        .paud-bar {
            transition: opacity .15s ease;

            /* Animasi tumbuh saat chart digambar ulang.
               SANGAT MURAH karena murni CSS, tanpa JS per-frame:
                 - hanya mengubah `transform` + `opacity`, dua properti
                   yanghandled compositor (tidak memicu layout/paint);
                 - `transform-box: fill-box` + `transform-origin: bottom`
                   membuat sumbu tetap di garis dasar walau viewBox
                   ikut diskalakan (W=720 atau 480).
               `both` dipakai supaya batang tidak terlihat dulu sesaat
               sebelum animasi mulai. */
            transform-box: fill-box;
            transform-origin: center bottom;
            animation: paud-bar-tumbuh .32s cubic-bezier(.4, 0, .2, 1) both;
            animation-delay: var(--paud-delay, 0ms);
        }

        @keyframes paud-bar-tumbuh {
            0% {
                transform: scaleY(0);
                opacity: .25;
            }

            70% {
                opacity: 1;
            }

            100% {
                transform: scaleY(1);
                opacity: 1;
            }
        }

        /* Gerak dimatikan total bila pengguna memilih reduced motion di
           sistemnya. */
        @media (prefers-reduced-motion: reduce) {
            .paud-bar {
                animation: none;
                transform: none;
                will-change: auto;
            }
        }

        /* Segmen bertanggal MASA DEPAN: fill-nya sekarang SAMA dengan
           segmen biasa (kelas .paud-kategori-*, warna solid). Kelas
           ini tidak lagi mengatur fill — hanya kursor, sebagai
           penanda bahwa angka bulan ini sudah punya tanggal yang
           belum Vitoria. */
        .paud-bar--masa-depan {
            cursor: help;
        }

        /* Batang diredupkan saat kursor hovering grup bulan lain, supaya
           mudah membandingkan tinggi antarbulan tanpa mouseover. */
        .paud-bar-group:hover .paud-bar {
            opacity: 1;
        }

        /* Garis bantu: hanya horizontal, putus-putus tipis, abu-abu
           sangat terang. Garis tegak sengaja TIDAK ada supaya chart
           tetap ringan dilihat. */
        /* Garis bantu & sumbu munculduluan (fade saja, tanpa gerak)
           supaya batang tidak "melompat" di atas garis yang belum ada.
           Murni opacity → compositor, murah. */
        .paud-grid-line,
        .paud-axis-line {
            animation: paud-axis-muncul .4s ease-out both;
        }

        @keyframes paud-axis-muncul {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            .paud-grid-line,
            .paud-axis-line {
                animation: none;
            }
        }

        .paud-grid-line {
            stroke: #eef2f7;
            /* slate-100 — lebih terang dari slate-200 supaya tidak
               bersaing dengan batang */
            stroke-width: 1;
            stroke-dasharray: 3 4;
        }

        .paud-axis-line {
            stroke: #e2e8f0;
            /* slate-200 — garis dasar sumbu-X dibuat solid, sangat tipis */
            stroke-width: 1;
        }

        /* Bulan tanpa nilai TIDAK digambar sebagai batang kosong lagi:
           tumpukan yang benar-benar nol langsung memicu pesan tengah
           "Belum ada rekomendasi pada periode ini" (renderBarChartKosong),
           sehingga tidak ada outline putus-putus yang terlihat seperti
           area rusak. */

        /* ==========================================
           SEGMENTED CONTROL (Register Surat Terbaru)
           Gaya pil: container rounded-full bg abu-abu sangat muda, tab
           aktif berupa pil putih ber-shadow halus, tab nonaktif transparan
           berteks abu-abu.

           State aktif/istirahat didefinisikan di sini, bukan
           ditumpuk utility Tailwind panjang di markup. Alasannya: tabel ini
           me-render ulang <tbody> lewat JS setiap data masuk, sementara
           ketiga tombol tab TIDAK ikut me-render ulang. Kalau kelas
           active tetap ditulis manual di HTML, tombol yang tadinya aktif
           akan terlihat salah sampai pengguna sempat klik tab lain.

           Dipakai juga lewat toggleSuratTab() di skrip data layer, jadi
           sumber kebenaran styling tetap satu file ini.
           ========================================== */
        .paud-segmented {
            display: inline-flex;
            align-items: center;
            gap: 0.125rem;
            padding: 0.25rem;
            background: #f1f5f9;
            /* slate-100 — abu-abu sangat muda */
            border-radius: 9999px;
            /* rounded-full */
        }

        .paud-segmented-tab {
            padding: 0.3125rem 0.875rem;
            border-radius: 9999px;
            /* rounded-full */
            font-size: 11px;
            line-height: 1.25rem;
            font-weight: 500;
            color: #6b7280;
            /* gray-500 — teks abu-abu, latar transparan */
            background: transparent;
            border: none;
            /* Transisi seragam supaya perpindahan state terasa halus,
               bukan hanya warnanya yang berubah mendadak.
               Setara `transition-all duration-300 ease-in-out`. */
            transition: all .3s cubic-bezier(.4, 0, .2, 1);
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
        }

        /* Tab nonaktif tetap transparan; hover hanya sedikit
           mengubah warna teks supaya tidak bersaing dengan gaya tab aktif. */
        .paud-segmented-tab:hover:not(.is-active) {
            color: #374151;
            /* gray-700 */
        }

        .paud-segmented-tab:focus-visible {
            outline: 2px solid #2563eb;
            /* brand-600 */
            outline-offset: 2px;
        }

        /* Tab aktif: pil putih dengan bayangan sangat halus (kartu kecil
           di atas bidang abu-abu) + teks gelap. Kontrasnya tetap jelas
           tanpa perlu warna biru pekat. */
        .paud-segmented-tab.is-active {
            color: #1f2937;
            /* gray-800 */
            background: #fff;
            box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
            /* shadow-sm */
        }