/* Vistitio — ekrany konta: „Obserwowane”, „Moje oferty”, „Moja oferta”.
   Źródło: Prototyp Desktop i Mobile, ekrany „Obserwowane”, „Moje oferty”, „Moja oferta”.

   Wszystkie kolory z tokens.css, odstępy ze skali czwórkowej. Wygląd samych komponentów
   (kafelek, wiersz, pastylka, przycisk, pusty stan) mieszka w arkuszach partii — tutaj
   jest wyłącznie układ tych komponentów na ekranie.

   Uwaga na tokeny typografii: --v-t-ui, --v-t-label i reszta tej rodziny to skrót `font`
   (rozmiar/interlinia), nie sam rozmiar. W `font-size` są nieważne. */

/* ---------- wspólna główka ekranów konta ---------- */

.konto {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
}

.konto__glowka {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Główka z akcją po prawej („+ Dodaj ofertę”) — desktop, ekran „Moje oferty”. */
.konto__glowka--zakcja {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--v-s-3);
}

.konto__lead {
  max-width: var(--v-w-text);
  font: 400 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  line-height: 1.5;
}

/* ---------- Obserwowane ---------- */
/* Siatka jak w prototypie desktop: kolumny same się dobierają przy 220 px na kafelek.
   Pod kafelkiem przycisk z nazwą czynności — na tej liście serce nie powiedziałoby,
   co zrobi klik. */

.konto__siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--v-s-5) var(--v-s-4);
}

.konto__poz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v-s-2);
}

.konto__kafelek { width: 100%; }

/* ---------- Moje oferty ---------- */

.mojeof__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.mojeof__liczby {
  font: 400 13px/1.4 var(--v-font-body);
  color: var(--v-n-600);
}

.mojeof__akcje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v-s-2); /* makieta */
}

/* Formularz niesie jedną ikonę i nie ma własnego wyglądu — znika z układu, żeby
   przycisk stanął w rzędzie razem z odnośnikami. */
.mojeof__akcja { display: contents; }

/* Miniatura wiersza jest komponentem (.v-trow__mini) — tutaj dokładamy tylko to, czego
   wiersz w panelu nie potrzebował: prawdziwe zdjęcie zamiast szarego kwadratu.

   ROZMIAR 64 px to ŚWIADOME ODEJŚCIE OD MAKIETY (prośba Huberta 22.09). Prototyp daje
   tam 48 px, a komponent w panelu 40 — przy zdjęciu rzeczy jedno i drugie jest za małe,
   żeby rozpoznać, o którą ofertę chodzi. W panelu zespołu (listy tekstowe) zostaje 40. */
.mojeof .v-trow__mini {
  overflow: hidden;
  width: 64px;
  height: 64px;
  border-radius: var(--v-r-chip);
}

.mojeof .v-trow__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Moja oferta ---------- */

.mojaof__wstecz { align-self: flex-start; }

/*
 * Ochrowa belka „TWOJA OFERTA”. To ona tłumaczy cały ekran: wygląda jak strona oferty,
 * bo nią jest, tylko z innymi przyciskami. Znacznik, zdanie i przejście stoją W JEDNYM
 * WIERSZU (makieta), a zdanie zabiera resztę miejsca i schodzi niżej dopiero, gdy
 * zabraknie 220 px.
 *
 * Do 22.09 ten blok nie miał ANI JEDNEJ reguły — znacznik i zdanie leciały jako goły
 * tekst nad zdjęciem, bez tła i bez pastylki. Stąd „mega różnica” wobec projektu:
 * znacznik istniał w znaczniku HTML, ale nie istniał dla oka.
 */
.mojaof__belka {
  display: flex;
  align-items: center;
  gap: var(--v-s-3); /* makieta */
  flex-wrap: wrap;
  padding: 12px 16px; /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-secondary-soft);
}

.mojaof__belka-znacznik {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 24px; /* makieta */
  padding: 0 10px; /* makieta */
  border-radius: 7px; /* makieta */
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 700 11px/1 var(--v-font-body); /* makieta */
  letter-spacing: var(--v-ls-label);
  text-transform: uppercase;
}

.mojaof__belka-tresc {
  flex: 1;
  min-width: 220px; /* makieta */
  margin: 0;
  font: 400 13px/1.45 var(--v-font-body); /* makieta */
  color: var(--v-secondary-text);
}

/* Pastylka rezerwacji: PEŁNA ochra z granatowym tekstem — stan czasowy, który zaraz
   minie (rozstrzygnięcie ze styleguide'u, tabela rozjazdów w CLAUDE.md). */
.mojaof__rezerwacja {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 24px; /* makieta */
  padding: 0 10px; /* makieta */
  border-radius: 7px; /* makieta */
  background: var(--v-secondary);
  color: var(--v-primary);
  font: 700 12px/1.3 var(--v-font-body);
}

.mojaof__liczby {
  margin: 0;
  font: 400 12.5px/1.45 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

/* Formularz niesie jedną akcję i nie ma własnego wyglądu — ma tylko nie psuć rytmu
   kolumny, w której stoi. */
.mojaof__form { display: flex; flex-direction: column; }

/* „Czego tu nie ma”: szary blok na końcu karty. W makiecie mówi, czego na własnej
   ofercie nie zrobisz; u nas dokłada to, czego serwis jeszcze nie ma. */
.mojaof__brak {
  display: flex;
  flex-direction: column;
  gap: 6px; /* makieta */
  padding: 12px 14px; /* makieta */
  border-radius: 12px; /* makieta */
  background: var(--v-n-50);
}

.mojaof__brak-tytul { font: 700 13px/1.3 var(--v-font-body); color: var(--v-primary); }

.mojaof__brak p {
  margin: 0;
  font: 400 12.5px/1.5 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

.mojaof__uklad {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); /* makieta */
  gap: 32px; /* makieta */
  align-items: start;
}

.mojaof__lewa {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-6); /* makieta: 24 */
  min-width: 0;
}

/* Blok treści: nagłówek sekcji i to, co pod nim. W makiecie każda sekcja lewej
   kolumny („Opis”, „Jak idzie ta oferta”) ma własny rytm 10 px. */
.mojaof__blok {
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
  min-width: 0;
}

.mojaof__naglowek {
  margin: 0;
  font: 600 18px/1.3 var(--v-font-display); /* makieta */
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

/* Opis zachowuje odstępy między liniami — wpisany akapitami ma się czytać akapitami,
   dokładnie jak na stronie oferty. */
.mojaof__opis {
  margin: 0;
  font: 400 15px/1.6 var(--v-font-body); /* makieta */
  color: var(--v-n-800);
  white-space: pre-line;
}

.mojaof__opis--brak { color: var(--v-n-500); }

/* Tabela specyfikacji z handoffu 22: wiersz = podpis po lewej, wartość po prawej,
   kreska pod każdym wierszem oprócz ostatniego. */
.mojaof__specyfikacja {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mojaof__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--v-s-4);
  padding: 9px 0; /* makieta */
  border-bottom: 1px solid var(--v-n-100);
}

.mojaof__spec:last-child { border-bottom: 0; }

.mojaof__spec-k {
  flex-shrink: 0;
  font: 400 13px/1.4 var(--v-font-body);
  color: var(--v-n-600);
}

.mojaof__spec-v {
  font: 600 13.5px/1.45 var(--v-font-body); /* makieta */
  color: var(--v-primary);
  text-align: right;
}

/* Belka szkicu: ochra miękka, bo to stan do dokończenia, nie ostrzeżenie. */
.mojaof__szkic {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-1);
  padding: 14px 18px; /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-warning-soft); /* makieta: #FBEEDC */
  color: var(--v-warning-text); /* makieta: #7A4B0C */
}

.mojaof__szkic-tytul { font: 700 14px/1.3 var(--v-font-body); }
.mojaof__szkic-tresc { font: 400 13px/1.5 var(--v-font-body); }

/* Galeria wypełnia lewą kolumnę — handoff 22 daje jej całe 2fr, a nie wycinek.
   Szerokość należy do układu, wygląd zostaje po stronie komponentu. */
.mojaof__galeria { width: 100%; }

.mojaof__glowka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v-s-2);
}

.mojaof__cena {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 32px; /* makieta */
  letter-spacing: var(--v-ls-display); /* makieta */
  color: var(--v-primary);
}

.mojaof__zdanie {
  font: 400 13px/1.55 var(--v-font-body);
  color: var(--v-n-600);
}

/* Zdanie zamykające sekcję statystyk. Makieta ogranicza je do 560 px, ale w naszej
   kolumnie (773 px) mieści się w JEDNEJ linii i tak wygląda lepiej — łamanie w połowie
   zdania przy wolnym miejscu obok wygląda jak usterka (uwaga Huberta 22.09). */
.mojaof__nota {
  font: 400 13px/1.6 var(--v-font-body);
  color: var(--v-n-500);
}

.mojaof__statystyki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--v-s-4);
}

.mojaof__kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mojaof__kpi-k {
  font: 700 11.5px/1.2 var(--v-font-body);
  text-transform: uppercase;
  letter-spacing: var(--v-ls-label);
  color: var(--v-n-500);
}

.mojaof__kpi-v {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--v-primary);
}

.mojaof__akcje {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4); /* makieta: 16 między sekcjami karty */
  position: sticky;
  top: 96px;
}

/* Głowka karty: to, co widzi kupująca. Rytm 6 px jak w makiecie. */
.mojaof__karta-glowka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px; /* makieta */
}

.mojaof__karta-tytul {
  margin: 0;
  font: 600 22px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

.mojaof__marka { font: 400 13px/1.4 var(--v-font-body); color: var(--v-n-600); }

.mojaof__stan { margin-top: var(--v-s-1); }

/* Grupa akcji ma własny, ciaśniejszy rytm niż odstępy między sekcjami karty. */
.mojaof__grupa {
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
}

/* Przekładka między sekcjami karty — w makiecie zwykła kreska 1 px. */
.mojaof__linia {
  display: block;
  height: 1px;
  background: var(--v-n-100);
}

/* „Propozycje cen” to w makiecie najmocniej narysowany przycisk po promowaniu:
   ciemna obwódka i grubszy napis, bo po drugiej stronie ktoś czeka na odpowiedź. */
.mojaof__propozycje {
  border-color: var(--v-primary);
  font-weight: 700;
}

.mojaof__akcje-tytul {
  font: 700 12px/1.2 var(--v-font-body);
  text-transform: uppercase;
  letter-spacing: var(--v-ls-eyebrow);
  color: var(--v-n-500);
}

.mojaof__pod-akcja {
  font: 400 12.5px/1.5 var(--v-font-body);
  color: var(--v-n-600);
}

/* ---------- telefon ---------- */

@media (max-width: 760px) {
  .konto__siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-s-4) var(--v-s-3);
  }

  /* Tabela z desktopu zwija się do dwóch kolumn: rzecz i cena w jednej linii,
     statystyki i akcje pod spodem — tak układa to makieta mobile.
     Nadpisanie `grid-template-columns` (nie `display`) należy do tego arkusza, bo to
     układ ekranu, a nie wygląd wiersza; arkusz widoku wczytuje się po arkuszu partii,
     więc wygrywa bez podbijania specyficzności. */
  .mojeof__wiersz {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    row-gap: var(--v-s-3);
  }

  .mojeof__stat,
  .mojeof__akcje { grid-column: 1 / -1; }

  /* Nagłówek tabeli opisuje kolumny, których po zwinięciu nie ma — zostaje sam szum.
     To jedyne miejsce, w którym ten arkusz rusza `display` komponentu, i robi to
     świadomie: chowa cały wiersz, nie zmienia jego układu wewnętrznego. */
  .mojeof__wiersz--naglowek { display: none; }

  .mojaof__uklad {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v-s-5);
  }

  .mojaof__akcje {
    position: static;
    top: auto;
  }
}

/* ==========================================================================
   Konto i ustawienia (partia „profil i ustawienia konta”)
   Źródło: Prototyp Mobile, ekrany „Profil”, „Ustawienia”, „Prywatność i zgody”,
   „Urlop”, „Status konta”; Prototyp Desktop, ekrany „Profil”, „Profil sprzedającej”,
   „Ustawienia”, „Status konta”.
   Wygląd wierszy listy, kart radio, pól i pastylek mieszka w arkuszach partii —
   tutaj jest wyłącznie układ ekranu.
   ========================================================================== */

/* ---------- /konto — własne konto ---------- */

.mojek__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-4);
}

.mojek__tytul {
  margin: 0;
  font: 600 var(--v-t-h2) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

.mojek__glowa { padding: var(--v-s-4); }
.mojek__kafel { align-self: flex-start; min-width: 200px; }
.mojek__wyjscie { margin-top: var(--v-s-2); }

/* ---------- /profil/{user} — profil publiczny ---------- */

.profilp {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
}

.profilp__wroc {
  align-self: flex-start;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: none;
}

.profilp__wroc:hover { color: var(--v-primary); }

.profilp__glowa {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-6);
  padding: var(--v-s-6);
}

/* Glowa: awatar, tresc i dwie akcje w jednym rzedzie — akcje dociagniete do prawej. */
.profilp__osoba {
  display: flex;
  align-items: flex-start;
  gap: var(--v-s-5);
}

.profilp__osoba-tresc {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  min-width: 0;
  flex: 1;
}

.profilp__osoba-imie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v-s-3);
}

.profilp__tytul {
  margin: 0;
  font: 600 var(--v-t-h1) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

/* Linijka zaufania: ocena, transakcje i miasto jednym ciagiem, jak w makiecie. */
.profilp__zaufanie {
  font: 400 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-700);
}

.profilp__akcje {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  flex-shrink: 0;
}

