:root {
  --bg: #f6f5f2; --fg: #1d1d1b; --muted: #8a8780; --line: #e2dfd8; --card: #fff; --accent: #2f6f4f;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161615; --fg: #ecebe7; --muted: #8d8a83; --line: #2c2b29; --card: #1f1e1c; --accent: #6fbf94; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; }
h1 { font-size: 1.3rem; margin: 0 0 16px; }
form input[type=text], form input[type=password] {
  width: 100%; padding: 14px 16px; font: inherit; color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; outline: none;
}
form input:focus { border-color: var(--accent); }
.hint { color: var(--muted); font-size: .85rem; margin: 6px 2px 20px; }
ul { list-style: none; margin: 0; padding: 0; }
li { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
li .t { flex: 1; overflow-wrap: anywhere; }
li.fatto .t { text-decoration: line-through; color: var(--muted); }
li.nuovo { animation: flash .6s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 18%, transparent); } }
li input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
button.x { border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; }
button.x:hover { color: #c0392b; }
.vuoto { color: var(--muted); }
.err { color: #c0392b; }
nav { display: flex; justify-content: space-between; align-items: baseline; }
nav a { color: var(--muted); font-size: .9rem; }