:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#0f1221;--bg-accent:#1a1f38;--card:#ffffff0f;--card-border:#ffffff1a;--text:#f4f6ff;--muted:#9aa3c7;--primary:#7c9cff;--primary-strong:#5b7cfa;--danger:#ff7b8a;--danger-bg:#ff7b8a1f;--success:#6ee7b7;--shadow:0 24px 60px #00000059;--radius:18px;--font:"Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-family:var(--font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (prefers-color-scheme:light){:root{--bg:#eef1ff;--bg-accent:#dfe6ff;--card:#fff;--card-border:#0f172a14;--text:#12172a;--muted:#5b647e;--shadow:0 20px 50px #32468c1f}}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--text);background:radial-gradient(1200px 600px at 10% -10%, #3b4ccc55, transparent 55%), radial-gradient(900px 500px at 100% 0%, #7c3aed33, transparent 50%), linear-gradient(160deg, var(--bg), var(--bg-accent));margin:0}button,input{font:inherit}button{cursor:pointer}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app{width:min(640px,100% - 2rem);margin:0 auto;padding:2.5rem 0 3rem}.app-header{text-align:center;margin-bottom:1.5rem}.eyebrow{color:var(--primary);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .4rem;font-size:.8rem;font-weight:700}.app-header h1{letter-spacing:-.03em;margin:0;font-size:clamp(2.2rem,6vw,3rem)}.subtitle{color:var(--muted);margin:.55rem 0 0}.app-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden}.todo-form{border-bottom:1px solid var(--card-border);gap:.75rem;padding:1rem;display:flex}.todo-input,.todo-edit-input{border:1px solid var(--card-border);min-width:0;color:var(--text);background:#ffffff0a;border-radius:12px;outline:none;flex:1;padding:.85rem 1rem;transition:border-color .15s,box-shadow .15s}.todo-input:focus,.todo-edit-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #7c9cff40}.btn{border:0;border-radius:12px;padding:.75rem 1rem;font-weight:600;transition:transform .12s,opacity .12s,background .12s}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-strong));color:#fff;min-width:4.5rem}.btn-ghost{color:var(--muted);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text);background:#ffffff0f}.btn-danger{background:var(--danger-bg);color:var(--danger)}.btn-danger:hover{filter:brightness(1.08)}.todo-list{margin:0;padding:0;list-style:none}.todo-item{border-bottom:1px solid var(--card-border);grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;padding:.85rem 1rem;display:grid}.todo-item:last-child{border-bottom:0}.todo-check{width:1.35rem;height:1.35rem;display:inline-flex;position:relative}.todo-check input{opacity:0;cursor:pointer;position:absolute;inset:0}.checkmark{border:2px solid var(--muted);border-radius:999px;place-items:center;width:100%;height:100%;transition:all .15s;display:grid}.todo-check input:checked+.checkmark{background:var(--success);border-color:var(--success)}.todo-check input:checked+.checkmark:after{content:"";border:2px solid #053b2a;border-width:0 2px 2px 0;width:.28rem;height:.5rem;transform:rotate(45deg)translate(-1px,-1px)}.todo-text{text-align:left;color:var(--text);word-break:break-word;background:0 0;border:0;padding:.35rem 0}.todo-item.completed .todo-text{color:var(--muted);text-decoration:line-through}.todo-edit-form{width:100%}.todo-edit-input{width:100%;padding:.55rem .75rem}.todo-actions{gap:.35rem;display:flex}.todo-actions .btn{padding:.45rem .7rem;font-size:.85rem}.empty-state{text-align:center;padding:2.75rem 1.5rem}.empty-icon{width:3.25rem;height:3.25rem;color:var(--success);background:#6ee7b726;border-radius:999px;place-items:center;margin:0 auto .85rem;font-size:1.35rem;font-weight:700;display:grid}.empty-title{margin:0;font-size:1.1rem;font-weight:700}.empty-subtitle{color:var(--muted);margin:.4rem 0 0}.filter-bar{border-top:1px solid var(--card-border);grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;padding:.85rem 1rem 1rem;display:grid}.todo-count{color:var(--muted);margin:0;font-size:.9rem}.filter-tabs{border:1px solid var(--card-border);background:#ffffff0d;border-radius:12px;gap:.25rem;padding:.2rem;display:inline-flex}.filter-tab{color:var(--muted);background:0 0;border:0;border-radius:10px;padding:.45rem .75rem;font-size:.9rem;font-weight:600}.filter-tab.active{color:var(--text);background:#7c9cff33}.clear-completed{justify-self:end;padding:.45rem .6rem;font-size:.9rem}.app-footer{text-align:center;color:var(--muted);margin-top:1rem;font-size:.85rem}@media (width<=640px){.app{width:min(100% - 1rem,640px);padding-top:1.25rem}.todo-form{flex-direction:column}.todo-item{grid-template-columns:auto 1fr;grid-template-areas:"check text""actions actions"}.todo-check{grid-area:check}.todo-text,.todo-edit-form{grid-area:text}.todo-actions{grid-area:actions;justify-content:flex-end}.filter-bar{text-align:center;grid-template-columns:1fr;justify-items:center}.clear-completed{justify-self:center}}