/*
 * SB Builder – nowy wygląd edytora (styl landingu Sitedrop: Geist, zieleń #0f766e, limonka tylko przy AI).
 * Ładowany tylko przy Ustawienia → Wygląd edytora: Nowy. Nie zmienia plików Vvveb ani geometrii zaznaczania
 * (ramka strony dalej zaczyna się tam, gdzie warstwa zaznaczeń – patrz #iframe-wrapper).
 */
body[data-hb-skin] {
	--sd-bg: #ffffff;
	--sd-bg-2: #f6f7f5;
	--sd-canvas: #eef0ec;
	--sd-ink: #0b0f0e;
	--sd-ink-2: #4a5451;
	--sd-ink-3: #848d89;
	--sd-line: #e7e9e5;
	--sd-line-2: #dfe2dd;
	--sd-em: #0f766e;
	--sd-em-dark: #0d665f;
	--sd-em-soft: #e6f6ef;
	--sd-lime: #c6f36b;
	--sd-dark: #07110f;
	--sd-grad: linear-gradient(135deg, #12b886 0%, #0f766e 60%, #0d5c56 100%);
	--sd-sh-sm: 0 0 0 1px rgba(11, 15, 14, .06), 0 1px 2px rgba(11, 15, 14, .05);
	--sd-sh-md: 0 0 0 1px rgba(11, 15, 14, .06), 0 2px 4px rgba(11, 15, 14, .04), 0 12px 28px -12px rgba(11, 15, 14, .16);
	--sd-sh-lg: 0 0 0 1px rgba(11, 15, 14, .06), 0 2px 4px rgba(11, 15, 14, .04), 0 24px 48px -16px rgba(11, 15, 14, .18);
	--sd-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sd-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

	/* geometria Vvveb (zmienne z editor.css) */
	--builder-header-top-height: 56px;
	--builder-sidebar-width: 56px;
	--builder-bottom-panel-height: 34px;

	/* Bootstrap */
	--bs-body-font-family: var(--sd-sans);
	--bs-body-color: var(--sd-ink);
	--bs-body-bg: var(--sd-bg);
	--bs-secondary-color: var(--sd-ink-3);
	--bs-secondary-bg: var(--sd-canvas);
	--bs-tertiary-bg: var(--sd-bg-2);
	--bs-border-color: var(--sd-line);
	--bs-primary: var(--sd-em);
	--bs-primary-rgb: 15, 118, 110;
	--bs-link-color: var(--sd-em);
	--bs-link-color-rgb: 15, 118, 110;
	--bs-link-hover-color: var(--sd-em-dark);
	--bs-focus-ring-color: rgba(15, 118, 110, .2);
	--hb-accent: var(--sd-em);
	--hb-accent-dark: var(--sd-em-dark);
	--hb-accent-soft: var(--sd-em-soft);
	--hb-ink: var(--sd-ink);
	font-family: var(--sd-sans);
	-webkit-font-smoothing: antialiased;
	background: var(--sd-bg-2);
}
@media (min-width: 1200px) {
	body[data-hb-skin] { --builder-left-panel-width: 300px; }
}

/* ---------- górny pasek ---------- */
body[data-hb-skin] #top-panel {
	height: var(--builder-header-top-height);
	align-items: center;
	gap: 10px;
	padding: 0 14px 0 10px;
	background: var(--sd-bg);
	border-bottom: 1px solid var(--sd-line);
}
body[data-hb-skin] #top-panel .btn-light,
body[data-hb-skin] #top-panel .btn.menu-toggle {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-bg: var(--sd-bg-2);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-bg: var(--sd-em-soft);
	--bs-btn-active-border-color: transparent;
	--bs-btn-active-color: var(--sd-em);
	--bs-btn-color: var(--sd-ink-2);
	border-radius: 8px !important;
	min-width: 32px;
	height: 32px;
}
body[data-hb-skin] #top-panel .btn-group > .btn { margin: 0 1px; }
/* tylko jasny motyw i własny przełącznik urządzeń (hb-seg) zamiast listy rozwijanej */
body[data-hb-skin] #top-panel .btn-dark-mode,
body[data-hb-skin] #top-panel .responsive-btns > .btn,
body[data-hb-skin] #top-panel .responsive-btns > .dropdown-menu,
body[data-hb-skin] #toggle-file-manager-btn,
body[data-hb-skin] #toggle-right-column-btn { display: none !important; }
body[data-hb-skin] #top-panel .percent .form-control {
	height: 30px;
	width: 62px;
	border-radius: 8px;
	border-color: var(--sd-line);
	background: var(--sd-bg-2);
	font: 500 12px var(--sd-mono);
	color: var(--sd-ink-2);
}

