/* admin-modul.css — komponen halaman modul admin (daftar, filter, halaman, formulir, dialog).
   Melengkapi admin.css dan memakai token-nya (--brand, --ink, --line, ...). Dipakai Tugas dan modul berikutnya. */

/* ---------- Kepala modul & tab ---------- */
.bb-kepala-modul{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 20px;flex-wrap:wrap;}
.bb-kepala-modul h2{font-size:24px;font-weight:800;letter-spacing:-.5px;}
.bb-kepala-modul p{margin:3px 0 0;color:var(--muted);font-size:13.5px;}
.bb-tab{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.bb-tab a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:100px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);font-weight:700;font-size:13px;text-decoration:none;transition:.15s;}
.bb-tab a:hover{border-color:#d3d5e4;color:var(--ink);text-decoration:none;}
.bb-tab a.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.bb-tab a b{display:inline-block;min-width:22px;padding:1px 7px;border-radius:100px;background:var(--line-soft);color:var(--ink-soft);font-size:11.5px;text-align:center;}
.bb-tab a.on b{background:rgba(255,255,255,.18);color:#fff;}

/* ---------- Filter ---------- */
.bb-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.bb-filter .bb-cari{position:relative;flex:1 1 260px;min-width:200px;}
.bb-filter .bb-cari i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none;}
.bb-filter .form-control{height:42px;font-size:13.5px;}
.bb-filter .bb-cari .form-control{padding-left:38px;}
.bb-filter select.form-control{flex:0 0 auto;width:auto;min-width:160px;}

/* ---------- Tombol tambahan ---------- */
.btn-sm{height:38px;padding:0 15px;font-size:13px;}
.btn-ghost{color:var(--ink-soft);background:transparent;border:1px solid var(--line);}
.btn-ghost:hover{background:var(--line-soft);color:var(--ink);}
.btn-danger{color:#fff;background:var(--bad);box-shadow:0 6px 16px rgba(229,72,77,.25);}
.btn-danger:hover{color:#fff;filter:brightness(.95);}
.bb-ikon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;text-decoration:none;font-size:13px;transition:.15s;}
.bb-ikon-btn:hover{background:var(--brand-soft);border-color:#f2c5e8;color:var(--brand);text-decoration:none;}
.bb-ikon-btn.bahaya:hover{background:var(--bad-soft);border-color:#f7cfd0;color:var(--bad);}
.bb-ikon-btn[disabled]{opacity:.38;cursor:not-allowed;background:var(--line-soft);}
.bb-ikon-btn[disabled]:hover{background:var(--line-soft);border-color:var(--line);color:var(--ink-soft);}

/* ---------- Tabel daftar ---------- */
.bb-tabel-tugas td.bb-aksi{white-space:nowrap;text-align:right;} .bb-tabel-tugas td.bb-aksi form{display:inline;}
.bb-tabel-tugas th.bb-aksi{text-align:right;}
.bb-tg b{display:block;font-weight:700;color:var(--ink);line-height:1.4;max-width:420px;}
.bb-tg small{color:var(--muted);}
.bb-rp{font-weight:700;white-space:nowrap;}
.bb-kuota{width:130px;height:7px;border-radius:100px;background:var(--line-soft);overflow:hidden;margin-bottom:5px;}
.bb-kuota span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--brand),#f06ad7);}
.bb-kuota.penuh span{background:var(--warn);}
.bb-kecil-muted{color:var(--muted);font-size:12px;}
.bb-status{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:100px;font-size:11.5px;font-weight:700;line-height:1.5;}
.bb-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.bb-status-aktif{background:var(--ok-soft);color:var(--ok);} .bb-status-draft{background:var(--line-soft);color:var(--ink-soft);} .bb-status-nonaktif{background:var(--bad-soft);color:var(--bad);}

/* ---------- Halaman (pagination) ---------- */
.bb-bawah-tabel{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);}
.bb-info-hal{color:var(--muted);font-size:13px;}
.bb-pager{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.bb-pager a,.bb-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 11px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:13px;font-weight:700;text-decoration:none;}
.bb-pager a:hover{background:var(--brand-soft);border-color:#f2c5e8;color:var(--brand);text-decoration:none;}
.bb-pager .on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(218,9,172,.28);}
.bb-pager .mati{opacity:.4;background:var(--line-soft);} .bb-pager .titik{border-color:transparent;background:transparent;min-width:24px;padding:0 4px;}

/* ---------- Formulir ---------- */
.bb-form-wrap{max-width:900px;}
.bb-bagian{margin-bottom:18px;}
.bb-bagian h3{font-size:15.5px;font-weight:800;letter-spacing:-.2px;margin-bottom:3px;}
.bb-bagian > p.bb-sub{color:var(--muted);font-size:13px;margin-bottom:18px;}
.bb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;} .bb-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px;}
textarea.form-control{height:auto;min-height:104px;padding:12px 15px;line-height:1.55;resize:vertical;}
select.form-control{appearance:none;-webkit-appearance:none;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b8da6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;}
.form-control[disabled],.form-control[readonly]{background:var(--line-soft);color:var(--muted);cursor:not-allowed;}
.form-control.salah{border-color:var(--bad);}
.bb-awalan{position:relative;} .bb-awalan > span{position:absolute;left:0;top:0;height:48px;display:flex;align-items:center;padding:0 14px;color:var(--muted);font-weight:700;font-size:13.5px;pointer-events:none;} .bb-awalan .form-control{padding-left:46px;}
.bb-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted);line-height:1.5;}
.bb-hitung{float:right;font-weight:500;color:var(--muted);font-size:11.5px;}
.bb-saklar{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;}
.bb-saklar input{width:20px;height:20px;margin-top:2px;accent-color:var(--brand);flex:none;}
.bb-saklar b{display:block;font-size:14px;} .bb-saklar small{color:var(--muted);}
.bb-saklar.terkunci{background:var(--line-soft);cursor:not-allowed;}
.bb-kotak-tahap{margin-top:16px;padding:16px 16px 4px;border-radius:var(--r-sm);background:var(--line-soft);}
.bb-aksi-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.bb-aksi-form .btn-primary{min-width:170px;}

