/* ============================================================
   SERWIS CHWILKI - jeden system dla WSZYSTKICH stron.

   Wczesniej tylko strona glowna byla pisana recznie, a reszta (pytania, pomysl,
   konto, dokumenty, panel) zostala w eksporcie z projektu: inna nawigacja, inne
   stopnie pisma, inne karty. Serwis wygladal jak kilka roznych stron sklejonych
   razem. Teraz kazda strona uzywa tych samych klas z tego pliku.

   Zasada tresci: klient ma kilka sekund - prowadzi obraz, nie akapit. Dlugie
   wyjasnienia trzymamy w pytaniach, nie na srodku strony.

   Rytm tla sekcji: papier -> piasek -> papier -> ciemny -> piasek -> len -> papier.
   Jedna paleta, ale zadne dwie sasiednie sekcje nie wygladaja tak samo.
   ============================================================ */

:root {
  --papier: #FFFDFB;
  --piasek: #F0E6D8;
  --len: #EAE0CE;
  --ciemny: #22201E;
  --ciemny-tekst: #F6F1E8;
  --zloty: #8A6E14;
  --zloty-jasny: #D7BE72;
  --roz: #E8C7C8;
  --tusz: #3A3733;
  --tusz-2: #55504A;
  --tusz-3: #6B655E;
  --linia: rgba(58, 55, 51, 0.12);
  --pion: clamp(52px, 6.5vw, 92px);
  --bok: clamp(20px, 5vw, 72px);

  /* Splot lnu: szum rozciagniety w poziomie (baseFrequency 0.9 x 0.3) daje nitki watku,
     a nie piasek. Rysowany wektorowo, wiec jest ostry na kazdym ekranie - kladziemy go
     na rozmyte zdjecie lnu (decor/linen-texture.jpg), ktore niesie faldy i swiatlo. */
  --splot: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260"><filter id="s"><feTurbulence type="fractalNoise" baseFrequency="0.9 0.3" numOctaves="2" seed="7" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0.42  0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0.16 0"/></filter><rect width="100%" height="100%" filter="url(%23s)"/></svg>');

  /* Galazka z albumu - ten sam ksztalt, ktory generator rysuje na stronach (sprig()
     w src/render/paint.mjs). Uzywamy jej jako delikatnej dekoracji sekcji, zeby strona
     nie wygladala na pusta, a jednoczesnie zostala w stylu produktu. */
  --galazka: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 300"><g fill="none" stroke="black" stroke-width="2.4"><path d="M60 0 C50 60 66 130 54 200 C48 240 58 275 60 300"/></g><g fill="black"><ellipse cx="34" cy="46" rx="22" ry="9" transform="rotate(-28 34 46)"/><ellipse cx="84" cy="72" rx="22" ry="9" transform="rotate(24 84 72)"/><ellipse cx="32" cy="104" rx="21" ry="8.5" transform="rotate(-24 32 104)"/><ellipse cx="86" cy="134" rx="21" ry="8.5" transform="rotate(22 86 134)"/><ellipse cx="34" cy="168" rx="19" ry="8" transform="rotate(-20 34 168)"/><ellipse cx="83" cy="198" rx="19" ry="8" transform="rotate(20 83 198)"/><ellipse cx="38" cy="232" rx="16" ry="7" transform="rotate(-18 38 232)"/><ellipse cx="79" cy="258" rx="15" ry="6.5" transform="rotate(18 79 258)"/><circle cx="60" cy="126" r="5"/><circle cx="60" cy="186" r="4.5"/></g></svg>');
}

/* Podpowiedz w pustym polu: jasna kursywa, ten sam styl co w panelu kreatora
   (.pnl-wartosc). Ciemnoszara i prosta wygladala jak wpisana wartosc ("12A",
   "600 100 200") i ludzie omijali puste pole. Jedna regula dla calego serwisu. */
