/*
  ARKANIP — baza wiedzy, układ „Telefon pacjenta” (wersja 13, wariant B). Ładowany TYLKO przez wiedza.html.
  Część 1: układ ekranu (siatka, panel, skala płótna). Część 2: PRZEDMIOTY WOKÓŁ TELEFONU — style
  przeniesione 1:1 z `_podglad-wiedza-uklad.html` skryptem: każdy selektor zawężony do `.pt__plotno`
  (stany podglądu .ek.wgr / .waski / .m-* / [data-tryb] → klasy płótna), klatki kluczowe z prefiksem
  `pt-`, chrom podglądu i widżety pominięte. Biel, błękit, czerń przez tokeny theme.css.
*/
/* ===================== WERSJA 13 — BAZA WIEDZY: UKŁAD „TELEFON PACJENTA” =====================
   Wariant B (wybór właściciela 14.10.2026): po lewej płótno 720×840 z telefonem i przedmiotami
   sekcji wokół (`ekranTelefonu`, rysunki w wiedza-telefon.js, ich style niżej — blok „PRZEDMIOTY WOKÓŁ TELEFONU”,
   przeniesione z `_podglad-wiedza-uklad.html` i zawężone do `.pt__plotno`), po prawej pytanie,
   klocki, pole; pasek akcji jak wszędzie (prawy dolny róg). */
.pytanie--telefon {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  width: 100%;
  max-width: none;
  height: calc(100vh - 92px);
  min-height: 560px;
  margin: 0;
  padding: 0;
}
/* dół zostawiamy na znacznik i pasek akcji (stałe, ~80 px) — telefon ma oddech od dołu.
   BEZ overflow: hidden (16.10.2026, właściciel: „na dole ten dziwny pasek… przecięcie w połowie niebieskiego
   cienia”): płótno jest skalowane tak, że wypełnia pole do jego dolnej krawędzi, więc cień telefonu
   (`--cien-l`, 44/84 px w dół) i błękitna poświata `::before` (640 px) były ucinane prostą linią na dole
   i z prawej strony pola. Płótno mieści się w polu (dopasujTelefony), poza nie wychodzą tylko cienie. */