/* nazwa strony i status zapisu (wstawiane skryptem) */
body[data-hb-skin] .hb-doc { display: flex; align-items: center; gap: 12px; min-width: 0; }
body[data-hb-skin] .hb-doc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-hb-skin] .hb-doc-t b { font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26vw; }
body[data-hb-skin] .hb-doc-t span { font-size: 11.5px; color: var(--sd-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26vw; }
body[data-hb-skin] .hb-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: var(--sd-bg-2); border: 1px solid var(--sd-line); font-size: 12px; color: var(--sd-ink-2); white-space: nowrap; }
body[data-hb-skin] .hb-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sd-em-2, #10b981); }
body[data-hb-skin] .hb-status.dirty i { background: #f59e0b; }

/* przełącznik Komputer / Tablet / Telefon */
body[data-hb-skin] .hb-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--sd-bg-2); border: 1px solid var(--sd-line); border-radius: 10px; margin-right: 8px; }
body[data-hb-skin] .hb-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 10px; border-radius: 7px; color: var(--sd-ink-2); font: 500 12.5px var(--sd-sans); }
body[data-hb-skin] .hb-seg button:hover { color: var(--sd-ink); }
body[data-hb-skin] .hb-seg button.on { background: var(--sd-bg); color: var(--sd-ink); box-shadow: var(--sd-sh-sm); }
body[data-hb-skin] .hb-seg i { font-size: 15px; }

/* przyciski akcji */
body[data-hb-skin] #top-panel .hb-versions-btn {
	--bs-btn-bg: var(--sd-bg);
	--bs-btn-color: var(--sd-ink);
	--bs-btn-border-color: var(--sd-line-2);
	--bs-btn-hover-bg: var(--sd-bg);
	--bs-btn-hover-color: var(--sd-ink);
	--bs-btn-hover-border-color: #c9cec8;
	--bs-btn-active-bg: var(--sd-bg-2);
	--bs-btn-active-color: var(--sd-ink);
	height: 34px;
	padding: 0 13px;
	border-radius: 9px !important;
	font-weight: 500;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
body[data-hb-skin] #top-panel .hb-ai-section-btn {
	--bs-btn-bg: var(--sd-dark);
	--bs-btn-color: #fff;
	--bs-btn-border-color: var(--sd-dark);
	--bs-btn-hover-bg: #0e1c19;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-border-color: #0e1c19;
}
body[data-hb-skin] #top-panel .hb-ai-section-btn i { color: var(--sd-lime); }
body[data-hb-skin] #top-panel .save-btn {
	--bs-btn-bg: var(--sd-em);
	--bs-btn-border-color: var(--sd-em);
	--bs-btn-hover-bg: var(--sd-em-dark);
	--bs-btn-hover-border-color: var(--sd-em-dark);
	--bs-btn-disabled-bg: var(--sd-em);
	--bs-btn-disabled-border-color: var(--sd-em);
	--bs-btn-disabled-opacity: .45;
	height: 34px;
	font-weight: 600;
	font-size: 13px;
}
body[data-hb-skin] #top-panel .save-btn:not(.dropdown-toggle) { border-radius: 9px 0 0 9px; padding: 0 16px; }
body[data-hb-skin] #top-panel .save-btn.dropdown-toggle { border-radius: 0 9px 9px 0; border-left: 1px solid rgba(255, 255, 255, .25); }
body[data-hb-skin] #top-panel .save-btn:not(:disabled) { box-shadow: 0 6px 14px -8px rgba(15, 118, 110, .9); }