/* Dwie kolumny pod glowa: dane i to, co potwierdzilismy. */
.profilp__kolumny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--v-s-5);
}

@media (max-width: 860px) {
  .profilp__kolumny { grid-template-columns: minmax(0, 1fr); }
  .profilp__osoba { flex-wrap: wrap; }
  .profilp__akcje { width: 100%; }
}

.profilp__blok {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  background: var(--v-n-50);
  border-radius: var(--v-r-card);
  padding: var(--v-s-5);
}

.profilp__blok-tytul {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
}

.profilp__blok-nota,
.profilp__blok-pusto {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.profilp__fakt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v-s-4);
  font: 400 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  border-top: 1px solid var(--v-n-100);
  padding-top: var(--v-s-3);
}

.profilp__fakt:first-of-type { border-top: none; padding-top: 0; }
.profilp__fakt strong { color: var(--v-primary); font-weight: 600; }

/* Ptaszek potwierdzenia: zielony, bo mowi „sprawdzone", a nie „uwaga". */
.profilp__ptaszek {
  display: flex;
  align-items: flex-start;
  gap: var(--v-s-3);
}

.profilp__ptaszek-znak {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--v-success-soft);
  color: var(--v-success-text);
  font: 700 12px/1 var(--v-font-body);
}

.profilp__ptaszek-tresc { display: flex; flex-direction: column; gap: 2px; }

.profilp__ptaszek-tytul {
  font: 700 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.profilp__ptaszek-opis {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.profilp__omnie { gap: var(--v-s-2); }

.profilp__bio {
  margin: 0;
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
  white-space: pre-line;
}

.profilp__zwrot {
  margin: 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

/* ---------- Opinie na profilu ---------- */

.profilp__opinie {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
}

.profilp__ocena {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--v-s-6);
  padding: var(--v-s-6);
}

@media (max-width: 860px) {
  .profilp__ocena { grid-template-columns: minmax(0, 1fr); }
}

.profilp__srednia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.profilp__srednia-liczba {
  font: 600 var(--v-t-display) var(--v-font-display);
  letter-spacing: var(--v-ls-display);
  color: var(--v-primary);
}

.profilp__srednia-gwiazdki {
  font-size: 13px;
  color: var(--v-secondary);
  letter-spacing: 1px;
}

.profilp__srednia-ile {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.profilp__slupki {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profilp__slupek {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--v-s-3);
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.profilp__slupek-pas {
  height: 8px;
  border-radius: 4px;
  background: var(--v-n-100);
  overflow: hidden;
}

.profilp__slupek-wypelnienie {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--v-secondary);
}

.profilp__slupek-ile { text-align: right; }

.profilp__ocena-nota {
  margin: 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
  background: var(--v-n-50);
  border-radius: var(--v-r-input);
  padding: var(--v-s-4);
}

.profilp__lista {
  display: flex;
  flex-direction: column;
}

.profilp__opinia {
  display: flex;
  gap: var(--v-s-4);
  padding: var(--v-s-5) 0;
  border-top: 1px solid var(--v-n-100);
}

.profilp__opinia:first-child { border-top: none; }

.profilp__opinia-tresc {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  min-width: 0;
  flex: 1;
}

.profilp__opinia-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-4);
  flex-wrap: wrap;
}

.profilp__opinia-kto {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  font: 400 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.profilp__opinia-gwiazdki {
  font-size: 12px;
  color: var(--v-secondary);
  letter-spacing: 1px;
}

.profilp__opinia-kiedy {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.profilp__opinia-tekst {
  margin: 0;
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.profilp__opinia-rzecz {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.profilp__oferty {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

.profilp__naglowek {
  margin: 0;
  font: 600 var(--v-t-h3) var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

/* Nagłówek sekcji ofert z planszy „3a Profil 8 ofert” (handoff v73): „Oferty” 24 px z liczbą,
   po prawej sortowanie. */
.profilp__oferty-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-4);
}

.profilp__naglowek--oferty {
  display: flex;
  align-items: baseline;
  gap: 10px; /* makieta */
  font-size: 24px; /* makieta */
  letter-spacing: -.02em; /* makieta */
}

.profilp__ile {
  font: 700 15px/1 var(--v-font-body); /* makieta */
  letter-spacing: normal;
  color: var(--v-n-600);
}

/* Sortowanie: `details` z odnośnikami (bez JS). Wygląd przycisku siedzi na `span`
   w `summary` — `summary` z własnym `display` przestaje chować zawartość. */
.profilp__sort { position: relative; }
.profilp__sort summary { list-style: none; cursor: pointer; }
.profilp__sort summary::-webkit-details-marker { display: none; }

.profilp__sort-guzik {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  height: 40px; /* makieta */
  padding: 0 14px; /* makieta */
  border: 1px solid var(--v-n-200);
  border-radius: 12px; /* makieta */
  background: var(--v-n-0);
  font: 700 13.5px/1 var(--v-font-body); /* makieta */
  color: var(--v-primary);
}

.profilp__sort-strzalka { font-size: 10px; color: var(--v-n-600); } /* makieta */

.profilp__sort-lista {
  position: absolute;
  top: 44px; /* makieta */
  right: 0;
  z-index: var(--v-z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px; /* makieta */
  border-radius: 12px; /* makieta */
  background: var(--v-n-0);
  box-shadow: var(--v-shadow-sheet);
}

.profilp__sort-lista a {
  padding: 10px var(--v-s-3); /* makieta */
  border-radius: var(--v-r-chip);
  font-weight: 600;
  color: var(--v-primary);
  text-decoration: none;
}

.profilp__sort-lista a:hover,
.profilp__sort-lista a[aria-current] { background: var(--v-n-50); }

/* Kafelek 3a: cztery w rzędzie, odstęp 20 (makieta); węższy ekran trzy, telefon dwa. */
.profilp__siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v-s-5);
}

@media (max-width: 1024px) {
  .profilp__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .profilp__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-s-3); }
  .profilp__naglowek--oferty { font-size: 21px; } /* makieta */
}

/* „Pokaż więcej” pod siatką ofert profilu i pod listą „Moje oferty” (audyt 08.10, W2) —
   jak `.kat__wiecej` w katalogu. */
.profilp__wiecej,
.mojeof__wiecej {
  display: flex;
  justify-content: center;
  margin-top: var(--v-s-8);
}

/* ---------- /ustawienia i panele ---------- */

.ustaw {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
}

/* 10.10 (Hubert: „wszystko musi być spójne”): pełna szerokość jak pozostałe zakładki konta (`.konto`). */
.ustaw--panel { max-width: none; }

.ustaw__wroc {
  align-self: flex-start;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: none;
}

.ustaw__wroc:hover { color: var(--v-primary); }

.ustaw__tytul {
  margin: 0;
  font: 600 var(--v-t-h2) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

.ustaw__podtytul {
  margin: 0;
  font: 600 var(--v-t-h3) var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.ustaw__lead {
  margin: 0;
  /* 920, nie akapitowe 720: w panelu ustawień jest 884 px miejsca, a zdanie
     ucięte na 720 łamie się na dwie linie przy pustym pasie obok (uwaga Huberta
     25.09). Górna granica zostaje, żeby na szerokim ekranie linia nie urosła
     do długości, której oko nie wraca. */
  max-width: min(100%, 920px);
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-600);
}

.ustaw__grupa {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

/* Nadtytuł grupy: wersaliki 11 px n-500, wcięcie jak w makiecie (padding 0 4px). */
.ustaw__grupaTytul {
  margin: 0;
  padding: 0 var(--v-s-1);
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
}

/* Nagłówek sekcji W PANELU. Makieta stawia tu <h2> 24 px Outfit 600 — ten sam krój
   co tytuł panelu, bo w prototypie „Nadawanie paczek” i „Twój adres” są równorzędne.
   Wersaliki 11 px zostają WYŁĄCZNIE w kolumnie nawigacji (`ustaw__grupaTytul`). */
.ustaw__sekcjaTytul {
  margin: 0;
  font: 600 var(--v-t-h2) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

/* Podpis grupy WEWNĄTRZ karty: 15/700, jak `Status PEP` i `Kopia twoich danych`
   w prototypie. Nie wersaliki — te w makiecie nie występują nigdzie w panelu. */
.ustaw__blokTytul {
  margin: 0;
  font: 700 15px/1.3 var(--v-font-body);
  color: var(--v-primary);
}

.ustaw__form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-items: stretch;
}

.ustaw__form .v-btn { align-self: flex-start; }

.ustaw__tozsamosc {
  display: flex;
  align-items: center;
  gap: var(--v-s-4);
}

.ustaw__tozsamoscNota {
  margin: 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.ustaw__objasnienie {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.ustaw__lista {
  margin: 0;
  padding-left: var(--v-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.ustaw__akapit {
  margin: 0;
  /* 920, nie akapitowe 720: w panelu ustawień jest 884 px miejsca, a zdanie
     ucięte na 720 łamie się na dwie linie przy pustym pasie obok (uwaga Huberta
     25.09). Górna granica zostaje, żeby na szerokim ekranie linia nie urosła
     do długości, której oko nie wraca. */
  max-width: min(100%, 920px);
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.ustaw__karty {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

.ustaw__stopka {
  margin: 0;
  text-align: center;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* ---------- ekran „Profil” (własne konto) ---------- */
/* Źródło: Prototyp Desktop, ekran „Profil”. Głowa, rząd kafli, siatka aktywnych ofert. */

.mojek { display: flex; flex-direction: column; gap: var(--v-s-6); }

.mojek__glowa {
  display: flex;
  gap: var(--v-s-5);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.mojek__osoba { display: flex; gap: var(--v-s-4); align-items: center; min-width: 0; }
.mojek__osoba-tresc { display: flex; flex-direction: column; gap: var(--v-s-1); min-width: 0; }
.mojek__osoba-imie { display: flex; gap: var(--v-s-2); align-items: center; flex-wrap: wrap; }

.mojek__tytul {
  margin: 0;
  /* Imię jednym długim słowem (39 znaków) wypychało stronę o 11 px przy 390 — łamiemy w słowie. */
  min-width: 0;
  overflow-wrap: anywhere;
  font: 600 28px/1.15 var(--v-font-display);
  letter-spacing: -.025em; /* makieta */
  color: var(--v-n-800);
}

.mojek__osoba-meta { font-size: 13px; color: var(--v-n-600); }

.mojek__glowa-akcje { display: flex; gap: var(--v-s-2); flex-wrap: wrap; }

/* DWA KAFLE OBOK SIEBIE — tak rysuje je makieta na telefonie (`1fr 1fr`, przerwa 10)
   i tak samo na szerokim ekranie. Wczesniej `auto-fit` przy 240 px zwijal je na
   telefonie w kolumne i para zabierala caly pierwszy ekran. */
.mojek__kafle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; /* makieta */
}

@media (min-width: 760px) {
  .mojek__kafle { gap: var(--v-s-5); }
}

/* Trzeci kafel niesie hasło, nie liczbę — w makiecie ma mniejsze pismo, żeby
   „0 zł prowizji" mieściło się w jednej linijce obok liczb 30 px. */
.mojek__kafel--haslo .v-kpi__liczba { font-size: 22px; line-height: 1.1; } /* makieta */

.mojek__oferty { display: flex; flex-direction: column; gap: var(--v-s-3); }

.mojek__oferty-gora { display: flex; justify-content: space-between; align-items: baseline; gap: var(--v-s-3); }

.mojek__oferty-gora h2 {
  margin: 0;
  font: 600 18px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em; /* makieta */
  color: var(--v-n-800);
}

.mojek__oferty-wszystkie { font: 600 13px/1 var(--v-font-body); color: var(--v-n-800); }

.mojek__oferty-siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-s-3);
}

.mojek__wyjscie { display: flex; }

/* Lista skrótów i wylogowanie: na web tych pozycji NIE MA (niesie je menu konta
   w nagłówku), na telefonie zostają, bo tam nagłówka z menu nie ma.

   Podnoszona specyficzność (`.v-lista.mojek__skroty`), bo komponent listy ustawia
   `display: flex` selektorem o dwóch klasach. To jeden z dwóch wyjątków od reguły
   „arkusz widoku nie rusza `display` komponentu": tu widok nie zmienia UKŁADU
   komponentu, tylko decyduje, czy ten komponent na tym ekranie w ogóle jest. */
.v-lista.mojek__skroty,
.mojek__wyjscie.mojek__skroty { display: none; }

@media (max-width: 760px) {
  .v-lista.mojek__skroty,
  .mojek__wyjscie.mojek__skroty { display: flex; }
}

@media (min-width: 761px) {
  .mojek__oferty-siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v-s-5); }
}

/* Moje oferty: prawa strona nagłówka. Zdanie o rezerwacjach nosi teraz x-tabs. */
.mojeof__glowka-akcje { display: flex; gap: var(--v-s-2); flex-wrap: wrap; }

/* ---------- Promowanie oferty (Prototyp Desktop, handoff 23) ----------
   Jedna wąska kolumna 720 px wyśrodkowana, odstęp 20 px. Cały ekran to jeden ciąg
   decyzji: co promujesz → który wariant → czym płacisz → przycisk. */

/* SZEROKOŚĆ JAK NA POZOSTAŁYCH EKRANACH (prośba Huberta 22.09) — makieta daje tu
   wąską kolumnę 720 px wyśrodkowaną, ale wtedy ten jeden ekran odstaje od „Moich ofert"
   i „Mojej oferty", które idą na pełny kontener. Świadome odejście od projektu.
   Same warianty zostają czytelne, bo opis stoi pod nazwą, a nie obok niej. */
.promuj {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5); /* makieta */
}

.promuj__wstecz { align-self: flex-start; }

.promuj__glowka { display: flex; flex-direction: column; gap: 6px; } /* makieta */

.promuj__glowka h1 {
  margin: 0;
  font: 600 var(--v-t-h1) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

.promuj__glowka p {
  margin: 0;
  font: 400 14px/1.5 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

/* Karta promowanej rzeczy: miniatura 64 px i dwie linijki obok niej. */
.v-card.promuj__rzecz {
  display: flex;
  align-items: center;
  gap: 14px; /* makieta */
  padding: var(--v-s-4); /* makieta */
  flex-wrap: wrap;
}

.promuj__rzecz-foto {
  width: 64px; /* makieta */
  height: 64px; /* makieta */
  flex: none;
  border-radius: var(--v-r-input); /* makieta: 12 */
  overflow: hidden;
  background: var(--v-n-200);
}

.promuj__rzecz-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.promuj__rzecz-tresc {
  display: flex;
  flex-direction: column;
  gap: 3px; /* makieta */
  min-width: 0;
  flex: 1;
}

.promuj__rzecz-tytul { font: 700 15px/1.35 var(--v-font-body); color: var(--v-primary); } /* makieta */
.promuj__rzecz-meta { font: 400 13px/1.4 var(--v-font-body); color: var(--v-n-600); } /* makieta */

.promuj__form { display: flex; flex-direction: column; gap: var(--v-s-5); }
.promuj__opcje { display: flex; flex-direction: column; gap: 10px; } /* makieta */

/* Wariant promowania: karta 14 px promienia z wyściółką 16 — większa niż domyślna
   karta radio, bo niesie trzy rzeczy naraz (nazwę, cenę i skutek). */
.v-radio-card.promuj__opcja {
  border-radius: 14px; /* makieta */
  padding: var(--v-s-4); /* makieta */
}

/* Uwaga o uczciwości: ochrowy blok, nie szary tekst — to obietnica, nie przypis. */
.promuj__uczciwie {
  margin: 0;
  padding: 12px 14px; /* makieta */
  border-radius: var(--v-r-input); /* makieta: 12 */
  background: var(--v-warning-soft); /* makieta: #FBEEDC */
  color: var(--v-warning-text); /* makieta: #7A4B0C */
  font: 600 13px/1.55 var(--v-font-body); /* makieta */
}

.promuj__platnosc { display: flex; flex-direction: column; gap: 10px; } /* makieta */

.promuj__etykieta {
  font: 700 12px/1 var(--v-font-body); /* makieta */
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
}

/* W miejscu wyboru płatności z makiety: zdanie o fazie testów. Ochra miękka, bo
   dotyczy pieniędzy — a dokładnie tego, że dziś ich nie bierzemy. */
.promuj__faza {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--v-s-4);
  border-radius: var(--v-r-card);
  background: var(--v-secondary-soft);
  color: var(--v-secondary-text);
  font: 400 13px/1.55 var(--v-font-body);
}

.promuj__faza p { margin: 0; }
.promuj__faza-tytul { font-weight: 700; }

.promuj__wlacz { align-self: flex-start; }

/* Promowanie z planu firmowego (etap A, makieta v78 „Pro Moje oferty”): „w planie” zieloną
   barwą (płatne zostaje ochrowe), wykorzystana pula wyszarzona (makieta: przezroczystość .55). */
.promuj .v-radio-card:has([data-zrodlo="plan"]) .v-radio-card__dopisek { color: var(--v-success-text); }
.promuj .v-radio-card:has(.v-radio-card__input:disabled) { opacity: .55; cursor: not-allowed; }

@media (max-width: 560px) {
  .promuj__wlacz { align-self: stretch; }
}

/* ---------- Pakiety promowania (decyzja Huberta 02.10) ----------
   Makiety brak — wygląd z ekranów promowania: te same karty, nadtytuły i ochra przy cenie. */

/* Skrót na ekranie promowania: jeden wiersz w karcie, całość klikalna. */
.v-card.promuj__pakiety {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  padding: 14px var(--v-s-4);
  text-decoration: none;
  color: inherit;
}

.promuj__pakiety-tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.promuj__pakiety-tytul { font: 700 14px/1.35 var(--v-font-body); color: var(--v-primary); }
.promuj__pakiety-stan { font: 400 13px/1.45 var(--v-font-body); color: var(--v-n-600); }
.promuj__pakiety-znak { font: 400 20px/1 var(--v-font-body); color: var(--v-n-400); }
a.v-card.promuj__pakiety:hover { border-color: var(--v-n-300); }

.pakiety__sekcja { display: flex; flex-direction: column; gap: 10px; } /* jak .promuj__platnosc */

.v-card.pakiety__karta {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  padding: var(--v-s-4);
  border-radius: 14px; /* jak karta wariantu promowania */
}

.pakiety__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-3);
  flex-wrap: wrap;
}

.pakiety__nazwa { font: 700 15px/1.35 var(--v-font-body); color: var(--v-primary); }
.pakiety__cena { font: 600 15px/1.35 var(--v-font-display); color: var(--v-secondary-text); }

.pakiety__zostalo {
  font: 600 var(--v-t-h2) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

.pakiety__pas {
  height: 6px;
  border-radius: 3px;
  background: var(--v-n-100);
  overflow: hidden;
}

.pakiety__wypelnienie { display: block; height: 100%; background: var(--v-secondary-text); }

.pakiety__meta { font: 400 13px/1.5 var(--v-font-body); color: var(--v-n-600); }

.pakiety__uzycia { margin-top: var(--v-s-2); border-top: 1px solid var(--v-n-100); }
.pakiety__uzycia .portfel__wiersz { padding-left: 0; padding-right: 0; }
.pakiety__uzycia a { color: var(--v-primary); }

.pakiety__kup { display: flex; margin-top: var(--v-s-1); }

@media (max-width: 560px) {
  .pakiety__kup .v-btn { flex: 1; }
}


/* ---------- Wyniki promowania (handoff 52) ----------
   Makieta web tego ekranu nie ma — układ i liczby z ekranu Androida „Wyniki promowania”,
   wygląd z ekranu „Promowanie oferty” obok (te same karty, szerokość i odstępy). */

.promwyn__zostalo { font: 700 12.5px/1.4 var(--v-font-body); color: var(--v-n-600); } /* makieta Android */

.promwyn__pasek {
  display: flex;
  height: 6px; /* makieta Android */
  margin-top: 3px;
  border-radius: 3px; /* makieta Android */
  background: var(--v-n-100);
  overflow: hidden;
  max-width: 420px;
}

.promwyn__pasek span { background: var(--v-primary); }

.v-card.promwyn__karta {
  display: flex;
  flex-direction: column;
  gap: 14px; /* makieta Android */
  padding: var(--v-s-4);
}

.promwyn__tytul { margin: 0; font: 800 15px/1.3 var(--v-font-body); color: var(--v-primary); } /* makieta Android */

.promwyn__kafle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; /* makieta Android */
}

.promwyn__kafel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px; /* makieta Android */
  border-radius: 14px; /* makieta Android */
  background: var(--v-n-50);
}

.promwyn__kafel-podpis { font: 700 11.5px/1.3 var(--v-font-body); color: var(--v-n-600); } /* makieta Android */
.promwyn__kafel-liczba { font: 600 26px/1.2 var(--v-font-display); color: var(--v-primary); } /* makieta Android */

.promwyn__wiersz {
  display: flex;
  justify-content: space-between;
  gap: var(--v-s-3);
  font: 400 13.5px/1.4 var(--v-font-body); /* makieta Android */
  color: var(--v-n-600);
}

.promwyn__wiersz b { color: var(--v-primary); }
.promwyn__wiersz b.promwyn__plus { color: var(--v-success); }

.promwyn__nota { margin: 0; font: 400 12px/1.5 var(--v-font-body); color: var(--v-n-600); } /* makieta Android */

/* Zakończenie wcześniej: ochrowy blok z dwoma przyciskami (makieta Android: `--warm`). */
.promwyn__pytanie {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px; /* makieta Android */
  border-radius: 16px; /* makieta Android */
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
}

.promwyn__pytanie p { margin: 0; font: 400 13.5px/1.5 var(--v-font-body); } /* makieta Android */

.promwyn__pytanie-akcje {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; /* makieta Android */
  max-width: 420px;
}

.promwyn__pytanie-akcje form { margin: 0; }

.promwyn__pytanie .v-btn.promwyn__zostaw {
  width: 100%;
  height: 44px; /* makieta Android */
  border-color: var(--v-warning-text);
  color: var(--v-warning-text);
  background: transparent;
}

.promwyn__pytanie .v-btn.promwyn__zakoncz-tak {
  height: 44px; /* makieta Android */
  background: var(--v-warning-text);
  color: var(--v-warning-soft);
}

.v-btn.promwyn__zakoncz { align-self: flex-start; color: var(--v-error); font-weight: 700; }

/* ---------- Promowanie kupione (Prototyp Desktop, handoff 23) ----------
   Jedna karta na środku ekranu: potwierdzenie, termin, co z tego wynika, dwa wyjścia. */

.v-card.promogot {
  max-width: 560px; /* makieta */
  margin: var(--v-s-10) auto; /* makieta: 40 */
  padding: var(--v-s-10); /* makieta */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v-s-4); /* makieta */
}

/* Zielone kółko z ptaszkiem — ten sam ton co komunikaty o powodzeniu. */
.promogot__znak {
  width: 64px; /* makieta */
  height: 64px; /* makieta */
  border-radius: 50%;
  background: var(--v-success-soft);
  color: var(--v-success-text);
  display: grid;
  place-items: center;
  font-size: 30px; /* makieta */
  line-height: 1;
}

.promogot__tytul {
  margin: 0;
  font: 600 var(--v-t-h1) var(--v-font-display); /* makieta: 28 */
  letter-spacing: var(--v-ls-display);
  color: var(--v-primary);
}

.promogot__do { font: 700 15px/1.4 var(--v-font-body); color: var(--v-primary); } /* makieta */
.promogot__zaplacone { font: 400 13.5px/1.4 var(--v-font-body); color: var(--v-n-600); } /* makieta */

.promogot__gdzie {
  margin: 0;
  font: 400 14px/1.6 var(--v-font-body); /* makieta */
  color: var(--v-n-700);
}

/* Wyjscia na PELNA SZEROKOSC i jedno pod drugim (makieta: `width: 100%`, 56 i 52 px).
   Dwa przyciski obok siebie zmiescily sie tylko dlatego, ze napisy sa krotkie —
   przy dluzszym tekscie rzad by sie rozjechal. */
.promogot__akcje { display: flex; flex-direction: column; gap: 10px; } /* makieta */
.promogot__akcje .v-btn { width: 100%; } /* makieta */
.promogot__akcje .v-btn:first-child { height: 56px; } /* makieta */
.promogot__akcje .v-btn:last-child { height: 52px; } /* makieta */


/* ---------- Mój portfel (Prototyp, ekran „Mój portfel") ---------- */

.portfel__uklad {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: var(--v-s-8);
  align-items: start;
}

.portfel__kolumna { display: flex; flex-direction: column; gap: var(--v-s-4); min-width: 0; }
.portfel__bok { display: flex; flex-direction: column; gap: var(--v-s-4); min-width: 0; position: sticky; top: 100px; /* makieta */ }

.portfel__sekcja { display: flex; flex-direction: column; gap: var(--v-s-3); }

.portfel__sekcja h2 {
  margin: 0;
  font: 600 16px/1.3 var(--v-font-display);
  color: var(--v-primary);
}

/* Saldo: jedna liczba, którą widać z drugiego końca pokoju. */
.portfel__saldo { display: flex; flex-direction: column; gap: var(--v-s-1); }

.portfel__saldo-etykieta {
  font: 700 var(--v-t-label) var(--v-font-body);
  letter-spacing: var(--v-ls-label);
  text-transform: uppercase;
  color: var(--v-n-500);
}

.portfel__saldo-kwota {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: var(--v-ls-display);
  color: var(--v-primary);
}

.portfel__saldo-nota,
.portfel__nota {
  margin: 0;
  font: 400 12.5px/1.55 var(--v-font-body);
  color: var(--v-n-600);
}

/* Kroki podłączania konta Stripe w x-hint (10.10): numerowana lista z odstępem 6 px. */
.portfel__kroki { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--v-n-700); }

.portfel__wpisy { display: flex; flex-direction: column; }

.portfel__wpis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--v-s-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--v-n-100);
}

