body { font-family: sans-serif; display: flex; justify-content: center; padding: 20px; background: #f4f4f9; }
.container { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 350px; }
.input-group { display: flex; gap: 10px; margin-bottom: 20px; }
input { flex: 1; padding: 8px; }
ul { list-style: none; padding: 0; }
li { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee; }

.completed span { text-decoration: line-through; color: gray; }

.stats { display: flex; justify-content: space-around; font-weight: bold; margin-bottom: 10px; }
.danger-btn { width: 100%; margin-top: 20px; background: #ff4444; color: white; border: none; padding: 10px; cursor: pointer; }

.todo-text {
    cursor: pointer;
    flex: 1;
    margin-right: 10px;
}

.todo-text:hover {
    color: #007bff;
}


.actions button {
    margin-left: 5px;
    padding: 5px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}

.edit-btn { background: #ffc107; color: black; }
.complete-btn { background: #28a745; color: white; }
.delete-btn { background: #dc3545; color: white; }

.actions button:hover { opacity: 0.8; }