/* ==========================================================================
   Panel administracyjny (demo) - Zatwarnicki Studio

   Uklad dzielony: po lewej edytor, po prawej podglad sekcji strony, ktory
   przerysowuje sie przy kazdym uderzeniu w klawisz. Nic nie jest zapisywane -
   dane zyja tylko w pamieci karty przegladarki.

   Korzysta ze zmiennych z style.css (kremowe tlo, bordowy akcent, szeryfowe
   naglowki), ale uklada je w interfejs narzedziowy.
   ========================================================================== */

body.admin {
  background: var(--bg);
  min-height: 100vh;
  /* Wspolna wysokosc paska zakladek edytora i naglowka podgladu - obie
     kolowny musza zaczynac sie na tej samej linii. */
  --bar-h: 52px;
}

/* ---------- Ekran logowania ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-box {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 36px 32px;
}

.login-box .login-logo {
  height: 52px;
  width: auto;
  margin: 0 auto 22px;
}

.login-box h1 {
  font-size: 1.45rem;
  text-align: center;
  margin-bottom: 6px;
}

.login-sub {
  text-align: center;
  text-align-last: center;
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 24px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 9px 12px;
  transition: border-color 0.18s ease;
}

.field textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.55;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 11px 16px;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.btn-google:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn-google svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.login-note {
  margin: 22px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  text-align-last: center;
}

.login-error {
  display: none;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 16px;
}

.login-error.show {
  display: block;
}

/* ---------- Pasek demo i belka gorna ---------- */

.demo-bar {
  background: var(--accent);
  color: var(--bg);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
}

.demo-bar span {
  opacity: 0.88;
  font-weight: 400;
}

.admin-shell {
  display: none;
  height: 100vh;
  flex-direction: column;
}

.admin-shell.show {
  display: flex;
}

.admin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--accent);
  flex: 0 0 auto;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.admin-top img {
  height: 38px;
  width: auto;
}

/* Ta sama metryka co .btn-quiet w prawym rogu paska, tylko wypelniony. */
.btn-back {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.btn-back:hover {
  background: var(--bg);
  color: var(--accent);
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-user strong {
  color: var(--ink);
  font-weight: 600;
}

.btn-quiet {
  background: none;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.btn-quiet:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ---------- Uklad dzielony ---------- */

.admin-split {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  flex: 1;
  min-height: 0;
}

/* min-height: 0 jest tu konieczne. Element siatki ma domyslnie
   min-height: auto, wiec nie potrafi zmalec ponizej swojej tresci - obie
   kolumny rosly, przewijala sie cala strona panelu zamiast samego podgladu. */
.admin-editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--accent);
}

/* Dziewiec zakladek ma zmiescic sie w jednym wierszu. Zamiast zawijania -
   ciasniejsze metryki i przewijanie w poziomie jako zawor bezpieczenstwa,
   gdyby panel byl naprawde waski. */
.admin-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  height: var(--bar-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--accent);
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.admin-nav::-webkit-scrollbar { display: none; }

.admin-nav button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 8px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.18s ease, color 0.18s ease;
}

.admin-nav button:hover {
  background: var(--accent-soft);
}

.admin-nav button.active {
  background: var(--accent);
  color: var(--bg);
}

.admin-nav svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

/* Widoczne tylko ponizej 1080px (patrz .admin-split w media query nizej) -
   tam gdzie podglad przestaje stac obok edytora i ladzuje sie pod nim. */
.admin-mobile-hint {
  display: none;
  margin: 0;
  padding: 10px 22px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.83rem;
  font-weight: 600;
}

.admin-main {
  padding: 22px 22px 50px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(122, 43, 34, 0.1);
}

.admin-main::-webkit-scrollbar,
.preview-body::-webkit-scrollbar {
  width: 8px;
}

.admin-main::-webkit-scrollbar-track,
.preview-body::-webkit-scrollbar-track {
  background: rgba(122, 43, 34, 0.1);
  border-radius: 999px;
}

.admin-main::-webkit-scrollbar-thumb,
.preview-body::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
  border: 2px solid rgba(248, 242, 229, 0.9);
  background-clip: padding-box;
}

/* style.css nadaje kazdemu <section> padding 84px 0 - tu sekcje sa panelami
   edytora, wiec ten odstep trzeba skasowac, inaczej nad naglowkiem zostaje
   84 px pustki. */
.admin-panel {
  display: none;
  padding: 0;
}

.admin-panel.active {
  display: block;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.panel-head h2 {
  font-size: 1.32rem;
  margin-bottom: 0;
}

.panel-lede {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 6px 0 20px;
  text-align: left;
}

/* ---------- Karty rekordow ---------- */

.rec {
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color 0.18s ease;
}

.rec:focus-within {
  border-color: var(--accent);
}

.rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.rec-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}

/* Systemowy checkbox rysuje sie kolorami przegladarki (niebieski na Windows),
   wiec appearance: none i wlasny ptaszek: kremowe pole, bordowa ramka
   i bordowy znaczek. */
body.admin input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  transition: background 0.15s ease;
}

body.admin input[type="checkbox"]:hover {
  background: var(--accent-soft);
}

body.admin input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 4.5px;
  height: 9px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: translate(-52%, -60%) rotate(45deg);
}

body.admin input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rec-grid {
  display: grid;
  gap: 10px;
}

.rec-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.rec-grid.cols-3 {
  grid-template-columns: 2fr 1fr 1fr;
}

.icon-btn {
  background: none;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 30px;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
}

.icon-btn svg {
  width: 14px;
  height: 14px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 3px 6px 3px 11px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
}

.chip button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 3px;
  border-radius: 999px;
}

.chip button:hover {
  color: var(--ink);
}

.chip-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chip-add input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--ink);
}

.chip-add input:focus {
  outline: none;
  border-color: var(--accent);
}

.btn-sm {
  padding: 7px 15px;
  font-size: 0.83rem;
  border-radius: 6px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  white-space: nowrap;
}

.btn-sm.ghost {
  background: transparent;
  color: var(--accent);
}

.btn-sm.ghost:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ---------- Podglad ---------- */

.admin-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--bar-h);
  padding: 0 22px;
  border-bottom: 1px solid var(--accent);
  flex: 0 0 auto;
}

.preview-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-right: auto;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: livePulse 1.9s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.78); }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

.preview-title i {
  font-style: normal;
  opacity: 0.5;
  margin: 0 1px;
}

.preview-title b {
  color: var(--accent);
  font-weight: 700;
}

/* Przelaczniki zakresu i urzadzenia */
.pv-switches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.pv-device button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
}

.pv-device svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.pv-mode {
  display: flex;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 3px;
}

.pv-mode button {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.pv-mode button.active {
  background: var(--accent);
  color: var(--bg);
}

.preview-body {
  overflow-y: auto;
  overflow-x: hidden;
  /* Kolko myszy nad podgladem przewija tylko podglad. Bez tego po dojechaniu
     do konca przewijanie "przeskakuje" na cala strone panelu. */
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(122, 43, 34, 0.1);
}

/* Scena podgladu: ramka renderuje strone w pelnej szerokosci 1400 px, a
   transform: scale() zmniejsza ja tak, zeby polowa ekranu pokazywala to samo,
   co pelny ekran. Wysokosc sceny to przeskalowana wysokosc dokumentu, dzieki
   czemu podglad przewija sie razem z panelem. */
.pv-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
}

/* ---------- Makieta telefonu (Galaxy S23 Ultra) ---------- */

/* Ekran S23 Ultra to 1440 x 3088 px fizycznych przy DPR 3,5, czyli
   412 x 883 px CSS - i tyle samo w trybie FHD+, bo tam DPR spada do 2,625.
   Pasek stanu (28), pasek adresu Chrome (56) i belka gestow (19) zabieraja
   103 px, wiec stronie zostaje 412 x 780 px. Te liczby siedza tez w
   admin.js jako PHONE_W / PHONE_VIEW_H / PHONE_CHROME - zmieniac razem.

   W trybie komputera obudowa znika z ukladu przez display: contents, dzieki
   czemu ramka podgladu jest wtedy zwyklym dzieckiem sceny i cala dotychczasowa
   matematyka skalowania dziala bez zmian. */
