/* povsite2.css v0.65 — ciemny filtr tylko na warstwie mapy, przelacznik warstw. v0.64 — "Udostępnij" w dymku pinezki. v0.63 — mandala w studiu przy nagrywaniu. v0.62 — czarne tlo na wszystkich stronach povsite (poza menu studia), ciemna mapa. v0.59 — ciemny motyw strony sluchacza (.pv2-dark). v0.58 — przycisk "Odsłuchaj nagranie" w menu studia. v0.57 — nowy jezyk wizualny (mobilny-first, ale responsywny),
   wdrazany strona po stronie zaczynajac od landing page. NIE dotyka
   povsite.css — stare strony, ktorych jeszcze nie przebudowalismy, maja
   zostac dokladnie takie jak byly. Kazda kolejna przebudowana strona (mapa,
   studio, odsluch) dolacza do tego pliku, nie do starego. Wzor: canvas
   projektowy "AKTUALNE — Mobilna aplikacja" (Design Canvas, 2026-09-18) —
   czerwony akcent, karty, duze zaokraglenia, mniej tekstu-wyjasnien.
   POV = ceny/kontakt platnosci sa WYLACZNIE informacyjne (BLIK bezposrednio
   do tworcy) — povsite nigdzie nie posredniczy w platnosciach. */
/* fonty: /vendor/fonts/fonts.css (link w HTML, hostowane u nas od 2026-09-25) */

:root {
  --p-red: #E5342B;
  --p-red-soft: #FDEEED;
  --p-green: #16A34A;
  --p-green-soft: #E8F8EC;
  --p-ink: #111827;
  --p-muted: #6B7280;
  --p-faint: #9CA3AF;
  --p-line: #E5E7EB;
  --p-bg: #F9FAFB;
  --p-surface: #FFFFFF;
  --p-radius: 16px;
  --p-radius-sm: 10px;
}

.pv2 { font-family: 'Karla', sans-serif; color: var(--p-ink); background: var(--p-surface); }
.pv2 * { box-sizing: border-box; }
.pv2 a { text-decoration: none; color: inherit; }

/* waska, "pionowa" kolumna nawet na duzym ekranie — strona ma wygladac jak
   ta sama aplikacja co na telefonie, nie jak rozlegly serwis marketingowy
   (2026-09-18: "szersze marginesy po bokach, by strona zrobila sie foremny
   pionowy prostokat") */
.pv2-wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; }

/* --- naglowek --- */
.pv2-header {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0 18px;
}
.pv2-logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; }
.pv2-logo svg { flex-shrink: 0; }
.pv2-nav { display: flex; align-items: center; gap: 12px; }
.pv2-nav .link { font-size: 14px; font-weight: 700; color: var(--p-ink); padding: 9px 4px; }
.pv2-nav .btn-primary-sm {
  background: var(--p-red); color: #fff; font-size: 13.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer;
}

/* auth.js widok zalogowany/niezalogowany — reskin bez zmiany logiki */
#authBox { display: flex; align-items: center; gap: 10px; font-family: 'Karla', sans-serif; }
#authBox .seg-btn {
  background: var(--p-red); color: #fff; font-size: 13.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer; font-family: 'Karla', sans-serif;
}
#authBox .auth-email { font-size: 13px; color: var(--p-muted); font-weight: 600; }
#authBox #auOut { background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--p-line); }

/* rozwiniety formularz logowania (auth.js wstrzykuje pola .field.au +
   3 przyciski) — zamiast rozpychac naglowek w prawo/przewijac sie (2026-09-18),
   wyskakuje jako wysrodkowana karta pod naglowkiem, jak reszta strony */
#authBox:has(.field.au) {
  position: absolute; top: calc(100% + 10px); left: 50%; right: auto;
  transform: translateX(-50%);
  flex-direction: column; align-items: stretch; gap: 8px;
  width: min(260px, calc(100vw - 40px));
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius);
  box-shadow: 0 10px 30px rgba(17, 24, 39, .14);
  padding: 16px; z-index: 20;
}
#authBox:has(.field.au) .seg-btn { width: 100%; justify-content: center; }
.field.au {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  background: var(--p-bg); color: var(--p-ink); font-family: 'Karla', sans-serif; font-size: 13.5px;
}
.field.au:focus { outline: none; border-color: var(--p-red); }

/* --- hero --- */
.pv2-hero { padding: 20px 0 36px; text-align: center; }
/* .pv2-eyebrow: maly czerwony naglowek-etykieta — zwykly tekst, NIE pigulka/
   button (byla tu kiedys wersja z tlem+zaokragleniem 999px, nieuzywana
   nigdzie w HTML, ale wciaz w CSS — mapa.html odziedziczyla ten wyglad
   niechcacy przez duplikat tej samej klasy nizej w pliku, zgloszone na zywo
   jako "ala button". Jedna, czysta definicja od teraz). */