/* ---------- pasek ikon po lewej ---------- */
body[data-hb-skin] .sidebar .navbar {
	width: var(--builder-sidebar-width) !important;
	background: var(--sd-bg);
	border-right: 1px solid var(--sd-line);
	padding-top: 0;
}
body[data-hb-skin] .navbar .logo { width: 100%; height: var(--builder-header-top-height); justify-content: center; align-items: center; border-bottom: 1px solid var(--sd-line); top: 0; }
body[data-hb-skin] .logo a.hb-logo {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--sd-grad);
	box-shadow: 0 4px 10px -4px rgba(15, 118, 110, .8);
	font-size: 0;
}
body[data-hb-skin] .logo a.hb-logo span { display: none; }
body[data-hb-skin] .logo a.hb-logo::after { content: ""; position: absolute; left: 50%; top: 6px; width: 9px; height: 9px; border: solid #fff; border-width: 0 2.6px 2.6px 0; transform: translateX(-50%) rotate(45deg); }
body[data-hb-skin] .logo a.hb-logo::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 2.6px; border-radius: 2px; background: var(--sd-lime); }
body[data-hb-skin] #elements-tabs { gap: 4px; padding-top: 10px; align-items: center; width: 100%; }
body[data-hb-skin] #elements-tabs .nav-link {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 10px;
	color: var(--sd-ink-3) !important;
}
body[data-hb-skin] #elements-tabs .nav-link i { font-size: 19px; }
body[data-hb-skin] #elements-tabs .nav-link:hover { background: var(--sd-bg-2) !important; color: var(--sd-ink) !important; }
body[data-hb-skin] #elements-tabs .nav-link.active { background: var(--sd-em-soft) !important; color: var(--sd-em) !important; }

/* ---------- lewy panel ---------- */
body[data-hb-skin] #left-panel { background: var(--sd-bg); border-right: 1px solid var(--sd-line); }
body[data-hb-skin] #left-panel .header,
body[data-hb-skin] #filemanager .header { background: var(--sd-bg); }
body[data-hb-skin] #left-panel .search .form-control,
body[data-hb-skin] .drag-elements-sidepane .search .form-control {
	height: 34px !important;
	border-radius: 9px;
	border-color: var(--sd-line);
	background: var(--sd-bg-2);
	font-size: 13px;
}
body[data-hb-skin] .drag-elements-sidepane .header label,
body[data-hb-skin] .drag-elements-sidepane ul > li > label.header {
	display: inline-flex;
	align-items: center;
	margin: 12px 12px 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--sd-em-soft);
	color: var(--sd-em);
	font: 500 10.5px/1 var(--sd-mono);
	letter-spacing: .07em;
	text-transform: uppercase;
}
/* elementy i sekcje jako kafelki */
body[data-hb-skin] .drag-elements-sidepane ul > li > ol > li {
	border: 1px solid var(--sd-line) !important;
	border-radius: 12px !important;
	background-color: var(--sd-bg) !important;
	box-shadow: none;
	transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, border-color .2s;
}
body[data-hb-skin] .drag-elements-sidepane ul > li > ol > li:hover {
	border-color: var(--sd-line-2) !important;
	box-shadow: var(--sd-sh-md);
	transform: translateY(-1px);
}
body[data-hb-skin] .drag-elements-sidepane ul > li > ol > li a,
body[data-hb-skin] .drag-elements-sidepane ul > li > ol > li span { color: var(--sd-ink-2); font-size: 12px; font-weight: 500; }

