:root{
  --bg:#07111f;
  --panel:#0f172a;
  --panel-2:#111c33;
  --text:#f8fafc;
  --muted:#94a3b8;
  --accent:#6366f1;
  --accent-2:#8b5cf6;
  --success:#10b981;
  --danger:#ef4444;
  --border:rgba(255,255,255,.12);
  --shadow:0 20px 48px rgba(0,0,0,.28);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:radial-gradient(circle at top left, #1d4ed8 0%, #0f172a 45%, #020617 100%);
  color:var(--text);
}

.todo-container{
  width:min(700px, 100%);
  background:rgba(15,23,42,.9);
  backdrop-filter:blur(18px);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:28px;
}

h1{
  margin:0 0 8px;
  font-size:2rem;
  font-weight:700;
}

.subtitle{
  margin:0 0 20px;
  color:var(--muted);
}

#date{
  margin:0 0 16px;
  color:#cbd5e1;
  font-weight:600;
}

.input-box{
  display:flex;
  gap:12px;
  margin-bottom:16px;
}

#taskInput{
  flex:1;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#111c33;
  color:var(--text);
  outline:none;
}

#taskInput:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(99,102,241,.22);
}

.input-box button,
.delete-all button{
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:12px 16px;
  font-weight:600;
  color:white;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  transition:transform .2s ease, filter .2s ease;
}

.input-box button:hover,
.delete-all button:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}

.task-info{
  display:flex;
  gap:12px;
  margin-bottom:16px;
}

.task-info p{
  flex:1;
  margin:0;
  padding:12px 14px;
  border-radius:14px;
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--muted);
}

.task-info span{
  color:var(--text);
  font-weight:700;
  margin-left:6px;
}

.delete-all{
  margin-bottom:16px;
}

.delete-all button{
  background:linear-gradient(135deg, var(--danger), #fb7185);
}

#taskList{
  list-style:none;
  padding:0;
  margin:0 0 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

#taskList li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:#0b1220;
  border:1px solid var(--border);
  border-radius:16px;
  transition:transform .2s ease, border-color .2s ease;
}

#taskList li:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.22);
}

#taskList li span{
  flex:1;
  word-break:break-word;
}

.task-btns{
  display:flex;
  gap:8px;
}

.complete-btn,
.delete-btn{
  border:none;
  cursor:pointer;
  padding:8px 12px;
  border-radius:10px;
  color:white;
  font-weight:600;
}

.complete-btn{
  background:var(--success);
}

.delete-btn{
  background:var(--danger);
}

.complete-btn:hover,
.delete-btn:hover{
  filter:brightness(1.08);
}

#taskList li.completed{
  opacity:.75;
  border-color:rgba(16,185,129,.35);
}

#taskList li.completed span{
  text-decoration:line-through;
  color:var(--muted);
}

.footer-text{
  margin-top:16px;
  text-align:center;
  color:var(--muted);
  font-size:.95rem;
}

.dev{
  margin-top:12px;
  text-align:center;
  color:#cbd5e1;
  font-size:1rem;
}