.pt__swiat {
  position: relative;
  min-height: 0;
  height: calc(100% - 64px);
  overflow: visible;
}
.pt__swiat::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 165, 233, 0.16), rgba(29, 78, 216, 0.06) 55%, rgba(29, 78, 216, 0) 100%);
  pointer-events: none;
}
.pt__plotno {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
}
.pt__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 12px 56px 104px 24px;
}
.pt__tresc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  max-width: 620px;
}
.pt__nad {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.pt__nad span {
  color: var(--ink-muted);
}
.pytanie--telefon .pytanie__tresc {
  margin: 0;
  text-align: left;
  font-size: clamp(32px, 3.1vw, 46px);
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.pytanie--telefon .pytanie__opis {
  margin: -6px 0 0;
  text-align: left;
  max-width: 46ch;
}
.pytanie--telefon .pt__widzet {
  width: 100%;
  max-width: none;
  margin: 0;
}
@media (max-width: 760px) {
  .pytanie--telefon {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .pt__swiat {
    height: 520px;
    /* w poziomie przycinamy jak dawniej (przedmioty planszy, np. winda S07, wychodzą poza pole — poziomy scroll),
       w pionie nie: cień telefonu wygasa swobodnie. Pole sięga brzegów EKRANU (ujemny margines = wcięcie #ekran,
       oddane paddingiem — dopasujTelefony liczy skalę bez paddingu), więc przycięcie wypada na brzegu ekranu,
       a nie 12 px od niego (tam cień telefonu kończył się pionową kreską). */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    overflow-x: clip;
    overflow-y: visible;
  }
  /* poświata 640 px była szersza niż pole — przycięta w poziomie dawała pionowe cięcia 12 px od brzegów ekranu;
     ma tu więc szerokość pola (gradient wygasa do zera na obwodzie, nic nie ucina) */
  .pt__swiat::before {
    width: min(640px, 100%);
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .pt__panel {
    padding: 8px 18px 120px;
  }
}

/* ===================== PRZEDMIOTY WOKÓŁ TELEFONU ===================== */
.pt__plotno {
  color-scheme: light;
  --kula-grad: radial-gradient(circle at 32% 26%, #9cc8ff 0%, #3f7ff5 36%, var(--blue) 62%, var(--blue-deep) 100%);
  --linia: rgba(3, 7, 18, 0.07);
  --cien-s: 0 1px 2px rgba(3, 7, 18, 0.04), 0 8px 22px -14px rgba(29, 78, 216, 0.3);
  --cien-m: 0 2px 5px rgba(3, 7, 18, 0.04), 0 22px 46px -24px rgba(29, 78, 216, 0.36);
  --cien-l: 0 4px 10px rgba(3, 7, 18, 0.05), 0 44px 84px -38px rgba(29, 78, 216, 0.5);
  --karta-grad: linear-gradient(135deg, var(--blue-sky) 0%, var(--blue) 52%, var(--blue-deep) 100%);
}
.pt__plotno .ik {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
@keyframes pt-wjazd {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
@keyframes pt-wjazd-l {
    from {
      opacity: 0;
      transform: translateX(-26px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
@keyframes pt-wjazd-p {
    from {
      opacity: 0;
      transform: translateX(26px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
@keyframes pt-opad {
    from {
      opacity: 0;
      transform: translateY(-34px);
    }
    70% {
      opacity: 1;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
@keyframes pt-pop {
    0% {
      opacity: 0;
      transform: scale(0.6);
    }
    60% {
      opacity: 1;
      transform: scale(1.08);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
@keyframes pt-pojaw {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
@keyframes pt-znik {
    to {
      opacity: 0;
    }
  }
@keyframes pt-tetno {
    0% {
      transform: scale(1);
    }
    35% {
      transform: scale(1.07);
    }
    100% {
      transform: scale(1);
    }
  }
@keyframes pt-fala {
    from {
      opacity: 0.55;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(1.7);
    }
  }
@keyframes pt-kropki {
    0%,
    100% {
      transform: translateY(0);
      opacity: 0.45;
    }
    40% {
      transform: translateY(-4px);
      opacity: 1;
    }
  }
@keyframes pt-mrug {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
@keyframes pt-droga {
    from {
      offset-distance: 0%;
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    88% {
      opacity: 1;
    }
    to {
      offset-distance: 100%;
      opacity: 0;
    }
  }
@keyframes pt-skan {
    0% {
      top: 0;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    100% {
      top: calc(100% - 46px);
      opacity: 0;
    }
  }
@keyframes pt-podswietl {
    from {
      background: transparent;
      box-shadow: inset 0 0 0 0 var(--blue);
    }
    to {
      background: var(--blue-tint-2);
      box-shadow: inset 3px 0 0 0 var(--blue);
    }
  }
@keyframes pt-rysuj {
    from {
      stroke-dashoffset: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
.pt__plotno .wj {
  animation: pt-wjazd 0.75s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s));
}
.pt__plotno .wj-l {
  animation: pt-wjazd-l 0.75s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s));
}
.pt__plotno .wj-p {
  animation: pt-wjazd-p 0.75s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s));
}
.pt__plotno .wj-pop {
  animation: pt-pop 0.6s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s));
}
.pt__plotno .wj-op {
  animation: pt-opad 0.8s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s));
}
.pt__plotno .kula {
  position: relative;
  display: inline-block;
  width: var(--k, 96px);
  height: var(--k, 96px);
  border-radius: 50%;
  background: var(--kula-grad);
  box-shadow:
  inset -6px -10px 22px rgba(3, 7, 18, 0.18),
  inset 6px 8px 16px rgba(255, 255, 255, 0.28),
  0 18px 36px -14px rgba(29, 78, 216, 0.6);
  flex-shrink: 0;
}
.pt__plotno .kula::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 12%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  transform: rotate(-24deg);
}
.pt__plotno .kula--mala {
  box-shadow: inset -2px -3px 6px rgba(3, 7, 18, 0.2), inset 2px 2px 5px rgba(255, 255, 255, 0.3), 0 4px 10px -4px rgba(29, 78, 216, 0.6);
}
.pt__plotno .kula__pierscien {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(29, 78, 216, 0.16);
}
.pt__plotno .kula__pierscien + .kula__pierscien {
  inset: -30px;
  border-color: rgba(29, 78, 216, 0.09);
}
.pt__plotno .kula__fala {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(14, 165, 233, 0.6);
  opacity: 0;
  animation: pt-fala 1.4s var(--ease) both;
  animation-delay: var(--df, 1s);
}
.pt__plotno .kula__fala + .kula__fala {
  animation-delay: calc(var(--df, 1s) + 0.35s);
}
.pt__plotno .zywy {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pt__plotno .zywy--pusty {
  color: var(--ink-muted);
  font-style: italic;
  font-weight: 500;
}
.pt__plotno.pisze .zywy:not(.zywy--pusty)::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  border-radius: 2px;
  background: var(--blue);
  animation: pt-mrug 0.9s steps(1) 3 both;
}
.pt__plotno .pisze-kropki {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.pt__plotno .pisze-kropki i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: pt-kropki 1s ease-in-out 4 both;
  animation-delay: calc(var(--i) * 0.15s);
}
.pt__plotno .pdf {
  display: inline-grid;
  place-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.pt__plotno .zrodlo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}
.pt__plotno .zrodlo small {
  font-weight: 600;
  color: var(--ink-muted);
}
.pt__plotno:not(.wgr) .po,
.pt__plotno.wgr .przed {
  display: none !important;
}
.pt__plotno .ob {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pt__plotno .ob__rys {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.pt__plotno .ob[data-on="0"] .ob__rys {
  opacity: 0.26;
  transform: translateY(6px) scale(0.96);
}
.pt__plotno .ob__znak {
  position: absolute;
  top: -10px;
  right: var(--zn-r, -10px);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 3px var(--surface), 0 8px 16px -6px rgba(29, 78, 216, 0.7);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
}
.pt__plotno .ob__znak .ik {
  width: 14px;
  height: 14px;
}
.pt__plotno .ob[data-on="1"] .ob__znak {
  animation: pt-pop 0.55s var(--ease) both;
  animation-delay: var(--d-pop, 0s);
}
.pt__plotno .ob__et {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(29, 78, 216, 0.35);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.pt__plotno .ob__et .ik {
  width: 13px;
  height: 13px;
  display: none;
}
.pt__plotno .ob[data-on="1"] .ob__et {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
}
.pt__plotno .ob[data-on="1"] .ob__et .ik {
  display: block;
}
.pt__plotno .ob-bank {
  position: relative;
  width: 150px;
  height: 112px;
}
.pt__plotno .ob-bank i {
  position: absolute;
  left: 6px;
  width: 134px;
  height: 68px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--blue-tint-2) 100%);
  border: 1.5px solid rgba(29, 78, 216, 0.26);
  box-shadow: var(--cien-s);
}
.pt__plotno .ob-bank i:nth-child(1) {
  bottom: 0;
  transform: rotate(-8deg);
}
.pt__plotno .ob-bank i:nth-child(2) {
  bottom: 12px;
  transform: rotate(4deg);
}
.pt__plotno .ob-bank i:nth-child(3) {
  bottom: 26px;
  transform: rotate(-2deg);
}
.pt__plotno .ob-bank i:nth-child(3)::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  border: 1px dashed rgba(29, 78, 216, 0.22);
}
.pt__plotno .ob-bank i:nth-child(3) span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 1.5px solid var(--blue-line);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.pt__plotno .ob-bank b {
  position: absolute;
  right: -2px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--kula-grad);
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 14px -6px rgba(29, 78, 216, 0.7);
}
.pt__plotno .ob[data-metoda="karta"] {
  --zn-r: 34px;
}
.pt__plotno .ob-term-w {
  position: relative;
  width: 150px;
  height: 176px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.pt__plotno .ob-term {
  position: relative;
  width: 106px;
  height: 172px;
  padding: 10px 9px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--ink-soft) 0%, var(--ink) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 36px -18px rgba(3, 7, 18, 0.6);
}
.pt__plotno .ob-term::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 22px;
  right: 22px;
  height: 7px;
  border-radius: 4px 4px 0 0;
  background: var(--ink-soft);
}
.pt__plotno .ob-term__ekran {
  position: relative;
  display: grid;
  place-items: center;
  height: 66px;
  border-radius: 11px;
  background: var(--karta-grad);
  color: #fff;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.pt__plotno .ob-term__kwota,
.pt__plotno .ob-term__ok {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pt__plotno .ob-term__kwota small,
.pt__plotno .ob-term__ok small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
.pt__plotno .ob-term__ok .ik {
  width: 20px;
  height: 20px;
}
.pt__plotno .ob-term__kwota {
  animation: pt-znik 0.3s ease both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s) + 1.45s);
}
.pt__plotno .ob-term__ok {
  animation: pt-pop 0.45s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s) + 1.55s);
}
.pt__plotno .ob-term__klaw {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 11px;
}
.pt__plotno .ob-term__klaw i {
  height: 13px;
  border-radius: 5px;
  background: var(--ink-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pt__plotno .ob-term__klaw i:last-child {
  background: var(--blue);
}
.pt__plotno .ob-karta {
  position: absolute;
  right: -4px;
  top: 8px;
  z-index: 3;
  width: 104px;
  height: 66px;
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--karta-grad);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 16px 26px -12px rgba(29, 78, 216, 0.75);
  transform: translate(46px, 50px) rotate(9deg);
  animation: pt-stuk 1.9s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s));
}
.pt__plotno .ob-karta i {
  display: block;
  width: 18px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45));
}
.pt__plotno .ob-karta svg {
  position: absolute;
  right: 9px;
  top: 8px;
  width: 15px;
  height: 15px;
  opacity: 0.85;
}
.pt__plotno .ob-karta span {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
@keyframes pt-stuk {
    0% {
      opacity: 0;
      transform: translate(60px, -60px) rotate(24deg);
    }
    25% {
      opacity: 1;
      transform: translate(34px, -38px) rotate(18deg);
    }
    58% {
      transform: translate(-40px, 22px) rotate(-3deg);
    }
    72% {
      transform: translate(-40px, 22px) rotate(-3deg);
    }
    100% {
      opacity: 1;
      transform: translate(46px, 50px) rotate(9deg);
    }
  }
.pt__plotno .ob-term__fala {
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: pt-fala 0.9s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s) + 1.2s);
}
.pt__plotno .ob-blik {
  position: relative;
  width: 90px;
  height: 170px;
  padding: 7px;
  border-radius: 20px;
  background: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink-soft), 0 22px 34px -18px rgba(3, 7, 18, 0.55);
}
.pt__plotno .ob-blik__ekran {
  position: relative;
  height: 100%;
  padding: 18px 9px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), var(--blue-tint));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt__plotno .ob-blik__ekran::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 26px;
  height: 6px;
  margin-left: -13px;
  border-radius: 4px;
  background: var(--ink);
}
.pt__plotno .ob-blik__logo {
  align-self: flex-start;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.pt__plotno .ob-blik__kod {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pt__plotno .ob-blik__kod small {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.pt__plotno .ob-blik__tor {
  margin-top: auto;
  height: 4px;
  border-radius: 3px;
  background: var(--blue-tint-2);
  overflow: hidden;
}
.pt__plotno .ob-blik__tor i {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: inherit;
  background: var(--blue);
}
.pt__plotno .ob-blik__ok {
  display: grid;
  place-items: center;
  height: 22px;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
}
.pt__plotno .ob-przelew {
  position: relative;
  width: 120px;
  height: 150px;
  padding: 12px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-m);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pt__plotno .ob-przelew::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 20px;
  height: 20px;
  border-radius: 0 12px 0 8px;
  background: linear-gradient(225deg, var(--bg) 50%, var(--blue-tint-2) 50%);
}
.pt__plotno .ob-przelew__bank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--blue-tint);
  color: var(--blue);
}
.pt__plotno .ob-przelew__bank .ik {
  width: 17px;
  height: 17px;
}
.pt__plotno .ob-przelew b {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pt__plotno .ob-przelew i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--blue-tint-2);
}
.pt__plotno .ob-przelew i:nth-of-type(2) {
  width: 70%;
}
.pt__plotno .ob-przelew strong {
  margin-top: auto;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pt__plotno .ob-przelew small {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
}
.pt__plotno .ob-tab {
  position: relative;
  width: 112px;
  height: 96px;
}
.pt__plotno .ob-tab__lico {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  bottom: 10px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 8px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-m);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}
.pt__plotno .ob-tab__lico .ik {
  width: 20px;
  height: 20px;
  color: var(--blue);
}
.pt__plotno .ob-tab::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 12px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, var(--blue-line), var(--blue-tint));
}
.pt__plotno .ob-cennik {
  position: relative;
  width: 290px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
  overflow: hidden;
}
.pt__plotno .ob-cennik__glowa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--linia);
}
.pt__plotno .ob-cennik__glowa div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.pt__plotno .ob-cennik__glowa b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pt__plotno .ob-cennik__glowa small {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
}
.pt__plotno .ob-cennik__w {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pt__plotno .ob-cennik__w b {
  font-weight: 800;
  color: var(--ink);
}
.pt__plotno .ob-cennik__skan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0) 0%, rgba(14, 165, 233, 0.16) 75%, rgba(14, 165, 233, 0.5) 100%);
  border-bottom: 2px solid var(--blue-sky);
  opacity: 0;
  pointer-events: none;
}
.pt__plotno.wgr .ob-cennik__skan {
  animation: pt-skan 1.3s cubic-bezier(0.45, 0, 0.55, 1) both;
  animation-delay: var(--ds, 0.5s);
}
.pt__plotno.wgr .ob-cennik__w--cel {
  animation: pt-podswietl 0.5s var(--ease) both;
  animation-delay: calc(var(--ds, 0.5s) + 1.35s);
}
.pt__plotno.wgr .ob-cennik__w--cel b,
.pt__plotno.wgr .ob-cennik__w--cel span {
  color: var(--blue);
  transition: color 0.3s;
  transition-delay: calc(var(--ds, 0.5s) + 1.35s);
}
.pt__plotno .ob-duch {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  width: 290px;
  border-radius: 18px;
  border: 2px dashed rgba(29, 78, 216, 0.32);
  background:
  repeating-linear-gradient(180deg, transparent 0 33px, rgba(29, 78, 216, 0.06) 33px 35px),
  rgba(255, 255, 255, 0.55);
  text-align: center;
}
.pt__plotno .ob-duch__ikona {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  color: var(--blue);
  box-shadow: var(--cien-s);
}
.pt__plotno .ob-duch__ikona .ik {
  width: 26px;
  height: 26px;
}
.pt__plotno .ob-duch b {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.pt__plotno .ob-duch small {
  font-size: 13px;
  color: var(--ink-muted);
}
.pt__plotno .pl-ramka {
  position: relative;
  flex-shrink: 0;
}
.pt__plotno .pl {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 260px;
  transform-origin: 0 0;
}
.pt__plotno .pl-el {
  position: absolute;
}
.pt__plotno .sw {
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.pt__plotno .sw[data-on="0"] {
  opacity: 0.26;
}
.pt__plotno .nawias {
  padding: 0 4px;
  border-radius: 5px;
  background: var(--blue-tint-2);
  color: var(--blue);
  font-style: normal;
}
.pt__plotno .pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-s);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.pt__plotno .pl-chip .ik {
  width: 14px;
  height: 14px;
  color: var(--blue);
}
.pt__plotno .pl-chip--niebieski {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(29, 78, 216, 0.8);
}
.pt__plotno .pl-chip--niebieski .ik {
  color: #fff;
}
.pt__plotno .pl-lada {
  position: relative;
  width: 408px;
  height: 62px;
}
.pt__plotno .pl-lada__blat {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  border-radius: 12px 12px 3px 3px;
  background: linear-gradient(180deg, var(--surface), var(--blue-tint));
  border: 1px solid var(--blue-line);
}
.pt__plotno .pl-lada__front {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 17px;
  bottom: 0;
  display: grid;
  place-items: center;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, var(--blue-tint), var(--surface) 55%);
  border: 1px solid var(--glass-border);
  border-top: 0;
  box-shadow: var(--cien-m);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pt__plotno .pl-rzad {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 560px;
  transform: scale(0.735);
  transform-origin: 0 100%;
}
.pt__plotno .pl-rzad .ob-karta {
  transform: translate(30px, 54px) rotate(9deg);
}
.pt__plotno .pl-rzad .ob__et {
  display: none;
}
.pt__plotno .pl-rzad .ob__znak {
  width: 30px;
  height: 30px;
}
.pt__plotno .pl-rzad .ob__znak .ik {
  width: 17px;
  height: 17px;
}
.pt__plotno .pl-kartka {
  position: absolute;
  width: 270px;
  height: 220px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-s);
}
.pt__plotno .pl .ob-cennik {
  width: 290px;
  padding: 15px 18px 12px;
}
.pt__plotno .pl .ob-cennik__w {
  padding: 7px 10px;
}
.pt__plotno .pl .ob-duch {
  width: 290px;
  height: 238px;
}
.pt__plotno .pl .ob-duch b {
  font-size: 15px;
}
.pt__plotno .pl-dok {
  position: relative;
  width: 252px;
  padding: 15px 16px 12px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
  overflow: hidden;
}
.pt__plotno .pl-dok__kroki {
  display: grid;
  gap: 2px;
  margin: 4px -8px 0;
  padding: 0;
  list-style: none;
}
.pt__plotno .pl-dok__kroki li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-soft);
}
.pt__plotno .pl-dok__kroki li b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 11.5px;
  flex-shrink: 0;
}
.pt__plotno .pl-dok__kroki li span small {
  display: block;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.pt__plotno.wgr .pl-dok__kroki .cel {
  animation: pt-podswietl 0.5s var(--ease) both;
  animation-delay: 1.75s;
}
.pt__plotno .pl-implant {
  position: relative;
  width: 130px;
  height: 230px;
}
.pt__plotno .pl-implant__dziaslo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  border-radius: 46px 46px 18px 18px;
  background: linear-gradient(180deg, var(--blue-tint-2), var(--blue-tint));
  border: 1.5px solid var(--blue-line);
}
.pt__plotno .pl-implant__dziaslo::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 34px;
  border-radius: 14px;
  background: repeating-linear-gradient(180deg, rgba(29, 78, 216, 0.08) 0 6px, transparent 6px 12px);
}
.pt__plotno .pl-implant__sruba {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 26px;
  height: 84px;
  margin-left: -13px;
  border-radius: 6px 6px 12px 12px;
  background: repeating-linear-gradient(180deg, var(--blue) 0 6px, var(--blue-sky) 6px 10px);
  box-shadow: 0 10px 18px -8px rgba(29, 78, 216, 0.7);
}
.pt__plotno .pl-implant__korona {
  position: absolute;
  left: 50%;
  bottom: 104px;
  width: 70px;
  height: 62px;
  margin-left: -35px;
  border-radius: 24px 24px 18px 18px;
  background: linear-gradient(180deg, var(--surface), var(--blue-tint));
  border: 1.5px solid var(--blue-line);
  box-shadow: var(--cien-m);
}
.pt__plotno .pl-implant__korona::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 18px;
  height: 10px;
  margin-left: -9px;
  border-radius: 0 0 9px 9px;
  border: 2px solid var(--blue-line);
  border-top: 0;
}
.pt__plotno svg.pl-implant__korona {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  filter: drop-shadow(0 12px 14px rgba(29, 78, 216, 0.28));
}
.pt__plotno svg.pl-implant__korona path {
  fill: var(--surface);
  stroke: var(--blue-line);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.pt__plotno svg.pl-implant__korona .pl-implant__bruzda {
  fill: none;
  stroke: var(--blue-tint-2);
  stroke-linecap: round;
}
.pt__plotno svg.pl-duch-obrys {
  border: 0 !important;
  filter: none;
}
.pt__plotno svg.pl-duch-obrys path {
  fill: transparent;
  stroke: rgba(29, 78, 216, 0.35);
  stroke-dasharray: 4 4;
}
.pt__plotno .pl-duch-obrys {
  border: 2px dashed rgba(29, 78, 216, 0.3) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pt__plotno.wgr .pl-implant__sruba {
  animation: pt-wkret 0.9s var(--ease) both;
  animation-delay: 0.5s;
}
.pt__plotno.wgr .pl-implant__korona {
  animation: pt-opad 0.8s var(--ease) both;
  animation-delay: 1.4s;
}
@keyframes pt-wkret {
    from {
      opacity: 0;
      transform: translateY(-60px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
.pt__plotno .pl-rolka {
  position: relative;
  width: 132px;
  height: 244px;
  padding: 6px;
  border-radius: 22px;
  background: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink-soft), var(--cien-l);
}
.pt__plotno .pl-rolka__ekran {
  position: relative;
  height: 100%;
  border-radius: 17px;
  overflow: hidden;
  background:
  radial-gradient(120px 90px at 30% 20%, rgba(255, 255, 255, 0.28), transparent 70%),
  linear-gradient(165deg, var(--blue-sky) 0%, var(--blue) 55%, var(--blue-deep) 100%);
  color: #fff;
}
.pt__plotno .pl-rolka__kto {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
}
.pt__plotno .pl-rolka__kto i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kula-grad);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}
.pt__plotno .pl-rolka__zab {
  position: absolute;
  left: 50%;
  top: 62px;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  color: rgba(255, 255, 255, 0.35);
}
.pt__plotno .pl-rolka__play {
  position: absolute;
  left: 50%;
  top: 74px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 10px 20px -8px rgba(3, 7, 18, 0.5);
}
.pt__plotno .pl-rolka__play .ik {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}
.pt__plotno .pl-rolka__opis {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  display: grid;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}
.pt__plotno .pl-rolka__opis small {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.85;
}
.pt__plotno .pl-rolka__pasek {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.pt__plotno .pl-rolka__pasek i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}
.pt__plotno.wgr .pl-rolka__pasek i {
  animation: pt-pasek 2.2s linear both;
  animation-delay: 0.6s;
}
@keyframes pt-pasek {
    to {
      width: 100%;
    }
  }
.pt__plotno .pl-fala {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 70px;
}
.pt__plotno .pl-fala i {
  width: 4px;
  height: 6px;
  border-radius: 3px;
  background: var(--blue-line);
}
.pt__plotno.wgr .pl-fala i {
  background: var(--blue);
  animation: pt-slupek 1.6s var(--ease) both;
  animation-delay: calc(0.7s + var(--i) * 0.05s);
}
@keyframes pt-slupek {
    0% {
      height: 6px;
    }
    45% {
      height: var(--h);
    }
    70% {
      height: calc(var(--h) * 0.5);
    }
    100% {
      height: calc(var(--h) * 0.75);
    }
  }
.pt__plotno .pl-podpis {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}
.pt__plotno .pl-tekst {
  width: 158px;
  padding: 13px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .pl-tekst__glowa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pt__plotno .pl-tekst p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.pt__plotno .pl-tekst mark {
  background: transparent;
  color: inherit;
  border-radius: 4px;
}
.pt__plotno.wgr .pl-tekst mark {
  animation: pt-zakreslenie 0.6s var(--ease) both;
  animation-delay: 2.3s;
}
@keyframes pt-zakreslenie {
    to {
      background: var(--blue-tint-2);
      color: var(--blue);
    }
  }
.pt__plotno .pl-tekst__autor {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
}
.pt__plotno .pl-linie {
  display: grid;
  gap: 8px;
}
.pt__plotno .pl-linie i {
  height: 7px;
  border-radius: 4px;
  background: var(--blue-tint-2);
}
.pt__plotno .pl-linie i:nth-child(2n) {
  width: 76%;
}
.pt__plotno .pl-mapa {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
  overflow: hidden;
}
.pt__plotno .pl-mapa svg {
  position: absolute;
  inset: 0;
}
.pt__plotno .pl-mapa .ul {
  fill: none;
  stroke: var(--blue-tint);
  stroke-width: 18;
  stroke-linecap: round;
}
.pt__plotno .pl-mapa .ul--m {
  stroke-width: 9;
}
.pt__plotno .pl-mapa .rz {
  fill: none;
  stroke: var(--blue-tint-2);
  stroke-width: 24;
  stroke-linecap: round;
}
.pt__plotno .pl-mapa .bud {
  fill: var(--bg);
  stroke: var(--blue-line);
  stroke-width: 1;
}
.pt__plotno .pl-mapa .park {
  fill: var(--blue-tint);
}
.pt__plotno .pl-mapa .drzewo {
  fill: var(--blue-tint-2);
}
.pt__plotno .trasa-tlo {
  fill: none;
  stroke: var(--surface);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pt__plotno .trasa {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.pt__plotno [data-on="1"] > svg .trasa {
  animation: pt-rysuj 1.3s var(--ease) both;
  animation-delay: var(--d-pop, 0s);
}
.pt__plotno .pl-pin {
  width: 40px;
  height: 52px;
  color: var(--blue);
  filter: drop-shadow(0 10px 10px rgba(29, 78, 216, 0.4));
}
.pt__plotno .pl-przystanek {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.pt__plotno .pl-przystanek > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(3, 7, 18, 0.6);
}
.pt__plotno .pl-przystanek > span .ik {
  width: 18px;
  height: 18px;
}
.pt__plotno .pl-apteka {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt__plotno .pl-apteka > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface);
  border: 1.5px solid var(--blue);
  color: var(--blue);
}
.pt__plotno .pl-apteka > span .ik {
  width: 18px;
  height: 18px;
}
.pt__plotno .pl-kwota {
  display: grid;
  gap: 6px;
  width: 160px;
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .pl-kwota small {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pt__plotno .pl-kwota b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pt__plotno .pl-kwota span {
  font-size: 12.5px;
  color: var(--ink-muted);
}
.pt__plotno .pl-strzalka {
  width: 36px;
  height: 20px;
  color: var(--blue);
}
.pt__plotno .pl-tryb {
  position: absolute;
  left: 228px;
  top: 22px;
  width: 200px;
  height: 216px;
  display: none;
  align-content: center;
}
.pt__plotno[data-tryb="brak"] .pl-tryb--brak,
.pt__plotno[data-tryb="firma"] .pl-tryb--firma,
.pt__plotno[data-tryb="etapy"] .pl-tryb--etapy,
.pt__plotno[data-tryb="nie"] .pl-tryb--nie {
  display: grid;
}
.pt__plotno .pl-tryb--brak {
  place-items: center;
  border-radius: 20px;
  border: 2px dashed rgba(29, 78, 216, 0.28);
  padding: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-muted);
  text-align: center;
}
.pt__plotno .pl-raty {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.pt__plotno .pl-rata {
  display: grid;
  gap: 2px;
  padding: 9px 8px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  box-shadow: var(--cien-s);
  animation: pt-pop 0.45s var(--ease) both;
  animation-delay: calc(var(--i) * 0.08s);
}
.pt__plotno .pl-rata b {
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pt__plotno .pl-rata small {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
}
.pt__plotno .pl-rata:first-child {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.pt__plotno .pl-rata:first-child small {
  color: rgba(255, 255, 255, 0.8);
}
.pt__plotno .pl-tryb .pl-chip {
  justify-self: start;
  margin-top: 10px;
  animation: pt-pop 0.45s var(--ease) both;
  animation-delay: 0.5s;
}
.pt__plotno .pl-etapy {
  display: grid;
  gap: 7px;
}
.pt__plotno .pl-etap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  box-shadow: var(--cien-s);
  font-size: 12px;
  color: var(--ink-muted);
  animation: pt-wjazd-p 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.pt__plotno .pl-etap b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 11.5px;
}
.pt__plotno .pl-etap strong {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pt__plotno .pl-jednorazowo {
  display: grid;
  gap: 4px;
  padding: 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  box-shadow: var(--cien-m);
  animation: pt-pop 0.5s var(--ease) both;
}
.pt__plotno .pl-jednorazowo b {
  font-size: 24px;
  font-weight: 800;
}
.pt__plotno .pl-jednorazowo span {
  font-size: 12.5px;
  color: var(--ink-muted);
}
.pt__plotno .pl-bud {
  position: absolute;
  left: 150px;
  top: 26px;
  width: 276px;
  height: 206px;
  border-radius: 14px 14px 0 0;
  background: var(--surface);
  border: 1.5px solid var(--blue-line);
  border-bottom: 0;
  box-shadow: var(--cien-m);
}
.pt__plotno .pl-bud::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 96px;
  height: 6px;
  background: var(--blue-tint-2);
}
.pt__plotno .pl-okno {
  position: absolute;
  width: 36px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--blue-tint) 0%, var(--blue-tint-2) 100%);
  border: 1px solid var(--blue-line);
}
.pt__plotno .pl-bud {
  border-top: 3px solid var(--blue) !important;
}
.pt__plotno .pl-ziemia {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 230px;
  height: 4px;
  border-radius: 2px;
  background: var(--blue-line);
}
.pt__plotno .pl-rampa {
  overflow: visible;
}
.pt__plotno .pl-schody {
  display: none;
  width: 60px;
  height: 34px;
  background:
  linear-gradient(var(--blue-line), var(--blue-line)) 0 100% / 100% 11px no-repeat,
  linear-gradient(var(--blue-line), var(--blue-line)) 100% 100% / 66% 22px no-repeat,
  linear-gradient(var(--blue-line), var(--blue-line)) 100% 100% / 33% 34px no-repeat;
}
.pt__plotno.m-nie .pl-schody {
  display: block;
}
.pt__plotno.m-nie .pl-rampa-w {
  display: none;
}
.pt__plotno .pl-wozek {
  width: 38px;
  height: 38px;
  color: var(--blue);
}
.pt__plotno [data-on="1"] .pl-wozek {
  animation: pt-podjazd 1.6s var(--ease) both;
  animation-delay: var(--d-pop, 0s);
}
@keyframes pt-podjazd {
    from {
      transform: translate(-96px, 26px);
    }
    to {
      transform: none;
    }
  }
.pt__plotno .pl-drzwi {
  width: 30px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(135deg, var(--blue-tint) 0%, var(--blue-tint-2) 100%);
  border: 2px solid var(--blue);
  border-bottom: 0;
}
.pt__plotno .pl-szyb {
  width: 52px;
  height: 200px;
  border-left: 2px dashed var(--blue-line);
  border-right: 2px dashed var(--blue-line);
  position: relative;
}
.pt__plotno .pl-kabina {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 6px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 18px -8px rgba(29, 78, 216, 0.8);
}
.pt__plotno .pl-kabina .ik {
  width: 20px;
  height: 20px;
}
.pt__plotno [data-on="1"] .pl-kabina {
  animation: pt-jazda 1.8s var(--ease) both;
  animation-delay: calc(var(--d-pop, 0s) + 0.3s);
}
@keyframes pt-jazda {
    from {
      transform: none;
    }
    to {
      transform: translateY(-104px);
    }
  }
.pt__plotno [data-on="1"] .pl-kabina {
  transform: translateY(-104px);
}
.pt__plotno .pl-tablica {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 7px;
  border-radius: 10px;
  background: var(--blue-tint);
  border: 1px solid var(--blue-line);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.pt__plotno .pl-tablica .ik {
  width: 15px;
  height: 15px;
  color: var(--blue);
}
.pt__plotno [data-on="1"] > .pl-tablica {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.pt__plotno [data-on="1"] > .pl-tablica .ik {
  color: #fff;
}
.pt__plotno .pl-pietro {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pt__plotno .pl-tab {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
  radial-gradient(circle, var(--blue-line) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
  var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .pl-kart {
  position: absolute;
  width: 172px;
  min-height: 92px;
  padding: 18px 14px 12px;
  border-radius: 6px 6px 16px 6px;
  background: linear-gradient(180deg, var(--surface), var(--blue-tint));
  border: 1px solid var(--blue-line);
  box-shadow: 0 16px 26px -16px rgba(29, 78, 216, 0.55);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
  animation: pt-opad 0.6s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.pt__plotno .pl-kart::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--kula-grad);
  box-shadow: 0 3px 6px -2px rgba(29, 78, 216, 0.7);
}
.pt__plotno .pl-kart--cel {
  border-color: var(--blue);
  background: var(--surface);
}
.pt__plotno .pl-kart--cel small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--blue);
}
.pt__plotno .pl-kart--cel small .ik {
  width: 12px;
  height: 12px;
}
.pt__plotno .pl-kart--pusta {
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px dashed rgba(29, 78, 216, 0.3);
  box-shadow: none;
  color: var(--ink-muted);
  font-weight: 600;
  text-align: center;
}
.pt__plotno .pl-kart--pusta::before {
  display: none;
}
.pt__plotno .pl-niewidzi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 10px 20px -10px rgba(3, 7, 18, 0.6);
}
.pt__plotno .pl-niewidzi .ik {
  width: 15px;
  height: 15px;
}
.pt__plotno .plotno {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
}
.pt__plotno .tel .odp-zr .zrodlo {
  font-size: 12.5px;
}
.pt__plotno .tel .odp-zr {
  margin-top: 9px;
}
.pt__plotno .tel .odp-zr .zrodlo {
  padding: 4px 10px 4px 4px;
}
.pt__plotno .tel .odp-zr .zrodlo small {
  display: none;
}
.pt__plotno .tel .odp-zr .pdf {
  height: 19px;
  font-size: 9.5px;
}
.pt__plotno.pbp--srodek .tel {
  left: 200px;
  top: 70px;
}
.pt__plotno.pbp--prawo .tel {
  left: 350px;
  top: 70px;
}
.pt__plotno .pb-ob {
  position: absolute;
  z-index: 1;
}
.pt__plotno .pb-kod {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg), var(--cien-m);
}
.pt__plotno .pb-kod small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pt__plotno .pb-kod b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.pt__plotno .pb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-m);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.pt__plotno .pb-pill .ik {
  width: 18px;
  height: 18px;
  color: var(--blue);
}
.pt__plotno .pb-cena {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 16px 30px -14px rgba(29, 78, 216, 0.8);
  white-space: nowrap;
}
.pt__plotno .pb-cena .ik {
  width: 16px;
  height: 16px;
}
.pt__plotno.wgr .pb-cena {
  animation: pt-lot 1s var(--ease) both;
  animation-delay: 2s;
}
@keyframes pt-lot {
    from {
      opacity: 0;
      transform: translateY(-40px) scale(0.8);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
.pt__plotno.waski.pbp .tel {
  left: 40px;
  top: 40px;
}
.pt__plotno.waski .pb-ob {
  display: none;
}
.pt__plotno.waski .pb-ob.wl,
.pt__plotno.waski .pb-ob.wr {
  display: block;
}
.pt__plotno.waski .pb-ob.wl {
  left: -120px !important;
}
.pt__plotno.waski .pb-ob.wr {
  left: 352px !important;
}
.pt__plotno .ob-przyst {
  display: grid;
  justify-items: center;
}
.pt__plotno .ob-przyst__tab {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 9px 12px 8px;
  border-radius: 12px;
  background: var(--surface);
  border: 2px solid var(--blue);
  box-shadow: var(--cien-m);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}
.pt__plotno .ob-przyst__tab .ik {
  width: 22px;
  height: 22px;
  color: var(--blue);
}
.pt__plotno .ob-przyst__slup {
  width: 5px;
  height: 96px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ink-soft), var(--ink));
}
.pt__plotno .ob-autobus {
  position: relative;
  width: 196px;
  height: 84px;
}
.pt__plotno .ob-autobus__kadlub {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 68px;
  border-radius: 16px 22px 10px 10px;
  background: var(--karta-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 18px 26px -14px rgba(29, 78, 216, 0.7);
}
.pt__plotno .ob-autobus__okna {
  position: absolute;
  left: 12px;
  right: 34px;
  top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pt__plotno .ob-autobus__okna i {
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
}
.pt__plotno .ob-autobus__szyba {
  position: absolute;
  right: 8px;
  top: 10px;
  width: 20px;
  height: 34px;
  border-radius: 6px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.9);
}
.pt__plotno .ob-autobus__nr {
  position: absolute;
  left: 12px;
  bottom: 22px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
}
.pt__plotno .ob-autobus__kolo {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 8px var(--ink), inset 0 0 0 30px var(--blue-line);
}
.pt__plotno .ob-autobus__kolo--1 {
  left: 26px;
}
.pt__plotno .ob-autobus__kolo--2 {
  right: 30px;
}
.pt__plotno .jazda-w {
  animation: pt-dojazd 1.4s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + var(--d, 0s));
}
@keyframes pt-dojazd {
    from {
      opacity: 0;
      transform: translateX(-160px);
    }
    20% {
      opacity: 1;
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
.pt__plotno .ob-klinika {
  position: relative;
  width: 230px;
  height: 176px;
  padding: 0 16px;
  border-radius: 14px 14px 0 0;
  background: var(--surface);
  border: 1.5px solid var(--blue-line);
  border-bottom: 0;
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-klinika__szyld {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}
.pt__plotno .ob-klinika__szyld .ik {
  width: 16px;
  height: 16px;
  color: var(--blue-sky);
}
.pt__plotno .ob-klinika__okna {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pt__plotno .ob-klinika__okna i {
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--blue-tint), var(--blue-tint-2));
  border: 1px solid var(--blue-line);
}
.pt__plotno .ob-klinika__drzwi {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46px;
  height: 58px;
  margin-left: -23px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(135deg, var(--blue-tint), var(--blue-tint-2));
  border: 2px solid var(--blue);
  border-bottom: 0;
}
.pt__plotno .ob-apteka {
  position: relative;
  width: 116px;
  height: 112px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding-top: 14px;
  border-radius: 12px 12px 0 0;
  background: var(--surface);
  border: 1.5px solid var(--blue-line);
  border-bottom: 0;
  box-shadow: var(--cien-m);
  font-size: 12px;
  font-weight: 800;
}
.pt__plotno .ob-apteka > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
}
.pt__plotno .ob-apteka > span .ik {
  width: 20px;
  height: 20px;
}
.pt__plotno .ob-mapa {
  position: relative;
  width: 250px;
  height: 160px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-mapa > div {
  position: absolute;
  left: -150px;
  top: -36px;
  width: 440px;
  height: 260px;
}
.pt__plotno .ob-winda {
  position: relative;
  width: 128px;
  height: 196px;
  padding: 34px 12px 0;
  border-radius: 14px 14px 0 0;
  background: var(--surface);
  border: 1.5px solid var(--blue-line);
  border-bottom: 0;
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-winda__ekran {
  position: absolute;
  left: 50%;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: -26px;
  width: 52px;
  height: 20px;
  justify-content: center;
  border-radius: 6px;
  background: var(--ink);
  color: var(--blue-sky);
  font-size: 11px;
  font-weight: 800;
}
.pt__plotno .ob-winda__ekran .ik {
  width: 12px;
  height: 12px;
}
.pt__plotno .ob-winda__drzwi {
  position: relative;
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
}
.pt__plotno .ob-winda__drzwi i {
  flex: 1;
  background: linear-gradient(180deg, var(--blue-tint), var(--blue-tint-2));
  border: 1px solid var(--blue-line);
  transition: transform 0.9s var(--ease);
  transition-delay: 0.3s;
}
.pt__plotno [data-on="1"] .ob-winda__drzwi i:first-child {
  transform: translateX(-70%);
}
.pt__plotno [data-on="1"] .ob-winda__drzwi i:last-child {
  transform: translateX(70%);
}
.pt__plotno .ob-winda__drzwi .ik {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px;
  color: #fff;
}
.pt__plotno .raty-w {
  position: relative;
}
.pt__plotno .raty-w .pl-tryb {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pt__plotno .raty-w--b .pl-raty {
  grid-template-columns: 1fr 1fr;
}
.pt__plotno .raty-w--b .pl-etapy {
  gap: 10px;
}
.pt__plotno .raty-w .pl-rata b {
  font-size: 15px;
}
.pt__plotno .ob-implant-w .pl-implant {
  transform: scale(1.15);
  transform-origin: 50% 100%;
}
.pt__plotno .ob-plac {
  position: relative;
  width: 236px;
  height: 160px;
  border-radius: 20px;
  background:
  repeating-linear-gradient(90deg, transparent 0 54px, var(--surface) 54px 57px) 12px 0 / calc(100% - 24px) 76px no-repeat,
  linear-gradient(180deg, var(--blue-tint-2), var(--blue-tint));
  border: 1px solid var(--blue-line);
  box-shadow: var(--cien-l);
  overflow: hidden;
}
.pt__plotno .ob-plac::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 92px;
  border-top: 3px dashed var(--surface);
}
.pt__plotno .ob-auto {
  position: absolute;
  width: 34px;
  height: 58px;
  border-radius: 11px 11px 9px 9px;
  background: var(--karta-grad);
  box-shadow: 0 8px 12px -6px rgba(3, 7, 18, 0.45);
}
.pt__plotno .ob-auto::before,
.pt__plotno .ob-auto::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.82);
}
.pt__plotno .ob-auto::before {
  top: 9px;
  height: 12px;
}
.pt__plotno .ob-auto::after {
  bottom: 8px;
  height: 8px;
}
.pt__plotno .ob-auto--ink {
  background: linear-gradient(180deg, var(--ink-soft), var(--ink));
}
.pt__plotno .ob-auto--wjazd {
  animation: pt-parkuje 1.5s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + 0.9s);
}
@keyframes pt-parkuje {
    from {
      opacity: 0;
      transform: translate(70px, 80px) rotate(90deg);
    }
    25% {
      opacity: 1;
    }
    55% {
      transform: translate(0, 60px) rotate(0deg);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
.pt__plotno .ob-plac__koperta {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 72px;
  color: var(--blue);
}
.pt__plotno .ob-plac__koperta .ik {
  width: 26px;
  height: 26px;
}
.pt__plotno .ob-plac__licz {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}
.pt__plotno .ob-plac__licz b {
  color: var(--blue-sky);
  font-variant-numeric: tabular-nums;
}
.pt__plotno .ob-znak {
  display: grid;
  justify-items: center;
}
.pt__plotno .ob-znak__tab {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  background: var(--karta-grad);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--blue-line), var(--cien-m);
  color: #fff;
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}
.pt__plotno .ob-znak__tab .ik {
  width: 42px;
  height: 42px;
}
.pt__plotno .ob-znak__slup {
  width: 6px;
  height: 74px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ink-soft), var(--ink));
}
.pt__plotno .ob-bilet {
  position: relative;
  width: 156px;
  padding: 12px 16px 12px 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-m);
  display: grid;
  gap: 2px;
}
.pt__plotno .ob-bilet::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  border-left: 2px dotted var(--blue-line);
}
.pt__plotno .ob-bilet small {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.pt__plotno .ob-bilet b {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
}
.pt__plotno .ob-dowod {
  position: relative;
  width: 190px;
  height: 120px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--blue-tint) 100%);
  border: 1px solid var(--blue-line);
  box-shadow: var(--cien-l);
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 12px;
}
.pt__plotno .ob-dowod > small {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.pt__plotno .ob-dowod__foto {
  position: relative;
  height: 60px;
  border-radius: 8px;
  background: var(--blue-tint-2);
  overflow: hidden;
}
.pt__plotno .ob-dowod__foto::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: var(--blue-line);
}
.pt__plotno .ob-dowod__foto::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 40px;
  height: 30px;
  margin-left: -20px;
  border-radius: 50%;
  background: var(--blue-line);
}
.pt__plotno .ob-linie {
  display: grid;
  gap: 7px;
  align-content: start;
  padding-top: 4px;
}
.pt__plotno .ob-linie i {
  height: 6px;
  border-radius: 3px;
  background: var(--blue-tint-2);
}
.pt__plotno .ob-linie i:nth-child(2) {
  width: 70%;
}
.pt__plotno .ob-linie i:nth-child(3) {
  width: 85%;
}
.pt__plotno .ob-kartka {
  width: 168px;
  padding: 14px 15px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-kartka > b {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
}
.pt__plotno .ob-kartka__w {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.pt__plotno .ob-kartka__w i {
  width: 18px;
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--blue) 50%, var(--blue-tint-2) 50%);
  flex-shrink: 0;
}
.pt__plotno .ob-rtg {
  position: relative;
  width: 180px;
  height: 116px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--ink-soft), var(--ink));
  box-shadow: 0 22px 34px -18px rgba(3, 7, 18, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pt__plotno .ob-rtg svg {
  width: 44px;
  height: 56px;
  color: var(--blue-tint-2);
  opacity: 0.85;
}
.pt__plotno .ob-rtg svg:nth-child(2) {
  width: 50px;
  height: 64px;
  opacity: 1;
}
.pt__plotno .ob-rtg small {
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--blue-sky);
}
.pt__plotno .ob-teczka {
  position: relative;
  width: 168px;
  height: 120px;
  margin-top: 14px;
  border-radius: 4px 14px 14px 14px;
  background: linear-gradient(180deg, var(--blue-tint) 0%, var(--blue-tint-2) 100%);
  border: 1.5px solid var(--blue-line);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-teczka::before {
  content: "";
  position: absolute;
  left: -1.5px;
  top: -16px;
  width: 70px;
  height: 16px;
  border-radius: 8px 10px 0 0;
  background: var(--blue-tint);
  border: 1.5px solid var(--blue-line);
  border-bottom: 0;
}
.pt__plotno .ob-teczka span {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  box-shadow: var(--cien-s);
}
.pt__plotno .ob-teczka i {
  position: absolute;
  left: 16px;
  right: 26px;
  top: -8px;
  height: 30px;
  border-radius: 6px 6px 0 0;
  background: var(--surface);
  box-shadow: var(--cien-s);
}
.pt__plotno .ob-zegar {
  display: grid;
  justify-items: center;
}
.pt__plotno .ob-zegar__pasek {
  width: 44px;
  height: 30px;
  background: linear-gradient(180deg, var(--ink-soft), var(--ink));
}
.pt__plotno .ob-zegar__pasek:first-child {
  border-radius: 10px 10px 0 0;
}
.pt__plotno .ob-zegar__pasek:last-child {
  border-radius: 0 0 10px 10px;
}
.pt__plotno .ob-zegar__tarcza {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--surface) 60%, var(--blue-tint) 100%);
  border: 6px solid var(--ink);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-zegar__tarcza i {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ink);
  transform-origin: 50% 100%;
}
.pt__plotno .ob-zegar__tarcza i:nth-child(1) {
  height: 26px;
  transform: rotate(-60deg);
}
.pt__plotno .ob-zegar__tarcza i:nth-child(2) {
  height: 36px;
  width: 3px;
  background: var(--blue);
  transform: rotate(120deg);
}
.pt__plotno .ob-zegar__tarcza::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: var(--blue);
}
.pt__plotno .ob-zegar__tarcza b {
  position: absolute;
  right: -42px;
  top: -10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 20px -10px rgba(29, 78, 216, 0.8);
}
.pt__plotno .ob-drukarka {
  position: relative;
  width: 176px;
  padding-top: 112px;
}
.pt__plotno .ob-drukarka__wyjscie {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 50px;
  height: 128px;
  overflow: hidden;
}
.pt__plotno .ob-drukarka__papier {
  height: 128px;
  padding: 10px 12px;
  border-radius: 4px 4px 0 0;
  background: var(--surface);
  box-shadow: inset 0 -10px 12px -10px rgba(3, 7, 18, 0.25);
  display: grid;
  align-content: start;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-muted);
  animation: pt-wydruk 1.6s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + 0.9s);
}
.pt__plotno .ob-drukarka__papier b {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-align: center;
}
.pt__plotno .ob-drukarka__papier i {
  height: 4px;
  border-radius: 2px;
  background: var(--blue-tint-2);
}
.pt__plotno .ob-drukarka__papier strong {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--blue-line);
  font-size: 11px;
  color: var(--ink);
}
@keyframes pt-wydruk {
    from {
      transform: translateY(100%);
    }
    to {
      transform: none;
    }
  }