/* drzewo strony i lista stron */
body[data-hb-skin] #tree-list { border-top: 1px solid var(--sd-line); }
body[data-hb-skin] #tree-list .header { font-weight: 600; font-size: 13px; color: var(--sd-ink); }
body[data-hb-skin] .tree li label,
body[data-hb-skin] .tree li a { border-radius: 8px; }
body[data-hb-skin] .tree li label:hover,
body[data-hb-skin] .tree li a:hover { background-color: var(--sd-hover-bg, var(--sd-bg-2)); }
body[data-hb-skin] .tree li.active > label,
body[data-hb-skin] .tree li.active > a { background-color: var(--sd-em-soft); color: var(--sd-em); }

/* ---------- właściwości (zakładki Treść / Wygląd / Zaawansowane) ---------- */
body[data-hb-skin] .component-properties .nav-tabs {
	margin: 12px;
	padding: 3px;
	gap: 2px;
	border: 1px solid var(--sd-line);
	border-radius: 10px;
	background: var(--sd-bg-2);
}
body[data-hb-skin] .component-properties .nav-tabs .nav-link {
	border: 0 !important;
	border-radius: 7px;
	padding: 6px 4px;
	font-size: 12.5px;
	color: var(--sd-ink-2) !important;
	background: none;
}
body[data-hb-skin] .component-properties .nav-tabs .nav-link.active {
	background-color: var(--sd-bg) !important;
	color: var(--sd-ink) !important;
	font-weight: 500;
	box-shadow: var(--sd-sh-sm);
}
body[data-hb-skin] .component-properties .nav-tabs .nav-link i { display: none; }
body[data-hb-skin] .component-properties label.header {
	margin: 0 12px;
	padding: 11px 12px;
	border: 1px solid var(--sd-line);
	border-radius: 12px 12px 0 0;
	border-bottom: 0;
	background: var(--sd-bg);
	font-weight: 600 !important;
	font-size: 13px;
	color: var(--sd-ink) !important;
	text-transform: none;
	letter-spacing: 0;
}
body[data-hb-skin] .component-properties label.header + input + .section {
	margin: 0 12px 10px;
	padding: 4px 12px 12px;
	border: 1px solid var(--sd-line);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: var(--sd-bg);
}
body[data-hb-skin] .component-properties label.header:has(+ input:not(:checked)) {
	border-radius: 12px;
	border-bottom: 1px solid var(--sd-line);
	margin-bottom: 10px;
}
body[data-hb-skin] .component-properties .mb-2 label { font-size: 12px; font-weight: 500; color: var(--sd-ink-2); }
body[data-hb-skin] .component-properties .form-control,
body[data-hb-skin] .component-properties .form-select {
	min-height: 34px;
	border-radius: 8px;
	border-color: var(--sd-line-2);
	font-size: 13px;
	color: var(--sd-ink);
}
body[data-hb-skin] .component-properties .form-control:focus,
body[data-hb-skin] .component-properties .form-select:focus {
	border-color: var(--sd-em);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}
body[data-hb-skin] .component-properties textarea.form-control { line-height: 1.45; }
body[data-hb-skin] .form-check-input:checked { background-color: var(--sd-em); border-color: var(--sd-em); }
body[data-hb-skin] .btn-group .btn-check:checked + .btn,
body[data-hb-skin] .btn-group .btn.active { background: var(--sd-bg); color: var(--sd-ink); box-shadow: var(--sd-sh-sm); }

