* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body { background: #eef2f3; display: flex; justify-content: center; padding: 40px 20px; }

.app-container { background: white; width: 100%; max-width: 450px; 
border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 25px; }

h1 { color: #333; margin-bottom: 20px; font-size: 1.5rem; }

.input-group { display: flex; gap: 8px; margin-bottom: 20px; }

input { flex: 1; padding: 12px; border: 2px solid #eee;
border-radius: 8px; outline: none; transition: 0.3s; }
input:focus { border-color: #6c5ce7; }

#addBtn { background: #6c5ce7; color: white; border: none; 
padding: 0 20px; border-radius: 8px; cursor: pointer; font-size: 1.5rem; }

.filters { display: flex; gap: 5px; margin-bottom: 15px; }

.filter-btn { flex: 1; padding: 8px; border: none; border-radius: 5px; cursor: pointer;
 background: #f8f9fa; font-size: 0.8rem; }

.filter-btn.active { background: #6c5ce7; color: white; }

ul { list-style: none; }

li { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #eee;
     gap: 10px; transition: 0.2s; }

li.completed span { text-decoration: line-through; color: #aaa; }

.delete-btn { margin-left: auto; color: #ff7675; cursor: pointer; border: none; background: none; }