.pv2-eyebrow {
  font-family: 'Karla', sans-serif; font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--p-red); margin: 0 0 6px;
}
.pv2-hero h1 { margin: 0 0 14px; font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -.01em; line-height: 1.08; }
.pv2-hero p { margin: 0 auto 28px; max-width: 46ch; font-size: 16px; color: var(--p-muted); line-height: 1.6; }
.pv2-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pv2-btn {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px;
  padding: 15px 26px; border-radius: 14px; border: none; cursor: pointer;
}
.pv2-btn-primary { background: var(--p-red); color: #fff; }
/* <a class="pv2-btn pv2-btn-primary"> bez wewnetrznego <span> (strona "Jak to dziala")
   — `.pv2 a { color: inherit }` ma wieksza wage niz sama klasa i dawal ciemny tekst na czerwonym */
.pv2 a.pv2-btn-primary { color: #fff; }
.pv2-btn-secondary { background: var(--p-surface); color: var(--p-ink); border: 1.5px solid var(--p-line); }

/* "Nagraj nowy POV" — subtelny przechodzacy odblysk swiatla (2026-09-18,
   rzadsza czestotliwosc niz pierwsza wersja). Tresc przycisku (ikona+tekst)
   ma zostac czytelna, wiec siedzi w .pv2-btn-label nad efektem (z-index). */
.pv2-btn-fx { position: relative; overflow: hidden; }
.pv2-btn-label { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 9px; }
.pv2-btn-fx::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 35%;
  height: 220%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: pv2-shine 10s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes pv2-shine {
  0% { left: -60%; }
  9% { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .pv2-btn-fx::before { animation: none; }
}

/* prosty hero: cytat + dopisek + krotki tagline — bez eyebrow/manifestu.
   2026-09-18: pierwsza wersja mialy za duzy naglowek ("Czesc!" 30px/800),
   gubila sie przez to hierarchia calej strony — cala skala scisnieta w dol. */
.pv2-quote { margin: 0; font-size: 21px; font-weight: 700; font-style: italic; letter-spacing: -.01em; }
/* tagline "Nagrywaj, udostepniaj i zarabiaj." usunieta (2026-09-18) — wieksza
   przerwa tutaj zostaje CELOWO jako wolna przestrzen przed przyciskami,
   zamiast cofac margines o to co wypadlo */
/* mniejsza, przyciagnieta blizej cytatu (bylo dalej), wyjustowana do
   prawej (nie wysrodkowana jak reszta hero) — zgloszone na zywo */
.pv2-quote-attr { margin: -3px 0 40px; font-size: 10px; font-weight: 400; color: var(--p-faint); opacity: .75; letter-spacing: .01em; text-align: right; }
.pv2-tagline { margin: 0 auto 22px; max-width: 40ch; font-size: 14.5px; color: var(--p-muted); line-height: 1.55; }
.pv2-hero-simple p { margin: 0 auto 24px; }
.pv2-hero-simple .pv2-hero-cta { flex-direction: column; align-items: stretch; }
.pv2-hero-simple .pv2-btn { justify-content: center; width: 100%; }
@media (min-width: 640px) {
  .pv2-hero-simple .pv2-hero-cta { flex-direction: row; }
  /* oba przyciski dziela rzad po rowno i razem wypelniaja szerokosc kolumny
     (2026-09-18: byly wasko-tresciowe, zostawialy pustke po bokach) */
  .pv2-hero-simple .pv2-btn { width: auto; flex: 1; }
  .pv2-btn { padding: 17px 30px; font-size: 15.5px; }
}

/* --- sekcje --- */
.pv2-section { padding: 40px 0; border-top: 1px solid var(--p-line); }
.pv2-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
.pv2-section-title { font-size: 17px; font-weight: 800; margin: 0; }
.pv2-section-link { font-size: 13.5px; font-weight: 700; color: var(--p-red); }
.pv2-section-sub { margin: -14px 0 22px; font-size: 13px; color: var(--p-muted); }

/* --- karty przykladowych/nowych nagran (na klasach z povsite-rivers-list.js) --- */
.pv2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pv2-cards .home-row {
  display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--p-surface);
  border: 1px solid var(--p-line); border-radius: var(--p-radius); transition: border-color .15s;
}
.pv2-cards .home-row:hover { border-color: var(--p-red); }
.pv2-cards .home-row-cover, .pv2-cards .home-row-fallback {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.pv2-cards .home-row-fallback {
  display: flex; align-items: center; justify-content: center; background: var(--p-red-soft);
  color: var(--p-red); font-weight: 800; font-size: 13px;
}
.pv2-cards .home-row-body { min-width: 0; flex-grow: 1; }
.pv2-cards .home-row-title { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-cards .home-row-meta { font-size: 12px; color: var(--p-faint); margin-top: 2px; }
.pv2-cards .home-row-hook { font-size: 12px; color: var(--p-muted); margin-top: 4px; }
.pv2-cards .hint { grid-column: 1/-1; color: var(--p-faint); font-size: 13.5px; }

/* wariant "lista" (strona glowna, feed uzytkownikow) — jeden rzad zamiast
   siatki kart, bez opisu pod tytulem, zeby zostac zwiezle jak w makiecie */
.pv2-cards-list { display: flex; flex-direction: column; gap: 2px; }
.pv2-cards-list .home-row { padding: 10px 4px; border: none; border-bottom: 1px solid var(--p-line); border-radius: 0; }
.pv2-cards-list .home-row:last-child { border-bottom: none; }
.pv2-cards-list .home-row-hook { display: none; }

/* jak .pv2-cards-list, ale z WIDOCZNYM opisem (hook) — "Najnowsze nagrania"
   pokazuje realny opis AI kazdego glosu, w odroznieniu od "Społeczność"
   (konta, bez opisu, stad .pv2-cards-list wyzej go chowa) */
.pv2-cards-list-desc { display: flex; flex-direction: column; gap: 2px; }
.pv2-cards-list-desc .home-row { padding: 12px 4px; border: none; border-bottom: 1px solid var(--p-line); border-radius: 0; align-items: flex-start; }
.pv2-cards-list-desc .home-row:last-child { border-bottom: none; }
.pv2-cards-list-desc .home-row-hook {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pv2-search {
  display: flex; align-items: center; gap: 8px; background: var(--p-bg); border: 1px solid var(--p-line);
  border-radius: 999px; padding: 11px 16px; margin-bottom: 18px; max-width: 420px;
}
.pv2-search input { flex-grow: 1; border: none; outline: none; background: transparent; font-family: 'Karla', sans-serif; font-size: 13.5px; color: var(--p-ink); }
.pv2-search svg { flex-shrink: 0; }

/* --- role/persony jako kompaktowe chipy zamiast rozbudowanych kart --- */
.pv2-personas { display: flex; gap: 10px; flex-wrap: wrap; }
.pv2-persona {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--p-bg);
  border: 1px solid var(--p-line); border-radius: 999px; font-size: 13.5px; font-weight: 700;
}
.pv2-persona svg { flex-shrink: 0; color: var(--p-red); }

/* --- jak to dziala: 3 kroki --- */
.pv2-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.pv2-step .num {
  width: 32px; height: 32px; border-radius: 10px; background: var(--p-red-soft); color: var(--p-red);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; margin-bottom: 12px;
}
.pv2-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.pv2-step p { margin: 0; font-size: 13.5px; color: var(--p-muted); line-height: 1.5; }

/* --- karta "Zacznij nagrywac" (povsite-home.html) --- */
.pv2-create-card {
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius);
  padding: 20px; margin-top: 4px; text-align: left;
}
.pv2-create-card-title { font-weight: 700; font-size: 15px; margin: 0 0 14px; }
.pv2-create-card blockquote { margin: 0 0 16px; color: var(--p-muted); font-size: 14px; font-style: italic; line-height: 1.5; }
.pv2-create-card blockquote cite { display: block; margin-top: 6px; font-size: 12px; font-style: normal; color: var(--p-faint); }
.pv2-create-fields { display: flex; flex-direction: column; gap: 12px; }
.pv2-field, .pv2-select {
  width: 100%; box-sizing: border-box; font-family: 'Karla', sans-serif; font-size: 13.5px;
  padding: 11px 14px; border-radius: var(--p-radius-sm); border: 1px solid var(--p-line);
  background: var(--p-bg); color: var(--p-ink);
}
.pv2-field:focus, .pv2-select:focus { outline: none; border-color: var(--p-red); }
.pv2-field::placeholder { color: var(--p-faint); }
.pv2-check-row {
  display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px;
  color: var(--p-muted); line-height: 1.4; margin-top: 2px; cursor: pointer;
}
.pv2-check-row input { margin-top: 2px; flex-shrink: 0; }

/* --- FAQ --- */
.pv2-faq details { border-bottom: 1px solid var(--p-line); padding: 16px 0; }
.pv2-faq summary { cursor: pointer; font-size: 14.5px; font-weight: 700; list-style: none; }
.pv2-faq summary::-webkit-details-marker { display: none; }
.pv2-faq summary::after { content: '+'; float: right; color: var(--p-red); font-weight: 800; }
.pv2-faq details[open] summary::after { content: '−'; }
.pv2-faq p { margin: 10px 0 0; font-size: 13.5px; color: var(--p-muted); line-height: 1.6; }

/* --- stopka --- */
.pv2-footer { padding: 24px 0; border-top: 1px solid var(--p-line); display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pv2-footer span, .pv2-footer a { font-size: 12px; color: var(--p-faint); font-weight: 600; }
.pv2-footer a:hover { color: var(--p-red); }
.pv2-footer .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--p-line); }

@media (max-width: 640px) {
  .pv2-hero { padding: 20px 0 32px; }
  .pv2-header { padding: 16px 0; flex-wrap: wrap; gap: 10px; }
  .pv2-nav { gap: 8px; }
  .pv2-nav .btn-primary-sm { display: none; }
  #authBox .seg-btn { padding: 9px 14px; font-size: 12.5px; white-space: nowrap; }
  .pv2-logo { font-size: 18px; }
  .pv2-wrap { padding: 0 16px; }
}

/* =========================================================
   MAPA (povsite-mapa.html) — przebudowa 2026-09-22 z ukladu povsite.css
   (stary "wrap-wide"/"filter-chip"/"map-hero") na jezyk .pv2. Mapie
   potrzeba szerszej kolumny niz reszta strony (640px za waskie na Leaflet),
   stad .pv2-wrap-wide obok istniejacego .pv2-wrap zamiast go zmieniac —
   .pv2-header/.pv2-footer/#authBox zostaja DOKLADNIE te same co gdzie
   indziej (spojny naglowek na calej stronie). ========================= */
.pv2-wrap-wide { max-width: 1080px; }

.pv2-mapa-hero { padding: 8px 0 4px; }
/* .pv2-eyebrow uzywany tu zdefiniowany raz, na gorze pliku przy .pv2-hero —
   byl tu kiedys duplikat (przemianowany z "pv2-mapa-eyebrow" 2026-09-22),
   usuniety, bo dwie definicje tej samej klasy niechcacy mieszaly wlasciwosci
   (zgloszone na zywo jako eyebrow na /posluchaj wygladajacy jak button). */
.pv2-mapa-title { font-size: clamp(26px, 5vw, 36px); font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; }
.pv2-mapa-sub { color: var(--p-muted); font-size: 14.5px; margin: 0; }

.pv2-mapa-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 16px; }
.pv2-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Karla', sans-serif; font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--p-line);
  background: var(--p-surface); color: var(--p-muted); cursor: pointer;
}
.pv2-chip:hover { border-color: var(--p-red); color: var(--p-red); }
.pv2-chip.active { background: var(--p-red-soft); border-color: var(--p-red); color: var(--p-red); }

.pv2-mapa-field-row { margin-bottom: 18px; }
.pv2-mapa-field-row .hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--p-faint); }
#fieldModeBtn.active { background: var(--p-red); border-color: var(--p-red); color: #fff; }

.pv2-mapa-wrap {
  border: 1px solid var(--p-line); border-radius: var(--p-radius); overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 48px -26px rgba(15,23,42,.3);
}
#mapEl { width: 100%; height: 65vh; min-height: 420px; background: var(--p-bg); }

/* popup Leaflet — nadpisanie domyslnego bialego dymka na karte w stylu pv2 */
.pv2-mapa .leaflet-popup-content-wrapper { border-radius: 12px; padding: 2px; }
.pv2-mapa .leaflet-popup-content { margin: 12px 14px; }
/* mapa na czarnym tle (2026-09-25): te same kafelki OSM, tylko odwrocone
   kolorystycznie filtrem (bez nowego dostawcy map — patrz polityka § 17) */
