/* Panel klienta (projekt: docs/projekt/Fotoapka Panel klienta.dc.html)
   Ładuje się po style.css i fotoapka.css (tokeny --fa-*), patrz qg_theme_assets().

   Ekrany projektu: P1 lista galerii, P2 szczegóły galerii z kodem QR, P3
   zdjęcia i moderacja, P4 logowanie, P5 panel na telefonie (25.09.2026).
   Wartości (rozmiary, odstępy, promienie, obroty) przepisane z atrybutów
   style prototypu — przy zmianie porównuj zrzutem na 1440 i 390 px.

   Stare reguły panelu ntalio w style.css (sekcja „Panel klienta”) zostają:
   ten arkusz przestawia ich tokeny na fotoapkę w obrębie panelu i szkieletu
   (.qg-szkielet — rysuje nim się też kasa) i nadpisuje wygląd. Szkielet
   w kasie dostaje więc ten sam atramentowy pasek; jej własne kroki i karty
   są w fotoapka-kasa.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokeny starego arkusza po fotoapkowemu — karty, pola, komunikaty,
   kalendarz i paski ze style.css biorą kolory i kroje stąd.
   --------------------------------------------------------------------- */
body.qg-panel-strona,
.qg-szkielet {
	--tlo: var(--fa-krem);
	--tlo-karta: #fff;
	--tlo-alt: var(--fa-krem-ciemny);
	--tekst: var(--fa-atrament);
	--tekst-slaby: var(--fa-tekst-2);
	--akcent: var(--fa-pomarancz);
	--akcent-ciemny: var(--fa-pomarancz-ciemny);
	--akcent-tlo: #fde4db;
	--zloto-tekst: var(--fa-pomarancz-ciemny);
	--linia: rgba(26, 20, 16, .12);
	/* Ramka pól: projekt ma rgba(26,20,16,.2), czyli 1,5:1 na bieli — za mało
	   dla elementu sterującego (WCAG 1.4.11). Ten odcień trzyma 3,6:1. */
	--linia-pole: #8c7f73;
	--fokus: var(--fa-atrament);
	--granat-900: var(--fa-atrament);
	--granat-800: var(--fa-atrament);
	--font-tekst: var(--fa-font-tekst);
	--font-naglowki: var(--fa-font-naglowki);
	--promien: 24px;
	--promien-przycisk: 999px;
	--cien: none;
	--fa-turkus-ciemny: #1f8f7e; /* włączony przełącznik: 3,6:1 na bieli */
}

body.qg-panel-strona {
	background: var(--fa-krem);
	color: var(--fa-atrament);
	font-family: var(--fa-font-tekst);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.qg-szkielet {
	font-family: var(--fa-font-tekst);
	color: var(--fa-atrament);
	-webkit-font-smoothing: antialiased;
	--qg-bok: 260px;
	--qg-kolumna: 1180px;
	/* Pasek jest przyklejony i ma wysokość ekranu; gdy strona jest ciut
	   wyższa, pod nim zostawał kremowy pas. Tło kolumny rysuje sam szkielet. */
	background: linear-gradient(90deg, var(--fa-atrament) var(--qg-bok), var(--fa-krem) var(--qg-bok));
}

:where(.qg-panel-strona, .qg-szkielet) :is(h1, h2, h3) {
	font-family: var(--fa-font-naglowki);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.1;
}
:where(.qg-panel-strona, .qg-szkielet) :is(input, select, button, textarea) { font-family: inherit; }
:where(.qg-panel-strona, .qg-szkielet) a { color: var(--fa-atrament); }
:where(.qg-panel-strona, .qg-szkielet) a:hover { color: var(--fa-pomarancz-ciemny); }
:where(.qg-panel-strona, .qg-szkielet) :focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 3px; }

/* Jeden h1, dwie wersje: powitanie na komputerze, „Moje galerie” na telefonie (P1/P5). */
.qg-tylko-telefon { display: none; }

/* Nagłówek z obrysem i cieniem jak tytuł galerii w P2 i „Wracasz na imprezę?” w P4. */
.qg-tytul-obrys {
	color: var(--fa-pomarancz);
	-webkit-text-stroke: 2px var(--fa-atrament);
	paint-order: stroke fill;
	text-shadow: 2px 2px 0 var(--fa-atrament), 4px 4px 0 var(--fa-atrament);
}

/* ---------------------------------------------------------------------
   Przyciski — pigułki z projektu
   --------------------------------------------------------------------- */
:where(.qg-panel-strona, .qg-szkielet) .qg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
	background: var(--fa-atrament); color: var(--fa-krem);
	font-family: var(--fa-font-tekst); font-weight: 600; font-size: 15px; line-height: 1.2;
	text-decoration: none; text-align: center; cursor: pointer; box-shadow: none; text-shadow: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