.pt__plotno .ob-drukarka__korpus {
  position: relative;
  height: 62px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--ink-soft), var(--ink));
  box-shadow: 0 22px 30px -16px rgba(3, 7, 18, 0.6);
}
.pt__plotno .ob-drukarka__korpus::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 10px;
  height: 6px;
  border-radius: 3px;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.pt__plotno .ob-drukarka__korpus::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue-sky);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2);
}
.pt__plotno .ob-faktura {
  width: 186px;
  padding: 14px 15px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
  display: grid;
  gap: 6px;
}
.pt__plotno .ob-faktura > b {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.pt__plotno .ob-faktura > small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
}
.pt__plotno .ob-faktura .ob-linie {
  margin: 4px 0;
}
.pt__plotno .ob-faktura strong {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--linia);
  font-size: 12.5px;
}
.pt__plotno .ob-tabl {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-tabl small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pt__plotno .ob-tabl b {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--blue);
}
.pt__plotno .ob-tabl span {
  font-size: 12px;
  color: var(--ink-soft);
}
.pt__plotno .ob-powitanie {
  position: relative;
  width: 200px;
  height: 210px;
}
.pt__plotno .ob-powitanie__k {
  position: absolute;
  width: 170px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
  display: grid;
  gap: 8px;
}
.pt__plotno .ob-powitanie__k b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pt__plotno .ob-powitanie__k small {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
}
.pt__plotno .ob-powitanie__k:first-child {
  left: 0;
  top: 0;
  transform: rotate(-6deg);
}
.pt__plotno .ob-powitanie__k:last-child {
  left: 22px;
  top: 104px;
  transform: rotate(4deg);
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.pt__plotno .ob-powitanie__k:last-child small {
  color: rgba(255, 255, 255, 0.8);
}
.pt__plotno .flaga {
  display: block;
  width: 34px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--blue-line);
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 50%, var(--blue) 50%);
}
.pt__plotno .flaga--en {
  border-color: rgba(255, 255, 255, 0.5);
  background:
  linear-gradient(var(--surface), var(--surface)) 50% 0 / 6px 100% no-repeat,
  linear-gradient(var(--surface), var(--surface)) 0 50% / 100% 6px no-repeat,
  var(--blue-deep);
}
.pt__plotno .ob-lekarz {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  width: 210px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-lekarz__awatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kula-grad);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.pt__plotno .ob-lekarz__awatar--j {
  background: var(--blue-tint-2);
  color: var(--blue);
}
.pt__plotno .ob-lekarz b {
  display: block;
  font-size: 14px;
  font-weight: 800;
}
.pt__plotno .ob-lekarz small {
  font-size: 11.5px;
  color: var(--ink-muted);
}
.pt__plotno .ob-lekarz__jez {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
}
.pt__plotno .ob-lekarz__jez span {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--blue-tint);
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
}
.pt__plotno .ob-lekarz__jez span + span {
  background: var(--blue);
  color: #fff;
}
.pt__plotno .ob-kalend {
  width: 150px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-kalend > b {
  display: block;
  padding: 6px;
  background: var(--blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
}
.pt__plotno .ob-kalend > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  font-size: 12px;
  font-weight: 700;
}
.pt__plotno .ob-kalend > div span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt__plotno .ob-kalend .flaga {
  width: 24px;
  height: 16px;
}
.pt__plotno .ob-tarcza {
  position: relative;
  width: 150px;
  height: 172px;
}
.pt__plotno .ob-tarcza svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pt__plotno .ob-tarcza .tarcza {
  fill: var(--blue-tint);
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 18px 18px rgba(29, 78, 216, 0.3));
  stroke-dasharray: 1;
  animation: pt-rysuj 1.3s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + 0.7s);
}
.pt__plotno .ob-tarcza .zab {
  fill: var(--surface);
  stroke: var(--blue-line);
  stroke-width: 1.4;
}
.pt__plotno .ob-tarcza b {
  position: absolute;
  right: -18px;
  bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 20px -10px rgba(29, 78, 216, 0.8);
}
.pt__plotno .ob-karta-g {
  position: relative;
  width: 184px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--blue-tint) 100%);
  border: 1px solid var(--blue-line);
  box-shadow: var(--cien-l);
  display: grid;
  gap: 6px;
}
.pt__plotno .ob-karta-g > small {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.pt__plotno .ob-karta-g > span {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pt__plotno .ob-karta-g > span b {
  color: var(--ink);
}
.pt__plotno .ob-pieczec {
  position: absolute;
  right: 10px;
  top: -18px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2.5px solid var(--blue);
  background: var(--surface);
  color: var(--blue);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  transform: rotate(-14deg);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--blue-line);
}
.pt__plotno .ob-kontrole {
  width: 170px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-kontrole > b {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 800;
}
.pt__plotno .ob-kontrole > span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pt__plotno .ob-kontrole > span i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}
.pt__plotno .ob-kontrole > span i .ik {
  width: 11px;
  height: 11px;
}
.pt__plotno .ob-kontrole > span:last-child i {
  background: var(--surface);
  border: 1.5px dashed var(--blue-line);
}
.pt__plotno .ob-pieczatki {
  width: 226px;
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: var(--karta-grad);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 22px 36px -18px rgba(29, 78, 216, 0.75);
}
.pt__plotno .ob-pieczatki > small {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.pt__plotno .ob-pieczatki > b {
  display: block;
  margin: 2px 0 12px;
  font-size: 15px;
  font-weight: 800;
}
.pt__plotno .ob-pieczatki__siatka {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.pt__plotno .ob-pieczatki__siatka i {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.5);
}
.pt__plotno .ob-pieczatki__siatka i.tak {
  border: 0;
  background: var(--surface);
  color: var(--blue);
  animation: pt-pop 0.4s var(--ease) both;
  animation-delay: calc(var(--pd, 0s) + 0.6s + var(--i) * 0.12s);
}
.pt__plotno .ob-pieczatki__siatka i .ik {
  width: 14px;
  height: 14px;
}
.pt__plotno .ob-metka {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 76px;
  padding-left: 26px;
  background: var(--karta-grad);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 22% 100%, 0 50%);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 16px 18px rgba(29, 78, 216, 0.4));
}
.pt__plotno .ob-metka::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--surface);
}
.pt__plotno .ob-metka-w {
  position: relative;
}
.pt__plotno .ob-metka-w::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 36px;
  width: 70px;
  border-top: 2px solid var(--ink-soft);
  transform: rotate(-20deg);
  transform-origin: 100% 0;
}
.pt__plotno .ob-rodzina {
  display: grid;
  gap: 10px;
  width: 180px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
}
.pt__plotno .ob-rodzina > div {
  display: flex;
}
.pt__plotno .ob-rodzina > div i {
  width: 38px;
  height: 38px;
  margin-right: -10px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: var(--kula-grad);
}
.pt__plotno .ob-rodzina > div i:nth-child(2) {
  background: var(--blue-tint-2);
}
.pt__plotno .ob-rodzina > div i:nth-child(3) {
  width: 30px;
  height: 30px;
  margin-top: 8px;
  background: var(--blue-sky);
}
.pt__plotno .ob-rodzina b {
  font-size: 14px;
  font-weight: 800;
}
.pt__plotno .ob-rodzina small {
  font-size: 12px;
  color: var(--ink-muted);
}
.pt__plotno .ob-os {
  position: relative;
  width: 300px;
  padding: 15px 16px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-l);
  overflow: hidden;
}
.pt__plotno .ob-os__kroki {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 6px -8px 0;
}
.pt__plotno .ob-os__kroki::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 14px;
  bottom: 14px;
  border-left: 2px solid var(--blue-line);
}
.pt__plotno .ob-os__kroki > div {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.pt__plotno .ob-os__kroki > div::before {
  content: "";
  width: 12px;
  height: 12px;
  margin: 3px 0 0 4px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--blue);
}
.pt__plotno .ob-os__kroki > div b {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pt__plotno.wgr .ob-os__kroki .cel {
  animation: pt-podswietl 0.5s var(--ease) both;
  animation-delay: 1.75s;
}
.pt__plotno .ob-ulotka {
  display: flex;
  width: 270px;
  height: 200px;
  filter: drop-shadow(0 26px 30px rgba(29, 78, 216, 0.25));
}
.pt__plotno .ob-ulotka > div {
  flex: 1;
  padding: 14px 12px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  display: grid;
  align-content: start;
  gap: 7px;
}
.pt__plotno .ob-ulotka > div:nth-child(1) {
  border-radius: 12px 0 0 12px;
  background: var(--karta-grad);
  color: #fff;
  transform: perspective(500px) rotateY(16deg);
  transform-origin: 100% 50%;
}
.pt__plotno .ob-ulotka > div:nth-child(3) {
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--blue-tint), var(--surface));
  transform: perspective(500px) rotateY(-16deg);
  transform-origin: 0 50%;
}
.pt__plotno .ob-ulotka small {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
.pt__plotno .ob-ulotka b {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}
.pt__plotno .ob-ulotka .ob-rodzina-mini {
  display: flex;
  margin-top: 6px;
}
.pt__plotno .ob-ulotka .ob-rodzina-mini i {
  width: 22px;
  height: 22px;
  margin-right: -6px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: var(--surface);
}
.pt__plotno .ob-ulotka__cena {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 10px;
  background: var(--blue-tint);
  font-size: 11px;
  color: var(--ink-muted);
}
.pt__plotno .ob-ulotka__cena s {
  font-size: 11px;
}
.pt__plotno .ob-ulotka__cena strong {
  font-size: 18px;
  color: var(--blue);
}
.pt__plotno.wgr .ob-ulotka__cena {
  animation: pt-podswietl 0.5s var(--ease) both;
  animation-delay: 1.4s;
}
.pt__plotno .ob-chip-ik {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px 10px 10px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--cien-m);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pt__plotno .ob-chip-ik > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--blue-tint);
  color: var(--blue);
}
.pt__plotno .ob-chip-ik > span .ik {
  width: 18px;
  height: 18px;
}
.pt__plotno .ob-zespol {
  position: relative;
  width: 300px;
  height: 330px;
}
.pt__plotno .ob-zespol .ob-lekarz {
  position: absolute;
  width: 236px;
}
.pt__plotno .ob-zespol .ob-lekarz:nth-child(1) {
  left: 0;
  top: 0;
  transform: rotate(-5deg);
}
.pt__plotno .ob-zespol .ob-lekarz:nth-child(2) {
  left: 40px;
  top: 104px;
  transform: rotate(3deg);
}
.pt__plotno .ob-zespol .ob-lekarz:nth-child(3) {
  left: 8px;
  top: 210px;
  transform: rotate(-2deg);
}
.pt__plotno.wgr .ob-zespol .ob-lekarz.cel {
  animation: pt-obrys 0.5s var(--ease) both;
  animation-delay: 1.4s;
}
@keyframes pt-obrys {
    to {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15), var(--cien-l);
    }
  }