/* #767069, nie jasniejszy: podpowiedz to tez tekst do przeczytania (WCAG 1.4.3, 4,5:1). */
::placeholder { color: #767069; font-style: italic; opacity: 1; }

/* Kotwica (#cena, #kontakt) nie moze wjechac pod przyklejony naglowek serwisu. */
html { scroll-padding-top: 80px; }

/* Tekst tylko dla czytnika ekranu: dopiski "(otwiera sie w nowej karcie)", stan kroku,
   numer strony po przewroceniu kartki. !important, bo laduje tez w elementach, ktore
   maja wlasne style (np. kolka w .zam-etapy li span). */
.tylko-czytnik {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* "Przejdz do tresci" (app.js, pominNaglowek) - pierwszy przystanek tabulatora na kazdej
   stronie. Schowany, dopoki nie ma fokusu; z fokusem nad wszystkim, takze nad nakladka
   kreatora (.ed, z-index 100) i dymkiem krokow (1000). */
.pomin {
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  padding: 10px 18px; border-radius: 999px; background: var(--ciemny); color: var(--papier);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.pomin:not(:focus) {
  width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Linki w komunikatach (zielony "zapisane", czerwony blad) - w kolorze komunikatu, nie
   domyslny niebieski przegladarki ("swoim koncie", "Zobacz zamowienie na koncie"). */
.dc-notice a, .dc-errors a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* --- szkielet --- */

.sek { padding: var(--pion) var(--bok); position: relative; overflow: hidden; }
/* Banner podstrony: sam tytul i zdanie wprowadzenia, wiec nie potrzebuje pelnej
   wysokosci sekcji tresci. Bez tego "Masz pomysl na ksiazke" zajmowalo caly ekran
   i formularz - po ktory ludzie tu przychodza - byl pod zgibem. */
.sek-banner { padding-top: calc(var(--pion) * 0.62); padding-bottom: calc(var(--pion) * 0.34); }
/* Pierwsza sekcja podstrony (Pytania, Dokumenty, Ksiazka za pomysl...) - mniej pustego
   miejsca pod naglowkiem: pelne --pion (do 92 px) to odstep miedzy sekcjami landingu,
   a na podstronie tytul ma stac blisko menu. Landing (hero) ma wlasny uklad. */
/* Sekcje stoja w <main> (app.js, trescGlowna), stad "header + main > pierwsza sekcja". */
body:not([data-route="index"]) [data-screen-label] > header + main > section.sek:first-child { padding-top: clamp(26px, 3.2vw, 44px); }
.sek-papier { background: var(--papier); }
.sek-piasek { background: var(--piasek); }
.sek-len { background: var(--len); }
.sek-ciemny { background: var(--ciemny); color: var(--ciemny-tekst); }

.szer { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.szer-tekst { max-width: 900px; }
.szer-waski { max-width: 760px; text-align: center; }

/* Dekoracja: malowana galazka przy krawedzi. Chowa sie na waskich ekranach,
   gdzie i tak nie ma dla niej miejsca. */
.sek-dekor::before,
.sek-dekor::after {
  content: ""; position: absolute; width: clamp(90px, 9vw, 150px); aspect-ratio: 120 / 300;
  background: var(--zloty); opacity: 0.16; pointer-events: none;
  -webkit-mask: var(--galazka) center / contain no-repeat;
  mask: var(--galazka) center / contain no-repeat;
}
/* Gorna galazka od gory w pikselach, nie w %: procent liczy sie od wysokosci sekcji, wiec
   rozwiniecie odpowiedzi w Pytaniach wydluzalo sekcje i galazka zjezdzala w dol. */
.sek-dekor::before { left: -28px; top: clamp(40px, 5vw, 80px); transform: rotate(-12deg); }
.sek-dekor::after { right: -28px; bottom: 6%; transform: rotate(168deg); }
@media (max-width: 1100px) { .sek-dekor::before, .sek-dekor::after { display: none; } }

/* TLO SEKCJI Z OBRAZKA. Obrazek miesza sie z kolorem sekcji (multiply), wiec paleta
   zostaje ta sama, a tekst dalej jest czytelny.

   Sciezke trzymamy TUTAJ, nie w atrybucie style="": adres w zmiennej CSS przegladarka
   liczy wzgledem arkusza, w ktorym zmienna zadeklarowano, wiec "assets/decor/..."
   wpisane w HTML-u robilo sie "/assets/assets/decor/...". Nowe tlo = nowa klasa ponizej. */
.sek-tlo {
  background-image: var(--tlo);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-blend-mode: multiply;
}
/* Nazwa klasy z eksportu projektu (web/index.html) - "piasek" to tu kolor, a nie obrazek.
   Len zamiast dawnego papieru z malowanymi listkami: listki za okladkami z wiankami
   mieszaly sie z wiankami i sekcja wygladala na zagracona. */
.sek-tlo-piasek {
  /* Okladki na stronie glownej: pastelowe plamy jak akwarela w kolorach samych okladek
     (roz Wianka i Galazki, blekit Gwiazd, piasek Laki) na jasnym papierze. Len wygladal
     jak obrus w restauracji - za "dorosly" jak na album dla dziecka. */
  /* Bez szumu --splot: jego brazowo-szare kropki szarzyly cala sekcje. Srodek dostaje
     wlasna ciepla plame - neutralny papier miedzy kolorowymi rogami tez wygladal szaro. */
  background-color: #FFF9F5;
  background-image:
    radial-gradient(42% 58% at 6% 18%, rgba(246, 206, 208, 0.6), rgba(246, 206, 208, 0) 70%),
    radial-gradient(38% 52% at 96% 22%, rgba(206, 226, 248, 0.7), rgba(206, 226, 248, 0) 70%),
    radial-gradient(46% 55% at 72% 104%, rgba(245, 224, 186, 0.65), rgba(245, 224, 186, 0) 72%),
    radial-gradient(34% 44% at 18% 100%, rgba(226, 236, 206, 0.6), rgba(226, 236, 206, 0) 70%),
    radial-gradient(50% 45% at 50% 50%, rgba(255, 236, 226, 0.55), rgba(255, 236, 226, 0) 75%);
  background-repeat: no-repeat;
}

.naglowek-sekcji {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 32px;
}
.naglowek-sekcji .tytul-l { margin: 0; }

/* --- typografia --- */

.nadtytul {
  margin: 0 0 12px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  /* Ciemniej niz --zloty: maly tekst na piasku i lnie mial z nim ok. 3,8:1, a trzeba 4,5:1. */
  color: #6E580F; font-weight: 600;
}
.tytul-xl {
  margin: 0 0 18px; font-family: Karla, Helvetica, sans-serif; font-weight: 400;
  font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.025em;
}
.tytul-l {
  margin: 0 0 14px; font-family: Karla, Helvetica, sans-serif; font-weight: 400;
  font-size: clamp(27px, 3.3vw, 40px); line-height: 1.14; letter-spacing: -0.018em;
  text-wrap: balance;
}
.tytul-m { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--tusz); }
.lead { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--tusz-2); }
.lead-duzy { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }
.lead-waski { max-width: 62ch; }
.lead-jasny { color: rgba(246, 241, 232, 0.78); }

/* --- przyciski --- */

.btn {
  display: inline-block; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 16px; padding: 15px 28px; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-glowny { background: var(--ciemny); color: #FFF9F2; font-weight: 700; }
.btn-glowny:hover { background: #3A3733; }
/* Na ciemnym tle przycisk musi byc jasny - w projekcie byl czarny na czarnym i znikal. */
.btn-jasny { background: var(--ciemny-tekst); color: var(--ciemny); font-weight: 700; }
.btn-jasny:hover { background: #FFFFFF; }
.btn-obrys { background: transparent; color: var(--tusz); border: 1px solid rgba(58, 55, 51, 0.3); }
.btn-obrys:hover { background: rgba(58, 55, 51, 0.06); }
.btn-szeroki { width: 100%; }
.btn-duzy { font-size: 17px; padding: 17px 34px; }
.btn-maly { font-size: 14.5px; padding: 11px 20px; }

.przyciski { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 28px; }

/* --- HERO strony glownej --- */

.hero { padding-top: clamp(8px, 1.2vw, 20px); padding-bottom: clamp(36px, 4.5vw, 68px); }
/* Hero idzie od krawedzi do krawedzi, tak jak naglowek - inaczej tytul zaczynal sie
   kilkanascie centymetrow na prawo od logo i wygladal na wsuniety w srodek strony. */
.hero .szer { max-width: none; }
.hero-siatka {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px); align-items: center;
}
@media (max-width: 900px) { .hero-siatka { grid-template-columns: 1fr; } }

/* Stopien pisma liczony od SZEROKOSCI KOLUMNY, nie od okna: najdluzszy wers tytulu
   ("Pierwszy rok mija") ma okolo 8,8 em, wiec przy 11,2cqw zawsze miesci sie w jednej
   linii i nigdy nie wchodzi na okladke - niezaleznie od szerokosci ekranu. */
.hero-tekst { container-type: inline-size; max-width: 760px; }
.hero .tytul-xl { font-size: clamp(32px, 11.2cqw, 82px); }
.hero .lead-duzy { font-size: clamp(17px, 3.1cqw, 24px); }

/* Cena stoi przy przycisku - to jedna z pierwszych rzeczy, ktorych szuka klient. */
.cena-obok-cta { display: grid; gap: 1px; line-height: 1.25; }
.cena-obok-cta b { font-size: 19px; font-weight: 700; color: var(--tusz); }
.cena-obok-cta span { font-size: 13.5px; color: var(--tusz-3); }

.chipy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Na gorze strony glownej bez parametrow (40 stron, 21 x 21, oprawa, PDF): kto wchodzi,
   ma sie zainteresowac ksiazka, a nie specyfikacja - ta jest nizej, przy cenie i w FAQ. */
.hero .chipy { display: none; }
.chipy li { font-size: 13.5px; color: var(--tusz-2); background: var(--piasek); border-radius: 999px; padding: 7px 14px; }

.hero-okladka { display: grid; justify-items: center; }
.hero-okladka .okl-przod { width: 100%; max-width: 560px; }

/* --- okladki do wyboru --- */

/* Wszystkie okladki w jednym rzedzie, a na wezszym ekranie po dwie. auto-fit ukladal
   je po trzy i czwarta stala sama w drugim rzedzie - sekcja miala 1200 px wysokosci. */
.okladki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
@media (max-width: 900px) { .okladki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* align-content: start - karty w rzedzie maja wysokosc najwyzszej, a siatka bez tego
   rozkladala nadmiar miedzy okladke i podpis: przy dwulinijkowym opisie jednej karty
   podpisy pozostalych zjezdzaly nizej. */
.okladka-karta { display: grid; align-content: start; gap: 12px; margin: 0; }
.okladka-karta .okl-przod { width: 100%; }
.okladka-karta figcaption { display: grid; gap: 3px; }
/* Tylko podpis POD okladka: napisy NA niej tez sa akapitami i maja wlasne stopnie pisma
   liczone z milimetrow (okladka.js), wiec nie wolno ich zlapac ogolnym selektorem. */
.okladka-karta figcaption h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--tusz); }
.okladka-karta figcaption p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tusz-3); }

/* --- strony rozlozone jak talia --- */

/* Jeden rzad, strony nachodza na siebie jak rozlozona talia. Najechanie wysuwa strone
   spod sasiadek - to jedyna interakcja: nic sie nie klika, a kto chce zobaczyc wiecej,
   idzie do kreatora. Gorny margines zostawia miejsce na wysuniecie, zeby karta nie
   wchodzila na naglowek sekcji. */
.galeria { display: flex; justify-content: center; padding: 26px 0 10px; min-height: 200px; }
/* Osiem kart z calego albumu (stronyPokazowe w app.js) - wezsze niz przy szesciu, zeby
   talia miescila sie w kolumnie strony: 8 x 210 - 7 x 84 = ok. 1090 px przy 1180. */
.galeria-karta {
  flex: 0 0 auto; width: clamp(140px, 15vw, 210px); margin: 0; line-height: 0;
  transition: transform 0.22s ease;
}
.galeria-karta + .galeria-karta { margin-left: clamp(-84px, -7vw, -46px); }
.galeria-karta:nth-child(odd) { transform: rotate(-1.6deg); }
.galeria-karta:nth-child(even) { transform: rotate(1.4deg); }
.galeria-karta .pg { width: 100%; box-shadow: 0 14px 30px -18px rgba(23, 17, 14, 0.6); transition: box-shadow 0.22s ease; }
.galeria-karta:hover { transform: translateY(-18px) rotate(0deg) scale(1.05); z-index: 2; }
.galeria-karta:hover .pg { box-shadow: 0 26px 50px -20px rgba(23, 17, 14, 0.8); }
@media (prefers-reduced-motion: reduce) { .galeria-karta { transition: none; } }
/* Telefon: talii nie da sie zmiescic - przesuwa sie ja palcem, od pierwszej karty. */
@media (max-width: 700px) {
  .galeria { justify-content: flex-start; overflow-x: auto; padding: 26px 16px 18px; scroll-snap-type: x proximity; }
  .galeria-karta { scroll-snap-align: start; }
}
.galeria-pusta { margin: 0; padding: 36px 0; text-align: center; color: var(--tusz-3); font-size: 15px; }

/* --- cena i prezent --- */

.cena-siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 820px) { .cena-siatka { grid-template-columns: 1fr; } }
.cena-karta { background: var(--ciemny); color: var(--ciemny-tekst); border-radius: 14px; padding: clamp(28px, 3vw, 40px); }
.cena-kwota { margin: 0 0 6px; font-family: Karla, Helvetica, sans-serif; font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -0.025em; }
.cena-opis { margin: 0 0 24px; font-size: 15.5px; opacity: 0.75; }
.cena-lista { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.cena-lista li { padding-left: 22px; position: relative; }
.cena-lista li::before { content: "·"; position: absolute; left: 7px; color: var(--zloty-jasny); font-weight: 700; }

/* Prezent to osobna decyzja zakupowa, wiec wyglada inaczej niz reszta strony. */
.prezent { background: var(--roz); border-radius: 14px; padding: clamp(28px, 3vw, 40px); display: grid; align-content: center; gap: 14px; }
.prezent-etykieta { margin: 0; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #8A4E52; }
.prezent-tekst { margin: 0; font-family: Karla, Helvetica, sans-serif; font-weight: 400; font-size: clamp(19px, 2vw, 24px); line-height: 1.32; letter-spacing: -0.012em; color: var(--ciemny); }
.prezent .btn { justify-self: start; border-color: rgba(34, 32, 30, 0.35); color: var(--ciemny); }
.prezent .btn:hover { background: rgba(255, 255, 255, 0.45); }

/* --- kroki (nabor pomyslow, "jak to dziala") --- */

.kroki-pion { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kroki-pion li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: rgba(255, 255, 255, 0.62); border-radius: 12px; padding: 22px 24px; }
.kroki-pion h3 { margin: 0 0 5px; font-size: 17px; font-weight: 700; color: var(--tusz); }
.kroki-pion p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--tusz-3); }
.krok-nr { font-family: Karla, Helvetica, sans-serif; font-size: 24px; color: var(--zloty); line-height: 1; }
.pomysl-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }

/* --- pytania --- */

.faq { display: grid; gap: 2px; }
.faq details { background: var(--papier); border: 1px solid var(--linia); padding: 16px 22px; }
.faq details[open] { border-color: rgba(138, 110, 20, 0.35); }
.faq summary { cursor: pointer; font-size: 16.5px; font-weight: 600; list-style: none; color: var(--tusz); padding-right: 28px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: -2px; color: var(--zloty); font-weight: 400; font-size: 20px; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--tusz-2); max-width: 70ch; }
.faq p b { font-weight: 700; color: var(--tusz); }
.faq-lista { display: grid; gap: 2px; }
/* Naglowek grupy pytan na /pytania - jak nadtytul, zeby grupy bylo widac z daleka. */
.faq-grupa {
  margin: 26px 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--zloty);
}
.faq-grupa:first-child { margin-top: 0; }
.faq-stopka { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* --- karty i formularze (pytania, pomysl, konto, panel) --- */

.dwie-kolumny { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

/* "Ksiazka za pomysl" (ukladPomyslu w app.js): wstep z krokami po lewej, formularz po prawej. */
.pomysl-kolumny { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.pomysl-wstep .tytul-l { margin-bottom: 12px; }
.pomysl-wstep .lead { margin-bottom: 28px; max-width: 44ch; }
/* Kroki jako lekka lista z kreska, nie ciezkie karty - formularz obok jest jedyna karta. */
.pomysl-wstep .kroki-pion { gap: 18px; padding-left: 2px; }
.pomysl-wstep .kroki-pion li { background: none; border-radius: 0; padding: 0 0 0 18px; border-left: 2px solid rgba(138, 110, 20, 0.35); gap: 14px; }
.pomysl-wstep .kroki-pion h3 { font-size: 16px; }
.pomysl-wstep .kroki-pion p { font-size: 14.5px; }
.pomysl-wstep .krok-nr { font-size: 20px; }
@media (max-width: 900px) { .dwie-kolumny { grid-template-columns: 1fr; } }

.karta { background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; padding: clamp(24px, 3vw, 34px); }
.karta-piasek { background: var(--piasek); border-color: transparent; }
.karta + .karta { margin-top: 20px; }
.karta > :last-child { margin-bottom: 0; }

.formularz { display: grid; gap: 16px; }
.formularz > .btn-obrys { justify-self: start; }
.pole { display: grid; gap: 7px; }
.pole > span { font-size: 13.5px; font-weight: 600; color: var(--tusz-2); }
.pole input, .pole textarea, .pole select {
  border: 1px solid rgba(58, 55, 51, 0.22); background: #FFFFFF; border-radius: 8px;
  padding: 13px 14px; font-size: 16px; color: var(--tusz); font-family: inherit; width: 100%;
}
.pole textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
/* Lista wyboru wlasnym ksztaltem: Safari rysowal ja nizsza od pol obok i z systemowa
   strzalka - w formularzu wygladala jak z innej strony. */
.pole select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: #FFFFFF url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1.5 6 6.5 11 1.5" fill="none" stroke="%2355504A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') right 16px center / 12px 8px no-repeat;
}
.pole input[readonly] { background: #F7F3EE; color: var(--tusz-2); }
.pole-podpowiedz { font-size: 13px; color: var(--tusz-3); }
.zgoda { display: flex; gap: 10px; align-items: start; font-size: 14px; line-height: 1.55; color: var(--tusz-2); }
.zgoda input { margin-top: 3px; flex: none; }

/* --- lista zgloszen / wiadomosci (panel) --- */

.wpisy { display: grid; gap: 12px; }
.wpis { background: var(--papier); border: 1px solid var(--linia); border-radius: 12px; padding: 20px 22px; display: grid; gap: 8px; }
.wpis-gora { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; font-size: 13px; color: var(--tusz-3); }
.wpis-nr { font-family: ui-monospace, Menlo, monospace; color: var(--zloty); }
.wpis-status { margin-left: auto; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zloty); font-weight: 600; }
/* Tylko akapity wpisu, NIE napisy na miniaturze okladki (tez sa <p>): ".wpis p" lapalo je
   i "ALBUM PAMIATKOWY" rysowal sie 15 px zamiast w skali okladki. */
.wpis > p, .wpis-srodek > p, .wpis-odpowiedz > p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--tusz-2); }