/* ---------- Dialog konfirmasi ---------- */
.bb-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(23,23,40,.55);backdrop-filter:blur(2px);}
.bb-modal[hidden]{display:none !important;}
.bb-modal-isi{width:100%;max-width:440px;background:var(--surface);border-radius:var(--r);padding:26px 26px 22px;box-shadow:0 24px 64px rgba(23,23,40,.35);}
.bb-modal-ikon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--bad-soft);color:var(--bad);font-size:20px;margin-bottom:14px;}
.bb-modal-isi h3{font-size:17px;font-weight:800;margin-bottom:6px;} .bb-modal-isi p{color:var(--ink-soft);font-size:13.5px;margin-bottom:8px;}
.bb-modal-isi .bb-nama-hapus{display:block;margin:10px 0 18px;padding:10px 13px;border-radius:var(--r-sm);background:var(--line-soft);font-weight:700;word-break:break-word;}
.bb-modal-aksi{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}

/* ---------- Responsif ---------- */
@media (max-width:900px){.bb-grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:760px){
  .bb-grid-2,.bb-grid-3{grid-template-columns:1fr;}
  .bb-filter select.form-control{flex:1 1 140px;}
  /* tabel jadi kartu bertumpuk */
  .bb-tabel-tugas thead{display:none;}
  .bb-tabel-tugas,.bb-tabel-tugas tbody,.bb-tabel-tugas tr,.bb-tabel-tugas td{display:block;width:100%;}
  .bb-tabel-tugas tr{padding:14px 0;border-bottom:1px solid var(--line);} .bb-tabel-tugas tbody tr:last-child{border-bottom:0;}
  .bb-tabel-tugas td{padding:5px 0 !important;border:0 !important;} .bb-tabel-tugas td::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
  .bb-tabel-tugas td.bb-aksi{text-align:left;padding-top:10px !important;} .bb-tabel-tugas td.bb-aksi::before{display:none;}
  .bb-tg b{max-width:none;} .bb-bawah-tabel{flex-direction:column;align-items:flex-start;}
  .bb-modal-aksi .btn{flex:1;}
}

/* ======================================================================
   PEMBUAT FORM LAPORAN (admin) + TAMPILAN FORM (fl-*) — dipakai pratinjau admin & halaman pengguna
   ====================================================================== */
.bb-fb-jumlah{font-weight:600;color:var(--muted);font-size:13px;}
.bb-fb-tab{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:4px 0 16px;}
.bb-fb-tab button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.bb-fb-tab button:hover{color:var(--ink);} .bb-fb-tab button.on{color:var(--brand);border-bottom-color:var(--brand);}
.bb-fb-bar{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.bb-fb-tpl{display:flex;gap:8px;flex:1 1 320px;} .bb-fb-tpl select{height:38px;font-size:13px;flex:1;min-width:0;}
.bb-fb-impor{padding:14px;border:1.5px dashed var(--line);border-radius:var(--r-sm);background:var(--line-soft);margin-bottom:14px;}
.bb-fb-impor label{display:block;font-size:13px;margin-bottom:8px;} .bb-fb-impor textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;}
.bb-fb-impor-aksi{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.bb-fb-impor-pesan{margin-top:8px;font-size:12.5px;} .bb-fb-impor-pesan.galat{color:var(--bad);} .bb-fb-impor-pesan.ok{color:var(--ok);}
.bb-fb-daftar{display:grid;gap:12px;}
.bb-fb-kartu{border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;border-left:4px solid var(--line);}
.bb-fb-kartu.wajib{border-left-color:var(--brand);}
.bb-fb-kepala{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--line-soft);border-radius:9px 9px 0 0;}
.bb-fb-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:800;flex:none;}
.bb-fb-kepala > .fas{color:var(--muted);}
.bb-fb-jenis{flex:1;min-width:0;height:36px;padding:0 30px 0 10px;font:inherit;font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);}
.bb-fb-jenis[disabled]{background:var(--line-soft);cursor:not-allowed;}
.bb-fb-aksi{display:flex;gap:6px;flex:none;} .bb-fb-aksi .bb-ikon-btn{width:34px;height:34px;} .bb-ikon-btn.yakin{width:auto;padding:0 10px;background:var(--bad);border-color:var(--bad);color:#fff;font-weight:700;font-size:12px;}
.bb-fb-isi{padding:14px 14px 4px;} .bb-fb-isi .form-group{margin-bottom:14px;} .bb-fb-isi .form-control{height:42px;font-size:13.5px;} .bb-fb-isi textarea.form-control{height:auto;}
.bb-fb-sakelar{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:2px 0 12px;}
.bb-cek{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;margin:0;font-weight:600;} .bb-cek input{width:18px;height:18px;accent-color:var(--brand);}
.bb-fb-lingkup{width:auto !important;height:34px !important;font-size:12.5px !important;padding:0 28px 0 10px !important;}
.bb-fb-lanjut{margin:0 0 12px;border-top:1px solid var(--line-soft);padding-top:10px;} .bb-fb-lanjut summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--ink-soft);} .bb-fb-lanjut-isi{padding-top:12px;}
.bb-fb-kosong{text-align:center;padding:26px 10px;color:var(--muted);border:1.5px dashed var(--line);border-radius:var(--r-sm);} .bb-fb-kosong i{font-size:32px;opacity:.4;display:block;margin-bottom:8px;} .bb-fb-kosong p{margin:0;font-size:13px;}
.bb-fb-tambah{margin-top:16px;} .bb-fb-tambah > b{display:block;font-size:13px;margin-bottom:10px;}
.bb-tipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.bb-tipe-btn{display:flex;align-items:center;gap:9px;height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink-soft);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:left;transition:.15s;}
.bb-tipe-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);} .bb-tipe-btn i{width:18px;text-align:center;color:var(--muted);} .bb-tipe-btn:hover i{color:var(--brand);}

/* ---- tampilan form (fl-*): dirender FormLaporan::render ---- */
.fl-kotak{border:1.5px solid var(--line);border-radius:var(--r);background:#fff;padding:20px;max-width:640px;}
.fl-form{display:grid;gap:18px;}
.fl-field{margin:0;padding:0;border:0;min-width:0;} .fl-label{display:block;font-weight:700;font-size:13.5px;margin:0 0 4px;color:var(--ink);padding:0;}
.fl-wajib{color:var(--bad);} .fl-help{color:var(--muted);font-size:12.5px;line-height:1.5;margin:0 0 7px;}
.fl-input{display:block;width:100%;padding:11px 13px;font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);}
.fl-input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring);} textarea.fl-input{resize:vertical;min-height:96px;} select.fl-input{height:44px;}
.fl-opsi-grup{display:grid;gap:8px;} .fl-opsi{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font-size:14px;margin:0;font-weight:500;} .fl-opsi:hover{border-color:#d3d5e4;background:#fafaff;}
.fl-opsi input{width:18px;height:18px;accent-color:var(--brand);flex:none;} .fl-berkas{padding:9px 11px;background:var(--line-soft);border-style:dashed;}
.fl-hint{color:var(--muted);font-size:12px;margin-top:6px;} .fl-unik{color:var(--info);font-size:12px;margin-top:6px;}
.fl-galat{color:var(--bad);font-size:12.5px;font-weight:600;margin-top:6px;} .fl-ada-galat .fl-input{border-color:var(--bad);}
.fl-tahap{margin-top:6px;padding:8px 0 2px;border-bottom:2px solid var(--line);font-size:13px;color:var(--ink-soft);}

@media (max-width:760px){.bb-fb-bar{flex-direction:column;align-items:stretch;} .bb-fb-kepala{flex-wrap:wrap;} .bb-fb-jenis{flex:1 1 140px;} .fl-kotak{padding:16px;}}

/* ======================================================================
   TUGAS MENONTON (YouTube): thumbnail di daftar, pratinjau pemutar, lama menonton
   ====================================================================== */
.bb-video-sel{display:flex;align-items:center;gap:12px;min-width:0;}
.bb-thumb{position:relative;flex:none;width:96px;height:54px;border-radius:9px;overflow:hidden;background:#171728;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:16px;}
.bb-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .bb-thumb i{position:relative;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.6);color:#fff;font-size:15px;opacity:.9;}
.bb-tg small a{color:var(--brand);font-weight:600;}
.yt-pratinjau{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:#171728;border:1.5px solid var(--line);}
.yt-pratinjau iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .yt-pratinjau iframe[hidden]{display:none;}
.yt-kosong{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,.55);text-align:center;padding:12px;} .yt-kosong i{font-size:44px;margin-bottom:8px;opacity:.7;} .yt-kosong p{margin:0;font-size:13px;}
.yt-info{min-height:22px;margin-top:8px;font-size:12.5px;color:var(--muted);} .yt-info.ok{color:var(--ok);} .yt-info.salah{color:var(--bad);font-weight:600;}
.yt-durasi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.yt-durasi-kolom{display:flex;align-items:center;gap:8px;} .yt-durasi-kolom .form-control{width:96px;text-align:center;} .yt-durasi-kolom span{color:var(--muted);font-size:13px;font-weight:600;}
.yt-total{font-weight:700;font-size:13.5px;color:var(--muted);} .yt-total.ok{color:var(--ok);} .yt-total.salah{color:var(--bad);}
.yt-preset{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px;}
.yt-chip{height:34px;padding:0 14px;border:1.5px solid var(--line);border-radius:100px;background:#fff;color:var(--ink-soft);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;} .yt-chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);} .yt-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;}
@media (max-width:760px){.bb-thumb{width:80px;height:45px;} .yt-pratinjau{max-width:none;}}

/* ======================================================================
   TUGAS AFFILIATE: ringkasan kampanye, kartu produk ala marketplace, form produk
   ====================================================================== */
.pr-ringkas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:14px 18px;margin-bottom:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);}
.pr-ringkas > div{display:flex;flex-direction:column;} .pr-ringkas b{font-size:22px;font-weight:800;line-height:1.1;} .pr-ringkas span{font-size:12px;color:var(--muted);} .pr-ringkas .btn{margin-left:auto;}
.pr-jejak{margin:0 0 4px !important;font-size:12.5px;color:var(--muted);} .pr-jejak a{color:var(--ink-soft);font-weight:600;} .pr-jejak i{font-size:9px;margin:0 6px;} .pr-aksi-kepala{display:flex;gap:10px;flex-wrap:wrap;}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;}
.pr-kartu{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:.15s;} .pr-kartu:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(23,23,40,.12);}
.pr-foto{position:relative;aspect-ratio:4/3;background:var(--line-soft);display:flex;align-items:center;justify-content:center;} .pr-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pr-tanpa{display:flex;flex-direction:column;align-items:center;color:var(--muted);} .pr-tanpa i{font-size:38px;opacity:.5;} .pr-tanpa small{margin-top:6px;}
.pr-lencana{position:absolute;left:10px;top:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);} .pr-jml{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:100px;background:rgba(23,23,40,.7);color:#fff;font-size:11.5px;font-weight:700;}
.pr-isi{display:flex;flex-direction:column;gap:9px;padding:14px 16px 16px;flex:1;} .pr-isi h4{font-size:15px;font-weight:800;line-height:1.35;letter-spacing:-.2px;} .pr-ring{margin:0;color:var(--ink-soft);font-size:12.5px;line-height:1.5;}
.pr-harga{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} .pr-harga b{font-size:17px;font-weight:800;color:var(--brand);} .pr-harga s{color:var(--muted);font-size:12.5px;} .pr-harga em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--ok);background:var(--ok-soft);padding:1px 8px;border-radius:100px;}
.pr-meta{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-soft);} .pr-meta i{width:16px;color:var(--muted);text-align:center;margin-right:4px;} .pr-meta b{color:var(--ink);}
.pr-stat{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--muted);} .pr-stat b{color:var(--ink);font-size:13px;}
.pr-url{font-size:11.5px;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;} .pr-aksi{display:flex;gap:8px;margin-top:auto;padding-top:4px;}
.pr-galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.pr-gambar{position:relative;border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;} .pr-gambar img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;}
.pr-utama{position:absolute;left:6px;top:6px;padding:2px 8px;border-radius:100px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;}
.pr-gambar-aksi{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;padding:7px 9px;font-size:12px;background:var(--line-soft);} .pr-gambar-aksi label{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:600;cursor:pointer;} .pr-gambar-aksi .hapus{color:var(--bad);} .pr-gambar-aksi input{accent-color:var(--brand);}
.pr-berkas{height:auto !important;padding:11px 14px !important;border-style:dashed !important;background:var(--line-soft) !important;}
.pr-pratinjau{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;} .pr-pratinjau:empty{display:none;} .pr-pv{width:74px;height:74px;border-radius:10px;overflow:hidden;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--line-soft);} .pr-pv img{width:100%;height:100%;object-fit:cover;} .pr-pv.salah{border-color:var(--bad);color:var(--bad);}
.pr-salah{color:var(--bad) !important;font-weight:600;}
.pr-contoh{min-height:20px;margin-top:2px;font-size:13px;color:var(--muted);padding:10px 14px;border-radius:var(--r-sm);background:var(--line-soft);} .pr-contoh:empty{display:none;} .pr-contoh.ok{background:var(--ok-soft);color:#0c7a3c;} .pr-contoh.salah{background:var(--bad-soft);color:#b42328;font-weight:600;}
@media (max-width:760px){.pr-ringkas .btn{margin-left:0;width:100%;} .pr-grid{grid-template-columns:1fr;}}

/* ======================================================================
   BERBURU KODE: panel ringkas di bawah form tugas laporan (ditutup bawaan, bisa dibuka)
   ====================================================================== */
.kd-panel{margin-top:22px;border:1.5px dashed var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;}
.kd-panel.kd-terbuka{border-style:solid;box-shadow:var(--shadow);}
.kd-kepala{display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;background:transparent;font:inherit;cursor:pointer;text-align:left;color:var(--ink);}
.kd-kepala:hover{background:var(--line-soft);}
.kd-judul{font-weight:800;font-size:13.5px;} .kd-judul i{color:var(--brand);margin-right:6px;} .kd-judul em{font-style:normal;font-weight:600;font-size:11px;color:var(--muted);background:var(--line-soft);padding:2px 9px;border-radius:100px;margin-left:6px;}
.kd-lencana{font-size:11.5px;font-weight:700;color:var(--ink-soft);background:var(--line-soft);padding:2px 10px;border-radius:100px;}
.kd-buka{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);} .kd-buka i{font-size:10px;transition:transform .2s;} .kd-terbuka .kd-buka i{transform:rotate(180deg);}
.kd-isi{padding:4px 16px 18px;border-top:1px solid var(--line-soft);} .kd-isi[hidden]{display:none;}
.kd-info{margin:14px 0;padding:12px 15px;border-radius:var(--r-sm);background:var(--info-soft,#eaf2ff);color:#1d4f9a;font-size:12.8px;line-height:1.65;} .kd-info p{margin:6px 0 0;} .kd-info i{margin-right:5px;}
.kd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .kd-kotak{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;} .kd-kotak h4{font-size:13.5px;font-weight:800;margin:0 0 12px;}
.kd-baris{display:flex;align-items:center;gap:10px;margin-bottom:10px;} .kd-baris label{flex:0 0 130px;margin:0;font-size:12.5px;font-weight:600;} .kd-baris .form-control{height:38px;font-size:13px;}
.kd-contoh{margin:10px 0;font-size:12px;color:var(--muted);line-height:1.9;} .kd-contoh code{display:inline-block;margin:2px 4px 2px 0;background:var(--line-soft);padding:2px 8px;border-radius:6px;color:var(--ink);white-space:nowrap;}
.kd-angka{display:flex;gap:20px;margin-bottom:6px;} .kd-angka > div{display:flex;flex-direction:column;} .kd-angka b{font-size:22px;font-weight:800;line-height:1.1;} .kd-angka span{font-size:11.5px;color:var(--muted);}
.kd-unduh{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);} .kd-baris-kecil{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px;} .kd-baris-kecil .form-control{height:36px;font-size:12.5px;flex:1 1 150px;} .kd-unduh .bb-cek{margin:0 12px 6px 0;font-size:12.5px;}
.kd-hapus{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);} .btn-teks-bahaya{border:0;background:transparent;color:var(--bad);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 0;} .btn-teks-bahaya:hover{text-decoration:underline;} .btn-teks-bahaya.yakin{background:var(--bad);color:#fff;padding:6px 12px;border-radius:8px;text-decoration:none;}
.kd-kosong{color:var(--muted);font-size:13px;margin:0;}
@media (max-width:760px){.kd-grid{grid-template-columns:1fr;} .kd-baris{flex-direction:column;align-items:stretch;gap:4px;} .kd-baris label{flex:none;} .kd-lencana{display:none;}}

/* ======================================================================
   DAFTAR KOMENTAR: kotak di bawah panel Berburu Kode — impor Excel, foto per baris
   ====================================================================== */
.kt-panel{margin-top:14px;border:1.5px dashed var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;}
.kt-panel.kt-terbuka{border-style:solid;box-shadow:var(--shadow);}
.kt-kepala{display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;background:transparent;font:inherit;cursor:pointer;text-align:left;color:var(--ink);} .kt-kepala:hover{background:var(--line-soft);}
.kt-judul{font-weight:800;font-size:13.5px;} .kt-judul i{color:var(--brand);margin-right:6px;} .kt-judul em{font-style:normal;font-weight:600;font-size:11px;color:var(--muted);background:var(--line-soft);padding:2px 9px;border-radius:100px;margin-left:6px;}
.kt-lencana{font-size:11.5px;font-weight:700;color:var(--ink-soft);background:var(--line-soft);padding:2px 10px;border-radius:100px;} .kt-lencana[hidden]{display:none;}
.kt-buka{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);} .kt-buka i{font-size:10px;transition:transform .2s;} .kt-terbuka .kt-buka i{transform:rotate(180deg);}
.kt-badan{padding:4px 16px 18px;border-top:1px solid var(--line-soft);} .kt-badan[hidden]{display:none;}
.kt-info{margin:14px 0;padding:12px 15px;border-radius:var(--r-sm);background:var(--info-soft,#eaf2ff);color:#1d4f9a;font-size:12.8px;line-height:1.65;} .kt-info p{margin:6px 0 0;} .kt-info i{margin-right:5px;} .kt-langkah{margin:6px 0 0;padding-left:20px;} .kt-langkah li{margin:2px 0;}
.kt-kabar{position:sticky;top:8px;z-index:5;margin:0 0 12px;padding:9px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(23,23,40,.14);} .kt-kabar[hidden]{display:none;} .kt-kabar.ok{background:var(--ok-soft);color:#0c7a3c;} .kt-kabar.salah{background:var(--bad-soft);color:#b42328;}
.kt-atas{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-bottom:20px;} .kt-kotak{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;} .kt-kotak h4,.kt-daftar-kepala h4{font-size:13.5px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.kt-no-langkah{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:800;flex:none;} .kt-no-langkah.kt-opsional{background:var(--line);color:var(--ink-soft);}
.kt-sembunyi{position:absolute !important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;}
.kt-seret{display:flex;align-items:center;justify-content:center;gap:12px;min-height:84px;margin:0 0 12px;padding:14px;border:2px dashed var(--line);border-radius:var(--r-sm);background:var(--line-soft);color:var(--ink-soft);font-size:13px;text-align:center;cursor:pointer;transition:.15s;} .kt-seret:hover,.kt-seret.melayang{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);} .kt-seret.terpilih{border-style:solid;border-color:var(--ok);background:var(--ok-soft);color:#0c7a3c;} .kt-seret i{font-size:28px;opacity:.85;}
.kt-mode{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;} .kt-mode .bb-cek{margin:0;font-size:13px;} .kt-bahaya small{color:var(--bad);font-weight:600;}
.kt-baris-aksi{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;} .kt-tautan{font-size:12.5px;font-weight:700;color:var(--brand);} .kt-tautan i{margin-right:4px;}
.kt-hitung{margin-left:auto;font-size:11.5px;color:var(--muted);}
.kt-daftar-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;} .kt-daftar-kepala h4{margin:0;} .kt-daftar-kepala h4 small{font-weight:600;color:var(--muted);font-size:12px;}
.kt-cari{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .kt-cari .form-control{height:36px;font-size:12.5px;width:200px;} .kt-cari select.form-control{width:150px;}
.kt-daftar{display:flex;flex-direction:column;gap:10px;}
.kt-baris{display:grid;grid-template-columns:34px 78px 1fr auto;gap:14px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;transition:box-shadow .15s,border-color .15s;} .kt-baris:hover{border-color:#d9d9e6;box-shadow:0 4px 14px rgba(23,23,40,.06);}
.kt-no{font-size:12px;font-weight:800;color:var(--muted);padding-top:6px;text-align:center;}
.kt-foto{position:relative;width:78px;height:78px;border-radius:12px;overflow:hidden;background:var(--line-soft);border:2px dashed var(--line);transition:.15s;} .kt-foto.ada{border:1px solid var(--line);background:#fff;} .kt-foto.melayang{border-color:var(--brand);background:var(--brand-soft);} .kt-foto-isi{display:block;width:100%;height:100%;}
.kt-foto img{display:block;width:100%;height:100%;object-fit:cover;}
.kt-foto-tambah{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer;} .kt-foto-tambah i{font-size:18px;} .kt-foto-tambah:hover{color:var(--brand);}
.kt-foto-x,.kt-foto-ganti{position:absolute;width:24px;height:24px;border:0;border-radius:50%;background:rgba(23,23,40,.72);color:#fff;font-size:11px;cursor:pointer;opacity:0;transition:.15s;display:flex;align-items:center;justify-content:center;} .kt-foto-x{right:4px;top:4px;} .kt-foto-ganti{right:4px;bottom:4px;} .kt-foto-x:hover{background:var(--bad);} .kt-foto-ganti:hover{background:var(--brand);}
.kt-foto:hover .kt-foto-x,.kt-foto:hover .kt-foto-ganti,.kt-foto:focus-within .kt-foto-x,.kt-foto:focus-within .kt-foto-ganti{opacity:1;} @media (hover:none){.kt-foto-x,.kt-foto-ganti{opacity:1;}}
.kt-putar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.8);color:var(--brand);font-size:20px;} .kt-putar[hidden]{display:none;}
.kt-teks{min-width:0;} .kt-isi{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;} .kt-isi.terbuka{display:block;-webkit-line-clamp:unset;overflow:visible;}
.kt-lagi{margin-top:4px;padding:0;border:0;background:none;color:var(--brand);font:inherit;font-size:12px;font-weight:700;cursor:pointer;} .kt-lagi[hidden]{display:none;}
.kt-edit{font-size:13.5px;line-height:1.55;} .kt-edit-aksi{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.kt-aksi{display:flex;gap:4px;} .kt-ikon{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink-soft);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;} .kt-ikon:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);} .kt-ikon.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-soft);} .kt-ikon.bahaya:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-soft);} .kt-ikon.yakin{background:var(--bad);border-color:var(--bad);color:#fff;}
.kt-halaman{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;font-size:12.5px;color:var(--muted);} .kt-halaman a{font-weight:700;color:var(--brand);} .kt-halaman .mati{opacity:.4;} .kt-hal-info b{color:var(--ink);}
.kt-hapus-semua{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);text-align:right;}
.kt-kosong{color:var(--muted);font-size:13px;margin:6px 0 0;} .kt-kosong-besar{text-align:center;padding:26px 10px;color:var(--muted);} .kt-kosong-besar i{font-size:34px;opacity:.5;} .kt-kosong-besar p{margin:8px 0 0;font-size:13px;}
@media (max-width:900px){.kt-atas{grid-template-columns:1fr;}}
@media (max-width:640px){.kt-baris{grid-template-columns:62px 1fr;grid-template-areas:"foto teks" "aksi aksi";gap:10px 12px;} .kt-no{display:none;} .kt-foto{grid-area:foto;width:62px;height:62px;} .kt-teks{grid-area:teks;} .kt-aksi{grid-area:aksi;justify-content:flex-end;} .kt-lencana{display:none;} .kt-cari .form-control{width:100%;} .kt-cari{width:100%;}}

