:root{color-scheme:dark;--hijau: #a78bfa;--hijau-tua: #c4b5fd;--latar: #1d1b30;--kartu: #282645;--kartu-2: #34315a;--teks: #ebe9f7;--redup: #a3a0c4;--garis: #433f6b;--merah: #ff8a80;--kuning: #3b3420;--kuning-garis: #7a6a2e;--tombol: #52ffa5;--a-rgb: 88, 46, 255;--b-rgb: 82, 255, 165;--c-rgb: 56, 180, 255}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(120% 55% at 50% 0%,rgba(var(--a-rgb),.24),transparent 65%) no-repeat,var(--latar);color:var(--teks);font-size:16px;line-height:1.45}h1{font-size:1.5rem;margin:0 0 4px}h3{font-size:1rem;margin:0 0 8px}p{margin:8px 0}code{background:var(--kartu-2);padding:1px 5px;border-radius:4px}.redup{color:var(--redup)}.kecil{font-size:.85rem}.jarak{margin-top:24px}.tengah{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}.kartu{background:var(--kartu);border-radius:14px;padding:24px 20px;width:100%;max-width:400px;box-shadow:0 1px 3px #00000059}.aplikasi{max-width:560px;margin:0 auto;min-height:100vh;background:var(--latar)}.aplikasi.lebar-admin{max-width:1000px}.atas{display:flex;align-items:center;gap:12px;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));background:var(--kartu);border-bottom:1px solid var(--garis)}.tab{display:flex;background:var(--kartu);border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:5;overflow-x:auto}.tab button{flex:1;min-width:80px;padding:12px 8px;border:0;background:none;font:inherit;color:var(--redup);border-bottom:3px solid transparent;cursor:pointer}.tab button.aktif{color:var(--hijau);border-bottom-color:var(--hijau);font-weight:600}.isi{padding:16px;padding-bottom:calc(96px + var(--lencana) + env(safe-area-inset-bottom))}.form{display:flex;flex-direction:column;gap:12px}label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--redup)}input,select{font:inherit;color:var(--teks);background:var(--latar);border:1px solid var(--garis);border-radius:8px;padding:10px 12px;width:100%;min-height:44px}input:focus,select:focus{outline:2px solid var(--hijau);outline-offset:0;border-color:var(--hijau)}input:disabled{background:var(--kartu-2);color:var(--redup)}.tombol{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:8px;background:var(--tombol);color:#04120b;padding:11px 16px;min-height:44px;box-shadow:0 6px 20px rgba(var(--b-rgb),.22)}.tombol:hover{filter:brightness(1.08)}.tombol:disabled{opacity:.5;cursor:not-allowed}.tombol.sekunder{background:transparent;color:var(--hijau);border:1px solid var(--hijau);box-shadow:none}.tombol.sekunder:hover{background:var(--kartu-2)}.tombol.lebar{width:100%}.tombol.kecil-tombol{padding:6px 12px;min-height:36px;font-size:.9rem}.baris-tombol{display:flex;gap:8px;flex-wrap:wrap}.ikon{border:0;background:none;font-size:1.4rem;line-height:1;color:var(--redup);cursor:pointer;padding:4px 10px;min-height:44px}.ikon:hover{color:var(--merah)}.galat{color:var(--merah);background:#4a2a30;border-radius:8px;padding:8px 12px}.info{color:#7ee2b8;background:#1f3d3a;border-radius:8px;padding:8px 12px}.peringatan{background:var(--kuning);border:1px solid var(--kuning-garis);border-radius:8px;padding:10px 12px}.peringatan ul{margin:6px 0 0;padding-left:20px}.tab-mini{display:flex;gap:4px;background:var(--latar);padding:4px;border-radius:10px;margin:16px 0}.tab-mini button{flex:1;border:0;background:none;padding:8px;border-radius:8px;font:inherit;cursor:pointer;color:var(--redup)}.tab-mini button.aktif{background:var(--kartu-2);color:var(--hijau);font-weight:600;box-shadow:0 1px 2px #00000059}.pemisah{text-align:center;color:var(--redup);margin:16px 0;position:relative}.pemisah:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--garis)}.pemisah span{position:relative;background:var(--kartu);padding:0 10px}.blok{background:var(--kartu);border-radius:12px;padding:14px;box-shadow:0 1px 2px #00000040;display:flex;flex-direction:column;gap:8px}.komponen{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:center}.komponen input:nth-child(3){grid-column:1 / 3}.komponen .ikon{grid-row:1;grid-column:3}.ringkasan{background:var(--kartu);border-radius:12px;padding:14px;box-shadow:0 1px 2px #00000040}.ringkasan>div{display:flex;justify-content:space-between;padding:4px 0}.ringkasan .total{border-top:1px solid var(--garis);margin-top:6px;padding-top:8px;font-weight:700;font-size:1.1rem}.daftar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.daftar li{background:var(--kartu);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 1px 2px #00000040}.daftar li.kolom{flex-direction:column;align-items:stretch}.lencana{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:600;align-self:flex-start}.lencana.hijau{background:#1f3d3a;color:#7ee2b8}.lencana.merah{background:#4a2a30;color:var(--merah)}.filter{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.filter>:nth-child(3),.filter>:nth-child(4){grid-column:1 / -1}@media (min-width: 700px){.filter{grid-template-columns:180px 240px 1fr auto;align-items:end}.filter>:nth-child(3),.filter>:nth-child(4){grid-column:auto}}.tabel-bungkus{overflow-x:auto;background:var(--kartu);border-radius:12px;box-shadow:0 1px 2px #00000040}.tabel{border-collapse:collapse;width:100%;font-size:.9rem}.tabel th,.tabel td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--garis);white-space:nowrap}.tabel th{background:var(--kartu-2);font-weight:600}.tabel .kanan{text-align:right}.tabel tr.belum td{background:#33301f}.kolom-sandi{position:relative}.kolom-sandi input{padding-right:76px}.lihat-sandi{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--hijau);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;padding:8px}.tautan{border:0;background:none;color:var(--hijau);font:inherit;font-size:.9rem;cursor:pointer;padding:4px 0;text-align:left}.tautan:hover{text-decoration:underline}.logo{display:block;border-radius:50%}.merek{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;margin-bottom:4px}.merek h1{font-size:1.3rem;margin-top:10px}.merek p{margin:2px 0 0}.splash{flex-direction:column;gap:14px}.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--hijau),rgb(var(--c-rgb)));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}.atas-teks{min-width:0}.atas-teks strong{display:block}:root{--lencana: 0px}.menu-bawah{position:fixed;left:12px;right:12px;bottom:calc(var(--lencana) + env(safe-area-inset-bottom));z-index:20;display:flex;justify-content:center;max-width:560px;margin:0 auto;background:var(--kartu);border:1px solid var(--garis);border-radius:18px;box-shadow:0 6px 22px #0006;overflow:hidden}.menu-bawah button{flex:1;max-width:200px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 9px;border:0;background:none;color:var(--redup);font:inherit;font-size:.72rem;cursor:pointer;min-height:56px}.menu-bawah button.aktif{color:var(--hijau)}.menu-bawah button.aktif svg{stroke-width:2.4}.susun{display:flex;flex-direction:column;gap:14px}.baris-sebar{display:flex;justify-content:space-between;align-items:center;gap:10px}.profil-kartu{flex-direction:row;align-items:center;gap:14px}.profil-kartu .avatar{width:52px;height:52px;font-size:1.1rem}.status-besar{border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;background:var(--kartu);border:1px solid var(--garis)}.status-besar.ok{background:linear-gradient(135deg,rgba(var(--a-rgb),.22),rgba(var(--c-rgb),.16));border-color:rgba(var(--a-rgb),.6)}.status-besar.belum{background:#3b3420;border-color:var(--kuning-garis)}.status-besar .besar{font-size:1.7rem;font-weight:800}.kisi-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (min-width: 760px){.kisi-stat{grid-template-columns:repeat(4,1fr)}}.stat{background:var(--kartu);border-radius:14px;padding:12px 14px;border:1px solid var(--garis);min-width:0}.stat-label{color:var(--redup);font-size:.8rem}.stat-nilai{font-size:1.2rem;font-weight:700;margin-top:2px;overflow-wrap:anywhere}.stat-catatan{color:var(--redup);font-size:.75rem;margin-top:2px}.stat.waspada .stat-nilai{color:#fbbf24}.bar{height:8px;border-radius:99px;background:var(--latar);overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,rgb(var(--a-rgb)),rgb(var(--c-rgb)));border-radius:99px}.tombol-kartu{text-align:left;font:inherit;color:var(--teks);display:flex;flex-direction:column;gap:2px;cursor:pointer;width:100%}.total-baris{border-top:1px solid var(--garis);padding-top:6px}.kartu-rekap{display:flex}.tabel-lebar{display:none}@media (min-width: 900px){.kartu-rekap{display:none}.tabel-lebar{display:block}}input[type=search]{-webkit-appearance:none}.daftar li.belum{border:1px solid var(--kuning-garis)}.kisi-stat{margin-bottom:12px}.visual{position:relative;margin:0 auto;flex:none;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.visual:active{cursor:grabbing}.visual canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.hero-visual{display:flex;justify-content:center;margin:-4px 0 -6px}.kompas{position:absolute;left:50%;top:50%;width:34%;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px rgba(170,220,255,.9));animation:napas 3.8s ease-in-out infinite}.kompas .dalam{transform-box:view-box;transform-origin:256px 256px;animation:putar 30s linear infinite}@keyframes napas{50%{transform:translate(-50%,-50%) scale(1.07)}}@keyframes putar{to{transform:rotate(360deg)}}.suasana{display:flex;flex-wrap:wrap;gap:10px}.suasana button{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--redup);font:inherit;font-size:.78rem;cursor:pointer;padding:4px;width:78px}.suasana .bulat{width:38px;height:38px;border-radius:50%;border:2px solid transparent}.suasana button.pilih{color:var(--teks)}.suasana button.pilih .bulat{border-color:#fff}@media (prefers-reduced-motion: reduce){.kompas,.kompas .dalam,.status-besar *{animation:none!important}}@keyframes naik{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes isiBar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.isi>*{animation:naik .4s cubic-bezier(.2,.7,.2,1) both}.susun>*{animation:naik .5s cubic-bezier(.2,.7,.2,1) both}.susun>*:nth-child(2){animation-delay:.06s}.susun>*:nth-child(3){animation-delay:.12s}.susun>*:nth-child(4){animation-delay:.18s}.susun>*:nth-child(5){animation-delay:.24s}.susun>*:nth-child(n+6){animation-delay:.3s}.kisi-stat .stat{animation:naik .5s cubic-bezier(.2,.7,.2,1) both}.kisi-stat .stat:nth-child(2){animation-delay:.08s}.kisi-stat .stat:nth-child(3){animation-delay:.16s}.kisi-stat .stat:nth-child(4){animation-delay:.24s}.daftar li{animation:naik .45s cubic-bezier(.2,.7,.2,1) both}.daftar li:nth-child(2){animation-delay:.05s}.daftar li:nth-child(3){animation-delay:.1s}.daftar li:nth-child(n+4){animation-delay:.15s}.bar span{transform-origin:left;animation:isiBar .9s cubic-bezier(.2,.7,.2,1) .2s both}.tombol{transition:transform .12s ease,filter .15s ease}.tombol:active:not(:disabled){transform:scale(.97)}.menu-bawah button{transition:color .2s ease,transform .15s ease}.menu-bawah button:active{transform:scale(.92)}.menu-bawah button.aktif svg{animation:lonjak .35s ease}@keyframes lonjak{40%{transform:translateY(-3px) scale(1.12)}}.sorotan{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:40;opacity:0;background:radial-gradient(circle,rgba(var(--c-rgb),.16),rgba(var(--c-rgb),0) 65%);transition:opacity .8s ease;will-change:transform}@media (prefers-reduced-motion: reduce){.isi>*,.susun>*,.kisi-stat .stat,.daftar li,.bar span,.menu-bawah button.aktif svg{animation:none!important}.sorotan{display:none}}