:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#f6f5f1;--card:#fff;--tx:#1f2328;--mu:#6b7280;--bd:#e3e1da;--ac:#2f6f5e;--acb:#e4f1ec;--wa:#b7791f;--wab:#fbf1dc;--dn:#2f6f5e;--rd:#b3412f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17191a;--card:#212426;--tx:#ecece8;--mu:#9aa1a9;--bd:#33373a;--ac:#6fc2a8;--acb:#1f3a33;--wa:#e0b45c;--wab:#3a3220;--dn:#6fc2a8;--rd:#e68a7a}}
:root[data-theme="dark"]{--bg:#17191a;--card:#212426;--tx:#ecece8;--mu:#9aa1a9;--bd:#33373a;--ac:#6fc2a8;--acb:#1f3a33;--wa:#e0b45c;--wab:#3a3220;--dn:#6fc2a8;--rd:#e68a7a}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.w{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:20px;margin:0}
header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:12px}
input,select,textarea,button{font:inherit;color:var(--tx);background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:8px 10px}
input,select,textarea{width:100%}
button{cursor:pointer}
button.p{background:var(--ac);border-color:var(--ac);color:var(--bg);font-weight:600}
button.g{border:0;background:none;color:var(--mu);padding:4px 8px}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs button{flex:1}
.tabs button.on{background:var(--acb);border-color:var(--ac);color:var(--ac);font-weight:600}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row>*{flex:1 1 140px}
.t{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--bd)}
.t:first-child{border-top:0}
.t .b{flex:1;min-width:0}
.t .n{overflow-wrap:anywhere}
.t.done .n{text-decoration:line-through;color:var(--mu)}
.m{font-size:12px;color:var(--mu)}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--acb);color:var(--ac);margin-right:4px}
.tag.w{background:var(--wab);color:var(--wa)}
.bar{height:8px;background:var(--bd);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ac)}
.st{width:auto;flex:0 0 auto;padding:4px 6px;font-size:13px}
.empty{color:var(--mu);text-align:center;padding:16px 0}
.nums{display:flex;gap:12px;font-size:13px;margin:6px 0}
label{font-size:13px;color:var(--mu)}
.tw{border-top:1px solid var(--bd)}.tw:first-child{border-top:0}.tw .t{border-top:0}.cm{padding:0 0 10px 0}.rp{margin-left:18px}.prog{margin:4px 0;padding:6px 8px;background:var(--acb);border-radius:8px;font-size:13px}
.tag.pr-tinggi{background:var(--rd);color:var(--bg)}.tag.pr-sedang{background:var(--wab);color:var(--wa)}.tag.pr-rendah{background:var(--bd);color:var(--mu)}