/* ...existing code... */
:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#2563eb;
  --accent-600:#1e40af;
  --shadow: 0 6px 22px rgba(18,24,37,0.08);
  --radius:12px;
  --gap:14px;
  --text:#0f172a;
  --success:#10b981;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}
.container{max-width:940px;margin:48px auto;padding:24px}
.header{margin-bottom:18px}
.title{font-size:40px;margin:0 0 6px;font-weight:700;letter-spacing:-0.5px}
.subtitle{margin:0;color:var(--muted)}

.card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);margin-top:18px}
.add-form{display:flex;gap:12px;align-items:center}
.input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid #e6e9ee;background:#fff;font-size:16px;outline:none}
.input:focus{box-shadow:0 0 0 4px rgba(37,99,235,0.08);border-color:var(--accent-600)}
.btn{padding:8px 12px;border-radius:8px;border:1px solid #d1d5db;background:#fff;cursor:pointer;font-weight:600;color:var(--text)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-600));color:#fff;border:none;box-shadow:0 6px 14px rgba(37,99,235,0.12)}
.btn:active{transform:translateY(1px)}
.controls{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:12px;flex-wrap:wrap}
.counts{color:var(--muted);font-size:14px}
.control-buttons{display:flex;gap:8px}

.task-list{margin-top:16px;display:flex;flex-direction:column;gap:8px;min-height:40px}
.task{
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid #f0f2f5;box-shadow:0 2px 8px rgba(15,23,42,0.03);
}
.task-left{display:flex;align-items:center;gap:12px}
.checkbox{width:18px;height:18px;border-radius:4px;border:1px solid #d1d5db;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.checkbox.checked{background:var(--success);border-color:var(--success);color:#fff}
.title{font-size:16px}
.meta{color:var(--muted);font-size:13px;margin-left:8px}
.task-actions{display:flex;gap:8px;align-items:center}
.icon{background:transparent;border:none;cursor:pointer;color:var(--muted)}
.icon.delete{color:#ef4444}
.title.done{text-decoration:line-through;color:var(--muted)}

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

/* responsive */
@media (max-width:600px){
  .title{font-size:28px}
  .add-form{flex-direction:column;align-items:stretch}
  .control-buttons{width:100%;justify-content:flex-start}
}