.pv2-dark .leaflet-container { background: #0B0B0D; }
.pv2-dark .pv-osm-tiles { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }   /* tylko mapa, nie zdjecia lotnicze */
.pv2-dark .leaflet-control-layers { background: #18181B; color: #F4F4F5; border: 1px solid #27272A; border-radius: 10px; font-family: 'Karla', sans-serif; font-size: 13px; }
.pv2-dark .leaflet-control-layers label { margin: 3px 0; cursor: pointer; }
.pv2-dark .leaflet-bar a, .pv2-dark .leaflet-bar a:hover { background: #18181B; color: #F4F4F5; border-bottom-color: #27272A; }
.pv2-dark .leaflet-bar { border-color: #27272A; }
.pv2-dark .leaflet-control-attribution { background: rgba(0,0,0,.65); color: #A1A1AA; }
.pv2-dark .leaflet-control-attribution a { color: #D4D4D8; }
.pv2-dark .leaflet-popup-content-wrapper, .pv2-dark .leaflet-popup-tip { background: #18181B; color: #F4F4F5; }
.pin-popup { font-family: 'Karla', sans-serif; min-width: 180px; }
.pin-popup b { display: block; font-weight: 800; font-size: 15px; }
.pin-popup .pin-cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--p-red); margin: 4px 0 0;
}
.pin-popup .pin-sub { font-size: 12.5px; color: var(--p-muted); margin: 6px 0 10px; }
.pin-popup .pin-sub a { color: var(--p-red); text-decoration: none; }
.pin-popup .pin-play {
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 12.5px;
  background: var(--p-red); color: #fff; border: none; border-radius: 8px;
  padding: 8px 12px; cursor: pointer;
}

/* "Udostepnij" w dymku pinezki (2026-09-26) */
.pin-popup .pin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pin-popup .pin-share {
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 12.5px;
  background: transparent; color: var(--p-ink); border: 1px solid var(--p-line); border-radius: 8px;
  padding: 8px 12px; cursor: pointer;
}
.pin-popup .pin-share:hover { border-color: var(--p-red); }
.pin-popup .pin-share-more { margin-top: 10px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.pin-popup .pin-share-more[hidden] { display: none; }
.pin-popup .pin-share-msg { width: 100%; color: var(--p-muted); }
.pin-popup .pin-share-more a { color: var(--p-red); font-weight: 700; text-decoration: none; }

/* grupowanie bliskich pinezek (Leaflet.markercluster) — babelka w kolorze marki */
.pv-cluster-wrap { background: transparent; border: none; }
.pv-cluster {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-family: 'Karla', sans-serif; font-weight: 800; font-size: 13px;
  background: var(--p-red); color: #fff; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15,23,42,.35);
}

/* tryb terenowy: toast dopasowania — appendChild leci prosto do body,
   ktore ma klase .pv2-mapa, wiec ten selektor i tak trafia (body jest
   ancestorem), nie trzeba osobnego zaczepienia */
.pv2-mapa .field-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 2000; width: min(360px, calc(100vw - 32px));
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 14px;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 20px 44px -18px rgba(15,23,42,.4);
  font-family: 'Karla', sans-serif;
}
.field-toast-body { flex: 1; min-width: 0; }
.field-toast-body b { display: block; font-weight: 800; font-size: 14px; }
.field-toast-body p { margin: 3px 0 0; font-size: 12.5px; color: var(--p-muted); }
.field-toast-play {
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 12.5px;
  background: var(--p-red); color: #fff; border: none; border-radius: 8px;
  padding: 9px 12px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.field-toast-close {
  background: none; border: none; color: var(--p-faint); font-size: 18px;
  cursor: pointer; flex-shrink: 0; line-height: 1; padding: 4px;
}
.field-toast-close:hover { color: var(--p-ink); }

@media (max-width: 640px) {
  #mapEl { height: 56vh; }
}

/* =========================================================
   SŁUCHACZ (povsite-river.html, /posluchaj/{rid}) — przebudowa 2026-09-22,
   ten sam ruch co mapa: stary povsite.css (wrap/site/river-hero/stat-badges/
   voice-*) zastapiony jezykiem .pv2. Strona publiczna (odsluch bez
   logowania) — bez #authBox, tak jak bylo.
   Tego samego dnia lista per-nagranie i synteza calej rzeki w watki
   zamienily sie miejscami DWA razy (zgloszone na zywo za kazdym razem) —
   finalnie zostaje lista per-nagranie (#pvVoiceAccordion/.voice-row/
   .row-play), KAZDY wiersz z wlasnym title/summary z AI (distill.
   analyze_drop). Synteza calej rzeki (river_essence/"watki") zniknela z
   tej strony calkowicie — stąd .pv-essence-intro/.pv-threads/.pv-thread/
   .ch-play, ktorych povsite-river.js juz nie uzywa, TEZ zniknely stad.
   ========================================= */
/* Rytm pionowy tej strony (zgloszone na zywo: "cos za duze cos za male cos
   za blisko" — bylo 8/14/20/22/26px na chybil trafil, zebrane z kolejnych
   drobnych poprawek). Od teraz DWIE wartosci, konsekwentnie marginesem-OD-
   GORY (margin-top) kazdego bloku — dzieki temu odstep nie zalezy od tego,
   czy poprzedni (warunkowo ukrywany) element akurat jest widoczny: 24px
   miedzy blokami (tytul/staty/pasek/przyciski/szukaj/lista/wesprzyj/zapis/
   udostepnij), 8px miedzy podpisem a tym, czego dotyczy (pasek -> "Wybierz
   fragment..."). */
.pv2-river-hero { padding: 0; }
.pv2-river-title { font-size: clamp(26px, 5vw, 36px); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.pv2-river-sub { color: var(--p-muted); font-size: 14.5px; line-height: 1.5; margin: 24px 0 0; }

.pv2-river-stats { display: flex; gap: 10px; margin-top: 24px; }
.stat-badge {
  flex: 1; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  padding: 12px 10px; text-align: center;
}
.stat-badge .num { font-size: 20px; font-weight: 800; }
.stat-badge .lbl { font-size: 11px; color: var(--p-muted); margin-top: 2px; }

/* pasek "cala rzeka na jednym pasku" — segmenty koloruje JS inline (styl
   width/background per glos), tu tylko ksztalt kontenera. Wysokosc 26px
   (bylo 14px — zgloszone na zywo jako "za waski") zeby kolory segmentow
   bylo realnie widac, nie tylko cienka kreske. */
/* przewijalny w poziomie, gdy segmentow jest duzo — JS (povsite-river.js)
   daje kazdemu segmentowi min. szerokosc max(36px, proporcja%): przy
   niewielu glosach wygrywa procent (suma = 100%, jak dawniej), a juz od
   ok. 10 glosow (na typowej waskiej kolumnie tej strony) 36px zaczyna
   przekraczac to, co zmiesciloby sie procentowo, wiec pasek robi sie
   SZERSZY niz kontener. Pierwotny dolny limit byl czysto procentowy (2%) i
   prawie nigdy realnie nie wymuszal przewijania przy zwyklych nagraniach —
   zgloszone na zywo: "powinien dzialac juz od 10 nagran", nie dopiero przy
   setkach/tysiacach. Wczesniej z overflow:hidden nadmiar byl tez po prostu
   ucinany (czesc glosow NIEOSIAGALNA), teraz przewija sie zamiast pekac. */
.pv2-river-timeline {
  display: flex; height: 26px; border-radius: 10px; overflow-x: auto; overflow-y: hidden; cursor: pointer;
  margin-top: 24px; box-shadow: inset 0 0 0 1px var(--p-line); -webkit-overflow-scrolling: touch;
}
.pv2-river-timeline span { flex-shrink: 0; }
.pv2-river-timeline-hint { font-size: 12px; color: var(--p-faint); margin: 8px 0 0; }

/* "Słuchaj"/"Zobacz na mapie" — byly waskie, tresciowe, zostawialy pustke
   po bokach (zgloszone na zywo); tu, w odroznieniu od .pv2-hero-simple na
   landingu, nie dotykamy elementow <p> (eyebrow/sub maja wlasne marginesy,
   ktore selektor ".pv2-hero-simple p" by nadpisal) */
.pv2-river-hero .pv2-hero-cta { flex-direction: column; align-items: stretch; margin-top: 24px; }
.pv2-river-hero .pv2-btn { justify-content: center; width: 100%; }
@media (min-width: 640px) {
  .pv2-river-hero .pv2-hero-cta { flex-direction: row; }
  .pv2-river-hero .pv2-btn { width: auto; flex: 1; }
}

/* tlo pola szukania celowo ciemniejsze niz --p-bg (zgloszone na zywo: pasek
   szukania zlewal sie z tlem strony, prawie niewidoczny) */
.pv2-river-search { position: relative; margin-top: 24px; }
/* bez ramki — z ramka wygladalo jak KOLEJNY przycisk w rzedzie ponizej
   (Wesprzyj/Daj znac/Udostepnij), zgloszone na zywo jako powtarzajace sie
   ramki "meczace oczy"; ciemniejsze tlo samo w sobie wystarcza, zeby pole
   bylo widoczne na bialym tle */
.pv2-river-search .pv2-field { background: #EDEFF3; border-color: transparent; }
/* ciemny motyw strony sluchacza (body.pv2-dark, 2026-09-25): czarne tlo jak
   obrazek podgladu linku (backend/mandala_card.py) — podmiana tych samych
   zmiennych, reszta ukladu bez zmian */
.pv2.pv2-dark {
  --p-ink: #F4F4F5; --p-muted: #A1A1AA; --p-faint: #71717A; --p-line: #27272A;
  --p-bg: #111114; --p-surface: #000000; --p-red-soft: #2A1210; --p-green-soft: #0F2417;
  color-scheme: dark;
}
html:has(> body.pv2-dark) { background: #000; }
.pv2-dark .pv2-river-search .pv2-field { background: #18181B; }
.pv2-dark .pv2-search-hits { box-shadow: 0 12px 32px -12px rgba(0,0,0,.9); }
.pv2-search-hits {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  box-shadow: 0 12px 32px -12px rgba(15,23,42,.3); overflow: hidden; max-height: 320px; overflow-y: auto;
}
.search-hit {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 10px 14px; border-bottom: 1px solid var(--p-line); font-family: 'Karla', sans-serif;
}
.search-hit:last-child { border-bottom: none; }
.search-hit:hover { background: var(--p-bg); }
.search-hit .who { display: block; font-size: 11px; font-weight: 700; color: var(--p-red); margin-bottom: 2px; }
.search-hit .text { display: block; font-size: 13px; color: var(--p-ink); line-height: 1.4; }

/* akordeon "Nagrania z opisem" (#pvVoiceAccordion) — ten sam +/− co
   .pv2-faq. Uzywane tez przez studio (#essenceBox, patrz sekcja STUDIO
   nizej) — celowo bez scopingu, jeden wyglad wszedzie. margin-top (nie
   padding-top) zeby trzymac sie tej samej skali 24px co reszta strony;
   padding-bottom zostaje jako WEWNETRZNY oddech przed linia, nie zewnetrzny
   odstep. */
.res-summary { border-bottom: 1px solid var(--p-line); margin-top: 24px; padding-bottom: 16px; }
.res-summary summary { cursor: pointer; font-size: 14.5px; font-weight: 700; list-style: none; }
.res-summary summary::-webkit-details-marker { display: none; }
.res-summary summary::after { content: '+'; float: right; color: var(--p-red); font-weight: 800; }
.res-summary[open] summary::after { content: '−'; }

/* max-height+scroll, nie nieskonczone rozwijanie — przy koncie z setkami/
   tysiacami glosow ta lista NIE moze rozwalic dlugosci calej strony
   (zgloszone na zywo) */
.voice-list { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; }
.voice-list .hint { color: var(--p-muted); font-size: 13px; margin: 0; }
.voice-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--p-line); }
.voice-row:first-child { border-top: none; padding-top: 0; }
.voice-row .who { flex: 1; min-width: 0; }
.voice-row .name { font-size: 13.5px; font-weight: 700; }
.voice-row .desc { font-size: 12.5px; color: var(--p-muted); line-height: 1.45; margin-top: 3px; }
.voice-row .meta { font-size: 11.5px; color: var(--p-faint); margin-top: 5px; }
/* ?ep={id} na /posluchaj (link "🔗 Link" ze "Zarządzania odcinkami" w Studio)
   — podswietla dokladnie ten wpis, zeby link naprawde "prowadzil do odcinka",
   nie tylko do calego nagrania (zgloszone na zywo). */
.voice-row-highlight { background: var(--p-red-soft); border-radius: var(--p-radius-sm); padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.row-play {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--p-line);
  background: var(--p-surface); color: var(--p-ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; margin-top: 1px;
}
.row-play.playing { background: var(--p-red); border-color: var(--p-red); color: #fff; }

/* "Wesprzyj"/"Udostepnij" — oba ZWYKLE linki, nie obramowane przyciski.
   "Wesprzyj" byl kolejno: pelnym czerwonym tlem, potem czerwonym obramowaniem
   — wciaz za mocny w tym miejscu (zgloszone na zywo), wiec teraz ten sam
   skromny styl co "Udostępnij tę stronę", tuz pod nim. Jedyny prawdziwy
   przycisk w dolnej czesci strony zostaje "Daj znać" (zapis na powiadomienia). */
.pv2-text-link {
  all: unset; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 24px; padding: 10px 0; box-sizing: border-box;
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 13.5px;
  color: var(--p-muted); cursor: pointer;
}
.pv2-text-link:hover { color: var(--p-red); }

.pv2-river-subscribe {
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius);
  padding: 20px; margin-top: 24px;
}
.pv2-river-subscribe .sub-title { font-weight: 700; font-size: 15px; margin: 0 0 14px; }
.sub-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-row .pv2-field { flex: 1; min-width: 160px; }
.sub-row .pv2-btn { flex-shrink: 0; padding: 11px 18px; font-size: 13.5px; }
.pv2-river-subscribe .hint { margin: 10px 0 0; font-size: 12px; color: var(--p-faint); }

@media (max-width: 640px) {
  .pv2-river-stats { flex-wrap: wrap; }
}

/* =========================================================
   STUDIO (povsite-studio.html) — ta sama logika river.js/auth.js
   (dzielona z rezgez, zero duplikacji), tylko nowy jezyk wizualny
   nalozony przez .pv2-studio. Zero zmian w id/klasach, ktorych uzywa JS
   do przelaczania stanu (.ptt.live, .mode-btn.active, .dial-state.ready,
   body.is-owner/.live) — tylko ich wyglad.

   PRZEBUDOWA 2026-09-19: system "zakladek" (4 taby widoczne naraz) i
   pozniejszy hack ".pv2-manage-open" ZASTAPIONE jednym systemem ekranow
   canva sterowanym body[data-view] — patrz sekcja "SYSTEM WIDOKOW" nizej
   i skrypt w povsite-studio.html. Kazdy ekran to jeden <section
   data-view-name="..."> pokazywany w calosci, gdy body[data-view] na
   niego wskazuje; reszta ma display:none. Audyt: "kilka epok
   konstrukcyjnych nalozonych na siebie na jednej stronie" — ta wersja to
   jedna, spojna architektura zamiast doklejek na doklejki. */
.pv2-studio { font-family: 'Karla', sans-serif; color: var(--p-ink); background: var(--p-surface); }
/* studio na czarnym tle (2026-09-25, decyzja wlasciciela: "wszedzie czarny
   poza sekcja menu") — nagrywanie z osia czasu, formularz odcinka i "Gotowe!";
   Menu konta i jego podstrony (odcinki, glosy, eksport, ustawienia) zostaja
   jasne. Podmiana zmiennych OBU arkuszy: povsite2 (--p-*) i starego
   povsite.css (--bg/--surface/--ink...), z ktorego studio nadal korzysta. */
.pv2-studio:is([data-view="record"], [data-view="episode"], [data-view="gotowe"]) {
  --p-ink: #F4F4F5; --p-muted: #A1A1AA; --p-faint: #71717A; --p-line: #27272A;
  --p-bg: #111114; --p-surface: #000000; --p-red-soft: #2A1210; --p-green-soft: #0F2417;
  --bg: #111114; --surface: #000000; --ink: #F4F4F5; --muted: #A1A1AA; --line: #27272A;
  --accent: #E4E4E7; --accent-ink: #000000; --trail: #A1A1AA;
  color-scheme: dark;
}
html:has(> body.pv2-studio:is([data-view="record"], [data-view="episode"], [data-view="gotowe"])) { background: #000; }
.pv2-studio .stage { max-width: 640px; margin: 0 auto; padding: 0 20px; }

.pv2-studio header.masthead {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; padding: 20px 0 16px; border-bottom: none; margin-bottom: 8px;
}
.pv2-studio .wordmark { font-size: 18px; font-weight: 800; color: var(--p-ink); }
.pv2-studio .wordmark .dot { color: var(--p-red); }
.pv2-studio .share-btn {
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 999px; border: none;
  background: var(--p-red); color: #fff; cursor: pointer;
}
.pv2-studio .share-btn:hover { opacity: .92; }

.pv2-studio .res-head { margin: 6px 0 20px; }
.pv2-studio .res-title {
  font-family: 'Karla', sans-serif; font-weight: 800; font-size: clamp(22px, 5vw, 30px);
  text-transform: none; letter-spacing: -.01em; line-height: 1.15; color: var(--p-ink);
}
.pv2-studio .res-desc { color: var(--p-muted); font-size: 14px; margin-top: 6px; }
/* przelacznik nagran pod tytulem (limit 3 na konto) */
.pv2-studio .rec-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pv2-studio .rec-switch-info { font-size: 13px; color: var(--p-muted); margin-right: 4px; }
.pv2-studio .rec-switch-btn {
  all: unset; cursor: pointer; font-family: 'Karla', sans-serif; font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--p-line); color: var(--p-ink); background: var(--p-surface);
}
.pv2-studio .rec-switch-btn:hover { border-color: var(--p-ink); }
.pv2-studio .rec-switch-new { color: var(--p-red); border-color: var(--p-red); }

.pv2-studio .hint { color: var(--p-muted); font-size: 13px; }
.pv2-studio .hint-warn { color: var(--p-red); font-weight: 600; }
.pv2-studio .consent { font-family: 'Karla', sans-serif; color: var(--p-faint); font-size: 11px; }

.pv2-studio .field {
  width: 100%; box-sizing: border-box; font-family: 'Karla', sans-serif; font-size: 13.5px;
  padding: 10px 12px; border-radius: var(--p-radius-sm); border: 1px solid var(--p-line);
  background: var(--p-bg); color: var(--p-ink);
}
.pv2-studio .field:focus { outline: none; border-color: var(--p-red); }
.pv2-studio .field::placeholder { color: var(--p-faint); }

/* #epCategoryPicker (2026-09-22, zgloszone na zywo: "wsiowe piktogramy") —
   custom dropdown zamiast <select>, zeby dalo sie pokazac jednokolorowe
   ikonki (patrz .cat-ic nizej) zamiast kolorowych emoji, ktorych natywny
   <select> nie potrafi pokazywac inaczej. */
.pv2-studio .cat-picker { position: relative; }
.pv2-studio .cat-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; }
.pv2-studio .cat-picker-trigger-content { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-studio .cat-picker-caret { flex-shrink: 0; color: var(--p-faint); transition: transform .15s; }
.pv2-studio .cat-picker-trigger[aria-expanded="true"] .cat-picker-caret { transform: rotate(180deg); }
.pv2-studio .cat-picker-menu {
  /* z-index wysoki celowo — #epMapPicker (Leaflet) nizej w tym samym
     formularzu ustawia wlasne panele az do z-index:700 (popupPane) i
     kontrolki (zoom +/-) na z-index:1000 (.leaflet-top/.leaflet-bottom),
     wiec nawet 800 nie wystarczalo i przyciski zoom przebijaly rozwiniete
     menu (zlapane na testach) */
  position: absolute; z-index: 1200; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto; background: var(--p-surface);
  border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  box-shadow: 0 10px 28px rgba(17,24,39,.14); padding: 4px;
}
.pv2-studio .cat-picker-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 10px; border: none; background: none; border-radius: 8px;
  font-family: 'Karla', sans-serif; font-size: 13.5px; color: var(--p-ink); cursor: pointer;
}
.pv2-studio .cat-picker-opt:hover, .pv2-studio .cat-picker-opt.active { background: var(--p-bg); }
.pv2-studio .cat-picker-opt.active { color: var(--p-red); font-weight: 700; }
.pv2-studio .cat-picker-opt.active .cat-ic, .pv2-studio .cat-picker-opt:hover .cat-ic { color: var(--p-red); }

/* znaczek/ikonka kategorii — jednolity, jednokolorowy styl, te same SVG co
   filtry na mapie (.pv2-mapa-filters nizej); litera zamiast piktogramu tam,
   gdzie nie ma dobrego symbolu (Historyk). */
.cat-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; flex-shrink: 0; color: var(--p-muted); }
.cat-ic-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border: 1.4px solid currentColor; border-radius: 3px;
  font-size: 9px; font-weight: 800; line-height: 1; flex-shrink: 0;
}

.pv2-studio .seg-btn {
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--p-line);
  background: var(--p-surface); color: var(--p-ink); cursor: pointer;
}
.pv2-studio .seg-btn:hover { border-color: var(--p-red); color: var(--p-red); }
.pv2-studio .seg-btn.last-used { border-color: var(--p-red); color: var(--p-red); }

.pv2-studio .console, .pv2-studio .cockpit {
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius);
  padding: 20px; margin: 16px 0 0; box-shadow: none;
}
.pv2-studio .ck-group-label {
  font-family: 'Karla', sans-serif; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--p-faint); margin-bottom: 10px; font-weight: 700;
}
.pv2-studio .cockpit > .ck-group-label:first-child,
.pv2-studio .console > .ck-group-label:first-child {
  font-size: 15px; font-weight: 800; letter-spacing: 0; color: var(--p-ink);
  margin-bottom: 14px; font-family: 'Karla', sans-serif; text-transform: none;
}

.pv2-studio .dial {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
  background: none; border: none; padding: 0; font-family: 'Karla', sans-serif;
}
.pv2-studio .lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--p-line); flex-shrink: 0; }
.pv2-studio.live .lamp, .pv2-studio .lamp.ready { background: var(--p-red); }
.pv2-studio .dial-state { font-size: 12.5px; letter-spacing: .04em; color: var(--p-muted); font-weight: 700; }
.pv2-studio .dial .dial-state.ready { color: var(--p-red); }
.pv2-studio .dial-time { margin-left: auto; font-size: 19px; color: var(--p-ink); font-variant-numeric: tabular-nums; font-weight: 700; }

.pv2-studio .mode-row { display: flex; gap: 8px; margin: 16px 0 6px; flex-wrap: wrap; }
.pv2-studio .mode-btn {
  font-family: 'Karla', sans-serif; font-size: 12.5px; font-weight: 700;
  padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--p-line);
  background: var(--p-surface); color: var(--p-muted); cursor: pointer;
}
.pv2-studio .mode-btn.active { border-color: var(--p-red); color: var(--p-red); background: var(--p-red-soft); }

