*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(circle at top,#4f46e5,#1e1b4b);min-height:100vh;font-family:Inter,system-ui,sans-serif}.app{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#ffffffd9;border-radius:24px;max-width:480px;margin:100px auto;padding:30px 25px;transition:all .3s;box-shadow:0 10px 30px #0003,inset 0 1px #fff9}.app:hover{transform:translateY(-5px)}h1{text-align:center;color:#222;letter-spacing:.5px;margin-bottom:25px;font-size:28px}.input-container{gap:12px;margin-bottom:10px;display:flex}input{background:#f3f4f6;border:none;border-radius:14px;outline:none;flex:1;padding:14px;font-size:14px;transition:all .2s}input:focus{background:#e5e7eb}button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:14px;padding:14px 18px;font-weight:600;transition:all .2s;box-shadow:0 6px 15px #6366f166}button:hover{opacity:.95;transform:scale(1.05)}.todo-item{background:#fff;border-radius:14px;justify-content:space-between;align-items:center;margin-top:12px;padding:14px;transition:all .2s;animation:.3s fadeIn;display:flex;box-shadow:0 8px 20px #0000000d}.todo-item:hover{transform:translate(5px)}.todo-item span{cursor:pointer;flex:1;font-size:15px}.completed{color:#9ca3af;text-decoration:line-through}.todo-item button{box-shadow:none;background:#ef4444;border-radius:10px;padding:6px 10px;font-size:14px}.todo-item button:hover{background:#dc2626}.empty{text-align:center;color:#6b7280;margin-top:25px;font-size:15px}.todo-item small{color:#6b7280;margin-top:4px;font-size:12px;display:block}.todo-item input{width:100%;margin-top:6px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}