:root{--hijau: #0f766e;--hijau-muda: #14b8a6;--hijau-tua: #0b4f4a;--emas: #b45309;--emas-muda: #f59e0b;--biru: #1d4ed8;--ungu: #7c3aed;--teks: #12312e;--teks-lembut: #5b7370;--garis: #dbe7e4;--kartu: #ffffff;--latar: #f3f7f6;--radius: 18px;--bayang: 0 10px 30px rgba(12, 74, 68, .08)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:radial-gradient(1200px 500px at 100% -10%,rgba(20,184,166,.18),transparent 60%),radial-gradient(900px 420px at -10% 0%,rgba(180,83,9,.1),transparent 55%),var(--latar);color:var(--teks);-webkit-font-smoothing:antialiased;min-height:100vh}button,input,select,textarea{font-family:inherit;font-size:1rem;color:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:40;background:#ffffffe0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(219,231,228,.9)}.topbar-inner{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;text-align:left}.brand-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-weight:800;color:#fff;letter-spacing:-.5px;background:linear-gradient(150deg,var(--hijau-muda),var(--hijau) 70%);box-shadow:0 8px 18px #0f766e47;flex:none}.brand-teks{display:flex;flex-direction:column;line-height:1.15}.brand-teks strong{font-size:.98rem;letter-spacing:-.2px}.brand-teks em{font-style:normal;font-size:.74rem;color:var(--teks-lembut);letter-spacing:.14em;text-transform:uppercase}.nav{display:flex;gap:4px;margin-left:auto;background:#eef4f3;padding:4px;border-radius:999px}.nav-item{border:0;background:none;padding:9px 16px;border-radius:999px;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--teks-lembut);transition:.18s ease}.nav-item:hover{color:var(--hijau)}.nav-item.aktif{background:#fff;color:var(--hijau-tua);box-shadow:0 4px 12px #0c4a441f}.konten{max-width:1120px;width:100%;margin:0 auto;padding:26px 20px 90px;flex:1}.halaman{display:flex;flex-direction:column;gap:20px;animation:masuk .32s ease}@keyframes masuk{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.hero{background:linear-gradient(135deg,#0f766e,#0b4f4a 55%,#123c39);color:#eafaf7;border-radius:24px;padding:28px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 18px 40px #0b4f4a40;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.35),transparent 65%);right:-80px;top:-120px}.hero h1{margin:6px 0 8px;font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.6px;line-height:1.1}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:#a7e3da;font-weight:700}.hero-sub{margin:0;color:#bfe5df;max-width:46ch;font-size:.94rem;line-height:1.55}.hero-aksi{z-index:1}.kepala-halaman{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.kepala-halaman h1{margin:0 0 4px;font-size:1.55rem;letter-spacing:-.5px}.mini{font-size:.8rem;color:var(--teks-lembut);display:block;line-height:1.5}.abu{color:#9aafac}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-grid.tiga{grid-template-columns:repeat(3,1fr)}.stat{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--bayang);position:relative;overflow:hidden}.stat:before{content:"";position:absolute;inset:0 auto 0 0;width:4px}.stat.hijau:before{background:linear-gradient(var(--hijau-muda),var(--hijau))}.stat.biru:before{background:linear-gradient(#60a5fa,var(--biru))}.stat.ungu:before{background:linear-gradient(#c084fc,var(--ungu))}.stat.kuning:before{background:linear-gradient(var(--emas-muda),var(--emas))}.stat-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--teks-lembut)}.stat-nilai{font-size:clamp(1.35rem,3.4vw,1.7rem);letter-spacing:-.8px;line-height:1.1}.stat-sub{font-size:.76rem;color:var(--teks-lembut)}.panel{background:var(--kartu);border:1px solid var(--garis);border-radius:22px;padding:20px;box-shadow:var(--bayang)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}.panel-head h2{margin:0;font-size:1.05rem;letter-spacing:-.3px}.chip{font-size:.74rem;padding:5px 11px;border-radius:999px;background:#eef4f3;color:var(--teks-lembut);font-weight:600}.chip.halus{background:#e7f6f3;color:var(--hijau)}.korel-gerak{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.gerak-kartu{border:1px solid var(--garis);border-radius:16px;padding:16px;background:linear-gradient(180deg,#fbfefd,#f6fbfa)}.gerak-kartu header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px}.gerak-kartu h3{margin:0 0 2px;font-size:1rem;letter-spacing:-.3px}.gerak-angka{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:.76rem;color:var(--teks-lembut);white-space:nowrap}.emas{color:var(--emas)!important}.bar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.bar-label{display:flex;justify-content:space-between;gap:10px;font-size:.87rem;font-weight:600;margin-bottom:5px}.bar-label .mini{text-align:right;white-space:nowrap}.bar-track{height:8px;border-radius:999px;background:#e7efee;overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--hijau-muda),var(--hijau));transition:width .4s ease}.bar-fill.emas{background:linear-gradient(90deg,#fbbf24,var(--emas))}.bar-list.besar li{padding:4px 0 8px}.kosong-baris{margin:0;padding:8px 0 2px}.riwayat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.riwayat li{display:grid;grid-template-columns:132px 1fr auto;gap:14px;align-items:center;padding:13px 4px;border-bottom:1px dashed var(--garis)}.riwayat li:last-child{border-bottom:0}.riwayat-tgl strong{display:block;font-size:.85rem}.riwayat-isi{min-width:0}.riwayat-isi strong{display:block;font-size:.94rem}.riwayat-isi p.hasil{margin:5px 0 0;font-size:.83rem;color:var(--teks-lembut);line-height:1.45}.riwayat-kanan{display:flex;align-items:center;gap:8px}.nominal{font-weight:800;font-size:.9rem;color:var(--emas);white-space:nowrap}.grid-korel{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.korel-kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:20px;padding:18px;box-shadow:var(--bayang);display:flex;flex-direction:column;gap:12px}.korel-kartu header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.korel-judul{display:flex;gap:11px;align-items:center;min-width:0}.avatar{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;font-weight:800;color:var(--hijau-tua);background:linear-gradient(150deg,#d9f5ef,#b9e9e1)}.korel-judul h2{margin:0 0 2px;font-size:1.02rem;letter-spacing:-.3px}.korel-catatan{margin:0;font-size:.84rem;color:var(--teks-lembut);line-height:1.5;background:#f7fbfa;border-left:3px solid #cdeae4;padding:8px 10px;border-radius:0 10px 10px 0}.korel-stat{display:flex;gap:8px;flex-wrap:wrap}.korel-stat span{font-size:.78rem;color:var(--teks-lembut);background:#f1f7f5;padding:6px 10px;border-radius:10px}.korel-stat strong{color:var(--hijau-tua)}.daftar-relawan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.daftar-relawan li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--garis)}.daftar-relawan li:last-child{border-bottom:0}.daftar-relawan strong{font-size:.9rem}.daftar-relawan li.abu{border-bottom:0;padding:4px 0}.korel-tools,.mini-tools{display:flex;gap:4px;flex:none}.ikon{border:1px solid var(--garis);background:#fff;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:.82rem;line-height:1;color:var(--teks-lembut);transition:.15s ease}.ikon:hover{background:#eef7f5;color:var(--hijau)}.ikon.bahaya:hover{background:#fdeceb;color:#b91c1c;border-color:#f6c9c5}.catatan-bawah{text-align:center}.peringkat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.peringkat li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#f8fcfb;border:1px solid #eaf3f1}.peringkat li>div{flex:1;min-width:0}.peringkat strong{font-size:.9rem}.posisi{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:800;background:#e7efee;color:var(--teks-lembut)}.posisi.atas{background:linear-gradient(150deg,#fbbf24,#f59e0b);color:#fff}.btn{border:1px solid var(--garis);background:#fff;padding:10px 16px;border-radius:12px;font-weight:650;font-size:.9rem;cursor:pointer;transition:.16s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.btn:hover{background:#f4faf8;border-color:#c9e4de}.btn.utama{background:linear-gradient(135deg,var(--hijau-muda),var(--hijau));color:#fff;border-color:transparent;box-shadow:0 10px 22px #0f766e42}.btn.utama:hover{filter:brightness(1.05)}.btn.bahaya{background:#fef2f2;color:#b91c1c;border-color:#f6d5d2}.btn.kecil{padding:8px 12px;font-size:.84rem;border-radius:10px}.btn.lebar{width:100%}.btn.sso{background:#f6f7fb;border-color:#e2e5f0;color:#334}.btn.admin{padding:9px 15px;border-radius:999px;font-size:.85rem;background:#fff;border-color:#cfe3df;color:var(--hijau);flex:none;max-width:160px;overflow:hidden;text-overflow:ellipsis}.btn.admin.masuk{background:#e7f6f3;border-color:#b7e3db;color:var(--hijau-tua);font-weight:700}.btn:disabled{opacity:.6;cursor:not-allowed}.form{display:flex;flex-direction:column;gap:14px}.form-baris{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field-label{font-size:.8rem;font-weight:700;color:var(--teks-lembut);letter-spacing:.01em}.field-hint{font-size:.75rem;color:#8aa3a0}input,select,textarea{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--garis);background:#fbfefd;outline:none;transition:.15s ease}input:focus,select:focus,textarea:focus{border-color:var(--hijau-muda);background:#fff;box-shadow:0 0 0 3px #14b8a629}textarea{resize:vertical}.form-aksi{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.galat{color:#b91c1c;background:#fef2f2;border:1px solid #f6d5d2;border-radius:10px;padding:9px 12px;font-size:.84rem;margin:0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#09292673;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60;animation:masuk .18s ease}.modal{background:#fff;border-radius:20px;padding:20px;width:100%;max-width:460px;max-height:92vh;overflow:auto;box-shadow:0 26px 60px #0628254d}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-head h2{margin:0;font-size:1.1rem;letter-spacing:-.3px}.tutup{border:0;background:#f1f6f5;width:32px;height:32px;border-radius:10px;cursor:pointer;color:var(--teks-lembut)}.tutup:hover{background:#e6efed}.kosong{padding:26px 18px;text-align:center;color:var(--teks-lembut);font-size:.9rem;background:#f8fcfb;border:1px dashed #d5e6e2;border-radius:16px}.memuat{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;color:var(--teks-lembut)}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid #d8e8e5;border-top-color:var(--hijau);animation:putar .8s linear infinite}@keyframes putar{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%);background:var(--hijau-tua);color:#fff;padding:11px 18px;border-radius:999px;font-size:.85rem;font-weight:600;box-shadow:0 14px 30px #0b4f4a52;z-index:80;animation:masuk .22s ease;max-width:90vw;text-align:center}.kaki{text-align:center;font-size:.76rem;color:#8aa3a0;padding:0 20px 26px}.tabbar{display:none}@media (max-width: 860px){.nav{display:none}.topbar-inner{padding:10px 16px}.konten{padding:18px 14px 96px}.stat-grid,.stat-grid.tiga{grid-template-columns:repeat(2,1fr);gap:10px}.hero{padding:22px;border-radius:20px}.grid-korel,.form-baris{grid-template-columns:1fr}.riwayat li{grid-template-columns:1fr auto;gap:6px 10px}.riwayat-tgl{grid-column:1 / -1;display:flex;align-items:baseline;gap:8px}.riwayat-tgl .mini{display:inline}.riwayat-kanan{align-self:flex-start}.tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;background:#fffffff5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--garis);padding:7px 6px calc(7px + env(safe-area-inset-bottom));z-index:50}.tab-item{border:0;background:none;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:600;color:var(--teks-lembut);cursor:pointer;border-radius:12px}.tab-item.aktif{color:var(--hijau);background:#eef8f6}.tab-ikon{font-size:1rem;line-height:1.2}.toast{bottom:82px}}@media (max-width: 420px){.brand-teks em{display:none}.stat-nilai{font-size:1.25rem}}