/* ...existing code... */
:root{
  --bg:#e6e6e6;
  --card:#ffffff;
  --accent:#4f46e5;
  --muted:#6b7280;
  --danger:#ef4444;
  --border:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  background:var(--bg);
  margin:0;
  padding:24px;
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.todo-app{
  max-width:640px;
  margin:0 auto;
  background:var(--card);
  border-radius:12px;
  box-shadow:0 8px 30px rgba(16,24,40,0.08);
  padding:22px;
}

h1{margin:0 0 12px;font-size:20px;font-weight:600;color:#0f172a}

form#task-form{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  align-items:center;
}

#new-task{
  flex:1;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  outline:none;
  font-size:15px;
  background:transparent;
}

#new-task::placeholder{color:#9ca3af}

#new-task:focus{
  box-shadow:0 0 0 6px rgba(79,70,229,0.06);
  border-color:var(--accent);
}

button[type="submit"]{
  background:var(--accent);
  color:white;
  border:none;
  padding:9px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}

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

li.task{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:10px;
  transition:background .12s,opacity .12s,transform .08s;
  border:1px solid transparent;
  background:transparent;
}

li.task + li.task{margin-top:8px}

li.task:hover{background:#fbfbfd;border-color:#f1f5f9;transform:translateY(-1px)}

li.task.done .text{
  text-decoration:line-through;
  color:var(--muted);
  opacity:0.9;
}

/* default checkbox appearance kept for accessibility; add small spacing */
li.task input[type="checkbox"]{
  width:18px;height:18px;flex:0 0 18px;cursor:pointer;
  accent-color:var(--accent);
  margin:0;
}

/* text */
.text{
  flex:1;
  min-width:0;
  font-size:15px;
  cursor:text;
  line-height:1.25;
  padding:2px 4px;
}

.text[contenteditable="true"]{
  outline:2px dashed rgba(79,70,229,0.18);
  border-radius:6px;
  padding:2px 6px;
  background:rgba(79,70,229,0.03);
}

/* delete button */
.delete{
  background:transparent;
  border:none;
  color:var(--danger);
  cursor:pointer;
  font-size:16px;
  padding:8px;
  border-radius:8px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.delete:hover{background:#fff1f2}

/* small helper row (if added later) */
.controls{
  display:flex;
  gap:8px;
  margin-top:12px;
  align-items:center;
  justify-content:flex-end;
  color:var(--muted);
  font-size:13px;
}

/* responsive */
@media (max-width:480px){
  .todo-app{padding:14px}
  h1{font-size:18px}
  button[type="submit"]{padding:8px 10px}
  li.task{padding:8px}
}
/* ...existing code... */