*{box-sizing:border-box}body{background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 40%,#dbeafe 100%);min-height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.page{justify-content:center;align-items:flex-start;min-height:100vh;padding:64px 20px;display:flex}.card{background:#fff;border-radius:20px;width:100%;max-width:480px;padding:32px;box-shadow:0 20px 60px -15px #4f46e540,0 4px 12px #0000000a}.header h1{color:#1e1b4b;letter-spacing:-.02em;margin:0 0 6px;font-size:1.8rem;font-weight:700}.subtitle{color:#6b7280;margin:0 0 24px;font-size:.95rem}.add-form{gap:10px;margin-bottom:20px;display:flex}.add-form input{border:1.5px solid #e5e7eb;border-radius:12px;outline:none;flex:1;padding:13px 16px;font-size:.95rem;transition:border-color .15s}.add-form input:focus{border-color:#6366f1}.add-form button{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:12px;padding:0 22px;font-size:.95rem;font-weight:600;transition:background .15s,transform .1s}.add-form button:hover:not(:disabled){background:#4338ca}.add-form button:active:not(:disabled){transform:scale(.97)}.add-form button:disabled{cursor:not-allowed;background:#c7d2fe}.todo-list{flex-direction:column;gap:4px;max-height:420px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.todo-item{border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:10px 6px;transition:background .15s;display:flex}.todo-item:hover{background:#f9fafb}.todo-main{cursor:pointer;flex:1;align-items:center;gap:12px;min-width:0;display:flex}.todo-main input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.checkmark{border:2px solid #d1d5db;border-radius:7px;flex-shrink:0;width:22px;height:22px;transition:all .15s;position:relative}.todo-item.completed .checkmark{background:#4f46e5;border-color:#4f46e5}.checkmark:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:10px;transition:transform .15s;position:absolute;top:2px;left:6px;transform:rotate(45deg)scale(0)}.todo-item.completed .checkmark:after{transform:rotate(45deg)scale(1)}.todo-text{color:#1f2937;overflow-wrap:anywhere;font-size:.97rem}.todo-item.completed .todo-text{color:#9ca3af;text-decoration:line-through}.delete-btn{color:#d1d5db;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:1.4rem;line-height:1;transition:all .15s}.delete-btn:hover{color:#ef4444;background:#fef2f2}.empty-state{text-align:center;color:#9ca3af;padding:40px 0 20px}.empty-icon{color:#818cf8;background:#eef2ff;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;margin:0 auto 12px;font-size:1.5rem;display:flex}.footer{color:#9ca3af;border-top:1px solid #f3f4f6;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;font-size:.85rem;display:flex}.clear-btn{color:#6366f1;cursor:pointer;background:0 0;border:none;font-size:.85rem;font-weight:500}.clear-btn:hover{text-decoration:underline}