*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Segoe UI,sans-serif}body{background:linear-gradient(135deg,#0f172a 0%,#1e293b 30%,#312e81 70%,#4f46e5 100%);min-height:100vh;overflow-x:hidden}body:before,body:after{content:"";filter:blur(120px);z-index:-1;border-radius:50%;position:fixed}body:before{background:#7c3aed;width:300px;height:300px;top:-100px;left:-100px}body:after{background:#06b6d4;width:350px;height:350px;bottom:-150px;right:-100px}.container{justify-content:center;align-items:center;min-height:100vh;padding:40px 20px;display:flex}.todo-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff14;border:1px solid #ffffff1f;border-radius:28px;width:100%;max-width:800px;padding:35px;animation:.7s fadeIn;box-shadow:0 10px 40px #0000004d,0 0 30px #6366f133}.todo-card h1{text-align:center;color:#fff;letter-spacing:1px;margin-bottom:30px;font-size:2.5rem}.todo-form{gap:12px;margin-bottom:30px;display:flex}.todo-form input{color:#fff;background:#ffffff14;border:1px solid #ffffff26;border-radius:16px;outline:none;flex:1;padding:16px 20px;font-size:1rem;transition:all .3s}.todo-form input::placeholder{color:#fff9}.todo-form input:focus{border-color:#60a5fa;box-shadow:0 0 20px #60a5fa66}.todo-form button{cursor:pointer;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:16px;padding:0 25px;font-size:1rem;font-weight:600;transition:all .3s}.todo-form button:hover{transform:translateY(-3px);box-shadow:0 10px 25px #6366f166}.todo-list{flex-direction:column;gap:15px;list-style:none;display:flex}.todo-item{background:#ffffff12;border:1px solid #ffffff14;border-radius:18px;justify-content:space-between;align-items:center;padding:18px 20px;transition:all .3s;animation:.4s slideUp;display:flex}.todo-item:hover{background:#ffffff1f;transform:translateY(-4px)}.todo-item span{color:#fff;word-break:break-word;max-width:60%;font-size:1rem;font-weight:500}.actions{gap:10px;display:flex}.edit-btn,.delete-btn{cursor:pointer;color:#fff;border:none;border-radius:12px;padding:10px 16px;font-weight:600;transition:all .3s}.edit-btn{background:linear-gradient(135deg,#f59e0b,#f97316)}.edit-btn:hover{transform:scale(1.05);box-shadow:0 8px 20px #f59e0b66}.delete-btn{background:linear-gradient(135deg,#ef4444,#dc2626)}.delete-btn:hover{transform:scale(1.05);box-shadow:0 8px 20px #ef444466}@keyframes fadeIn{0%{opacity:0;transform:translateY(-25px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#6366f1;border-radius:20px}@media (width<=768px){.todo-form{flex-direction:column}.todo-form button{height:55px}.todo-item{flex-direction:column;align-items:flex-start;gap:15px}.todo-item span{max-width:100%}.actions{width:100%}.edit-btn,.delete-btn{flex:1}}