.pv2-studio .ptt {
  width: 100%; padding: 18px; border: none; border-radius: var(--p-radius);
  background: var(--p-red); color: #fff;
  font-family: 'Karla', sans-serif; font-weight: 800; font-size: 16px;
  text-transform: none; letter-spacing: 0; cursor: pointer;
  transition: transform .06s, background .2s; margin-top: 14px;
}
.pv2-studio .ptt:hover { background: #C92B23; }
.pv2-studio .ptt:active { transform: translateY(1px); }
.pv2-studio .ptt.live { background: #B91C1C; box-shadow: 0 14px 28px -12px rgba(185,28,28,.5); }
.pv2-studio .ptt.live:hover { background: #991B1B; }
.pv2-studio .ptt:disabled { background: var(--p-line); color: var(--p-faint); cursor: wait; box-shadow: none; }

.pv2-studio .dual-cta { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pv2-studio .dual-cta .seg-btn { flex: 1; min-width: 160px; padding: 13px 10px; border-radius: var(--p-radius-sm); font-size: 13.5px; font-weight: 700; text-align: center; }
.pv2-studio .dual-cta .cta-link { background: var(--p-red); color: #fff; border: none; }
.pv2-studio .dual-cta .cta-link:hover { background: #C92B23; }
.pv2-studio .dual-cta .cta-invite { background: transparent; border: 1.5px solid var(--p-red); color: var(--p-red); }
.pv2-studio .dual-cta .cta-invite:hover { background: var(--p-red-soft); }

.pv2-studio .danger-zone { border: 1px dashed var(--p-red); border-radius: var(--p-radius); padding: 18px 20px; margin-top: 18px; }
.pv2-studio .danger-zone .ck-group-label { color: var(--p-red); font-size: 14px; font-weight: 800; text-transform: none; font-family: 'Karla', sans-serif; margin-bottom: 10px; }
.pv2-studio .danger-zone .seg-btn { border-color: var(--p-red); color: var(--p-red); margin-top: 10px; }
.pv2-studio .danger-zone .seg-btn:hover { background: var(--p-red-soft); }

.pv2-studio .upload-status { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); padding: 16px 18px; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pv2-studio .us-row { color: var(--p-muted); font-size: 13px; }
.pv2-studio .us-row.us-active { color: var(--p-ink); font-weight: 700; }

.pv2-studio .timeline { border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); overflow: hidden; }
.pv2-studio .cut-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pv2-studio .cut-chip { font-family: 'Karla', sans-serif; font-size: 11px; color: var(--p-muted); background: var(--p-bg); border: 1px solid var(--p-line); border-radius: 999px; }

@media (max-width: 640px) {
  .pv2-studio .stage { padding: 0 16px; }
}

/* --- platnosc odcinka: FREE/Platne (canva "Nowy odcinek") --- */
.pv2-studio .ep-price-row { display: flex; gap: 8px; margin: 4px 0 10px; }

/* "📍 Jestem tutaj" poza zwinieta sekcja "Moment i lokalizacja" (faza 1
   planu wzrostu, 2026-09-24) — .pv2-text-link ma margines 24px pod stope
   strony sluchacza, tu za duzo. */
.pv2-studio .ep-locate-row { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.pv2-studio .ep-locate-row .pv2-text-link { margin-top: 0; padding: 8px 0; }
.pv2-studio #epLocateMsg { margin: 2px 0 8px; }

/* "Pomysł na nagranie" nad przyciskiem "Nagraj" (faza 1 planu wzrostu,
   2026-09-24). Znika: podczas nagrywania (body.live), w trybach
   "wcinam sie"/"odpowiadam" (tam kontekst jest juz dany) i przy sesji
   zaproszenia. :has() — w starej przegladarce bez wsparcia podpowiedz po
   prostu zostaje widoczna, nic sie nie psuje. */
:is(.pv2-studio, .pv2-guest) .rec-prompt {
  background: var(--p-bg); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  padding: 12px 14px; margin: 4px 0 12px;
}
:is(.pv2-studio, .pv2-guest) .rec-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:is(.pv2-studio, .pv2-guest) .rec-prompt-head span { font-size: 12px; font-weight: 700; color: var(--p-muted); }
:is(.pv2-studio, .pv2-guest) .rec-prompt-next {
  all: unset; cursor: pointer; font-family: 'Karla', sans-serif; font-size: 12.5px; font-weight: 700;
  color: var(--p-red); padding: 4px 0;
}
:is(.pv2-studio, .pv2-guest) .rec-prompt-text { margin: 6px 0 4px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--p-ink); }
:is(.pv2-studio, .pv2-guest) .rec-prompt-foot { margin: 0; font-size: 12px; color: var(--p-faint); }
.pv2-studio.live #recPrompt,
.pv2-studio #recPanel:has(.mode-btn.active:not([data-mode="continue"])) #recPrompt,
.pv2-studio #recPanel:has(#inviteLock:not([hidden])) #recPrompt { display: none; }

/* pierwsze nagranie: bez trybow "wcinam sie/odpowiadam" (nie ma w co),
   bez "wysokiej jakosci" i podpisu — sam przycisk "Nagraj" (klasa ustawiana
   w river.js render(), zdejmowana po pierwszym glosie) */
.pv2-studio.pv2-first-rec #modeRow,
.pv2-studio.pv2-first-rec #anchorInfo,
.pv2-studio.pv2-first-rec #anchorSetRow,
.pv2-studio.pv2-first-rec #superQualityRow,
.pv2-studio.pv2-first-rec #author,
.pv2-studio.pv2-first-rec #playerCockpit { display: none !important; }
.pv2-studio .ep-price-opt {
  flex: 1; text-align: center; padding: 12px 8px; border-radius: var(--p-radius-sm);
  border: 1.5px solid var(--p-line); background: var(--p-bg); cursor: pointer;
  font-family: 'Karla', sans-serif;
}
.pv2-studio .ep-price-opt-title { display: block; font-size: 14px; font-weight: 800; color: var(--p-ink); }
.pv2-studio .ep-price-opt-sub { display: block; font-size: 10.5px; color: var(--p-muted); margin-top: 2px; }
.pv2-studio .ep-price-opt.active {
  border-color: var(--p-red); background: var(--p-red-soft);
}
.pv2-studio .ep-price-opt.active .ep-price-opt-title,
.pv2-studio .ep-price-opt.active .ep-price-opt-sub { color: var(--p-red); }
/* "Płatne" zablokowane (forma platnosci jeszcze nierozstrzygnieta) —
   przygaszone, cursor sygnalizuje "nieaktywne", ale zostaje klikalne
   (klik pokazuje komunikat "wkrotce", patrz river.js), nie disabled —
   zeby faktycznie dalo sie kliknac i przeczytac dlaczego */
.pv2-studio .ep-price-opt-soon { opacity: .55; cursor: not-allowed; }
.pv2-studio .ep-price-opt-soon:hover { border-color: var(--p-line); background: var(--p-bg); }

.pv2-studio .ep-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; cursor: pointer; }
.pv2-studio .ep-toggle-title { display: block; font-size: 13px; font-weight: 700; color: var(--p-ink); }
.pv2-studio .ep-toggle-sub { display: block; font-size: 11px; color: var(--p-muted); margin-top: 2px; max-width: 240px; }
.pv2-studio .ep-toggle-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; }
.pv2-studio .ep-toggle-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pv2-studio .ep-toggle-knob {
  position: absolute; inset: 0; border-radius: 999px; background: var(--p-line); transition: background .15s;
}
.pv2-studio .ep-toggle-knob::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.pv2-studio .ep-toggle-switch input:checked + .ep-toggle-knob { background: #22C55E; }
.pv2-studio .ep-toggle-switch input:checked + .ep-toggle-knob::before { transform: translateX(18px); }

/* ============ SYSTEM WIDOKOW (body[data-view]) ============
   Kazdy pelnoekranowy ekran (record/episode/gotowe/menu/episodes/account/
   advanced) dzieli ten sam wzorzec: fixed, wysrodkowany w tej samej waskiej
   660-owej kolumnie co reszta strony, wlasny scroll. Domyslnie schowane;
   [data-view-name] pokazuje sie TYLKO gdy body[data-view] na nie wskazuje. */
.pv2-fullscreen-view {
  position: fixed; top: 0; bottom: 0; left: 50%; width: min(640px, 100%); transform: translateX(-50%);
  z-index: 200; background: var(--p-surface); overflow-y: auto; box-sizing: border-box;
  padding: 24px 24px 40px; display: none; flex-direction: column;
}
.pv2-episode-screen, .pv2-menu-screen, .pv2-episodes-screen, .pv2-account-screen, .pv2-advanced-screen {
  position: fixed; top: 0; bottom: 0; left: 50%; width: min(640px, 100%); transform: translateX(-50%);
  z-index: 200; background: var(--p-surface); overflow-y: auto; box-sizing: border-box;
  padding: 20px 20px 40px; display: none; flex-direction: column; gap: 16px;
}
.pv2-studio[data-view="episode"] #episodeView,
.pv2-studio[data-view="menu"] #menuView,
.pv2-studio[data-view="episodes"] #episodesView,
.pv2-studio[data-view="account"] #accountView,
.pv2-studio[data-view="advanced"] #advancedView,
.pv2-studio[data-view="voices"] #voicesView,
.pv2-studio[data-view="recordings"] #recordingsView { display: flex; }

/* "record" w SPOCZYNKU (nie .live): normalna, przewijalna strona —
   #recPanel (konsola nagrywania) + #playerCockpit (PRAWDZIWA oś czasu
   rzeki — kliknij, przewiń, wytnij zakres — zawsze widoczna, tak jak przed
   przebudowa) jedna pod druga, jak zwykle karty. User (2026-09-20): "nie
   ma widoku rzeki, zrobiles zupelnie nowy widok panelu i to zaczelo
   mieszac" — pelnoekranowy "jeden cel na raz" mial sens dla samego
   NAGRYWANIA, nie dla wyboru MIEJSCA nagrywania, ktore wymaga oswiecia sie
   rzeka. W TRAKCIE nagrywania (.live) #recPanel nadal przejmuje caly ekran
   (to dzialalo dobrze, zero zmian) — reszta kart na widoku "record" wtedy
   schowana, bo i tak nic pod pelnym ekranem nie widac. */
.pv2-studio[data-view="record"]:not(.live) #recPanel,
.pv2-studio[data-view="record"]:not(.live) #playerCockpit:not([hidden]),
.pv2-studio[data-view="record"]:not(.live) #uploadStatus:not([hidden]) {
  position: static; width: auto; transform: none; z-index: auto;
  display: block; text-align: left; box-shadow: none;
}
.pv2-studio.live #recPanel {
  position: fixed; top: 0; bottom: 0; left: 50%; width: min(640px, 100%); transform: translateX(-50%);
  z-index: 200; margin: 0; border: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px 30px; box-sizing: border-box; text-align: center; box-shadow: none;
  background: var(--p-surface); overflow-y: auto;
}
.pv2-studio.live #playerCockpit, .pv2-studio.live #uploadStatus, .pv2-studio.live #menuOpenCard { display: none !important; }
.pv2-studio:not([data-view="record"]) #recPanel,
.pv2-studio:not([data-view="record"]) #playerCockpit,
.pv2-studio:not([data-view="record"]) #uploadStatus,
.pv2-studio:not([data-view="record"]) #menuOpenCard {
  display: none !important;
}

.pv2-studio.live #recPanel > .ck-group-label,
.pv2-studio.live #modeRow,
.pv2-studio.live #anchorInfo,
.pv2-studio.live #anchorSetRow,
.pv2-studio.live #recPanel label.consent-row,
.pv2-studio.live #recPanel #author {
  display: none;
}
.pv2-studio.live .dial { flex-direction: column; gap: 16px; margin: 0; }
.pv2-studio.live .lamp { width: 10px; height: 10px; animation: pv2-pulse 1.4s ease-in-out infinite; }
.pv2-studio.live .dial-state { font-size: 13px; letter-spacing: .06em; }
.pv2-studio.live .dial-time { margin: 0; font-size: 48px; font-weight: 800; letter-spacing: -.01em; }
.pv2-studio.live #recBtn { width: min(280px, 100%); margin-top: 4px; }
.pv2-studio.live #levelHint { max-width: 280px; }
@keyframes pv2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* osobna karta "Menu konta" na koncu ekranu nagrywania */
.pv2-menu-card-btn {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; flex-direction: column;
  gap: 4px; font-size: 15px; font-weight: 800; color: var(--p-ink);
}
.pv2-menu-card-sub { font-size: 12px; font-weight: 500; color: var(--p-faint); }
.pv2-menu-card-btn:hover span:first-child { color: var(--p-red); }
.pv2-manage-link {
  all: unset; display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--p-red); cursor: pointer; text-align: center;
}