/* --- konto zalogowanej osoby: menu z boku, tresc obok (jak panel admina, ale z jasnym
   menu w karcie pod naglowkiem sklepu - klient dalej jest w sklepie, nie w aplikacji) --- */
.kp { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
/* Bez position: sticky - menu startowalo tuz nad progiem przyklejenia, wiec przy dluzszej
   tresci przegladarka spychala je w dol i skakalo przy kazdej zmianie zakladki. */
.kp-bok {
  display: grid; gap: 14px; padding: 18px 14px;
  background: #F6F0E8; border-radius: 18px;
}
.kp-ja { display: flex; align-items: center; gap: 12px; padding: 4px 8px 8px; min-width: 0; }
.kp-awatar {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ciemny); color: #FFF9F2; font-size: 16px; font-weight: 700;
}
.kp-ja > div { display: grid; min-width: 0; }
.kp-ja b { font-size: 16px; color: var(--ciemny); }
.kp-ja small { font-size: 12.5px; color: var(--tusz-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-menu { display: grid; gap: 2px; }
.kp-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: none; border-radius: 10px;
  background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--tusz-2); transition: background 0.12s, color 0.12s;
}
.kp-menu button:hover { background: rgba(255, 255, 255, 0.6); color: var(--ciemny); }
.kp-menu button[aria-current="page"] {
  background: #FFFFFF; color: var(--ciemny); box-shadow: 0 1px 2px rgba(23, 17, 14, 0.05), 0 2px 8px -2px rgba(23, 17, 14, 0.08);
}
.kp-menu svg { flex: none; opacity: 0.85; }
.kp-licznik {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px;
  display: inline-grid; place-items: center; background: #EAE0D2; color: var(--tusz-2); font-size: 12px; font-weight: 700;
}
/* Wejscie do panelu - tylko dla admina; ciemne, bo to inna "strefa" niz reszta menu. */
.kp-admin {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px;
  background: var(--ciemny); color: #FFF9F2; font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.kp-admin:hover { background: #3A3733; text-decoration: none; }
.kp-licznik-pilny {
  min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px;
  display: inline-grid; place-items: center; background: #A6493A; color: #FFFFFF; font-size: 12px; font-weight: 700;
}
.kp-licznik-pilny[hidden] { display: none; }
.kp-bok-dol { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--linia); }
.kp-nowy, .kp-wyloguj {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: none; border-radius: 10px; background: none;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--tusz-2); text-decoration: none; cursor: pointer; text-align: left;
}
.kp-nowy span { display: grid; place-items: center; width: 20px; font-size: 19px; font-weight: 400; line-height: 1; }
.kp-nowy:hover, .kp-wyloguj:hover { background: rgba(255, 255, 255, 0.6); color: var(--ciemny); text-decoration: none; }
.kp-wyloguj { font-weight: 500; color: var(--tusz-3); }
.kp-naglowek { margin-bottom: 24px; }
.kp-naglowek h1 {
  margin: 0; font-family: Karla, Helvetica, sans-serif; font-weight: 400;
  font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ciemny);
}
.kp-naglowek p { margin: 6px 0 0; font-size: 15.5px; color: var(--tusz-3); }
/* Krotka tresc (np. jedno zamowienie) - stopka nie podjezdza pod samo menu. */
.kp { min-height: 56vh; }
.wpisy + .konto-pusto { margin-top: 18px; }
.konto-pusto a { color: var(--ciemny); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .kp { grid-template-columns: minmax(0, 1fr); }
  .kp-bok { padding: 14px; }
  /* Menu w jednym przewijanym rzedzie - na telefonie nie zajmuje polowy ekranu. */
  .kp-menu { display: flex; gap: 4px; overflow-x: auto; }
  .kp-menu button { width: auto; flex: none; padding: 9px 12px; }
  .kp-bok-dol { display: flex; flex-wrap: wrap; justify-content: space-between; }
}

