/* Colours follow the reader's Telegram theme; the fallbacks are for a plain browser. */
:root {
  --fon: var(--tg-secondary-bg-color, #f2f3f2);
  --kartochka: var(--tg-section-bg-color, var(--tg-bg-color, #ffffff));
  --tekst: var(--tg-text-color, #15191a);
  --tusklyy: var(--tg-hint-color, #6b7577);
  --akcent: var(--tg-button-color, #2f6f62);
  --na-akcente: var(--tg-button-text-color, #ffffff);
  --ssylka: var(--tg-link-color, #2f6f62);
  --liniya: var(--tg-section-separator-color, rgba(107, 117, 119, 0.22));
  --zagolovok-razdela: var(--tg-section-header-text-color, var(--tusklyy));
}

@media (prefers-color-scheme: dark) {
  :root {
    --fon: var(--tg-secondary-bg-color, #0e1112);
    --kartochka: var(--tg-section-bg-color, var(--tg-bg-color, #171b1c));
    --tekst: var(--tg-text-color, #e9eceb);
    --tusklyy: var(--tg-hint-color, #8a9596);
    --akcent: var(--tg-button-color, #7cbfaf);
    --na-akcente: var(--tg-button-text-color, #0e1413);
    --ssylka: var(--tg-link-color, #7cbfaf);
    --liniya: var(--tg-section-separator-color, rgba(138, 149, 150, 0.22));
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.zagolovok {
  font-size: 22px;
  font-weight: 650;
  margin: 8px 4px 16px;
}

.kartochka {
  background: var(--kartochka);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 12px;
}

.kartochka h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zagolovok-razdela);
  margin: 0 0 8px;
}

.kartochka p { margin: 6px 0; }

.stroka {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--liniya);
}
.stroka:last-of-type { border-bottom: 0; }
.podpis { color: var(--tusklyy); flex: 0 0 auto; }
.znachenie { text-align: right; overflow-wrap: anywhere; }
.primechanie { display: block; color: var(--tusklyy); font-size: 13px; }

.podskazka, .status, .meta { color: var(--tusklyy); font-size: 14px; }
.status:empty { display: none; }

.lyudi { list-style: none; margin: 0; padding: 0; }
.lyudi li {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--liniya);
}
.lyudi li:last-child { border-bottom: 0; }

.knopka {
  display: block;
  width: 100%;
  margin: 10px 0 2px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--akcent);
  color: var(--na-akcente);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.knopka:disabled { opacity: 0.55; cursor: default; }
.knopka.vtorichnaya {
  background: transparent;
  color: var(--ssylka);
  font-weight: 500;
}

.niz { text-align: center; color: var(--tusklyy); padding: 4px 8px; }

.soobshchenie { margin-top: 24vh; text-align: center; }

.zagruzka { display: flex; justify-content: center; padding-top: 30vh; }
.zagruzka span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--liniya);
  border-top-color: var(--akcent);
  animation: krug 0.9s linear infinite;
}
@keyframes krug { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .zagruzka span { animation: none; } }