/* Aplikasi warga Warlok. Token warna dari mockup docs/mockup/warga.html (rasio kontras dari laporan UI/UX), redup mengikuti sistem.
 * Huruf sistem: CSP produksi tidak mengizinkan sumber luar seperti Google Fonts. Tosca (--hadir) hanya untuk kehadiran dan merek. */
:root {
  --latar: #F4F2EC; --permukaan: #FFFFFF; --panel: #ECE8DF; --garis: #D6D0C4; --garis-isian: #7D8590;
  --teks: #18202A; --teks2: #4E5764;
  --nila: #2A3B8F; --on-nila: #FFFFFF;
  --hadir: #0B6E69; --on-hadir: #FFFFFF; --hadir-wadah: #DDF1EE;
  --tunggu: #8A5A00; --tunggu-bg: #FDF0D2;
  --galat: #B3261E; --galat-bg: #FCE4E2; --bahaya: #B3261E; --on-bahaya: #FFFFFF;
  --tirai: rgba(24, 32, 42, .5); --bayang: rgba(24, 32, 42, .16);
  --snack-bg: #18202A; --snack-fg: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --latar: #11151B; --permukaan: #1A2028; --panel: #212833; --garis: #333C48;
    --teks: #ECEFF3; --teks2: #A7B0BC;
    --nila: #4C5FCB;
    --hadir: #5CCFD0; --on-hadir: #11151B; --hadir-wadah: #0F2E2F;
    --tunggu: #F0C05A; --tunggu-bg: #33270B;
    --galat: #FF8F85; --galat-bg: #3A1714; --bahaya: #C23A30;
    --tirai: rgba(0, 0, 0, .5); --bayang: rgba(0, 0, 0, .4); --snack-bg: #ECEFF3; --snack-fg: #11151B;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--latar); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.4; color: var(--teks); }
.app { max-width: 480px; min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; overflow-x: hidden; }
.muat { padding: 48px 16px; text-align: center; color: var(--teks2); }
.isi { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.isi.dengan-nav { padding-bottom: 96px; }
h1 { font-size: 26px; line-height: 1.2; margin: 0; }
h2 { font-size: 20px; margin: 0; }
p { margin: 0; }
.redam { color: var(--teks2); }
.kecil { font-size: 14px; }
a { color: var(--hadir); }

/* Merek dan kepala layar */
.merek { display: flex; align-items: center; gap: 10px; padding-top: 24px; }
.merek img { width: 40px; height: 40px; }
.merek b { font-size: 22px; display: block; }
.kepala { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 8px; border-bottom: 1px solid var(--garis); background: var(--permukaan); }
.kepala h1 { font-size: 18px; }
.kembali { width: 44px; height: 44px; border: 0; background: none; color: var(--teks); font-size: 22px; border-radius: 22px; cursor: pointer; }

/* Isian */
.label { font-weight: 600; font-size: 14px; }
.isian { display: flex; align-items: center; min-height: 52px; border: 1.5px solid var(--garis-isian); border-radius: 12px; background: var(--permukaan); padding: 0 14px; gap: 8px; }
.isian:focus-within { border-color: var(--hadir); outline: 2px solid var(--hadir-wadah); }
.isian input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 18px; color: var(--teks); outline: none; padding: 12px 0; }
.isian .awalan { font-weight: 600; color: var(--teks2); }
.centang { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.centang input { width: 24px; height: 24px; margin: 0; accent-color: var(--hadir); flex: none; }

/* Tombol */
.pil { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border: 0; border-radius: 26px; font: inherit; font-weight: 700;
  background: var(--hadir); color: var(--on-hadir); cursor: pointer; padding: 0 20px; text-align: center; }
.pil:disabled { background: var(--panel); color: var(--teks2); cursor: default; }
.pil.garis { background: none; color: var(--teks); border: 1.5px solid var(--garis-isian); }
.pil.garis:disabled { color: var(--teks2); border-color: var(--garis); cursor: default; }
.pil.bahaya { background: var(--bahaya); color: var(--on-bahaya); }
.pil.bahaya:disabled { background: var(--panel); color: var(--teks2); }
.tautan { border: 0; background: none; color: var(--hadir); font: inherit; font-weight: 600; min-height: 44px; padding: 0 4px; cursor: pointer; }
.tautan:disabled { color: var(--teks2); cursor: default; }
.baris-tombol { display: flex; gap: 12px; }
.baris-tombol .pil { flex: 1; }
/* Label panjang (Hapus akun tanpa sandi) tidak muat dua kolom di 360px */
.baris-tombol.tumpuk { flex-direction: column; }

/* Formulir masuk dan akun (S1 Task 10): kolom berlabel, tombol Tampilkan sandi di dalam isian, tautan di bawah tombol */
.formulir { display: flex; flex-direction: column; gap: 16px; }
.kolom { display: flex; flex-direction: column; gap: 6px; }
.lihat { flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--hadir); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lihat[aria-pressed="true"] { background: var(--hadir-wadah); }
.tautan-bawah { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
.tautan-bawah:empty { display: none; }
.info-ok { border-radius: 12px; padding: 12px 14px; background: var(--hadir-wadah); color: var(--hadir); font-weight: 600; }

/* Peringatan */
.peringatan { border-radius: 12px; padding: 12px 14px; background: var(--galat-bg); color: var(--galat); font-weight: 600; }
.peringatan.tunggu { background: var(--tunggu-bg); color: var(--tunggu); }

/* Kode OTP */
.kotak-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.kotak-otp span { display: flex; align-items: center; justify-content: center; height: 56px; border: 1.5px solid var(--garis-isian); border-radius: 12px;
  background: var(--permukaan); font-size: 24px; font-weight: 700; }
.kotak-otp span.aktif { border-color: var(--hadir); outline: 2px solid var(--hadir-wadah); }
.papan-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.papan-angka button { min-height: 56px; border: 0; border-radius: 14px; background: var(--permukaan); color: var(--teks); font: inherit; font-size: 22px; font-weight: 600; cursor: pointer; }
.papan-angka button:active { background: var(--panel); }

/* Kartu dan menu */
.kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.kartu .judul-kecil { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--teks2); }
.menu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 16px; overflow: hidden; }
.menu button, .menu a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-top: 1px solid var(--garis);
  background: none; color: var(--teks); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu > :first-child { border-top: 0; }
.menu .merah { color: var(--bahaya); font-weight: 600; }
.baris-sakelar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.sakelar { position: relative; width: 52px; height: 32px; border-radius: 16px; border: 0; background: var(--garis-isian); cursor: pointer; flex: none; }
.sakelar::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF; transition: left .15s; }
.sakelar[aria-checked="true"] { background: var(--hadir); }
.sakelar[aria-checked="true"]::after { left: 24px; }

