/* Prototipe telepon aplikasi warga.
   Resolusi tetap 360 × 780 px seperti emulator: seluruh ukuran di berkas ini
   adalah piksel perangkat, bukan piksel halaman, sehingga tata letak di dalam
   telepon identik pada zoom berapa pun. Panel preview hanya menskalakan.

   Berkas ini memiliki seluruh gaya `.phone` dan `.p-*`. Tidak ada lapisan
   telepon di app.css maupun studio.css, supaya satu nilai hanya punya satu
   tempat. Nilai di sini sengaja tetap dan tidak memakai token SATSET: isinya
   meniru aplikasi warga, bukan antarmuka lokakarya.

   Warna yang datang dari konfigurasi pengguna masuk sebagai properti khusus
   pada elemen `.phone`:
     --app         warna utama aplikasi
     --app-soft    warna utama dengan alfa rendah
     --app-ink     warna teks yang kontras di atas --app
     --app-detail  warna aksen detail yang tetap terbaca di atas latar terang */

.phone{
  --app: #2563eb;
  --app-soft: rgba(37,99,235,.1);
  --app-ink: #ffffff;
  --app-detail: var(--app);
  --ink: #23322b;
  --ink-2: #5a685f;
  --ink-3: #758277;
  --line: #e7ebe5;
  --surface: #ffffff;

  position:relative;flex:none;
  width:360px;height:780px;
  border-radius:43px;
  background:#252d29;
  padding:7px;
  box-shadow:0 22px 42px -18px #202f294d, 0 0 0 1px #414a42;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.p-screen{
  position:relative;height:100%;width:100%;
  border-radius:36px;overflow:hidden;
  display:flex;flex-direction:column;
  background:#f5f7fa;
}

/* Pulau dinamis. Bagian kerangka perangkat, bukan antarmuka aplikasi. */
.p-notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:88px;height:23px;border-radius:999px;background:#05070c;z-index:5;
}