.pv-phone,
.pv-phone-screen {
  display: contents;
}

.pv-phone-status,
.pv-phone-url,
.pv-phone-home {
  display: none;
}

/* display:flex + justify-content:center zamiast polegania na margin:0 auto
   na .pv-phone - margin:auto blokowego dziecka zeruje sie, gdy dziecko jest
   szersze od rodzica (waskie ekrany, makieta 440px w wezszej scenie), wiec
   .pv-phone ladowal sie przyklejony do lewej. Potem transform:scale() z
   transform-origin:top center skalowal go wokol jego WLASNEGO srodka - ktory
   przy przyklejeniu do lewej nie pokrywal sie ze srodkiem sceny - stad
   makieta po przeskalowaniu wylatywala poza prawa krawedz zamiast zostac
   wysrodkowana. Flex-centering nie ma tego problemu: centruje tresc tez przy
   ujemnej wolnej przestrzeni (rowne przelanie po obu stronach), wiec srodek
   elementu pokrywa sie ze srodkiem sceny i skalowanie zostaje wysrodkowane. */
.pv-stage.is-phone {
  display: flex;
  justify-content: center;
  /* align-items domyslnie to "stretch" - bez tego .pv-phone bylby sciskany
     do (juz przeskalowanej przez JS) wysokosci sceny zamiast trzymac swoja
     naturalna (nieprzeskalowana) wysokosc tresci, przez co .pv-phone-screen
     (i pasek Home w niej) wystawaly ponizej obudowy. */
  align-items: flex-start;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: none;
  padding: 8px 0 14px;
}

.pv-phone.on {
  display: block;
  position: relative;
  width: 440px;
  margin: 0 auto;
  padding: 14px;
  background: #1d1b1a;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(26, 26, 26, 0.28), inset 0 0 0 2px #3b3634;
  transform-origin: top center;
}

.pv-phone.on .pv-phone-screen {
  display: block;
  width: 412px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}

.pv-phone.on .pv-phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 28px;
  padding: 0 16px;
  background: #1d1b1a;
  color: var(--bg);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pv-phone-sys {
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  opacity: 0.62;
}

.pv-phone.on .pv-phone-url {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 56px;
  padding: 0 16px;
  background: #2a2624;
  color: var(--bg);
  font-size: 0.72rem;
}

.pv-phone-url svg {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  opacity: 0.6;
}

.pv-phone-url span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(248, 242, 229, 0.1);
  border-radius: 999px;
  padding: 6px 12px;
}

.pv-phone.on .pv-phone-home {
  display: block;
  height: 19px;
  background: #1d1b1a;
  position: relative;
}

/* Wlasny pasek przewijania telefonu.

   Pasek przegladarki w ramce jest schowany i zostaje schowany: gdyby sie
   pokazal, zabralby szerokosc tresci i widok przestalby miec doslownie 412 px.
   Ten stoi poza obudowa, wiec nie dotyka strony w srodku. Tor jest calkiem
   przezroczysty - widac tylko strzalki i suwak. */
/* Pasek lezy na prawej ramce obudowy: dziecko pozycjonowane bezwzglednie
   liczy sie od jej krawedzi zewnetrznej, wiec right: 0 przy szerokosci rownej
   ramce trafia dokladnie w nia i nie wchodzi na ekran. */