.portfel__wpis:last-child { border-bottom: 0; }

.portfel__wpis-tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portfel__wpis-opis { font: 600 13.5px/1.4 var(--v-font-body); color: var(--v-primary); }
.portfel__wpis-meta { font: 400 12px/1.4 var(--v-font-body); color: var(--v-n-500); }

.portfel__wpis-kwota {
  flex-shrink: 0;
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--v-success-text);
}

.portfel__wpis-kwota--minus { color: var(--v-n-600); }

.portfel__form { display: flex; flex-direction: column; gap: var(--v-s-3); }

.portfel__skad {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--v-s-4);
  border-radius: var(--v-r-card);
  background: var(--v-n-50);
  font: 400 12.5px/1.55 var(--v-font-body);
  color: var(--v-n-600);
}

.portfel__skad p { margin: 0; }
.portfel__skad-tytul { font: 700 13px/1.3 var(--v-font-body); color: var(--v-primary); }

@media (max-width: 1024px) {
  .portfel__uklad { grid-template-columns: minmax(0, 1fr); gap: var(--v-s-5); }
  .portfel__bok { position: static; }
}


/* Zgłoszenie i blokada na profilu: dwie różne rzeczy, więc obok siebie, nie jedna
   pod drugą — inaczej wyglądałyby jak dwa kroki tej samej akcji. */