/* Lembar dari bawah */
.tirai { position: fixed; inset: 0; background: var(--tirai); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.lembar { width: 100%; max-width: 480px; background: var(--permukaan); border-radius: 20px 20px 0 0; padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 14px;
  max-height: 90vh; overflow-y: auto; }
.lembar ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Layar Kode: QR selalu di pelat putih, juga di mode redup, supaya pemindai kasir bisa membacanya */
.kartu-qr { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 16px; padding: 20px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; }
.pelat-qr { background: #FFFFFF; border-radius: 12px; padding: 12px; width: 244px; max-width: 100%; }
.pelat-qr svg { display: block; width: 100%; height: auto; }
.qr-habis, .qr-tunggu { width: 220px; max-width: 100%; aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 20px; }
.qr-habis { border: 1.5px dashed var(--garis-isian); }
.qr-tunggu { background: var(--panel); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 4px; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 14px; background: var(--panel); color: var(--teks2);
  font-size: 13px; font-weight: 600; }
.chip.off { background: var(--tunggu-bg); color: var(--tunggu); }
.kode6 { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kode6-kiri, .kode6-kanan { display: flex; flex-direction: column; gap: 2px; }
.kode6-kanan { align-items: center; }
.angka6 { font-size: 28px; font-weight: 800; letter-spacing: .06em; }
.kode6-tombol { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.pil-pendek { width: auto; }
.baris-izin { display: flex; flex-direction: column; gap: 2px; }
.baris-izin .judul-kecil { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--teks2); }

/* Pindai QR struk (grup G4): layar kamera gelap di mode terang maupun redup */
.kamera { flex: 1; min-height: 100vh; background: #0E1217; color: #FFFFFF; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.kamera-atas { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0; }
.kamera-atas h1 { font-size: 18px; }
.kamera-atas .kembali { color: #FFFFFF; }
.kamera-atas .ruang { width: 44px; }
.kamera-tengah { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 24px; text-align: center; }
.kamera-tengah p { font-size: 14px; opacity: .88; line-height: 1.5; }
/* Kamera ditolak: tanpa bidikan, isinya turun ke tengah layar */
.kamera > .kamera-tengah:nth-child(2) { padding-top: 96px; }
.bidik { position: relative; width: min(280px, calc(100% - 64px)); aspect-ratio: 1; margin: 24px auto 0; border-radius: 16px; overflow: hidden; background: #000000; }
.bidik video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bidik .sudut { position: absolute; width: 36px; height: 36px; border: 4px solid #FFFFFF; }
.bidik .a { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.bidik .b { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.bidik .c { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.bidik .d { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.pil.terang { background: #FFFFFF; color: #0E1217; width: auto; }

/* Hasil klaim (grup G4) */
.kepala-klaim { display: flex; align-items: center; gap: 4px; margin: -8px 0 0 -8px; }
.kepala-klaim h1 { font-size: 20px; }
.venue { display: flex; align-items: center; gap: 12px; }
.ava-tempat { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--hadir-wadah); color: var(--hadir); display: flex; align-items: center;
  justify-content: center; font-size: 20px; font-weight: 800; }
.venue-isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.venue-isi b { font-size: 18px; overflow-wrap: anywhere; }
.dua-pil { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.kartu-hasil { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 16px; padding: 20px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center; }
.kartu-hasil p { line-height: 1.5; }
.kartu-hasil.galat { border-color: var(--galat); }
.lingkar-hasil { width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800;
  background: var(--panel); color: var(--teks2); }
.lingkar-hasil.hadir { background: var(--hadir-wadah); color: var(--hadir); }
.lingkar-hasil.tunggu { background: var(--tunggu-bg); color: var(--tunggu); }
.lingkar-hasil.galat { background: var(--galat-bg); color: var(--galat); }
.poin { font-size: 36px; font-weight: 800; line-height: 1.1; }
.chip.hadir { background: var(--hadir-wadah); color: var(--hadir); }
.chips.kiri { justify-content: flex-start; padding-top: 0; }
.tombol-bawah { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.teks-tautan { overflow-wrap: anywhere; }
.catatan { padding: 0 4px; line-height: 1.5; }
.kartu > .pil-pendek { align-self: flex-start; }

/* Kepala tab dengan lonceng kabar */
.kepala-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 0 16px; }
.lonceng { position: relative; width: 48px; height: 48px; border: 0; border-radius: 24px; background: none; color: var(--teks); display: flex; align-items: center;
  justify-content: center; cursor: pointer; flex: none; }
.angka-kabar { position: absolute; top: 6px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--galat); color: #FFFFFF;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }

/* Dompet dan kabar (grup G5) */
.poin-baris { display: flex; align-items: baseline; gap: 8px; }
.poin-baris b { font-size: 40px; line-height: 1.1; }
.poin-baris span { font-weight: 600; }
.hijau { color: var(--hadir); }
.baris-lokal { display: flex; align-items: center; gap: 12px; }
.titik-lokal { display: flex; gap: 6px; }
.titik-lokal span { width: 12px; height: 12px; border-radius: 6px; border: 2px solid var(--hadir); }
.titik-lokal span.penuh { background: var(--hadir); }
.lencana-baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lencana { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.lencana.raih { background: var(--hadir-wadah); color: var(--hadir); }
.lencana.belum { border: 1.5px dashed var(--garis-isian); color: var(--teks2); }
.lencana-ikon { font-size: 18px; }
.kartu.riwayat { padding: 0 16px; gap: 0; }
.baris-riwayat, .baris-kabar { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--garis); }
.riwayat > :first-child { border-top: 0; }
.riwayat-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.nilai { font-size: 18px; font-weight: 700; color: var(--hadir); }
.nilai.kurang { color: var(--teks2); }
.judul-kelompok { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--teks2); margin-bottom: -8px; }
.bulat-kabar { flex: none; width: 36px; height: 36px; border-radius: 18px; background: var(--panel); color: var(--teks2); display: flex; align-items: center;
  justify-content: center; font-weight: 800; }
.bulat-kabar.hadir { background: var(--hadir-wadah); color: var(--hadir); }
.titik-baca { flex: none; width: 10px; height: 10px; border-radius: 5px; background: var(--hadir); }
.b7 { font-weight: 700; }

/* Halaman klaim web k.html */
.merek-k { font-size: 18px; font-weight: 800; color: var(--nila); }
.pilih-peran, .isian-k { display: flex; flex-direction: column; gap: 6px; }
a.pil { text-decoration: none; }
@media (prefers-color-scheme: dark) { .merek-k { color: var(--hadir); } }

/* Navigasi bawah */
.nav-bawah { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--permukaan); border-top: 1px solid var(--garis); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 10; }
.nav-bawah button { min-height: 52px; border: 0; background: none; color: var(--teks2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 12px; }
.nav-bawah button[aria-current="page"] { color: var(--hadir); background: var(--hadir-wadah); }
.nav-bawah .pil-kode { color: var(--on-hadir); background: var(--hadir); }

/* Pesan singkat */
.snack { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--snack-bg); color: var(--snack-fg);
  padding: 12px 16px; border-radius: 12px; z-index: 30; }

/* Teks untuk pembaca layar saja (label isian cari) */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lh { line-height: 1.5; }

/* Sekitar (warga W5): pita terlihat dari mockup pitaTerlihat, kartu tempat, isian cari, dan kerangka selama lokasi atau daftar dimuat */
.pita-terlihat { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--hadir-wadah); color: var(--hadir); }
.pita-ikon { flex: none; display: flex; }
.pita-isi { flex: 1; min-width: 0; font-weight: 600; }
.pita-aksi { flex: none; min-height: 44px; padding: 0 14px; border: 1.5px solid currentColor; border-radius: 22px; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.pita-aksi:disabled { opacity: .6; cursor: default; }
.isian.cari input { font-size: 16px; }
.ikon-cari { flex: none; display: flex; color: var(--teks2); }
.daftar-tempat { display: flex; flex-direction: column; gap: 12px; margin-top: -4px; }
.kartu-tempat { flex-direction: row; align-items: flex-start; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kartu-tempat:focus-visible { outline: 3px solid var(--hadir); outline-offset: 2px; }
.kartu-tempat-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.baris-judul { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; }
.nama-tempat { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.baris-judul .chip { flex: none; }
.ikon-chip { display: flex; margin-right: 4px; }
.baris-ikon { display: flex; align-items: center; gap: 8px; }
.baris-ikon > span { display: flex; }
.kerangka { cursor: default; }
.kerangka .ava-tempat { background: var(--panel); }
.garis-kerangka { display: block; height: 12px; width: 45%; border-radius: 6px; background: var(--panel); }
.garis-kerangka.lebar { height: 16px; width: 70%; }

/* Room (warga W5): daftar, layar room setinggi layar dengan obrolan bergulir, blok sedang di sini, penulis pesan, dan lembar moderasi */
.satu-baris { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.baru { background: var(--nila); color: #FFFFFF; }
.chip.mulai { align-self: flex-start; }
.ke-bawah { margin-top: auto; }
.grow { flex: 1; min-width: 0; }
.tengah { text-align: center; }
.c-hadir { color: var(--hadir); }
.angka-tab { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px;
  background: var(--nila); color: #FFFFFF; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.layar-room { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.layar-room > .isi { overflow-y: auto; }
.tab-room { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 16px 0; background: var(--permukaan); border-bottom: 1px solid var(--garis); }
.tab-room button { min-height: 44px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--teks2); font: inherit; font-weight: 600; cursor: pointer; }
.tab-room button[aria-current="page"] { color: var(--hadir); border-bottom-color: var(--hadir); }
.isi-room { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.isi-room > .peringatan { margin: 0 12px 8px; }
.hadir-blok { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--garis); background: var(--permukaan); }
.hadir-blok.ciut { padding: 0 16px; }
.hadir-blok .baris-judul { align-items: center; min-height: 32px; }
.orang-hadir-baris { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 4px; }
.orang-hadir { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 64px; font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.ava-orang { width: 40px; height: 40px; border-radius: 20px; background: var(--hadir-wadah); color: var(--hadir); display: flex; align-items: center; justify-content: center;
  font-weight: 700; box-shadow: 0 0 0 2px var(--hadir); }
.chip-saya { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--panel); color: var(--teks); font-weight: 600; }
.chip-saya.hadir { background: var(--hadir-wadah); color: var(--hadir); }
.obrolan { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.pemisah-tanggal { align-self: center; padding: 2px 10px; border-radius: 10px; background: var(--panel); color: var(--teks2); font-size: 12px; font-weight: 700; }
.pesan { display: flex; }
.pesan.saya { justify-content: flex-end; }
.gelembung { max-width: 82%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--garis); border-radius: 16px 16px 16px 4px;
  background: var(--permukaan); color: var(--teks); font: inherit; text-align: left; overflow-wrap: anywhere; }
button.gelembung { cursor: pointer; }
button.gelembung:focus-visible { outline: 3px solid var(--hadir); outline-offset: 2px; }
.pesan.saya .gelembung { border-color: transparent; border-radius: 16px 16px 4px 16px; background: var(--hadir-wadah); }
.gelembung.redup { background: var(--panel); color: var(--teks2); font-style: italic; }
.siapa { font-size: 13px; font-weight: 700; color: var(--teks2); }
.isi-pesan { white-space: pre-wrap; }
.jam-pesan { align-self: flex-end; font-size: 12px; color: var(--teks2); }
.komposer { display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--garis); background: var(--permukaan); }
.komposer-isian { flex: 1; min-width: 0; display: flex; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--garis-isian); border-radius: 24px; background: var(--permukaan); }
.komposer-isian:focus-within { border-color: var(--hadir); outline: 2px solid var(--hadir-wadah); }
.komposer-isian input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--teks); outline: none; }
.komposer .pil { width: auto; min-height: 48px; padding: 0 18px; }
.hitung { flex: none; }
.kunci-isi { padding: 14px; border-radius: 14px; background: var(--panel); color: var(--teks2); line-height: 1.5; }
.judul-acara { font-size: 18px; }
.baris-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--garis);
  background: none; color: var(--teks); font: inherit; text-align: left; cursor: pointer; }
.baris-menu .merah { color: var(--galat); }
.pratinjau-pesan { background: var(--latar); }
.pratinjau-pesan p { margin: 0; overflow-wrap: anywhere; }
.pilihan-lapor { display: flex; flex-direction: column; gap: 8px; }
.pilihan-lapor .pil { justify-content: flex-start; padding: 0 20px; }
.pil.dipilih { background: var(--hadir-wadah); color: var(--hadir); box-shadow: inset 0 0 0 2px var(--hadir); }

/* Acara, info room, langganan, dan diblokir (warga W5) */
.pil-kecil { min-height: 44px; padding: 0 16px; }
.pratinjau-langganan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--latar); overflow-wrap: anywhere; }
.pratinjau-langganan .ava-orang { flex: none; box-shadow: none; }
.baris-blokir { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--garis); }
.baris-blokir:last-child { border-bottom: 0; }
.baris-blokir .ava-orang { flex: none; box-shadow: none; }
/* Snack selebar isinya sampai batas layar; tanpa ini kotaknya hanya setengah layar karena berpangkal di left: 50% */
.snack { width: max-content; }
/* Hapus akun di menu memakai warna galat: --bahaya di mode redup hanya 3:1 terhadap kartu, galat 7,4:1 (dan 6,5:1 di terang) */
.menu .merah { color: var(--galat); }