:where(.qg-panel-strona, .qg-szkielet) .qg-btn:hover { background: #3a2f27; color: var(--fa-krem); filter: none; }
:where(.qg-panel-strona, .qg-szkielet) .qg-btn--atrament { background: var(--fa-atrament); color: var(--fa-krem); }
/* Biały napis na pomarańczu jak na stronie głównej (.fa-przycisk). */
:where(.qg-panel-strona, .qg-szkielet) .qg-btn--pomarancz { background: var(--fa-pomarancz); color: #fff; font-weight: 700; }
:where(.qg-panel-strona, .qg-szkielet) .qg-btn--pomarancz:hover { background: var(--fa-pomarancz-ciemny); color: #fff; }
:where(.qg-panel-strona, .qg-szkielet) .qg-btn--obrys { background: transparent; color: var(--fa-atrament); border-color: var(--fa-atrament); }
:where(.qg-panel-strona, .qg-szkielet) .qg-btn--obrys:hover { background: var(--fa-atrament); color: var(--fa-krem); }
/* Obrys na atramentowych kartach (kod QR, pasek zaznaczonych). */
:where(.qg-panel-strona, .qg-szkielet) .qg-btn--jasny-obrys { background: transparent; color: var(--fa-krem); border-color: var(--fa-krem); }
:where(.qg-panel-strona, .qg-szkielet) .qg-btn--jasny-obrys:hover { background: var(--fa-krem); color: var(--fa-atrament); }
:where(.qg-panel-strona, .qg-szkielet) .qg-btn:disabled { opacity: .45; }

/* ---------------------------------------------------------------------
   Szkielet: atramentowy pasek boczny (P1–P3)
   --------------------------------------------------------------------- */
.qg-szkielet__bok {
	background: var(--fa-atrament); color: var(--fa-krem);
	padding: 28px 20px; gap: 28px;
}

.qg-szkielet__logo {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 0; margin: -3px 0; border: 0; color: var(--fa-krem); text-decoration: none;
	min-height: 44px; /* cel dotyku; ujemny margines oddaje układowi 6 px (25.09.2026) */
}
.qg-szkielet__logo:hover { color: var(--fa-krem); }
.qg-szkielet__ikona { flex: 0 0 auto; width: 40px; height: 38px; overflow: visible; }
/* Dwie klasy: style.css ma „.qg-szkielet__logo span” (mały napis wersalikami pod logo ntalio). */
.qg-szkielet__logo .qg-szkielet__marka { display: inline; margin: 0; font-family: var(--fa-font-naglowki); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: 0; text-transform: none; color: inherit; }
.qg-szkielet__logo .qg-szkielet__marka span { display: inline; margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--fa-pomarancz); }
.qg-szkielet .qg-szkielet__logo .qg-szkielet__podpis {
	flex-basis: 100%; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--fa-na-ciemnym-2);
}

.qg-szkielet__bok .qg-nawigacja ul { gap: 4px; }
.qg-szkielet__bok .qg-nawigacja a {
	gap: 10px; min-height: 44px; padding: 12px 14px; border-radius: 12px; border: 0;
	color: var(--fa-na-ciemnym-2); font-size: 15px; font-weight: 600; line-height: 1.25;
}
.qg-szkielet__bok .qg-nawigacja a:hover { color: var(--fa-krem); background: rgba(244, 237, 227, .08); }
.qg-szkielet__bok .qg-nawigacja a[aria-current] { background: var(--fa-pomarancz); color: #fff; border: 0; }
.qg-szkielet__bok .qg-nawigacja a:focus-visible { outline: 3px solid var(--fa-zolty); outline-offset: 2px; }
/* Projekt nie ma ikon w pasku. */
.qg-szkielet__bok .qg-nawigacja svg { display: none; }
.qg-nawigacja__licznik { background: var(--fa-zolty); color: var(--fa-atrament); font-weight: 800; }

/* „Kolejna impreza na horyzoncie?” — żółta karta pod nawigacją. */
.qg-szkielet__nowa {
	margin-top: auto;
	display: flex; flex-direction: column; gap: 10px;
	padding: 18px; border-radius: 18px;
	background: var(--fa-zolty); color: var(--fa-atrament);
	transform: rotate(-2deg);
}
.qg-szkielet__nowa p { margin: 0; font-weight: 800; font-size: 17px; line-height: 1.2; }
.qg-szkielet .qg-szkielet__nowa a {
	display: block; padding: 12px; border-radius: 999px; min-height: 44px;
	background: var(--fa-atrament); color: var(--fa-krem);
	text-align: center; text-decoration: none; font-weight: 600; font-size: 14px;
}
.qg-szkielet .qg-szkielet__nowa a:hover { background: #3a2f27; color: var(--fa-krem); }
.qg-szkielet__nowa a:focus-visible { outline-color: var(--fa-atrament); }

/* Odnośniki na dole paska (kasa: powrót do cennika, kontakt). */
.qg-szkielet__dol { border-top: 1px solid rgba(244, 237, 227, .12); padding-top: 14px; }
.qg-szkielet__nowa + .qg-szkielet__dol { margin-top: 0; }
.qg-szkielet .qg-szkielet__dol a { color: var(--fa-na-ciemnym-2); font-size: 14px; }
.qg-szkielet .qg-szkielet__dol a:hover { color: var(--fa-krem); }

/* Konto na dole paska: awatar, imię, adres; lista otwiera się w górę. */
.qg-szkielet__bok .qg-konto-menu { position: relative; }
.qg-szkielet__nowa ~ .qg-konto-menu,
.qg-szkielet__dol ~ .qg-konto-menu { margin-top: 0; }
.qg-szkielet__bok > .qg-nawigacja + .qg-konto-menu { margin-top: auto; }
.qg-szkielet__bok .qg-konto-menu summary {
	display: flex; align-items: center; gap: 10px; min-height: 44px;
	padding: 4px; border: 0; border-radius: 14px; background: transparent; color: var(--fa-krem);
}
.qg-szkielet__bok .qg-konto-menu summary:hover { background: rgba(244, 237, 227, .08); }
.qg-szkielet__bok .qg-konto-menu summary:focus-visible { outline: 3px solid var(--fa-zolty); outline-offset: 2px; }
.qg-konto-menu__awatar {
	flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
	background: var(--fa-zareczyny); color: var(--fa-atrament);
	font-family: var(--fa-font-tekst); font-weight: 800; font-size: 15px;
}
.qg-konto-menu__kto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qg-szkielet .qg-konto-menu__nazwa { max-width: none; font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-konto-menu__adres { font-size: 12px; color: var(--fa-na-ciemnym-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-szkielet__bok .qg-konto-menu summary svg { width: 16px; height: 16px; color: var(--fa-na-ciemnym-2); transform: rotate(180deg); }
.qg-szkielet__bok .qg-konto-menu[open] summary svg { transform: none; }
.qg-szkielet__bok .qg-konto-menu__lista {
	top: auto; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 0;
	border: 0; border-radius: 16px; padding: 6px; background: #fff;
	box-shadow: 0 20px 40px -12px rgba(26, 20, 16, .45);
}
.qg-szkielet .qg-konto-menu__lista a { color: var(--fa-atrament); font-size: 15px; min-height: 44px; border-radius: 10px; }
.qg-szkielet .qg-konto-menu__lista a:hover { background: var(--fa-krem); color: var(--fa-atrament); }
.qg-szkielet .qg-konto-menu__lista svg { color: var(--fa-tekst-2); }

/* Treść: pełna szerokość obok paska, do 1180 px (1440 − 260 z projektu). */
.qg-szkielet__reszta { background: var(--fa-krem); }
.qg-szkielet__tresc { max-width: var(--qg-kolumna); padding: 40px 48px 48px; }

/* Okruszki: zwykła linia nad treścią, jak „Moje galerie / Osiemnastka Kuby” w P2. */
.qg-szkielet .qg-gora {
	position: static; min-height: 0; margin: -4px 0 18px; padding: 0;
	background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.qg-szkielet .qg-gora__sciezka { gap: 6px; font-size: 14px; color: var(--fa-tekst-2); }
.qg-szkielet .qg-gora__sciezka a { color: var(--fa-tekst-2); text-decoration: none; }
/* Cel dotyku 44 px bez podnoszenia linii: pole kliknięcia wychodzi w odstępy
   nad i pod tekstem (recenzja 25.09.2026). To samo w stopce szkieletu. */
.qg-szkielet .qg-gora__sciezka a,
.qg-szkielet .qg-szkielet__stopka a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.qg-szkielet .qg-gora__sciezka a:hover { color: var(--fa-atrament); text-decoration: underline; }
.qg-szkielet .qg-gora__sciezka [aria-current] { color: var(--fa-atrament); font-weight: 800; }
.qg-szkielet .qg-gora__info { font-family: var(--fa-font-tekst); font-weight: 600; font-size: 14px; }
.qg-szkielet .qg-gora__znak svg { color: var(--fa-pomarancz-ciemny); }

.qg-szkielet .qg-szkielet__stopka {
	width: 100%; max-width: var(--qg-kolumna); margin-inline: auto;
	padding: 18px 48px 26px; border-top: 1px solid var(--linia);
	background: none; font-size: 13px; color: var(--fa-tekst-2);
}
.qg-szkielet .qg-szkielet__stopka a { color: var(--fa-tekst-2); }
.qg-szkielet .qg-szkielet__stopka a:hover { color: var(--fa-atrament); }

html:has(.qg-szkielet) { scroll-padding-top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); }
/* Zakładki galerii są przyklejone — kotwica staje pod nimi. */
html:has(.qg-zakladki) { scroll-padding-top: calc(84px + var(--wp-admin--admin-bar--height, 0px)); }

/* ---------------------------------------------------------------------
   Wspólne: nagłówek strony, karty, komunikaty, paski zajętości
   --------------------------------------------------------------------- */
.qg-szkielet .qg-panel__naglowek {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
	margin: 0 0 32px;
}
.qg-szkielet .qg-panel__naglowek > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qg-szkielet .qg-panel__naglowek h1 {
	margin: 0; font-size: 52px; line-height: 1;
	text-shadow: 3px 3px 0 rgba(26, 20, 16, .14); overflow-wrap: anywhere;
}
.qg-szkielet .qg-panel__naglowek h1.qg-tytul-obrys { text-shadow: 2px 2px 0 var(--fa-atrament), 4px 4px 0 var(--fa-atrament); }
.qg-szkielet .qg-panel__pod { margin: 0; font-size: 17px; color: var(--fa-tekst-2); }
.qg-panel__nowa, .qg-panel__akcje { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.qg-szkielet .qg-panel__nowa .qg-btn { padding: 16px 26px; font-size: 16px; font-weight: 600; }

.qg-szkielet .qg-panel__blok {
	margin: 0 0 24px; padding: 28px;
	background: #fff; border: 0; border-radius: 24px; box-shadow: none;
}
.qg-szkielet .qg-panel__blok h2 { margin: 0 0 18px; }
/* Tytuły sekcji jak „Zdjęcia i filmy” w P3: Baloo z lekkim cieniem. */
.qg-szkielet .qg-sekcja-tytul {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 0 0 18px; font-size: 36px; line-height: 1.05;
	text-shadow: 3px 3px 0 rgba(26, 20, 16, .14);
}
/* Tytuły kart jak „Materiały do druku” w P2: pogrubiony tekst, nie Baloo. */
.qg-szkielet .qg-karta-tytul,
.qg-szkielet .qg-druki-karta h3,
.qg-szkielet .qg-ciasno h3,
.qg-szkielet .qg-ostatnie h2 {
	margin: 0 0 14px; font-family: var(--fa-font-tekst); font-weight: 800; font-size: 18px; line-height: 1.3; text-shadow: none;
}
.qg-licznik {
	display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px;
	border-radius: 999px; background: var(--fa-zolty); color: var(--fa-atrament);
	font-family: var(--fa-font-tekst); font-size: 15px; font-weight: 800; text-shadow: none;
}
.qg-licznik--atrament { background: var(--fa-atrament); color: var(--fa-krem); }
.qg-szkielet .qg-panel__pomoc,
.qg-szkielet .qg-panel__pusty-blok { margin: 0; color: var(--fa-tekst-2); font-size: 15px; line-height: 1.5; }

.qg-szkielet .qg-komunikat,
.qg-panel-strona .qg-komunikat {
	margin: 0 0 20px; padding: 14px 18px; border-radius: 16px;
	background: #fff; border: 1.5px solid var(--linia); color: var(--fa-atrament); font-size: 15px;
}
.qg-szkielet .qg-komunikat--ok,
.qg-panel-strona .qg-komunikat--ok { background: #e2f4f0; border-color: var(--fa-psie); }
.qg-szkielet .qg-komunikat--blad,
.qg-panel-strona .qg-komunikat--blad { background: #fdeae4; border-color: var(--fa-pomarancz-ciemny); }

/* Pasek zajętości (P1): etykieta i liczba nad torem 8 px. */
.qg-pasek { display: flex; flex-direction: column; gap: 5px; }
.qg-pasek__opis { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.qg-pasek__opis strong { font-weight: 800; white-space: nowrap; }
.qg-pasek__tor { height: 8px; border-radius: 999px; background: var(--fa-krem-ciemny); overflow: hidden; }
.qg-pasek__tor span { display: block; height: 100%; min-width: 0; border-radius: 999px; background: var(--fa-pomarancz); }
.qg-pasek--filmy .qg-pasek__tor span { background: var(--fa-kawalerski); }
.qg-pasek--alarm .qg-pasek__tor span { background: var(--fa-pomarancz-ciemny); }

/* ---------------------------------------------------------------------
   P1 — lista galerii
   --------------------------------------------------------------------- */
.qg-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 20px; }
.qg-karta { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 24px; }
.qg-karta__foto { position: relative; height: 190px; background: var(--fa-krem-ciemny); }
.qg-karta__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qg-karta--koniec .qg-karta__foto img { filter: saturate(.7); }
.qg-karta__zastepnik { display: grid; place-items: center; height: 100%; }
.qg-karta__zastepnik svg { width: 72px; height: auto; overflow: visible; }
.qg-karta__stan {
	position: absolute; top: 14px; left: 14px;
	display: flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px;
	font-size: 13px; font-weight: 800; line-height: 1.3;
}
.qg-karta__stan--trwa { background: var(--fa-pomarancz); color: #fff; transform: rotate(-3deg); }
.qg-karta__stan--trwa::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.qg-karta__stan--przed { background: var(--fa-zolty); color: var(--fa-atrament); transform: rotate(2deg); }
.qg-karta__stan--koniec { background: var(--fa-atrament); color: var(--fa-krem); transform: rotate(-2deg); }

/* Stan pod nazwą — tylko na telefonie (P5), kolory czytelne na bieli. */
.qg-karta__stan-tekst { display: none; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 800; }
.qg-karta__stan-tekst--trwa { color: var(--fa-pomarancz-ciemny); }
.qg-karta__stan-tekst--trwa::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fa-pomarancz); }
.qg-karta__stan-tekst--przed { color: #8a6500; }
.qg-karta__stan-tekst--koniec { color: var(--fa-tekst-2); }

.qg-karta__tresc { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.qg-karta__tytul { display: flex; flex-direction: column; gap: 2px; }
.qg-karta__tytul h2 { margin: 0; font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.qg-karta__tytul h2 a { color: var(--fa-atrament); text-decoration: none; }
.qg-karta__tytul h2 a:hover { color: var(--fa-pomarancz-ciemny); }
.qg-karta__meta { margin: 0; font-size: 14px; color: var(--fa-tekst-2); }
.qg-karta__paski { display: flex; flex-direction: column; gap: 10px; }
.qg-karta__info { margin: 0; padding: 14px; border-radius: 14px; background: var(--fa-krem); font-size: 14px; line-height: 1.45; color: var(--fa-tekst-2); }
.qg-karta__skrot { display: none; }
.qg-karta__liczby { margin: 0; display: flex; gap: 24px; font-size: 14px; }
.qg-karta__liczby strong { font-size: 22px; font-weight: 800; }
.qg-karta__czeka { margin: 0; font-size: 14px; font-weight: 800; }
.qg-karta__czeka a { color: var(--fa-pomarancz-ciemny); }
.qg-karta__akcje { margin: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qg-szkielet .qg-karta__akcje .qg-btn { padding: 11px; font-size: 14px; }

.qg-pod-kartami { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.qg-ostatnie { padding: 24px; border-radius: 24px; background: var(--fa-krem-ciemny); }
.qg-ostatnie__siatka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.qg-ostatnie__siatka a { display: block; }
.qg-ostatnie__siatka img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.qg-ostatnie__pusto { margin: 0; color: var(--fa-tekst-2); }
.qg-szkielet a.qg-szybki-kod {
	display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: 24px;
	background: var(--fa-atrament); color: var(--fa-krem); text-decoration: none;
}
.qg-szkielet a.qg-szybki-kod:hover { color: var(--fa-krem); background: #2c231d; }
.qg-szybki-kod__qr { flex: 0 0 auto; width: 110px; padding: 8px; border-radius: 12px; background: #fff; }
.qg-szybki-kod__qr svg, .qg-kod__qr svg, .qg-druk-kafel__kod svg { display: block; width: 100%; height: auto; fill: var(--fa-atrament); }
.qg-szybki-kod__tekst { display: flex; flex-direction: column; gap: 6px; }
.qg-szybki-kod__tekst strong { font-family: var(--fa-font-naglowki); font-weight: 800; font-size: 28px; line-height: 1.05; }
.qg-szybki-kod__tekst span { font-size: 15px; line-height: 1.45; color: var(--fa-na-ciemnym-2); }

.qg-szkielet .qg-panel__pusto { padding: 48px 24px; border-radius: 24px; background: #fff; text-align: center; }
.qg-szkielet .qg-panel__pusto h2 { margin: 0 0 10px; font-size: 32px; }
.qg-szkielet .qg-panel__pusto p { margin: 0 auto; max-width: 520px; color: var(--fa-tekst-2); }
.qg-szkielet .qg-panel__pusto .qg-panel__pusto-akcje { margin-top: 24px; }
#nowa-galeria { margin-top: 24px; }

/* ---------------------------------------------------------------------
   P2 — szczegóły galerii: nagłówek, zakładki, kod QR, druki, terminy
   --------------------------------------------------------------------- */
.qg-szkielet .qg-panel__naglowek--galeria { margin-bottom: 26px; }
.qg-szkielet .qg-panel__naglowek--galeria > div { gap: 8px; }
.qg-szkielet .qg-panel__naglowek--galeria .qg-panel__pod { font-size: 16px; overflow-wrap: anywhere; }
.qg-panel__akcje .qg-btn { font-size: 15px; }
.qg-panel__akcje .qg-btn--obrys { padding: 13px 20px; }
.qg-panel__akcje .qg-btn--atrament { padding: 14px 22px; }

/* Zakładki: te same odnośniki co dawniej w pasku, jak „Kod QR i zaproszenia | Zdjęcia
   i filmy | …” w P2. Przyklejone, bo strona jest długa. */
.qg-szkielet .qg-zakladki {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 20;
	margin: 0 -48px 28px; padding: 0 48px;
	background: var(--fa-krem);
}
.qg-szkielet .qg-zakladki ul {
	display: flex; gap: 6px; margin: 0; padding: 0; list-style: none;
	border-bottom: 1.5px solid rgba(26, 20, 16, .12);
	overflow-x: auto; scrollbar-width: none;
}
.qg-szkielet .qg-zakladki ul::-webkit-scrollbar { display: none; }
.qg-szkielet .qg-zakladki li { flex: 0 0 auto; }
.qg-szkielet .qg-zakladki a {
	display: flex; align-items: center; gap: 8px; min-height: 48px;
	padding: 12px 18px; margin-bottom: -1.5px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
	background: none; color: var(--fa-tekst-2); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.qg-szkielet .qg-zakladki a:hover { color: var(--fa-atrament); background: none; }
.qg-szkielet .qg-zakladki a[aria-current] { color: var(--fa-atrament); font-weight: 800; border-bottom-color: var(--fa-pomarancz); background: none; }
.qg-szkielet .qg-zakladki a:focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: -3px; }
.qg-szkielet .qg-zakladki .qg-nawigacja__licznik { margin-left: 0; min-width: 22px; padding: 1px 7px; font-size: 12px; }

.qg-pulpit { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; margin: 0 0 32px; }
.qg-pulpit__prawo { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.qg-pulpit__prawo .qg-panel__blok { margin: 0; padding: 24px; }

/* Ciemna karta z kodem, lekko przechylona (P2). */
.qg-kod {
	display: flex; flex-direction: column; align-items: center; gap: 18px;
	padding: 28px; border-radius: 28px;
	background: var(--fa-atrament); color: var(--fa-krem);
	transform: rotate(-1deg);
}
.qg-kod__qr { width: 240px; max-width: 100%; padding: 16px; border-radius: 22px; background: #fff; }
.qg-kod__adres { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--fa-na-ciemnym-2); overflow-wrap: anywhere; text-align: center; }
.qg-kod__akcje { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.qg-szkielet .qg-kod__akcje .qg-btn { padding: 12px; font-size: 14px; }
.qg-szkielet .qg-kod__udostepnij { width: 100%; padding: 14px; }
.qg-kod__pomoc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fa-na-ciemnym-2); text-align: center; }
.qg-kod :focus-visible { outline-color: var(--fa-zolty); }

/* Pokaż na telewizorze (26.09.2026): dwie drogi obok siebie, druga to ciemna
   karta z adresem /tv i kodem jak „Szybki kod na dziś” z projektu panelu. */
.qg-pokaz-tv__drogi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.qg-pokaz-tv__droga { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: 20px; background: var(--fa-krem); }
.qg-szkielet .qg-pokaz-tv__droga h3 { margin: 0; font-family: var(--fa-font-tekst); font-weight: 800; font-size: 18px; line-height: 1.3; text-shadow: none; }
.qg-pokaz-tv__droga p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--fa-tekst-2); }
.qg-szkielet .qg-pokaz-tv__droga .qg-btn { margin-top: auto; }
.qg-pokaz-tv__droga--ciemna { background: var(--fa-atrament); color: var(--fa-krem); transform: rotate(1deg); }
.qg-pokaz-tv__droga--ciemna p { color: var(--fa-na-ciemnym-2); }
.qg-pokaz-tv__droga--ciemna .qg-pokaz-tv__adres,
.qg-pokaz-tv__droga--ciemna .qg-pokaz-tv__kod { font-family: var(--fa-font-naglowki); font-weight: 800; font-size: 32px; line-height: 1; color: var(--fa-krem); overflow-wrap: anywhere; }
.qg-pokaz-tv__droga--ciemna .qg-pokaz-tv__kod { color: var(--fa-zolty); letter-spacing: .08em; }
.qg-szkielet .qg-pokaz-tv__uwaga { margin: 18px 0 0; }

/* Materiały do druku: kolorowe kafle z białym polem i prawdziwym kodem. */
/* auto-fit, nie stałe 4 kolumny: liczba wzorów zależy od silnika druku (od
   25.09.2026 doszedł Plakat B1) i projektów na życzenie. Przy 1440 px pięć
   kafli mieści się w jednym rzędzie. */
.qg-szkielet .qg-druki-kafle { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 12px; }
.qg-szkielet .qg-druk-kafel { position: static; display: block; border: 0; border-radius: 0; background: none; overflow: visible; }
.qg-druk-kafel a { display: flex; flex-direction: column; gap: 8px; color: var(--fa-atrament); text-decoration: none; }
.qg-szkielet .qg-druk-kafel__scena {
	display: grid; place-items: center; height: auto; aspect-ratio: 3 / 4; padding: 0;
	border-radius: 12px; background: var(--fa-pomarancz);
}
.qg-druk-kafel__kod { display: grid; place-items: center; width: 44%; aspect-ratio: 1; padding: 5%; border-radius: 6px; background: #fff; }
.qg-druk-kafel--poziom .qg-druk-kafel__kod { width: 70%; aspect-ratio: 85 / 55; }
.qg-druk-kafel--poziom .qg-druk-kafel__kod svg { width: auto; height: 100%; }
/* Naklejka: białe koło jak w P2; większy margines, żeby rogi kodu nie wystawały poza koło. */
.qg-druk-kafel--kolo .qg-druk-kafel__kod { width: 54%; padding: 9%; border-radius: 50%; }
.qg-druk-kafel__plik { width: 40%; height: auto; color: var(--fa-krem); }
.qg-druk-kafel__nazwa { font-size: 14px; font-weight: 600; line-height: 1.3; }
.qg-druk-kafel__opis { font-size: 12px; color: var(--fa-tekst-2); }
.qg-druk-kafel a:hover .qg-druk-kafel__nazwa { text-decoration: underline; }
.qg-druk-kafel--zolty .qg-druk-kafel__scena { background: var(--fa-zolty); }
.qg-druk-kafel--fiolet .qg-druk-kafel__scena { background: var(--fa-kawalerski); }
.qg-druk-kafel--turkus .qg-druk-kafel__scena { background: var(--fa-psie); }
.qg-druk-kafel--niebieski .qg-druk-kafel__scena { background: var(--fa-firmowka); }
.qg-druk-kafel--rozowy .qg-druk-kafel__scena { background: var(--fa-zareczyny); }
.qg-druk-kafel--atrament .qg-druk-kafel__scena { background: var(--fa-atrament); }

/* Terminy: pasek „Galeria dostępna do…” pod drukami (P2). */
.qg-terminy { padding: 20px 24px; border-radius: 24px; background: var(--fa-krem-ciemny); }
.qg-terminy__glowa { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.qg-terminy__glowa > div { display: flex; flex-direction: column; gap: 4px; }
.qg-szkielet .qg-terminy h3 { margin: 0; font-family: var(--fa-font-tekst); font-weight: 800; font-size: 16px; line-height: 1.35; }
.qg-terminy__glowa p { margin: 0; font-size: 14px; color: var(--fa-tekst-2); }
.qg-szkielet a.qg-terminy__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--fa-atrament); }
.qg-terminy__dane { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(26, 20, 16, .12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.qg-terminy__dane dt { font-size: 13px; color: var(--fa-tekst-2); }
.qg-terminy__dane dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.qg-stan {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.qg-stan::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.qg-stan--otwarte { background: var(--fa-psie); color: var(--fa-atrament); }
.qg-stan--czeka { background: var(--fa-zolty); color: var(--fa-atrament); }
.qg-stan--zamkniete { background: var(--fa-atrament); color: var(--fa-krem); }

/* ---------------------------------------------------------------------
   P3 — zdjęcia i moderacja
   --------------------------------------------------------------------- */
.qg-zdjecia { margin: 0 0 32px; }
.qg-szkielet .qg-zdjecia > .qg-panel__pomoc { margin-bottom: 14px; }
/* Pasek zaznaczonych: atrament, pigułki z jasnym obrysem, „Usuń” na pomarańczu. */
.qg-szkielet .qg-moderacja__pasek {
	display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
	margin: 0 0 14px; padding: 12px 16px; border-radius: 16px;
	background: var(--fa-atrament); color: var(--fa-krem); font-size: 14px;
}
.qg-szkielet .qg-moderacja__pasek .qg-wszystkie { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fa-krem); font-size: 14px; font-weight: 600; cursor: pointer; }
.qg-szkielet .qg-moderacja__pasek .qg-wszystkie input { width: 20px; height: 20px; accent-color: var(--fa-pomarancz); }
.qg-moderacja__ile { font-weight: 800; }
.qg-moderacja__przyciski { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.qg-szkielet .qg-moderacja__pasek .qg-btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.qg-szkielet .qg-moderacja__pasek :focus-visible { outline-color: var(--fa-zolty); }

.qg-szkielet .qg-moderacja { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.qg-szkielet .qg-kafel { position: relative; display: block; overflow: hidden; border: 0; border-radius: 14px; background: var(--fa-krem-ciemny); cursor: pointer; }
.qg-szkielet .qg-kafel img,
.qg-szkielet .qg-kafel__czeka { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.qg-szkielet .qg-kafel__czeka { background: var(--fa-krem-ciemny); }
/* Pole wyboru jak w P3: zaokrąglony kwadrat z białą ramką, po zaznaczeniu pomarańczowy z ptaszkiem. */
.qg-szkielet .qg-kafel input {
	position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0;
	width: 24px; height: 24px; border-radius: 7px; border: 2px solid #fff;
	background: rgba(26, 20, 16, .2); cursor: pointer;
	/* Cienka atramentowa obwódka pod białą: na jasnym zdjęciu pole nie znika. */
	box-shadow: 0 0 0 1px rgba(26, 20, 16, .35);
	-webkit-appearance: none; appearance: none;
}
.qg-szkielet .qg-kafel input:checked {
	border-color: var(--fa-pomarancz);
	background: var(--fa-pomarancz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.qg-szkielet .qg-kafel input:focus-visible { outline: 3px solid var(--fa-zolty); outline-offset: 2px; }
.qg-szkielet .qg-kafel:has(input:checked) { border: 0; box-shadow: none; outline: 3px solid var(--fa-pomarancz); outline-offset: -3px; }
.qg-kafel__film {
	position: absolute; right: 8px; bottom: 8px;
	padding: 3px 8px; border-radius: 6px; background: var(--fa-atrament); color: #fff;
	font-size: 12px; font-weight: 600; text-decoration: none;
}
.qg-kafel__film:hover { background: var(--fa-pomarancz); }
.qg-strony { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }

/* ---------------------------------------------------------------------
   Pakiet, pobranie, okładka
   --------------------------------------------------------------------- */
.qg-pakiet__paski { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.qg-pakiet__paski .qg-pasek__opis { font-size: 15px; }
.qg-pakiet__paski .qg-pasek__tor { height: 10px; }
/* „Robi się ciasno?” — żółta karta z P3. */
.qg-ciasno { margin-top: 24px; padding: 20px; border-radius: 18px; background: var(--fa-zolty); color: var(--fa-atrament); }
.qg-szkielet .qg-ciasno h3 { margin: 0 0 6px; }
.qg-ciasno > p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.qg-ciasno__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qg-ciasno__lista li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .55); }
.qg-ciasno__lista p { margin: 0; font-size: 14px; line-height: 1.45; }
.qg-ciasno__lista strong { display: block; font-size: 15px; font-weight: 800; }
.qg-szkielet .qg-ciasno .qg-btn { flex: 0 0 auto; }
.qg-ciasno :focus-visible { outline-color: var(--fa-atrament); }

.qg-szkielet .qg-pakiet__akcje { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.qg-szkielet #pobranie form { margin-top: 16px; }
.qg-szkielet .qg-panel__uwaga { color: var(--fa-pomarancz-ciemny); }
.qg-szkielet .qg-postep__tor { height: 10px; background: var(--fa-krem-ciemny); border: 0; }

.qg-szkielet .qg-okladka { aspect-ratio: 5 / 2; border-radius: 18px; background: var(--fa-atrament); }
.qg-szkielet .qg-okladka::before { background: linear-gradient(180deg, rgba(26, 20, 16, .12) 0%, rgba(26, 20, 16, 0) 45%, rgba(26, 20, 16, .5) 100%); }
.qg-szkielet .qg-okladka__tytul {
	font-family: var(--fa-font-naglowki); font-weight: 800; font-size: 22px;
	background: rgba(244, 237, 227, .9); color: var(--fa-atrament); border-radius: 14px 14px 0 0;
}
.qg-szkielet .qg-dodaj {
	min-width: 0; padding: 16px 28px; border-radius: 999px;
	background: var(--fa-pomarancz); color: #fff; box-shadow: 0 4px 0 var(--fa-atrament);
	font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; text-shadow: none;
}
.qg-szkielet .qg-dodaj:hover { background: var(--fa-pomarancz-ciemny); filter: none; }
.qg-szkielet .qg-dodaj:focus-within { outline: 3px solid var(--fa-atrament); outline-offset: 3px; }
.qg-szkielet .qg-dodaj__ikona { width: 24px; height: 24px; }
.qg-szkielet .qg-os__kropka--zloto { background: var(--fa-pomarancz); border-color: var(--fa-pomarancz); }
.qg-szkielet .qg-os__tytul { font-family: var(--fa-font-tekst); font-size: 16px; }

/* ---------------------------------------------------------------------
   Ustawienia galerii i konta: pola, przełącznik, kalendarz
   --------------------------------------------------------------------- */
.qg-szkielet .qg-pola { gap: 6px 28px; }
.qg-szkielet .qg-pole label,
.qg-szkielet .qg-pole legend,
.qg-pole__etykieta { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.qg-szkielet .qg-pole small { font-size: 13px; line-height: 1.45; color: var(--fa-tekst-2); }
.qg-szkielet .qg-pole input[type="text"],
.qg-szkielet .qg-pole input[type="date"],
.qg-szkielet .qg-pole input[type="password"],
.qg-szkielet .qg-pole select,
.qg-szkielet .qg-kal__pole {
	min-height: 48px; padding: 13px 14px; border-radius: 14px;
	border: 1.5px solid var(--linia-pole); background-color: #fff; color: var(--fa-atrament);
	font-size: 15px; box-shadow: none;
}
.qg-szkielet .qg-pole select { appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.qg-szkielet .qg-pole input:focus-visible,
.qg-szkielet .qg-pole select:focus-visible,
.qg-szkielet .qg-kal__pole:focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 1px; }
.qg-szkielet .qg-data-ustalona { font-size: 16px; font-weight: 800; color: var(--fa-atrament); }
.qg-szkielet .qg-kal__pole { color: var(--fa-atrament); font-weight: 600; }
.qg-szkielet .qg-kal__panel { border: 0; border-radius: 18px; box-shadow: 0 20px 40px -12px rgba(26, 20, 16, .35); }
.qg-szkielet .qg-kal__miesiac { font-family: var(--fa-font-naglowki); font-weight: 800; }
.qg-szkielet .qg-kal__strzalka { width: 44px; height: 44px; border-radius: 999px; }
.qg-szkielet .qg-kal__dzien { min-height: 40px; border-radius: 10px; }
.qg-szkielet .qg-kal__dzien:hover { background: var(--fa-krem); }
.qg-szkielet .qg-kal__dzien--wybrany { background: var(--fa-pomarancz); color: var(--fa-atrament); }

/* Przełącznik „Akceptuję przed publikacją” (P3): pole wyboru narysowane jako suwak. */
.qg-szkielet .qg-przelacznik { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start; align-self: start; }
.qg-szkielet .qg-przelacznik label { grid-column: 1; grid-row: 1; margin: 0; font-size: 15px; cursor: pointer; }
.qg-szkielet .qg-przelacznik small { grid-column: 1; grid-row: 2; margin-top: 3px; }
.qg-szkielet .qg-przelacznik input[type="checkbox"] {
	grid-column: 2; grid-row: 1 / span 2; position: relative; margin: 0;
	width: 48px; height: 28px; border-radius: 999px; cursor: pointer;
	/* Przezroczysta ramka powiększa pole dotyku do 64 × 44 px, ujemny margines
	   trzyma rysunek i układ w miejscu (recenzja 25.09.2026). */
	box-sizing: content-box; border: 8px solid transparent; margin: -8px;
	background: #d8cdbf padding-box; box-shadow: inset 0 0 0 1.5px var(--linia-pole);
	-webkit-appearance: none; appearance: none; transition: background-color .15s ease;
}
.qg-szkielet .qg-przelacznik input[type="checkbox"]::before {
	content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 2px rgba(26, 20, 16, .3); transition: transform .15s ease;
}
.qg-szkielet .qg-przelacznik input[type="checkbox"]:checked { background: var(--fa-turkus-ciemny) padding-box; box-shadow: none; }
.qg-szkielet .qg-przelacznik input[type="checkbox"]:checked::before { transform: translateX(20px); }
.qg-szkielet .qg-ustawienia .qg-zapis { justify-content: flex-start; flex-wrap: wrap; margin: 18px 0 0; }
.qg-szkielet .qg-zapis .qg-btn { min-width: 0; }

.qg-szkielet .qg-panel__waski { max-width: 720px; margin-inline: 0; }
.qg-szkielet .qg-panel__dane { font-size: 16px; }
.qg-szkielet .qg-panel__blok code { background: var(--fa-krem); border: 0; border-radius: 8px; }

/* ---------------------------------------------------------------------
   P4 — logowanie (pod zwykłym nagłówkiem strony)
   --------------------------------------------------------------------- */
.qg-logowanie {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; align-items: center;
	max-width: 1080px; margin: 0 auto; padding: 56px 24px 72px;
}
.qg-logowanie__zdjecie { display: block; width: 100%; height: 460px; object-fit: cover; border-radius: 24px; transform: rotate(-2deg); }
.qg-logowanie__tresc { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.qg-logowanie__naglowek { display: flex; flex-direction: column; gap: 16px; }
.qg-logowanie h1 { margin: 0; font-family: var(--fa-font-naglowki); font-weight: 800; font-size: 56px; line-height: .95; letter-spacing: 0; }
.qg-logowanie__naglowek p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--fa-tekst-2); }
.qg-logowanie .qg-komunikat { margin: 0; }
.qg-panel-strona .qg-panel__logowanie { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.qg-panel__logowanie form { margin: 0; }
.qg-panel-strona .qg-panel__logowanie .login-username,
.qg-panel-strona .qg-panel__logowanie .login-password { margin: 0 0 16px; }
.qg-panel-strona .qg-panel__logowanie label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.qg-panel-strona .qg-panel__logowanie input[type="text"],
.qg-panel-strona .qg-panel__logowanie input[type="password"] {
	width: 100%; min-height: 52px; padding: 15px 16px; border-radius: 14px;
	border: 1.5px solid var(--linia-pole); background: #fff; color: var(--fa-atrament); font: inherit; font-size: 16px;
}
.qg-panel-strona .qg-panel__logowanie input:focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 1px; }
.qg-panel-strona .qg-panel__logowanie .login-remember { margin: 0 0 18px; color: var(--fa-tekst-2); font-size: 14px; }
.qg-panel-strona .qg-panel__logowanie .login-remember label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 400; }
.qg-panel-strona .qg-panel__logowanie .login-remember input { width: 20px; height: 20px; accent-color: var(--fa-atrament); }
.qg-panel-strona .qg-panel__logowanie .login-submit { margin: 0; }
.qg-panel-strona .qg-panel__logowanie .login-submit :is(input, button) {
	display: block; width: 100%; min-height: 56px; padding: 17px; border: 0; border-radius: 999px;
	background: var(--fa-atrament); color: var(--fa-krem); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.qg-panel-strona .qg-panel__logowanie .login-submit :is(input, button):hover { background: #3a2f27; }
.qg-logowanie__haslo { margin: 14px 0 0; text-align: center; font-size: 15px; }
.qg-logowanie__haslo a, .qg-logowanie__kup a { color: var(--fa-atrament); font-weight: 800; text-decoration: underline; }
.qg-logowanie__kup { margin: 0; text-align: center; font-size: 14px; color: var(--fa-tekst-2); }

/* Galeria nie istnieje / została usunięta — pod zwykłym nagłówkiem strony. */
.qg-komunikat-strona {
	max-width: 720px; margin: 56px auto 72px; padding: 40px 32px;
	border-radius: 24px; background: #fff; text-align: center;
}
.qg-komunikat-strona h1 { margin: 0 0 16px; font-family: var(--fa-font-naglowki); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: 0; }
.qg-komunikat-strona p { margin: 0 0 12px; color: var(--fa-tekst-2); line-height: 1.5; }
.qg-komunikat-strona__wstecz { text-align: left; font-size: 14px; }
.qg-komunikat-strona__akcje { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px !important; }

/* ---------------------------------------------------------------------
   Ruch: przechylenia zostają (są nieruchome), animacje przejść nie.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:where(.qg-panel-strona, .qg-szkielet) * { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Mniejszy laptop
   --------------------------------------------------------------------- */
@media (max-width: 1240px) {
	.qg-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qg-pulpit { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
	.qg-szkielet { --qg-bok: 232px; }
	.qg-szkielet__bok { padding: 24px 16px; gap: 22px; }
	.qg-szkielet__tresc { padding: 32px 32px 40px; }
	.qg-szkielet .qg-zakladki { margin-inline: -32px; padding-inline: 32px; }
	.qg-szkielet .qg-szkielet__stopka { padding-inline: 32px; }
	.qg-pod-kartami { grid-template-columns: 1fr; }
	.qg-pulpit { grid-template-columns: 1fr; }
	.qg-kod { max-width: 420px; width: 100%; margin-inline: auto; }
	.qg-terminy__dane { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Telefon i tablet: pasek staje się belką u góry (P5) — logo z lewej,
   awatar konta z prawej. Nawigacja zostaje tylko w kasie (kroki); w panelu
   drogę do konta i listy daje menu konta, a sekcje galerii — zakładki.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
	.qg-szkielet { background: var(--fa-krem); }
	.qg-szkielet__bok {
		position: static; height: auto; overflow: visible;
		display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px;
		padding: 14px 20px; background: var(--fa-krem); color: var(--fa-atrament);
	}
	.qg-szkielet__logo { color: var(--fa-atrament); }
	.qg-szkielet__logo:hover { color: var(--fa-atrament); }
	.qg-szkielet__logo .qg-szkielet__marka { font-size: 22px; }
	.qg-szkielet__ikona { width: 34px; height: 32px; }
	/* Ikona z projektu P5 nie ma aparatu — zostaje, ale w wersji jasnej (atramentowy korpus). */
	.qg-szkielet__ikona rect { fill: var(--fa-atrament); }
	.qg-szkielet__ikona circle[stroke] { stroke: var(--fa-krem); }
	.qg-szkielet__bok .qg-nawigacja { grid-column: 1 / -1; }
	.qg-szkielet__bok .qg-nawigacja:not(:has(a[href^="#"])) { display: none; }
	.qg-szkielet__bok .qg-nawigacja ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; }
	.qg-szkielet__bok .qg-nawigacja a { flex: 0 0 auto; padding: 10px 14px; white-space: nowrap; color: var(--fa-tekst-2); }
	.qg-szkielet__bok .qg-nawigacja a:hover { color: var(--fa-atrament); background: var(--fa-krem-ciemny); }
	.qg-szkielet__nowa, .qg-szkielet__dol { display: none; }

	.qg-szkielet__bok .qg-konto-menu { grid-column: 2; grid-row: 1; margin: 0; }
	.qg-szkielet__bok .qg-konto-menu summary { padding: 4px; border-radius: 50%; color: var(--fa-atrament); }
	.qg-szkielet__bok .qg-konto-menu summary:hover { background: none; }
	.qg-szkielet__bok .qg-konto-menu summary:focus-visible { outline-color: var(--fa-atrament); }
	.qg-konto-menu__kto, .qg-szkielet__bok .qg-konto-menu summary svg { display: none; }
	.qg-konto-menu__awatar { width: 36px; height: 36px; font-size: 14px; }
	.qg-szkielet__bok .qg-konto-menu__lista { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; min-width: 220px; z-index: 50; }

	.qg-szkielet__tresc { padding: 8px 20px 32px; }
	.qg-szkielet .qg-szkielet__stopka { padding: 16px 20px 24px; }
	.qg-szkielet .qg-zakladki { margin-inline: -20px; padding-inline: 20px; }
	html:has(.qg-zakladki) { scroll-padding-top: calc(70px + var(--wp-admin--admin-bar--height, 0px)); }

	.qg-szkielet .qg-panel__naglowek h1 { font-size: 40px; }
	.qg-szkielet .qg-sekcja-tytul { font-size: 30px; }
	.qg-szkielet .qg-panel__blok { padding: 22px; }

	.qg-logowanie { grid-template-columns: 1fr; gap: 22px; max-width: 520px; padding: 20px 24px 40px; }
	.qg-logowanie__zdjecie { height: 250px; }
	.qg-logowanie h1 { font-size: 44px; }
}

/* ---------------------------------------------------------------------
   Telefon (P5): karty galerii w wierszu, przyklejony „+ Nowa galeria”
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
	.qg-tylko-duzy { display: none; }
	.qg-tylko-telefon { display: inline; }
	.qg-szkielet .qg-panel__naglowek { margin-bottom: 14px; }
	.qg-szkielet .qg-panel__naglowek h1 { font-size: 36px; }
	.qg-szkielet .qg-panel__naglowek--galeria h1 { font-size: 36px; }
	.qg-szkielet .qg-panel__pod { font-size: 15px; }

	/* Przycisk przyklejony do dołu ekranu jak w P5; treść ma pod nim zapas. */
	.qg-panel__nowa { position: fixed; left: 16px; right: 16px; bottom: 22px; z-index: 30; }
	.qg-szkielet .qg-panel__nowa .qg-btn { width: 100%; padding: 17px; font-weight: 800; box-shadow: 0 4px 0 var(--fa-atrament); }
	.qg-szkielet:has(.qg-panel__nowa) .qg-szkielet__stopka { padding-bottom: 100px; }

	.qg-karty { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
	.qg-karta { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 22px; }
	.qg-karta__foto { flex: 0 0 74px; width: 74px; height: 74px; border-radius: 14px; overflow: hidden; position: static; }
	.qg-karta__zastepnik svg { width: 40px; }
	.qg-karta__tresc { order: 2; padding: 0; gap: 5px; min-width: 0; }
	.qg-karta__tytul { order: 1; }
	.qg-karta__tytul h2 { font-family: var(--fa-font-tekst); font-size: 16px; line-height: 1.3; }
	/* Cała karta prowadzi do galerii — przyciski projekt P5 chowa. */
	.qg-karta__tytul h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 22px; }
	.qg-karta__meta, .qg-karta__info, .qg-karta__akcje, .qg-karta .qg-pasek--filmy, .qg-karta__paski .qg-pasek__opis, .qg-karta__stan { display: none; }
	/* Pod nagłówkiem listy projekt P5 nie ma podpisu — zostaje sam tytuł. */
	.qg-szkielet .qg-panel__naglowek:has(.qg-tylko-telefon) .qg-panel__pod { display: none; }
	.qg-karta__stan-tekst { order: 2; display: flex; }
	.qg-karta__paski { order: 3; }
	.qg-karta__paski .qg-pasek__tor { height: 6px; }
	.qg-karta__skrot, .qg-karta__liczby { order: 3; display: block; margin: 0; font-size: 13px; color: var(--fa-tekst-2); }
	.qg-karta__liczby span + span::before { content: " · "; }
	.qg-karta__liczby strong { font-size: 13px; font-weight: 400; }
	.qg-karta__czeka { order: 4; position: relative; z-index: 2; font-size: 12px; }

	.qg-ostatnie { display: none; }
	.qg-szkielet a.qg-szybki-kod { gap: 14px; padding: 18px; border-radius: 22px; margin-top: 6px; }
	.qg-szybki-kod__qr { width: 70px; padding: 6px; border-radius: 10px; }
	.qg-szybki-kod__tekst { gap: 4px; }
	.qg-szybki-kod__tekst strong { font-family: var(--fa-font-tekst); font-size: 15px; line-height: 1.3; }
	.qg-szybki-kod__tekst span { font-size: 13px; line-height: 1.35; }

	.qg-panel__akcje { width: 100%; }
	.qg-panel__akcje .qg-btn { flex: 1 1 auto; }
	.qg-kod { padding: 22px; transform: none; }
	.qg-kod__qr { width: 200px; }
	.qg-szkielet .qg-druk-kafel__scena { aspect-ratio: 1; }
	.qg-terminy { padding: 18px; }
	.qg-terminy__glowa { flex-direction: column; }
	.qg-pakiet__paski { grid-template-columns: 1fr; }
	.qg-ciasno__lista li { flex-direction: column; align-items: stretch; }
	.qg-szkielet .qg-moderacja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qg-moderacja__przyciski { margin-left: 0; width: 100%; }
	.qg-szkielet .qg-moderacja__pasek .qg-btn { flex: 1 1 auto; }
	.qg-szkielet .qg-ustawienia .qg-zapis .qg-btn { width: 100%; }
	.qg-szkielet .qg-okladka { aspect-ratio: 16 / 9; }
	.qg-komunikat-strona { margin: 24px 16px 48px; padding: 28px 20px; }
	.qg-komunikat-strona h1 { font-size: 34px; }
}