body{-webkit-font-smoothing:antialiased;background:linear-gradient(135deg,#f3f0ff,#f6e7ee);margin:0;font-family:Inter,sans-serif}input,button,textarea{font-family:inherit}input{font-size:1rem}.container{max-width:420px;min-height:100vh;margin:0 auto;padding:20px}.title{text-align:center;color:#a591e1;letter-spacing:.5px;margin-bottom:8px;font-family:Inter,sans-serif;font-size:2.2rem;font-weight:600}.progress{text-align:center;color:#666;margin-bottom:20px}.spanConcluidos,.spanTotal{color:#a591e1;font-weight:600}.inputGroup{gap:10px;margin-bottom:20px;display:flex}.inputGroup input{color:#1f2937;background:#fff;border:2px solid #0000;border-radius:12px;outline:none;flex:1;padding:12px 14px;font-size:1rem;transition:all .25s;box-shadow:0 5px 10px #0000000d}.inputGroup input:focus{border-color:#a591e1;transform:translateY(-1px);box-shadow:0 5px 15px #00000014,0 0 0 3px #a591e140}.inputGroup input::placeholder{color:#9ca3af;opacity:.8}.inputGroup button{color:#fff;cursor:pointer;background:#a591e1;border:none;border-radius:12px;width:45px;font-size:20px;transition:all .2s}.inputGroup button:hover{background:#8b7bd6;transform:translateY(-1px)}.inputGroup button:active{transform:scale(.95)}.lista{flex-direction:column;gap:12px;display:flex}.card{color:#1f2937;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:14px;font-weight:500;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 5px 15px #0000000d}.card:hover{transform:translateY(-2px);box-shadow:0 10px 20px #00000014}.card:first-child{background:#fda4af}.card:nth-child(2){background:#c4b5fd}.card:nth-child(3){background:#6ee7b7}.card:nth-child(4){background:#fdba74}.card:nth-child(5){background:#fda4e8}.card:nth-child(6){background:#b5ecfd}.card:nth-child(7){background:#e7e76e}.card:nth-child(8){background:#fdc274}.card span{flex:1;align-items:center;margin:0 10px;font-weight:700;line-height:1;display:flex}.done{opacity:.6;text-decoration:line-through}.card button{cursor:pointer;background:#0000000d;border:none;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;line-height:1;transition:all .2s;display:flex}.card button:hover{color:#fff;background:#ef4444;transform:scale(1.1)}.checkbox{width:20px;height:20px;position:relative}.checkbox input{opacity:0;width:0;height:0}.checkmark{background:#fff;border:2px solid #a591e1;border-radius:6px;flex-shrink:0;width:20px;height:20px;transition:all .2s;display:inline-block;position:absolute;top:50%;left:0;transform:translateY(-50%)}.checkbox input:checked+.checkmark{background:#a591e1;border-color:#a591e1}.checkmark:after{content:"";display:none;position:absolute}.checkbox input:checked+.checkmark:after{display:block}.checkbox .checkmark:after{border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:10px;top:2px;left:6px;transform:rotate(45deg)}@media (width>=768px){.container{max-width:600px;padding:30px}.title{font-size:2.5rem}.progress{font-size:1.1rem}.inputGroup input{padding:14px;font-size:1.05rem}.card{padding:16px}}@media (width>=1024px){.container{flex-direction:column;justify-content:center;max-width:700px;min-height:100vh;padding:40px;display:flex}.title{font-size:2.8rem}.progress{font-size:1.2rem}.lista{gap:16px}.card{padding:18px}.inputGroup input{font-size:1.1rem}}.card{animation:.6s fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.done{opacity:.6;text-decoration:line-through;transition:all .2s}