:root {
  --tlo: #f4f6f9;
  --karta: #ffffff;
  --tekst: #1f2328;
  --szary: #5b636b;
  --ramka: #d9dee4;
  --akcent: #0b66c3;
  --my: #e8f1fb;
  --rozmowca: #f3f3f5;
  --blad: #b42318;
  --sukces: #127a3a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

a { color: var(--akcent); }

.gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--karta);
  border-bottom: 1px solid var(--ramka);
}

.logo { font-weight: 600; font-size: 17px; color: var(--tekst); text-decoration: none; }
.wyloguj { display: flex; align-items: center; gap: 10px; margin: 0; }
.zalogowany { color: var(--szary); }

main { max-width: 960px; margin: 0 auto; padding: 16px; }

h1 { font-size: 22px; margin: 4px 0 6px; }
h2 { font-size: 17px; margin: 0 0 10px; }

.karta {
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 14px 0;
}

.karta.waska { max-width: 460px; margin: 40px auto; }

label { display: block; margin: 12px 0; font-weight: 500; }

input, select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  font: inherit;
  border: 1px solid var(--ramka);
  border-radius: 6px;
  background: #fff;
}

button {
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--akcent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button.drugorzedny { color: var(--akcent); background: transparent; border: 1px solid var(--ramka); font-weight: 500; }

.blad { color: var(--blad); font-weight: 500; }
.sukces { color: var(--sukces); font-weight: 500; }
.pusto, .przypis, .podsumowanie { color: var(--szary); }
.przypis { font-size: 13px; margin-top: 12px; }
.uwaga { background: #fff7e6; border: 1px solid #f0d49a; border-radius: 6px; padding: 8px 12px; }

.kroki li { margin-bottom: 10px; }
.qr { margin: 10px 0; }
.qr img { image-rendering: pixelated; border: 1px solid var(--ramka); }
code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; }

.filtry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.filtry input { flex: 1 1 260px; width: auto; margin: 0; }
.filtry select { flex: 0 0 180px; width: auto; margin: 0; }
.wyczysc { margin-left: 4px; }

.rozmowy { list-style: none; margin: 0; padding: 0; }
.rozmowy li { margin: 0 0 8px; }
.rozmowy a {
  display: block;
  padding: 10px 14px;
  color: var(--tekst);
  text-decoration: none;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 8px;
}
.rozmowy a:hover { border-color: var(--akcent); }
.wiersz { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.data { font-variant-numeric: tabular-nums; color: var(--szary); }
.osoba { font-size: 12px; text-transform: uppercase; color: var(--szary); border: 1px solid var(--ramka); border-radius: 4px; padding: 0 5px; }
.rozmowca { font-weight: 600; }
.dlugosc { color: var(--szary); font-variant-numeric: tabular-nums; }
.etykieta { font-size: 12px; color: var(--szary); background: var(--tlo); border-radius: 4px; padding: 0 6px; }
.temat { display: block; margin-top: 3px; color: var(--szary); font-size: 14px; }

.powrot { margin: 0 0 6px; }
.meta { color: var(--szary); margin: 0 0 12px; }
audio { width: 100%; margin: 6px 0 2px; }
.pobierz { margin: 0 0 6px; font-size: 14px; }
.notatka { margin: 6px 0; }
.blad-przetwarzania pre { white-space: pre-wrap; color: var(--blad); margin: 0; font: inherit; }

.transkrypcja { list-style: none; margin: 0; padding: 0; }
.transkrypcja li { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--rozmowca); }
.transkrypcja li.my { background: var(--my); }
.transkrypcja .kto { font-weight: 600; margin-right: 6px; color: var(--tekst); }
button.czas {
  padding: 0 6px;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--akcent);
  background: #fff;
  border: 1px solid var(--ramka);
}

@media (max-width: 600px) {
  main { padding: 10px; }
  .gora { padding: 8px 12px; }
  .zalogowany { display: none; }
  .filtry select { flex: 1 1 100%; }
}