/* --- rozmowy na koncie (kartaRozmowy w app.js): dymki jak w czacie --- */
.wpis-rozmowa { gap: 14px; }
.czat { display: flex; flex-direction: column; gap: 10px; }
.czat-dymek { max-width: min(80%, 620px); padding: 12px 14px; border-radius: 14px; display: grid; gap: 4px; }
.czat-dymek.ja { align-self: flex-end; background: #F3ECE2; border-bottom-right-radius: 4px; }
.czat-dymek.chwilki { align-self: flex-start; background: #FFFFFF; border: 1px solid var(--linia); border-bottom-left-radius: 4px; }
.czat-dymek .wpis-tekst { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tusz); white-space: pre-wrap; overflow-wrap: anywhere; }
.czat-kto { margin: 0; font-size: 12px; font-weight: 700; color: var(--tusz-3); }
.czat-dymek.chwilki .czat-kto { color: var(--zloty); }
.czat-odpisz { display: flex; align-items: flex-end; gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid var(--linia); }
.czat-odpisz textarea {
  flex: 1; min-width: 0; box-sizing: border-box; resize: vertical; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(58, 55, 51, 0.22); background: #FFFFFF; font: inherit; font-size: 15px; line-height: 1.5; color: var(--tusz);
}
.czat-odpisz textarea:focus { outline: 2px solid var(--zloty-jasny); outline-offset: 1px; border-color: var(--zloty); }

/* --- statusy (STATUSY w app.js) --- */
.status {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; background: #EFE9E1; color: var(--tusz-2); white-space: nowrap;
}
.status-czeka-na-platnosc, .status-nowe { background: #F6E7C8; color: #7A5A0C; }
.status-oplacone, .status-rozwazany { background: #E4ECF6; color: #2F4F74; }
.status-w-druku, .status-wyslane, .status-odpowiedziano, .status-przyjety { background: #E3EEDF; color: #3E6B3A; }
.status-anulowane, .status-odrzucony { background: #F3E1DE; color: #8E3B2E; }

/* --- wpisy: zamowienia, wiadomosci, pomysly (konto i panel) --- */
.wpis h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ciemny); }
.wpis .wpis-tekst { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tusz); }
.wpis .wpis-opis { font-size: 14.5px; color: var(--tusz-2); }
.wpis-gora .status { margin-left: auto; }
.wpis-gora a { color: inherit; }
.wpis-temat { font-weight: 700; color: var(--tusz); }
.wpis-kto { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.wpis-odpowiedz { border-left: 3px solid var(--zloty-jasny); padding: 4px 0 4px 14px; display: grid; gap: 4px; }
.wpis .wpis-od { font-size: 12.5px; font-weight: 700; color: var(--zloty); }
.wpis .wpis-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; }
.wpis-akcje a:not(.btn), .wpis-akcje button:not(.btn) {
  color: var(--tusz-2); text-decoration: underline; text-underline-offset: 3px;
  border: none; background: none; padding: 0; font: inherit; cursor: pointer;
}
.wpis-akcje a:not(.btn):hover, .wpis-akcje button:not(.btn):hover { color: var(--ciemny); }
/* Zamowienie: miniatura okladki po lewej - od razu widac, ktory album. */
.wpis-zamowienie { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: start; }
.wpis-srodek { display: grid; gap: 8px; min-width: 0; }
.wpis-okladka { width: 88px; }
.wpis-okladka .okl-przod { box-shadow: 0 8px 18px -10px rgba(23, 17, 14, 0.45); }
@media (max-width: 480px) {
  .wpis-zamowienie { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .wpis-okladka { width: 64px; }
}

/* Status zamowionego albumu na okladce (lewy gorny rog) - nie nad tytulem, zeby tytuly
   i przyciski wszystkich kart staly w jednej linii. */
.konto-album-okladka { position: relative; }
.konto-album-status { position: absolute; top: 10px; left: 10px; z-index: 2; }
.konto-album-status .status { box-shadow: 0 2px 8px -2px rgba(23, 17, 14, 0.25); }
.wpis-akcje .konto-anuluj { color: #A6493A; }
/* Nowa wiadomosc na koncie: przycisk nad rozmowami, formularz w karcie jak rozmowa. */
.konto-pasek { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.konto-pasek[hidden] { display: none; }
.wpis-nowa { display: grid; gap: 14px; margin-bottom: 14px; }
.wpis-nowa h3 { margin: 0; }
.wpis-nowa-rzad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.wpis-nowa .pole textarea { min-height: 110px; }
.wpis-nowa-dol { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.wpis-nowa-dol .konto-wroc {
  border: none; background: none; padding: 0; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--tusz-2); text-decoration: underline; text-underline-offset: 3px;
}


/* --- dokumenty (regulamin, prywatnosc) --- */

.dokument { display: grid; gap: 26px; }
.dokument h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--tusz); }
.dokument p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.66; color: var(--tusz-2); max-width: 78ch; }
.dokument p:last-child { margin-bottom: 0; }
.dokument ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 8px; }
.dokument li { font-size: 15.5px; line-height: 1.62; color: var(--tusz-2); max-width: 76ch; }
.dokument b { color: var(--tusz); font-weight: 700; }
.dokument .dokument-wstep { font-size: 16.5px; color: var(--tusz); padding: 14px 18px; background: #FBF5E8; border-radius: 12px; max-width: none; }
/* Dane sprzedawcy i firm, ktorych jeszcze nie znamy - widoczne z daleka, zeby zadne
   nie zostalo przed startem sprzedazy (wyszukaj w pliku: do-uzupelnienia). */
.do-uzupelnienia { background: #FCE9C8; color: #7A4B00; padding: 0 4px; border-radius: 4px; font-weight: 600; }
.spis { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.spis a { font-size: 14px; color: var(--tusz-2); background: var(--papier); border: 1px solid var(--linia); border-radius: 999px; padding: 8px 16px; }
.spis a:hover { background: #fff; text-decoration: none; }

/* --- konto: przelacznik widokow --- */

.zakladki { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.zakladki button { border: 1px solid rgba(58, 55, 51, 0.2); background: var(--papier); color: var(--tusz); font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.zakladki button:hover { background: var(--piasek); }

/* Strony konta i panelu maja w HTML-u makiety z eksportu (zakladki "Zaloguj sie /
   Zaloz konto", banner "Skrzynka zgloszen"). Do chwili, az app.js podmieni je na
   prawdziwa tresc, sa niewidoczne - inaczej migaly przy kazdym wejsciu. */
body[data-route="konto"] section.sek-banner:not(.konto-sek) { visibility: hidden; }
body[data-route="panel"] [data-screen-label] > header,
body[data-route="panel"] .sek-banner,
body[data-route="panel"] > footer { display: none !important; }

/* Naglowki kolumn stopki ("Album", "Pomoc", "Firma") - w eksporcie opacity .5 na ciemnym
   tle, czyli ok. 4:1 przy 11,5 px. Z .7 maja ponad 6:1, a dalej sa ciszej niz linki pod nimi. */
footer p[style*="text-transform: uppercase"][style*="opacity: 0.5"] { opacity: 0.7 !important; }
body[data-route="panel"] section.sek:not(.adm-miejsce) { visibility: hidden; }
.konto-czeka { min-height: 50vh; }
.konto-czeka-tekst { margin: 0; font-size: 17px; color: var(--tusz-3); }

/* --- konto: logowanie (Google, Facebook, e-mail) i albumy ---
   Gosc: dwie kolumny - okladki na piasku po lewej, logowanie po prawej, wysrodkowane
   w pionie, zeby strona nie byla waskim formularzem przy lewej krawedzi. Zalogowany:
   albumy jako okladki w siatce, tak jak stoja na polce. */

/* Gora ciasno: caly panel logowania (z przyciskiem Google na dole) ma sie zmiescic
   na ekranie laptopa bez przewijania - przycisk ponizej krawedzi ekranu nie istnieje. */
.konto-sek { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(48px, 7vw, 96px); }
.konto-uklad {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
/* Tlo pod okladkami: ten sam len co za okladkami na stronie glownej (npm run dekor).
   Wczesniej piasek z galazka w rogu - galazka obok malowanych wiankow na okladkach
   wygladala na doklejona. */
.konto-wizual {
  border-radius: 24px; aspect-ratio: 1 / 0.92;
  display: grid; place-items: center; overflow: hidden; position: relative;
  background: var(--splot) 0 0 / 260px repeat, #EAD9C0 url("decor/linen-texture.jpg") center / cover no-repeat;
}
.konto-okladki { position: relative; width: 62%; aspect-ratio: 1; }
.konto-okladki > div { position: absolute; width: 82%; }
.konto-okl-tyl { left: 0; top: 4%; transform: rotate(-7deg); filter: saturate(0.9); }
.konto-okl-przod { right: 0; bottom: 0; transform: rotate(4deg); }
.konto-okladki .okl-przod { box-shadow: 0 28px 50px -24px rgba(23, 17, 14, 0.5), 0 2px 6px rgba(23, 17, 14, 0.08); }

.konto-panel { max-width: 440px; }
.konto-eyebrow {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zloty);
}
.konto-tytul {
  margin: 0 0 10px; font-family: Karla, Helvetica, sans-serif; font-weight: 400;
  font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ciemny);
}
.konto-lead { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: var(--tusz-2); }

/* Przycisk Google wedlug jego wytycznych: jasne tlo, cienka ramka, kolorowe "G". */
.konto-dostawca {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  border: 1px solid rgba(58, 55, 51, 0.24); background: #FFFFFF; color: var(--ciemny);
  font-family: inherit; font-size: 16px; font-weight: 600; padding: 15px 22px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 17, 14, 0.06); transition: background 0.15s, box-shadow 0.15s;
}
.konto-dostawca:hover { background: #FAF7F3; box-shadow: 0 6px 16px -10px rgba(23, 17, 14, 0.35); }
.konto-dostawca:disabled { opacity: 0.6; cursor: progress; }
.konto-dostawca + .konto-dostawca { margin-top: 10px; }
.konto-apple { background: #000000; color: #FFFFFF; border-color: #000000; }
.konto-apple:hover { background: #22201E; }
/* Niebieski Facebooka z jego wytycznych - pomylic sie z innym przyciskiem nie da. */
.konto-facebook { background: #1877F2; color: #FFFFFF; border-color: #1877F2; }
.konto-facebook:hover { background: #166FE5; }

/* Panel logowania - ten sam na stronie konta i w oknie "Zapisz album" kreatora
   (panelLogowania() w app.js), dlatego style nie zaleza od tego, gdzie stoi. */
.logowanie { display: grid; gap: 10px; }
.logowanie .konto-dostawca + .konto-dostawca { margin-top: 0; }
/* W panelu tej samej wysokosci co "Zaloguj sie" - dwa rozne przyciski jeden pod drugim
   wygladaly na rozne waznosci, a to rownorzedne drogi. */
.logowanie .konto-dostawca { padding: 12px 22px; }
.logowanie [hidden] { display: none !important; }

/* Zakladki jak przelacznik: aktywna biala na piaskowym tle - widac, w ktorym trybie jestesmy. */
.logowanie-zakladki {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 4px;
  background: #F1EAE0; border-radius: 999px;
}
.logowanie-zakladki button {
  border: none; background: transparent; border-radius: 999px; padding: 8px 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--tusz-3); transition: background 0.15s, color 0.15s;
}
.logowanie-zakladki button:hover { color: var(--ciemny); }
.logowanie-zakladki button[aria-pressed="true"] {
  background: #FFFFFF; color: var(--ciemny); box-shadow: 0 1px 3px rgba(23, 17, 14, 0.12);
}

.logowanie-email { display: grid; gap: 12px; margin: 0; }
.logowanie-email label { display: grid; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; color: var(--tusz); }
.logowanie-haslo { display: grid; gap: 6px; }
.logowanie-haslo > label { font-size: 14px; font-weight: 600; color: var(--tusz); }
/* "Nie pamietasz hasla?" przy prawej krawedzi pola - tam, gdzie konczy sie wpisane haslo. */
.logowanie-haslo-dol { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.logowanie-haslo-dol .logowanie-reset { margin-left: auto; }
/* 16 px w polu: mniejsze pismo iPhone powieksza przy kliknieciu i strona odjezdza w bok. */
.logowanie-email input {
  width: 100%; box-sizing: border-box; margin: 0; padding: 10px 16px; border: 1px solid rgba(58, 55, 51, 0.24);
  border-radius: 12px; background: #FFFFFF; color: var(--ciemny); font: inherit; font-size: 16px; font-weight: 400;
}
.logowanie-email input:focus { outline: 2px solid var(--zloty-jasny); outline-offset: 1px; border-color: var(--zloty); }
/* "Pokaz" w srodku pola, po prawej - pole dostaje miejsce na niego, zeby haslo nie wchodzilo pod spod. */
.logowanie-pole { position: relative; }
.logowanie-pole input { padding-right: 76px; }
.logowanie-odkryj {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tusz-2);
}
.logowanie-odkryj:hover { background: #F3EEE8; color: var(--ciemny); }
.logowanie-reset {
  border: none; background: none; padding: 0; font: inherit; font-size: 13.5px; color: var(--tusz-2);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.logowanie-reset:hover { color: var(--ciemny); }
.logowanie-podpowiedz { margin: 0; font-size: 13px; color: var(--tusz-3); }
.logowanie-wyslij {
  margin-top: 2px; border: 1px solid var(--ciemny); background: var(--ciemny); color: #FFFFFF;
  font-family: inherit; font-size: 16px; font-weight: 600; padding: 12px 22px; border-radius: 999px; cursor: pointer;
}
.logowanie-wyslij:hover { background: #3A3733; }
.logowanie button:disabled { opacity: 0.6; cursor: progress; }
.logowanie-lub {
  display: flex; align-items: center; gap: 12px; margin: 2px 0 0;
  font-size: 13px; color: var(--tusz-3);
}
.logowanie-lub::before, .logowanie-lub::after { content: ""; flex: 1; height: 1px; background: var(--linia); }
.logowanie-komunikat { margin: 0; font-size: 14px; line-height: 1.5; }
.logowanie-komunikat.blad { color: #A6493A; }
.logowanie-komunikat.ok { color: #3E6B3A; }

.konto-drobne { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--tusz-3); }
.konto-drobne a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.konto-panel .dc-errors { margin-top: 18px; }

.konto-pusto { margin: 0 0 24px; font-size: 16px; color: var(--tusz-2); max-width: 56ch; }
.konto-albumy { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 28px; }
.konto-album > h3 { margin: 18px 0 4px; font-size: 18px; font-weight: 700; color: var(--ciemny); }
.konto-album > p { margin: 0; font-size: 13.5px; color: var(--tusz-3); }
.konto-album-okladka { display: block; transition: transform 0.2s; }
.konto-album-okladka:hover { transform: translateY(-3px); }
.konto-album-akcje { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
/* Przycisk w jednej linii - "Zobacz zamowienie" lamal sie na dwie i karta stala wyzej niz sasiednie. */
.konto-album-akcje .btn, .wpis-akcje .btn { white-space: nowrap; }
.konto-platnosc-info, .konto-album > p.konto-platnosc-info { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--tusz-3); }
.konto-usun {
  border: none; background: none; padding: 4px; font: inherit; font-size: 14px; color: var(--tusz-3);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.konto-usun:hover, .konto-usun.pytanie { color: #A6493A; }
/* Kafel "nowy album" ma wysokosc okladki - siatka nie skacze, gdy stoi obok albumow. */
.konto-nowy {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  /* Padding i srodek: w waskiej kolumnie napis lamal sie i dotykal ramki. */
  padding: 12px; text-align: center; box-sizing: border-box;
  aspect-ratio: 213 / 216; border: 1.5px dashed rgba(58, 55, 51, 0.28); border-radius: 4px 10px 10px 4px;
  color: var(--tusz-2); font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.15s;
}
.konto-nowy:hover { background: var(--piasek); text-decoration: none; }
.konto-nowy-plus {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ciemny); color: #FFF9F2; font-size: 26px; font-weight: 300; line-height: 1;
}

@media (max-width: 820px) {
  .konto-uklad { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 32px; }
  .konto-wizual { aspect-ratio: 16 / 10; order: 2; }
  .konto-okladki { width: 44%; }
  .konto-panel { max-width: none; }
}
@media (max-width: 480px) {
  .konto-albumy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .konto-album-akcje { flex-wrap: wrap; gap: 6px 12px; }
}

/* --- ostatnie wolanie --- */

.sek-final .tytul-l { margin-bottom: 26px; }

/* Plakietka reCAPTCHA (App Check) zaslaniala przyciski w prawym dolnym rogu, np. "Dalej"
   w kreatorze. Informacje o reCAPTCHA pokazujemy zamiast niej w stopce i przy platnosci. */
.grecaptcha-badge { visibility: hidden !important; }

/* Okno po powrocie z platnosci (app.js, powrotZPlatnosci) - ten sam ksztalt co okna kreatora
   (kartki.css, .ed-okno), ale tu wlasne style: kartki.css laduje sie tylko w kreatorze. */
.platnosc-okno {
  position: fixed; inset: 0; margin: auto; height: fit-content; box-sizing: border-box;
  border: none; border-radius: 16px; padding: 28px 28px 22px; max-width: 440px; width: calc(100vw - 32px);
  background: #FFFDFB; color: var(--tusz); box-shadow: 0 30px 60px -20px rgba(35, 30, 26, 0.45);
}
.platnosc-okno::backdrop { background: rgba(35, 30, 26, 0.35); }
.platnosc-okno h2 { margin: 0 0 10px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 26px; color: var(--ciemny); }
.platnosc-okno .ed-okno-tekst { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tusz); }
.platnosc-okno .platnosc-okno-dol { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }