/* Potret Desa versi akun — aplikasi shell. Seluruh warna dari palet platform (tema.css). */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--palet-latar-halaman);
  color: var(--palet-teks-utama);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  line-height: 1.5;
}
.lewati { position: absolute; left: -999px; }
.lewati:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--palet-latar-panel); color: var(--palet-teks-utama); padding: .5rem 1rem; }
:focus-visible { outline: 3px solid var(--palet-warna-fokus); outline-offset: 2px; }

/* Kepala: merek di kiri, identitas wilayah proporsional di tengah, aksi di kanan. */
.kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .6rem 1.25rem;
  background: var(--palet-latar-header);
  color: var(--palet-teks-header);
}
.merek { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.merek img { width: 40px; height: 40px; object-fit: contain; background: var(--palet-latar-panel); border-radius: 8px; padding: 3px; }
.merek-teks { display: grid; line-height: 1.2; }
.merek-teks strong { font-size: 1.1rem; }
.merek-teks small { font-size: .8rem; opacity: .9; }
.wilayah {
  margin: 0;
  padding: .2rem .75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .875rem;
}
.kepala-aksi { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lencana {
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--palet-latar-panel);
  color: var(--palet-tema-primer);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .45rem 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.tombol.utama { background: var(--palet-tombol-primer); color: var(--palet-teks-tombol-primer); }
.tombol.utama:hover { background: var(--palet-tema-primer-gelap); }
.tombol.sekunder { background: var(--palet-latar-panel); color: var(--palet-teks-utama); border-color: var(--palet-garis-kuat); }
.tombol.sekunder:hover { background: var(--palet-latar-hover); }
.tombol.bahaya { background: var(--palet-status-bahaya); color: var(--palet-teks-terbalik); }
.tombol.besar { min-height: 3rem; font-size: 1.05rem; width: 100%; }
.tombol:disabled { background: var(--palet-latar-disabled); color: var(--palet-teks-sekunder); cursor: not-allowed; border-color: transparent; }

main { flex: 1; display: flex; flex-direction: column; }
.layar[hidden] { display: none !important; }

/* Layar unggah */
.layar-unggah {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  align-items: start;
}
.eyebrow { margin: 0 0 .5rem; color: var(--palet-tema-primer); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.pengantar h1 { margin: 0 0 1rem; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; }
.pengantar p { color: var(--palet-teks-sekunder); }
.keunggulan { padding-left: 1.1rem; display: grid; gap: .35rem; }
.unggah {
  background: var(--palet-latar-panel);
  border: 1px solid var(--palet-warna-garis);
  border-radius: 14px;
  padding: 1.25rem;
  display: grid;
  gap: .9rem;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--palet-warna-bayangan) 14%, transparent);
}
.unggah h2 { margin: 0; font-size: 1.15rem; }
.slot-daftar { display: grid; gap: .75rem; }
.slot {
  display: grid;
  gap: .25rem;
  padding: .75rem .9rem;
  border: 1px dashed var(--palet-garis-kuat);
  border-radius: 10px;
  background: var(--palet-latar-subtle);
  cursor: pointer;
}
.slot.terisi { border-style: solid; border-color: var(--palet-status-baik); background: var(--palet-latar-status-baik); }
.slot.salah { border-style: solid; border-color: var(--palet-status-bahaya); background: var(--palet-latar-status-bahaya); }
.slot-judul { font-weight: 700; }
.slot-isi { font-size: .875rem; color: var(--palet-teks-sekunder); }
/* Masukan berkas bawaan browser (berbahasa Inggris) disembunyikan; tetap dapat difokus dan diakses pembaca layar. */
.slot { position: relative; }
.slot input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.slot:focus-within { outline: 3px solid var(--palet-warna-fokus); outline-offset: 2px; }
.slot.seret { border-style: solid; border-color: var(--palet-tema-primer); background: var(--palet-latar-hover); }
.slot-tombol {
  justify-self: start;
  margin-top: .2rem;
  padding: .3rem .8rem;
  border-radius: 8px;
  border: 1px solid var(--palet-garis-kuat);
  background: var(--palet-latar-panel);
  color: var(--palet-teks-utama);
  font-size: .85rem;
  font-weight: 650;
}
.slot.terisi .slot-tombol::after { content: " (ganti)"; font-weight: 400; }
.slot-status { font-size: .85rem; font-weight: 600; }
.galat {
  margin: 0;
  padding: .6rem .8rem;
  border-radius: 8px;
  background: var(--palet-latar-status-bahaya);
  color: var(--palet-teks-utama);
  border-left: 4px solid var(--palet-status-bahaya);
}
.catatan { margin: 0; font-size: .85rem; color: var(--palet-teks-sekunder); }

/* Layar proses */
.layar-proses { max-width: 640px; width: 100%; margin: 0 auto; padding: 4rem 1.25rem; display: grid; gap: .75rem; text-align: center; }
.layar-proses h1 { margin: 0; }
.proses-label { margin: 0; font-weight: 600; min-height: 1.5em; }
.bilah { height: 14px; border-radius: 999px; background: var(--palet-latar-subtle); border: 1px solid var(--palet-warna-garis); overflow: hidden; }
.bilah span { display: block; height: 100%; width: 0; background: var(--palet-tema-primer); transition: width .3s ease; }
.proses-persen { margin: 0; font-variant-numeric: tabular-nums; color: var(--palet-teks-sekunder); }

/* Layar hasil: iframe mengisi sisa tinggi layar */
.layar-hasil { flex: 1; display: flex; min-height: 0; }
.layar-hasil iframe { flex: 1; width: 100%; min-height: calc(100dvh - 64px); border: 0; background: var(--palet-latar-halaman); }

.dialog {
  max-width: 560px;
  width: calc(100% - 2rem);
  border: 0;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  background: var(--palet-latar-panel);
  color: var(--palet-teks-utama);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--palet-warna-bayangan) 14%, transparent);
}
.dialog::backdrop { background: var(--palet-warna-overlay); opacity: .6; }
.dialog h2 { margin-top: 0; }
.dialog-aksi { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ halaman akun (Tahap 5) */
.tersembunyi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.halaman-akun { padding: 2rem 1.25rem 3rem; }
.akun-wadah { max-width: 1040px; width: 100%; margin: 0 auto; display: grid; gap: 1.25rem; }
.akun-wadah--sempit { max-width: 480px; }
#bagianPilih { max-width: 640px; width: 100%; justify-self: center; }
.pita-uji {
  margin: 0;
  padding: .5rem .8rem;
  border-radius: 8px;
  background: var(--palet-latar-status-informasi);
  border-left: 4px solid var(--palet-status-informasi);
  color: var(--palet-teks-utama);
  font-size: .875rem;
}
.memuat { margin: 0; color: var(--palet-teks-sekunder); }
.kartu-akun {
  background: var(--palet-latar-panel);
  border: 1px solid var(--palet-warna-garis);
  border-radius: 14px;
  padding: 1.5rem;
  display: grid;
  gap: .9rem;
  align-content: start;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--palet-warna-bayangan) 14%, transparent);
}
.kartu-akun h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; }
.kartu-akun h2 { margin: 0; font-size: 1.1rem; }
.kartu-akun--kecil { padding: 1.15rem 1.25rem; gap: .6rem; }
.tab-akun { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; border-radius: 10px; background: var(--palet-latar-subtle); }
.tab-akun button {
  min-height: 2.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--palet-teks-sekunder);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.tab-akun button[aria-selected="true"] { background: var(--palet-latar-panel); color: var(--palet-teks-utama); box-shadow: 0 1px 4px color-mix(in srgb, var(--palet-warna-bayangan) 14%, transparent); }