/* --- pasang banyak foto sekaligus --- */
.kt-massal-ajak{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .kt-belum{font-size:12px;font-weight:700;color:var(--muted);background:var(--line-soft);padding:3px 10px;border-radius:100px;}
body.kt-kunci{overflow:hidden;}
.kt-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(23,23,40,.55);} .kt-modal[hidden]{display:none;}
.kt-modal-isi{display:flex;flex-direction:column;width:100%;max-width:800px;max-height:92vh;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(23,23,40,.35);overflow:hidden;}
.kt-modal-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft);} .kt-modal-kepala h3{margin:0;font-size:16px;font-weight:800;} .kt-modal-kepala h3 i{color:var(--brand);margin-right:7px;}
.kt-tutup{width:34px;height:34px;border:0;border-radius:50%;background:var(--line-soft);color:var(--ink-soft);font-size:15px;cursor:pointer;} .kt-tutup:hover{background:var(--bad-soft);color:var(--bad);}
.kt-modal-badan{padding:16px 20px;overflow:auto;flex:1;} .kt-modal-kaki{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line-soft);background:var(--line-soft);}
.kt-cara{margin:0 0 14px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .kt-cara li{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px;line-height:1.5;color:var(--ink-soft);} .kt-cara b{display:block;color:var(--ink);margin-bottom:2px;} .kt-cara .kt-no-langkah{margin-bottom:6px;}
.kt-massal-zona{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:110px;padding:16px;border:2px dashed var(--line);border-radius:var(--r);background:var(--line-soft);color:var(--ink-soft);text-align:center;cursor:pointer;transition:.15s;} .kt-massal-zona:hover,.kt-massal-zona.melayang{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);} .kt-massal-zona i{font-size:30px;} .kt-massal-zona b{font-size:14px;} .kt-massal-zona small{color:var(--muted);}
.kt-cara-pasang{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);} .kt-cara-pasang .bb-cek{margin:0 0 6px;font-size:13px;} .kt-cara-pasang small{display:block;margin:0 0 8px 26px;color:var(--muted);line-height:1.5;} .kt-opsi{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);}
.kt-pv{display:flex;flex-direction:column;gap:6px;margin-top:12px;} .kt-pv-baris{display:grid;grid-template-columns:48px minmax(0,1fr) 22px minmax(0,1.3fr) auto;gap:10px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;} .kt-pv-baris.lewat{background:var(--line-soft);opacity:.75;} .kt-pv-baris.ganti{border-color:#e8b24a;background:#fff9ea;}
.kt-pv-img{width:48px;height:48px;border-radius:8px;background:var(--line-soft);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--muted);} .kt-pv-img img{width:100%;height:100%;object-fit:cover;}
.kt-pv-nama{min-width:0;} .kt-pv-nama b,.kt-pv-tujuan b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .kt-pv-nama small,.kt-pv-tujuan small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .kt-panah{color:var(--muted);text-align:center;}
.kt-tanda{padding:2px 9px;border-radius:100px;font-size:11px;font-weight:800;white-space:nowrap;} .kt-tanda.ok{background:var(--ok-soft);color:#0c7a3c;} .kt-tanda.ganti{background:#fdeccb;color:#8a5a00;} .kt-tanda.lewat{background:var(--bad-soft);color:#b42328;}
.kt-ringkas-pv{margin-top:12px;font-size:13px;font-weight:700;} .kt-bar{margin-top:14px;} .kt-bar[hidden]{display:none;} .kt-bar-garis{height:10px;border-radius:100px;background:var(--line-soft);overflow:hidden;} .kt-bar-isi{height:100%;width:0;background:linear-gradient(90deg,var(--brand),#ff6ac1);transition:width .25s;} .kt-bar-teks{margin-top:6px;font-size:12.5px;color:var(--ink-soft);} .kt-galat-pv{margin:8px 0 0;padding-left:18px;color:#b42328;font-size:12.5px;}
@media (max-width:700px){.kt-cara{grid-template-columns:1fr;} .kt-pv-baris{grid-template-columns:42px minmax(0,1fr) auto;} .kt-pv-baris .kt-panah,.kt-pv-baris .kt-pv-tujuan{grid-column:2 / 4;} .kt-modal{padding:8px;}}
.kt-kotak textarea + .kt-baris-aksi{margin-top:10px;}

/* ======================================================================
   PENGGUNA: kartu ringkasan, avatar, sel pengguna
   ====================================================================== */
.pg-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.pg-kartu{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);} .pg-kartu > i{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand);font-size:17px;flex:none;}
.pg-kartu.ok > i{background:var(--ok-soft);color:var(--ok);} .pg-kartu.bad > i{background:var(--bad-soft);color:var(--bad);} .pg-kartu b{display:block;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.4px;} .pg-kartu span{font-size:12px;color:var(--muted);}
.pg-urut{width:210px;height:38px;font-size:13px;}
.pg-orang{display:flex;align-items:center;gap:12px;min-width:0;} .pg-avatar{position:relative;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:hsl(var(--h),55%,46%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;} .pg-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pg-nama{min-width:0;} .pg-nama b{display:block;font-size:13.5px;font-weight:700;} .pg-nama small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;} .pg-nama small i{font-size:10px;}
.pg-peran{font-style:normal;font-size:10.5px;font-weight:800;color:var(--brand);background:var(--brand-soft);padding:1px 8px;border-radius:100px;margin-left:4px;vertical-align:middle;}
.pg-kode{padding:2px 8px;border-radius:6px;background:var(--line-soft);color:var(--ink);font-size:12px;}
.pg-catatan{margin:14px 4px 0;font-size:12px;color:var(--muted);} .pg-catatan i{margin-right:5px;}
@media (max-width:900px){.pg-stat{grid-template-columns:repeat(2,1fr);} .pg-urut{width:100%;}}
@media (max-width:480px){.pg-stat{grid-template-columns:1fr 1fr;gap:10px;} .pg-kartu{padding:11px 12px;gap:10px;} .pg-kartu > i{width:36px;height:36px;} .pg-kartu b{font-size:19px;}}
@media (max-width:760px){.bb-tabel-pengguna td[data-label="Pengguna"]::before{display:none;} .bb-tabel-pengguna .pg-nama small{max-width:100%;} .bb-tabel-pengguna tr{display:grid !important;grid-template-columns:1fr 1fr;gap:2px 14px;} .bb-tabel-pengguna td[data-label="Pengguna"],.bb-tabel-pengguna td[data-label="Status"]{grid-column:1 / -1;}}

/* ======================================================================
   DETAIL PENGGUNA
   ====================================================================== */
.pg-baris-klik{cursor:pointer;} .pg-baris-klik:hover td{background:var(--brand-soft);} .pg-tautan{color:inherit;text-decoration:none;} .pg-tautan:hover{color:var(--brand);text-decoration:underline;}
.pg-stat.enam{grid-template-columns:repeat(3,1fr);} .pg-kartu b small{font-size:13px;font-weight:600;color:var(--muted);}
.pd-kepala{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);}
.pd-avatar{width:68px;height:68px;font-size:26px;} .pd-ident{flex:1;min-width:240px;} .pd-ident h2{margin:0 0 4px;font-size:21px;font-weight:800;letter-spacing:-.4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .pd-ident p{margin:2px 0;font-size:13px;color:var(--ink-soft);} .pd-meta{color:var(--muted) !important;font-size:12.5px !important;} .pd-meta b{color:var(--ink);font-weight:700;}
.pd-kanan{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px;color:var(--muted);} .pd-kanan .pg-kode{font-size:14px;}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} .pd-grid-3{grid-template-columns:repeat(3,1fr);} .pd-kartu-isi{padding:18px 20px;} .pd-lebar{margin-bottom:16px;}
.pd-kartu-isi h3,.pd-judul-tabel{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:14.5px;font-weight:800;} .pd-kartu-isi h3 i,.pd-judul-tabel i{color:var(--brand);} .pd-sub{margin-top:20px !important;} .pd-judul-tabel{padding:16px 20px 0;}
.pd-lagi{margin-left:auto;font-size:12px;font-weight:700;color:var(--brand);}
.pd-dl{display:grid;grid-template-columns:130px 1fr;gap:9px 12px;margin:0;font-size:13px;} .pd-dl dt{color:var(--muted);font-weight:600;} .pd-dl dd{margin:0;color:var(--ink);word-break:break-word;} .pd-dl small{color:var(--muted);}
.pd-redup{color:var(--muted);font-weight:500;} .pd-catatan{font-size:12px;margin:12px 0 0;}
.pd-angka{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .pd-angka > div{padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--line-soft);} .pd-angka b{display:block;font-size:20px;font-weight:800;line-height:1.1;} .pd-angka span{font-size:11.5px;color:var(--muted);}
.pd-chip{display:inline-block;margin:2px 4px 2px 0;padding:3px 10px;border-radius:100px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:700;} .pd-minat{margin-bottom:8px;} .pd-minat small{display:block;color:var(--muted);font-weight:700;font-size:11px;letter-spacing:.4px;text-transform:uppercase;margin-bottom:2px;}
.pd-sosmed{list-style:none;margin:0;padding:0;display:grid;gap:7px;} .pd-sosmed li{font-size:13px;} .pd-sosmed i{width:18px;color:var(--brand);text-align:center;margin-right:4px;}
.pd-hasil{margin:0 0 12px;padding:9px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;} .pd-hasil.ok{background:var(--ok-soft);color:#0c7a3c;} .pd-hasil.salah{background:var(--bad-soft);color:#b42328;} .pd-selisih td{background:var(--bad-soft);}
.pd-daftar{list-style:none;margin:0;padding:0;} .pd-daftar li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);} .pd-daftar li:last-child{border-bottom:0;} .pd-daftar b{display:block;font-size:13px;} .pd-daftar small{display:block;color:var(--muted);font-size:11.5px;} .pd-kanan-k{text-align:right;flex:none;}
.pd-plus{color:#0c7a3c;} .pd-minus{color:#b42328;}
.pd-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;} .pd-ringkas{display:flex;flex-direction:column;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);text-decoration:none;color:inherit;min-width:150px;transition:.15s;} .pd-ringkas:hover,.pd-ringkas.on{border-color:var(--brand);background:var(--brand-soft);} .pd-ringkas small{color:var(--muted);font-size:11.5px;font-weight:600;} .pd-ringkas b{font-size:15px;}
.pd-ref{display:block;color:var(--muted);font-size:11.5px;} .pd-isi{white-space:pre-line;max-width:480px;}
.pd-bukti{margin:8px 0 0;padding:8px 10px;border-left:3px solid var(--line);background:var(--line-soft);border-radius:0 8px 8px 0;font-size:12px;} .pd-bukti-kepala{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;margin-bottom:3px;} .pd-bukti-kepala small{font-weight:500;color:var(--muted);} .pd-bukti-isi{display:block;color:var(--ink-soft);word-break:break-all;} .pd-bukti-isi i{width:16px;color:var(--muted);text-align:center;} .pd-tolak{color:#b42328;}
.pd-b-warn{background:#fdeccb;color:#8a5a00;} .pd-b-info{background:#e3efff;color:#1d4f9a;}
.pd-jejak{list-style:none;margin:0;padding:0;display:grid;gap:12px;} .pd-jejak li{display:flex;gap:12px;align-items:flex-start;} .pd-jejak li > i{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;} .pd-jejak b{display:block;font-size:13px;} .pd-jejak small{color:var(--muted);font-size:12px;}
@media (max-width:900px){.pd-grid,.pd-grid-3{grid-template-columns:1fr;} .pg-stat.enam{grid-template-columns:repeat(2,1fr);} .pd-kanan{align-items:flex-start;}}
@media (max-width:600px){.pd-dl{grid-template-columns:1fr;gap:2px;} .pd-dl dt{margin-top:8px;} .pd-angka{grid-template-columns:repeat(2,1fr);} .pg-stat.enam{grid-template-columns:1fr 1fr;} .pd-kepala{padding:14px;}}
@media (min-width:761px){.pd-tabel td{vertical-align:top !important;padding-top:12px !important;}}