/* ---------- płótno: strona w karcie na kropkowanym tle ---------- */
body[data-hb-skin] #vvveb-builder #canvas {
	box-sizing: border-box;
	padding: 16px 20px 0;
	background-color: var(--sd-canvas);
	background-image: radial-gradient(rgba(11, 15, 14, .07) 1px, transparent 1px);
	background-size: 18px 18px;
}
body[data-hb-skin] #vvveb-builder #canvas.responsive { background-color: var(--sd-canvas); }
/* warstwa zaznaczeń liczy pozycje od ramki – wrapper musi być jej punktem odniesienia */
body[data-hb-skin] #vvveb-builder #canvas #iframe-wrapper { position: relative; }
body[data-hb-skin] #vvveb-builder #canvas iframe {
	border-radius: 14px 14px 0 0;
	box-shadow: var(--sd-sh-lg);
	background: #fff;
}

/* zaznaczenie i podświetlenie */
body[data-hb-skin] #vvveb-builder #highlight-box { border: 1px dashed rgba(15, 118, 110, .6); }
body[data-hb-skin] #vvveb-builder #select-box { border: 2px solid var(--sd-em) !important; border-radius: 4px; }
body[data-hb-skin] #vvveb-builder #highlight-name {
	background: var(--sd-em);
	border-radius: 6px;
	font: 500 11.5px/1 var(--sd-sans);
	padding: 4px 8px;
}
body[data-hb-skin] #vvveb-builder #select-actions {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 9px;
	background: var(--sd-bg);
	box-shadow: var(--sd-sh-md);
}
body[data-hb-skin] #vvveb-builder #select-actions a {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	color: var(--sd-ink-2);
	background: none;
}
body[data-hb-skin] #vvveb-builder #select-actions a:hover { background: var(--sd-bg-2); color: var(--sd-ink); }
body[data-hb-skin] #vvveb-builder #select-actions #hb-ai-btn { background: var(--sd-dark); color: var(--sd-lime); }

/* ---------- dolny pasek (ścieżka elementu) ---------- */
body[data-hb-skin] #bottom-panel { background: var(--sd-bg); border-top: 1px solid var(--sd-line); font-size: 12px; }
body[data-hb-skin] #bottom-panel .breadcrumb-item a {
	display: inline-block;
	padding: 3px 7px;
	border-radius: 6px;
	border: 1px solid var(--sd-line);
	color: var(--sd-ink-2);
	font: 500 11px var(--sd-mono);
	text-decoration: none;
}
body[data-hb-skin] #bottom-panel .breadcrumb-item:last-child a { border-color: var(--sd-em); color: var(--sd-em); background: var(--sd-em-soft); }

/* ---------- komunikaty (toast Vvveb) ---------- */
body[data-hb-skin] .toast {
	border: 0;
	border-radius: 11px;
	background: var(--sd-ink);
	color: #fff;
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}
body[data-hb-skin] .toast .toast-header { background: transparent; color: #fff; border-bottom-color: rgba(255, 255, 255, .12); }
body[data-hb-skin] .toast .btn-close { filter: invert(1); }

/* ---------- geometria: reguły Vvveb mają po dwa id (#vvveb-builder #…), więc tu ten sam poziom + atrybut ---------- */
body[data-hb-skin] .sidebar,
body[data-hb-skin] .small-nav .sidebar { width: var(--builder-sidebar-width); min-width: var(--builder-sidebar-width); flex-shrink: 0; background: var(--sd-bg); border-right: 1px solid var(--sd-line); }
body[data-hb-skin] #vvveb-builder #top-panel { height: var(--builder-header-top-height); padding-left: 10px; }
body[data-hb-skin] #vvveb-builder #left-panel,
body[data-hb-skin] #vvveb-builder #right-panel { top: var(--builder-header-top-height); height: calc(100% - var(--builder-header-top-height)); }
body[data-hb-skin] #vvveb-builder #bottom-panel {
	height: var(--builder-bottom-panel-height);
	left: calc(var(--builder-sidebar-width) + var(--builder-left-panel-width));
	right: 0;
}
body[data-hb-skin] #vvveb-builder #top-panel > div,
body[data-hb-skin] #vvveb-builder #top-panel > div > div,
body[data-hb-skin] #vvveb-builder #top-panel .btn-group { display: flex; align-items: center; flex-wrap: nowrap; float: none !important; }
body[data-hb-skin] #vvveb-builder #top-panel .hb-doc { flex: 0 1 auto; margin-right: 6px; }
body[data-hb-skin] #vvveb-builder #top-panel .me-3 { margin-right: 6px !important; }
body[data-hb-skin] .small-nav .main { min-width: 0; }
body[data-hb-skin] #vvveb-builder #left-panel { left: var(--builder-sidebar-width); }
body[data-hb-skin] #vvveb-builder #canvas { left: var(--builder-sidebar-width); }

