/*
 * Portal Peserta + mode Pendaftaran + drive (Okt 2026).
 * Dimuat lewat filament/pendaftaran/aset (HEAD_END) di panel `peserta` & `pendaftaran`.
 * Warna aksen SELALU rgb(var(--primary-*)) — teal di portal, sky di mode admin.
 * Kelas: pp-* (portal/umum), pa-* (dasbor admin), gd-* (drive).
 */

/* ===================== Umum ===================== */
.pp-kecil { font-size: .8125rem; color: rgb(var(--gray-500)); line-height: 1.45; }
.dark .pp-kecil { color: rgb(var(--gray-400)); }
.pp-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--primary-600)); }
.dark .pp-eyebrow { color: rgb(var(--primary-400)); }
.pp-ikon { width: 1.25rem; height: 1.25rem; color: rgb(var(--primary-600)); flex: none; }
.pp-ikon--bahaya { color: rgb(var(--danger-600)); }
.pp-ikon-kecil { width: .8rem; height: .8rem; }
.pp-sub { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--gray-600)); margin: 0 0 .5rem; }
.dark .pp-sub { color: rgb(var(--gray-300)); }
.pp-pre { white-space: pre-line; }
.pp-tautan { color: rgb(var(--primary-600)); font-size: .85rem; font-weight: 600; }
.pp-salin { cursor: copy; border-bottom: 1px dashed currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pp-kartu {
    background: #fff;
    border: 1px solid rgb(var(--gray-200));
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
}
.dark .pp-kartu { background: rgb(var(--gray-900)); border-color: rgb(var(--gray-800)); }

.pp-dua-kolom { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .pp-dua-kolom { grid-template-columns: 1fr 1fr; align-items: start; } }

.pp-form { display: grid; gap: 1rem; }

.pp-peringatan {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: 1rem 1.25rem; border-radius: .9rem;
    background: rgb(var(--warning-50)); border: 1px solid rgb(var(--warning-200)); color: rgb(var(--warning-800));
}
.pp-peringatan__ikon { width: 1.5rem; height: 1.5rem; flex: none; }
.dark .pp-peringatan { background: rgba(var(--warning-500), .12); border-color: rgba(var(--warning-500), .3); color: rgb(var(--warning-200)); }

.pp-data { display: grid; gap: .1rem; margin: 0; }
.pp-data__baris { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid rgb(var(--gray-100)); }
.dark .pp-data__baris { border-color: rgb(var(--gray-800)); }
.pp-data dt { font-size: .82rem; color: rgb(var(--gray-500)); }
.pp-data dd { margin: 0; font-weight: 500; word-break: break-word; }

/* Meter kuota */
.pp-meter { height: .5rem; border-radius: 999px; background: rgb(var(--gray-200)); overflow: hidden; }
.dark .pp-meter { background: rgb(var(--gray-700)); }
.pp-meter__isi { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--primary-500)), rgb(var(--primary-600))); transition: width .4s ease; }
.pp-meter__isi--penuh { background: linear-gradient(90deg, rgb(var(--warning-500)), rgb(var(--danger-600))); }