.pv-scroll {
  position: absolute;
  right: 0;
  width: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pv-scroll[hidden] {
  display: none;
}

.pv-scroll-arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.pv-scroll-arrow:hover {
  opacity: 1;
}

.pv-scroll-arrow svg {
  width: 13px;
  height: 13px;
}

.pv-scroll-track {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  background: none;
  cursor: pointer;
}

.pv-scroll-thumb {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  border-radius: 999px;
  background: var(--accent);
  opacity: 1;
  transition: opacity 0.15s ease;
}

.pv-scroll-thumb:hover,
.pv-scroll.dragging .pv-scroll-thumb {
  opacity: 1;
}

.pv-phone-home::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 118px;
  height: 4px;
  border-radius: 999px;
  background: rgba(248, 242, 229, 0.5);
  transform: translateX(-50%);
}

#pvFrame {
  width: 1400px;
  border: 0;
  display: block;
  transform-origin: top left;
  background: var(--bg);
}

.pv-section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  text-align: center;
  margin: 0 0 22px;
}

/* podglad: cennik */

.pv-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  align-items: start;
}

.pv-price {
  position: relative;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 18px;
  background: var(--surface);
}

.pv-price.featured {
  border-width: 2.5px;
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.1);
}

.pv-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--bg);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.pv-price h4 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.pv-price .pv-amount {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent);
  line-height: 1.15;
}

.pv-price .pv-period {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  margin: 2px 0 14px;
}

.pv-price ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pv-price li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 0.81rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--accent);
  text-align: left;
}

.pv-price li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* podglad: kafelek zakres/technologie */

.pv-tile {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface);
}

.pv-group + .pv-group {
  margin-top: 14px;
}

.pv-group-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.pv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pv-pills li {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--accent);
  padding: 3px 10px;
  border-radius: 999px;
}

/* podglad: blog */

.pv-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.pv-post {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface);
}

.pv-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.pv-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--accent);
  border-radius: 999px;
  padding: 3px 9px;
}

.pv-meta-time {
  font-size: 0.71rem;
  color: var(--muted);
}

.pv-post h4 {
  font-size: 0.99rem;
  margin-bottom: 7px;
  text-wrap: balance;
}

.pv-post p {
  font-size: 0.81rem;
  color: var(--ink-soft);
  margin: 0;
  text-align: left;
}

/* podglad: faq */

.pv-faq {
  border-top: 1px solid var(--accent);
}

.pv-faq-item {
  border-bottom: 1px solid var(--accent);
  padding: 14px 0;
}

.pv-faq-q {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.99rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.pv-faq-a {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0;
  text-align: left;
}

/* podglad: kontakt (stopka) */

.pv-footer {
  background: var(--accent);
  border-radius: var(--radius);
  padding: 24px 26px;
  color: var(--bg);
}

.pv-footer-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--bg);
}

.pv-footer-tag {
  font-size: 0.83rem;
  opacity: 0.85;
  margin: 2px 0 18px;
}

.pv-footer-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.pv-footer-row .pv-footer-label {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
  margin-bottom: 2px;
}

.pv-footer-row .pv-footer-val {
  font-size: 0.87rem;
  font-weight: 600;
  word-break: break-word;
}

.pv-empty {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  text-align-last: center;
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius);
  padding: 26px;
}

/* ---------- Waski ekran: podglad pod edytorem ---------- */

