body{background:linear-gradient(120deg,#e0eafc,#cfdef3);min-height:100vh;font-family:Segoe UI,Roboto,Arial,sans-serif}main{max-width:420px;margin:3rem auto;padding:2.5rem 2rem;background:#fff;border-radius:16px;box-shadow:0 6px 32px #0002,0 1.5px 6px #0070f322;transition:box-shadow .2s}main:hover{box-shadow:0 12px 48px #0003,0 2px 8px #0070f344}h1{text-align:center;font-size:2.2rem;color:#0070f3;margin-bottom:1.5rem;letter-spacing:1px}form{display:flex;gap:.5rem;margin-bottom:1.5rem}input[placeholder]{flex:1;padding:.7rem 1rem;border:1.5px solid #b3c6e0;border-radius:6px;font-size:1rem;background:#f7fafd;transition:border .2s,box-shadow .2s}input[placeholder]:focus{border:1.5px solid #0070f3;outline:none;box-shadow:0 0 0 2px #0070f322}button{padding:.7rem 1.2rem;border:none;background:linear-gradient(90deg,#0070f3 60%,#00c6fb);color:#fff;border-radius:6px;font-weight:600;font-size:1rem;cursor:pointer;box-shadow:0 2px 8px #0070f322;transition:background .2s,box-shadow .2s}button:hover{background:linear-gradient(90deg,#0059c1 60%,#00a6d6);box-shadow:0 4px 16px #0070f344}ul{list-style:none;padding:0;margin:0}li{display:flex;align-items:center;gap:.7rem;padding:.7rem .3rem;border-bottom:1.5px solid #f0f4fa;font-size:1.08rem;transition:background .15s}li:last-child{border-bottom:none}li:hover{background:#f7fafd}li.completed{text-decoration:line-through;color:#b3b3b3;opacity:.7}input[type=checkbox]{accent-color:#0070f3;width:1.1rem;height:1.1rem}li button{background:#ff4d4f;color:#fff;border-radius:4px;padding:.3rem .7rem;font-size:.95rem;margin-left:auto;box-shadow:none;transition:background .2s}li button:hover{background:#d9363e}