:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #101827; color: #eef2ff; }
main { max-width: 860px; margin: 0 auto; padding: 32px 16px; }
header, .panel { background: #172033; border: 1px solid #2d3b59; border-radius: 16px; padding: 20px; margin-bottom: 18px; }
h1, h2 { margin-top: 0; }
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-weight: 600; }
input, textarea { border-radius: 10px; border: 1px solid #405172; padding: 10px; font: inherit; }
textarea { min-height: 84px; }
button { border: 0; border-radius: 999px; padding: 10px 14px; font-weight: 700; cursor: pointer; background: #8b5cf6; color: white; }
button:disabled { opacity: .45; cursor: not-allowed; }
ul { padding: 0; list-style: none; }
li { display: grid; gap: 10px; background: #0d1322; border: 1px solid #26344f; border-radius: 14px; padding: 14px; margin: 10px 0; }
.task-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.task-row input[type="text"] { flex: 1 1 240px; }
#error { color: #fca5a5; min-height: 1.2em; }
.done input[type="text"] { text-decoration: line-through; opacity: .75; }