/* ===================== Beranda peserta ===================== */
.pp-ringkas { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pp-ringkas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.pp-kuota { display: grid; gap: .65rem; align-content: start; }
.pp-kuota__kepala { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.pp-kuota .fi-btn { justify-self: start; }
.pp-tindakan { display: grid; gap: .6rem; align-content: start; }
.pp-tindakan__butir { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border-radius: .7rem; background: rgb(var(--danger-50)); }
.dark .pp-tindakan__butir { background: rgba(var(--danger-500), .12); }

.pp-daftar { display: grid; gap: 1.1rem; }
.pp-daftar__kepala { display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: space-between; align-items: flex-start; }
.pp-daftar__judul { font-family: Montserrat, Inter, sans-serif; font-weight: 800; font-size: 1.2rem; margin: .15rem 0 .1rem; line-height: 1.25; }
.pp-daftar__lencana { display: flex; flex-wrap: wrap; gap: .4rem; }
.pp-keterangan { margin: 0; padding: .75rem 1rem; border-radius: .75rem; background: rgb(var(--primary-50)); color: rgb(var(--primary-900)); font-size: .9rem; }
.dark .pp-keterangan { background: rgba(var(--primary-500), .12); color: rgb(var(--primary-100)); }
.pp-daftar__isi { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pp-daftar__isi { grid-template-columns: 1.3fr 1fr; } }
.pp-daftar__samping { display: grid; gap: .35rem; align-content: start; }
.pp-daftar__samping .pp-sub:not(:first-child) { margin-top: .75rem; }
.pp-daftar__aksi { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .25rem; border-top: 1px solid rgb(var(--gray-100)); padding-top: 1rem; }
.dark .pp-daftar__aksi { border-color: rgb(var(--gray-800)); }

/* Stepper */
.pp-langkah { list-style: none; margin: 0; padding: 0 0 .25rem; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pp-langkah__butir { flex: 1 0 6.5rem; min-width: 6.5rem; position: relative; display: grid; justify-items: center; gap: .4rem; text-align: center; scroll-snap-align: start; padding: 0 .25rem; }
.pp-langkah__butir::before { content: ""; position: absolute; top: .7rem; left: calc(-50% + .8rem); right: calc(50% + .8rem); height: 2px; background: rgb(var(--gray-200)); }
.dark .pp-langkah__butir::before { background: rgb(var(--gray-700)); }
.pp-langkah__butir:first-child::before { display: none; }
.pp-langkah__butir.is-selesai::before, .pp-langkah__butir.is-aktif::before { background: rgb(var(--primary-500)); }
.pp-langkah__titik { width: 1.45rem; height: 1.45rem; border-radius: 999px; display: grid; place-items: center; border: 2px solid rgb(var(--gray-300)); background: #fff; color: #fff; position: relative; z-index: 1; }
.dark .pp-langkah__titik { background: rgb(var(--gray-900)); border-color: rgb(var(--gray-600)); }
.pp-langkah__butir.is-selesai .pp-langkah__titik { background: rgb(var(--primary-600)); border-color: rgb(var(--primary-600)); }
.pp-langkah__butir.is-aktif .pp-langkah__titik { border-color: rgb(var(--primary-600)); box-shadow: 0 0 0 4px rgba(var(--primary-500), .2); }
.pp-langkah__butir.is-aktif .pp-langkah__titik::after { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: rgb(var(--primary-600)); }
.pp-langkah__butir.is-masalah .pp-langkah__titik { border-color: rgb(var(--danger-600)); box-shadow: 0 0 0 4px rgba(var(--danger-500), .2); }
.pp-langkah__butir.is-masalah .pp-langkah__titik::after { background: rgb(var(--danger-600)); }
.pp-langkah__label { font-size: .72rem; line-height: 1.25; color: rgb(var(--gray-500)); }
.pp-langkah__butir.is-aktif .pp-langkah__label { color: rgb(var(--gray-950)); font-weight: 700; }
.dark .pp-langkah__butir.is-aktif .pp-langkah__label { color: #fff; }

.pp-riwayat { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pp-riwayat li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; font-size: .875rem; }
.pp-riwayat time { color: rgb(var(--gray-500)); font-size: .78rem; padding-top: .1rem; }
@media (max-width: 640px) { .pp-riwayat li { grid-template-columns: 1fr; gap: 0; } }

.pp-kosong { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 2.5rem 1.25rem; }
.pp-kosong h2 { font-weight: 700; font-size: 1.1rem; margin: 0; }
.pp-kosong__ikon { width: 3rem; height: 3rem; color: rgb(var(--primary-500)); }

/* Sertifikat */
.pp-hasil { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pp-hasil__butir { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .8rem 1rem; border: 1px solid rgb(var(--gray-200)); border-radius: .85rem; }
.dark .pp-hasil__butir { border-color: rgb(var(--gray-800)); }
.pp-hasil__ikon { width: 2.5rem; height: 2.5rem; border-radius: .7rem; display: grid; place-items: center; background: rgb(var(--success-50)); }
.pp-hasil__ikon .pp-ikon { color: rgb(var(--success-600)); }
.pp-hasil__teks { display: grid; gap: .1rem; min-width: 0; }
.pp-hasil__teks strong { overflow-wrap: anywhere; }
.pp-hasil__aksi { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .pp-hasil__butir { grid-template-columns: auto 1fr; } .pp-hasil__aksi { grid-column: 1 / -1; justify-content: flex-start; } }

/* ===================== Dasbor admin ===================== */
.pa-stat { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .pa-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pa-stat__butir { display: grid; gap: .25rem; }
.pa-stat__angka { font-family: Montserrat, Inter, sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1; color: rgb(var(--primary-600)); }
.pa-baris { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .25rem; border-bottom: 1px solid rgb(var(--gray-100)); }
.pa-baris:hover { background: rgb(var(--gray-50)); }
.dark .pa-baris { border-color: rgb(var(--gray-800)); }
.dark .pa-baris:hover { background: rgb(var(--gray-800)); }
.pa-status { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
.pa-status__butir { display: inline-flex; gap: .4rem; align-items: center; }
.pa-ringkas-peserta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ===================== Drive ===================== */
.gd { position: relative; display: grid; gap: .9rem; min-height: 60vh; }
.gd [x-cloak] { display: none !important; }
.gd-ikon { width: 1.1rem; height: 1.1rem; flex: none; }
.gd-sembunyi { display: none; }
.gd-putar { transform: rotate(180deg); }

.gd-bilah { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.gd-bilah__kanan { display: flex; gap: .5rem; align-items: center; margin-left: auto; flex-wrap: wrap; }

.gd-tombol {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: 0 .95rem;
    border-radius: 999px; border: 1px solid rgb(var(--gray-300)); background: #fff; color: rgb(var(--gray-700));
    font-weight: 600; font-size: .875rem; cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s;
}
.gd-tombol:hover { background: rgb(var(--gray-50)); }
.gd-tombol.is-aktif { background: rgb(var(--primary-50)); border-color: rgb(var(--primary-300)); color: rgb(var(--primary-700)); }
.gd-tombol:disabled { opacity: .5; cursor: not-allowed; }
.dark .gd-tombol { background: rgb(var(--gray-800)); border-color: rgb(var(--gray-700)); color: rgb(var(--gray-200)); }
.dark .gd-tombol:hover { background: rgb(var(--gray-700)); }
.gd-tombol--utama { background: linear-gradient(135deg, rgb(var(--primary-500)), rgb(var(--primary-600))); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -8px rgba(var(--primary-600), .8); }
.gd-tombol--utama:hover { background: linear-gradient(135deg, rgb(var(--primary-600)), rgb(var(--primary-700))); }
.dark .gd-tombol--utama { background: linear-gradient(135deg, rgb(var(--primary-500)), rgb(var(--primary-600))); color: #fff; border-color: transparent; }
.gd-tombol--bahaya { color: rgb(var(--danger-600)); border-color: rgb(var(--danger-200)); }
.gd-tombol--bahaya:hover { background: rgb(var(--danger-50)); }
.dark .gd-tombol--bahaya { color: rgb(var(--danger-400)); border-color: rgba(var(--danger-500), .4); }
.gd-baru { position: relative; }
.gd-baru > .gd-tombol--utama { min-height: 2.75rem; padding: 0 1.2rem 0 1rem; border-radius: 1rem; }

.gd-ikon-tombol { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.gd-ikon-tombol:hover { background: rgba(var(--gray-500), .12); }

.gd-cari { flex: 1 1 16rem; display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: rgb(var(--gray-100)); color: rgb(var(--gray-500)); }
.gd-cari:focus-within { background: #fff; box-shadow: 0 0 0 2px rgb(var(--primary-500)); }
.gd-cari input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; box-shadow: none; font-size: 1rem; color: rgb(var(--gray-900)); padding: 0; }
.dark .gd-cari { background: rgb(var(--gray-800)); }
.dark .gd-cari:focus-within { background: rgb(var(--gray-900)); }
.dark .gd-cari input { color: #fff; }

.gd-urut select { min-height: 2.5rem; border-radius: 999px; border: 1px solid rgb(var(--gray-300)); background-color: #fff; font-size: .85rem; padding: 0 2rem 0 .9rem; }
.dark .gd-urut select { background-color: rgb(var(--gray-800)); border-color: rgb(var(--gray-700)); color: rgb(var(--gray-200)); }
.gd-segmen { display: inline-flex; border: 1px solid rgb(var(--gray-300)); border-radius: 999px; overflow: hidden; }
.gd-segmen button { width: 2.6rem; height: 2.4rem; display: grid; place-items: center; background: #fff; border: 0; color: rgb(var(--gray-500)); cursor: pointer; }
.gd-segmen button + button { border-left: 1px solid rgb(var(--gray-300)); }
.gd-segmen button.is-aktif { background: rgb(var(--primary-50)); color: rgb(var(--primary-700)); }
.dark .gd-segmen, .dark .gd-segmen button + button { border-color: rgb(var(--gray-700)); }
.dark .gd-segmen button { background: rgb(var(--gray-800)); }
.dark .gd-segmen button.is-aktif { background: rgba(var(--primary-500), .2); color: rgb(var(--primary-300)); }

.gd-menu {
    position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; min-width: 15rem; padding: .4rem;
    background: #fff; border: 1px solid rgb(var(--gray-200)); border-radius: .9rem;
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .35);
}
.dark .gd-menu { background: rgb(var(--gray-900)); border-color: rgb(var(--gray-700)); }
.gd-menu button { display: flex; width: 100%; align-items: center; gap: .65rem; padding: .6rem .75rem; border: 0; background: transparent; border-radius: .6rem; font-size: .9rem; text-align: left; cursor: pointer; color: inherit; min-height: 2.6rem; }
.gd-menu button:hover, .gd-menu button:focus-visible { background: rgb(var(--gray-100)); outline: none; }
.dark .gd-menu button:hover { background: rgb(var(--gray-800)); }
.gd-menu button.is-bahaya { color: rgb(var(--danger-600)); }
.gd-menu__grup { border-top: 1px solid rgb(var(--gray-200)); margin-top: .3rem; padding-top: .3rem; }
.dark .gd-menu__grup { border-color: rgb(var(--gray-700)); }
.gd-menu--konteks { position: fixed; top: 0; left: 0; }

.gd-kuota { display: grid; gap: .35rem; max-width: 40rem; }

.gd-remah { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; font-size: 1.05rem; }
.gd-remah__butir { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: .6rem; border: 0; background: transparent; color: rgb(var(--gray-600)); font-weight: 600; cursor: pointer; }
.gd-remah__butir:hover { background: rgb(var(--gray-100)); }
.dark .gd-remah__butir { color: rgb(var(--gray-300)); }
.dark .gd-remah__butir:hover { background: rgb(var(--gray-800)); }
.gd-remah__butir.is-kini { color: rgb(var(--gray-950)); cursor: default; font-family: Montserrat, Inter, sans-serif; font-weight: 800; }
.dark .gd-remah__butir.is-kini { color: #fff; }
.gd-remah__butir.is-kini:hover { background: transparent; }
.gd-remah__butir.is-sasaran { background: rgba(var(--primary-500), .15); box-shadow: inset 0 0 0 2px rgb(var(--primary-500)); }
.gd-remah__pisah { color: rgb(var(--gray-400)); width: .9rem; height: .9rem; }

.gd-pita { display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem; border-radius: .85rem; background: rgb(var(--primary-50)); color: rgb(var(--primary-900)); font-size: .875rem; }
.dark .gd-pita { background: rgba(var(--primary-500), .12); color: rgb(var(--primary-100)); }
.gd-pita--kunci { background: rgb(var(--warning-50)); color: rgb(var(--warning-900)); }
.dark .gd-pita--kunci { background: rgba(var(--warning-500), .14); color: rgb(var(--warning-100)); }
.gd-pita--sampah { background: rgb(var(--gray-100)); color: rgb(var(--gray-700)); }
.dark .gd-pita--sampah { background: rgb(var(--gray-800)); color: rgb(var(--gray-200)); }
.gd-pita--sampah .gd-tombol { margin-left: auto; }
.gd-pita__tutup { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; padding: .25rem; border-radius: .5rem; }

.gd-pilihan { position: sticky; top: 4.5rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .45rem .75rem; border-radius: 999px; background: rgb(var(--primary-50)); border: 1px solid rgb(var(--primary-200)); }
.dark .gd-pilihan { background: rgb(var(--gray-800)); border-color: rgb(var(--gray-700)); }
.gd-pilihan__aksi { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.gd-pilihan .gd-tombol { min-height: 2.25rem; }

.gd-isi { position: relative; transition: opacity .2s; }
.gd-isi.is-memuat { opacity: .55; pointer-events: none; }
.gd-grid { list-style: none; margin: 0; padding: 0; }
.gd-isi--grid .gd-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); align-items: start; }
.gd-kepala-daftar { display: none; }

.gd-item {
    position: relative; border-radius: 1rem; background: rgb(var(--gray-50)); border: 1px solid transparent;
    cursor: default; user-select: none; outline: none; transition: background .12s, border-color .12s, box-shadow .12s;
}
.dark .gd-item { background: rgb(var(--gray-800)); }
.gd-item:hover { background: rgb(var(--gray-100)); }
.dark .gd-item:hover { background: rgb(var(--gray-700)); }
.gd-item:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-500)); }
.gd-item.is-pilih { background: rgba(var(--primary-500), .14); border-color: rgba(var(--primary-500), .5); }
.gd-item.is-sasaran { background: rgba(var(--primary-500), .22); border-color: rgb(var(--primary-500)); box-shadow: 0 0 0 3px rgba(var(--primary-500), .25); }

.gd-isi--grid .gd-item { display: grid; grid-template-rows: auto 1fr; padding: .5rem .5rem .65rem; }
.gd-item__muka { position: relative; border-radius: .7rem; background: #fff; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.dark .gd-item__muka { background: rgb(var(--gray-900)); }
.gd-item--folder .gd-item__muka { aspect-ratio: auto; height: 3.2rem; background: transparent; place-items: center start; padding-left: .35rem; }
.gd-item__thumb { width: 100%; height: 100%; object-fit: cover; }
.gd-item__ikon { width: 3rem; height: 3rem; }
.gd-item--folder .gd-item__ikon { width: 2.3rem; height: 2.3rem; }
.gd-item__lencana { position: absolute; left: 2rem; top: .55rem; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 999px; background: rgb(var(--primary-600)); color: #fff; }
.gd-item__lencana .gd-ikon { width: .75rem; height: .75rem; }
.gd-item__teks { display: grid; gap: .2rem; padding: .5rem .35rem 0; min-width: 0; }
.gd-item--folder .gd-item__teks { padding-top: 0; }
.gd-item__nama { font-size: .875rem; font-weight: 600; display: flex; gap: .35rem; align-items: center; min-width: 0; }
.gd-isi--grid .gd-item__nama { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.gd-isi--grid .gd-item__ikon-kecil { display: none; }
.gd-item__meta { display: flex; gap: .6rem; font-size: .72rem; }
.gd-isi--grid .gd-item--folder .gd-item__meta { display: none; }
.gd-item__catatan { font-size: .72rem; }
.gd-item__menu { position: absolute; top: .4rem; right: .4rem; width: 2rem; height: 2rem; border-radius: 999px; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .85); color: rgb(var(--gray-700)); cursor: pointer; opacity: 0; transition: opacity .12s; }
.dark .gd-item__menu { background: rgba(15, 23, 42, .75); color: rgb(var(--gray-200)); }
.gd-item:hover .gd-item__menu, .gd-item:focus-within .gd-item__menu, .gd-item.is-pilih .gd-item__menu { opacity: 1; }
@media (hover: none) { .gd-item__menu { opacity: 1; } }
.gd-item--folder .gd-item__menu { top: .55rem; }
.gd-item__ikon-cadangan { width: 3rem; height: 3rem; border-radius: .6rem; background: rgb(var(--gray-200)); }

.gd-tanda { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; justify-self: start; }
.gd-tanda .gd-ikon { width: .85rem; height: .85rem; }
.gd-tanda--ok { background: rgb(var(--success-50)); color: rgb(var(--success-700)); }
.gd-tanda--perbaiki { background: rgb(var(--danger-50)); color: rgb(var(--danger-700)); }
.dark .gd-tanda--ok { background: rgba(var(--success-500), .15); color: rgb(var(--success-300)); }
.dark .gd-tanda--perbaiki { background: rgba(var(--danger-500), .15); color: rgb(var(--danger-300)); }

/* Warna ikon per jenis (mirip Drive) */
.gd-warna-folder { color: rgb(var(--primary-500)); }
.gd-warna-pdf { color: #e5484d; }
.gd-warna-gambar { color: #e5a00d; }
.gd-warna-video { color: #8e4ec6; }
.gd-warna-audio { color: #d6409f; }
.gd-warna-dokumen { color: #3e63dd; }
.gd-warna-arsip { color: #8d6e63; }
.gd-warna-tautan { color: #0091ff; }
.gd-warna-lain { color: rgb(var(--gray-500)); }
.gd-warna-ok { color: rgb(var(--success-600)); }

/* Tampilan daftar */
.gd-isi--daftar .gd-kepala-daftar { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 6rem 2.5rem; gap: 1rem; padding: 0 1rem .4rem 3.6rem; font-size: .75rem; font-weight: 700; color: rgb(var(--gray-500)); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgb(var(--gray-200)); }
.dark .gd-isi--daftar .gd-kepala-daftar { border-color: rgb(var(--gray-700)); }
.gd-isi--daftar .gd-grid { display: grid; gap: 0; }
.gd-isi--daftar .gd-item { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 2.5rem; align-items: center; gap: .6rem; padding: .35rem .5rem .35rem .75rem; border-radius: .6rem; background: transparent; min-height: 3.1rem; border-bottom: 1px solid rgb(var(--gray-100)); }
.dark .gd-isi--daftar .gd-item { border-color: rgb(var(--gray-800)); }
.gd-isi--daftar .gd-item__muka { aspect-ratio: auto; width: 2.2rem; height: 2.2rem; background: transparent; padding: 0; place-items: center; border-radius: .4rem; }
.gd-isi--daftar .gd-item__ikon, .gd-isi--daftar .gd-item--folder .gd-item__ikon { width: 1.6rem; height: 1.6rem; }
.gd-isi--daftar .gd-item__lencana { left: 1.2rem; top: -.1rem; }
.gd-isi--daftar .gd-item__teks { padding: 0; grid-template-columns: minmax(0, 1fr) 9rem 6rem; align-items: center; column-gap: 1rem; }
.gd-isi--daftar .gd-item__nama { grid-column: 1; }
.gd-isi--daftar .gd-item__ikon-kecil { display: none; }
.gd-isi--daftar .gd-item__meta { display: contents; }
.gd-isi--daftar .gd-item__meta span:first-child { grid-column: 2; grid-row: 1; }
.gd-isi--daftar .gd-item__meta span:last-child { grid-column: 3; grid-row: 1; }
.gd-isi--daftar .gd-tanda, .gd-isi--daftar .gd-item__catatan { grid-column: 1; }
.gd-isi--daftar .gd-item__menu { position: static; opacity: 1; background: transparent; }
@media (max-width: 640px) {
    .gd-isi--daftar .gd-kepala-daftar { display: none; }
    .gd-isi--daftar .gd-item__teks { grid-template-columns: 1fr; }
    .gd-isi--daftar .gd-item__meta { display: flex; }
}

/* Kosong & lapisan seret */
.gd-kosong { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1rem; text-align: center; color: rgb(var(--gray-600)); }
.dark .gd-kosong { color: rgb(var(--gray-300)); }
.gd-kosong__ikon { width: 3.5rem; height: 3.5rem; color: rgb(var(--primary-400)); }
.gd-kosong p { margin: 0; }
.gd-lapis-seret { position: absolute; inset: -.5rem; z-index: 40; border-radius: 1.25rem; border: 2px dashed rgb(var(--primary-500)); background: rgba(var(--primary-500), .1); backdrop-filter: blur(2px); display: grid; place-items: center; pointer-events: none; text-align: center; color: rgb(var(--primary-800)); }
.dark .gd-lapis-seret { color: rgb(var(--primary-200)); }

/* Baki unggahan */
.gd-baki { position: fixed; z-index: 50; right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem)); border-radius: 1rem; overflow: hidden; background: #fff; border: 1px solid rgb(var(--gray-200)); box-shadow: 0 24px 50px -20px rgba(15, 23, 42, .45); }
.dark .gd-baki { background: rgb(var(--gray-900)); border-color: rgb(var(--gray-700)); }
.gd-baki__kepala { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .6rem .6rem 1rem; background: rgb(var(--gray-900)); color: #fff; font-size: .9rem; }
.dark .gd-baki__kepala { background: rgb(var(--gray-800)); }
.gd-baki__daftar { list-style: none; margin: 0; padding: .3rem 0; max-height: 18rem; overflow-y: auto; }
.gd-baki__butir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; padding: .55rem 1rem; }
.gd-baki__nama { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-baki__info { grid-column: 1; }
.gd-baki__aksi { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .25rem; }
.gd-baki__aksi button { border: 0; background: transparent; cursor: pointer; color: rgb(var(--gray-500)); padding: .25rem; border-radius: .5rem; }
.gd-baki__bar { grid-column: 1; height: .25rem; border-radius: 999px; background: rgb(var(--gray-200)); overflow: hidden; }
.gd-baki__bar span { display: block; height: 100%; background: rgb(var(--primary-500)); transition: width .25s; }
.gd-baki__butir.is-gagal .gd-baki__info { color: rgb(var(--danger-600)); }
.gd-baki__butir.is-gagal .gd-baki__bar span { background: rgb(var(--danger-500)); }
.gd-baki__butir.is-selesai .gd-baki__bar { display: none; }

/* Dialog */
.gd-dialog, .gd-pratinjau { border: 0; padding: 0; border-radius: 1.1rem; box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .5); color: inherit; }
.gd-dialog { width: min(30rem, calc(100vw - 2rem)); background: #fff; }
.dark .gd-dialog { background: rgb(var(--gray-900)); color: rgb(var(--gray-100)); }
.gd-dialog::backdrop, .gd-pratinjau::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.gd-dialog__isi { display: grid; gap: 1rem; padding: 1.4rem; }
.gd-dialog__judul { font-family: Montserrat, Inter, sans-serif; font-weight: 800; font-size: 1.1rem; margin: 0; }
.gd-dialog__isian { display: grid; gap: .8rem; }
.gd-dialog__isian label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; }
.gd-dialog__isian input[type="text"], .gd-dialog__isian input[type="url"], .gd-dialog__isian textarea {
    width: 100%; border-radius: .7rem; border: 1px solid rgb(var(--gray-300)); padding: .65rem .8rem; font-size: 1rem; font-weight: 400; background: #fff; color: inherit;
}
.dark .gd-dialog__isian input, .dark .gd-dialog__isian textarea { background: rgb(var(--gray-800)); border-color: rgb(var(--gray-700)); }
.gd-dialog__isian input:focus, .gd-dialog__isian textarea:focus { outline: none; border-color: rgb(var(--primary-500)); box-shadow: 0 0 0 3px rgba(var(--primary-500), .2); }
.gd-centang { display: flex !important; grid-auto-flow: column; align-items: center; gap: .5rem !important; font-weight: 500 !important; }
.gd-dialog__aksi { display: flex; justify-content: flex-end; gap: .5rem; }

.gd-pohon { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; display: grid; gap: .1rem; }
.gd-pohon button { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .5rem .6rem .5rem calc(.6rem + var(--dalam, 0) * 1.1rem); border: 0; border-radius: .55rem; background: transparent; cursor: pointer; color: inherit; font-size: .9rem; min-height: 2.5rem; }
.gd-pohon button:hover { background: rgb(var(--gray-100)); }
.dark .gd-pohon button:hover { background: rgb(var(--gray-800)); }
.gd-pohon button.is-pilih { background: rgba(var(--primary-500), .15); color: rgb(var(--primary-700)); font-weight: 600; }

.gd-pratinjau { width: min(72rem, calc(100vw - 1.5rem)); height: min(90vh, 60rem); background: rgb(15, 23, 42); color: #fff; }
.gd-pratinjau__isi { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.gd-pratinjau__kepala { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .6rem .5rem 1.1rem; background: rgba(255, 255, 255, .05); }
.gd-pratinjau__kepala strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-pratinjau__kepala > div { display: flex; gap: .15rem; flex: none; }
.gd-pratinjau__kepala .gd-ikon-tombol { color: #fff; }
.gd-pratinjau__badan { min-height: 0; display: grid; place-items: center; padding: .75rem; overflow: auto; }
.gd-pratinjau__badan img, .gd-pratinjau__badan video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .5rem; }
.gd-pratinjau__badan iframe { width: 100%; height: 100%; border: 0; border-radius: .5rem; background: #fff; }
.gd-pratinjau .gd-kosong { color: #e2e8f0; }

.gd-katalog { font-size: .85rem; padding: .75rem 1rem; border: 1px dashed rgb(var(--gray-300)); border-radius: .85rem; }
.gd-katalog summary { cursor: pointer; font-weight: 600; }
.gd-katalog ul { columns: 2 16rem; margin: .6rem 0 0; padding-left: 1.1rem; }

/* HP */
@media (max-width: 640px) {
    .gd-bilah__kanan { width: 100%; margin-left: 0; }
    .gd-bilah__kanan .gd-tombol span { display: none; }
    .gd-isi--grid .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .gd-pilihan { top: 4rem; border-radius: 1rem; }
    .gd-pilihan .gd-tombol { padding: 0 .7rem; }
    .gd-baki { right: .5rem; left: .5rem; bottom: .5rem; width: auto; }
    .gd-pratinjau { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gd *, .pp-meter__isi { transition: none !important; animation: none !important; }
}

/* Unggah berkas hasil (admin) */
.pa-unggah-hasil { display: grid; gap: 1rem; }
.pa-unggah-hasil__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pa-unggah-hasil__butir { display: grid; gap: .4rem; padding: .75rem .9rem; border: 1px solid rgb(var(--gray-200)); border-radius: .8rem; }
.dark .pa-unggah-hasil__butir { border-color: rgb(var(--gray-700)); }
.pa-unggah-hasil__butir.is-selesai { border-color: rgb(var(--success-300)); background: rgb(var(--success-50)); }
.dark .pa-unggah-hasil__butir.is-selesai { background: rgba(var(--success-500), .1); }
.pa-unggah-hasil__butir.is-gagal { border-color: rgb(var(--danger-300)); }
.pa-unggah-hasil__butir.is-gagal .pp-kecil:last-child { color: rgb(var(--danger-600)); }
.pa-unggah-hasil__baris { display: flex; justify-content: space-between; gap: 1rem; min-width: 0; }
.pa-unggah-hasil__baris strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-unggah-hasil__isian { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; gap: .5rem; }
.pa-unggah-hasil__isian select, .pa-unggah-hasil__isian input { border-radius: .6rem; border: 1px solid rgb(var(--gray-300)); padding: .45rem .6rem; font-size: .9rem; background-color: #fff; min-width: 0; }
.dark .pa-unggah-hasil__isian select, .dark .pa-unggah-hasil__isian input { background-color: rgb(var(--gray-800)); border-color: rgb(var(--gray-700)); color: #fff; }
@media (max-width: 640px) { .pa-unggah-hasil__isian { grid-template-columns: 1fr auto; } .pa-unggah-hasil__isian select { grid-column: 1 / -1; } }

/* ===================== Login Portal Peserta: selalu pas satu layar =====================
   Hanya .fi-panel-peserta (login staff tidak disentuh). Dulu 912 px di laptop 1366×768:
   my-16 + py-12 Filament + catatan + dua tautan + strip logo klien. Layar sangat pendek
   tetap boleh bergulir (tombol Masuk tidak pernah terpotong). */
.fi-panel-peserta .fi-simple-layout { min-height: 100dvh; }
.fi-panel-peserta .fi-simple-main-ctn { padding-block: 12px; }
.fi-panel-peserta .fi-simple-main { margin-block: 0 !important; padding-top: 1.6rem !important; padding-bottom: 1.4rem !important; }
.fi-panel-peserta .fi-simple-main::before { margin-bottom: .9rem; }
.fi-panel-peserta .fi-simple-page > section { row-gap: 1.1rem; }
.fi-panel-peserta .fi-simple-header .fi-logo { margin-bottom: .6rem; }
.fi-panel-peserta .fi-simple-header-subheading { margin-top: .3rem; }
.fi-panel-peserta .fi-simple-page .fi-form,
.fi-panel-peserta .fi-simple-page .fi-fo-component-ctn { row-gap: 1rem; }
.fi-panel-peserta .gl-bawah { gap: .6rem; }
.fi-panel-peserta .gl-catatan { padding: .5rem .75rem; font-size: .78rem; }
.pp-login-tautan { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.25rem; }
.pp-login-tautan .gl-kembali { font-size: .82rem; }

/* Laptop 768 & layar pendek: strip logo klien disembunyikan, kartu lebih rapat. */
@media (max-height: 760px) {
    .fi-panel-peserta .gl-klien { display: none; }
    body.fi-panel-peserta:has(.gl-klien) .fi-simple-main-ctn { padding-bottom: 12px; }
    .fi-panel-peserta .fi-simple-main { padding-top: 1.2rem !important; padding-bottom: 1.1rem !important; }
    .fi-panel-peserta .fi-simple-main::before { margin-bottom: .6rem; }
    .fi-panel-peserta .fi-simple-header .fi-logo { margin-bottom: .35rem; }
    .fi-panel-peserta .fi-simple-header-heading { font-size: 1.3rem; }
    .fi-panel-peserta .fi-simple-page > section { row-gap: .8rem; }
    .fi-panel-peserta .fi-simple-page .fi-form,
    .fi-panel-peserta .fi-simple-page .fi-fo-component-ctn { row-gap: .8rem; }
}
@media (max-height: 640px) {
    .fi-panel-peserta .fi-simple-header-subheading,
    .fi-panel-peserta .gl-catatan { display: none; }
}

/* Foto profil peserta (halaman Profil) */
.pp-foto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pp-foto__gambar { width: 112px; height: 112px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 4px rgba(var(--primary-500), .25); }
.pp-foto__form { display: grid; gap: .75rem; max-width: 28rem; }
.pp-foto__aksi { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) { .pp-foto { grid-template-columns: 1fr; justify-items: center; } .pp-foto__form { width: 100%; } }

/* Info login massal & isian banyak akun (mode Pendaftaran) */
.pa-massal { display: grid; gap: .85rem; }
.pa-massal__catatan { margin: 0; padding: .6rem .9rem .6rem 1.8rem; border-radius: .75rem; background: rgb(var(--warning-50)); color: rgb(var(--warning-900)); font-size: .85rem; }
.dark .pa-massal__catatan { background: rgba(var(--warning-500), .12); color: rgb(var(--warning-100)); }
.pa-massal__label { font-size: .85rem; font-weight: 600; }
.pa-massal__teks { width: 100%; border-radius: .75rem; border: 1px solid rgb(var(--gray-300)); padding: .75rem .9rem; font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgb(var(--gray-50)); color: inherit; resize: vertical; }
.dark .pa-massal__teks { background: rgb(var(--gray-800)); border-color: rgb(var(--gray-700)); }
.pa-massal__aksi { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.pa-massal__wa { display: flex; flex: 1 1 22rem; gap: .5rem; }
.pa-massal__wa input { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgb(var(--gray-300)); padding: 0 1rem; min-height: 2.5rem; font-size: .9rem; background: #fff; color: inherit; }
.dark .pa-massal__wa input { background: rgb(var(--gray-800)); border-color: rgb(var(--gray-700)); }
.pa-massal__orang summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.pa-massal__orang ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; max-height: 16rem; overflow-y: auto; }
.pa-massal__orang li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .35rem .5rem; border-radius: .6rem; }
.pa-massal__orang li:nth-child(odd) { background: rgb(var(--gray-50)); }
.dark .pa-massal__orang li:nth-child(odd) { background: rgb(var(--gray-800)); }
.pa-massal__orang .gd-tombol { min-height: 2rem; padding: 0 .8rem; }
@media (max-width: 640px) { .pa-massal__wa { flex-direction: column; } .pa-massal__wa input { min-height: 2.75rem; } }

.pp-tindakan__butir--info { background: rgb(var(--primary-50)); color: inherit; text-decoration: none; }
.pp-tindakan__butir--info:hover { box-shadow: inset 0 0 0 1px rgb(var(--primary-300)); }
.dark .pp-tindakan__butir--info { background: rgba(var(--primary-500), .12); }

/* Repeater banyak akun (IsianAkunMassal). Kepala item hanya berisi tombol hapus dan
   melayang di pojok kanan atas isian (tanpa itemLabel — teks di sini menimpa kotak).
   < 1024 px: tiap baris = kartu berlabel lengkap (grid 2 kolom).
   >= 1024 px: tampilan tabel, label kolom hanya di baris pertama, hapus di tengah. */
.pa-repeater-ringkas .fi-fo-repeater-item { position: relative; }
.pa-repeater-ringkas .fi-fo-repeater-item-header { position: absolute; top: .2rem; right: .2rem; z-index: 1; border: 0 !important; padding: 0 !important; background: transparent !important; }
.pa-repeater-ringkas .fi-fo-repeater-item-content { padding: .6rem .75rem .75rem !important; border-top: 0 !important; }
.pa-repeater-ringkas ul { gap: .6rem !important; }
@media (min-width: 1024px) {
    .pa-repeater-ringkas .fi-fo-repeater-item-content { padding: .5rem 2.4rem .5rem .75rem !important; }
    .pa-repeater-ringkas ul { gap: .4rem !important; }
    .pa-repeater-ringkas .fi-fo-repeater-item:not(:first-child) .fi-fo-field-wrp-label { display: none; }
    .pa-repeater-ringkas .fi-fo-repeater-item:not(:first-child) .fi-fo-repeater-item-header { top: 50%; transform: translateY(-50%); }
}

/* Popup massal (Buat banyak akun, Daftarkan banyak peserta, Daftarkan ke program) di HP:
   Section bersarang ("Orang baru" berisi "Tempel") tidak memakan lebar isian. */
@media (max-width: 640px) {
    .pa-modal-massal .fi-section-header { padding: .75rem 1rem; }
    .pa-modal-massal .fi-section-content { padding: 1rem; }
    .pa-modal-massal .fi-section .fi-section .fi-section-header { padding: .65rem .75rem; }
    .pa-modal-massal .fi-section .fi-section .fi-section-content { padding: .75rem; }
    .pa-modal-massal .fi-fo-repeater .fi-btn,
    .pa-modal-massal .fi-fo-actions .fi-btn { min-height: 2.75rem; }
}