.todo-item{display:flex;align-items:center;margin-bottom:10px;padding:8px 0;font-size:1.08rem;border-bottom:1px solid #f0f0f0;transition:background .2s}.todo-item:last-child{border-bottom:none}.todo-item input[type=checkbox]{accent-color:#4285f4;width:20px;height:20px;margin-right:12px;cursor:pointer}.completed-state{color:#b0b0b0;text-decoration:line-through}@media (max-width: 600px){.input-row{flex-direction:column;gap:8px;align-items:stretch}.task-input,.add-btn,.clear-btn{width:100%;min-width:0;box-sizing:border-box}}body,html{background:#f5f5f5;font-family:Roboto,Arial,sans-serif}.todo-bg-wrapper{min-height:100vh;background:linear-gradient(135deg,#e3f2fd,#fff);display:flex;align-items:center;justify-content:center}.todo-container{max-width:420px;width:100%;margin:40px auto;padding:32px 28px 24px;border-radius:18px;background:#fff;box-shadow:0 6px 24px #3c404326,0 1.5px 4px #3c404314;border:none}.todo-title{font-size:2.1rem;font-weight:700;color:#4285f4;text-align:center;margin-bottom:24px;letter-spacing:1px}.input-row{display:flex;gap:10px;margin-bottom:18px}.task-input{flex:1;padding:10px 14px;border:1.5px solid #d2d2d2;border-radius:8px;font-size:1rem;outline:none;transition:border .2s;background:#f8fafc}.task-input:focus{border:1.5px solid #4285f4;background:#fff}.add-btn{padding:8px 18px;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s,box-shadow .2s;box-shadow:0 1px 2px #3c404314;background:#4285f4;color:#fff}.add-btn:hover{background:#357ae8}.clear-btn{padding:8px 18px;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s,box-shadow .2s;box-shadow:0 1px 2px #3c404314;background:#e3e3e3;color:#444}.clear-btn:hover{background:#d2d2d2}.task-count{margin-top:18px;text-align:right;color:#666;font-size:1rem}