:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#2563eb;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}


*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

.app{
    max-width:640px;
    margin:40px auto;
    padding:20px
}

h1{
    margin:0 0 12px;
    font-size:1.6rem
}

form{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

input{
    flex:1;
    padding:10px;
    border-radius:8px;
    border:1px solid rgba(0,0,0,0.08)
}

button{
    padding:10px 12px;
    border-radius:8px;
    border:none;
    background:var(--accent);
    color:white;
    cursor:pointer;
}

.controls{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    color:var(--muted);
}

.list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:8px
}

.item{
    background:var(--card);
    padding:10px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:10px;box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.check{width:22px;height:22px;border-radius:6px;border:2px solid rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;cursor:pointer}
.check.done{background:#10b981;color:white;border-color:transparent}
.text{flex:1}
.text.done{text-decoration:line-through;color:var(--muted)}
.icon{background:transparent;border:none;cursor:pointer;padding:6px;font-size:14px}
.empty{color:var(--muted);text-align:center;margin-top:18px}
@media (max-width:520px){.app{padding:12px;margin:20px}}