:root {
  --tlo: #f6f3ec;
  --karta: #ffffff;
  --tekst: #1d2321;
  --szary: #6b736f;
  --akcent: #16302b;
  --akcent-2: #2f7d64;
  --spozn: #b4462f;
  --linia: #e3ddd0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #121614;
    --karta: #1c2220;
    --tekst: #eef1ee;
    --szary: #9aa39e;
    --akcent: #cfe8dc;
    --akcent-2: #5fc39d;
    --spozn: #ef8a72;
    --linia: #2c3431;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--tlo);
  color: var(--tekst);
  font-size: 19px;
  line-height: 1.4;
  padding: env(safe-area-inset-top) 16px calc(96px + env(safe-area-inset-bottom));
  max-width: 640px;
  margin-inline: auto;
}
header { display: flex; gap: 14px; align-items: center; padding: 20px 0 8px; }
.veran {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--akcent); color: var(--tlo);
  display: grid; place-items: center;
  font-weight: 700; font-size: 26px;
}
h1 { margin: 0; font-size: 26px; }
header p { margin: 0; color: var(--szary); font-size: 16px; }

nav { display: flex; gap: 8px; margin: 12px 0 16px; }
nav button {
  flex: 1; padding: 12px 8px; border: 1px solid var(--linia); border-radius: 12px;
  background: var(--karta); color: var(--tekst); font-size: 17px; font-weight: 600;
}
nav button.aktywny { background: var(--akcent); color: var(--tlo); border-color: var(--akcent); }

h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--szary); margin: 20px 0 8px; }
.pusto { color: var(--szary); padding: 18px 0; }

.zadanie {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--karta); border: 1px solid var(--linia); border-radius: 14px;
  padding: 14px; margin-bottom: 10px;
}
.zadanie input[type=checkbox] { width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--akcent-2); flex: none; }
.zadanie .tresc { font-weight: 600; }
.zadanie .meta { color: var(--szary); font-size: 15px; margin-top: 2px; }
.zadanie .meta.spozn { color: var(--spozn); font-weight: 600; }
.zadanie.zrobione .tresc { text-decoration: line-through; color: var(--szary); font-weight: 400; }

.rozmowa { background: var(--karta); border: 1px solid var(--linia); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.rozmowa .tytul { font-weight: 600; }
.rozmowa .meta { color: var(--szary); font-size: 15px; }
.rozmowa p { margin: 6px 0 0; font-size: 16px; }

#dodaj {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--tlo); border-top: 1px solid var(--linia);
  max-width: 640px; margin-inline: auto;
}
#dodaj input {
  min-width: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--linia);
  background: var(--karta); color: var(--tekst); font-size: 17px;
}
#nowe { flex: 1; }
#kiedy { width: 44%; max-width: 210px; font-size: 15px; }
#dodaj button {
  width: 52px; border: 0; border-radius: 12px; background: var(--akcent-2); color: #fff;
  font-size: 28px; font-weight: 700;
}
#brak-klucza { padding: 40px 0; text-align: center; color: var(--szary); }