.pt__plotno .tel {
  position: absolute;
  width: 340px;
  height: 700px;
  padding: 11px;
  border-radius: 58px;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink-soft), inset 0 0 0 5px var(--ink), var(--cien-l), 0 60px 90px -50px rgba(3, 7, 18, 0.45);
  z-index: 2;
  animation: pt-wjazd 0.9s var(--ease) both;
}
.pt__plotno .tel__bok {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: var(--ink-soft);
}
.pt__plotno .tel__bok--1 {
  left: -3px;
  top: 136px;
  height: 34px;
}
.pt__plotno .tel__bok--2 {
  left: -3px;
  top: 186px;
  height: 58px;
}
.pt__plotno .tel__bok--3 {
  right: -3px;
  top: 170px;
  height: 84px;
}
.pt__plotno .tel__ekran {
  position: relative;
  height: 100%;
  border-radius: 48px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pt__plotno .tel__wyspa {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 3;
  width: 104px;
  height: 31px;
  margin-left: -52px;
  border-radius: 20px;
  background: var(--ink);
}
.pt__plotno .tel__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 8px 28px 0 34px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.pt__plotno .tel__status svg {
  height: 12px;
}
.pt__plotno .tel__glowa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 12px 10px;
  border-bottom: 1px solid var(--linia);
  flex-shrink: 0;
}
.pt__plotno .tel__glowa > .ik {
  width: 22px;
  height: 22px;
  color: var(--blue);
}
.pt__plotno .tel__glowa div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.pt__plotno .tel__glowa b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.pt__plotno .tel__glowa small {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.pt__plotno .tel__glowa small::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-sky);
}
.pt__plotno .tel__wiad {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 12px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  overflow: hidden;
}
.pt__plotno .tel__data {
  align-self: center;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
}
.pt__plotno .bq,
.pt__plotno .ba {
  max-width: 84%;
  padding: 10px 14px;
  font-size: 15.5px;
  line-height: 1.38;
  letter-spacing: -0.005em;
}
.pt__plotno .bq {
  align-self: flex-end;
  border-radius: 20px 20px 6px 20px;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
}
.pt__plotno .ba {
  align-self: flex-start;
  border-radius: 20px 20px 20px 6px;
  background: var(--surface);
  border: 1px solid var(--linia);
  box-shadow: 0 6px 16px -12px rgba(29, 78, 216, 0.4);
  color: var(--ink);
}
.pt__plotno .ba--duch {
  border-style: dashed;
  border-color: rgba(29, 78, 216, 0.35);
  background: transparent;
  box-shadow: none;
}
.pt__plotno .czas {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.pt__plotno .czas--p {
  align-self: flex-end;
  margin-top: -4px;
}
.pt__plotno .czas--l {
  align-self: flex-start;
  margin-top: -4px;
}
.pt__plotno .metody {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.pt__plotno .metody:empty {
  display: none;
}
.pt__plotno .metody span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  animation: pt-pop 0.4s var(--ease) both;
}
.pt__plotno .metody .ik {
  width: 13px;
  height: 13px;
}
.pt__plotno .tel__pisz {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 28px;
  border-top: 1px solid var(--linia);
  flex-shrink: 0;
}
.pt__plotno .tel__pisz span {
  flex: 1;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--linia);
  font-size: 14px;
  color: var(--ink-muted);
}
.pt__plotno .tel__pisz i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}
.pt__plotno .tel__pisz .ik {
  width: 17px;
  height: 17px;
}
.pt__plotno .tel__pasek {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 120px;
  height: 5px;
  margin-left: -60px;
  border-radius: 3px;
  background: var(--ink);
}
.pt__plotno .tel .wj-pop,
.pt__plotno .tel .wj {
  animation-duration: 0.55s;
}
.pt__plotno .tel__pisze {
  align-self: flex-start;
  padding: 12px 14px;
  border-radius: 20px 20px 20px 6px;
  background: var(--surface);
  border: 1px solid var(--linia);
}
.pt__plotno .tel__zrodlo {
  margin-top: 9px;
}
.pt__plotno .tel__zrodlo .zrodlo {
  font-size: 12px;
  padding: 4px 10px 4px 4px;
}
.pt__plotno .tel__zrodlo .pdf {
  height: 19px;
  font-size: 9.5px;
}
.pt__plotno .mini-bank {
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--surface), var(--blue-tint));
  border: 1.5px solid var(--blue-line);
  box-shadow: 4px -4px 0 -1.5px var(--blue-tint-2);
}
.pt__plotno .mini-bank::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
}
.pt__plotno .mini-karta {
  position: relative;
  width: 50px;
  height: 32px;
  border-radius: 6px;
  background: var(--karta-grad);
  box-shadow: 0 6px 12px -6px rgba(29, 78, 216, 0.8);
}
.pt__plotno .mini-karta::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 10px;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
}
.pt__plotno .mini-blik {
  display: grid;
  place-items: center;
  width: 50px;
  height: 32px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.pt__plotno .mini-przelew {
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  border-radius: 10px;
  background: var(--blue-tint-2);
  color: var(--blue);
}
.pt__plotno .mini-przelew .ik {
  width: 22px;
  height: 22px;
}
.pt__plotno .awatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-tint);
  border: 1px solid var(--blue-line);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}


