:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#2563eb;
  --danger:#dc2626;
  --radius:12px;
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
  background-size:400% 400%;
  animation:gradient 15s ease infinite;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
}

@keyframes gradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.container{width:100%;max-width:720px}
.todo-app{
  background:var(--card);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.app-header h1{margin:0;font-size:1.4rem;letter-spacing:0.2px}
.subtitle{margin:2px 0 0;color:var(--muted);font-size:0.95rem}

.row{display:flex;gap:12px}
#input-box{
  flex:1;
  padding:10px 12px;
  border:1px solid #e6e9ee;
  border-radius:10px;
  font-size:1rem;
  background:transparent;
  transition:box-shadow .15s, border-color .15s;
}
#input-box:focus{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,0.06);border-color:var(--accent)}

.btn{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  font-weight:600;
}
.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}
.btn.danger{
  background:var(--danger);
  color:#fff;
}
.btn:focus{outline:2px solid rgba(37,99,235,0.18)}

.action-row{display:flex;gap:8px;align-items:center}
.task-summary{display:flex;gap:16px;color:var(--muted);font-size:0.95rem}

.task-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.task-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  background:#fbfdff;
  border:1px solid #f0f3f7;
}
.task-item .label{
  flex:1;
  font-size:1rem;
  color:#071035;
}
.task-item.completed .label{color:var(--muted);text-decoration:line-through}

.task-item input[type="checkbox"]{
  width:18px;height:18px;
  margin:0;
  accent-color:var(--accent);
}

.delete-btn{
  border:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:600;padding:6px;border-radius:8px;
}
.delete-btn:hover{background:#f4f6fb;color:#0f172a}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:520px){
  .todo-app{padding:16px}
  .row{flex-direction:column}
  .btn{width:100%}
}