.formulir { display: grid; gap: .85rem; }
.formulir h2 { margin: 0; }
.formulir-pengantar { margin: 0; color: var(--palet-teks-sekunder); }
.formulir label { display: grid; gap: .3rem; font-weight: 650; }
.formulir input:not([type="checkbox"]), .formulir select {
  font: inherit;
  font-weight: 400;
  min-height: 2.75rem;
  padding: .5rem .7rem;
  border: 1px solid var(--palet-garis-kuat);
  border-radius: 8px;
  background: var(--palet-latar-panel);
  color: var(--palet-teks-utama);
}
.formulir select:disabled { background: var(--palet-latar-disabled); color: var(--palet-teks-sekunder); }
.formulir .centang { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; }
.centang input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--palet-tema-primer); }
.petunjuk { font-weight: 400; font-size: .85rem; color: var(--palet-teks-sekunder); }
.isian-sandi { position: relative; display: grid; }
.isian-sandi input { padding-right: 6.5rem !important; }
.tampil-sandi {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  padding: .25rem .55rem;
  border: 0;
  border-radius: 6px;
  background: var(--palet-latar-subtle);
  color: var(--palet-teks-utama);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.tautan-tombol {
  justify-self: center;
  border: 0;
  background: none;
  color: var(--palet-tema-primer-gelap);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: .25rem;
}
.info-akun h2 { margin: 0 0 .4rem; }
.info-akun p { margin: 0; color: var(--palet-teks-sekunder); }
.ringkas-wilayah {
  display: grid;
  gap: .15rem;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: var(--palet-latar-subtle);
  border-left: 4px solid var(--palet-tema-primer);
}
.ringkas-wilayah span { color: var(--palet-teks-sekunder); font-size: .9rem; }
.akun-kepala { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.akun-kepala h1 { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.15; }
.akun-kepala .formulir-pengantar { margin-top: .25rem; }
.besar-sedang { min-height: 2.9rem; padding-inline: 1.4rem; }
.kisi-akun { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.daftar-isian { margin: 0; display: grid; gap: .5rem; }
.daftar-isian div { display: grid; gap: .05rem; }
.daftar-isian dt { font-size: .8rem; color: var(--palet-teks-sekunder); }
.daftar-isian dd { margin: 0; font-weight: 650; }
.nilai-besar { margin: 0; font-size: 1.9rem; font-weight: 750; color: var(--palet-tema-primer-gelap); line-height: 1.1; }
.nilai-besar small { font-size: .95rem; font-weight: 600; color: var(--palet-teks-sekunder); }
.kartu-akun--kecil .tombol { justify-self: start; }
.email-akun { font-size: .875rem; opacity: .95; overflow-wrap: anywhere; }
.tabel-gulir { overflow-x: auto; }
.tabel-akun { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel-akun th, .tabel-akun td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--palet-warna-garis); vertical-align: top; }
.tabel-akun th { font-size: .8rem; color: var(--palet-teks-sekunder); text-transform: uppercase; letter-spacing: .04em; }
.status-build {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 650;
  color: var(--palet-teks-utama);
  background: var(--palet-latar-status-informasi);
  white-space: normal;
}
.status-build[data-status="selesai"] { background: var(--palet-latar-status-baik); }
.status-build[data-status="gagal"], .status-build[data-status="ditolak"] { background: var(--palet-latar-status-bahaya); }
.kuota-unggah { margin: 0; font-size: .9rem; font-weight: 600; }
.kuota-unggah.habis { padding: .6rem .8rem; border-radius: 8px; background: var(--palet-latar-status-waspada); border-left: 4px solid var(--palet-status-waspada); }

@media (max-width: 820px) {
  .layar-unggah { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1rem; }
  .kepala { padding: .45rem .75rem; gap: .4rem .6rem; }
  .merek img { width: 32px; height: 32px; }
  .merek-teks small { display: none; }
  .wilayah { font-size: .78rem; padding: .1rem .55rem; }
  .kepala-aksi { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: .35rem; }
  .kepala-aksi .lencana { display: none; }
  .kepala-aksi .tombol { flex: 1 1 0; min-height: 2.25rem; padding: .3rem .5rem; font-size: .8rem; white-space: nowrap; }
}
@media (max-width: 820px) {
  .kisi-akun { grid-template-columns: 1fr; }
  .halaman-akun { padding: 1.25rem 1rem 2.5rem; }
  .kartu-akun { padding: 1.15rem; }
  .email-akun { display: none; }
  .akun-kepala .tombol { width: 100%; }
}
.layar-memuat { margin: 0; padding: 3rem 1.25rem; text-align: center; }
.kepala-akun { margin-left: auto; }
.kepala-aksi:not([hidden]) + .kepala-akun { margin-left: 0; }
/* ------------------------------------------------------------------ Premium (Tahap 8) */
.lisensi { margin: 0; font-size: .8rem; opacity: .95; }
.lencana--premium { background: var(--palet-tombol-primer); color: var(--palet-teks-tombol-primer); }
.pemberitahuan {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  border-radius: 8px;
  background: var(--palet-latar-status-informasi);
  border-left: 4px solid var(--palet-status-informasi);
  color: var(--palet-teks-utama);
  font-size: .9rem;
}

/* ------------------------------------------------------------------ aktivasi dan admin (Tahap 6) */
.akun-wadah--sedang { max-width: 760px; }
.akun-wadah--lebar { max-width: 1240px; }
.catatan--tegas { color: var(--palet-teks-utama); font-weight: 600; }
.sukses {
  margin: 0;
  padding: .6rem .8rem;
  border-radius: 8px;
  background: var(--palet-latar-status-baik);
  border-left: 4px solid var(--palet-status-baik);
  color: var(--palet-teks-utama);
}
.status-paket { border-left: 5px solid var(--palet-status-baik); }
.status-paket[data-paket="tenggang"] { border-left-color: var(--palet-status-waspada); background: var(--palet-latar-status-waspada); }
.status-paket p { margin: 0; color: var(--palet-teks-sekunder); }
#kartuPaket[data-paket="premium"] .nilai-besar { color: var(--palet-tema-primer-gelap); }
.pilihan-periode { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.kartu-periode {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: 1rem 1rem 1rem 2.6rem;
  border: 2px solid var(--palet-warna-garis);
  border-radius: 12px;
  background: var(--palet-latar-panel);
  cursor: pointer;
  font-weight: 400;
}
.kartu-periode:has(input:checked) { border-color: var(--palet-tema-primer); background: var(--palet-latar-subtle); }
.kartu-periode input { position: absolute; left: 1rem; top: 1.15rem; width: 1.1rem; height: 1.1rem; accent-color: var(--palet-tema-primer); }
.kartu-periode__judul { font-weight: 700; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.kartu-periode__harga { font-size: 1.6rem; font-weight: 800; color: var(--palet-tema-primer-gelap); line-height: 1.15; }
.kartu-periode__rinci { font-size: .85rem; color: var(--palet-teks-sekunder); font-weight: 400; }
.formulir .kartu-periode { font-weight: 400; }
.lencana-hemat { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--palet-latar-status-baik); color: var(--palet-teks-utama); }
.total-bayar {
  display: grid;
  gap: .15rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--palet-latar-subtle);
  border: 1px solid var(--palet-garis-kuat);
}
.total-bayar span { font-size: .85rem; color: var(--palet-teks-sekunder); }
.total-bayar strong { font-size: 2rem; color: var(--palet-tema-primer-gelap); font-variant-numeric: tabular-nums; line-height: 1.15; }
.total-bayar small { color: var(--palet-teks-sekunder); }
.daftar-isian--dua { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; }
.angka-salin { font-variant-numeric: tabular-nums; letter-spacing: .03em; user-select: all; }
.qris { margin: 0; display: grid; justify-items: start; gap: .4rem; }
.qris iframe { width: 100%; height: 460px; background: var(--palet-latar-panel); border: 1px solid var(--palet-warna-garis); border-radius: 8px; }
.qris figcaption a { color: var(--palet-tema-primer-gelap); font-weight: 650; }
.qris-admin { display: grid; gap: .6rem; padding-top: .75rem; border-top: 1px solid var(--palet-warna-garis); }
.qris figcaption { font-size: .85rem; color: var(--palet-teks-sekunder); }
.kartu-akun h3 { margin: .5rem 0 0; font-size: 1rem; }
.formulir textarea {
  font: inherit;
  font-weight: 400;
  padding: .5rem .7rem;
  border: 1px solid var(--palet-garis-kuat);
  border-radius: 8px;
  background: var(--palet-latar-panel);
  color: var(--palet-teks-utama);
  resize: vertical;
}
.aksi-bawah { display: flex; justify-content: center; }
.tab-admin { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 10px; background: var(--palet-latar-subtle); }
.tab-admin button {
  min-height: 2.4rem;
  padding: .3rem .9rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--palet-teks-sekunder);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.tab-admin button[aria-selected="true"] { background: var(--palet-latar-panel); color: var(--palet-teks-utama); box-shadow: 0 1px 4px color-mix(in srgb, var(--palet-warna-bayangan) 14%, transparent); }
.hitung:not(:empty) { margin-left: .3rem; padding: 0 .45rem; border-radius: 999px; background: var(--palet-tombol-primer); color: var(--palet-teks-tombol-primer); font-size: .78rem; }
.panel-admin { display: grid; gap: 1rem; margin-top: 1rem; }
.kisi-angka { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.kartu-angka { display: grid; gap: .2rem; padding: 1rem; border-radius: 12px; background: var(--palet-latar-panel); border: 1px solid var(--palet-warna-garis); }
.kartu-angka strong { font-size: 1.8rem; color: var(--palet-tema-primer-gelap); line-height: 1.1; }
.kartu-angka span { font-size: .85rem; color: var(--palet-teks-sekunder); }
.baris-alat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.baris-alat label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 650; }
.baris-alat input, .baris-alat select {
  font: inherit;
  min-height: 2.4rem;
  padding: .35rem .6rem;
  border: 1px solid var(--palet-garis-kuat);
  border-radius: 8px;
  background: var(--palet-latar-panel);
  color: var(--palet-teks-utama);
  min-width: 14rem;
}
.kisi-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.tombol--kecil { min-height: 2rem; padding: .2rem .65rem; font-size: .85rem; }
.aksi-baris { display: flex; flex-wrap: wrap; gap: .35rem; }
.teks-kecil { font-size: .82rem; color: var(--palet-teks-sekunder); }
.tabel-akun td { background: var(--palet-latar-panel); }

@media (max-width: 820px) {
  .kepala-akun { width: auto; margin-left: auto; }
  .kepala-akun .tombol { flex: 0 0 auto; }
}
@media (max-width: 820px) {
  .pilihan-periode, .daftar-isian--dua, .kisi-dua { grid-template-columns: 1fr; }
  .baris-alat input, .baris-alat select { min-width: 0; width: 100%; }
  .baris-alat label { flex: 1 1 100%; }
}
@media (max-width: 820px) {
  /* Di ponsel formulir unggah lebih cepat terlihat: daftar keunggulan disembunyikan. */
  .layar-unggah .keunggulan { display: none; }
}

/* Persetujuan pemrosesan (K-32) */
.dialog-persetujuan { max-width: 40rem; max-height: 90vh; overflow-y: auto; }
.dialog-persetujuan ul { padding-left: 1.2rem; }
.dialog-persetujuan li { margin-bottom: .45rem; }
.cek-persetujuan { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0; font-weight: 600; }
.cek-persetujuan input { margin-top: .25rem; flex: none; width: 1.1rem; height: 1.1rem; }

/* K-43: logo produk Potret Desa di kepala aplikasi */
.merek--produk img { width: auto; height: 42px; background: none; padding: 0; border-radius: 0; display: block; }
.merek-label { padding: .2rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--palet-teks-header) 16%, transparent); font-size: .78rem; font-weight: 700; }
@media (max-width: 600px) { .merek--produk img { height: 34px; } }

/* ------------------------------------------------------------------ beranda ruang kerja lima fase (K-43) */
.layar-ruang { padding: 1.75rem 1.25rem 3rem; }
.ruang-wadah { max-width: 1240px; margin: 0 auto; display: grid; gap: 1.5rem; }
.ruang-ringkas { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; border-radius: 18px; background: var(--palet-latar-panel); border: 1px solid var(--palet-warna-garis); }
.ruang-ringkas__teks { flex: 1 1 420px; display: grid; gap: .35rem; }
.ruang-ringkas__teks h1 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.ruang-ringkas__teks p { margin: 0; color: var(--palet-teks-sekunder); }
.ruang-ringkas__aksi { display: flex; flex-wrap: wrap; gap: .6rem; }
.ruang-status { justify-self: start; padding: .25rem .75rem; border-radius: 999px; background: var(--palet-latar-status-baik); color: var(--palet-teks-utama); font-size: .85rem; font-weight: 700; }

.ruang-peran { display: grid; gap: .6rem; }
.ruang-peran h2 { margin: 0; font-size: 1.05rem; }
.ruang-peran__daftar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.peran { display: grid; gap: .2rem; text-align: left; padding: .85rem 1rem; border-radius: 14px; border: 2px solid var(--palet-warna-garis); background: var(--palet-latar-panel); color: var(--palet-teks-utama); font: inherit; cursor: pointer; }
.peran:hover { border-color: var(--palet-tema-primer); }
.peran[aria-pressed="true"] { border-color: var(--palet-tema-primer); background: var(--palet-latar-subtle); }
.peran small { color: var(--palet-teks-sekunder); }

.ruang-isi { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.ruang-fase { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; flex: 999 1 620px; min-width: 0; }
.fase, .fase-gerbang { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.1rem; padding: 1.3rem 1.4rem; border-radius: 18px; background: var(--palet-latar-panel); border: 1px solid var(--palet-warna-garis); }
.fase-gerbang { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; background: var(--palet-latar-status-waspada); border-color: var(--palet-status-waspada); }
.fase-gerbang h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.fase-gerbang p { margin: 0; font-size: .92rem; }
.fase--sorot { border: 2px solid var(--palet-tema-primer); box-shadow: 0 14px 34px color-mix(in srgb, var(--palet-warna-bayangan) 10%, transparent); }
.fase-ikon { width: 52px; height: 52px; border-radius: 16px; background: var(--palet-latar-subtle); color: var(--palet-tema-primer-gelap); display: flex; align-items: center; justify-content: center; }
.fase--sorot .fase-ikon { background: var(--palet-tombol-primer); color: var(--palet-teks-tombol-primer); }
.fase-ikon--waspada { width: 44px; height: 44px; border-radius: 12px; background: var(--palet-status-waspada); color: var(--palet-teks-terbalik); }
.fase-ikon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fase-isi { display: grid; gap: .65rem; min-width: 0; }
.fase-judul { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.fase-judul h3 { margin: 0; font-size: 1.15rem; }
.fase-status { font-size: .75rem; font-weight: 800; padding: .15rem .6rem; border-radius: 999px; background: var(--palet-latar-subtle); color: var(--palet-teks-sekunder); }
.fase-status[data-status="dibuka"] { background: var(--palet-latar-status-baik); color: var(--palet-teks-utama); }
.fase-status[data-status="berikut"] { background: var(--palet-latar-status-waspada); color: var(--palet-teks-verifikasi-data); }
.fase-tanya { margin: 0; color: var(--palet-teks-sekunder); }
.fase-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.fase-angka > div { display: grid; gap: .15rem; align-content: start; }
.fase-angka strong { font-size: 1.35rem; line-height: 1.2; }
.fase-angka small { color: var(--palet-teks-sekunder); }
.fase-alat { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.fase-alat > span { font-size: .85rem; color: var(--palet-teks-sekunder); }
.alat { min-height: 36px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--palet-warna-garis); background: var(--palet-latar-panel); color: var(--palet-teks-utama); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.alat:hover { background: var(--palet-latar-hover); }
.fase-keluaran { margin: 0; padding-top: .6rem; border-top: 1px solid var(--palet-warna-garis); font-size: .9rem; }

.label-info { justify-self: start; display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.label-info--resmi { background: var(--palet-latar-status-informasi); color: var(--palet-teks-utama); }
.label-info--analitis { background: var(--palet-latar-status-waspada); color: var(--palet-teks-verifikasi-data); }
.label-info--kandidat { background: var(--palet-latar-status-khusus); color: var(--palet-teks-utama); }
.label-info--simulasi { background: var(--palet-latar-status-baik); color: var(--palet-teks-utama); }

.ruang-samping { flex: 1 1 280px; max-width: 360px; display: grid; gap: 1rem; }
.ruang-kotak { display: grid; gap: .55rem; padding: 1.2rem; border-radius: 16px; background: var(--palet-latar-panel); border: 1px solid var(--palet-warna-garis); }
.ruang-kotak--lembut { background: var(--palet-latar-subtle); }
.ruang-kotak h2 { margin: 0; font-size: 1rem; }
.ruang-kotak p { margin: 0; font-size: .88rem; }
.ruang-pengembang { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .85rem; color: var(--palet-teks-sekunder); }
.ruang-pengembang img { width: 36px; height: 36px; border-radius: 10px; background: var(--palet-latar-panel); padding: 3px; border: 1px solid var(--palet-warna-garis); }

@media (max-width: 760px) {
  .ruang-samping { max-width: none; }
  .fase { grid-template-columns: 1fr; }
  .fase-gerbang { grid-template-columns: 1fr; }
}

/* Lembar Kerja Desa (K-44) */
.alat--unduh { border-color: var(--palet-tema-primer); color: var(--palet-tema-primer-gelap); }

/* Hapus akun (K-46) */
.kartu-akun--bahaya { border-color: var(--palet-status-bahaya); }
.kartu-akun--bahaya h2 { color: var(--palet-status-bahaya); }
.kartu-akun--bahaya .tombol { justify-self: start; width: auto; }