/* CINEVA - wspólny wygląd (przyciski, pola, karty, zakładki).
   KOPIA: ten sam plik leży w wtyczkach Użytkownicy, Panel i Inspiracje.
   Zmiany wprowadzaj we wszystkich trzech naraz. */

.cnv-ui,
.cnv-in,
.cnv-onb {
	--k-rozowy: #ff00c8;
	--k-blekit: #0693e3;
	--k-gradient: var(--cnv-gradient, linear-gradient(90deg, #ff00c8 0%, #0693e3 100%));
	--k-tlo: #111111;
	--k-karta: #1a1a1a;
	--k-linia: rgba(255, 255, 255, 0.1);
	--k-tekst: #ffffff;
	--k-tekst-cichy: rgba(255, 255, 255, 0.62);
	box-sizing: border-box;
	color: var(--k-tekst);
	font-family: inherit;
	line-height: 1.5;
}
.cnv-ui *,
.cnv-ui *::before,
.cnv-ui *::after,
.cnv-in *,
.cnv-in *::before,
.cnv-in *::after,
.cnv-onb *,
.cnv-onb *::before,
.cnv-onb *::after { box-sizing: border-box; }

.cnv-ui[hidden], .cnv-ui [hidden], .cnv-in [hidden], .cnv-onb [hidden] { display: none !important; }

.cnv-ui { max-width: 980px; margin: 0 auto; padding: 24px 16px 64px; }

/* ---------- nagłówki / teksty ---------- */
.cnv-ui .cnv-ui__tytul { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.15; color: var(--k-tekst); }
.cnv-ui .cnv-ui__opis { margin: 0 0 20px; color: var(--k-tekst-cichy); }
.cnv-ui .cnv-ui__hej { margin: 0; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-tekst-cichy); }
.cnv-ui h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--k-tekst); }
.cnv-ui h3 small { font-weight: 400; color: var(--k-tekst-cichy); font-size: 13px; }

/* ---------- logowanie ---------- */
.cnv-ui--auth { max-width: 460px; }
.cnv-ui__pudlo {
	background: var(--k-karta);
	border: 1px solid var(--k-linia);
	border-radius: 20px;
	padding: 32px 28px;
}

.cnv-ui__zakladki {
	display: flex;
	gap: 6px;
	padding: 4px;
	margin: 0 0 20px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 999px;
}
.cnv-ui__zakladka {
	flex: 1;
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--k-tekst-cichy);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	padding: 10px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.cnv-ui__zakladka:hover { color: var(--k-tekst); }
.cnv-ui__zakladka.jest-aktywna { background: var(--k-tekst); color: #111; }
.cnv-ui__zakladki--male { max-width: 380px; margin: 28px 0 18px; }

/* ---------- formularze ---------- */
.cnv-ui__form { display: flex; flex-direction: column; gap: 14px; }
.cnv-ui__pole { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--k-tekst-cichy); }
.cnv-ui .cnv-ui__pole input,
.cnv-ui .cnv-ui__link-wiersz input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	background: #111;
	color: var(--k-tekst);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	font: inherit;
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.cnv-ui .cnv-ui__pole input:focus,
.cnv-ui .cnv-ui__link-wiersz input:focus {
	outline: 0;
	border-color: var(--k-blekit);
	box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.25);
}
.cnv-ui .cnv-ui__pole input[readonly] { color: var(--k-tekst-cichy); }

.cnv-ui__zgoda { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--k-tekst-cichy); cursor: pointer; }
.cnv-ui__zgoda input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--k-rozowy); }
.cnv-ui__zgoda a { color: var(--k-tekst); text-decoration: underline; }

.cnv-ui__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cnv-ui__komunikat {
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
	background: rgba(255, 70, 90, 0.12);
	border: 1px solid rgba(255, 70, 90, 0.4);
	color: #ffb4bd;
}
.cnv-ui__komunikat.cnv-ui__komunikat--ok {
	background: rgba(40, 200, 120, 0.12);
	border-color: rgba(40, 200, 120, 0.4);
	color: #9fe8c2;
}

