* { box-sizing: border-box; font-family: system-ui, sans-serif; }


body {
margin: 0;
background: #f4f5f7;
color: #222;
}


body.dark {
background: #0f172a;
color: #e5e7eb;
}


header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
}


.box {
max-width: 400px;
margin: 80px auto;
padding: 24px;
background: white;
border-radius: 12px;
}


body.dark .box, body.dark li {
background: #020617;
}


input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 8px;
border: 1px solid #ccc;
}


button {
padding: 8px 12px;
border-radius: 8px;
border: none;
background: #4f46e5;
color: white;
cursor: pointer;
}


ul { list-style: none; padding: 0; }


li {
padding: 10px;
border-radius: 8px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}