:root{--bg:#FAFAF9;--card:#fff;--ink:#1e293b;--muted:#78716c;--line:#e7e5e4;--accent:#059669;--accent-soft:#d1fae5;--danger:#dc2626}
@media (prefers-color-scheme:dark){:root{--bg:#0f172a;--card:#1e293b;--ink:#f1f5f9;--muted:#94a3b8;--line:#334155;--accent:#34d399;--accent-soft:#064e3b}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;
background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;min-height:100vh}
.display{font-family:'Fraunces',serif;font-weight:900;letter-spacing:-0.03em}
.card{background:var(--card);border:1px solid var(--line)}
.muted{color:var(--muted)}
.accent-bg{background:var(--accent);color:#fff}
.input{background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:16px}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .3s}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.enter{animation:slideIn .22s ease-out}
.leaving{opacity:0;transform:translateX(30px);max-height:0!important;padding-top:0!important;padding-bottom:0!important;margin:0!important;border-width:0!important}
.row{transition:all .22s ease;max-height:300px;overflow:hidden}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.pop{animation:pop .25s}
.check{border:2px solid var(--line);transition:all .15s}
.check.on{background:var(--accent);border-color:var(--accent)}
.trash{color:var(--muted)}
.trash:hover{color:var(--danger)}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(540deg)}}
.particle{position:fixed;left:50%;top:40%;font-size:22px;pointer-events:none;animation:conf 1.2s ease-out forwards;z-index:50}
.bar{transition:width .4s cubic-bezier(.2,.8,.2,1)}