/* sekcje: zwarte karty (miniatura + nazwa) zamiast wielkich obrazków */
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: calc(100% - 24px) !important;
	box-sizing: border-box;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 12px 8px !important;
	padding: 8px 10px !important;
	cursor: pointer;
}
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li .preview {
	order: -1;
	position: static !important;
	width: 46px !important;
	height: 34px !important;
	padding: 6px;
	object-fit: contain;
	border-radius: 7px;
	background: var(--sd-bg-2);
	opacity: .55;
}
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li .name {
	text-align: left !important;
	visibility: visible !important;
	position: static !important;
	display: block !important;
	flex: 1;
	opacity: 1 !important;
	background: none !important;
	color: var(--sd-ink) !important;
	font-size: 12.5px;
	font-weight: 500;
	white-space: normal;
}
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li .add-section-btn {
	margin-left: auto;
	transform: none !important;
	inset: auto !important;
	visibility: visible !important;
	position: static !important;
	display: grid !important;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var(--sd-em-soft) !important;
	color: var(--sd-em) !important;
	opacity: 1 !important;
}

/* ---------- 0.16: pasek ikon z podpisami, szerszy panel, czytelniejsze pola ---------- */
body[data-hb-skin] { --builder-sidebar-width: 72px; }
@media (min-width: 1280px) {
	body[data-hb-skin] { --builder-left-panel-width: 340px; }
}
body[data-hb-skin] #elements-tabs { gap: 2px; padding-top: 8px; }
body[data-hb-skin] #elements-tabs .nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 62px;
	height: auto;
	padding: 8px 2px 7px;
}
body[data-hb-skin] #elements-tabs .nav-link .title {
	display: block !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	font: 500 10.5px/1.15 var(--sd-sans);
	letter-spacing: 0;
	text-align: center;
	white-space: normal;
	color: inherit;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	transform: none !important;
}
body[data-hb-skin] #elements-tabs .nav-item.heading { display: none !important; }

/* pola właściwości: etykieta nad polem, pole na całą szerokość */
body[data-hb-skin] .component-properties .mb-2.row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}
body[data-hb-skin] .component-properties .mb-2.row > label,
body[data-hb-skin] .component-properties .mb-2.row > .input {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	margin: 0 !important;
}
body[data-hb-skin] .component-properties .mb-2 label,
body[data-hb-skin] #vvveb-builder .component-properties .mb-2 label { font-size: 12.5px; }
body[data-hb-skin] .component-properties .form-control,
body[data-hb-skin] .component-properties .form-select { font-size: 13.5px; }
body[data-hb-skin] .component-properties textarea.form-control {
	min-height: 150px;
	padding: 10px 12px;
	font: 400 14px/1.55 var(--sd-sans);
	resize: vertical;
}
/* link „WordPress” ma w Vvveb klasę d-md-block (display:block!important) – wyrównanie jak pozostałe ikony */
body[data-hb-skin] #elements-tabs .nav-link.d-md-block { display: flex !important; margin: 0 auto; }
body[data-hb-skin] #elements-tabs > .nav-item { display: flex; justify-content: center; width: 100%; }