/* naglowek podekranow (← wstecz / tytul / [+Nowy albo pusto]) — wspolny
   dla Nowy odcinek / Menu konta / Zarzadzanie odcinkami / Ustawienia
   konta / Zaawansowane */
.pv2-screen-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.pv2-back {
  all: unset; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; font-size: 18px; color: var(--p-ink); flex-shrink: 0;
}
.pv2-screen-title { font-size: 16px; font-weight: 800; }
.pv2-home {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--p-muted); flex-shrink: 0; border-radius: 50%; text-decoration: none;
}
.pv2-home:hover { color: var(--p-red); background: var(--p-red-soft); }
.pv2-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pv2-new-ep { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--p-red); flex-shrink: 0; }

.pv2-studio .pv2-btn-block { display: block; width: 100%; text-align: center; }

/* Menu konta (canva 6) */
.pv2-menu-profile { display: flex; align-items: center; gap: 14px; }
.pv2-menu-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(160deg,#9CA3AF,#6B7280); flex-shrink: 0; }
.pv2-menu-email { font-size: 13px; color: var(--p-muted); font-weight: 600; }
.pv2-menu-primary {
  background: var(--p-red); color: #fff; border: none; padding: 15px; border-radius: var(--p-radius);
  font-size: 14.5px; font-weight: 800; margin: 20px 0 4px;
}
.pv2-menu-primary:hover { background: #C92B23; color: #fff; }
/* "Odsluchaj nagranie" pod "Zrob nagranie" (2026-09-25) — drugorzedny, ten sam rozmiar */
.pv2-menu-listen { padding: 15px; border-radius: var(--p-radius); font-size: 14.5px; font-weight: 800; margin: 10px 0 4px; }
.pv2-studio.pv2-first-rec .pv2-menu-listen { display: none; }
.pv2-menu-list { display: flex; flex-direction: column; margin-top: 8px; }
.pv2-menu-row {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 14px 4px; border-bottom: 1px solid var(--p-line); font-family: 'Karla', sans-serif;
}
.pv2-menu-row:last-child { border-bottom: none; }
.pv2-menu-row .ic {
  width: 34px; height: 34px; border-radius: 10px; background: var(--p-bg); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px;
}
.pv2-menu-row .rt { flex-grow: 1; font-size: 14px; font-weight: 700; color: var(--p-ink); }
/* jedno zdanie pod nazwa pozycji menu (faza 1 planu wzrostu, 2026-09-24:
   "niektore opcje nie sa logicznie opisane") — co tam jest, zanim sie kliknie */
.pv2-menu-row .rt small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--p-faint); }
.pv2-menu-row .arr { color: var(--p-faint); }
/* --- "Jak to działa" (/povsite-jak-to-dziala.html, 2026-09-25) --- */
.pv2-hero .pv2-hero-howto { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--p-red); padding: 8px 4px; }
.pv2-howto-hero { padding: 28px 0 36px; text-align: center; }
.pv2-howto-hero h1 { margin: 0 0 14px; font-size: clamp(30px, 6vw, 44px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.pv2-howto-hero > p:not(.pv2-eyebrow) { margin: 0 auto 26px; max-width: 46ch; font-size: 16px; color: var(--p-muted); line-height: 1.6; }
.pv2-howto-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.pv2-howto-steps li { display: flex; gap: 14px; align-items: flex-start; }
.pv2-howto-steps .n {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--p-red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.pv2-howto-steps h3, .pv2-use h3 { margin: 4px 0 6px; font-size: 15.5px; font-weight: 800; color: var(--p-ink); }
.pv2-howto-steps p, .pv2-use p, .pv2-howto-text, .pv2-howto-list li { margin: 0; font-size: 14px; color: var(--p-muted); line-height: 1.6; }
.pv2-howto-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.pv2-howto-list b { color: var(--p-ink); }
.pv2-howto-uses { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pv2-use {
  display: block; padding: 14px 16px; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  background: var(--p-surface); color: inherit; text-decoration: none;
}
.pv2-use:hover { border-color: var(--p-ink); }
.pv2-use h3 { margin-top: 0; }
.pv2-use-example .tag { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--p-red); margin-bottom: 6px; }
.pv2-use-example .go { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--p-red); }
.pv2-howto-final { text-align: center; }
.pv2-howto-final .pv2-howto-text { margin: 10px auto 20px; max-width: 46ch; }

/* --- nagranie bez konta (/povsite-nagraj.html, faza 1 2026-09-24) --- */
/* mandala glosu (voiceprint-cymatics.js) — okragla plyta na ciemnym tle */
.pv2-mandala { margin: 4px auto 10px; max-width: 340px; }
/* v0.56: bez czarnego tla — plyta jest czarna tylko w swoim kole (rysuje ja modul),
   pierscien kolorow rosnie na tle strony */
.pv2-mandala canvas { width: 100%; aspect-ratio: 1; display: block; }
/* studio: mandala tylko w trakcie nagrywania (pelny ekran .live) */
.pv2-studio:not(.live) #recMandalaBox { display: none; }
.pv2-studio .rec-mandala { width: min(320px, 72vw, 42vh); margin: 0 auto; text-align: center; }
.pv2-studio .rec-mandala .pv2-mandala-live { font-size: 13px; color: var(--p-muted); }
.pv2-mandala-live { margin: 10px 0 0; min-height: 1.5em; font-size: 13.5px; font-weight: 700; color: var(--p-ink); line-height: 1.45; }
.pv2-mandala-note { margin: 4px auto 0; max-width: 34ch; font-size: 11.5px; color: var(--p-faint); line-height: 1.45; }
/* strona sluchacza: mandala = przycisk Sluchaj (nakladka play gdy pauza) */
.pv2-listen-mandala { margin: 6px 0 18px; text-align: center; }
.pv2-listen-mandala .pv2-mandala { position: relative; max-width: 320px; }
.pv2-mandala-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(229, 52, 43, .88); box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
}
.pv2-mandala-play:hover { background: var(--p-red); }
/* bez tego display:flex nadpisywal atrybut hidden i ▶ nigdy nie znikal */
.pv2-mandala-play[hidden] { display: none; }
.pv2-mandala-cta { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--p-red); padding: 6px 4px; }
.pv2 a.pv2-mandala-cta { color: var(--p-red); }
.pv2-guest { max-width: 460px; margin: 8px auto 40px; text-align: center; }
.pv2-guest h1 { margin: 0 0 10px; font-size: clamp(28px, 6vw, 38px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.pv2-guest-lead { margin: 0 auto 20px; max-width: 40ch; font-size: 15px; color: var(--p-muted); line-height: 1.55; }
.pv2-guest .rec-prompt { text-align: left; }
.pv2-guest-dial {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px 0; padding: 14px 16px; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--p-muted);
}
.pv2-guest-dial .t { font-size: 20px; letter-spacing: 0; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.pv2-guest.live .pv2-guest-dial { border-color: var(--p-red); color: var(--p-red); }
.pv2-guest.live .rec-prompt { display: none; }
.pv2-guest .pv2-btn { width: 100%; justify-content: center; box-sizing: border-box; }
.pv2-guest-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pv2-guest audio { width: 100%; margin: 4px 0 8px; }
.pv2-guest-note { margin: 10px 0 0; font-size: 13px; color: var(--p-muted); line-height: 1.5; }
.pv2-guest-note a { color: var(--p-red); font-weight: 700; }

/* studio: baner "masz glos nagrany przed zalogowaniem" (river.js checkGuestRec) */
.guest-rec-banner {
  background: var(--p-green-soft); border: 1px solid var(--p-green); border-radius: var(--p-radius-sm);
  padding: 12px 14px; margin: 4px 0 12px; text-align: left;
}
.guest-rec-banner p { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--p-ink); }
.guest-rec-banner audio { width: 100%; margin-bottom: 8px; }
.guest-rec-banner .cockpit-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Menu konta: chipy nagran (przelaczanie) + zakres statystyk */
.pv2-menu-recs { margin: 2px 0 0; }
.pv2-menu-recs-label { font-size: 12px; font-weight: 700; color: var(--p-muted); margin-bottom: 8px; }
.pv2-menu-recs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pv2-rec-chip {
  all: unset; box-sizing: border-box; cursor: pointer; font-family: 'Karla', sans-serif; font-size: 13.5px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--p-line); color: var(--p-ink); background: var(--p-surface);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv2-rec-chip:hover { border-color: var(--p-ink); }
.pv2-rec-chip.is-current { cursor: default; background: var(--p-ink); border-color: var(--p-ink); color: #fff; }
.pv2-rec-chip-new { color: var(--p-red); border-color: var(--p-red); }
.pv2-stats-scope { display: flex; gap: 4px; padding: 4px; margin-bottom: 10px; background: var(--p-bg); border: 1px solid var(--p-line); border-radius: 999px; }
.pv2-scope-btn {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1; text-align: center; font-family: 'Karla', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--p-muted); padding: 7px 10px; border-radius: 999px;
}
.pv2-scope-btn.active { background: var(--p-surface); color: var(--p-ink); box-shadow: 0 1px 3px rgba(17, 24, 39, .12); }

/* "Twoje nagrania": otwarte teraz nagranie nie jest linkiem, tylko znacznikiem */
.pv2-menu-row.pv2-rec-current { cursor: default; }
.pv2-menu-row.pv2-rec-current .ic { background: var(--p-red-soft); }
.pv2-menu-row.pv2-rec-current .arr { color: var(--p-green); font-weight: 700; }
#recList .pv2-menu-row:last-child { border-bottom: 1px solid var(--p-line); }

/* statystyki w menu konta (faza 1 planu wzrostu, 2026-09-24) — 3 kolumny
   kafelkow, liczba nad podpisem (podpis w poprawnej formie liczebnika,
   ustawiany w river.js renderMenuStats) */
.pv2-menu-stats { margin: 4px 0 2px; }
.pv2-menu-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv2-stat {
  background: var(--p-bg); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  padding: 10px 6px; text-align: center; min-width: 0;
}
.pv2-stat .num { font-family: 'Karla', sans-serif; font-size: 18px; font-weight: 800; color: var(--p-ink); line-height: 1.2; }
.pv2-stat .lbl { margin-top: 2px; font-size: 11px; line-height: 1.25; color: var(--p-muted); }
.pv2-menu-stats .hint { margin: 8px 2px 0; font-size: 11.5px; }
.pv2-menu-stats-note { color: var(--p-faint); }

/* Zarzadzanie odcinkami (canva 7) — wyszukiwarka + realna lista #episodesList */
.pv2-episodes-screen .pv2-search {
  display: flex; align-items: center; gap: 8px; background: var(--p-bg); border: 1px solid var(--p-line);
  border-radius: 999px; padding: 10px 15px;
}
.pv2-episodes-screen .pv2-search input {
  flex-grow: 1; border: none; outline: none; background: transparent; font-family: 'Karla', sans-serif;
  font-size: 13px; color: var(--p-ink);
}
.pv2-episodes-screen .cut-list { flex-direction: column; gap: 0; }

/* Ustawienia konta (canva 6b) */
.pv2-account-screen .field-label { font-size: 12px; font-weight: 700; color: var(--p-muted); margin-bottom: 6px; }

/* Zarzadzanie odcinkami — jeden klikalny wiersz na odcinek (canva 7);
   edycja/eksport/usuniecie NIE sa tu — pojawiaja sie dopiero na "Ustawienia
   odcinka" po kliknieciu (user zglosil na zywo: lista pokazywala od razu
   to, co powinno byc za klikiem). Realne dane z loadEpisodes() w river.js. */
.pv2-ep-row {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 4px; border-bottom: 1px solid var(--p-line); font-family: 'Karla', sans-serif;
}
.pv2-ep-row:last-child { border-bottom: none; }
.pv2-ep-play {
  width: 34px; height: 34px; border-radius: 50%; background: var(--p-red-soft); color: var(--p-red);
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.pv2-ep-info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.pv2-ep-title { font-size: 14px; font-weight: 700; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-ep-meta { font-size: 11.5px; color: var(--p-faint); margin-top: 2px; }
.pv2-ep-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
.pv2-ep-badge-free { background: var(--p-green-soft); color: var(--p-green); }
.pv2-ep-badge-paid { background: var(--p-red-soft); color: var(--p-red); }
.pv2-ep-badge-private { background: var(--p-bg); color: var(--p-muted); border: 1px solid var(--p-line); }

/* akcje na TYM odcinku — tylko w trybie edycji istniejacego (nie przy
   tworzeniu nowego), sygnal: #epCancelEdit odkryty = river.js jest w
   trybie edycji (patrz startEditEpisode/stopEditEpisode) */
#epActionsBar { display: none; }
.pv2-studio:has(#epCancelEdit:not([hidden])) #epActionsBar { display: block; margin-top: 20px; }

/* pasek "Twoja rzeka: N nagran + ten fragment" nad dialem (canva
   "Nagrywasz..."), realne dane z riverData.drops — patrz renderRecSegBar
   w river.js. */
.pv2-studio .rec-segbar-wrap { width: min(281px, 100%); margin: 0 auto 4px; cursor: pointer; }
.pv2-studio .rec-segbar { display: flex; gap: 2px; height: 14px; }
.pv2-studio .rec-segbar span { flex: 1; border-radius: 3px; }
.pv2-studio .rec-segbar .rec-seg-current {
  flex: 1.4; background: var(--p-red); box-shadow: 0 0 0 2px rgba(229,52,43,.22);
}
.pv2-studio .rec-segbar-caption { text-align: center; font-size: 11px; color: var(--p-faint); margin-top: 6px; }
/* w spoczynku prawdziwa rzeka jest w karcie "Odtwarzanie" pod konsola —
   drugi pasek nad dialem myli (2 rzeki naraz); zostaje tylko w trakcie
   nagrywania (body.live), gdy karta Odtwarzanie jest schowana */
.pv2-studio:not(.live) .rec-segbar-wrap { display: none !important; }

/* przyciski nagrywania: w spoczynku/na starcie jeden duzy "Nagraj glos"
   (Pauza/Od nowa nieaktywne, bo jeszcze nic nie trwa); w trakcie (.live)
   trzy rowne pigulki w rzedzie — Pauza | Zakoncz | Od nowa (canva
   "Nagrywasz..."). Realna pauza/restart, patrz pauseRec/resumeRec/
   restartRec w river.js — MediaRecorder.pause/resume to natywne API. */
.pv2-studio .rec-controls { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 14px; }
.pv2-studio .rec-controls .rec-side-btn { display: none; }
.pv2-studio.live .rec-controls {
  flex-direction: row; justify-content: center; gap: 10px; width: auto; max-width: 100%;
}
.pv2-studio.live .rec-controls .rec-side-btn { display: inline-flex; align-items: center; gap: 6px; }
.pv2-studio.live .rec-controls #recPauseBtn { order: 1; }
.pv2-studio.live .rec-controls #recBtn { order: 2; }
.pv2-studio.live .rec-controls #recRestartBtn { order: 3; }
.pv2-studio.live .rec-controls #recBtn.ptt {
  width: auto; padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 700;
  text-transform: none; background: var(--p-surface); color: var(--p-ink);
  border: 1.5px solid var(--p-line); box-shadow: none;
}
.pv2-studio .rec-side-btn:disabled { opacity: .4; cursor: not-allowed; }
.pv2-studio #recPauseBtn.paused { border-color: var(--p-red); color: var(--p-red); background: var(--p-red-soft); }

/* "Gotowe!" — pelnoekranowy ekran sukcesu po zapisaniu nowego odcinka
   (canva ekran 4). Widocznosc: body[data-view="gotowe"], patrz
   window.showGotoweView/hideGotoweView w povsite-studio.html, wolane z
   showGotowe()/hideGotowe() w river.js. */
.pv2-gotowe {
  /* BYLO: justify-content domyslne (flex-start) + .pv2-gotowe-footer z
     margin-top:auto — na wysokim ekranie (position:fixed;top:0;bottom:0 =
     cala wysokosc okna) to rozciagalo tresc az do dolu, zostawiajac ogromna
     biala dziure w srodku (zgloszone na zywo: "wolna przestrzeń w środku...
     wygląda dziwnie"). Zwarty, wysrodkowany blok zamiast rozciagania. */
  position: fixed; top: 0; bottom: 0; left: 50%; width: min(640px, 100%); transform: translateX(-50%);
  z-index: 210; overflow-y: auto; box-sizing: border-box;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px; text-align: center; background: var(--p-surface);
}
.pv2-studio[data-view="gotowe"] .pv2-gotowe { display: flex; }
.pv2-gotowe-check {
  width: 64px; height: 64px; border-radius: 50%; background: var(--p-green-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pv2-gotowe h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; text-transform: none; font-family: 'Karla', sans-serif; letter-spacing: normal; }
.pv2-gotowe-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--p-muted); }
.pv2-gotowe-banner {
  width: 100%; max-width: 360px; background: var(--p-green-soft); border: 1px solid #BBF0C7;
  border-radius: var(--p-radius-sm); padding: 12px 14px; font-size: 12.5px; font-weight: 600;
  color: #15803D; margin-bottom: 22px;
}
.pv2-gotowe-link-block, .pv2-gotowe-share-block { width: 100%; max-width: 360px; margin-bottom: 22px; text-align: left; }
.pv2-gotowe-link-block label, .pv2-gotowe-share-block label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--p-muted); margin-bottom: 8px;
}
.pv2-gotowe-link-row { display: flex; gap: 8px; }
.pv2-gotowe-link {
  flex: 1; min-width: 0; background: var(--p-bg); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
  padding: 11px 12px; font-size: 12.5px; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv2-gotowe-link-row .seg-btn { flex-shrink: 0; background: var(--p-red); color: #fff; border: none; }
.pv2-gotowe-share-row { display: flex; gap: 22px; justify-content: center; }
.pv2-share-ic {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.pv2-share-ig { background: radial-gradient(circle at 30% 110%, #FED373 0%, #F15245 45%, #D92E7F 60%, #9B36B7 90%); }
.pv2-share-wa { background: #22C55E; }
.pv2-share-fb { background: #1877F2; }
.pv2-gotowe-footer { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
.pv2-gotowe-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--p-green-soft);
  border: 1px solid #BBF0C7; border-radius: var(--p-radius-sm); padding: 11px; font-size: 12.5px; font-weight: 700; color: #15803D;
}
.pv2-gotowe-back { width: 100%; background: #6B7280; color: #fff; border: none; padding: 13px; font-size: 14px; }
/* "Gotowe!" na czarnym tle: zielone ramki czytelne na ciemnym zielonym */
.pv2-studio[data-view="gotowe"] .pv2-gotowe-banner,
.pv2-studio[data-view="gotowe"] .pv2-gotowe-hint { border-color: #166534; color: #4ADE80; }
.pv2-studio[data-view="gotowe"] .pv2-gotowe-back { background: #27272A; }