/* ─────────── Bilah status ─────────── */
.p-statusbar{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  height:47px;padding:0 20px 0 22px;
  font-size:12px;color:var(--ink);
}
.p-clock{font-size:12px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.p-sysicons{display:flex;align-items:center;gap:5px}
.p-sysicons svg{display:block}
/* Kepala aplikasi berwarna penuh naik sampai tepi atas layar dan ikon sistem
   ikut mengikuti warna kontras — perilaku aplikasi dengan bilah atas berwarna. */
.p-screen.is-solidtop .p-statusbar{background:var(--app);color:var(--app-ink)}

/* ─────────── Kepala aplikasi ─────────── */
.p-appbar{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:8px 20px 16px;
  color:var(--ink);
}
.p-appbar.is-solid{background:var(--app);color:var(--app-ink);padding-bottom:16px}
/* Bingkai lambang berukuran tetap. Flex, bukan grid: pada grid yang track-nya
   mengikuti isi, batas tinggi persentase pada gambar tidak punya acuan, dan
   lambang yang tinggi memanjang keluar bingkai. */
.p-applogo{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;padding:6px;
  background:#fff;border:1px solid var(--line);color:var(--app);
}
/* Rasio apa pun — persegi, melebar, meninggi — diciutkan ke dalam bingkai. */
.p-applogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.p-appbar.is-solid .p-applogo{background:rgba(255,255,255,.18);border-color:transparent}
.p-iconbtn{
  flex:none;display:grid;place-items:center;
  width:36px;height:36px;border-radius:12px;
  background:rgba(255,255,255,.18);color:inherit;font-size:20px;cursor:pointer;
}
.p-iconbtn:hover{background:rgba(255,255,255,.3)}
.p-appbar-text{flex:1;min-width:0}
.p-appbar-title{font-size:16px;font-weight:650;letter-spacing:-.01em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-appbar-sub{font-size:10px;line-height:1.35;margin-top:3px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-appbar.is-solid .p-appbar-sub{color:inherit;opacity:.8}
.p-bell{
  position:relative;flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  color:var(--ink);font-size:18px;
}
.p-bell.has-dot::after{
  content:"";position:absolute;top:6px;right:8px;
  width:5px;height:5px;border-radius:999px;background:var(--app);
}

.p-subbar{flex:none;padding:0 18px 12px}

/* ─────────── Area gulung ─────────── */
.p-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:8px 18px 22px;
  display:flex;flex-direction:column;gap:20px;
  scrollbar-width:none;
}
.p-scroll::-webkit-scrollbar{display:none}
.p-scroll > *{flex:none}
.p-block{display:flex;flex-direction:column;gap:10px}
.p-page{display:grid;gap:16px}
.p-page-heading h2{font:26px/1.2 Georgia,serif;letter-spacing:-.6px;margin:5px 0 8px}
.p-page-heading + .p-card{margin-top:0}

.p-sectionhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.p-sectiontitle{font-size:13px;font-weight:600;letter-spacing:-.015em}
.p-sectionlink{
  flex:none;display:flex;align-items:center;gap:3px;
  min-height:32px;padding:0 2px;
  font-size:10px;font-weight:600;color:var(--ink-2);
}
.p-sectionlink .icon{font-size:12px}
.p-welcome{padding:9px 2px 4px}
.p-welcome h2{
  font-family:Georgia,serif;font-weight:400;font-size:28px;line-height:1.16;
  letter-spacing:-.8px;max-width:230px;margin:11px 0 10px;
}
.p-welcome > p:last-child{font-size:11px;color:var(--ink-2)}
.p-kicker{font-size:9px;letter-spacing:1.5px;font-weight:600;color:var(--ink-3)}

/* ─────────── Kartu identitas ─────────── */
.p-idcard{
  border-radius:13px;padding:16px;
  background:var(--app);color:var(--app-ink);
}
.p-idcard .p-idlabel,
.p-idcard .p-idname,
.p-idcard .p-idmeta,
.p-idcard .p-idnumber,
.p-idcard .p-idnote,
.p-idcard .p-idqr{color:inherit}
.p-idtop{display:flex;align-items:center;justify-content:space-between}
.p-idlabel{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.85}
.p-idqr{font-size:26px;opacity:.9}
.p-idbody{display:flex;align-items:center;gap:14px;margin-top:14px}
.p-avatar{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.22);
  font-size:12px;font-weight:700;color:#fff;
}
.p-idcard .p-avatar{background:#ffffff20;color:inherit}
.p-avatar.is-lg{width:52px;height:52px;border-radius:18px;font-size:18px}
.p-idname{font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.p-idnumber{font-size:10px;font-weight:600;letter-spacing:.06em;opacity:.8;margin-top:4px;font-variant-numeric:tabular-nums}
.p-idmeta{font-size:10px;opacity:.8;margin-top:3px}
/* Penanda bahwa warga di dalam pratinjau adalah tokoh contoh. */
.p-idnote{font-size:9px;opacity:.75;margin-top:12px;letter-spacing:.02em}
.p-idcard.is-compact{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;color:var(--ink)}
.p-idcard.is-compact .p-idname{font-size:14px}
.p-idcard.is-compact .p-idmeta{font-size:11px;letter-spacing:.04em;margin-top:2px;font-variant-numeric:tabular-nums}

/* ─────────── Pencarian ─────────── */
.p-search{
  display:flex;align-items:center;gap:10px;
  min-height:42px;padding:0 8px 0 14px;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);
  font-size:11px;color:var(--ink-3);
}
.p-searchicon{flex:none;font-size:18px;color:var(--ink-3)}
.p-search .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-searchscan{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:10px;
  background:transparent;font-size:18px;
}

/* ─────────── Pintasan layanan ─────────── */
/* `minmax(0,1fr)` wajib: dengan `1fr` saja, nama layanan terpanjang menaikkan
   lebar minimum kolom sampai kisi meluber keluar layar. */
.p-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;
  padding:4px 0;border:0;background:transparent;
}
.p-tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:0;text-align:center;
}
.p-tileicon{
  flex:none;display:grid;place-items:center;
  width:48px;height:48px;border-radius:15px;
  background:var(--app-soft);
  border:1px solid color-mix(in srgb, var(--app) 10%, transparent);
  font-size:23px;
}
/* Label dikunci dua baris agar seluruh ikon dan teks satu kisi tetap sejajar
   meskipun panjang nama layanan berbeda-beda. */
