:root {
  --tlo: #f4f1ea;
  --powierzchnia: #ffffff;
  --powierzchnia-2: #ebe7dd;
  --tekst: #1d1b16;
  --tekst-2: #6b675d;
  --linia: #e0dbcf;
  --akcent: #1f6f5c;
  --akcent-tekst: #ffffff;
  --moja: #1f6f5c;
  --moja-tekst: #ffffff;
  --jego: #ffffff;
  --info: #8a6d1f;
  --blad: #b3261e;
  --ok: #2e7d32;
  --cien: 0 1px 2px rgba(29, 27, 22, .08), 0 1px 1px rgba(29, 27, 22, .04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tlo: #121412;
    --powierzchnia: #1c1f1c;
    --powierzchnia-2: #262a26;
    --tekst: #ecebe6;
    --tekst-2: #a3a39b;
    --linia: #2e332e;
    --akcent: #46b394;
    --akcent-tekst: #0d1f19;
    --moja: #2a6b5a;
    --moja-tekst: #f2fbf7;
    --jego: #222622;
    --info: #d9b55a;
    --blad: #f2b8b5;
    --ok: #81c995;
    --cien: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

.aplikacja { display: flex; flex-direction: column; height: 100dvh; max-width: 760px; margin: 0 auto; }

/* nagłówek */
.naglowek {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--tlo);
  border-bottom: 1px solid var(--linia);
}
.naglowek-tytul { flex: 1; min-width: 0; }
.naglowek h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.status { margin: 1px 0 0; font-size: 13px; color: var(--tekst-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-2); flex: none; }
.status.polaczony .kropka { background: var(--ok); }
.status.offline .kropka { background: var(--blad); }
.status.mysli .kropka { background: var(--akcent); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .3; } }
.przycisk-ikona { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.przycisk-ikona:active { background: var(--powierzchnia-2); }
.przycisk-ikona svg { width: 22px; height: 22px; fill: var(--tekst-2); }

.baner { margin: 8px 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--powierzchnia); box-shadow: var(--cien); font-size: 14px; display: flex; gap: 10px; align-items: center; }
.baner p { margin: 0; flex: 1; }
.baner button { border: 0; background: var(--akcent); color: var(--akcent-tekst); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; }
.baner button.przycisk-drugi { background: transparent; color: var(--tekst-2); border: 1px solid var(--linia); }

/* lista wiadomości */
.lista { flex: 1; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; overscroll-behavior: contain; }
#wiadomosci { display: flex; flex-direction: column; gap: 6px; }
.wczytaj-wiecej { text-align: center; padding: 4px 0 12px; }
.przycisk-tekstowy { border: 0; background: none; color: var(--akcent); font-size: 14px; padding: 6px 10px; }

.separator { align-self: center; margin: 12px 0 6px; font-size: 12px; color: var(--tekst-2); background: var(--powierzchnia-2); padding: 3px 10px; border-radius: 999px; }

.wiadomosc { display: flex; max-width: 100%; }
.wiadomosc.ja { justify-content: flex-end; }
.banka {
  max-width: min(84%, 560px);
  padding: 8px 12px 6px;
  border-radius: 18px;
  background: var(--jego);
  box-shadow: var(--cien);
  overflow-wrap: anywhere;
}
.wiadomosc.planer .banka { border-bottom-left-radius: 6px; }
.wiadomosc.ja .banka { background: var(--moja); color: var(--moja-tekst); border-bottom-right-radius: 6px; }
.tresc p { margin: 0; }
.tresc p + p, .tresc p + ul, .tresc ul + p { margin-top: 6px; }
.tresc ul { margin: 4px 0 0; padding-left: 18px; }
.tresc li + li { margin-top: 2px; }
.tresc strong { font-weight: 650; }
.meta { display: flex; justify-content: flex-end; gap: 4px; align-items: center; margin-top: 2px; font-size: 11px; opacity: .65; }
.meta svg { width: 14px; height: 14px; fill: currentColor; }
.wiadomosc.czeka .banka { opacity: .75; }

.wiadomosc.info { justify-content: center; }
.wiadomosc.info .banka { background: transparent; box-shadow: none; color: var(--info); font-size: 13.5px; text-align: center; max-width: 92%; padding: 4px 8px; }

.pisze { margin-top: 6px; }
.kropki { display: flex; gap: 4px; padding: 6px 2px 4px; }
.kropki span { width: 7px; height: 7px; border-radius: 50%; background: var(--tekst-2); animation: kropka 1.2s infinite ease-in-out; }
.kropki span:nth-child(2) { animation-delay: .15s; }
.kropki span:nth-child(3) { animation-delay: .3s; }
@keyframes kropka { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.pisze .tresc:empty { display: none; }

.szybkie { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 2px; }
.szybkie button {
  border: 1px solid var(--akcent); background: transparent; color: var(--akcent);
  border-radius: 999px; padding: 7px 14px; font-size: 14.5px; font-weight: 550;
}
.szybkie button:active { background: var(--akcent); color: var(--akcent-tekst); }

/* pole wpisywania */
.formularz {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--tlo);
  border-top: 1px solid var(--linia);
}
.formularz textarea {
  flex: 1; resize: none; border: 1px solid var(--linia); border-radius: 22px;
  padding: 10px 16px; font: inherit; line-height: 1.35; max-height: 160px;
  background: var(--powierzchnia); color: var(--tekst); outline: none;
}
.formularz textarea:focus { border-color: var(--akcent); }
.wyslij { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--akcent); display: grid; place-items: center; }
.wyslij svg { width: 20px; height: 20px; fill: var(--akcent-tekst); margin-left: 2px; }
.wyslij:disabled { opacity: .35; }

/* parowanie */
.parowanie { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.parowanie-karta { width: 100%; max-width: 380px; text-align: center; }
.parowanie-karta img { border-radius: 18px; }
.parowanie-karta h1 { margin: 12px 0 4px; font-size: 26px; }
.parowanie-karta p { color: var(--tekst-2); }
.parowanie-karta form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.parowanie-karta input { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--tekst); font: inherit; }
.blad { color: var(--blad) !important; }

/* przyciski */
.przycisk-glowny { border: 0; background: var(--akcent); color: var(--akcent-tekst); border-radius: 12px; padding: 11px 16px; font-weight: 600; }
.przycisk-drugi { border: 1px solid var(--linia); background: var(--powierzchnia); color: var(--tekst); border-radius: 12px; padding: 10px 16px; font-weight: 550; }
.szeroki { width: 100%; margin-top: 8px; }
.rzad { display: flex; gap: 8px; flex-wrap: wrap; }

/* arkusz ustawień */
.arkusz-tlo { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); }
.arkusz {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto;
  max-width: 760px; margin: 0 auto;
  background: var(--tlo); border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
}
.arkusz-uchwyt { width: 40px; height: 4px; border-radius: 2px; background: var(--linia); margin: 4px auto 8px; }
.arkusz h2 { margin: 4px 0 8px; font-size: 18px; }
.sekcja { background: var(--powierzchnia); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--cien); }
.sekcja h3 { margin: 0 0 6px; font-size: 14px; color: var(--tekst-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.opis { margin: 0 0 8px; font-size: 14px; color: var(--tekst-2); }
.tabela { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 6px; font-size: 14.5px; }
.tabela dt { color: var(--tekst-2); }
.tabela dd { margin: 0; text-align: right; }
.budziki { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.budziki li { padding: 5px 0; border-bottom: 1px solid var(--linia); display: flex; gap: 10px; }
.budziki li:last-child { border-bottom: 0; }
.budziki .kiedy { color: var(--tekst-2); flex: none; min-width: 92px; }