body {
  margin:0; padding:0;
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  display:flex; justify-content:center; align-items:flex-start;
  min-height:100vh;
  padding-top:2rem;
  transition: background 0.5s;
}

.todo-container {
  background:white;
  border-radius:1rem;
  padding:2rem;
  width:100%; max-width:450px;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

h1 { text-align:center; color:#4f46e5; margin-bottom:1.5rem; }

.input-group {
  display:flex; gap:0.5rem; margin-bottom:1rem;
}

.input-group input {
  flex:1; padding:0.7rem 1rem; border-radius:0.5rem; border:1px solid #ccc; font-size:1rem;
  transition: all 0.3s;
}

.input-group input:focus { border-color:#4f46e5; outline:none; }

.input-group select {
  border-radius:0.5rem; padding:0.5rem; border:1px solid #ccc;
}

.input-group button {
  padding:0.7rem 1rem; border:none; border-radius:0.5rem;
  background:#4f46e5; color:white; cursor:pointer; transition:all 0.3s;
}

.input-group button:hover { background:#6b5dd3; transform:scale(1.05); }

.filter-group {
  display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; justify-content:center;
}

.filter-group button {
  padding:0.5rem 0.8rem; border:none; border-radius:0.5rem;
  cursor:pointer; background:#e0e0e0; transition: all 0.3s;
}

.filter-group button.active { background:#4f46e5; color:white; }
.filter-group button:hover { transform:scale(1.05); }

#todoList { list-style:none; padding:0; margin:0; }

.todo-item {
  display:flex; justify-content:space-between; align-items:center;
  background:#f0f0f0; padding:0.7rem 1rem; border-radius:0.5rem; margin-bottom:0.5rem;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s;
  opacity:0; transform:translateY(20px);
  animation: fadeUp 0.5s forwards;
}

.todo-item.done { text-decoration: line-through; background:#d1c4e9; color:#4f46e5; }

.todo-item .task-text { flex:1; cursor:pointer; }

.todo-item button {
  background:#f87171; border:none; border-radius:0.5rem; padding:0.3rem 0.6rem; cursor:pointer;
  transition: all 0.3s;
}

.todo-item button:hover { background:#ef4444; transform:scale(1.1); }

.todo-item.low { border-left:4px solid #3b82f6; }      /* Blue */
.todo-item.medium { border-left:4px solid #a855f7; }   /* Purple */
.todo-item.high { border-left:4px solid #ef4444; }     /* Red */

@keyframes fadeUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }