:root{--bg:#F3F6FC;--sf:#fff;--tx:#14213D;--t2:#5B6B86;--t3:#9AA7BD;--bd:#E3EAF6;--pri:#0B3C8C;--pri2:#2563EB;--ok:#16A34A;--dg:#DC2626;--sh:0 6px 24px rgba(11,60,140,.09)}
@media(prefers-color-scheme:dark){:root{--bg:#0B1220;--sf:#141E33;--tx:#E8EEF8;--t2:#9AA9C0;--t3:#5F6E87;--bd:#23304D;--sh:none}}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh}
button,input,textarea{font:inherit;color:inherit}
#main{max-width:560px;margin:0 auto;padding-bottom:110px}
.hero{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;padding:calc(env(safe-area-inset-top) + 28px) 22px 44px;border-radius:0 0 28px 28px;user-select:none}
.hero.sm{padding-bottom:34px}.hello{font-size:12px;opacity:.8}.hero h1{font-size:23px;font-weight:700;margin-top:2px}.hero p{font-size:13px;opacity:.85;margin-top:2px}
.body{padding:0 14px;margin-top:-26px}
.search{display:flex;align-items:center;gap:8px;background:var(--sf);border-radius:16px;padding:0 14px;box-shadow:var(--sh);margin-bottom:12px}
.search svg{width:18px;height:18px;color:var(--t3)}.search input{flex:1;border:0;outline:0;background:none;padding:14px 0;font-size:14.5px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1.5px solid var(--bd);background:var(--sf);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer}
.chip.on{background:var(--c,var(--pri));border-color:var(--c,var(--pri));color:#fff}
.list{display:grid;gap:8px}
.row{display:flex;align-items:center;gap:12px;background:var(--sf);border:0;border-radius:16px;padding:12px;box-shadow:var(--sh);text-align:left;cursor:pointer;width:100%;transition:transform .1s}
.row:active{transform:scale(.98)}.dot{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:none}
.ri{flex:1;min-width:0}.ri b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ri small{font-size:11.5px;color:var(--t3)}
.rp{font-weight:700;font-size:14px;color:var(--pri);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(prefers-color-scheme:dark){.rp{color:#7FB0FF}}
.empty{text-align:center;color:var(--t3);font-size:13px;padding:34px 10px}
.card{background:var(--sf);border-radius:18px;padding:16px;box-shadow:var(--sh);margin-bottom:12px}.card h2{font-size:15px;margin-bottom:10px}
.info{padding-left:18px}.info li{font-size:13.5px;line-height:1.6;margin-bottom:8px;color:var(--t2)}
#nav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:536px;margin:0 auto;display:flex;gap:2px;background:var(--sf);border:1px solid var(--bd);border-radius:22px;padding:6px;box-shadow:0 10px 30px rgba(11,60,140,.18);z-index:20}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:7px 0;border-radius:16px;color:var(--t3);font-size:10.5px;font-weight:600;cursor:pointer}
.nb svg{width:21px;height:21px}.nb.on{background:var(--pri);color:#fff}
.ov{position:fixed;inset:0;background:rgba(8,20,48,.55);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.sheet{width:100%;max-width:560px;background:var(--sf);border-radius:26px 26px 0 0;padding:8px 20px calc(20px + env(safe-area-inset-bottom));animation:up .22s ease-out;max-height:92vh;overflow:auto}
@keyframes up{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.grab{display:block;width:38px;height:4px;border-radius:9px;background:var(--bd);margin:6px auto 16px}
.sl{font-size:12px;color:var(--t3)}.sheet h3{font-size:18px;margin-top:2px}.sm{font-size:12.5px;color:var(--t2);margin-top:3px}.sp{font-size:24px;font-weight:700;color:var(--pri);margin:8px 0 14px}
@media(prefers-color-scheme:dark){.sp{color:#7FB0FF}}
label{display:block;font-size:12px;color:var(--t3);margin:10px 0 5px}
input,textarea{width:100%;border:1.5px solid var(--bd);background:var(--bg);border-radius:14px;padding:13px;font-size:15px;outline:0;resize:none}input:focus,textarea:focus{border-color:var(--pri)}
.btn{border:1.5px solid var(--bd);background:none;border-radius:14px;padding:13px 16px;font-weight:600;font-size:14px;cursor:pointer;color:var(--t2)}
.btn.pri{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff}.btn.dg{color:var(--dg);border-color:var(--dg)}
.btn.block{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;margin-top:10px}.btn svg{width:18px;height:18px}
.oh{display:flex;justify-content:space-between;gap:8px;font-size:14px}.card .sm{margin-top:4px}
.st{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;height:fit-content;text-transform:capitalize;background:#FEF3C7;color:#92400E}
.st.proses{background:#DBEAFE;color:#1E40AF}.st.selesai{background:#DCFCE7;color:#166534}.st.batal{background:#FEE2E2;color:#991B1B}
.seg{display:flex;gap:6px;margin-top:10px}.seg button{flex:1;border:1.5px solid var(--bd);background:none;border-radius:10px;padding:7px 0;font-size:11.5px;font-weight:600;color:var(--t2);text-transform:capitalize;cursor:pointer}
.seg button.on{background:var(--pri);border-color:var(--pri);color:#fff}
.addb{width:100%;margin-top:10px;border:1.5px dashed var(--t3);background:none;border-radius:16px;padding:13px;color:var(--t2);font-weight:600;cursor:pointer}
#toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,10px);background:var(--tx);color:var(--sf);padding:9px 18px;border-radius:99px;font-size:13px;opacity:0;transition:.2s;pointer-events:none;z-index:60;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}

#nav{overflow-x:auto;scrollbar-width:none}#nav::-webkit-scrollbar{display:none}.nb{min-width:62px}
input[type=checkbox]{width:auto;margin-right:8px;accent-color:var(--pri)}.chk{display:flex;align-items:center;font-size:13.5px;color:var(--tx);margin-top:14px}
a.btn{text-decoration:none}
input[type=color]{width:54px;height:38px;padding:2px;border-radius:10px;flex:none;cursor:pointer}
.tp{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.sw{width:40px;height:40px;border-radius:50%;border:2px solid var(--bd);cursor:pointer}
.cr{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:13.5px}
:root[data-th] .rp,:root[data-th] .sp{color:var(--rp)}
:root[data-th] .hero,:root[data-th] .btn.pri,:root[data-th] .nb.on,:root[data-th] .seg button.on{color:var(--on)}
.hero{text-align:center}
.rcp{width:232px;margin:6px auto 4px;background:#fff;color:#000;padding:14px 12px;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.18);font:11.5px/1.4 "Courier New",Courier,monospace}
.rcp .c{text-align:center}.rcp .n{font-size:15px}.rcp .r{display:flex;justify-content:space-between;gap:6px}.rcp .r b{text-align:right}.rcp .hr{border-top:1px dashed #000;margin:6px 0}.rcp .it{margin:2px 0}
html,body{max-width:100%;overflow-x:hidden}
.list{grid-template-columns:minmax(0,1fr)}
.row{min-width:0;max-width:100%}
.ri b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
.ri small{display:block;margin-top:2px}
.rp{flex:none}
.oh b{min-width:0;overflow-wrap:anywhere}.sm{overflow-wrap:anywhere}