/* ---------- przyciski ---------- */
.cnv-ui .cnv-ui__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: transparent;
	color: var(--k-tekst);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s, background 0.2s, border-color 0.2s, opacity 0.2s;
}
.cnv-ui .cnv-ui__btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
.cnv-ui .cnv-ui__btn:active { transform: scale(0.98); }
.cnv-ui .cnv-ui__btn:disabled { opacity: 0.5; cursor: wait; }
.cnv-ui .cnv-ui__btn--glowny { border: 0; background: var(--k-gradient); color: #fff; }
.cnv-ui .cnv-ui__btn--glowny:hover { background: var(--k-gradient); filter: brightness(1.12); }
.cnv-ui .cnv-ui__btn--cichy { border-color: transparent; color: var(--k-tekst-cichy); }
.cnv-ui .cnv-ui__btn--niebezpieczny { border-color: rgba(255, 70, 90, 0.6); color: #ff8b99; }
.cnv-ui .cnv-ui__btn--niebezpieczny:hover { background: rgba(255, 70, 90, 0.14); border-color: #ff4660; }

.cnv-ui .cnv-ui__link {
	appearance: none;
	background: none;
	border: 0;
	padding: 4px;
	color: var(--k-tekst-cichy);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
	align-self: center;
}
.cnv-ui .cnv-ui__link:hover { color: var(--k-tekst); }

.cnv-ui__akcje { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }

/* ---------- panel klienta ---------- */
.cnv-ui__gora { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cnv-ui__wyloguj { color: var(--k-tekst-cichy); font-size: 14px; text-decoration: underline; }
.cnv-ui__wyloguj:hover { color: var(--k-tekst); }
.cnv-ui__nav { max-width: 380px; }

.cnv-ui__statystyki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 4px; }
.cnv-ui__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 20px;
	background: var(--k-karta);
	border: 1px solid var(--k-linia);
	border-radius: 16px;
}
.cnv-ui__stat strong { font-size: 32px; line-height: 1; font-weight: 700; }
.cnv-ui__stat span { font-size: 13px; color: var(--k-tekst-cichy); }

.cnv-ui__karta {
	margin: 20px 0;
	padding: 22px 24px;
	background: var(--k-karta);
	border: 1px solid var(--k-linia);
	border-radius: 16px;
}
.cnv-ui__karta > p { margin: 0 0 14px; color: var(--k-tekst-cichy); font-size: 14px; }
.cnv-ui__karta.cnv-ui__form { gap: 14px; }
.cnv-ui__strefa .cnv-ui__form { padding: 14px 0; border-top: 1px solid var(--k-linia); }
.cnv-ui__strefa .cnv-ui__form:first-of-type { border-top: 0; }
.cnv-ui__strefa .cnv-ui__form p { margin: 0; font-size: 14px; color: var(--k-tekst-cichy); }
.cnv-ui__strefa .cnv-ui__btn { align-self: flex-start; }

.cnv-ui__link-wiersz { display: flex; flex-wrap: wrap; gap: 10px; }
.cnv-ui__link-wiersz input { flex: 1 1 260px; width: auto; min-width: 0; }

/* ---------- wersja szeroka ----------
   Wychodzi poza wąską kolumnę treści motywu (układ "constrained" WordPressa)
   i wypełnia stronę do 1320 px. Używają jej Panel i publiczny moodboard. */
.cnv-ui.cnv-ui--szeroki {
	position: relative !important;
	left: 50% !important;
	right: auto !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: -50vw !important;
	margin-right: 0 !important;
	padding-left: max(20px, calc((100vw - 1320px) / 2)) !important;
	padding-right: max(20px, calc((100vw - 1320px) / 2)) !important;
}

@media (max-width: 560px) {
	.cnv-ui { padding: 16px 14px 48px; }
	.cnv-ui__pudlo { padding: 26px 18px; }
	.cnv-ui__statystyki { gap: 8px; }
	.cnv-ui__stat { padding: 14px; }
	.cnv-ui__stat strong { font-size: 26px; }
}