/* WhatCarTool — panel producenta. Neutralne style, nadpisywalne w theme. */

.wct-panel {
	font-size: var(--wct-font-size, 14px);
	color: var(--wct-ink, #1c2530);
	/* Wciecie i promien na wrapperze: bez nich tlo nadane w kreatorze klei
	   kafelki i teksty do krawedzi (asymetryczne marginesy). Na przezroczystym
	   tle wciecie jest niezauwazalne. */
	padding: 20px 22px 24px;
	border-radius: var(--wct-radius-card, 14px);
}

/* Sekcja panelu jako osobny shortcode [wct_panel_*] (v0.9.9 — custom layout). */
.wct-panel--section { margin: 0 0 16px; }

.wct-panel__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	padding: 14px;
	background: var(--wct-surface-alt, #f6f8fa);
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius-card, 10px);
	margin-bottom: 16px;
}

/* TT21 dokleja label { margin-bottom: ~10px } — przy align-items:flex-end
   równana jest krawędź MARGINESU, więc select „Device" lewitował nad inputami. */
.wct-panel label { margin: 0; }

.wct-panel__bar label,
.wct-panel__scope label,
.wct-panel__functions label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
	font-size: 12px;
}

.wct-panel select,
.wct-panel input[type="text"],
.wct-panel input[type="password"],
.wct-panel input[type="search"],
.wct-panel input[type="number"],
.wct-panel input[type="url"],
.wct-panel input[type="email"],
.wct-panel input[type="tel"],
.wct-panel textarea {
	/* v0.14.7 (zrzuty mobile): select z długą opcją (np. „Device with pre-installed
	   software (standalone)") ma min-content = najdłuższa opcja i rozpychał
	   fieldset/grid poza ekran — twardy sufit szerokości kończy tę klasę błędów. */
	max-width: 100%;
	min-width: 0; /* flex item: min-width:auto blokowal kurczenie mimo max-width */
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 7px);
	font-size: var(--wct-font-size, 14px);
	font-weight: 400;
	/* Jawna interlinia: TT21 daje polom 1.7 (~24 px przy 14 px), co przy polach
	   o sztywnej wysokosci wypychalo tekst w dol i ucinalo ogony liter. */
	line-height: 1.2;
	background: var(--wct-surface, #fff);
	color: inherit;
	/* TT21 dokleja polom marginesy — flex centruje po MARGIN-boxie, więc sąsiednie
	   elementy (np. × przy sklepach) siadały poniżej wizualnego środka pola. */
	margin: 0;
}
.wct-panel select:focus,
.wct-panel input[type="text"]:focus,
.wct-panel input[type="password"]:focus,
.wct-panel input[type="search"]:focus,
.wct-panel input[type="number"]:focus,
.wct-panel input[type="url"]:focus,
.wct-panel input[type="email"]:focus,
.wct-panel input[type="tel"]:focus,
.wct-panel textarea:focus {
	border-color: var(--wct-accent, #1769ff);
	box-shadow: 0 0 0 2px rgba(23, 105, 255, 0.15);
	outline: none;
}

/* Checkboxy: natywne, małe, w kolorze akcentu — spójnie w CAŁYM panelu (wzorzec:
   matryca funkcji). Motyw TT21 rysuje własne 25×25 px z grubą ramką i znaczkiem
   w :after (appearance:none) — stąd „grube kwadraty" poza matrycą. */
.wct-panel input[type="checkbox"] {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	position: static;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 0;
	background: none;
	accent-color: var(--wct-accent, #1769ff);
	cursor: pointer;
}
.wct-panel input[type="checkbox"]::after { content: none; }
.wct-panel input[type="checkbox"]:focus { outline: 2px solid rgba(23, 105, 255, 0.4); outline-offset: 1px; }

/* Upload zdjęć (cover/galeria): własny przycisk EN zamiast natywnego inputa —
   teksty „Wybierz plik / Nie wybrano pliku" pochodzą z PRZEGLĄDARKI (język usera),
   a portal ma być konsekwentnie angielski. Input ukryty (klik przez label). */
.wct-panel .wct-file-btn {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 14px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: 999px;
	background: var(--wct-surface-alt, #f6f8fa);
	color: var(--wct-ink, #1c2530);
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
	/* #103: TT21 robi z KAZDEGO fieldsetu siatke (fieldset{display:grid}), wiec
	   label-przycisk jako element siatki rozciagal sie na cala szerokosc karty
	   (inline-block nic tu nie znaczy). justify-self = szerokosc tresci w siatce. */
	justify-self: start;
	width: max-content;
	max-width: 100%;
	box-sizing: border-box;
}
.wct-panel .wct-file-btn:hover { color: var(--wct-accent, #1769ff); border-color: var(--wct-accent, #1769ff); }

.wct-panel__vtypes {
	display: flex;
	gap: 10px;
	align-items: center;
}
/* #106: pole filtra nad selectem marki — wyglad z `.wct-panel input[type="search"]`. */
.wct-panel__mkfilter { margin: 0 0 2px; min-width: 0; }

.wct-panel__vtypes label {
	flex-direction: row;
	align-items: center;
	font-weight: 400;
	font-size: var(--wct-font-size-sm, 13px);
}

.wct-panel__new {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 2px 2px;
}

/* Dodawanie nowego urządzenia: zwijana karta pod paskiem (v0.12.16) —
   w jednej linii z selectem wyglądało jak jeden formularz. */
.wct-panel__adddev { margin: 10px 0 16px; }
.wct-adddev__open {
	display: inline-block;
	cursor: pointer;
	padding: 7px 14px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: 999px;
	background: var(--wct-surface-alt, #f6f8fa);
	color: var(--wct-ink, #1c2530);
	font-weight: 600;
	font-size: var(--wct-font-size-sm, 13px);
	list-style: none;
}
.wct-adddev__open::-webkit-details-marker { display: none; }
.wct-adddev__open:hover { color: var(--wct-accent, #1769ff); border-color: var(--wct-accent, #1769ff); }
.wct-panel__adddev .wct-panel__new input[type="text"],
.wct-panel__adddev .wct-panel__new button {
	height: 38px;
	box-sizing: border-box;
	margin: 0;
}
.wct-panel__adddev .wct-panel__new button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Kontrolki jednoliniowe paska: identyczna wysokość i wyzerowane marginesy —
   TT21 daje polom/selectom różne line-height i marginesy, przez co select
   urządzenia stał kilka px wyżej niż pola „New device name"/„Model code". */
.wct-panel__bar select,
.wct-panel__bar input[type="text"] {
	height: 38px;
	box-sizing: border-box;
	margin: 0;
	line-height: normal;
	font-size: var(--wct-font-size, 14px);
}
.wct-panel__bar button {
	height: 38px;
	box-sizing: border-box;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wct-panel__bar .wct-panel__vtypes { align-self: center; }

.wct-panel__grid {
	display: grid;
	/* minmax(0,…): v0.14.7 — tor 1fr/2fr ma domyślnie min-width:auto i nie kurczy
	   się poniżej min-content zawartości; karty wystawały poza ramkę kroku. */
	/* v0.45.0: JEDNA kolumna — dwie (scope | funkcje) nie miescily sekcji 1
	   (1735 px w 300 px szerokosci); teraz 3.1 → koszyk → 3.2 → pasek zapisu. */
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

.wct-panel__scope,
.wct-panel__functions {
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius-card, 10px);
	padding: 16px;
}

.wct-panel__scope label { margin-bottom: 10px; }

/* v0.13.1 (#9/#10): podpowiedzi pod kontrolkami/sekcjami — wzorzec ustawień WP.
   ZAWSZE osobny blok pod kontrolką (nigdy w linii z przyciskami): tekst może
   najwyżej wydłużyć sekcję w pionie, niczego nie rozjedzie. Pełna szerokość
   kontenera (cap 72ch zdjęty w v0.14.6 — feedback usera: opisy łamały się do
   drugiej linii mimo wolnego miejsca); font-weight 400 nadpisuje bold labeli. */
.wct-panel .wct-hint {
	display: block;
	margin: 4px 0 10px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wct-muted, #5a6675);
}
.wct-panel__scope label .wct-hint,
.wct-mklist .wct-hint { margin: 0 0 4px; } /* wewnątrz flex-column gap już rozdziela */

.wct-panel h4 {
	margin: 0 0 12px;
	font-size: 15px;
}

.wct-panel__fnbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 12px;
}

.wct-panel__fnbar input[type="text"] { flex: 1 1 200px; }

/* v0.14.3 (feedback usera): All/None przeniesione z paska notatki NAD matrycę —
   obok pola Note wyglądały jak akcje notatki. Jawna etykieta „Select functions:". */
.wct-panel__selbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 10px 0 6px;
}
.wct-panel__selbar-label { font-weight: 600; font-size: 12px; }

/* Matryca funkcji (v0.9.8): akordeon kategorii z licznikami zaznaczeń + filtr.
   241 funkcji w kilkunastu kategoriach — sekcje domyślnie zwinięte zamiast
   ściany checkboxów w przewijanym okienku 360 px. */
.wct-panel__fnfilter {
	width: 100%;
	margin-bottom: 10px;
}

.wct-panel__matrix {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wct-fnset {
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	background: var(--wct-surface, #fff);
	margin: 0;
	padding: 0;
}
.wct-fnset.is-hidden { display: none; }

.wct-fnset > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--wct-radius-card, 8px);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.wct-fnset > summary::-webkit-details-marker { display: none; }
.wct-fnset > summary::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid #8a94a3;
	border-bottom: 2px solid #8a94a3;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}
.wct-fnset[open] > summary::before { transform: rotate(45deg); margin-top: -6px; }
.wct-fnset > summary:hover { background: var(--wct-surface-alt, #f6f8fa); }
.wct-fnset[open] > summary { border-bottom: 1px solid var(--wct-surface-alt, #eef1f5); border-radius: var(--wct-radius-card, 8px) var(--wct-radius-card, 8px) 0 0; }

.wct-fnset__title {
	font-weight: 600;
	font-size: var(--wct-font-size-sm, 13px);
	text-transform: capitalize;
}

.wct-fnset__count {
	font-size: 11px;
	font-weight: 600;
	color: var(--wct-muted, #5a6675);
	background: var(--wct-surface-alt, #eef1f5);
	border-radius: 999px;
	padding: 1px 8px;
}
.wct-fnset__count.has-some { background: var(--wct-accent, #1769ff); color: var(--wct-accent-ink, #fff); }

.wct-fnset__tools { margin-left: auto; display: flex; gap: 6px; }
.wct-panel .wct-fnset__tools button,
.wct-panel .wct-fnset__tools button:not(:hover):not(:active) {
	background: transparent;
	color: var(--wct-muted, #5a6675);
	border: 1px solid var(--wct-border, #d6dae0);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 999px;
}
.wct-panel .wct-fnset__tools button:hover { background: transparent; color: var(--wct-accent, #1769ff); border-color: var(--wct-accent, #1769ff); }

.wct-fnset__body {
	display: grid;
	/* v0.45.4: matryca jest teraz na CALEJ szerokosci kroku (uklad jednokolumnowy),
	   wiec 250 px dawalo 4 waskie kolumny i $ oraz ✎ spadaly pod nazwe — 340 px =
	   3 kolumny na desktopie, kontrolki w jednej linii z nazwa. */
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 2px 16px;
	padding: 8px 12px 10px;
}

/* TT21 styluje przyciski łańcuchami :not(:hover):not(:active)… o specyficzności
   (0,3,1) — zwykłe .wct-panel button przegrywało (ciemne, wielkie przyciski,
   tekst poza osią). Bazę i warianty deklarujemy więc także łańcuchem :not. */
.wct-panel button {
	padding: 9px 16px;
	border: 0;
	border-radius: var(--wct-radius, 7px);
	background: var(--wct-accent, #1769ff);
	color: var(--wct-accent-ink, #fff);
	font-family: inherit;
	font-size: var(--wct-font-size-sm, 13px);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.wct-panel button:not(:hover):not(:active) {
	background: var(--wct-accent, #1769ff);
	color: var(--wct-accent-ink, #fff);
}
.wct-panel button:hover,
.wct-panel button:active { background: var(--wct-accent-hover, #0f56d8); color: var(--wct-accent-ink, #fff); }

.wct-panel button.wct-danger,
.wct-panel button.wct-danger:not(:hover):not(:active) { background: var(--wct-danger, #d23b3b); }
.wct-panel button.wct-danger:hover { background: var(--wct-danger, #b32d2e); }

.wct-panel__save { margin-top: 14px; }

/* Usuwanie urządzenia (ramka moderacji) — oddzielone linią, akcja destrukcyjna. */
.wct-panel__danger { margin-top: 18px; padding-top: 12px; border-top: 1px solid #f0d4d4; }
.wct-panel__danger .wct-dim { margin-left: 8px; }

/* Gdy T&C niezaakceptowane, „Accept Terms" jest główną akcją, a „Submit for
   review" wtórną (ghost) — inaczej producent klikał submit i dostawał odmowę. */
.wct-panel button.wct-panel__save.is-secondary,
.wct-panel button.wct-panel__save.is-secondary:not(:hover):not(:active) {
	background: var(--wct-surface, #fff);
	color: var(--wct-muted, #5a6675);
	border: 1px solid var(--wct-border, #d6dae0);
}
.wct-panel button.wct-panel__save.is-secondary:hover,
.wct-panel button.wct-panel__save.is-secondary:active {
	background: var(--wct-surface-alt, #f6f8fa);
	color: var(--wct-accent, #1769ff);
	border-color: var(--wct-accent, #1769ff);
}

.wct-panel__msg { margin-left: 12px; font-weight: 600; }
.wct-panel__msg.is-ok { color: #1a8245; }
.wct-panel__msg.is-error { color: var(--wct-danger, #d23b3b); }

.wct-panel__existing h4 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wct-panel__csv { display: flex; gap: 8px; }

/* Current coverage (v0.12.1): zwijalna karta, DOMYŚLNIE ZWINIĘTA — otwarta tabela
   na końcu bloku pokryć sugerowała koniec strony, a niżej czeka karta produktu. */
.wct-panel__existing { margin: 0 0 26px; }
.wct-panel__existing details { border: 1px solid var(--wct-border, #dcdcde); border-radius: var(--wct-radius-card, 8px); background: var(--wct-surface-alt, #fafbfc); }
.wct-covlist__head { cursor: pointer; padding: 12px 16px; list-style: none; }
.wct-covlist__head::-webkit-details-marker { display: none; }
.wct-covlist__head::before { content: '▸ '; font-weight: 600; color: var(--wct-accent, #2271b1); }
details[open] > .wct-covlist__head::before { content: '▾ '; }
.wct-covlist__count { margin-left: 6px; font-weight: 600; color: var(--wct-accent, #2271b1); }
.wct-covlist__hint { display: block; margin: 4px 0 0 18px; color: var(--wct-muted, #666); font-size: 0.92em; font-weight: 400; }
.wct-covlist__tools { padding: 14px 16px 4px; }
.wct-panel__existing .wct-panel__table { width: calc(100% - 32px); margin: 10px 16px 16px; }
.wct-panel__csv button,
.wct-panel__csv button:not(:hover):not(:active) { background: var(--wct-muted, #5a6675); }
.wct-panel__csv button:hover { background: #3f4956; }
.wct-panel__csv button.wct-danger,
.wct-panel__csv button.wct-danger:not(:hover):not(:active) { background: var(--wct-danger, #d23b3b); }
.wct-panel__csv button.wct-danger:hover { background: var(--wct-danger, #b32d2e); }

/* Sekcja importu z plików (v0.12.0): wyraźna karta z opisem — wcześniej goły
   <details> ginął na dole strony. Kreator nadal lazy-init po rozwinięciu. */
.wct-panel__fileimport {
	margin: 18px 0;
	padding: 14px 18px;
	background: #f6f9ff;
	border: 1px solid #c7d8f2;
	border-left: 4px solid #2271b1;
	border-radius: var(--wct-radius-card, 8px);
}
.wct-panel__fileimport > h4 { margin: 0 0 6px; }
.wct-fileimport__steps { margin: 8px 0 12px 20px; }
.wct-fileimport__steps li { margin: 4px 0; }
.wct-fileimport__open {
	display: inline-block;
	cursor: pointer;
	padding: 8px 16px;
	background: #2271b1;
	color: var(--wct-accent-ink, #fff);
	border-radius: var(--wct-radius, 6px);
	font-weight: 600;
	list-style: none;
}
.wct-fileimport__open::-webkit-details-marker { display: none; }
.wct-fileimport__open::before { content: '▸ '; }
details[open] > .wct-fileimport__open::before { content: '▾ '; }
/* #96 (v0.41.0): dwa przyciski OBOK siebie nad kartami (kreator / handover) —
   jako rodzenstwo <details> drugi laduje pod trescia pierwszego. Pasek to
   <a role=button> (skin demo maluje <button> amber !important), natywne
   summary ukryte, stan otwarcia = klasa .is-open. */
.wct-fileimport__bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 12px; }
/* Przyciski paska to <span role=button> (nie <a>: TT21 po kliknieciu maluje
   linki bialym tlem regula .site a:focus:not():not() = 0,4,1; nie <button>:
   skin klienta maluje buttony !important). Stany w :where() = specyficznosc
   (0,2,0), ponizej regul kreatora wygladu (:root:root .wct-fileimport__open = 0,3,0). */
.wct-fileimport__bar .wct-fileimport__open,
.wct-fileimport__bar .wct-fileimport__open:where(:hover, :focus, :active) {
	color: var(--wct-accent-ink, #fff);
	text-decoration: none;
	user-select: none;
}
.wct-fileimport__bar .wct-fileimport__open:where(:focus-visible) { outline: 2px solid var(--wct-accent, #1769ff); outline-offset: 2px; }
.wct-fileimport__open.is-open::before { content: '▾ '; }
.wct-fileimport__pane > summary { display: none; }

.wct-panel__table {
	width: 100%;
	/* Pancerz karty jak Specifications — bez niego tabele panelu ubieraly
	   pelne ramki motywu (TT21: currentColor na kazdej komorce). */
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	overflow: hidden;
	background: var(--wct-surface, #fff);
	margin-top: 10px;
}
.wct-panel__table thead th { background: var(--wct-surface-alt, #f6f8fa); }
.wct-panel__table tr:last-child th,
.wct-panel__table tr:last-child td { border-bottom: 0; }

.wct-panel__table th,
.wct-panel__table td {
	text-align: left;
	padding: 7px 10px;
	border: 0;
	border-bottom: 1px solid var(--wct-surface-alt, #eef1f5);
	font-size: var(--wct-font-size-sm, 13px);
}

.wct-panel__table th { font-size: 12px; color: var(--wct-muted, #5a6675); }

.wct-panel-guard {
	padding: 16px;
	background: #fff7e6;
	border: 1px solid #ffd591;
	border-radius: var(--wct-radius-card, 8px);
}

/* --- Panel v2 (Faza 7.2/7.3) --- */
.wct-panel__tplbar, .wct-panel__addfn { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }

/* Wiersz funkcji (v0.9.8): checkbox + nazwa, (i) i „$" dosunięte do prawej. */
.wct-fnrow {
	display: flex;
	flex-wrap: wrap; /* #98: wiersz notatki lamie sie pod funkcje */
	align-items: center;
	gap: 6px;
	padding: 3px 6px;
	border-radius: var(--wct-radius, 6px);
}
.wct-fnrow:hover { background: var(--wct-surface-alt, #f6f8fa); }
/* #98/#100 (Note 2.0): ✎ przy funkcji + pole notatki pod wierszem. Selektory
   zaczynaja sie od .wct-fnrow (pokretlo "Supported functions list" kreatora). */
.wct-panel .wct-fnrow .wct-fn-notebtn {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 7px;
	line-height: 20px;
	font-size: 13px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: 999px;
	background: var(--wct-surface, #fff);
	color: var(--wct-muted, #666);
	cursor: pointer;
}
.wct-panel .wct-fnrow .wct-fn-notebtn:hover,
.wct-panel .wct-fnrow .wct-fn-notebtn.is-on {
	color: var(--wct-accent-ink, #fff);
	background: var(--wct-accent, #1769ff);
	border-color: var(--wct-accent, #1769ff);
}
.wct-fnrow .wct-fn-noterow { flex: 1 0 100%; margin: 0 0 4px 26px; }
.wct-panel .wct-fnrow .wct-fn-note { width: 100%; max-width: 100%; font-size: var(--wct-font-size-sm, 13px); }
/* #97: Compatibility disclosure pod matryca (krok 3) — tylko uklad, wyglad pol z komponentow. */
.wct-panel__disclosure { margin: 14px 0 4px; }
.wct-panel__disclosure textarea { display: block; width: 100%; max-width: 100%; margin-top: 6px; }
.wct-panel__disclosure-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* Wiersz funkcji: checkbox + nazwa + ⓘ + $ + ✎ w JEDNEJ linii (label bazowo jest
   kolumna — regula .wct-panel__functions label). v0.45.4: te cztery reguly wypadly
   w v0.45.0 razem z usuwanym .wct-panel__savebar (wiersz rozjechal sie na 3 linie,
   a filtr funkcji przestal chowac wiersze) — przywrocone 1:1 z v0.43.1. */
.wct-fnrow.is-hidden { display: none; }
.wct-panel .wct-fnrow > label:first-child {
	flex: 1 1 140px; /* baza 140 px: przy dlugiej nazwie lamie sie NAZWA, a ⓘ/$/✎ zostaja w linii */
	flex-direction: row;
	align-items: center;
	gap: 7px;
	font-weight: 400;
	font-size: var(--wct-font-size-sm, 13px);
	min-width: 0;
	cursor: pointer;
}
.wct-fnrow .wct-fn { accent-color: var(--wct-accent, #1769ff); flex: 0 0 auto; }
.wct-fnrow__name { overflow-wrap: anywhere; }

/* Realna ikona informacji (v0.9.8): kółko z pochyloną szeryfową literą „i"
   (klasyczny znak ⓘ) zamiast tekstu "(i)". Tooltip = title, bez zmian. */
.wct-fnrow .wct-info, .wct-spec-field .wct-info {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1.5px solid #8a94a3;
	border-radius: 50%;
	color: var(--wct-muted, #5a6675);
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	position: relative;
	cursor: help;
}
/* #105: dymek z data-tip (zamiast `title`) — widoczny z kursorem, po tapnieciu
   (.is-open z JS) i dla klawiatury. Pod ikona (nad nia pierwszy wiersz karty
   wychodzilby poza ekran). Para tlo+tekst z JEDNEJ rodziny tokenow (ink/surface),
   wiec na ciemnej skorce odwraca sie razem. Font: staly stos sans — ::after
   dziedziczy Georgia z ikony, a --wct-font bywa `inherit`. */
.wct-fnrow .wct-info::after, .wct-spec-field .wct-info::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	top: calc(100% + 8px);
	transform: translateX(-50%);
	display: none;
	width: max-content;
	max-width: min(280px, 78vw);
	padding: 8px 10px;
	border-radius: var(--wct-radius, 6px);
	background: var(--wct-ink, #1c2530);
	color: var(--wct-surface, #fff);
	font: 400 12px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	text-align: left;
	white-space: normal;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	z-index: 30;
	pointer-events: none;
}
.wct-fnrow .wct-info:hover::after, .wct-spec-field .wct-info:hover::after,
.wct-fnrow .wct-info:focus-visible::after, .wct-spec-field .wct-info:focus-visible::after,
.wct-fnrow .wct-info.is-open::after, .wct-spec-field .wct-info.is-open::after { display: block; }
.wct-fnrow .wct-info.is-left::after, .wct-spec-field .wct-info.is-left::after { left: auto; right: 0; transform: none; }
.wct-fnrow .wct-info.is-right::after, .wct-spec-field .wct-info.is-right::after { left: 0; transform: none; }
.wct-fnrow .wct-info:hover, .wct-spec-field .wct-info:hover,
.wct-fnrow .wct-info:focus, .wct-spec-field .wct-info:focus { color: var(--wct-accent, #1769ff); border-color: var(--wct-accent, #1769ff); }
/* v0.45.8 (#110): ta sama ikona przy etykiecie pola karty produktu (klucz `tip`
   w definicji specs). W tekście etykiety: wyrównanie do linii pisma; dymek otwiera
   się W PRAWO od ikony (kolumna etykiet siedzi przy lewej krawędzi karty — dymek
   wyśrodkowany byłby przycinany, jak w tabeli specyfikacji na karcie urządzenia). */
/* v0.45.10 (zgloszenie usera „ikona nizej niz tekst"): -3px sadzalo ikone 5 px ponizej
   srodka tekstu etykiety, `middle` 2 px (pomiar CDP: srodek tekstu 554, ikony 559/556).
   Wartosc w px jest deterministyczna, bo baseline ikony wyznacza JEJ WLASNY font
   (Georgia 11px z arkusza), nie font motywu. */
.wct-spec-field .wct-info { vertical-align: 2px; }
.wct-spec-field .wct-info::after { left: 0; transform: none; }
.wct-spec-field .wct-nowrap { white-space: nowrap; }

.wct-panel label.wct-optlabel {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 600;
	color: #8a94a3;
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: 999px;
	padding: 0 6px;
	white-space: nowrap;
	cursor: pointer;
}
.wct-panel label.wct-optlabel:hover { color: #996800; border-color: #e6d9a8; }
.wct-pending { color: #996800; font-size: 0.85em; }
.wct-optional { color: #996800; }

/* Karta produktu (v0.12.3): karty sekcji w stylu matrycy — wcześniej gołe
   fieldsety z cienką ramką wyglądały jak inny produkt niż sekcja 2. */
.wct-specs-form .wct-spec-field { margin: 8px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
/* Autorskie display:flex wygrywa z [hidden] przeglądarki — pola warunkowe (show_if,
   np. „Mobile operating system") były widoczne ZAWSZE, mimo że JS je chował.
   Ta sama klasa błędu co toggle „Import CSV" (v0.11.2). */
.wct-specs-form .wct-spec-field[hidden] { display: none; }
.wct-specs-section[hidden] { display: none; }
/* v0.45.8 (#110, zrzut usera): STAŁA kolumna etykiet (flex-basis zamiast min-width).
   Etykieta z długą treścią (hint z #72, zdanie objaśniające OEM) rosła do szerokości
   tekstu i wypychała kontrolkę na prawą krawędź (select Yes/No miał 163 px przy
   1002 px selecta „Product type" wiersz wyżej). Teraz długa treść łamie się
   w kolumnie, a kontrolki wszystkich wierszy zaczynają się w jednej linii. */
.wct-specs-form .wct-spec-field > label:first-child { flex: 0 0 320px; min-width: 0; font-weight: 600; font-size: var(--wct-font-size-sm, 13px); }
/* v0.14.9 (zrzut mobile: Product type dalej wystawal): jawna baza flex dla pol
   formularza karty — szerokosc dyktuje KONTENER (flex-basis + grow), nie tresc
   najdluzszej opcji selecta; min-content przestaje miec cokolwiek do gadania. */
.wct-specs-form .wct-spec-field select,
.wct-specs-form .wct-spec-field input[type="text"],
.wct-specs-form .wct-spec-field input[type="number"],
.wct-specs-form .wct-spec-field input[type="url"],
.wct-specs-form .wct-spec-field textarea {
	flex: 1 1 160px;
	width: auto;
	min-width: 0;
}
/* v0.45.8 (feedback usera „dropdown krótki, nie na całą szerokość karty" — ta sama klasa
   błędu co przycisk pliku #103): selecty karty mają szerokość TREŚCI (najdłuższa opcja),
   nie kontenera; pola tekstowe zostają na całą szerokość (tam wpisuje się dłuższy tekst).
   Kolumna etykiet 320 px, żeby „OEM (Original Equipment Manufacturer) product? ⓘ"
   mieściło się w jednej linii. Reguła PO bloku wyżej (ta sama specyficzność — wygrywa kolejność).
   Na telefonie (≤860 px) układ blokowy, select 100%. */
.wct-specs-form .wct-spec-field select { flex: 0 1 auto; width: auto; min-width: 160px; max-width: 100%; }
.wct-specs-section {
	/* v0.14.7: przeglądarkowy default fieldsetu min-inline-size:min-content
	   blokował kurczenie na mobile — karta wyjeżdżała poza ramkę kroku i ekran. */
	min-inline-size: 0;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--wct-border, #e2e6eb);
	border-radius: var(--wct-radius-card, 8px);
	margin: 12px 0;
	padding: 12px 14px 14px;
	background: var(--wct-surface, #fff);
}
/* Legend jako nagłówek WEWNĄTRZ karty (float:left zdejmuje domyślne „siedzenie
   na ramce" fieldsetu — nachodziło na linię i wyglądało źle). */
.wct-specs-section > legend {
	float: left;
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	font-weight: 600;
	font-size: var(--wct-font-size-sm, 13px);
	color: var(--wct-ink, #1c2530);
}
.wct-specs-section > legend + * { clear: both; }
/* Multi-checkboxy (np. USB/Bluetooth/Wi-Fi): etykiety w skali panelu, nie motywu. */
.wct-spec-multi label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--wct-font-size-sm, 13px);
	font-weight: 400;
	cursor: pointer;
}
.wct-specs-section.is-private { background: rgba(219, 166, 23, 0.14); border-left: 3px solid #dba617; }
.wct-spec-multi { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 640px; }
/* #21: blok „Where to buy" — wybor sklepu z katalogu + link do produktu. */
.wct-shops-box.is-waiting { opacity: 0.65; }
.wct-shops-edit { margin: 6px 0 10px; }
.wct-shop-row .wct-shop-pick { flex: 1 1 220px; min-width: 0; max-width: 100%; height: 38px; }
.wct-shop-row .wct-shop-link { flex: 2 1 260px; }
/* Wynik rozpoznania sklepu z wklejonego linku — pelna szerokosc pod wierszem. */
.wct-shop-found { flex: 1 0 100%; font-size: var(--wct-font-size-sm, 13px); margin: 2px 0 0; }
.wct-shop-found.is-ok { color: #1d6f42; }
.wct-shop-found.is-error { color: var(--wct-danger, #b32d2e); }
.wct-shop-found .wct-shop-suggest { margin-left: 4px; }
.wct-shops-howto { margin-top: 8px; }

.wct-shop-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0; align-items: center; }
.wct-shop-row input { min-width: 0; flex: 0 1 auto; }
/* Identyczna wysokość pól i × w wierszu = środek gwarantowany geometrycznie. */
.wct-shop-row input { height: 38px; box-sizing: border-box; margin: 0; }
/* Usuwanie wiersza sklepu (v0.12.10) — płaska ikona zintegrowana z wierszem,
   czerwienieje na hover (obwódkowe kółko wyglądało jak obcy element). */
.wct-panel button.wct-shop-del,
.wct-panel button.wct-shop-del:not(:hover):not(:active) {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 38px;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #8a94a3;
	border: 0;
	border-radius: var(--wct-radius, 6px);
	font-size: 18px;
	line-height: 1;
}
.wct-panel button.wct-shop-del:hover { background: #fdeeee; color: var(--wct-danger, #d23b3b); }
.wct-gallery-edit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.wct-g-item { position: relative; }
.wct-g-item img { max-width: 110px; height: auto; border-radius: 4px; display: block; }
.wct-panel button.wct-g-del,
.wct-panel button.wct-g-del:not(:hover):not(:active) {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	padding: 0;
	background: var(--wct-surface, #fff);
	color: var(--wct-danger, #d23b3b);
	border: 1px solid #e8c4c4;
	border-radius: 50%;
	font-size: var(--wct-font-size-sm, 13px);
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}
.wct-panel button.wct-g-del:hover { background: var(--wct-danger, #d23b3b); color: var(--wct-accent-ink, #fff); border-color: var(--wct-danger, #d23b3b); }

/* --- Moderacja + T&C (Faza 8) --- */
.wct-panel__moderation {
	margin: 10px 0;
	padding: 10px 14px;
	background: #f8f9fb;
	border: 1px solid #dde3ea;
	border-radius: var(--wct-radius-card, 8px);
}
.wct-panel__moderation p { margin: 6px 0; }
.wct-mod-badge {
	display: inline-block;
	margin: 0 6px 4px 0;
	padding: 2px 10px;
	border-radius: var(--wct-radius-card, 12px);
	font-size: 12px;
	font-weight: 600;
	border: 1px solid transparent;
}
.wct-mod-badge.is-draft { background: var(--wct-surface-alt, #eef1f5); color: #50575e; border-color: #d5dbe1; }
.wct-mod-badge.is-pending { background: #fff7e6; color: #996800; border-color: #ffd591; }
.wct-mod-badge.is-publish { background: #edf9f0; color: #007a2f; border-color: #b8e6c4; }
.wct-mod-badge.is-rejected { background: #fdeeee; color: var(--wct-danger, #b32d2e); border-color: #f0b5b5; }
.wct-mod-note { background: #fdeeee; border-left: 3px solid var(--wct-danger, #b32d2e); padding: 6px 10px; border-radius: 4px; }
.wct-tc { display: block; margin: 8px 0; }

/* --- Subskrypcja producenta (Faza 4 UI) --- */
.wct-panel__billing { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--wct-border, #e2e6eb); }

/* Uwidocznienie perku SEO (dofollow) — ludzkie zdanie o stanie linku producenta. */
.wct-seo-note {
	margin: 10px 0 14px;
	padding: 10px 14px;
	border-radius: var(--wct-radius-card, 8px);
	border-left: 4px solid #c3c8d0;
	background: var(--wct-surface-alt, #f6f8fa);
	font-size: var(--wct-font-size-sm, 13px);
	line-height: 1.5;
	color: #46525f;
}
.wct-seo-note.is-on {
	border-left-color: #1a8245;
	background: #f0f9f2;
	color: #1c3b28;
}
.wct-seo-note em { font-style: normal; font-weight: 600; }
.wct-plans { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.wct-plan {
	flex: 1 1 180px;
	max-width: 260px;
	border: 1px solid #dde3ea;
	border-radius: var(--wct-radius-card, 8px);
	padding: 10px 14px;
	background: var(--wct-surface, #fff);
}
.wct-plan.is-current { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1 inset; }
.wct-plan h5 { margin: 0 0 6px; font-size: var(--wct-font-size, 14px); }
.wct-plan ul { margin: 0 0 8px 16px; padding: 0; font-size: 12.5px; color: #50575e; }
.wct-plan-badge {
	font-size: 11px; font-weight: 600; color: #2271b1;
	background: #eef4fa; border-radius: var(--wct-radius-card, 10px); padding: 1px 8px; margin-left: 4px;
}
.wct-plan-buy, .wct-plan-portal { cursor: pointer; }

/* Anty-spam CAPTCHA (v0.9.5): ramka „Security check" nad panelem */
.wct-panel__captcha {
	margin: 10px 0;
	padding: 10px 12px;
	border: 1px solid var(--wct-border, #dcdcde);
	border-radius: var(--wct-radius, 6px);
	background: #fbfbfc;
}
.wct-panel__captcha [data-p="captcha-widget"] { margin-top: 8px; min-height: 34px; }

/* PANCERZ [hidden] (v0.12.8): trzeci incydent „display:flex wygrywa z hidden"
   (Import CSV, pola show_if, wiersze kaskady zakresu) — twarda reguła kończy
   tę klasę błędów raz na zawsze. Jedyne uzasadnione !important obok galerii. */
.wct-panel [hidden] { display: none !important; }

/* ================================================================
   v0.14.0 — panel-profil (zgłoszenie #12 + decyzja klienta):
   strona główna z kafelkami, widoki, kreator „za rączkę".
   ================================================================ */

.wct-panel__crumb { margin: 0 0 10px; font-size: var(--wct-font-size-sm, 13px); }
.wct-panel__crumb a { text-decoration: none; font-weight: 600; }
.wct-panel__viewtitle { margin: 0 0 12px; font-size: 20px; }

/* Kafelki strony głównej. */
.wct-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
	margin-top: 12px;
}
.wct-tile,
.wct-tile:not(:hover):not(:active) {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 16px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius-card, 10px);
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	text-decoration: none;
}
.wct-tile:hover { border-color: var(--wct-accent, #1769ff); }
.wct-tile > strong { font-size: 16px; }
.wct-tile:hover > strong { color: var(--wct-accent, #1769ff); }
.wct-tile .wct-hint { margin: 0; }
.wct-tile__count { color: var(--wct-muted, #5a6675); font-weight: 400; font-size: var(--wct-font-size-sm, 13px); }

/* Kroki kreatora. UWAGA na nazwę: .wct-step jest ZAJĘTE przez pigułki paska
   postępu kreatora IMPORTU (wct-import.css, border-radius 999px) — kolizja
   robiła z kart kroków „pastylki" z napisami wychodzącymi poza łuk (feedback
   usera ze zrzutu demo). Stąd własna przestrzeń .wct-wstep + delikatny radius. */
.wct-wstep {
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 6px);
	background: var(--wct-surface, #fff);
	padding: 14px 16px;
	margin: 0 0 14px;
}
.wct-wstep__head {
	margin: 0;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.wct-wstep__done { color: #007a2f; font-weight: 600; font-size: var(--wct-font-size-sm, 13px); }
.wct-wstep__body { margin-top: 10px; min-width: 0; }
.wct-wstep__locknote { display: none; margin: 6px 0 0; }
.wct-wstep.is-locked { background: #f6f7f8; }
.wct-wstep.is-locked .wct-wstep__head { color: #8a93a0; }
.wct-wstep.is-locked .wct-wstep__body { display: none; }
.wct-wstep.is-locked .wct-wstep__locknote { display: block; }
.wct-wstep.is-collapsed .wct-wstep__body { display: none; }
.wct-wstep__skip { margin: 10px 0 0; }

/* Zwijanie/rozwijanie kroków (feedback usera): nagłówek odblokowanego kroku jest
   klikalny (chevron po prawej); krok zablokowany i krok 1 po utworzeniu szkicu
   (is-final — ponowny „Create draft" tworzyłby drugie urządzenie) bez przełącznika. */
.wct-wstep:not(.is-locked):not(.is-final) .wct-wstep__head { cursor: pointer; }
.wct-wstep .wct-wstep__head::after {
	content: '▾';
	margin-left: auto;
	color: #8a93a0;
	font-size: 12px;
}
.wct-wstep.is-collapsed .wct-wstep__head::after { content: '▸'; }
.wct-wstep.is-locked .wct-wstep__head::after,
.wct-wstep.is-final .wct-wstep__head::after { content: ''; }

/* Nazwa urządzenia w tytule kreatora — dopisek trybu mniejszym krojem. */
.wct-panel__viewtitle-dim { font-size: var(--wct-font-size, 14px); font-weight: 400; }

/* #33: wyróżniona ramka ostrzeżenia (krok 3 kreatora). */
.wct-callout {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid #e6b800;
	border-left: 5px solid #e6b800;
	border-radius: var(--wct-radius-card, 8px);
	background: #fff9e6;
	color: #4a3b00;
	font-size: 14.5px;
	line-height: 1.5;
}
/* Zoltego trojkata ostrzezenia nie widac na jasnozoltym tle ramki - stawiamy go
   na bialym krazku z amberowa obwodka (feedback usera do #33). */
.wct-callout__icon {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wct-surface, #fff);
	border: 1px solid #e6b800;
	box-shadow: 0 1px 2px rgba(90, 70, 0, 0.12);
	font-size: 15px;
	line-height: 1;
}
.wct-callout__text { display: block; }

/* Lista „My devices". */
.wct-mydev td { vertical-align: middle; }
/* #77: nazwa opublikowanego urządzenia = link na stronę publiczną (kolor tekstu,
   podkreślenie dopiero na hover — ma wyglądać jak nazwa, nie jak przycisk). */
.wct-mydev__name,
.wct-mydev__name:not(:hover):not(:active) { color: inherit; text-decoration: none; }
.wct-mydev__name:hover { color: var(--wct-accent, #1769ff); text-decoration: underline; }
.wct-mydev__view,
.wct-mydev__view:not(:hover):not(:active),
.wct-mydev__edit,
.wct-mydev__edit:not(:hover):not(:active) {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 7px);
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	font-size: var(--wct-font-size-sm, 13px);
	font-weight: 600;
	text-decoration: none;
}
.wct-mydev__view:hover,
.wct-mydev__edit:hover { border-color: var(--wct-accent, #1769ff); color: var(--wct-accent, #1769ff); }

/* Formularz „Contact details". */
.wct-contact-form { max-width: 520px; }
.wct-contact-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 12px;
}
.wct-contact-field input { height: 38px; box-sizing: border-box; }
.wct-required { color: var(--wct-danger, #b32d2e); font-style: normal; }

/* ----------------------------------------------------------------
   MOBILE (zgłoszenie #12): sztywna siatka scope+funkcje trzymała dwie
   kolumny także na telefonie — sekcja funkcji uciekała za prawą
   krawędź, a strona przewija się tylko w pionie. Poniżej 860px
   wszystko składa się do JEDNEJ kolumny; szeroka tabela pokryć
   scrolluje we własnym kontenerze zamiast rozpychać stronę.
   ---------------------------------------------------------------- */
@media (max-width: 860px) {
	.wct-panel__grid { grid-template-columns: minmax(0, 1fr); }
	.wct-shop-row input { flex: 1 1 140px; }
	/* v0.14.10 (zrzut z telefonu, incognito): Android nie kurczy selectow/inputow
	   we flexie mimo flex-basis+min-width:0 (textarea obok kurczyla sie OK).
	   Koniec walki z flexem — na mobile uklad BLOKOWY: etykieta nad polem,
	   pole width:100% kontenera. Geometria, ktorej zaden silnik nie obejdzie. */
	.wct-specs-form .wct-spec-field { display: block; }
	.wct-specs-form .wct-spec-field > label:first-child {
		display: block;
		min-width: 0;
		margin: 0 0 4px;
	}
	.wct-specs-form .wct-spec-field select,
	.wct-specs-form .wct-spec-field input[type="text"],
	.wct-specs-form .wct-spec-field input[type="number"],
	.wct-specs-form .wct-spec-field input[type="url"],
	.wct-specs-form .wct-spec-field textarea {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0 0 8px;
	}
	.wct-panel__existing .wct-panel__table {
		display: block;
		overflow-x: auto;
		width: calc(100% - 32px);
	}
	.wct-mydev { display: block; overflow-x: auto; }
}


/* ---- #23/#24: profil firmy w panelu producenta ---- */
.wct-panel__profile { max-width: 760px; }
.wct-profile__name { margin: 0 0 14px; font-size: 16px; }
.wct-profile__link { margin-left: 10px; font-size: var(--wct-font-size-sm, 13px); font-weight: 600; }
.wct-logo-edit { margin-bottom: 10px; }
.wct-logo-edit .wct-g-item img { max-width: 220px; max-height: 110px; width: auto; height: auto; border: 1px solid var(--wct-border, #d6dae0); border-radius: var(--wct-radius-card, 8px); padding: 6px; background: var(--wct-surface, #fff); }
.wct-panel__profile textarea { width: 100%; min-height: 140px; }

/* #53/#54: wyszukiwanie na liście „My devices". */
.wct-mydev__search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.wct-mydev__search label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--wct-font-size-sm, 13px); }
.wct-mydev__search input[type="search"] { min-width: 260px; max-width: 100%; }

/* #45: instrukcje obsługi (PDF) w karcie produktu. */
.wct-manuals-edit { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.wct-manual-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--wct-border, #d6dae0); border-radius: var(--wct-radius, 8px); background: var(--wct-surface, #fff); font-size: var(--wct-font-size-sm, 13px); }
.wct-panel button.wct-manual-del,
.wct-panel button.wct-manual-del:not(:hover):not(:active) { padding: 0 6px; border: 0; background: transparent; color: var(--wct-danger, #b32d2d); font-size: 16px; line-height: 1; cursor: pointer; }

/* #38: zgłoszenie brakującej funkcji (koniec kroku 3). */
.wct-missingfn textarea { width: 100%; }

/* DB v13: pochodzenie wpisu pokrycia (import) pod notatką producenta. */
.wct-cov-src { display: block; margin-top: 2px; font-size: 11.5px; }

/* #45: podtytuł i instrukcje PDF w kroku 1 kreatora. */
.wct-panel__new input.wct-panel__wide { flex: 1 1 100%; min-width: 0; }
.wct-manuals-box { margin-top: 12px; }

/* #45: sekcja instrukcji PDF przed utworzeniem szkicu — widoczna, ale nieaktywna. */
.wct-manuals-box.is-waiting { opacity: .7; }
.wct-manuals-box.is-waiting legend { color: var(--wct-muted, #5a6675); }

/* Powierzchnie paska/klockow panelu na tokenach (przejete ze skorki demo). */
.wct-panel__bar, .wct-panel__scope, .wct-panel__functions {
	background: var(--wct-surface, #fff);
}
.wct-panel a { color: var(--wct-accent, #1769ff); }
.wct-panel ::placeholder { color: var(--wct-muted, #5a6675); opacity: 1; }

/* #66 v2: sekcja "Vehicles on the list" — pionowe, klikalne wiersze. */
.wct-covload {
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius-card, 8px);
	background: var(--wct-surface, #fff);
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}
.wct-covload__title { font-size: var(--wct-font-size-sm, 13px); }
.wct-covload ul[data-p="cov-list"] {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 6px;
	width: 100%;
	max-width: 560px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wct-covload .wct-mk-item {
	display: flex;
	flex-wrap: wrap; /* v0.45.5: podglad notatki pojazdu w drugiej linii */
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 7px 12px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 8px);
	background: var(--wct-page-bg, #f7f8fa);
	cursor: pointer;
	user-select: none;
}
.wct-covload .wct-mk-item:hover { border-color: var(--wct-accent, #1769ff); }
.wct-covload .wct-mk-item.is-on {
	border-color: var(--wct-accent, #1769ff);
	background: var(--wct-surface, #fff);
	box-shadow: inset 3px 0 0 var(--wct-accent, #1769ff);
}
.wct-mk-tick {
	width: 16px;
	color: var(--wct-accent, #1769ff);
	font-weight: 700;
	flex: 0 0 auto;
}
.wct-mk-name { flex: 1 1 auto; }
.wct-covload .wct-mk-note { flex: 1 1 100%; margin: 0 0 0 24px; font-size: 12px; color: var(--wct-muted, #5a6675); }
.wct-covload .wct-mk-del { flex: 0 0 auto; }

/* Zmiana hasla konta w panelu (2026-08-26) — wspolny endpoint z [wct_account]. */
.wct-panel__accpw {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--wct-border, #e2e6eb);
	max-width: 560px;
}
.wct-panel__accpw-row {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.wct-panel__accpw label { display: grid; gap: 6px; font-weight: 600; font-size: var(--wct-font-size-sm, 13px); }

/* ---- #82/#83: ramka brakujacego kontaktu w kreatorze (nad krokiem 1) ---- */
.wct-wizcontact { margin: 14px 0; }
.wct-wizcontact__intro { display: block; margin-bottom: 4px; }
.wct-wizcontact__fields { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.wct-wizcontact__fields label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; min-inline-size: 0; }
.wct-wizcontact__fields input { height: 36px; width: 220px; max-width: 100%; box-sizing: border-box; min-inline-size: 0; }
.wct-wizcontact .wct-panel__msg { display: inline-block; margin: 6px 0 0; }

/* ---- #80/#81: komunikat uploadu przy polu pliku ---- */
.wct-upload-msg { display: inline-block; margin: 8px 0 0 10px; }

/* ---- #93: ramka profilu firmy w kreatorze (zalecana, nie ostrzegawcza) ---- */
.wct-callout--info {
	border-color: var(--wct-border, #d6dbe3);
	border-left-color: var(--wct-accent, #1769ff);
	background: var(--wct-surface-alt, #f4f7fb);
	color: var(--wct-ink, #1c2530);
}
.wct-callout--info .wct-callout__icon { border-color: var(--wct-accent, #1769ff); box-shadow: none; }
.wct-wizprofile__logorow { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; flex-wrap: wrap; }
.wct-wizprofile__logorow img { max-height: 40px; max-width: 140px; width: auto; height: auto; display: block; }
.wct-wizprofile textarea { display: block; width: 100%; box-sizing: border-box; min-inline-size: 0; margin: 0 0 10px; }
.wct-wizprofile__tc { display: block; margin: 0 0 10px; font-weight: 600; }


/* ============================================================================
   v0.45.0: KROK 3 W STYLU EBAY (decyzja klienta 2026-09-07) — zakladki w 3.1,
   trzy listy wielokrotnego wyboru (Make/Model/Generation: szukajka, A-Z,
   „All <rodzic>", Select all), lista wersji z rozwijanymi silnikami, koszyk
   „Vehicles to save" z rocznikami i NOTATKA per pojazd, przyklejony pasek
   zapisu. Kontrolki na tokenach; <span role=button> zamiast <button>/<a> tam,
   gdzie skin klienta/TT21 maluja wlasne stany (lekcja v0.41.x).
   ============================================================================ */
.wct-cov__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.wct-cov__eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wct-muted, #5a6675); font-weight: 700; }

/* Podpowiedzi NA ZADANIE („?" z WCT_Panel_Hints::render(..., true)). */
.wct-panel .wct-hint--q { display: inline; margin: 0; }
.wct-hint__q,
.wct-hint__q:where(:hover, :focus, :active) {
	display: inline-flex;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--wct-muted, #5a6675);
	color: var(--wct-muted, #5a6675);
	background: transparent;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	padding: 0;
	margin: 0 0 0 2px;
	vertical-align: middle;
	text-decoration: none;
}
.wct-hint__q:hover,
.wct-hint--q.is-open .wct-hint__q { color: var(--wct-accent, #1769ff); border-color: var(--wct-accent, #1769ff); }
.wct-hint__q:where(:focus-visible) { outline: 2px solid var(--wct-accent, #1769ff); outline-offset: 2px; }
.wct-hint__text {
	display: block;
	margin: 6px 0 8px;
	padding: 8px 10px;
	border-radius: var(--wct-radius, 8px);
	background: var(--wct-surface-alt, #f6f8fa);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wct-muted, #5a6675);
	max-width: 72ch;
	text-transform: none;
	letter-spacing: 0;
}
.wct-hint__text[hidden] { display: none; }

/* v0.45.1 (feedback usera): 3.2 zaczyna sie od WYBORU metody (recznie vs import
   z plikow) — dwa kafelki; po wyborze widac jedna metode + przycisk przelaczenia
   (#32). Kafelki i przycisk to <span role=button> (lekcja v0.41.x), stany w :where(). */
.wct-covchoice {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 12px;
	margin: 4px 0 12px;
}
.wct-covchoice .wct-tile,
.wct-covchoice .wct-tile:not(:hover):not(:active) { width: 100%; box-sizing: border-box; text-align: left; cursor: pointer; }
.wct-covswitch { margin: 0 0 14px; font-size: var(--wct-font-size-sm, 13px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wct-covswitch__btn,
.wct-covswitch__btn:where(:hover, :focus, :active) {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 8px);
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	font-weight: 600;
	font-size: var(--wct-font-size-sm, 13px);
	text-decoration: none;
	cursor: pointer;
}
.wct-covswitch__btn:where(:hover, :focus) { background: var(--wct-surface-alt, #f2f5f9); border-color: var(--wct-accent, #1769ff); }
.wct-covswitch__note { color: var(--wct-muted, #5a6675); font-size: 12px; max-width: 60ch; }

/* Zakladki sekcji 3.1. */
.wct-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--wct-border, #e2e6eb); overflow-x: auto; scrollbar-width: none; }
.wct-tabs::-webkit-scrollbar { display: none; }
.wct-tab,
.wct-tab:where(:hover, :focus, :active) {
	flex: 0 0 auto;
	padding: 8px 12px;
	margin: 0 0 -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--wct-muted, #5a6675);
	font-weight: 600;
	font-size: var(--wct-font-size-sm, 13px);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	user-select: none;
}
.wct-tab:hover { color: var(--wct-ink, #1c2530); }
.wct-tab.is-active,
.wct-tab.is-active:where(:hover, :focus, :active) { color: var(--wct-accent, #1769ff); border-bottom-color: var(--wct-accent, #1769ff); }
.wct-tab:where(:focus-visible) { outline: 2px solid var(--wct-accent, #1769ff); outline-offset: -2px; }
.wct-tab[hidden] { display: none; }
.wct-tab__n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--wct-surface-alt, #f6f8fa); color: var(--wct-muted, #5a6675); font-size: 11px; line-height: 18px; text-align: center; }
.wct-tab__n[hidden] { display: none; }
.wct-tab__pane[hidden] { display: none; }

/* Trzy listy wielokrotnego wyboru. */
.wct-pickbar { display: grid; grid-template-columns: minmax(140px, 200px) repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
.wct-pick__vtype { min-width: 0; }
.wct-msel { position: relative; min-width: 0; }
.wct-msel__lbl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.wct-msel__cnt { color: var(--wct-accent, #1769ff); font-weight: 600; }
.wct-msel__field,
.wct-msel__field:where(:hover, :focus, :active) {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 38px;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 8px);
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	font-weight: 400;
	font-size: var(--wct-font-size, 14px);
	cursor: pointer;
	text-decoration: none;
	user-select: none;
}
.wct-msel__field[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.wct-msel.is-open .wct-msel__field { border-color: var(--wct-accent, #1769ff); }
.wct-msel__field:where(:focus-visible) { outline: 2px solid var(--wct-accent, #1769ff); outline-offset: 1px; }
.wct-msel__val { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wct-msel__val.is-ph { color: var(--wct-muted, #5a6675); }
.wct-msel__car { flex: 0 0 auto; color: var(--wct-muted, #5a6675); font-size: 11px; }
.wct-msel__pop {
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	z-index: 40;
	width: max(100%, 340px);
	max-width: min(560px, 92vw);
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	background: var(--wct-surface, #fff);
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius, 8px);
	box-shadow: 0 8px 24px rgba(28, 37, 48, 0.14);
}
.wct-msel__pop[hidden] { display: none; }
.wct-msel__rail { display: flex; flex-direction: column; align-items: center; padding: 8px 0; border-right: 1px solid var(--wct-border, #e2e6eb); font-size: 11px; font-weight: 700; overflow: hidden; }
.wct-msel__let { display: block; width: 100%; text-align: center; line-height: 1.25; color: var(--wct-accent, #1769ff); cursor: pointer; }
.wct-msel__let.is-off { color: var(--wct-border, #d6dae0); cursor: default; }
.wct-msel__main { display: flex; flex-direction: column; min-width: 0; max-height: 420px; }
.wct-msel__search { padding: 10px 10px 6px; }
.wct-panel .wct-msel__search input { width: 100%; box-sizing: border-box; margin: 0; }
.wct-msel__all { padding: 2px 10px 6px; border-bottom: 1px solid var(--wct-border, #e2e6eb); }
.wct-msel__list { flex: 1 1 auto; overflow: auto; padding: 4px 0 6px; }
.wct-msel__grp { position: sticky; top: 0; z-index: 1; padding: 3px 12px; background: var(--wct-surface-alt, #f6f8fa); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--wct-muted, #5a6675); }
/* .wct-panel__scope label = flex-kolumna (0,1,1) — wiersz z checkboxem musi byc wierszem. */
.wct-panel__scope .wct-msel__opt { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; font-weight: 400; font-size: var(--wct-font-size, 14px); cursor: pointer; }
.wct-msel__opt:hover { background: var(--wct-surface-alt, #f6f8fa); }
.wct-panel__scope .wct-msel__opt--all { font-weight: 700; }
.wct-panel__scope .wct-msel__opt--sub { padding-left: 28px; }
.wct-msel__foot { display: flex; justify-content: center; padding: 8px; border-top: 1px solid var(--wct-border, #e2e6eb); }
.wct-msel__clear { color: var(--wct-accent, #1769ff); font-weight: 600; cursor: pointer; font-size: var(--wct-font-size-sm, 13px); }

/* Lista wersji: wiersz = seria w generacji, rozwijana do silnikow. */
.wct-versions { margin-top: 14px; border: 1px solid var(--wct-border, #d6dae0); border-radius: var(--wct-radius, 8px); overflow: hidden; }
.wct-versions__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: var(--wct-surface-alt, #f6f8fa); border-bottom: 1px solid var(--wct-border, #e2e6eb); font-size: var(--wct-font-size-sm, 13px); }
.wct-panel__scope .wct-versions__all { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0 0 0 auto; font-weight: 600; font-size: var(--wct-font-size-sm, 13px); cursor: pointer; }
.wct-versions__empty { padding: 16px 12px; color: var(--wct-muted, #5a6675); font-size: var(--wct-font-size-sm, 13px); }
[data-p="ver-list"] { max-height: 520px; overflow: auto; }
.wct-ver { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--wct-border, #e2e6eb); font-size: var(--wct-font-size-sm, 13px); }
.wct-ver:last-child { border-bottom: 0; }
.wct-ver__exp { flex: 0 0 auto; width: 18px; text-align: center; color: var(--wct-muted, #5a6675); cursor: pointer; transition: transform 0.15s; user-select: none; }
.wct-ver.is-open .wct-ver__exp { transform: rotate(90deg); }
.wct-ver__nm { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wct-ver__avail { color: var(--wct-muted, #5a6675); font-size: 12px; white-space: nowrap; }
.wct-ver__part { margin-left: auto; font-size: 11px; font-weight: 600; color: #996800; white-space: nowrap; }
.wct-ver__trims { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 2px 14px; padding: 4px 12px 8px 50px; background: var(--wct-surface-alt, #f6f8fa); border-bottom: 1px solid var(--wct-border, #e2e6eb); }
.wct-panel__scope .wct-ver__trim { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; margin: 0; padding: 3px 0; font-weight: 400; font-size: var(--wct-font-size-sm, 13px); cursor: pointer; }

/* Koszyk „Vehicles to save": chipy po marce, roczniki, notatka pojazdu. */
.wct-tray { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--wct-border, #d6dae0); border-radius: var(--wct-radius-card, 10px); background: var(--wct-surface-alt, #f6f8fa); }
.wct-tray__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wct-tray__head > strong { font-size: var(--wct-font-size-sm, 13px); text-transform: uppercase; letter-spacing: 0.06em; }
.wct-tray__count { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--wct-accent, #1769ff); color: var(--wct-accent-ink, #fff); font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; }
.wct-tray__acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wct-tray .wct-panel__vtplsave { display: inline-flex; align-items: center; gap: 6px; }
.wct-panel .wct-tray .wct-panel__vtplsave input { width: 180px; margin: 0; }
.wct-tray button { margin: 0; }
.wct-tray__empty { color: var(--wct-muted, #5a6675); font-size: var(--wct-font-size-sm, 13px); padding: 4px 0; }
/* v0.45.2 (feedback usera): koszyk jako LISTA PIONOWA — jeden pojazd = jeden wiersz
   (badge poziomu | nazwa + szara linia „co obejmuje" | roczniki, ✎, ×), marka jako
   naglowek grupy. Chipy w jednej linii byly nieczytelne przy kilku wpisach. */
.wct-tray__make { padding: 4px 0 2px; border-top: 1px solid var(--wct-border, #e2e6eb); }
.wct-tray__make:first-child { border-top: 0; padding-top: 0; }
.wct-tray__mk { font-weight: 700; padding: 6px 0 4px; overflow-wrap: anywhere; }
.wct-tray__rows { display: flex; flex-direction: column; gap: 4px; }
.wct-tray__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--wct-border, #e2e6eb); border-radius: var(--wct-radius, 6px); background: var(--wct-surface, #fff); font-size: var(--wct-font-size-sm, 13px); }
.wct-tray__row.is-edit { border-color: #d99a1e; box-shadow: inset 3px 0 0 #d99a1e; }
.wct-tray__name { min-width: 0; overflow-wrap: anywhere; }
.wct-tray__sub { display: block; color: var(--wct-muted, #5a6675); font-size: 12px; }
.wct-tray__ctl { display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.wct-chip__lv { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wct-muted, #5a6675); }
.wct-mk-years { display: inline-flex; align-items: center; gap: 3px; color: var(--wct-muted, #5a6675); font-size: 12px; }
.wct-panel .wct-mk-years input { width: 62px; padding: 1px 4px; font-size: 12px; margin: 0; border-radius: var(--wct-radius, 6px); }
.wct-tray .wct-chip__note,
.wct-tray .wct-chip__note:not(:hover):not(:active) { border: 1px solid transparent; background: transparent; color: var(--wct-muted, #5a6675); border-radius: var(--wct-radius, 6px); padding: 0 5px; margin: 0; font-size: 14px; line-height: 1.3; cursor: pointer; }
.wct-tray .wct-chip__note:hover,
.wct-tray .wct-chip.has-note .wct-chip__note { color: var(--wct-accent, #1769ff); border-color: var(--wct-border, #d6dae0); }
.wct-tray .wct-mk-del,
.wct-tray .wct-mk-del:not(:hover):not(:active) { border: 0; background: transparent; color: var(--wct-danger, #b32d2e); font-size: 15px; line-height: 1; padding: 0 2px; margin: 0; cursor: pointer; }
.wct-chip__noteinp { grid-column: 1 / -1; display: block; }
.wct-chip__noteinp[hidden] { display: none; }
.wct-panel .wct-chip__noteinp input { width: 100%; max-width: 560px; box-sizing: border-box; margin: 0; font-size: var(--wct-font-size-sm, 13px); }
.wct-tray__expl { margin: 8px 0 0; font-size: 12px; }

/* Zapisane listy pojazdow (zakladka). */
.wct-tpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 10px; }
.wct-tpl-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--wct-border, #d6dae0); border-radius: var(--wct-radius, 8px); background: var(--wct-surface, #fff); font-size: var(--wct-font-size-sm, 13px); }
/* v0.45.2: pojazdy listy jeden pod drugim (lancuch .wct-tpl-card bije reset list motywu). */
.wct-tpl-card__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wct-tpl-card .wct-tpl-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wct-tpl-card .wct-tpl-card__list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 8px; align-items: baseline; margin: 0; padding: 4px 0; border-top: 1px solid var(--wct-border, #e2e6eb); }
.wct-tpl-card .wct-tpl-card__list li:first-child { border-top: 0; }
.wct-tpl-card__name { min-width: 0; overflow-wrap: anywhere; }
.wct-tpl-card__note { display: block; color: var(--wct-muted, #5a6675); font-size: 12px; }
.wct-tpl-card__acts { display: flex; gap: 6px; margin-top: 4px; }
.wct-tpl-card__acts button { margin: 0; }

/* Pasek narzedzi funkcji (filtr, szablon, All/None, zapis szablonu) + „More". */
.wct-fntools { align-items: center; }
.wct-panel .wct-fntools .wct-panel__fnfilter { flex: 1 1 200px; max-width: 280px; margin: 0; }
.wct-fntools__grow { flex: 1 1 auto; }
.wct-fntools .wct-panel__tplsave { display: inline-flex; align-items: center; gap: 6px; }
.wct-panel .wct-fntools .wct-panel__tplsave input { width: 170px; margin: 0; }
.wct-fntools button,
.wct-fntools select { margin: 0; }
.wct-more { margin-top: 12px; border-top: 1px solid var(--wct-border, #e2e6eb); padding-top: 10px; }
.wct-more > summary { cursor: pointer; color: var(--wct-muted, #5a6675); font-weight: 600; font-size: var(--wct-font-size-sm, 13px); list-style: none; }
.wct-more > summary::-webkit-details-marker { display: none; }
.wct-more > summary::before { content: '▸ '; }
.wct-more[open] > summary::before { content: '▾ '; }
.wct-more__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 12px; }

/* Przyklejony pasek zapisu (sticky bottom w obrebie kroku 3). */
.wct-savebar {
	position: sticky;
	bottom: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 14px;
	border: 1px solid var(--wct-border, #d6dae0);
	border-radius: var(--wct-radius-card, 10px);
	background: var(--wct-surface, #fff);
	box-shadow: 0 -6px 18px rgba(28, 37, 48, 0.10);
}
.wct-savebar .wct-panel__save { margin: 0; }
.wct-savebar__sum { font-size: var(--wct-font-size-sm, 13px); font-variant-numeric: tabular-nums; }
.wct-savebar .wct-panel__msg { flex: 1 1 200px; }

@media (max-width: 860px) {
	.wct-pickbar { grid-template-columns: minmax(0, 1fr); }
	.wct-msel__pop { width: 100%; max-width: 100%; }
	/* telefon: badge NAD nazwa (kolumna badge'a zjadala polowe waskiego wiersza), kontrolki w osobnej linii */
	.wct-tray { padding: 8px; }
	.wct-tray__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px; }
	.wct-tray__ctl { justify-self: start; }
	.wct-tpl-card { padding: 10px; }
	.wct-tpl-card .wct-tpl-card__list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.wct-ver__trims { padding-left: 24px; }
	.wct-savebar { padding-right: 140px; } /* przyciski czatu i „powrot na gore" w prawym dolnym rogu */
}

/* v0.45.2 (pomiar CDP na 360 px): zagniezdzone ramki panel → krok → sekcja → koszyk
   zjadaly 160 px szerokosci (koszyk mial 200 px). Na telefonie mniejsze wciecia. */
@media (max-width: 600px) {
	.wct-panel { padding: 10px 10px 14px; }
	.wct-wstep { padding: 10px; }
	.wct-panel .wct-panel__scope, .wct-panel .wct-panel__functions { padding: 10px; }
	.wct-tray { padding: 8px 6px; }
}