:root{--bg: #f2f6f5;--card: #ffffff;--ink: #0d1f1c;--muted: #5f7370;--line: #e2eae7;--brand: #0f766e;--brand-2: #14b8a6;--hijau: #14833b;--hijau-bg: #e6f7ec;--kuning: #b45309;--kuning-bg: #fef4e2;--merah: #b91c1c;--merah-bg: #fdecec;--radius: 18px;--shadow: 0 10px 30px rgba(13, 52, 45, .08)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3{margin:0;line-height:1.25}h1{font-size:1.35rem}h2{font-size:1.1rem}h3{font-size:1rem}p{margin:0}.kecil{font-size:.82rem;color:var(--muted);line-height:1.5}.tengah{text-align:center}.mono,code{font-family:ui-monospace,SF Mono,Menlo,monospace;letter-spacing:.04em}.topbar{position:sticky;top:0;z-index:30;background:linear-gradient(160deg,#0f766e,#0d9488 55%,#0f766e);color:#fff;padding:12px 0 0;box-shadow:0 6px 24px #0f766e40}.topbar-inner{max-width:1080px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;padding:0;cursor:pointer;text-align:left}.brand-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ffffff29;font-weight:800;font-size:.78rem;letter-spacing:.06em;border:1px solid rgba(255,255,255,.28)}.brand-text{display:flex;flex-direction:column}.brand-text strong{font-size:1rem;letter-spacing:.01em}.brand-text small{font-size:.7rem;opacity:.82}.admin-btn{border-radius:999px;border:1px solid rgba(255,255,255,.45);background:#ffffff1f;color:#fff;padding:9px 16px;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s ease}.admin-btn:hover{background:#ffffff3d}.admin-btn.aktif{background:#fff;color:var(--brand);border-color:#fff}.nav{margin-top:10px;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav-inner{max-width:1080px;margin:0 auto;padding:0 12px 10px;display:flex;gap:6px}.nav-item{border:0;background:transparent;color:#fffc;padding:8px 14px;border-radius:999px;font-size:.86rem;font-weight:600;white-space:nowrap;cursor:pointer}.nav-item.aktif{background:#fff;color:var(--brand)}.konten{max-width:1080px;margin:0 auto;padding:18px 16px 40px;display:flex;flex-direction:column;gap:16px}.kartu{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.banner{border-radius:14px;padding:12px 16px;font-size:.86rem;font-weight:600;border:1px solid transparent}.banner.error{background:var(--merah-bg);color:var(--merah);border-color:#f7cccc}.banner.sukses{background:var(--hijau-bg);color:var(--hijau);border-color:#c7ebd4}.loading{display:flex;align-items:center;gap:14px;justify-content:center;padding:40px 18px;color:var(--muted)}.spinner{width:22px;height:22px;border-radius:50%;border:3px solid #cfe6e2;border-top-color:var(--brand);animation:putar .8s linear infinite}@keyframes putar{to{transform:rotate(360deg)}}.hero{background:linear-gradient(150deg,#0f766e,#12a594 60%,#0ea5a0);color:#fff;border-radius:22px;padding:20px;box-shadow:0 16px 36px #0f766e47;display:flex;flex-direction:column;gap:16px}.hero-atas{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}.hero-label{font-size:.78rem;opacity:.85;letter-spacing:.06em;text-transform:uppercase}.hero-angka{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:4px 0}.hero-sub{font-size:.78rem;opacity:.82}.hero-chip{background:#ffffff29;border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;align-self:flex-start}.hero-chip span{font-size:.7rem;opacity:.85}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero-stat{background:#ffffff21;border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.hero-stat span{font-size:.72rem;opacity:.85}.hero-stat strong{font-size:1.1rem}.hero-stat small{font-size:.72rem;font-weight:500;opacity:.8}.progres{display:flex;align-items:center;gap:12px}.progres-bar{flex:1;height:9px;border-radius:999px;background:#ffffff47;overflow:hidden}.progres-isi{height:100%;border-radius:999px;background:#fff;transition:width .4s ease}.progres span{font-size:.76rem;white-space:nowrap;opacity:.92}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.toolbar-kiri{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.bulan{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 12px}.bulan input,.bulan select{border:0;font:inherit;font-weight:600;color:var(--ink);background:transparent;outline:none}.cari{flex:1;min-width:180px;border-radius:12px;border:1px solid var(--line);background:var(--card);padding:10px 14px;font:inherit;font-size:.86rem;outline:none}.cari:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px #14b8a624}.grid-rumah{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}.rumah{display:flex;flex-direction:column;gap:10px;padding:16px;border-left:4px solid #f0b429;transition:transform .15s ease,box-shadow .15s ease}.rumah:hover{transform:translateY(-2px)}.rumah.sudah{border-left-color:var(--hijau)}.rumah-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.rumah-kode{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f5faf8;border:1px dashed #cfe6e1;border-radius:12px;padding:8px 12px}.rumah-kode span{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.rumah-kode code{font-size:.95rem;font-weight:700;color:var(--brand)}.badge{font-size:.7rem;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}.badge.hijau{background:var(--hijau-bg);color:var(--hijau)}.badge.kuning{background:var(--kuning-bg);color:var(--kuning)}.badge.abu{background:#eef2f1;color:#64748b}.badge.besar{font-size:.8rem;padding:8px 14px;align-self:flex-start}.btn{border:0;border-radius:12px;background:linear-gradient(160deg,#0f766e,#12a594);color:#fff;font:inherit;font-size:.85rem;font-weight:700;padding:11px 18px;cursor:pointer;box-shadow:0 6px 16px #0f766e38;transition:filter .15s ease,transform .1s ease}.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.6;cursor:default}.btn.mini{padding:8px 14px;font-size:.8rem}.btn.ghost{background:#fff;color:var(--brand);border:1px solid #cfdfdc;box-shadow:none}.btn.bahaya{background:#fff;color:var(--merah);border:1px solid #f3d0d0;box-shadow:none}.btn.lebar{width:100%;margin-top:8px}.tautan{display:block;text-align:center;text-decoration:none}.aksi-baris{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.aksi-baris.tengah{justify-content:center}.judul-halaman{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}.form{display:flex;flex-direction:column;gap:12px}.form label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:600;color:var(--muted)}.form input,.form select{border:1px solid var(--line);border-radius:12px;padding:11px 13px;font:inherit;font-size:.9rem;color:var(--ink);background:#fff;outline:none;width:100%}.form input:focus,.form select:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px #14b8a624}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .span2{grid-column:span 2}.cek{flex-direction:row!important;align-items:center;gap:10px!important}.cek input{width:18px;height:18px;accent-color:var(--brand)}.pesan-galat{color:var(--merah);font-size:.82rem;font-weight:600;background:var(--merah-bg);padding:9px 12px;border-radius:10px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#08201c80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}.dialog{background:#fff;border-radius:20px;padding:20px;width:100%;max-width:380px;box-shadow:0 24px 60px #08201c47;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow-y:auto}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.tutup{border:0;background:#f1f5f4;color:var(--muted);width:30px;height:30px;border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer}.kartu-admin{display:flex;align-items:center;gap:12px;background:#f4faf8;border-radius:14px;padding:12px}.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(160deg,#0f766e,#14b8a6);color:#fff;display:grid;place-items:center;font-weight:800}.kotak-info{background:#f5faf8;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:.8rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}.ringkas-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.ringkas{display:flex;flex-direction:column;gap:6px;padding:16px}.ringkas span{font-size:.76rem;color:var(--muted)}.ringkas strong{font-size:1.15rem;letter-spacing:-.01em}.daftar-bayar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.baris-bayar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap}.baris-bayar .kiri{display:flex;align-items:center;gap:12px;min-width:0}.baris-bayar .kiri code{background:#f1f7f5;color:var(--brand);font-weight:700;font-size:.8rem;padding:8px 10px;border-radius:10px}.baris-bayar .kanan{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.baris-bayar.batal{opacity:.72}.catatan{font-style:italic}.cek-form{display:flex;flex-direction:column;gap:10px}.cek-form label{display:flex;flex-direction:column;gap:8px;font-size:.8rem;font-weight:700;color:var(--muted)}.cek-input{display:flex;gap:8px}.cek-input input{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;outline:none;min-width:0}.cek-input input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px #14b8a624}.status-besar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-left:6px solid var(--hijau)}.status-besar.kuning{border-left-color:#f0b429}.status-besar.hijau{border-left-color:var(--hijau)}.riwayat{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:2px}.riwayat li{display:grid;grid-template-columns:1.1fr 1.6fr auto;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid #f1f5f4;font-size:.86rem}.riwayat li.ok span:first-child{font-weight:700;color:var(--hijau)}.sub{margin-bottom:4px}.kosong{text-align:center;padding:36px 22px;display:flex;flex-direction:column;gap:10px;align-items:center}.footer{max-width:1080px;margin:0 auto;padding:0 16px 36px;text-align:center;display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}.footer .kecil{font-size:.74rem}@media(max-width:560px){.hero-angka{font-size:1.7rem}.form-grid{grid-template-columns:1fr}.form-grid .span2{grid-column:span 1}.baris-bayar{align-items:flex-start}.baris-bayar .kanan{width:100%;justify-content:space-between}.riwayat li{grid-template-columns:1fr auto}.riwayat li .kecil{grid-column:1}.cek-input{flex-direction:column}.cek-input .btn{width:100%}}