.profilp__obrona {
  display: flex;
  gap: var(--v-s-3);
  flex-wrap: wrap;
  align-items: flex-start;
}


/* ---------- ekran „Bezpieczenstwo” ---------- */
/* Zrodlo: „Vistitio Zabezpieczenia.dc.html”, grupa „Konto”. Cztery formularze jeden pod
   drugim; kazdy dostaje wlasny odstep, zeby nie wygladaly na cztery kroki tej samej
   operacji — to sa cztery osobne decyzje. */

.bezp__wstrzymane { margin: 0; }

.bezp__form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-items: stretch;
  margin-top: var(--v-s-2);
}

.bezp__form .v-btn { align-self: flex-start; }

/* Prosba o kod stoi NAD formularzem i w jednej linii z objasnieniem: to jest krok zero,
   nie pole formularza. */
.bezp__kod {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  flex-wrap: wrap;
  margin-top: var(--v-s-2);
}

.bezp__kodNota {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* Zamkniecie konta siedzi w <details>: rozwiniete na stale zapraszaloby do kliknięcia
   rzeczy, ktorej sie nie cofa. Dziala bez JavaScriptu. */
.bezp__koniec > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--v-s-2);
  margin-top: var(--v-s-2);
}

.bezp__koniec > summary::-webkit-details-marker { display: none; }

.bezp__koniec > summary > span {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-error-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bezp__koniec > summary:focus-visible > span { outline: 2px solid var(--v-primary); outline-offset: 3px; }


/* ---------- licznik DAC7 w portfelu ---------- */
/* Zrodlo: Prototyp Desktop i Mobile, karta „Licznik DAC7 · {rok}”. Dwa paski 6 px:
   transakcje w ochrze, kwota w granacie — dwa progi, dwa kolory, zeby dalo sie je
   rozroznic jednym spojrzeniem. */

.portfel__dac7 {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

.portfel__dac7-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-3);
}

.portfel__dac7-gora h2 { margin: 0; }

.portfel__dac7-miara {
  display: flex;
  flex-direction: column;
  gap: 6px; /* makieta */
}

.portfel__dac7-linijka {
  display: flex;
  justify-content: space-between;
  font: 400 13px/1.4 var(--v-font-body);
  color: var(--v-n-600);
}

.portfel__dac7-linijka .v-num { font-weight: 600; color: var(--v-primary); }

.portfel__dac7-pas {
  display: block;
  height: 6px; /* makieta */
  border-radius: 3px; /* makieta */
  background: var(--v-n-100);
  overflow: hidden;
}

.portfel__dac7-wypelnienie {
  display: block;
  height: 100%;
  border-radius: 3px; /* makieta */
}

.portfel__dac7-wypelnienie--tx { background: var(--v-secondary-text); }
.portfel__dac7-wypelnienie--eur { background: var(--v-primary); }

.portfel__dac7-ok {
  font: 600 13px/1.4 var(--v-font-body);
  color: var(--v-success-text);
}

.portfel__dac7-akcja { align-self: flex-start; }


/* ---------- weryfikacja dwuetapowa ---------- */
/* Zrodlo: rejestr zabezpieczen, grupa „Konto”. Kod QR, sekret do przepisania i kody
   zapasowe — trzy rzeczy, ktore trzeba przeczytac z ekranu, wiec wszystkie sa duze
   i monospaced tam, gdzie liczy sie znak po znaku. */

.bezp__qr {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

.bezp__qr h3,
.bezp__kody h3 {
  margin: 0;
  font: 600 var(--v-t-h3) var(--v-font-display);
  color: var(--v-primary);
}

/* Kod QR: 180 px to rozmiar, przy ktorym aparat telefonu lapie go z odleglosci reki. */
.bezp__qr-obraz {
  width: 180px;
  height: 180px;
  align-self: flex-start;
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: var(--v-r-card);
  padding: var(--v-s-2);
}

.bezp__qr-obraz svg { display: block; width: 100%; height: 100%; }

.bezp__sekret {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-1);
  background: var(--v-n-50);
  border-radius: var(--v-r-card);
  padding: var(--v-s-3) var(--v-s-4);
}

.bezp__sekret-etykieta {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
}

/* Sekret i kody zapasowe: odstep miedzy znakami, zeby dalo sie je przepisac bez pomylki. */
.bezp__sekret-wartosc {
  font: 600 15px/1.5 var(--v-font-display);
  letter-spacing: 0.06em;
  color: var(--v-primary);
  word-break: break-all;
}

.bezp__kody {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  border-color: var(--v-secondary);
}

.bezp__kody-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bezp__kod-pozycja {
  font: 600 15px/1.6 var(--v-font-display);
  letter-spacing: 0.04em;
  color: var(--v-primary);
  background: var(--v-n-50);
  border-radius: 8px;
  padding: var(--v-s-2) var(--v-s-3);
  text-align: center;
}

@media (max-width: 560px) {
  .bezp__kody-lista { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- panele: platnosci, dostawa, zestawy, powiadomienia ---------- */
/* Zrodlo: panele stPayments, stAddress, stShipping, stBundle i stNotifs
   w Prototypie Desktop i Mobile. */

.platn__sekcja,
.dost__sekcja,
.zest__sekcja,
.pow__sekcja {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-items: stretch;
}

.platn__sekcja .v-btn,
.dost__sekcja .v-btn,
.zest__sekcja .v-btn { align-self: flex-start; }

.platn__rachunek {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-1);
  background: var(--v-n-50);
  border-radius: var(--v-r-card);
  padding: var(--v-s-3) var(--v-s-4);
}

.platn__rachunek-numer {
  font: 600 16px/1.4 var(--v-font-display);
  letter-spacing: 0.04em;
  color: var(--v-primary);
}

.platn__rachunek-nota {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* Adres: imie i ulica na cala szerokosc, reszta po dwie w rzedzie — uklad z makiety
   (`wide: span 2` przy polach `name` i `street`). */
.dost__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-s-4);
}

.dost__pole--szerokie { grid-column: span 2; }

@media (max-width: 560px) {
  .dost__siatka { grid-template-columns: minmax(0, 1fr); }
  .dost__pole--szerokie { grid-column: auto; }
}

/* Handoff 51: „Domyślna cena wysyłki” pod przełącznikiem wysyłki własnej (makieta: gap 10). */
.dost__wlasna {
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
  max-width: 320px;
}

.zest__progi {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.zest__prog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-4);
  border-top: 1px solid var(--v-n-100);
  padding-top: var(--v-s-3);
}

.zest__prog:first-child { border-top: none; padding-top: 0; }

.zest__prog-etykieta {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

/* Minus, pole i plus w jednej linii: przyciski 40 px jak w makiecie, pole na tyle
   szerokie, zeby zmiescic dwucyfrowa liczbe z procentem. */
.zest__prog-sterowanie {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
}

.zest__prog-krok {
  width: 40px; /* makieta */
  min-width: 40px; /* makieta */
  padding: 0;
  justify-content: center;
  font-size: 18px;
}

/* ⚠️ DWIE PULAPKI W JEDNYM RZEDZIE, obie zgloszone przez Huberta 24.09 („cos jest
   nierowne wzgledem siebie"):

   1. `x-input` BEZ ETYKIETY i tak trzyma 6 px pod nia (`.v-field__wrap { margin-top: 6px }`),
      bo tam normalnie stoi podpis pola. Zmierzone przed poprawka: przyciski y=339 h=48,
      pole y=339 h=54, input w srodku y=345 — czyli pole sciete 6 px w dol, srodki
      rozjechane o 3 px.
   2. Klasa podana `x-input` ladauje NA `<input>`, nie na opakowanie `.v-field`
      (worek atrybutow scala sie na polu — ta sama pulapka co przy `x-checkbox`),
      wiec regula pisana jako `.zest__prog-pole .v-field__wrap` nie dopasowuje niczego.

   Dlatego celujemy w rodzica z rzedu, nie w klase pola. */
.zest__prog-sterowanie .v-field { width: 104px; }
.zest__prog-sterowanie .v-field__wrap { margin-top: 0; }
.zest__prog-pole { width: 104px; }

.zest__przyklad {
  font: 400 13px/1.55 var(--v-font-body);
  color: var(--v-n-600);
  background: var(--v-n-50);
  border-radius: var(--v-r-card);
  padding: var(--v-s-3) var(--v-s-4);
}


/* ---------- konto Pro ---------- */
/* Zrodlo: ekran „Konto Pro" — pasek siedmiu numerow, karta kroku, akcje na dole. */

.pro__glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v-s-4);
  flex-wrap: wrap;
}

