:root{--tint:64,46,36;--accent-gold:#f2c660;--ink:#fff;--ink-2:rgba(255,255,255,.78);--ink-3:rgba(255,255,255,.55);--ok:#a9e4b8;--bad:#f4b2a4;--g1:rgba(var(--tint),.34);--g2:rgba(var(--tint),.48);--g3:rgba(var(--tint),.64);--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.24);--hover:rgba(255,255,255,.1);--blur:blur(18px) saturate(1.5);--sh:0 8px 28px rgba(40,26,18,.16);--radius:20px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#15100c;font-family:Nunito,system-ui,sans-serif;font-weight:600;color:var(--ink);overscroll-behavior:none;user-select:none;-webkit-user-select:none}#app{position:fixed;inset:0}#kanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}#kanvas:active{cursor:grabbing}#ui{position:absolute;inset:0;pointer-events:none}#ui>*{pointer-events:auto}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}.ik{width:1em;height:1em;display:block;flex:none;overflow:visible}.glass{background:var(--g1);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--line);box-shadow:var(--sh),inset 0 1px #ffffff24}#atas{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));pointer-events:none;flex-wrap:wrap}#atas .kiri,#atas .tengah,#atas .kanan{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#atas .tengah{margin:0 auto}#atas .chip,#atas .logo,#atas button{pointer-events:auto}.logo,.chip{display:flex;align-items:center;gap:8px;border-radius:99px;background:var(--g1);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--line);box-shadow:var(--sh),inset 0 1px #ffffff24;color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.22)}.logo{padding:4px 14px 4px 5px}.logo-lencana{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--accent-gold);background:#ffffff1f;border:1px solid var(--line-2)}.logo-teks{display:flex;flex-direction:column;line-height:1.1}.logo-teks b{font-weight:800;font-size:14px;letter-spacing:.2px}.logo-teks small{font-weight:700;font-size:11px;color:var(--ink-2)}.chip{padding:6px 14px;min-height:40px}.chip .ci{font-size:20px;color:var(--ink-2);display:grid;place-items:center}.chip .ci.cuaca{margin-left:2px;color:#ffd77a}.chip .dua{display:flex;flex-direction:column;line-height:1.1}.chip b{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}.chip small{font-weight:700;font-size:11px;color:var(--ink-2)}.kas-chip .ci{color:var(--accent-gold)}.kas-chip b{color:#fff}small.plus{color:var(--ok)!important}small.minus{color:var(--bad)!important}.pil{font-weight:800;font-size:12px;letter-spacing:.3px;text-transform:capitalize;color:#fff;background:#7896d261}#bintang{gap:1px;padding:6px 12px}#bintang .ik{font-size:16px;color:var(--ink-3)}#bintang .ik.on{color:var(--accent-gold);fill:var(--accent-gold)}#bintang .ik.on path{fill:var(--accent-gold)}#bintang small{margin-left:6px;font-size:12px;font-weight:800;color:#fff}.ctl{gap:2px;padding:4px}.ctl button{width:34px;height:32px;border-radius:99px;display:grid;place-items:center;font-size:17px;color:var(--ink-2);transition:background .15s,color .15s,transform .1s}.ctl button:hover{background:var(--hover);color:#fff}.ctl button:active{transform:scale(.9)}.ctl button.on{background:#ffffff38;color:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}.ctl .sep{width:1px;height:18px;background:var(--line-2);margin:0 3px}#bawah{position:absolute;left:50%;bottom:14px;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:2px;padding:6px;max-width:calc(100% - 20px);overflow-x:auto;scrollbar-width:none;border-radius:26px;background:var(--g2);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1px solid var(--line);box-shadow:var(--sh),inset 0 1px #ffffff24}#bawah::-webkit-scrollbar{display:none}#bawah button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:66px;padding:8px 8px 7px;border-radius:20px;font-weight:700;font-size:11px;letter-spacing:.2px;color:var(--ink-2);transition:background .15s,color .15s,transform .12s}#bawah button .ubin{font-size:24px;display:grid;place-items:center;transition:transform .15s}#bawah button:hover{background:var(--hover);color:#fff}#bawah button:hover .ubin{transform:translateY(-2px)}#bawah button:active{transform:scale(.95)}#bawah button.on{background:#ffffff2e;color:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}#bawah button.on .ubin{color:var(--accent-gold)}#panel{position:absolute;right:14px;top:78px;bottom:104px;width:min(420px,calc(100% - 28px));display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);background:rgba(var(--tint),.58);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);border:1px solid var(--line);box-shadow:0 18px 50px #281a1242,inset 0 1px #ffffff29;animation:naik .22s cubic-bezier(.2,.9,.3,1)}#panel[hidden]{display:none}@keyframes naik{0%{transform:translateY(12px) scale(.985);opacity:0}to{transform:none;opacity:1}}.panel-kepala{display:flex;align-items:center;gap:10px;padding:14px 14px 10px 16px}.pk-ikon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:var(--accent-gold);background:#ffffff1a;border:1px solid var(--line)}.panel-kepala h2{margin:0;flex:1;font-size:17px;font-weight:800;letter-spacing:.2px}.tutup{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--ink-2);background:#ffffff14;transition:background .15s,color .15s}.tutup:hover{background:#ffffff2e;color:#fff}#panelIsi{padding:2px 14px 18px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}#panelIsi::-webkit-scrollbar{width:6px}#panelIsi::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:6px}.kartu{background:#ffffff12;border:1px solid var(--line);border-radius:16px;padding:9px 10px;margin-bottom:8px;display:flex;align-items:center;gap:11px;transition:background .15s}.kartu:hover{background:#ffffff1c}.kartu .lencana{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:26px;background:#ffffff1a;border:1px solid var(--line);color:#fff}.kartu .tx{flex:1;min-width:0}.kartu .tx b{display:block;font-weight:800;font-size:14px}.kartu .tx small{display:flex;flex-wrap:wrap;gap:1px 10px;margin-top:2px;font-weight:700;font-size:11.5px;color:var(--ink-2)}.kartu .tx small .minus{color:var(--bad)}.kartu .tx small .plus{color:var(--ok)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border-radius:99px;font-weight:800;font-size:13px;white-space:nowrap;color:#fff;background:#a9e4b82e;border:1px solid rgba(169,228,184,.42);transition:background .15s,transform .1s,box-shadow .15s}.btn:hover{background:#a9e4b84d}.btn:active{transform:scale(.95)}.btn:disabled{background:#ffffff0f;border-color:var(--line);color:var(--ink-3);cursor:not-allowed;transform:none}.btn.merah{background:#f4b2a429;border-color:#f4b2a46b}.btn.merah:hover{background:#f4b2a447}.btn.emas{background:#f0cc7a33;border-color:#f0cc7a80}.btn.emas:hover{background:#f0cc7a52}.btn.abu,.btn.biru{background:#ffffff1a;border-color:var(--line-2)}.btn.abu:hover,.btn.biru:hover{background:#fff3}.btn.kecil{padding:5px 10px;font-size:12px}.btn .ik{font-size:16px}.harga{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}.harga .ik{color:var(--accent-gold);font-size:15px}h3{margin:16px 2px 8px;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)}.baris{display:flex;justify-content:space-between;gap:8px;padding:7px 2px;font-weight:700;font-size:13px;border-bottom:1px solid var(--line)}.baris span:last-child{font-variant-numeric:tabular-nums}.plus{color:var(--ok)}.minus{color:var(--bad)}table{width:100%;border-collapse:collapse;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}th,td{padding:5px;text-align:right;border-bottom:1px solid var(--line)}th:first-child,td:first-child{text-align:left}th{color:var(--ink-3);font-weight:800;font-size:11px}.catatan{font-size:12px;line-height:1.45;color:var(--ink-2);font-weight:600;background:#ffffff0f;border:1px solid var(--line);border-radius:14px;padding:9px 12px;margin:4px 0 10px}.catatan b{color:#fff}.stepper{display:flex;align-items:center;gap:6px}.stepper b{min-width:46px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}select,input[type=text]{font:inherit;font-weight:700;padding:9px 12px;border-radius:14px;border:1px solid var(--line-2);background:#ffffff14;color:#fff;width:100%;outline:none}select option{color:#222}select:focus,input[type=text]:focus{border-color:var(--accent-gold);background:#ffffff1f}input[type=range]{width:100%;height:24px;accent-color:var(--accent-gold)}.slider{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px;margin:4px 0}.slider span{width:76px;color:var(--ink-2)}.temaGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.temaGrid button{padding:9px 4px;border-radius:14px;font-weight:700;font-size:11.5px;border:1px solid var(--line);color:#fff;transition:transform .1s}.temaGrid button:hover{transform:translateY(-1px)}.temaGrid button.on{outline:2px solid var(--accent-gold);outline-offset:1px}#toasts{position:absolute;top:84px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none!important}.toast{padding:9px 18px;border-radius:99px;font-weight:800;font-size:13px;background:var(--g3);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--line-2);box-shadow:var(--sh);animation:muncul .22s cubic-bezier(.2,1.2,.4,1)}.toast.gagal{border-color:#f4b2a499;color:#ffe3dc}@keyframes muncul{0%{transform:translateY(-8px) scale(.96);opacity:0}to{transform:none;opacity:1}}#debug{position:absolute;left:12px;top:78px;background:#0000008c;color:#9fe3a8;font:11px/1.4 ui-monospace,monospace;padding:6px 10px;border-radius:10px;white-space:pre}#modal{position:absolute;inset:0;background:#0a050273;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#modal[hidden]{display:none}.modal-kartu{background:var(--g3);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);border:1px solid var(--line-2);border-radius:24px;padding:20px 22px;max-width:380px;width:100%;box-shadow:0 20px 60px #00000080;animation:naik .25s cubic-bezier(.2,.9,.3,1)}.modal-kartu h2{margin:0 0 8px;font-weight:800;font-size:19px}.modal-kartu p{color:var(--ink-2);font-size:13px}#loading{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#8a6a58,#4a3a32);display:flex;align-items:center;justify-content:center;z-index:50;transition:opacity .5s}#loading.selesai{opacity:0;pointer-events:none}.load-kartu{text-align:center;color:#fff}.load-ikon{font-size:64px;display:grid;place-items:center;color:var(--accent-gold);animation:napas 1.4s ease-in-out infinite alternate}@keyframes napas{0%{transform:translateY(0) scale(1)}to{transform:translateY(-6px) scale(1.06)}}.load-kartu h1{font-weight:800;margin:10px 0 2px;font-size:26px;letter-spacing:.5px}.load-kartu p{margin:0 0 14px;color:var(--ink-2);font-size:13px}.load-bar{width:220px;height:4px;background:#ffffff26;border-radius:99px;overflow:hidden;margin:0 auto}.load-bar i{display:block;height:100%;width:0;background:var(--accent-gold);transition:width .3s;border-radius:99px}@media(max-width:520px){.logo-teks{display:none}.logo{padding:4px}.kas-chip small{font-size:10px}}@media(max-width:820px){#atas{padding:8px;gap:5px;justify-content:flex-start}#atas .kiri,#atas .tengah,#atas .kanan{display:contents}.logo-teks small,.pil{display:none}.chip{min-height:36px;padding:4px 10px}.chip b{font-size:14px}.chip .ci{font-size:18px}#bintang small{display:none}#bintang .ik{font-size:14px}#bintang{padding:4px 9px}.ctl{padding:3px}.ctl button{width:30px;height:30px;font-size:15px}.ctl .sep,#ctlKam [data-a="panel:pengaturan"]{display:none}#panel{inset:auto 10px 96px;width:auto;max-height:62vh}#bawah button{min-width:58px;padding:7px 4px 6px}#bawah button .ubin{font-size:22px}#toasts,#debug{top:112px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}