/* 0.16.3: karty sekcji – „+” w środku karty po prawej (Vvveb dawał mu margin -18px), bez powtarzanej ikony obrazka */
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li .add-section-btn { margin: 0 0 0 auto !important; flex: none; }
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li .preview { display: none !important; }
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li { padding: 10px 10px 10px 14px !important; min-height: 46px !important; }
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li:hover .add-section-btn { background: var(--sd-em) !important; color: #fff !important; }
body[data-hb-skin] #vvveb-builder .sections-list > li > ol > li .add-section-btn i { color: inherit !important; font-size: 15px !important; line-height: 1; }
/* układ paska: [nazwa strony + cofnij/podgląd] … [Prosty | Ekspert na środku] … [urządzenia, wersje, zapis] */
body[data-hb-skin] #vvveb-builder #top-panel .hb-mid { flex: none; }
body[data-hb-skin] .hb-doc-t b,
body[data-hb-skin] .hb-doc-t span { max-width: 17vw; }
@media (max-width: 1279px) {
	body[data-hb-skin] .hb-doc .hb-status { display: none; }
}
/* mniej miejsca: urządzenia same ikonki, żeby środek paska (Prosty | Ekspert) zawsze był wolny */
@media (max-width: 1679px) {
	body[data-hb-skin] .hb-seg .hb-seg-l { display: none; }
	body[data-hb-skin] .hb-seg button { padding: 4px 8px; }
}

/* ---------- 0.17: jedna reguła zaznaczenia w całym edytorze ----------
 * wybrane = jasnozielone tło + zielony tekst/ikona, niewybrane = ciemny tekst bez tła,
 * najechanie = lekko szare tło, wyłączone = szare (tylko to). „Zapisz” zostaje pełnym zielonym przyciskiem. */
body[data-hb-skin] {
	--sd-sel-bg: var(--sd-em-soft);
	--sd-sel-fg: var(--sd-em);
	--sd-idle-fg: var(--sd-ink-2); /* ciemnoszary – niewybrane i ikony u góry */
	--sd-hover-bg: #eef0ec;
}
/* pasek ikon po lewej */
body[data-hb-skin] #elements-tabs .nav-link { color: var(--sd-idle-fg) !important; }
body[data-hb-skin] #elements-tabs .nav-link:hover { background: var(--sd-hover-bg) !important; color: var(--sd-idle-fg) !important; }
body[data-hb-skin] #elements-tabs .nav-link.active,
body[data-hb-skin] #elements-tabs .nav-link.active:hover { background: var(--sd-sel-bg) !important; color: var(--sd-sel-fg) !important; }
/* przełączniki u góry: Prosty/Ekspert i urządzenia */
body[data-hb-skin] .hb-mode,
body[data-hb-skin] .hb-seg { background: var(--sd-bg); border-color: var(--sd-line); }
body[data-hb-skin] .hb-mode button,
body[data-hb-skin] .hb-seg button { color: var(--sd-idle-fg); box-shadow: none; }
body[data-hb-skin] .hb-mode button:hover,
body[data-hb-skin] .hb-seg button:hover { background: var(--sd-hover-bg); color: var(--sd-idle-fg); }
body[data-hb-skin] .hb-mode button.on,
body[data-hb-skin] .hb-seg button.on { background: var(--sd-sel-bg); color: var(--sd-sel-fg); box-shadow: none; font-weight: 600; }
/* zakładki Treść / Styl */
body[data-hb-skin] .component-properties .nav-tabs { background: var(--sd-bg); }
body[data-hb-skin] .component-properties .nav-tabs .nav-link { color: var(--sd-idle-fg) !important; }
body[data-hb-skin] .component-properties .nav-tabs .nav-link:hover { background: var(--sd-hover-bg) !important; }
body[data-hb-skin] .component-properties .nav-tabs .nav-link.active { background: var(--sd-sel-bg) !important; color: var(--sd-sel-fg) !important; box-shadow: none; font-weight: 600; }
/* grupy przycisków w polach (wyrównanie tekstu itp.) */
body[data-hb-skin] .component-properties .btn-group .btn { color: var(--sd-idle-fg); }
body[data-hb-skin] .component-properties .btn-group .btn:hover { background: var(--sd-hover-bg); }
body[data-hb-skin] .btn-group .btn-check:checked + .btn,
body[data-hb-skin] .btn-group .btn.active { background: var(--sd-sel-bg) !important; color: var(--sd-sel-fg) !important; box-shadow: none; border-color: var(--sd-line-2); }
/* ikony na górnym pasku (cofnij, ponów, podgląd…) */
body[data-hb-skin] #top-panel .btn-light,
body[data-hb-skin] #top-panel .btn.menu-toggle { --bs-btn-color: var(--sd-idle-fg); --bs-btn-hover-bg: var(--sd-hover-bg); --bs-btn-hover-color: var(--sd-idle-fg); --bs-btn-active-bg: var(--sd-sel-bg); --bs-btn-active-color: var(--sd-sel-fg); }
body[data-hb-skin] #top-panel .btn-light:disabled,
body[data-hb-skin] #top-panel .btn-light.disabled { color: var(--sd-idle-fg); --bs-btn-disabled-color: var(--sd-idle-fg); --bs-btn-disabled-opacity: .4; opacity: .4; }

/* hamburger z Vvveb (szeroki/wąski pasek ikon) – zbędny, podpisy są zawsze pod ikonami */
body[data-hb-skin] #top-panel .menu-toggle { display: none !important; }

/* nawigator (drzewo strony): bez niebieskiego z Vvveb, mniejsze wcięcia (głębokie poziomy się nie ściskają) */
body[data-hb-skin] #tree-list .header { padding: 10px 12px 6px; font-weight: 600; font-size: 13px; }
body[data-hb-skin] #tree-list .tree > ol { font-size: 12.5px; }
body[data-hb-skin] #tree-list .tree > ol li,
body[data-hb-skin] #tree-list .tree > ol li:hover { color: var(--sd-idle-fg); }
body[data-hb-skin] #tree-list .tree label { border: 1px solid transparent; border-radius: 7px; white-space: nowrap; }
body[data-hb-skin] #tree-list .tree label:hover { background-color: var(--sd-hover-bg); }
body[data-hb-skin] #tree-list .tree label.active { background-color: var(--sd-sel-bg); color: var(--sd-sel-fg); border-color: transparent; font-weight: 600; }
body[data-hb-skin] #tree-list .tree label .text-secondary { color: var(--sd-ink-3) !important; }
body[data-hb-skin] #tree-list .tree > ol li input:checked + ol { padding-left: 14px !important; }

/* 0.20.1: „Wersje” w pasku po lewej (przycisk na górze schowany), zielone przyciski główne wszędzie,
   bez rozwijanego menu przy „Zapisz” (szablony i „Product lorem ipsum” z Vvveb CMS – w WP bez sensu) */
body[data-hb-skin].hb-versions-in-rail #top-panel #hb-versions-btn { display: none !important; }
body[data-hb-skin] #top-panel #showChangesBtn { display: none !important; }
body[data-hb-skin] #top-panel .save-btn:not(.dropdown-toggle) { border-radius: 9px; }
body[data-hb-skin] .btn-primary {
	--bs-btn-bg: var(--sd-em);
	--bs-btn-border-color: var(--sd-em);
	--bs-btn-hover-bg: var(--sd-em-dark);
	--bs-btn-hover-border-color: var(--sd-em-dark);
	--bs-btn-active-bg: var(--sd-em-dark);
	--bs-btn-active-border-color: var(--sd-em-dark);
	--bs-btn-disabled-bg: var(--sd-em);
	--bs-btn-disabled-border-color: var(--sd-em);
}
body[data-hb-skin] #elements-tabs .hb-rail-versions .nav-link i { font-size: 19px; }