.app{position:relative;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:3rem 1.25rem 4rem}.glow{position:fixed;top:-20%;left:50%;transform:translate(-50%);width:min(90vw,520px);height:420px;background:radial-gradient(ellipse at center,rgba(99,179,237,.18) 0%,rgba(99,179,237,.04) 45%,transparent 70%);pointer-events:none;z-index:0}.card{position:relative;z-index:1;width:100%;max-width:520px;background:#161c26d9;border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:2rem 1.75rem 1.5rem;box-shadow:0 24px 48px #00000073,inset 0 1px #ffffff0a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.header h1{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:-.03em}.subtitle{margin:.35rem 0 1.5rem;font-size:.9rem;color:#e8ecf480}.add-form{display:flex;gap:.5rem;margin-bottom:1.25rem}.add-input{flex:1;padding:.75rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0c0f1499;color:inherit;font-size:1rem;outline:none;transition:border-color .15s,box-shadow .15s}.add-input::placeholder{color:#e8ecf459}.add-input:focus{border-color:#63b3ed73;box-shadow:0 0 0 3px #63b3ed1f}.add-btn{padding:.75rem 1.25rem;border:none;border-radius:12px;background:linear-gradient(135deg,#4a9fd4,#3b7fb8);color:#fff;font-weight:600;font-size:.95rem;transition:opacity .15s,transform .1s}.add-btn:hover:not(:disabled){opacity:.92}.add-btn:active:not(:disabled){transform:scale(.98)}.add-btn:disabled{opacity:.35;cursor:not-allowed}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.65rem 0;margin-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.06);font-size:.8rem;color:#e8ecf48c}.toggle-all{width:28px;height:28px;padding:0;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-all.checked{border-color:#63b3ed;background:#63b3ed33}.toggle-all .checkmark{width:10px;height:6px;border-left:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(-45deg) translateY(-1px);opacity:0}.toggle-all.checked .checkmark{border-color:#63b3ed;opacity:1}.count{flex:1;min-width:5rem}.filters{display:flex;gap:.25rem;background:#0c0f1480;padding:3px;border-radius:10px}.filter{padding:.35rem .65rem;border:none;border-radius:8px;background:transparent;color:#e8ecf48c;font-size:.8rem;font-weight:500}.filter.active{background:#ffffff14;color:#e8ecf4}.clear-btn{border:none;background:none;color:#63b3edd9;font-size:.8rem;padding:.25rem 0}.clear-btn:hover{color:#63b3ed;text-decoration:underline}.todo-list{list-style:none;margin:0;padding:0}.empty{padding:2rem 0;text-align:center;color:#e8ecf466;font-size:.95rem}.todo-item{display:flex;align-items:center;gap:.75rem;padding:.85rem .25rem;border-bottom:1px solid rgba(255,255,255,.04);animation:slideIn .25s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.todo-item.completed .todo-text{color:#e8ecf461;text-decoration:line-through;text-decoration-color:#e8ecf440}.checkbox{width:28px;height:28px;padding:0;border:2px solid rgba(255,255,255,.18);border-radius:8px;background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}.todo-item.completed .checkbox{border-color:#63b3ed;background:#63b3ed38}.checkbox .checkmark{width:10px;height:6px;border-left:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(-45deg) translateY(-1px)}.todo-item.completed .checkbox .checkmark{border-color:#63b3ed}.todo-text{flex:1;font-size:1rem;line-height:1.4;word-break:break-word;cursor:default;-webkit-user-select:none;user-select:none}.remove-btn{width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:#e8ecf440;font-size:1.35rem;line-height:1;opacity:0;transition:opacity .15s,background .15s,color .15s}.todo-item:hover .remove-btn,.todo-item:focus-within .remove-btn{opacity:1}.remove-btn:hover{background:#f8717126;color:#f87171}.todo-item.editing{padding:.5rem 0}.edit-input{width:100%;padding:.75rem 1rem;border-radius:10px;border:1px solid rgba(99,179,237,.5);background:#0c0f14cc;color:inherit;font-size:1rem;outline:none;box-shadow:0 0 0 3px #63b3ed1f}*,*:before,*:after{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100dvh;font-family:DM Sans,system-ui,sans-serif;background:#0c0f14;color:#e8ecf4}#root{min-height:100dvh}button{font-family:inherit;cursor:pointer}input{font-family:inherit}