@media (max-width: 1080px) {
  .admin-shell {
    height: auto;
    min-height: 100vh;
  }
  .admin-split {
    grid-template-columns: 1fr;
  }
  .admin-mobile-hint {
    display: block;
  }
  .admin-editor {
    border-right: none;
    border-bottom: 1px solid var(--accent);
  }
  .admin-main,
  .preview-body {
    overflow: visible;
  }
  .rec-grid.cols-2,
  .rec-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

/* .admin-top nigdy nie zawijal sie jako calosc - na waskim ekranie .brand i
   .user walczyly o miejsce w jednym wierszu, a kiedy .user zawijal sie
   wewnetrznie (email + 2 przyciski), .admin-top rosl w wysokosc i wyrownanie
   align-items:center pchalo przycisk "Powrot do strony" prosto na drugi
   wiersz .user - stad nachodzace na siebie przyciski.

   Docelowy uklad na mobile: logo i maly "Wyloguj" w jednym wierszu (logo do
   lewej, Wyloguj do prawej), pod nimi dwa rowne, szerokie przyciski (Powrot
   do strony / Przywroc dane wyjsciowe), a na samym dole "Zalogowano jako..."
   w osobnej linijce. Caly ten pasek jest przypiety (position:sticky) pod
   gorna krawedzia ekranu, wiec zostaje widoczny przy przewijaniu dlugiego
   formularza - pasek "Tryb demonstracyjny" (przed .admin-top w HTML) po
   prostu przewija sie pod nim jak zwykla tresc.

   Guziki i tekst siedza w dwoch roznych wrapperach (.admin-brand,
   .admin-user) w HTML - zeby przemieszac je w jeden wspolny uklad, oba
   wrappery dostaja display:contents (znikaja z ukladu, ich dzieci staja sie
   bezposrednimi dziecmi .admin-top), a kolejnosc/szerokosc kazdego elementu
   ustala tu "order" + flex-basis. Dwa pseudo-elementy (::before, ::after)
   dzialaja jako niewidoczne "lamacze wiersza" (flex-basis:100%) miedzy
   trzema rzedami. */
@media (max-width: 640px) {
  .admin-top {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px 10px;
  }
  .admin-brand,
  .admin-user {
    display: contents;
  }
  .admin-top img {
    order: 1;
  }
  /* Wyloguj jest teraz czerwony/wypelniony (metryki .btn-back), a Powrot do
     strony ponizej - kremowy/obrysowany (metryki .btn-quiet) - odwrotnie niz
     ich domyslne klasy, wiec kolory nadpisane tu punktowo. "Zalogowano
     jako..." usuniete z widoku (element zostaje w DOM, bo JS nim steruje). */
  #logoutBtn {
    order: 2;
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    background: var(--accent);
    color: var(--bg);
  }
  #logoutBtn:hover {
    background: var(--bg);
    color: var(--accent);
  }
  .admin-top::before {
    content: '';
    order: 3;
    flex-basis: 100%;
    height: 0;
  }
  /* "Przywroc dane wyjsciowe" jest dluga etykieta, a oba przyciski maja
     domyslnie white-space:nowrap - zeby zmiescic sie w rownej polowie
     szerokosci na waskich ekranach, tekst moze zawinac sie na 2 linijki
     zamiast zawijac caly wiersz. */
  .btn-back,
  #resetBtn {
    order: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 0.78rem;
    white-space: normal;
    text-align: center;
  }
  .btn-back {
    background: none;
    color: var(--accent);
  }
  .btn-back:hover {
    background: var(--accent);
    color: var(--bg);
  }
  #resetBtn {
    order: 5;
  }
  .admin-user > span {
    display: none;
  }
  /* .preview-head ma na desktopie sztywna wysokosc var(--bar-h), zeby
     zrownac sie z paskiem zakladek edytora obok (uklad 2-kolumnowy). Na
     waskim ekranie kolumny sa i tak jedna pod druga (patrz reguła
     .admin-split przy 1080px wyzej), wiec to wyrownanie juz nic nie daje -
     a przy sztywnych 52px tytul + 4 przyciski przelacznikow nie miescily
     sie i nachodzily na siebie. */
  .preview-head {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 12px;
    row-gap: 8px;
  }
  .preview-title {
    flex: 1 1 100%;
    margin-right: 0;
  }
  /* Zmniejszone odstepy - "Ta sekcja/Cala strona" i "Komputer/Telefon"
     razem miescza sie w jednym wierszu zamiast zawijac sie na dwa. */
  .pv-switches {
    flex-wrap: wrap;
    gap: 5px;
  }
  .pv-mode {
    padding: 2px;
  }
  .pv-mode button {
    padding: 5px 7px;
  }
  .pv-device button {
    padding: 5px 6px;
  }
  /* .quote-row mial 4 kolumny w jednym wierszu (checkbox, tekst, cena,
     usun) - kolumna tekstu byla "minmax(0,1fr)", wiec przy wielu stalych
     kolumnach obok siebie zostawalo jej tak malo miejsca, ze dlugie nazwy
     zawijaly sie pojedynczymi znakami. Na waskim ekranie tekst dostaje caly
     gorny wiersz, a cena+usun przechodza pod spod, wciete pod tekst. */
  .quote-row {
    grid-template-columns: 20px 1fr auto;
    grid-template-areas:
      "cb   mid   mid"
      ".    price del";
    row-gap: 6px;
  }
  .quote-row > input[type="checkbox"] {
    grid-area: cb;
    align-self: start;
    margin-top: 3px;
  }
  .quote-mid {
    grid-area: mid;
  }
  .quote-price {
    grid-area: price;
  }
  .quote-row > .icon-btn {
    grid-area: del;
  }
}

