body{
font-family:system-ui,Segoe UI,Arial;
background:#111;
color:#eee;
margin:0;
}

.top{
padding:20px;
border-bottom:1px solid #333;
}

input[type=text]{
padding:8px;
font-size:14px;
}

.buttons{
margin-top:15px;
display:flex;
gap:10px;
}

button{
padding:8px 14px;
font-weight:bold;
cursor:pointer;
}

main{
max-width:900px;
margin:auto;
padding:20px;
}

.task{
display:grid;
grid-template-columns:40px 1fr;
gap:10px;
align-items:center;
padding:8px;
border-bottom:1px solid #333;
}

.task input[type=text]{
width:100%;
padding:6px;
background:#222;
border:1px solid #444;
color:#fff;
}

.bar{
margin-top:10px;
height:10px;
background:#333;
}

#barFill{
height:100%;
width:0%;
background:#3bd27f;
}