/* ===================== W2 (16.10.2026) — Platforma bazy wiedzy 2: dopracowanie ekranów S01–S10 =====================
   Sens i przepływ bez zmian; ruch, układ i drobne błędy wizualne. Ten blok stoi NA KOŃCU pliku i wygrywa kolejnością
   (klatki o tych samych nazwach nadpisują wcześniejsze). Uchylone w W2: pt-pop „0,6 → 1,08 → 1” z jedną krzywą na
   całość (szarpnięcie w 60 %), pt-opad „spadek 34 px z odbiciem 3 px” — teraz sprężyna (linear(), tłumienie 0,7,
   przerzut ~4,6 %), mniejsze odległości i dymki czatu rosnące z narożnika jak w komunikatorze. */
.pt__plotno {
  /* sprężyna: tłumiony oscylator ζ = 0,7 (40 próbek); zapas bez linear() = krzywa platformy */
  --pt-spr: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pt-spr: linear(0, 0.026, 0.092, 0.184, 0.29, 0.4, 0.508, 0.609, 0.701, 0.781, 0.849, 0.904, 0.949, 0.983, 1.008, 1.026, 1.037, 1.044, 1.046, 1.045, 1.043, 1.039, 1.034, 1.029, 1.024, 1.019, 1.015, 1.011, 1.008, 1.005, 1.003, 1.001, 1, 0.999, 0.998, 0.998, 0.998, 0.999, 0.999, 1, 1);
}
@keyframes pt-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.86);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pt-opad {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.97);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pt-dymek {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  30% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pt__plotno .wj-pop,
.pt__plotno .metody span,
.pt__plotno .ob[data-on="1"] .ob__znak {
  animation-timing-function: var(--pt-spr);
}
.pt__plotno .wj-op {
  animation-duration: 0.95s;
  animation-timing-function: var(--pt-spr);
}
/* dymki czatu rosną z narożnika przy „ogonku”, czas pod nimi tylko się pojawia */
.pt__plotno .tel .ba.wj-pop,
.pt__plotno .tel .bq.wj-pop {
  animation-name: pt-dymek;
  animation-duration: 0.7s;
  transform-origin: 0 100%;
}
.pt__plotno .tel .bq.wj-pop {
  transform-origin: 100% 100%;
}
.pt__plotno .tel .czas.wj {
  animation-name: pt-pojaw;
  animation-duration: 0.5s;
}
/* zgaszony przedmiot (`.sw`) przygasa jak `.ob__rys` — miękko, z tym samym czasem */
.pt__plotno .sw,
.pt__plotno .ob__rys {
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.pt__plotno .sw[data-on="0"],
.pt__plotno .ob[data-on="0"] .ob__rys {
  filter: saturate(0.7);
}
/* ptaszek przy przedmiocie znika miękko (dawniej: zdjęcie animacji = natychmiastowe zniknięcie) */
.pt__plotno .ob[data-on="0"] .ob__znak {
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

/* S01 — mapa: kadr przesunięty na trasę i cel (był ucięty chip „3 min pieszo” na lewej krawędzi karty, a cel
   chował się pod telefonem); chipy z mapy ukryte — te same informacje leżą obok jako osobne przedmioty */
.pt__plotno .ob-mapa > div {
  left: -170px;
}
.pt__plotno .ob-mapa .pl-chip {
  display: none;
}
/* S09 — pieczęć nie wchodzi na napis „KARTA GWARANCYJNA” ani na „2 lata”: mniejsza, w prawym górnym rogu nad kartą */
.pt__plotno .ob-karta-g .ob-pieczec {
  top: -40px;
  right: 2px;
  width: 50px;
  height: 50px;
  font-size: 7px;
}

/* ---- układ ekranu ---- */
/* Pasek akcji (position: fixed) był w środku `.pt__panel`, którego animacja wejścia z transform zostaje na
   elemencie (fill both) — panel stawał się blokiem zawierającym: pasek przyklejał się do PANELU, nie do okna
   (na telefonie lądował pod treścią, na komputerze strona przewijała się o 84 px). Panel wchodzi samym opacity,
   ruch w pionie ma jego treść. Wysokość: ekran − belka − górny odstęp #ekran; dolny padding #ekran (72 px, miejsce
   na pasek) oddajemy ujemnym marginesem — bez pionowego przewijania na 1280–1920. */
.pytanie > .pt__panel {
  animation-name: pt-pojaw;
}
.pytanie--telefon .pt__tresc {
  animation: wejscie 0.6s var(--ease) 0.08s both;
}
/* panel (z paskiem akcji) nad płótnem telefonu — animacja opacity robi z panelu kontekst warstw, a płótno stoi
   w DOM po nim: na telefonie przykrywało przyklejony pasek akcji */
.pytanie--telefon .pt__panel {
  position: relative;
  z-index: 3;
}
@media (min-width: 761px) {
  .pytanie--telefon {
    height: calc(100vh - 104px);
    margin-bottom: -72px;
  }
}
/* długie pytania (S07, S08) — mniejszy krój, żeby tytuł miał najwyżej trzy wiersze; sierotki łamie app.js ( ) */
.pytanie--telefon.pt--dlugie .pytanie__tresc {
  font-size: clamp(30px, 2.6vw, 40px);
}
.pytanie--telefon .pytanie__tresc {
  text-wrap: balance;
}
.pytanie--telefon .obszar__ai {
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .pt__plotno *,
  .pt__plotno *::before,
  .pt__plotno *::after,
  .pytanie--telefon .pt__tresc {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

/* ---- telefon (≤ 760 px) ---- */
/* Kolejność: pytanie, klocki i pole NAJPIERW, telefon z odpowiedzią na żywo pod nimi (dawniej telefon zajmował cały
   pierwszy ekran, a pytanie było pod zgięciem i pod znacznikiem). Przedmioty „zaglądające” zza krawędzi ekranu
   (ucięte w pół słowa — „arterze”, „ZELEW”) ukryte: na 390 px nie ma dla nich miejsca obok telefonu.
   Podpowiedź „Shift + Enter” znika (klawiatura ekranowa nie ma Shift + Enter). */
@media (max-width: 760px) {
  .pytanie--telefon .pt__panel {
    order: -1;
    padding: 4px 18px 8px;
  }
  .pytanie--telefon .pt__swiat {
    margin-top: 8px;
    margin-bottom: 112px;
  }
  .pt__plotno.waski .pb-ob.wl,
  .pt__plotno.waski .pb-ob.wr {
    display: none;
  }
  .pytanie--telefon .obszar__dol .podpowiedz {
    display: none;
  }
  .pytanie--telefon.pt--dlugie .pytanie__tresc {
    font-size: 28px;
  }
}
.ekran--bez-wejscia .pytanie > .pt__panel,
.ekran--bez-wejscia .pytanie--telefon .pt__tresc {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .pytanie > .pt__panel {
    animation: none;
  }
}
/* klocek: krótkie wciśnięcie i ptaszek wskakujący sprężyście (dawniej „+” → „✓” bez przejścia) */
.pytanie--telefon .szybkie__klocek:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
.pytanie--telefon .szybkie__klocek::before {
  display: inline-block;
}
.pytanie--telefon .szybkie__klocek[aria-pressed="true"]::before {
  animation: pt-pop 0.5s both;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-timing-function: linear(0, 0.026, 0.092, 0.184, 0.29, 0.4, 0.508, 0.609, 0.701, 0.781, 0.849, 0.904, 0.949, 0.983, 1.008, 1.026, 1.037, 1.044, 1.046, 1.045, 1.043, 1.039, 1.034, 1.029, 1.024, 1.019, 1.015, 1.011, 1.008, 1.005, 1.003, 1.001, 1, 0.999, 0.998, 0.998, 0.998, 0.999, 0.999, 1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .pytanie--telefon .szybkie__klocek[aria-pressed="true"]::before {
    animation: none;
  }
}
/* długa odpowiedź wypycha starsze dymki pod nagłówek czatu — zamiast cięcia prostą linią przez dymek
   łagodne wygaszenie u góry, jak przewijana rozmowa w komunikatorze */
.pt__plotno .tel__wiad {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}