:root{--aksi: #0e7d76;--aksi-gelap: #0a5d58;--aksi-muda: #dcefec;--halaman: #eef4f2;--permukaan: #ffffff;--teks: #1f2a37;--teks-lemah: #6b7885;--teks-samar: #9aa5b1;--garis: #dde5e2;--sah: #157347;--sah-muda: #e4f4ea;--gagal: #b42318;--gagal-muda: #fdecea;--awas: #b45309;--awas-muda: #fdf1e0;--font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--teks-xs: 12px;--teks-sm: 14px;--teks-md: 16px;--teks-lg: 18px;--teks-xl: 22px;--teks-2xl: 28px;--sela-1: 4px;--sela-2: 8px;--sela-3: 12px;--sela-4: 16px;--sela-5: 24px;--sela-6: 32px;--lengkung: 12px;--lengkung-besar: 18px;--lengkung-penuh: 999px;--bayang: 0 1px 2px rgba(31, 42, 55, .06);--bayang-naik: 0 4px 16px rgba(31, 42, 55, .1);--tinggi-tabbar: 64px;--sentuh-min: 48px;--aman-bawah: env(safe-area-inset-bottom, 0px);--aman-atas: env(safe-area-inset-top, 0px);--lebar-maks: 520px}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);font-size:var(--teks-md);line-height:1.55;color:var(--teks);background:var(--halaman);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}h1,h2,h3,p{margin:0}h1{font-size:var(--teks-xl);font-weight:700;letter-spacing:-.01em}h2{font-size:var(--teks-lg);font-weight:700}h3{font-size:var(--teks-md);font-weight:600}a{color:var(--aksi);text-decoration:none}img{max-width:100%;display:block}:focus-visible{outline:2px solid var(--aksi);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}.kartu{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--lengkung-besar);padding:var(--sela-4);box-shadow:var(--bayang)}.kartu-utama{background:var(--permukaan);border:1px solid var(--aksi-muda);border-top:4px solid var(--aksi);border-radius:var(--lengkung-besar);padding:var(--sela-5) var(--sela-4);box-shadow:var(--bayang-naik)}.kartu-judul{font-size:var(--teks-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teks-lemah);margin-bottom:var(--sela-2)}.tombol{display:inline-flex;align-items:center;justify-content:center;gap:var(--sela-2);width:100%;min-height:var(--sentuh-min);padding:0 var(--sela-4);font-family:var(--font);font-size:var(--teks-md);font-weight:600;color:#fff;background:var(--aksi);border:1px solid var(--aksi);border-radius:var(--lengkung);cursor:pointer;transition:background .15s ease}.tombol:active{background:var(--aksi-gelap)}.tombol:disabled{background:var(--teks-samar);border-color:var(--teks-samar);cursor:not-allowed}.tombol-besar{min-height:56px;font-size:var(--teks-lg);border-radius:var(--lengkung-besar)}.tombol-lembut{color:var(--aksi);background:var(--aksi-muda);border-color:var(--aksi-muda)}.tombol-lembut:active{background:#c9e5e1}.tombol-garis{color:var(--aksi);background:transparent;border-color:var(--garis)}.tombol-bahaya{color:var(--gagal);background:var(--gagal-muda);border-color:var(--gagal-muda)}.tombol-teks{width:auto;min-height:var(--sentuh-min);padding:0 var(--sela-2);color:var(--aksi);background:none;border:none;font-weight:600}.input-foto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.foto-kotak{cursor:pointer}.grup-form{margin-bottom:var(--sela-4)}.label{display:block;margin-bottom:var(--sela-2);font-size:var(--teks-sm);font-weight:600;color:var(--teks)}.isian,input,select,textarea{width:100%;min-height:var(--sentuh-min);padding:var(--sela-3);font-family:var(--font);font-size:var(--teks-md);color:var(--teks);background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--lengkung)}.isian:focus,input:focus,select:focus,textarea:focus{border-color:var(--aksi);outline:none;box-shadow:0 0 0 3px var(--aksi-muda)}.bantuan{margin-top:var(--sela-1);font-size:var(--teks-sm);color:var(--teks-lemah)}.alert{display:flex;gap:var(--sela-3);padding:var(--sela-3) var(--sela-4);border-radius:var(--lengkung);font-size:var(--teks-sm);margin-bottom:var(--sela-4)}.alert-sah{color:var(--sah);background:var(--sah-muda)}.alert-gagal{color:var(--gagal);background:var(--gagal-muda)}.alert-awas{color:var(--awas);background:var(--awas-muda)}.alert-info{color:var(--aksi-gelap);background:var(--aksi-muda)}.lencana{display:inline-flex;align-items:center;gap:var(--sela-1);padding:3px 10px;border-radius:var(--lengkung-penuh);font-size:var(--teks-xs);font-weight:700;letter-spacing:.02em}.lencana-sah{color:var(--sah);background:var(--sah-muda)}.lencana-gagal{color:var(--gagal);background:var(--gagal-muda)}.lencana-netral{color:var(--teks-lemah);background:var(--halaman)}.memuat,.kosong{padding:var(--sela-6) var(--sela-4);text-align:center;color:var(--teks-lemah);font-size:var(--teks-sm)}.pemuat{width:22px;height:22px;margin:0 auto var(--sela-3);border:2px solid var(--aksi-muda);border-top-color:var(--aksi);border-radius:50%;animation:putar .7s linear infinite}@keyframes putar{to{transform:rotate(360deg)}}.baris{display:flex;align-items:center;justify-content:space-between;gap:var(--sela-3);padding:var(--sela-3) 0;border-bottom:1px solid var(--garis)}.baris:last-child{border-bottom:none}.baris-label{font-size:var(--teks-sm);color:var(--teks-lemah)}.baris-nilai{font-weight:600;text-align:right}.auth{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:var(--sela-5) var(--sela-4);padding-top:calc(var(--sela-5) + var(--aman-atas));background:var(--halaman)}.auth-isi{width:100%;max-width:380px;margin:0 auto}.auth-kepala{text-align:center;margin-bottom:var(--sela-6)}.auth-kepala img{width:72px;margin:0 auto var(--sela-4)}.auth-kepala h1{margin-bottom:var(--sela-1)}.auth-kepala p{font-size:var(--teks-sm);color:var(--teks-lemah)}.auth-kotak{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--lengkung-besar);padding:var(--sela-5) var(--sela-4);box-shadow:var(--bayang)}.auth-kaki{margin-top:var(--sela-4);text-align:center;font-size:var(--teks-sm)}.cangkang{min-height:100dvh;max-width:var(--lebar-maks);margin:0 auto;padding-bottom:calc(var(--tinggi-tabbar) + var(--aman-bawah) + var(--sela-4));background:var(--halaman)}.kepala{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--sela-3);min-height:56px;padding:var(--sela-3) var(--sela-4);padding-top:calc(var(--sela-3) + var(--aman-atas));background:var(--permukaan);border-bottom:1px solid var(--garis)}.kepala h1{font-size:var(--teks-lg)}.isi{padding:var(--sela-4);display:flex;flex-direction:column;gap:var(--sela-4)}.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:100;max-width:var(--lebar-maks);margin:0 auto;height:calc(var(--tinggi-tabbar) + var(--aman-bawah));padding-bottom:var(--aman-bawah);display:grid;grid-template-columns:repeat(4,1fr);background:var(--permukaan);border-top:1px solid var(--garis)}.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sela-1);min-height:var(--sentuh-min);font-size:11px;font-weight:600;color:var(--teks-samar)}.tabbar a.aktif{color:var(--aksi)}.tabbar a.aktif svg{stroke-width:2.4}.sapaan{font-size:var(--teks-l);color:var(--teks);font-weight:400}.sapaan b{display:block;font-size:var(--teks-xl);font-weight:700;color:var(--teks)}.kajian-tanggal{font-size:var(--teks-sm);color:var(--teks-lemah)}.kajian-pasaran{font-size:var(--teks-2xl);font-weight:800;letter-spacing:-.02em}.kajian-masjid{display:flex;gap:var(--sela-2);margin-top:var(--sela-3);color:var(--teks-lemah);font-size:var(--teks-sm)}.kajian-judul{margin-top:var(--sela-2);font-weight:600}.jarak{text-align:center;padding:var(--sela-5) var(--sela-4);border-radius:var(--lengkung-besar)}.jarak-sah{background:var(--sah-muda)}.jarak-gagal{background:var(--gagal-muda)}.jarak-cari{background:var(--halaman)}.jarak-angka{font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.03em}.jarak-sah .jarak-angka{color:var(--sah)}.jarak-gagal .jarak-angka{color:var(--gagal)}.jarak-ket{font-size:var(--teks-sm);margin-top:var(--sela-2)}.foto-kotak{position:relative;aspect-ratio:3 / 4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--sela-2);color:var(--teks-lemah);background:var(--permukaan);border:2px dashed var(--garis);border-radius:var(--lengkung-besar);overflow:hidden}.foto-kotak img{width:100%;height:100%;object-fit:cover}.input-foto{position:absolute;width:1px;height:1px;opacity:0}.selapan{background:var(--permukaan);border:1px solid var(--garis);border-left:4px solid var(--awas);border-radius:var(--lengkung-besar);padding:var(--sela-4)}.selapan-lunas{border-left-color:var(--sah)}.selapan-hitung{font-size:var(--teks-2xl);font-weight:800;letter-spacing:-.02em}.selapan-rentang{font-size:var(--teks-sm);color:var(--teks-lemah)}.riwayat-item{display:flex;align-items:center;gap:var(--sela-3);padding:var(--sela-3) 0;border-bottom:1px solid var(--garis)}.riwayat-item:last-child{border-bottom:none}.riwayat-tgl{font-weight:700}.riwayat-ket{font-size:var(--teks-sm);color:var(--teks-lemah)}.riwayat-foto{width:44px;height:44px;border-radius:var(--lengkung);object-fit:cover;flex-shrink:0}.jarak-awas{background:var(--awas-muda)}.jarak-awas .jarak-angka{color:var(--awas)}.panduan{margin-top:var(--sela-3);padding:var(--sela-3);background:var(--permukaan);border-radius:var(--lengkung);font-size:var(--teks-sm);text-align:left;color:var(--teks-lemah)}.panduan ol{margin:var(--sela-2) 0 0;padding-left:18px}.panduan li{margin-bottom:var(--sela-1)}.akurasi{margin-top:var(--sela-2);font-size:var(--teks-xs);color:var(--teks-lemah)}.kartu-identitas{display:flex;align-items:center;gap:var(--sela-4);padding:var(--sela-4);background:linear-gradient(135deg,var(--aksi) 0%,var(--aksi-gelap) 100%);border-radius:var(--lengkung-besar);color:#fff}.kartu-identitas-avatar{flex-shrink:0;width:64px;height:64px;border-radius:50%;background:#ffffff26;border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}.kartu-identitas-foto{flex-shrink:0;width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4)}.kartu-identitas-nama{font-size:var(--teks-lg);font-weight:800}.kartu-identitas-jabatan{font-size:var(--teks-sm);opacity:.9}.kartu-identitas-kantor{font-size:var(--teks-sm);opacity:.75}.avatar-akun{width:96px;height:96px;margin:0 auto var(--sela-3);border-radius:50%;background:var(--aksi-muda);color:var(--aksi-gelap);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;cursor:pointer;overflow:hidden}.avatar-akun img{width:100%;height:100%;object-fit:cover}.pilihan-foto{display:grid;grid-template-columns:1fr 1fr;gap:var(--sela-2);margin-top:var(--sela-2)}@media(min-width:560px){.cangkang{border-left:1px solid var(--garis);border-right:1px solid var(--garis)}.isi{padding:var(--sela-5)}}