.pro__krok-of {
  font: 600 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* Stan abonamentu nad kreatorem. Sam blok wygląd bierze z `x-error`; tutaj zostaje
   wyłącznie odstęp, żeby nie kleił się do nagłówka ekranu. */
.pro__abonament {
  margin-top: var(--v-s-4);
}

.pro__kroki {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pro__krok { display: flex; align-items: center; flex: 1 1 auto; }
.pro__krok:last-child { flex: 0 0 auto; }

.pro__krok-numer {
  display: grid;
  place-items: center;
  width: 28px; /* makieta */
  height: 28px; /* makieta */
  border-radius: 50%;
  border: 1.5px solid var(--v-n-300);
  background: var(--v-n-0);
  font: 700 12px/1 var(--v-font-body);
  color: var(--v-n-500);
  flex: 0 0 auto;
}

.pro__krok--teraz .pro__krok-numer {
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: var(--v-n-0);
}

.pro__krok--zrobiony .pro__krok-numer {
  background: var(--v-success);
  border-color: var(--v-success);
  color: var(--v-n-0);
}

.pro__krok-kreska {
  flex: 1 1 auto;
  height: 1px;
  background: var(--v-n-200);
  min-width: var(--v-s-2);
}

.pro__krok--zrobiony .pro__krok-kreska { background: var(--v-success); }

.pro__karta,
.pro__form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

/* NIP i „Pobierz dane z GUS” w jednym rzędzie — ten sam układ co przy zakładaniu
   konta (`.wejscie__nip`), żeby jedno pole nie wyglądało w dwóch miejscach inaczej. */
.pro__nip {
  display: flex;
  gap: 8px; /* makieta */
  align-items: flex-start;
}

.pro__nip .v-field { flex: 1 1 auto; min-width: 0; }

.pro__nip .v-btn {
  flex-shrink: 0;
  height: 48px; /* makieta */
  margin-top: 26px; /* zmierzone: pole NIP zaczyna się 26 px pod górą rzędu — równa górne krawędzie */
  white-space: nowrap;
}

@media (max-width: 759px) {
  .pro__nip { flex-direction: column; gap: 6px; /* makieta */ }
  .pro__nip .v-field { width: 100%; }
  .pro__nip .v-btn { width: 100%; margin-top: 0; }
}

.pro__tytul {
  margin: 0;
  font: 600 var(--v-t-h3) var(--v-font-display);
  color: var(--v-primary);
}

.pro__regulamin {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  background: var(--v-n-50);
  border-radius: var(--v-r-card);
  padding: var(--v-s-4);
}

.pro__regulamin-tytul {
  font: 700 12px/1.3 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
}

.pro__regulamin-lista {
  margin: 0;
  padding-left: var(--v-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  font: 400 13px/1.55 var(--v-font-body);
  color: var(--v-n-700);
}

.pro__gotowe {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  align-items: flex-start;
}

.pro__akcje {
  display: flex;
  gap: var(--v-s-3);
  flex-wrap: wrap;
  align-items: center;
}


/* ---------- import ofert ---------- */

.imp__kroki,
.imp__panel {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

.imp__panel .v-btn { align-self: flex-start; }

.imp__krok {
  display: flex;
  gap: var(--v-s-3);
  align-items: flex-start;
}

.imp__krok-numer {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 700 12px/1 var(--v-font-body);
  flex: 0 0 auto;
}

.imp__krok-tresc { display: flex; flex-direction: column; gap: 2px; }

.imp__krok-tytul {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.imp__krok-opis {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.imp__bledy { display: flex; flex-direction: column; gap: var(--v-s-2); }

.imp__podglad {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.imp__wiersz {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--v-n-100);
  padding: var(--v-s-3) 0;
}

.imp__wiersz:first-child { border-top: none; padding-top: 0; }

.imp__wiersz-tytul {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.imp__wiersz-meta {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}


/* ---------- status konta: pytanie i licznik przychodu ---------- */
/* Zrodlo: ekran „Status konta" — ochrowy kafel `nudgeTitle` i aside „Licznik przychodu". */

.stat__pytanie {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  background: var(--v-secondary-soft);
  border-color: var(--v-secondary);
}

.stat__pytanie-tytul {
  margin: 0;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-secondary-text);
}

.stat__licznik {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

.stat__licznik-etykieta {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
}

.stat__licznik-kwota {
  font: 600 var(--v-t-money) var(--v-font-display);
  color: var(--v-primary);
}

.stat__licznik-pas {
  display: block;
  height: 6px; /* makieta */
  border-radius: 3px; /* makieta */
  background: var(--v-n-100);
  overflow: hidden;
}

/* Ochra, bo to licznik zblizania sie do progu — nie wynik i nie ostrzezenie. */
.stat__licznik-wypelnienie {
  display: block;
  height: 100%;
  border-radius: 3px; /* makieta */
  background: var(--v-secondary-text);
}

.stat__licznik-prog,
.stat__licznik-zostalo {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}


/* ---------- powloka ustawien: kolumna nawigacji + panel ---------- */
/* Zrodlo: ekran „Ustawienia" w Prototypie Desktop. Jeden ekran: po lewej nawigacja
   (nie znika po wejsciu w panel), po prawej tresc. Kolumna 260 px jak w makiecie. */

.ustaw--siatka {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--v-s-12);
  align-items: start;
}

.ustaw__nawigacja {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-6);
  position: sticky;
  top: 96px; /* makieta */
}

.ustaw__nawGrupa {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-1);
}

.ustaw__nawPoz {
  display: block;
  padding: var(--v-s-2) var(--v-s-3);
  border-radius: var(--v-r-btn);
  font: 500 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
  text-decoration: none;
  transition: background var(--v-dur-fast);
}

.ustaw__nawPoz:hover { background: var(--v-n-50); }

/* Wybrana pozycja: BIALE TLO I GRUBSZY PODPIS, nic wiecej. Makieta ma dokladnie tyle
   (`bg: '#fff'`, `wt: 700`) — dolozony przeze mnie cien czytal sie jak ramka, ktorej
   w projekcie nie ma (uwaga Huberta 25.09). */
.ustaw__nawPoz--wybrana {
  background: var(--v-n-0);
  font-weight: 700;
}

.ustaw__nawPoz--koniec { color: var(--v-error-text); }

.ustaw__nawPoz--nieczynna {
  color: var(--v-n-400);
  cursor: default;
}

.ustaw__nawPoz--nieczynna:hover { background: none; }

.ustaw__panel {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
  min-width: 0;
}

.ustaw__panelTytul {
  margin: 0;
  font: 600 var(--v-t-h1) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

/* Na telefonie nawigacja zamienia sie w liste NAD panelem: prototyp mobilny ma tu
   osobny ekran z lista, a lista nad trescia niesie to samo bez cofania sie. */
@media (max-width: 900px) {
  .ustaw--siatka { grid-template-columns: minmax(0, 1fr); gap: var(--v-s-6); }
  .ustaw__nawigacja { position: static; }
}


/* ---------- panel „Moj portfel" w ustawieniach ---------- */

.portu__saldo,
.portu__tozsamosc,
.portu__adres {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-items: stretch;
}

.portu__saldo .v-btn,
.portu__adres .v-btn,
.portu__tozsamosc .v-btn { align-self: flex-start; }

.portu__liczby {
  display: flex;
  gap: var(--v-s-8);
  flex-wrap: wrap;
}

.portu__liczba { display: flex; flex-direction: column; gap: var(--v-s-1); }

.portu__liczba-etykieta {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.portu__liczba-kwota {
  font: 600 var(--v-t-display) var(--v-font-display);
  letter-spacing: var(--v-ls-display);
  color: var(--v-primary);
}

.portu__nota {
  font: 400 13px/1.55 var(--v-font-body);
  color: var(--v-n-600);
}

.portu__wiersz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-4);
  border-top: 1px solid var(--v-n-100);
  padding-top: var(--v-s-3);
}

.portu__wiersz:first-child { border-top: none; padding-top: 0; }

.portu__wiersz-tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.portu__wiersz-klucz {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.portu__wiersz-wartosc {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.portu__wiersz-dopisek {
  font: 400 12.5px/1.4 var(--v-font-body);
  color: var(--v-n-400);
  text-align: right;
  flex: 0 0 auto;
}

.portu__adres-tresc {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.portu__adres-tresc--brak { color: var(--v-n-400); font-weight: 400; }


/* ---------- panel „Dane konta" ---------- */

.dane__sekcja {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-items: stretch;
}

.dane__sekcja .v-btn { align-self: flex-start; }

.dane__tytul {
  font: 600 var(--v-t-h3) var(--v-font-display);
  color: var(--v-primary);
}


/* ---------- personalizacja: chipy i podglad ---------- */

.pers__sekcja {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
  align-items: stretch;
}

.pers__grupa {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

/* Podpis grupy chipow: 12/600 szary, jak „Marki" i „Rozmiary" w prototypie.
   Wersaliki zostaja w kolumnie nawigacji, tu ich nie ma. */
.pers__grupaTytul {
  font: 600 12px/1.3 var(--v-font-body);
  color: var(--v-n-500);
}

.pers__akcje { display: flex; gap: var(--v-s-3); flex-wrap: wrap; }

.pers__podglad {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--v-s-4);
}


/* ---------- zgody: wiersze i historia ---------- */

.zgody__wiersz { padding: var(--v-s-4); }

.zgody__historia {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.zgody__wpis {
  display: flex;
  gap: var(--v-s-3);
  align-items: flex-start;
}

/* Kropka mowi od razu, czy to przyjecie (zielona), czy wycofanie (szara) — bez
   czytania calego wiersza. */
.zgody__wpis-kropka {
  width: 8px; /* makieta */
  height: 8px; /* makieta */
  border-radius: 50%;
  margin-top: 6px;
  flex: 0 0 auto;
  background: var(--v-n-300);
}

.zgody__wpis-kropka--przyjecie { background: var(--v-success); }
.zgody__wpis-kropka--wycofanie { background: var(--v-n-400); }

.zgody__wpis-tresc { display: flex; flex-direction: column; gap: 2px; }

.zgody__wpis-co {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.zgody__wpis-kiedy {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}


/* ---------- usuniecie konta ---------- */

.usun__skutki,
.usun__form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  align-items: stretch;
}

.usun__skutek {
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.usun__akcje {
  display: flex;
  gap: var(--v-s-3);
  flex-wrap: wrap;
  align-items: center;
}


/* ---------- jezyk aplikacji ---------- */

.ustaw__jezyk {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-items: stretch;
}

.ustaw__jezyk .v-btn { align-self: flex-start; }

.pers__podgrupa {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  border-top: 1px solid var(--v-n-100);
  padding-top: var(--v-s-3);
}

.pers__grupa > .pers__podgrupa:first-of-type { border-top: none; padding-top: 0; }

.pers__podgrupaTytul {
  font: 600 12.5px/1.3 var(--v-font-body);
  color: var(--v-n-600);
}


/* ---------- „Profil i dane": zdjecie i wiersze z „Zmien" ---------- */

.prof__zdjecie {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  align-items: flex-start;
}

/* „Zmien" rozwija POJEDYNCZE pole, jak w makiecie. `<details>`, wiec bez JavaScriptu. */
.prof__zmiana > summary { list-style: none; cursor: pointer; }
.prof__zmiana > summary::-webkit-details-marker { display: none; }

.prof__zmiana-form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  align-items: stretch;
  margin-top: var(--v-s-3);
  min-width: 240px;
}

.prof__zmiana-form .v-btn { align-self: flex-start; }

/* Wiersz danych osobowych: wartosc i dopisek jedno pod drugim po lewej, „Zmien" po
   prawej — i wtedy dopisek NIE moze stac w tej samej kolumnie co przycisk. */
.portu__wiersz-dopisek--pod {
  text-align: left;
  color: var(--v-n-500);
}

@media (max-width: 700px) {
  .portu__wiersz { flex-direction: column; align-items: flex-start; }
  .portu__wiersz-dopisek { text-align: left; }
}


/* ---------- zdjecie profilowe ---------- */
/* Uklad 1:1 z projektem z 25.09: szary blok, awatar po lewej, obok tytul, jedno
   zdanie i dwie akcje w rzedzie („Zmien zdjecie" z obwodka, „Usun" jako odnosnik). */

.prof__karta-zdjecia { padding: var(--v-s-4); }

.prof__foto {
  display: flex;
  align-items: center;
  gap: var(--v-s-5);
  background: var(--v-n-50);
  border-radius: var(--v-r-card);
  padding: var(--v-s-5);
}

.prof__foto-tresc {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  align-items: flex-start;
  min-width: 0;
}

.prof__foto-tytul {
  font: 700 15px/1.3 var(--v-font-body);
  color: var(--v-primary);
}

.prof__foto-opis {
  margin: 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.prof__foto-akcje {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  margin-top: var(--v-s-1);
}

@media (max-width: 620px) {
  .prof__foto { flex-direction: column; align-items: flex-start; }
}

/* Kwota oczekujaca jest wyszarzona (makieta): to nie sa pieniadze, ktore mozna wziac. */
.portu__liczba-kwota--czeka { color: var(--v-n-400); }

.dac__karta { display: flex; flex-direction: column; gap: var(--v-s-4); }



/* ---------- „Moj portfel" (/portfel) — uklad 1:1 z makiety ---------- */
/* Granatowa karta „DO WYPLATY" po lewej, licznik DAC7 po prawej, tabela pod spodem. */

.portfel__gora {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--v-s-6);
  align-items: start;
}

@media (max-width: 900px) {
  .portfel__gora { grid-template-columns: minmax(0, 1fr); }
}

/* Jedyna granatowa karta w calym koncie — bo to jedyne miejsce, gdzie stoi kwota,
   ktora mozna wziac. */
.portfel__doWyplaty {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  align-items: flex-start;
  background: var(--v-primary);
  border-color: var(--v-primary);
  padding: var(--v-s-8);
}

.portfel__doWyplaty-etykieta {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-300);
}

.portfel__doWyplaty-kwota {
  font: 600 var(--v-t-display) var(--v-font-display);
  letter-spacing: var(--v-ls-display);
  color: var(--v-n-0);
}

.portfel__doWyplaty-nota {
  margin: 0;
  font: 400 13px/1.55 var(--v-font-body);
  color: var(--v-n-200);
}

.portfel__doWyplaty-blok {
  font: 400 13px/1.55 var(--v-font-body);
  color: var(--v-secondary-dark);
}

/* Wyplata rozwija sie w miejscu: arkusz z makiety nie istnieje bez JavaScriptu. */
.portfel__wyplata { width: 100%; }
.portfel__wyplata > summary { list-style: none; cursor: pointer; }
.portfel__wyplata > summary::-webkit-details-marker { display: none; }

.portfel__wyplata .portfel__form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  margin-top: var(--v-s-4);
  background: var(--v-n-0);
  border-radius: var(--v-r-card);
  padding: var(--v-s-4);
}

.portfel__wyplata .portfel__form .v-btn { align-self: flex-start; }

/* Tryb wypłaty (decyzja 02.10): dwa wiersze wyboru i zdanie o opłacie pod nimi. */
.portfel__tryb {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.portfel__tryb-podpis {
  padding: 0;
  margin-bottom: 6px; /* makieta: odstęp etykiety pola */
  font: 600 var(--v-t-label) var(--v-font-body);
  color: var(--v-n-600);
}

.portfel__tryb-nota {
  margin: var(--v-s-1) 0 0;
  font: 400 12.5px/1.5 var(--v-font-body);
  color: var(--v-n-600);
}

/* Tabela historii: trzy kolumny i naglowek wersalikami, jak w makiecie. */
.portfel__historia { padding: 0; overflow: hidden; }

.portfel__tabela { display: flex; flex-direction: column; }

.portfel__wiersz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 140px;
  gap: var(--v-s-4);
  align-items: center;
  padding: var(--v-s-4) var(--v-s-6);
  border-top: 1px solid var(--v-n-100);
}

.portfel__wiersz:first-child { border-top: none; }

.portfel__wiersz--naglowek {
  font: 700 10.5px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
  background: var(--v-n-50);
}

.portfel__wiersz-opis {
  font: 400 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portfel__wiersz-stan {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.portfel__wiersz-data {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* Kwota do prawej, plus na zielono — minus zostaje granatowy, bo wyplata i zakup
   to nie sa bledy. */
.portfel__wiersz-kwota {
  text-align: right;
  font: 600 var(--v-t-ui) var(--v-font-display);
  color: var(--v-primary);
}

.portfel__wiersz-kwota--plus { color: var(--v-success-text); }

@media (max-width: 620px) {
  .portfel__wiersz { grid-template-columns: minmax(0, 1fr) auto; }
  .portfel__wiersz-data { grid-column: 1; font-size: 12px; }
  .portfel__wiersz--naglowek { display: none; }
}


/* ---------- „Dostawa i nadawanie": podglad adresu + „Zmien adres" ---------- */
/* Makieta pokazuje adres jako cztery linijki i przycisk, ktory rozwija formularz. */

.dost__podglad {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 400 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.dost__podglad-linia:empty { display: none; }

.dost__zmiana > summary { list-style: none; cursor: pointer; }
.dost__zmiana > summary::-webkit-details-marker { display: none; }
.dost__zmiana[open] > summary { margin-bottom: var(--v-s-4); }

/* Konto bez adresu: formularz stoi otwarty, wiec „Zmien adres" nie ma czego zmieniac. */
.dost__zmiana--bez-podgladu > summary { display: none; }

/* „Usun" przy zdjeciu profilowym: zwykly szary napis, bez podkreslenia — tak rysuje to
   projekt z 25.09. Podkreslenie zostaje tam, gdzie odnosnik prowadzi na inna strone. */
.prof__foto-akcje .v-btn--link {
  text-decoration: none;
  color: var(--v-n-600);
}

.prof__foto-akcje .v-btn--link:hover { color: var(--v-primary); text-decoration: underline; }

/* Sekcja „Bezpieczenstwa" w karcie: prototyp trzyma tu kazdy blok (zmiana hasla, adres,
   drugi skladnik) w bialej karcie z obwodka, nie golo na tle panelu. */
.bezp__sekcja {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-items: stretch;
}

.bezp__sekcja > .v-btn { align-self: flex-start; }

/* ---------- Przelaczniki w panelu ustawien ---------- */
/* Styleguide rysuje przelacznik jako probke na szarym tle (#F5F7FA, promien 12) — i taki
   zostaje wszedzie indziej. W PANELU USTAWIEN prototyp stawia go inaczej: zwykly rzad na
   bialej karcie, bez podkladki, a kilka pod rzad rozdziela kreska. Szara plama w bialej
   karcie wygladala jak wstawka z innego ekranu (uwaga Huberta 25.09). */
.ustaw .v-card .v-toggle {
  background: transparent;
  border-radius: 0;
  padding: var(--v-s-3) 0;
}

.ustaw .v-card form + form .v-toggle,
.ustaw .v-card .v-toggle + .v-toggle {
  border-top: 1px solid var(--v-n-100);
}

/* Karta „Usun konto": skutki, formularz i dwie akcje w jednym bloku, jak w prototypie. */
.usun__skutki {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

/* Ikona blokady WLACZONEJ: czerwona obwodka mowi, ze stan trwa — tak samo jak ochrowa
   rezerwacja w „Moich ofertach" mowi, ze cos jest wlaczone. */
.profilp__ikona--wlaczona {
  border-color: var(--v-error);
  color: var(--v-error);
}

/* Panel zgloszenia otwiera kotwica z ikony — na co dzien nie zabiera miejsca. */
.profilp__zglos { display: none; }
.profilp__zglos:target { display: block; }

/* Zgloszenie jako panel (bez zwijania): formularz od razu widoczny w karcie. */
.v-report--panel {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: var(--v-r-card);
  padding: var(--v-s-6);
}

.v-report__tytul {
  font: 600 var(--v-t-h3) var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

/* Ponizej pieciu ocen w miejscu sredniej stoi zdanie, nie liczba z gwiazdkami — reguly
   „nie pokazujemy sredniej ponizej pieciu ocen" nie da sie spelnic polowicznie. */
.profilp__srednia-malo {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  text-align: center;
}

/* Ikony akcji w naglowku profilu maja WYSOKOSC SASIADOW (48 px), nie 36 jak w wierszu
   „Moich ofert". Tamte 36 px to pomiar z makiety dla rzedu w liscie; tutaj stoja obok
   „Napisz do..." i „Obserwuj", wiec rownaja do nich (uwaga Huberta 26.09). */
.profilp__akcje .v-btn--ikona {
  width: 48px;
  height: 48px;
  border-radius: var(--v-r-btn);
}

/* Etykieta „Napisz do…" nigdy sie nie lamie (makieta: `white-space: nowrap`). */
.profilp__akcja-glowna.v-btn,
.profilp__akcja-glowna .v-btn { white-space: nowrap; }

/* Telefon: uklad kolumny akcji z Prototypu Desktop (handoff 51, `sp.ask` / `spFollow`),
   bo Prototyp Mobile ekranu profilu nie ma. Wiersz 1: „Napisz do…" na reszte szerokosci
   i ikony 48 px obok, wiersz 2: „Obserwuj" na pelna szerokosc, 44 px. Do 25.09 cztery
   akcje staly w jednym rzedzie: przy 390 px etykieta lamala sie na 3 linie, a ikona
   blokady wystawala 8 px poza karte (audyt 24.09, ustalenie 4). Makieta ma tu jedno „···"
   z menu (kolumna 236 px), u nas zostaja dwie ikony (decyzja Huberta 26.09), wiec tresc
   potrzebuje ~280 px i kolumna bierze cala szerokosc karty. Od 760 px cztery akcje
   mieszcza sie w jednym rzedzie i zostaja tak jak byly. */
@media (max-width: 759px) {
  .profilp__akcje { flex-wrap: wrap; gap: var(--v-s-2); /* makieta: 8 px */ }

  .profilp__akcje .profilp__akcja-glowna { order: 1; flex: 1 1 0; min-width: 0; }
  .profilp__akcje > .v-tip { order: 2; }
  .profilp__akcje .profilp__akcja-obserwuj { order: 3; flex: 0 0 100%; }

  .profilp__akcja-glowna .v-btn,
  .profilp__akcja-obserwuj .v-btn { width: 100%; }

  .profilp__akcja-glowna.v-btn,
  .profilp__akcja-glowna .v-btn { padding: 0 var(--v-s-3); }

  .profilp__akcja-obserwuj.v-btn,
  .profilp__akcja-obserwuj .v-btn { height: 44px; /* makieta */ }
}

/* Nawigacja ustawien na telefonie jest LISTA, a nie kolumna obok tresci — wiec jej
   pozycje sa celami dotyku i maja 44 px, zgodnie z regula ze styleguide'u. */
@media (max-width: 900px) {
  .ustaw__nawPoz {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Ustawienia na telefonie: lista w kartach, jak w Prototypie Mobile ---------- */
/* Makieta rysuje tam kazda grupe jako biala karte z wierszami rozdzielonymi kreska
   i szewronem po prawej. Na web zostaje kolumna nawigacji obok panelu — to ten sam
   zestaw pozycji w dwoch ukladach, nie dwa rozne ekrany. */

@media (max-width: 900px) {
  /* Nadtytul stoi NAD karta (makieta), wiec kartą jest sam rzad pozycji, a nie cala
     grupa: tlo i obwodke bierze kazda pozycja, a zaokraglenie pierwsza i ostatnia. */
  .ustaw__nawGrupa {
    background: transparent;
    padding: 0;
    margin-bottom: var(--v-s-5);
  }

  .ustaw__nawGrupa > .ustaw__grupaTytul {
    display: block;
    margin: 0 0 var(--v-s-2);
    padding-left: var(--v-s-4);
  }

  .ustaw__nawPoz {
    justify-content: space-between;
    min-height: 52px;
    padding: var(--v-s-3) var(--v-s-4);
    background: var(--v-n-0);
    border: 1px solid var(--v-n-100);
    border-top: none;
    border-radius: 0;
  }

  .ustaw__nawGrupa > .ustaw__nawPoz:first-of-type {
    border-top: 1px solid var(--v-n-100);
    border-radius: var(--v-r-card) var(--v-r-card) 0 0;
  }

  .ustaw__nawGrupa > .ustaw__nawPoz:last-of-type {
    border-radius: 0 0 var(--v-r-card) var(--v-r-card);
  }

  /* Szewron: znak, ze wiersz gdzies prowadzi. Rysunkiem, nie tekstem — czytnik ekranu
     dostaje juz nazwe pozycji i nie ma powodu czytac mu strzalki. */
  .ustaw__nawPoz::after {
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    border-right: 1.8px solid var(--v-n-400); /* makieta */
    border-bottom: 1.8px solid var(--v-n-400); /* makieta */
    transform: rotate(-45deg);
  }

  .ustaw__nawPoz--wybrana { background: transparent; }
}

/* ---------- Oferta wstrzymana przez zespol (prototyp: „Oferta wstrzymana") ---------- */
/* Karta mowi cztery rzeczy, ktorych status sam nie niesie: co sie nie zgadza, kto tak
   zdecydowal, kiedy i co zrobic dalej. Czerwona krawedz, bo to jedyna karta na tym ekranie,
   ktora wymaga reakcji. */

.mojaof__wstrzymana {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  align-items: flex-start;
  border-left: 3px solid var(--v-warning);
}

.mojaof__wstrzymana-znacznik {
  padding: 4px 10px;
  border-radius: var(--v-r-badge);
  background: var(--v-warning-soft);
  font: 600 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-warning-text);
}

.mojaof__wstrzymana-meta {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.mojaof__wstrzymana-blok {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}

.mojaof__wstrzymana-podtytul {
  font: 600 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-600);
}

.mojaof__wstrzymana-tresc {
  margin: 0;
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.mojaof__wstrzymana-lista {
  margin: 0;
  padding-left: var(--v-s-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.mojaof__wstrzymana-nota {
  margin: 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* Odwolanie chowa sie w `<details>`, bo na co dzien nie jest potrzebne — a gdy jest,
   ma byc jednym kliknieciem, nie osobnym ekranem. */
.mojaof__odwolanie { align-self: stretch; min-width: 0; }

.mojaof__odwolanie > summary {
  list-style: none;
  cursor: pointer;
}

.mojaof__odwolanie > summary::-webkit-details-marker { display: none; }

.mojaof__odwolanie > summary > span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--v-s-4);
  border: 1.5px solid var(--v-n-200); /* makieta */
  border-radius: var(--v-r-btn);
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-700);
}

.mojaof__odwolanie > summary > span:hover { border-color: var(--v-primary); color: var(--v-primary); }
.mojaof__odwolanie[open] > summary { margin-bottom: var(--v-s-3); }

/* ---------- Oferta wstrzymana (osobny ekran) ---------- */
/* Zrodlo: Prototyp Desktop, ekran „Oferta wstrzymana". Ochrowa belka ze stanem i akcjami,
   pod nia dwie kolumny: „dlaczego" i „co zrobic". */

.wstrz {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
  max-width: min(100%, 1100px);
  padding: var(--v-s-5) 0 var(--v-s-8);
}

.wstrz__wroc {
  align-self: flex-start;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: none;
}

.wstrz__wroc:hover { color: var(--v-primary); }

.wstrz__belka {
  display: flex;
  gap: var(--v-s-6);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--v-secondary-soft);
  border-radius: 20px; /* makieta */
  padding: var(--v-s-6);
}

.wstrz__belka-tresc {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  min-width: 0;
}

.wstrz__znacznik {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--v-r-chip);
  background: var(--v-secondary);
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-0);
}

.wstrz__tytul {
  margin: 0;
  font: 600 var(--v-t-h2) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

.wstrz__meta {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-warning-text);
}

.wstrz__akcje {
  display: flex;
  gap: var(--v-s-3);
  align-items: center;
  flex-wrap: wrap;
}

.wstrz__kolumny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--v-s-6);
}

.wstrz__blok {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  min-width: 0;
}

.wstrz__nadtytul {
  font: 600 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-600);
}

.wstrz__tresc {
  margin: 0;
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.wstrz__lista {
  margin: 0;
  padding-left: var(--v-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.wstrz__odwolanie {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.wstrz__form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  align-items: flex-start;
}

.wstrz__form > .v-field { align-self: stretch; }

.wstrz__cytat {
  margin: 0;
  padding-left: var(--v-s-4);
  border-left: 3px solid var(--v-n-200); /* makieta */
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-600);
}

.wstrz__nota {
  margin: 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* Prosba o potwierdzenie adresu: pasek informacyjny z przyciskiem w jednej linii. */
.mojek__adres,
.portfel__adres { flex-wrap: wrap; }

.mojek__adres-form,
.portfel__adres-form { display: inline; }

.mojek__adres-form .v-btn,
.portfel__adres-form .v-btn { height: auto; color: var(--v-secondary-text); }

/* ---------------------------------------------------------------------------
   Ekran „Weryfikacja tozsamosci” (makieta: Vistitio Ekrany, ekran „Weryfikacja”).
   Jedna kolumna z naglowkiem, dwiema kartami obok siebie i akcjami na dole.
   --------------------------------------------------------------------------- */

.weryf {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-6);
  padding: var(--v-s-8) 0 var(--v-s-16);
}

.weryf__wroc {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: none;
  width: fit-content;
}

.weryf__wroc:hover { color: var(--v-primary); }

.weryf__glowa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v-s-3);
}

.weryf__tytul {
  margin: 0;
  font: 600 34px/1.1 var(--v-font-display);
  letter-spacing: var(--v-ls-display);
  color: var(--v-primary);
}

.weryf__lead {
  margin: 0;
  max-width: min(100%, 720px);
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.weryf__karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--v-s-4);
  align-items: start;
}

.weryf__karta { display: flex; flex-direction: column; gap: var(--v-s-3); }

.weryf__karta-tytul {
  margin: 0;
  font: 600 var(--v-t-h3) var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.weryf__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

.weryf__lista li {
  display: flex;
  gap: var(--v-s-2);
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.weryf__plus {
  flex: none;
  font: 700 var(--v-t-body) var(--v-font-body);
  color: var(--v-success-text);
}

.weryf__kroki {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.weryf__kroki li {
  display: flex;
  gap: var(--v-s-3);
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.weryf__kroki b { color: var(--v-primary); }

.weryf__numer {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--v-n-100);
  font: 600 var(--v-t-note) var(--v-font-body);
  color: var(--v-primary);
}

.weryf__nota { max-width: min(100%, 860px); }

.weryf__warunki { display: flex; flex-direction: column; gap: var(--v-s-3); }

.weryf__akcje {
  display: flex;
  align-items: center;
  gap: var(--v-s-4);
  flex-wrap: wrap;
}

.weryf__pozniej {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: none;
}

.weryf__pozniej:hover { color: var(--v-primary); }

@media (max-width: 760px) {
  .weryf { padding: var(--v-s-5) 0 var(--v-s-12); gap: var(--v-s-5); }
  .weryf__tytul { font-size: 26px; }
}

/* Odzyskanie konta (pozycje 02 i 06 rejestru zabezpieczeń) — ekran „to nie ja”
   i potwierdzenia. Prosta kolumna: kto tu trafia, ma jeden problem i jeden następny krok,
   więc nie ma tu czego układać w siatkę. */
.odzysk {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  max-width: 680px;
  margin: 0 auto;
  padding: var(--v-s-8) 0 var(--v-s-12);
}

.odzysk__znacznik {
  font: 700 11px/1 var(--v-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-n-600);
}

.odzysk__tytul { font: 600 30px/1.2 var(--v-font-display); color: var(--v-n-900); margin: 0; }
.odzysk__lead { font: 400 16px/1.55 var(--v-font-body); color: var(--v-n-700); margin: 0; }
.odzysk__nadtytul { font: 700 15px/1.3 var(--v-font-body); color: var(--v-n-900); }
.odzysk__tresc { font: 400 15px/1.55 var(--v-font-body); color: var(--v-n-700); margin: 0; }

.odzysk__karta { display: flex; flex-direction: column; gap: var(--v-s-4); }
.odzysk__form { display: flex; flex-direction: column; gap: var(--v-s-4); align-items: flex-start; }

.odzysk__wiersz {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: var(--v-s-4);
  padding-bottom: var(--v-s-4);
  border-bottom: 1px solid var(--v-n-200);
}

.odzysk__wiersz:last-of-type { border-bottom: 0; padding-bottom: 0; }
.odzysk__klucz { font: 700 14px/1.4 var(--v-font-body); color: var(--v-n-900); }
.odzysk__wartosc { font: 400 15px/1.55 var(--v-font-body); color: var(--v-n-700); }

@media (max-width: 760px) {
  .odzysk { padding-top: var(--v-s-6); }
  .odzysk__tytul { font-size: 24px; }
  .odzysk__wiersz { grid-template-columns: minmax(0, 1fr); gap: var(--v-s-1); }
}

/* Sekcja „O Vistitio" nalezy WYLACZNIE do zainstalowanej aplikacji. W przegladarce
   te same wejscia sa w stopce, a dwa razy to samo na jednym ekranie to nie wybor,
   tylko halas (handoff PWA, tabela „Serwis kontra aplikacja"). */
/* Waga selektora PODNIESIONA o `.v-card` celowo: komponent listy ustawia
   `.v-card.v-lista { display: flex }`, czyli dwie klasy — samo `.mojek__oVistitio`
   przegrywalo i karta stala na desktopie mimo tej reguly (zgloszone 07.10).
   Ta sama pulapka co przy `.v-lista.mojek__skroty` wyzej. */
.v-card.mojek__oVistitio { display: none; }
.jak-aplikacja .v-card.mojek__oVistitio { display: flex; }

/* CIEMNY MOTYW — karta z przelacznikiem, 1:1 z ekranem „Profil" (Prototyp Mobile).
   Widoczna WYLACZNIE W APLIKACJI: ciemny motyw dziala tylko tam, wiec w przegladarce
   ten pstryczek nie robilby nic, a przycisk bez skutku jest gorszy niz jego brak. */
.mojek__motyw { display: none; }

.jak-aplikacja .mojek__motyw {
  display: flex;
  align-items: center;
  gap: 12px; /* makieta */
  padding: 14px 16px; /* makieta */
  border: 1px solid var(--v-n-100); /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-n-0);
}

.mojek__motyw-ikona {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px; /* makieta */
  background: var(--v-n-50);
  color: var(--v-primary);
}

.mojek__motyw-ikona svg { width: 19px; height: 19px; display: block; } /* makieta */

.mojek__motyw-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mojek__motyw-nazwa { font: 700 14px/1.2 var(--v-font-body); color: var(--v-primary); } /* makieta */
.mojek__motyw-nota { font: 400 12px/1.45 var(--v-font-body); color: var(--v-n-600); } /* makieta */
.mojek__motyw-pstryczek { flex: none; }


/* SIATKA OFERT NIE NALEZY DO EKRANU „PROFIL" W APLIKACJI. Makieta konczy ten ekran
   na liscie wierszy — oferty ma wlasny ekran („Moje oferty"), do ktorego prowadzi
   i kafel, i wiersz. Na stronie zostaje, bo tak rysuje ja Prototyp Desktop. */
.jak-aplikacja .mojek__oferty { display: none; }

/* „Pomoc — napisz do czlowieka": ostatnia pozycja ekranu, szary napis na srodku.
   Nie jest kolejnym wierszem listy, bo to wyjscie awaryjne, a nie nawigacja. */
.mojek__pomoc { display: flex; justify-content: center; padding-top: var(--v-s-2); }
.mojek__pomoc .v-btn { color: var(--v-n-600); font: 600 13px/1 var(--v-font-body); } /* makieta */

/* „Moja oferta" w aplikacji: zdjecie od samej gory, wstecz plywa na nim.
   ⚠️ Ukladem odniesienia jest OPAKOWANIE, nie galeria — kolko stoi w znaczniku
   PRZED nia, wiec `position: relative` na galerii nic by mu nie dalo (ta sama
   pomylka co na publicznej ofercie, zlapana zrzutem 05.10). */
.mojaof__zdjecie-blok { position: relative; }

/* W APLIKACJI ZDJECIE JEST PIERWSZE (makieta): ochrowa belka „TWOJA OFERTA" stoi
   POD nim, nie nad. Belka tlumaczy, czym jest ten ekran — a najpierw trzeba
   zobaczyc rzecz, o ktorej mowa. */
@media (max-width: 1024px) {
  .jak-aplikacja .mojaof { display: flex; flex-direction: column; }
  .jak-aplikacja .mojaof__uklad { order: -1; }
}

/* Kolko „wstecz" ma lezec NA ZDJECIU, nie nad nim: galeria zaczyna sie od gory
   opakowania, wiec kotwiczymy kolko do gornej krawedzi pierwszego kadru. */
.jak-aplikacja .mojaof__zdjecie-blok .oferta__plywajace { top: calc(8px + env(safe-area-inset-top)); }
.jak-aplikacja .mojaof__galeria { margin-top: 0; }

/* USTAWIENIA W APLIKACJI TO DWA EKRANY, NIE JEDEN (poprawka 07.10).
   Makieta PWA ma liste „Ustawienia” i osobny panel; u nas panel zaczynal sie od sciany
   menu, ktora trzeba bylo przewinac, zeby dojsc do tresci (zrzut „Usun konto”).
   W przegladarce zostaje po staremu: tam nie ma paska z tytulem i strzalka wstecz,
   wiec lista nad trescia jest jedyna nawigacja. */
.jak-aplikacja .ustaw--wpanelu .ustaw__nawigacja { display: none; }
.jak-aplikacja .ustaw--korzen .ustaw__panel { display: none; }

/* Tytul panelu powtarzal to, co stoi w pasku aplikacji („Usun konto” dwa razy pod
   soba). W przegladarce zostaje — tam panel stoi obok menu i tytul mowi, ktory
   z nich jest otwarty. */
.jak-aplikacja .ustaw--wpanelu .ustaw__panelTytul { display: none; }


/* ============================================================================
   HANDOFF 50 — „Moje oferty” i „Moja oferta”: przecena, zmiana ceny, nagranie
   ============================================================================ */

/* Kolumna ceny: cena 15 px, pod nią przekreślona cena sprzed obniżki 12 px (makieta). */
.mojeof__cena {
  display: flex;
  flex-direction: column;
  gap: 2px; /* makieta */
}

.mojeof__cena .v-trow__cena { font-size: 15px; } /* makieta */
.mojeof__bylo { font: 400 12px/1.2 var(--v-font-body); color: var(--v-n-600); } /* makieta */

/* „Moja oferta” — cena 32 px z przekreśleniem 16 px obok (makieta „Web · Moja oferta”). */
.mojaof__ceny {
  display: flex;
  align-items: baseline;
  gap: 10px; /* makieta */
}

.mojaof__bylo { font: 400 16px/1 var(--v-font-display); color: var(--v-n-600); } /* makieta */
.mojaof__omnibus { font-size: 12px; } /* makieta */

/* „Zmień cenę” w panelu: obwódka granatowa na jasnym tle, z ikoną (makieta). */
.v-btn.mojaof__zmien-cene {
  gap: var(--v-s-2);
  border-color: var(--v-primary);
  background: var(--v-n-50);
  font-weight: 700;
}

/* Blok „Nagranie produktu” (makieta: karta 360 px, odstęp 12). */
.mojaof__nagranie { gap: var(--v-s-3); } /* makieta */

.mojaof__nagranie-tekst {
  margin: 0;
  font: 400 13.5px/1.55 var(--v-font-body); /* makieta */
  color: var(--v-n-700);
  text-wrap: pretty;
}

.mojaof__nagranie-tekst--cichy { font-size: 12.5px; color: var(--v-n-600); }

/* Powód odrzucenia w ochrowej ramce (makieta: #FBEEDC, podpis wersalikami 11,5/800). */
.mojaof__nagranie-powod {
  display: flex;
  flex-direction: column;
  gap: 4px; /* makieta */
  padding: 12px 14px; /* makieta */
  border-radius: var(--v-r-input);
  background: var(--v-warning-soft);
  color: var(--v-primary);
  font: 400 13.5px/1.5 var(--v-font-body); /* makieta */
}

.mojaof__nagranie-powod-tytul {
  font: 800 11.5px/1.2 var(--v-font-body); /* makieta */
  letter-spacing: .06em; /* makieta */
  text-transform: uppercase;
  color: var(--v-warning-text);
}

/* Przyciski bloku: 44 px, promień 11, ikona 19 (makieta). */
.v-btn.mojaof__nagranie-przycisk {
  gap: var(--v-s-2);
  min-height: 44px; /* makieta */
  height: auto;
  padding: 0 12px; /* makieta */
  border-radius: 11px; /* makieta */
  font: 700 13.5px/1.3 var(--v-font-body); /* makieta */
  text-align: center;
}

.mojaof__nagranie-przycisk > span { display: inline-flex; align-items: center; gap: var(--v-s-2); }

.mojaof__nagranie-gracz { width: 100%; }

.mojaof__nagranie-stopka {
  margin: 0;
  font: 400 12px/1.5 var(--v-font-body); /* makieta */
  color: var(--v-n-500);
}

/* „Nie zgadzam się” rozwija formularz odwołania na miejscu. Wygląd przycisku siedzi
   na <span> w środku <summary>, nie na samym <summary> (gotcha z 19.09). */
.mojaof__odwolanie > summary { list-style: none; cursor: pointer; }
.mojaof__odwolanie > summary::-webkit-details-marker { display: none; }

.mojaof__odwolanie-form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  margin-top: var(--v-s-3);
}

/* Wiersz „Moich ofert” równamy DO GÓRY (makieta handoffu 50): kolumna statystyk ma dziś
   dwie albo trzy linijki (plakietka nagrania, notka), a wyśrodkowana cena i ikony
   odjeżdżały od tytułu. */
@media (min-width: 761px) {
  .mojeof__wiersz:not(.mojeof__wiersz--naglowek) { align-items: start; }
}

/* ---------- „Moje odznaki” (handoff 60, plansze „D Moje odznaki” i „M Moje odznaki”) ----------
   Szeroki ekran: kolumna boczna 300 px („tak widzą cię kupujące”, „Jak to działa”) i dwie
   kolumny kart. Telefon: biały nagłówek, lista kart na szarym, pod nią „Jak to działa”. */
.powloka:has(.odzm) { background: var(--v-n-50); }

.odzm {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas: "bok naglowek" "bok siatka";
  grid-template-rows: auto 1fr;
  gap: 16px 28px;
  align-items: start;
}

.odzm__naglowek { grid-area: naglowek; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.odzm__naglowek-tekst { display: flex; flex-direction: column; gap: 4px; }
.odzm__tytul { margin: 0; font: 600 28px/1.1 var(--v-font-display); letter-spacing: -.025em; color: var(--v-n-800); }
.odzm__podsumowanie { display: none; font: 400 13px/1.4 var(--v-font-body); color: var(--v-n-600); }
.odzm__kiedy { font: 400 13px/1.4 var(--v-font-body); color: var(--v-n-600); white-space: nowrap; }
.odzm__siatka { grid-area: siatka; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.odzm__bok { grid-area: bok; display: flex; flex-direction: column; gap: 14px; }
.odzm__kto.v-card { border: 1px solid var(--v-n-100); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.odzm__kto-osoba { display: flex; gap: 12px; align-items: center; }
.odzm__kto-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.odzm__kto-nazwa { font: 600 18px/1.2 var(--v-font-display); color: var(--v-n-800); }
.odzm__kto-podpis { font: 400 12.5px/1.3 var(--v-font-body); color: var(--v-n-600); }
.odzm__kto-znaki { display: flex; flex-wrap: wrap; gap: 6px; }
.odzm__kto-podsumowanie { font: 400 13px/1.4 var(--v-font-body); color: var(--v-n-700); }

.odzm__jak.v-card { border: 1px solid var(--v-n-100); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; font: 400 13px/1.5 var(--v-font-body); color: var(--v-n-700); }
.odzm__jak-tytul { font: 600 15px/1.3 var(--v-font-display); color: var(--v-n-800); }
.odzm__jak-kiedy { display: none; }
.odzm__jak-link { font-weight: 700; color: var(--v-secondary-text); }
.odzm__jak-link:hover { color: var(--v-n-800); }

@media (max-width: 999px) {
  .odzm__siatka { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 759px) {
  .odzm {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "naglowek" "siatka" "bok";
    grid-template-rows: auto;
    gap: 12px;
    margin: calc(-1 * var(--v-s-4)) -18px 0; /* makieta: biały nagłówek od krawędzi do krawędzi (powłoka daje 16 / 18 px) */
  }
  .odzm__naglowek { background: var(--v-n-0); padding: 10px 20px 16px; display: block; } /* makieta */
  .odzm__tytul { font-size: 24px; }
  .odzm__podsumowanie { display: block; }
  .odzm__kiedy { display: none; }
  .odzm__siatka { gap: 8px; padding: 0 14px; } /* makieta */
  .odzm__bok { padding: 0 14px; }
  .odzm__kto { display: none; }
  .odzm__jak.v-card { border: none; border-radius: 14px; }
  .odzm__jak-kiedy { display: block; color: var(--v-n-600); }
}

/* Odznaki na profilu i w profilu sklepu — sekcja w karcie jak reszta profilu. */
.profilp__odznaki.v-card,
.sklep__odznaki.v-card { padding: 20px; }

@media (max-width: 759px) {
  /* Telefon: plansza „M Profil” ma siatkę na szerokość ekranu minus 16 px — karta oddaje
     boczną wyściółkę, żeby „Zgodne z opisem” mieściło się w jednej linii. */
  .profilp__odznaki.v-card,
  .sklep__odznaki.v-card { padding: 16px 2px; }
  .profilp__odznaki .v-odzp__naglowek,
  .sklep__odznaki .v-odzp__naglowek { padding: 0 14px; }
}


.mojeof__stat { position: relative; }

/* ---------- Strona „Zdjęcie z aparatu Vistitio” (adres z kodu QR) ----------
   Makiety tej strony nie ma — złożona z istniejących wzorów: karta, lista kroków, kod. */
.aparatz__karta { display: flex; flex-direction: column; gap: var(--v-s-5); }

.aparatz__oferta { display: flex; align-items: center; gap: var(--v-s-3); }

.aparatz__mini {
  width: 52px;
  height: 52px;
  border-radius: 10px; /* makieta */
  overflow: hidden;
  background: var(--v-n-200);
  flex-shrink: 0;
}

.aparatz__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aparatz__tytul { font: 700 15px/1.35 var(--v-font-body); color: var(--v-n-800); }

.aparatz__lead {
  margin: 0;
  font: 400 15px/1.7 var(--v-font-body);
  color: var(--v-n-700);
  max-width: min(100%, 920px);
}

.aparatz__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: var(--v-s-8);
  align-items: start;
}

.aparatz__kroki {
  margin: 0;
  padding-left: var(--v-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  font: 400 15px/1.6 var(--v-font-body);
  color: var(--v-n-800);
}

.aparatz__kod { display: flex; flex-direction: column; gap: var(--v-s-2); align-items: center; }

.aparatz__qr {
  display: block;
  width: 176px;
  height: 176px;
  padding: var(--v-s-2);
  border-radius: var(--v-r-input);
  border: 1px solid var(--v-n-100);
  background: #FFFFFF; /* makieta: kod zawsze na białym */
}

.aparatz__qr:empty { display: none; }
.aparatz__qr svg { display: block; width: 100%; height: 100%; }
.aparatz__qr svg path { fill: #0F1522; } /* makieta */

.aparatz__adres {
  font: 400 12px/1.4 var(--v-font-body);
  color: var(--v-n-600);
  word-break: break-all;
  text-align: center;
}

.aparatz__akcje { display: flex; flex-wrap: wrap; gap: var(--v-s-3); align-items: center; }

@media (max-width: 760px) {
  .aparatz__uklad { grid-template-columns: minmax(0, 1fr); }
  .aparatz__akcje > * { width: 100%; }
}

/* ==========================================================================
   Promowanie widoczne dla sprzedających (makieta v77 „Promowanie - karta i lista”)
   1) „Moja oferta”: karta po publikacji, zdanie po wyborze, pastylka na zdjęciu.
   2) „Moje oferty”: wiersz z „Promuj” z podpisem, pastylkami i „⋯”.
   ========================================================================== */

/* ---------- 1. Karta po publikacji ---------- */

.mojaof__promo {
  display: flex;
  flex-direction: column;
  gap: 14px; /* makieta */
  padding: 18px; /* makieta */
  border-radius: var(--v-r-card);
  border: 1.5px solid var(--v-primary);
  background: var(--v-n-0);
}


.mojaof__promo-glowka { display: flex; flex-direction: column; gap: 6px; }

.mojaof__promo-tytul {
  margin: 0;
  font: 600 19px/1.25 var(--v-font-display); /* makieta */
  letter-spacing: -.015em; /* makieta */
  color: var(--v-primary);
}

.mojaof__promo-tresc {
  margin: 0;
  font: 400 13.5px/1.55 var(--v-font-body); /* makieta */
  color: var(--v-n-700);
  text-wrap: pretty;
}

.mojaof__promo-podbicie { display: flex; flex-direction: column; gap: 6px; }

/* Darmowe podbicie: przycisk wtórny z GRANATOWĄ obwódką (makieta), nie szarą. */
.v-btn.mojaof__promo-darmowe {
  border-radius: 12px; /* makieta */
  border-color: var(--v-primary);
  font: 700 14.5px/1 var(--v-font-body); /* makieta */
}

/* Wykorzystane w tym tygodniu: biały z wyblakłą obwódką, nie szare wypełnienie `[disabled]`. */
.v-btn.mojaof__promo-darmowe[disabled] {
  background: var(--v-n-0);
  border-color: var(--v-n-200);
  color: var(--v-n-500);
}

.mojaof__promo-nota {
  margin: 0;
  font: 400 12.5px/1.45 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

.mojaof__promo-nota--dostepne { color: var(--v-success-text); }

.mojaof__promo-platne { display: flex; flex-direction: column; gap: 8px; }

/* „Promuj 3 dni – 4,90 zł” w jednej linii; kreska z odstępem jak spacja. */
.v-btn.mojaof__promo-kup {
  gap: 0;
  border-radius: 12px; /* makieta */
  font: 700 14.5px/1 var(--v-font-body); /* makieta */
}

.mojaof__promo-kreska { margin: 0 4px; } /* makieta: „ – ” */

.v-btn.mojaof__promo-nie {
  align-self: center;
  height: auto;
  min-height: 40px;
  padding: 0 10px; /* makieta */
  color: var(--v-n-700);
  font: 700 13.5px/1 var(--v-font-body); /* makieta */
}

/* Zdanie po wyborze (makieta: `done`) — zielone pole z ptaszkiem. */
.mojaof__promo-gotowe {
  display: flex;
  align-items: flex-start;
  gap: 10px; /* makieta */
  margin: 0;
  padding: 12px 14px; /* makieta */
  border-radius: 12px; /* makieta */
  background: var(--v-success-soft);
  color: var(--v-success-text);
  font: 600 13.5px/1.5 var(--v-font-body); /* makieta */
}

.mojaof__promo-znak { font-weight: 800; }

/* Pastylka promowania na zdjęciu: lewy górny róg na szerokim ekranie, lewy dolny na telefonie. */
.v-badge.mojaof__pastylka {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  height: 24px;
  min-height: 24px;
  padding: 0 10px; /* makieta */
  font-size: 11px; /* makieta */
  letter-spacing: .03em; /* makieta */
}

/* Zachęta do aplikacji po pierwszej ofercie — ten sam wygląd co pod „To twoja oferta”. */
.mojaof .oferta__twoja-nota { margin: 0; font: 400 13px/1.5 var(--v-font-body); color: var(--v-n-600); }

.mojaof .oferta__twoja-aplikacja .v-btn--link {
  display: inline;
  height: auto;
  font: inherit;
  font-weight: 600;
  color: var(--v-primary);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .mojaof__promo { gap: 12px; padding: 16px; } /* makieta */
  .mojaof__promo-tytul { font-size: 18px; } /* makieta */

  /* Dwa promowania obok siebie, nazwa i pod nią cena (makieta). */
  .mojaof__promo-platne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .v-btn.mojaof__promo-kup {
    flex-direction: column;
    height: auto;
    min-height: 52px;
    padding: 6px 8px; /* makieta */
    font: 700 14px/1.25 var(--v-font-body); /* makieta */
  }

  .mojaof__promo-kreska { display: none; }
  .mojaof__promo-cena { font-weight: 800; }

  .v-btn.mojaof__promo-nie { min-height: 44px; font-size: 14px; }

  .v-badge.mojaof__pastylka { top: auto; bottom: 12px; }

  /* Zaraz po publikacji telefon pokazuje kolejność z makiety: zdjęcie, tytuł i cena,
     karta, akcje — a opis i liczby dopiero pod nimi. Przy zwykłym wejściu bez zmian. */
  .mojaof--po-publikacji .mojaof__lewa { display: contents; }
  .mojaof--po-publikacji .mojaof__zdjecie-blok { order: -2; }
  .mojaof--po-publikacji .mojaof__akcje { order: -1; }
}

/* ---------- 2. „Moje oferty”: wiersz z makiety v77 ---------- */

.v-card.mojeof__lista {
  border-color: var(--v-n-100);
  /* „⋯” rozwija listę pod sobą — karta nie może jej przyciąć. */
  overflow: visible;
}

.mojeof__lista .mojeof__rzad {
  gap: 18px; /* makieta */
  padding: 16px 20px; /* makieta */
}

.mojeof__lista .mojeof__rzad:last-child { border-bottom: 0; }

/* „⋯” stoi w osobnej kolumnie (na telefonie idzie w róg karty), a w rzędzie ma być 8 px od akcji. */
.mojeof__lista .mojeof__akcje-wiecej { margin-left: -10px; } /* makieta: 18 − 10 = 8 */

.mojeof__foto {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 12px; /* makieta */
  overflow: hidden;
  background: var(--v-n-100);
}

.mojeof__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* makieta */
}

.mojeof__opis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.mojeof__tytul-linia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px; /* makieta */
  max-width: 100%;
}

.mojeof__tytul {
  min-width: 0;
  font: 700 15.5px/1.3 var(--v-font-body); /* makieta */
  color: var(--v-primary);
  text-decoration: none;
}

.mojeof__tytul:hover { text-decoration: underline; }

.v-badge.mojeof__pastylka { height: 24px; padding: 0 10px; } /* makieta */

.mojeof__meta {
  font: 400 13.5px/1.4 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

.mojeof__lista .mojeof__akcje { flex-wrap: nowrap; gap: 8px; }

.mojeof__lista .v-btn.mojeof__przycisk {
  height: 44px;
  padding: 0 14px; /* makieta */
  border-radius: 11px; /* makieta */
  font: 600 13.5px/1 var(--v-font-body); /* makieta */
  white-space: nowrap;
}

/* Ochrowe „Promuj” i granatowe „Wyniki” są grubsze i szersze od zwykłych (makieta). */
.mojeof__lista .v-btn.mojeof__promuj {
  padding: 0 20px; /* makieta */
  border-radius: 12px; /* makieta */
  font-weight: 700;
  font-size: 14px;
}

.mojeof__lista .v-btn.mojeof__wyniki {
  padding: 0 18px; /* makieta */
  border-radius: 12px; /* makieta */
  border-color: var(--v-primary);
  font-weight: 700;
  font-size: 14px;
}

/* „Zmień cenę” w „⋯” tylko na telefonie — na szerokim ekranie stoi w rzędzie. */
.v-btn.mojeof__tylko-telefon { display: none; }

/* Tryb „Zaznacz” (etap B, makieta v78 „Pro Moje oferty”): ptaszek w pierwszej kolumnie, akcje
   i „⋯” znikają, zaznaczony wiersz na tle n-50. `!important`, bo kolumny przychodzą w `style`
   wiersza (x-table-row) — tylko tak tryb może je nadpisać. */
.mojeof--zaznaczanie .mojeof__lista .mojeof__rzad { --v-trow-kolumny: 44px 72px minmax(0, 1fr) !important; } /* makieta */
/* Selektor mocniejszy niż `.mojeof__lista .mojeof__akcje { display: grid }` z reguły telefonu niżej. */
.mojeof--zaznaczanie .mojeof__lista .mojeof__akcje,
.mojeof--zaznaczanie .mojeof__lista .mojeof__akcje-wiecej { display: none; }
.mojeof__lista .mojeof__rzad:has(> .v-zbiorczo-ptaszek[aria-checked="true"]) { background: var(--v-n-50); }
.mojeof__lista .v-zbiorczo-ptaszek { margin-right: -6px; } /* makieta: ptaszek 44 px, odstęp do zdjęcia 12 */

@media (max-width: 760px) {
  /* Na telefonie każdy wiersz to osobna karta na tle ekranu (makieta). */
  .v-card.mojeof__lista {
    display: flex;
    flex-direction: column;
    gap: 10px; /* makieta */
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .mojeof__lista .mojeof__rzad {
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    grid-template-areas: "foto opis wiecej" "akcje akcje akcje";
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--v-n-100);
    border-radius: var(--v-r-card);
    background: var(--v-n-0);
  }

  .mojeof__lista .mojeof__rzad:last-child { border-bottom: 1px solid var(--v-n-100); }

  .mojeof__lista .mojeof__foto { grid-area: foto; width: 64px; height: 64px; }
  .mojeof__lista .mojeof__opis { grid-area: opis; gap: 4px; }
  .mojeof__lista .mojeof__akcje-wiecej { grid-area: wiecej; margin-left: 0; }

  /* Tytuł w jednej linii z wielokropkiem, pod nim krótka linia, pod nią pastylka (makieta). */
  .mojeof__lista .mojeof__tytul-linia { display: contents; }

  .mojeof__lista .mojeof__tytul {
    align-self: stretch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14.5px; /* makieta */
  }

  .mojeof__lista .mojeof__opis > * { order: 3; }
  .mojeof__lista .mojeof__opis > .mojeof__meta { order: 1; font-size: 12.5px; } /* makieta */
  .mojeof__lista .v-badge.mojeof__pastylka { order: 2; }
  .mojeof__meta-pelna { display: none; }

  .mojeof__lista .mojeof__akcje {
    grid-area: akcje;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mojeof__lista .mojeof__akcje .v-btn { width: 100%; }
  .mojeof__lista .v-btn.mojeof__zmien-cene { display: none; }
  .v-btn.mojeof__tylko-telefon { display: inline-flex; }

  .mojeof--zaznaczanie .mojeof__lista .mojeof__rzad {
    grid-template-columns: 44px 56px minmax(0, 1fr); /* makieta */
    grid-template-areas: "ptaszek foto opis";
    align-items: center;
  }
  .mojeof--zaznaczanie .mojeof__lista .mojeof__foto { width: 56px; height: 56px; } /* makieta */
  .mojeof__lista .v-zbiorczo-ptaszek { grid-area: ptaszek; margin-right: 0; }
}

/* Obserwowane sklepy i osoby (etap C) — pod obserwowanymi rzeczami. */
.konto__sklepy {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  margin-top: var(--v-s-8);
}

.konto__sekcja-tytul {
  margin: 0;
  font: 600 20px/1.2 var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}