.p-tilename{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  width:100%;height:2.8em;overflow:hidden;overflow-wrap:break-word;
  font-size:10px;font-weight:500;line-height:1.4;color:var(--ink-2);
}
/* Petak tanpa bingkai: umpan tekan lewat ikon, bukan bayangan menggantung. */
.p-tile.tappable:hover{box-shadow:none}
.p-tile.tappable:hover .p-tileicon{filter:brightness(.96)}

/* ─────────── Kartu umum ─────────── */
.p-card{
  border-radius:13px;padding:15px;
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px;
  box-shadow:0 2px 3px #20302902;
}
.p-card.is-empty{align-items:flex-start;background:#eef2f7;border-style:dashed}
.p-card.is-alert{background:#fef2f2;border-color:#fecaca}
.p-card.is-note{background:var(--app-soft);border-color:transparent}
.p-cardtitle{font-size:12px;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.p-cardsub{font-size:11px;line-height:1.65;color:var(--ink-2)}
.p-cardnote{font-size:10px;color:var(--ink-3)}
.p-rowbetween{display:flex;align-items:center;justify-content:space-between;gap:10px}
.p-rowicon{display:flex;align-items:flex-start;gap:12px}
.p-alerticon{flex:none;font-size:20px;color:#dc2626;margin-top:1px}
.p-pill{
  flex:none;align-self:flex-start;padding:3px 9px;border-radius:999px;
  background:var(--app-soft);
  font-size:9px;font-weight:500;
}
.p-bar{height:4px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:2px}
.p-bar > i{display:block;height:100%;border-radius:999px;background:var(--app)}

/* Modul yang ditonjolkan naik ke atas dan diberi penanda halus. */
.p-block.is-featured .p-sectiontitle{color:var(--ink)}
.p-card.is-featured{box-shadow:none;border-color:var(--line)}

.p-emergency{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:16px;
  background:#dc2626;color:#fff;
}
.p-emergency .icon{font-size:22px}
.p-emergency .p-cardsub{color:rgba(255,255,255,.88)}

/* ─────────── Berita dan artikel ─────────── */
.p-newsrow{display:flex;align-items:center;gap:12px}
.p-newsthumb{
  flex:none;display:grid;place-items:center;
  width:46px;height:46px;border-radius:10px;
  background:#eeeee5;color:#5d7160;font-size:23px;
}
.p-newstitle{font-size:11px;font-weight:600;line-height:1.5}
.p-newsmeta{font-size:9px;color:var(--ink-3);margin-top:3px}

.p-chips{display:flex;gap:5px;overflow:auto;scrollbar-width:none}
.p-chips::-webkit-scrollbar{display:none}
.p-chip{
  white-space:nowrap;font-size:10px;min-height:32px;padding:8px 12px;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
}
.p-chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.p-article{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--surface);text-align:left;width:100%;
}
.p-editorial{height:120px;display:grid;place-items:center;background:#dde5d7;color:#667b5d}
.p-editorial .icon{font-size:58px}
.art-1{background:#ede5d6;color:#9f8760}
.art-2{background:#dce6e8;color:#608487}
.p-article-body{padding:14px}
.p-article-body h3{
  font-family:Georgia,serif;font-size:19px;font-weight:400;line-height:1.3;
  letter-spacing:-.3px;margin:7px 0;
}
.p-article-copy{font-size:13px;line-height:1.85;color:var(--ink-2)}

/* ─────────── Peta dan daftar ─────────── */
.p-map{
  position:relative;height:130px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);
  background-color:#e6ebdf;
  background-image:
    linear-gradient(30deg, transparent 42%, #fdfdf9 42%, #fdfdf9 48%, transparent 48%),
    linear-gradient(110deg, transparent 52%, #d1e1e5 52%, #d1e1e5 61%, transparent 61%),
    linear-gradient(90deg, transparent 24%, #fdfdf9 24%, #fdfdf9 29%, transparent 29%);
}
.p-map-large{height:220px}
.p-mappin{
  position:absolute;top:42px;left:50%;transform:translateX(-50%);
  display:grid;font-size:28px;
  filter:drop-shadow(0 3px 5px rgba(15,23,42,.28));
}
.p-map-large .p-mappin{top:90px}
.p-mapchip{
  position:absolute;left:10px;bottom:10px;
  padding:5px 10px;border-radius:999px;background:#fff;
  border:1px solid var(--line);
  font-size:9px;font-weight:600;color:var(--ink-2);
}

.p-list{border-radius:16px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.p-listrow{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);font-size:12px;font-weight:500;
}
.p-listrow small{display:block;color:var(--ink-3);font-size:9px;margin-top:4px}
.p-listrow .p-listicon{font-size:18px}
/* Di dalam satu kartu daftar, baris kehilangan bingkainya sendiri. */
.p-list .p-listrow{border:0;border-radius:0}
.p-list .p-listrow + .p-listrow{border-top:1px solid var(--line)}
.p-listicon{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:10px;
  background:var(--app-soft);font-size:16px;
}
.p-chev{color:var(--ink-3);font-size:18px}

.p-doclist{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.p-doccard{
  display:flex;flex-direction:column;gap:6px;
  padding:14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
}
.p-docicon{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:11px;
  background:var(--app-soft);font-size:17px;
}
.p-docname{font-size:13px;font-weight:600;line-height:1.3}
.p-document{
  padding:22px;background:var(--surface);border:1px solid var(--line);
  min-height:330px;display:grid;align-content:start;gap:22px;font-size:12px;
}
.p-document h2{font:24px Georgia,serif}

/* ─────────── Agenda ─────────── */
.p-calendar{
  padding:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;font-size:13px;
}
.p-calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  margin-top:16px;text-align:center;
}
.p-calendar-grid > *{font-size:11px;display:grid;place-items:center;aspect-ratio:1}
.p-calendar-grid button{border-radius:50%;position:relative}
.p-calendar-grid button[aria-pressed="true"]{background:var(--app);color:var(--app-ink)}
.p-calendar-grid .has-event::after{
  content:"";position:absolute;width:3px;height:3px;border-radius:50%;
  background:currentColor;bottom:3px;
}

/* ─────────── Profil dan bantuan ─────────── */
.p-profile{display:grid;justify-items:center;gap:10px;padding:15px;text-align:center}
.p-profile .p-avatar{background:var(--app);color:var(--app-ink)}
.p-faq{
  border:1px solid var(--line);border-radius:10px;padding:14px;
  background:var(--surface);font-size:12px;
}
.p-faq summary{cursor:pointer;font-weight:600}
.p-faq p{font-size:11px;line-height:1.7;padding-top:10px;color:var(--ink-2)}
.p-switch{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;font-size:12px;
}
.p-switch input{accent-color:var(--app);width:18px;height:18px}

/* ─────────── Garis waktu ─────────── */
.p-timeline{display:flex;flex-direction:column;gap:2px}
.p-tlrow{display:flex;gap:12px;padding-bottom:16px;position:relative}
.p-tlrow:last-child{padding-bottom:0}
.p-tlrow::before{
  content:"";position:absolute;left:6px;top:16px;bottom:0;width:2px;background:var(--line);
}
.p-tlrow:last-child::before{display:none}
.p-tldot{
  position:relative;z-index:1;flex:none;
  width:14px;height:14px;border-radius:999px;margin-top:2px;
  background:#fff;border:2px solid var(--line);
}
.p-tlrow.is-done .p-tldot{background:var(--app);border-color:var(--app)}
.p-tlrow.is-done::before{background:var(--app)}

/* ─────────── Formulir dan tombol ─────────── */
.p-field{display:flex;flex-direction:column;gap:6px}
.p-fieldlabel{font-size:12px;font-weight:600;color:var(--ink-2)}
.p-input{
  display:flex;align-items:center;
  min-height:42px;width:100%;padding:10px 12px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line);
  font-size:12px;line-height:1.35;
}
.p-field textarea.p-input{height:100px;resize:vertical;align-items:start}
.p-input.is-empty{color:var(--ink-3)}
.p-field.is-invalid .p-input{border-color:#dc2626}
/* Pesan penghalang langkah. Hanya berlaku pada isian contoh di pratinjau. */
.p-error{
  padding:10px 12px;border-radius:9px;
  background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  font-size:11px;line-height:1.5;
}
.p-upload{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  height:92px;border-radius:16px;width:100%;
  border:1.5px dashed #cbd5e1;background:rgba(255,255,255,.6);
  font-size:12.5px;font-weight:600;color:var(--ink-2);
}
.p-upload .icon{font-size:22px;color:var(--app)}
/* Berkas contoh yang sudah ditambahkan tetap terbaca jelas, bukan meredup. */
.p-upload:disabled{opacity:1;color:var(--app);cursor:default}
.p-filechip{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:8px 12px;border-radius:999px;
  background:var(--app-soft);color:var(--app);
  font-size:12px;font-weight:600;
}
.p-btn{
  display:flex;align-items:center;justify-content:center;
  height:43px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font-size:12px;font-weight:600;cursor:pointer;
}
.p-btn.is-primary{background:var(--app);border-color:transparent}
.p-btn.is-ghost{background:transparent}
.p-btn:hover{filter:brightness(.97)}
.p-btn:disabled{opacity:.55;cursor:not-allowed}

.p-hero{
  display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:18px;
  background:var(--app-soft);
}
.p-heroicon{
  flex:none;display:grid;place-items:center;
  width:48px;height:48px;border-radius:16px;
  background:var(--app);font-size:22px;
}
.p-herotitle{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.p-herosub{font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:4px}

.p-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.p-stat{padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.p-statvalue{font-size:16px;font-weight:700;letter-spacing:-.01em}
.p-statlabel{font-size:11.5px;color:var(--ink-3);margin-top:2px}

.p-checklist{display:flex;flex-direction:column;gap:10px}
.p-checkrow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.p-check{
  flex:none;display:grid;place-items:center;
  width:22px;height:22px;border-radius:999px;
  background:var(--app-soft);font-size:13px;
}

/* ─────────── Alur pengajuan ─────────── */
.p-progress{
  flex:none;padding:0 18px 12px;display:flex;flex-direction:column;gap:8px;
  background:var(--app);color:var(--app-ink);
}
.p-progressdots{display:flex;align-items:center;gap:7px}
.p-dot{
  flex:1;height:20px;border-radius:5px;padding:0;cursor:pointer;border:0;
  background:color-mix(in srgb, var(--app-ink) 20%, transparent);
}
.p-dot.is-done{background:color-mix(in srgb, var(--app-ink) 65%, transparent)}
.p-dot.is-active{background:var(--app-ink)}
/* Langkah yang belum dilalui tidak dapat dilompati. */
.p-dot:disabled{cursor:not-allowed;opacity:.55}
.p-progresstext{font-size:11.5px;font-weight:600;color:inherit;opacity:.8}
.p-steptitle{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.p-steptitle.is-center{text-align:center}

.p-queue{
  border-radius:18px;padding:22px;text-align:center;
  background:var(--app);color:var(--app-ink);
}
.p-queueno{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
.p-queuetext{font-size:12.5px;opacity:.85;margin-top:6px}

.p-payrow{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;color:var(--ink-2)}
.p-payrow + .p-payrow{border-top:1px solid var(--line)}
.p-payrow.is-total{font-weight:700;font-size:15px;color:var(--ink)}

.p-success{display:grid;place-items:center;padding-top:8px}
.p-successicon{
  display:grid;place-items:center;
  width:72px;height:72px;border-radius:999px;
  background:#dcfce7;color:#15803d;font-size:34px;
}

.p-actions{
  flex:none;display:grid;grid-template-columns:1fr 1.4fr;gap:10px;
  padding:12px 18px 10px;
  background:var(--surface);border-top:1px solid var(--line);
}
/* Satu tombol utama yang dipatok di bawah, seperti halaman detail layanan. */
.p-actions.is-single{grid-template-columns:minmax(0,1fr)}

/* ─────────── Navigasi bawah dan pintasan ─────────── */
/* Jarak bawah tipis: sisa ruang aman diisi oleh batang indikator beranda. */
.p-nav{
  flex:none;display:flex;
  padding:8px 12px 0;
  background:var(--surface);border-top:1px solid var(--line);
}
.p-navitem{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:7px 2px;border-radius:12px;background:transparent;
  color:var(--ink-3);cursor:pointer;
}
.p-navitem:hover{background:#f3f4f6}
.p-navicon{font-size:21px;line-height:1}
.p-navlabel{font-size:9px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-navitem.is-active{color:var(--ink)}
.p-navitem.is-active .p-navicon{
  background:var(--app-soft);border-radius:8px;padding:3px 14px;margin:-3px -14px;
}
/* Baris pintasan beranda: jalan masuk ke halaman di luar navigasi bawah. */
.p-quicklinks{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  padding-top:16px;border-top:1px solid var(--line);
}
.p-quicklinks button{
  display:grid;justify-items:center;gap:6px;
  min-height:44px;font-size:10px;color:var(--ink-2);
}
.p-quicklinks .icon{font-size:19px}

/* ─────────── Indikator beranda ─────────── */
/* Bagian kerangka perangkat, bukan isi aplikasi: selalu jadi elemen terakhir
   layar sehingga bilah bawah aplikasi tidak pernah menempel ke tepi bawah. */
.p-homebar{flex:none;display:grid;place-items:center;height:23px;background:var(--surface)}
.p-homebar > i{display:block;width:100px;height:4px;border-radius:999px;background:rgba(11,18,32,.82)}

/* ─────────── Warna aksen yang mengikuti kontras ─────────── */
/* Detail kecil memakai --app-detail agar tetap terbaca ketika warna instansi
   sangat terang; blok besar tetap memakai --app dengan teks --app-ink. */
.p-tileicon,.p-pill,.p-listicon,.p-detail-icon,.p-searchscan,.p-docicon,.p-check,.p-mappin{color:var(--app-detail)}
.p-detail-icon{font-size:23px}
.p-btn.is-primary,.p-heroicon,.p-queue{color:var(--app-ink)}

/* ─────────── Tipografi dan kepadatan pilihan pengguna ─────────── */
.phone[data-font="serif"] .p-appbar-title,
.phone[data-font="serif"] .p-sectiontitle{font-family:Georgia,serif}
.phone[data-density="compact"] .p-scroll{gap:12px}
.phone[data-density="compact"] .p-card{padding:10px}
.phone[data-density="compact"] .p-grid{gap:10px}

/* ─────────── Interaksi ─────────── */
.tappable{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.tappable:hover{box-shadow:0 4px 14px -6px rgba(15,23,42,.35)}
.tappable:active{transform:scale(.985)}
.tappable:focus-visible{outline:2px solid var(--app-detail);outline-offset:2px}
.phone :focus-visible{outline:2px solid var(--app-detail);outline-offset:2px}