:root {
  --bg: #f6f5f1; --card: #ffffff; --ink: #1c1c1a; --muted: #6b6a64; --line: #e3e1d9;
  --accent: #2f6f5e; --accent-ink: #ffffff; --accent-soft: #bcd9cf; --warn: #b3412b;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151614; --card: #1f201d; --ink: #ecebe5; --muted: #9b9a92; --line: #31322d;
    --accent: #5fb59c; --accent-ink: #0d1512; --accent-soft: #2c4a40; --warn: #e58a72;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
#app { max-width: 640px; margin: 0 auto; padding: 16px 16px 64px; }
header { display: flex; align-items: center; gap: 12px; }
h1 { flex: 1; margin: 0; font-size: 1.4rem; }
h2 { margin: 28px 0 8px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.muted, small { color: var(--muted); }
small { display: block; font-size: .8rem; }
.late { color: var(--warn); }

nav.tabs { display: flex; gap: 4px; margin: 16px 0 0; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
nav.tabs { overflow-x: auto; }
nav.tabs a { flex: 1; min-width: 0; padding: 10px 4px; font-size: .95rem; text-align: center; text-decoration: none; color: var(--muted); border-radius: 8px; }
nav.tabs a.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.list { margin: 0; padding: 0; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row.done .title { text-decoration: line-through; color: var(--muted); }
.grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.title { display: block; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.check { flex: none; width: 32px; height: 32px; border: 2px solid var(--accent); border-radius: 50%; background: transparent; color: var(--accent-ink); line-height: 1; }
.check[aria-pressed="true"] { background: var(--accent); }
.ghost { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; border-radius: 8px; }
.ghost:hover { color: var(--ink); }
.ghost.small { font-size: .9rem; padding: 0 8px; }
.badge { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); font-size: .8rem; white-space: nowrap; }
.dots { display: flex; gap: 3px; margin-top: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--accent); }

form.add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
form.add input[type="text"] { flex: 1 1 200px; }
input, select { min-height: 44px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
form button[type="submit"] { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
form.login { display: grid; gap: 12px; max-width: 360px; margin-top: 24px; }
form.login label { display: grid; gap: 4px; }
.flash { min-height: 1.4em; margin: 12px 0 0; color: var(--warn); }
.flash.ok { color: var(--accent); }
.button { display: inline-block; min-height: 44px; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.stat { padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.stat b { display: block; font-size: 1.6rem; }
.chart { display: flex; gap: 4px; height: 140px; padding: 12px 8px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.bars { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 100px; }
.bar { flex: 1; min-height: 0; border-radius: 3px 3px 0 0; }
.bar.tasks { background: var(--accent); }
.bar.habits { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -1px; }
.col small { margin-top: 4px; font-size: .65rem; }
.legend { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.swatch { display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 2px; vertical-align: baseline; }
.swatch.tasks { background: var(--accent); }
.swatch.habits { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -1px; }