:root {
  --bg: #0f172a;
  --card: #1e293b;
  --line: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #6366f1;
  --ok: #22c55e;
  --warn: #f59e0b;
  --err: #ef4444;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

main { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

header { margin-bottom: 1.25rem; }
h1 { margin: 0; font-size: 1.6rem; }
.sub { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.row { display: flex; align-items: center; gap: .6rem; }
.row.gap { gap: .5rem; flex-wrap: wrap; }

.dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.err { background: var(--err); }

.hint { color: var(--muted); font-size: .85rem; margin: .6rem 0 0; }
.hint:empty { display: none; }

.btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.btns:empty { display: none; }

button {
  font: inherit;
  padding: .6rem 1rem;
  border-radius: .6rem;
  border: 1px solid var(--line);
  background: #334155;
  color: var(--text);
  cursor: pointer;
  min-height: 2.75rem;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: .5; cursor: default; }

input[type="text"], select {
  font: inherit;
  width: 100%;
  padding: .6rem .7rem;
  border-radius: .6rem;
  border: 1px solid var(--line);
  background: #0b1220;
  color: var(--text);
  min-height: 2.75rem;
}
select { width: auto; flex: 1 1 8rem; }
#todo-form label { color: var(--muted); font-size: .9rem; }
#todo-form .row { margin-top: .7rem; }
#todo-form button { flex: none; }

.list { list-style: none; margin: 0 0 1rem; padding: .5rem; }
.list:empty::after { content: "Noch keine Todos."; color: var(--muted); display: block; padding: .5rem; }

.todo {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--line);
}
.todo:last-child { border-bottom: 0; }
.todo input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); flex: none; }
.todo .txt { flex: 1; min-width: 0; }
.todo .txt b { font-weight: 500; display: block; overflow-wrap: anywhere; }
.todo.done .txt b { text-decoration: line-through; color: var(--muted); }
.todo .meta { color: var(--muted); font-size: .78rem; }
.todo .del { background: none; border: 0; color: var(--muted); font-size: 1.2rem; padding: .3rem .5rem; min-height: auto; }

.diag summary { cursor: pointer; color: var(--muted); }
.diag dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: .8rem 0 0; font-size: .82rem; }
.diag dt { color: var(--muted); }
.diag dd { margin: 0; overflow-wrap: anywhere; }