/* Pelna tresc artykulu w podgladzie */
.pv-article {
  max-width: 760px;
  margin: 34px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--accent);
}

.pv-article h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-wrap: balance;
}

.pv-article .pv-post-meta {
  margin-bottom: 16px;
}

.pv-article p {
  margin: 0 0 14px;
}

/* ==========================================================================
   Zapis, wybor koloru, kalkulator wyceny, statystyki i dokument oferty
   ========================================================================== */

.panel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--accent);
}

body[data-mode="demo"] .panel-actions {
  display: none;
}

.saved-note {
  font-size: 0.83rem;
  color: var(--muted);
}

.saved-note.ok { color: var(--accent); font-weight: 600; }
.saved-note.warn { color: #b0463a; font-weight: 600; }

.color-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.color-row input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 2px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  flex: 0 0 44px;
}

.color-row input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--ink);
}

.color-row input[type="text"]:focus { outline: none; border-color: var(--ink); }

/* Cala linia jest etykieta pola wyboru, wiec klikniecie gdziekolwiek poza
   polem ceny zaznacza pozycje. Pole liczbowe zatrzymuje propagacje samo. */
.quote-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.quote-row:hover { background: var(--accent-soft); }

.quote-row.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.quote-row > input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.quote-mid { min-width: 0; }

.quote-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.quote-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 1px;
}

.quote-price {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.quote-price input {
  width: 86px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 6px 9px;
  font-variant-numeric: tabular-nums;
}

.quote-price input:focus { outline: none; border-color: var(--ink); }

.quote-unit {
  font-size: 0.74rem;
  color: var(--muted);
  min-width: 54px;
}

/* ---------- Sociale: zakladki platform, kolejka i lista postow ---------- */

/* Wizualnie ta sama metryka co .admin-nav button na gorze - zeby wyglad
   odpowiadal "gornym" zakladkom Cennik/Zakres uslug/..., jak prosil klient. */
.social-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--accent);
}

.social-tabs button {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.social-tabs button:hover {
  background: var(--accent-soft);
}

.social-tabs button.active {
  background: var(--accent);
  color: var(--bg);
}

.social-platform {
  margin-bottom: 16px;
}

.social-platform.on {
  background: var(--accent-soft);
}

.social-platform-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 12px;
}

/* Przelacznik W kolejce / Opublikowane - te same "tabletki", co Ta
   sekcja/Cala strona w podgladzie, plus przycisk dodawania obok. */
.social-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* Lekki link tekstowy zamiast duzego selecta - status i tak wynika z tego,
   ktora zakladka (W kolejce/Opublikowane) jest aktywna, klikniecie tylko
   przenosi post do drugiej. */
.social-status-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.social-status-link:hover {
  color: var(--accent);
}

/* Mniejszy wariant .social-tabs na wybor formatu tresci (Post/Rolka/
   Relacja) - tylko dla Facebooka/Instagrama, wiec siedzi w srodku karty
   posta, nie w gornym pasku zakladek platform. */
.social-type-tabs {
  margin: 0 0 14px;
  padding-bottom: 0;
  border-bottom: none;
}

.social-type-tabs button {
  padding: 5px 10px;
  font-size: 0.78rem;
  border: 1.5px solid var(--accent);
}

.social-type-tabs button.active {
  background: var(--accent);
  color: var(--bg);
}

.social-type-tabs button:not(.active) {
  background: var(--bg);
  color: var(--accent);
}

/* ---------- Kontener do wrzucenia zdjecia/filmu ---------- */

.media-upload {
  position: relative;
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
  background: var(--bg);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.media-upload.dragover {
  background: var(--accent-soft);
  border-style: solid;
}

.media-upload:not(.has-file) {
  cursor: pointer;
}

.media-upload-hint {
  padding: 18px 14px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.media-upload.has-file {
  padding: 10px;
}

.media-upload-preview {
  display: block;
  max-width: 100%;
  max-height: 180px;
  border-radius: 6px;
  margin: 0 auto;
}

.media-upload-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.media-upload input[type="file"] {
  display: none;
}

.media-upload-status {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 4px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.stat {
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--muted);
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-sub { font-size: 0.76rem; color: var(--muted); }

.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 110px;
  padding: 4px 0 0;
}

.bar {
  flex: 1;
  min-width: 3px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  opacity: 0.82;
  transition: opacity 0.15s ease;
}

.bar:hover { opacity: 1; }

.bars-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 10px 0 0;
  text-align: left;
}

.meter-row { margin-bottom: 14px; }

.meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
}

.meter-name { font-size: 0.87rem; font-weight: 600; color: var(--ink); }

.meter-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(122, 43, 34, 0.12);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.meter-desc {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 5px;
}

.qd {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 26px;
  color: var(--ink);
  font-family: var(--font-sans);
}

.qd-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--accent);
  color: var(--bg);
  padding: 24px 26px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.qd-logo {
  height: 46px;
  width: auto;
  display: block;
  margin-left: -6px;
}

.qd-sub { font-size: 0.84rem; opacity: 0.88; margin-top: 2px; }

.qd-meta { display: flex; gap: 22px; flex-wrap: wrap; }

.qd-meta span {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.75;
}

.qd-meta b { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.qd-for { padding: 20px 26px 4px; }

.qd-for span {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 3px;
}

.qd-for b { font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); }
.qd-for i { display: block; font-style: normal; font-size: 0.88rem; color: var(--muted); }

.qd-table {
  width: calc(100% - 52px);
  margin: 18px 26px 0;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.qd-table th {
  text-align: left;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  padding: 0 0 8px;
  border-bottom: 1.5px solid var(--accent);
}

.qd-table td {
  padding: 9px 0;
  border-bottom: 1px solid rgba(122, 43, 34, 0.16);
  vertical-align: top;
  line-height: 1.45;
}

.qd-table .q-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding-left: 18px;
}

.qd-table .q-group td {
  padding-top: 16px;
  border-bottom: none;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent);
}

.q-desc {
  display: block;
  font-size: 0.79rem;
  color: var(--muted);
  margin-top: 1px;
}

.q-empty {
  color: var(--muted);
  font-style: italic;
}

.qd-sum {
  width: calc(100% - 52px);
  margin: 20px 26px 0;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.qd-sum td { padding: 7px 0; }
.qd-sum .q-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.qd-sum .qd-total td {
  border-top: 2px solid var(--accent);
  padding-top: 12px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
}

.qd-note {
  margin: 22px 26px 0;
  padding: 16px 18px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
}

.qd-note p {
  margin: 0 0 8px;
  font-size: 0.83rem;
  line-height: 1.55;
  text-align: left;
}

.qd-note p:last-child { margin-bottom: 0; }

.qd-foot {
  margin: 22px 26px 0;
  padding-top: 14px;
  border-top: 1px solid rgba(122, 43, 34, 0.16);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

#pvCustom { padding: 4px 0 20px; }

.pv-mode[hidden], .pv-switches[hidden], #pvStage[hidden], #pdfBtn[hidden] { display: none !important; }