/* KM Scroll Timeline — frontend v1.0.0 */

.km-stl-wrap {
	position: relative;
	color: var(--km-stl-text, #fff);
	font-family: inherit;
	overflow: clip;
}

/* --- Tło: dwie warstwy, crossfade przez opacity (gradienty nie animują się przez transition: background) --- */
.km-stl-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	transition: opacity 1.2s ease-in-out;
	pointer-events: none;
}
.km-stl-bg-b { opacity: 0; }

/* --- Pionowa linia czasu --- */
.km-stl-line,
.km-stl-line-progress {
	position: fixed;
	left: 50%;
	top: 0;
	width: 4px;
	transform: translateX(-50%);
	pointer-events: none;
}
.km-stl-line {
	height: 100vh;
	background: rgba(255, 255, 255, 0.1);
	z-index: 1;
}
.km-stl-line-progress {
	height: 0%;
	background: var(--km-stl-accent, #00f260);
	box-shadow: 0 0 15px var(--km-stl-accent, #00f260);
	z-index: 2;
	transition: height 0.3s ease-out;
}

/* --- Sekcje --- */
.km-stl-section {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.km-stl-snap { scroll-snap-type: y proximity; }
.km-stl-snap .km-stl-section { scroll-snap-align: start; }

.km-stl-content {
	display: flex;
	align-items: center;
	width: 80vw;
	max-width: 1200px;
	opacity: 0;
	transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* warianty animacji wejścia */
.km-stl-anim-fade-up   .km-stl-content { transform: translateY(80px); }
.km-stl-anim-fade-side .km-stl-layout-left  .km-stl-content,
.km-stl-anim-fade-side .km-stl-content.km-stl-layout-left  { transform: translateX(-80px); }
.km-stl-anim-fade-side .km-stl-content.km-stl-layout-right { transform: translateX(80px); }
.km-stl-anim-zoom      .km-stl-content { transform: scale(0.85); }
.km-stl-anim-none      .km-stl-content { opacity: 1; transform: none; }

.km-stl-content.km-stl-active {
	opacity: 1;
	transform: none;
}

/* układ lewo/prawo */
.km-stl-layout-left  .km-stl-circle    { order: 1; }
.km-stl-layout-left  .km-stl-connector { order: 2; }
.km-stl-layout-left  .km-stl-text      { order: 3; text-align: left; }

.km-stl-layout-right .km-stl-circle    { order: 3; }
.km-stl-layout-right .km-stl-connector { order: 2; }
.km-stl-layout-right .km-stl-text      { order: 1; text-align: right; }

/* --- Okrąg z grafiką --- */
.km-stl-circle {
	width: var(--km-stl-circle, 300px);
	height: var(--km-stl-circle, 300px);
	border-radius: 50%;
	overflow: hidden;
	border: var(--km-stl-border-w, 4px) solid var(--km-stl-border-c, #fff);
	box-shadow: 0 0 30px color-mix(in srgb, var(--km-stl-accent, #00f260) 50%, transparent);
	flex-shrink: 0;
}
.km-stl-circle .km-stl-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 5s ease;
	display: block;
}
.km-stl-zoom .km-stl-active .km-stl-img { transform: scale(1.2); }

/* --- Łącznik --- */
.km-stl-connector {
	flex-grow: 1;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--km-stl-accent, #00f260) 50%, transparent 100%);
	margin: 0 20px;
	position: relative;
}
.km-stl-connector::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	background: var(--km-stl-border-c, #fff);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 10px var(--km-stl-accent, #00f260);
}

/* --- Tekst --- */
.km-stl-text { flex-grow: 1; }
.km-stl-text h2 {
	font-size: var(--km-stl-h2, 3rem);
	color: var(--km-stl-h2-c, inherit);
	margin: 0 0 10px;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.km-stl-desc p {
	font-size: var(--km-stl-p, 1.2rem);
	color: var(--km-stl-p-c, inherit);
	line-height: 1.5;
	margin: 0 0 0.6em;
	opacity: 0.9;
}
.km-stl-cta {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 26px;
	border: 2px solid var(--km-stl-accent, #00f260);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
.km-stl-cta:hover {
	background: color-mix(in srgb, var(--km-stl-accent, #00f260) 25%, transparent);
	box-shadow: 0 0 15px var(--km-stl-accent, #00f260);
	color: inherit;
}

/* --- Kropki nawigacyjne --- */
.km-stl-dots {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 10;
}
.km-stl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background 0.25s ease, transform 0.25s ease;
}
.km-stl-dot.km-stl-dot-active {
	background: var(--km-stl-accent, #00f260);
	border-color: var(--km-stl-accent, #00f260);
	box-shadow: 0 0 8px var(--km-stl-accent, #00f260);
	transform: scale(1.25);
}

/* --- Dolny pasek postępu + licznik --- */
.km-stl-bottom {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 6px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
	z-index: 10;
}
.km-stl-bottom-fill {
	height: 100%;
	width: 0%;
	background: var(--km-stl-accent, #00f260);
	border-radius: 3px;
	transition: width 0.3s ease-out;
}
.km-stl-counter {
	position: fixed;
	bottom: 14px;
	left: calc(50% + 170px);
	transform: translateX(-50%);
	font-size: 0.8rem;
	background: rgba(0, 0, 0, 0.5);
	padding: 2px 10px;
	border-radius: 4px;
	z-index: 10;
	white-space: nowrap;
}

/* --- Dostępność: ograniczony ruch --- */
@media (prefers-reduced-motion: reduce) {
	.km-stl-content,
	.km-stl-bg,
	.km-stl-line-progress,
	.km-stl-bottom-fill,
	.km-stl-circle .km-stl-img {
		transition: none !important;
	}
	.km-stl-content { opacity: 1; transform: none; }
	.km-stl-zoom .km-stl-active .km-stl-img { transform: none; }
}

/* --- Responsywność --- */
@media (max-width: 768px) {
	.km-stl-content {
		flex-direction: column !important;
		text-align: center !important;
	}
	.km-stl-layout-left .km-stl-text,
	.km-stl-layout-right .km-stl-text {
		order: 1 !important;
		text-align: center !important;
	}
	.km-stl-circle {
		order: 2 !important;
		width: min(var(--km-stl-circle, 300px), 200px);
		height: min(var(--km-stl-circle, 300px), 200px);
	}
	.km-stl-connector {
		order: 3 !important;
		width: 2px;
		height: 40px;
		flex-grow: 0;
		margin: 20px 0;
	}
	.km-stl-text h2 { font-size: var(--km-stl-h2-m, 2rem); }
	.km-stl-desc p { font-size: var(--km-stl-p-m, 1rem); }
	.km-stl-dots { right: 10px; }
	.km-stl-counter { display: none; }
	.km-stl-bottom { width: 60vw; }
}

/* ================================================================ */
/* Szablon: Scanner (3DGS Business) — v1.1.0                        */
/* ================================================================ */

.km-stl-scanner-ui {
	font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Tło: kolor + siatka + poświata */
.km-stl-scan-bg {
	position: fixed; inset: 0; z-index: -3;
	background: var(--km-stl-bg, #050508);
	pointer-events: none;
}
.km-stl-grid-layer {
	position: fixed; inset: 0; z-index: -2;
	background-image:
		linear-gradient(rgba(20, 20, 40, 0.3) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20, 20, 40, 0.3) 1px, transparent 1px);
	background-size: var(--km-stl-grid, 60px) var(--km-stl-grid, 60px);
	background-position: center center;
	pointer-events: none;
}
.km-stl-glow-layer {
	position: fixed; top: -50%; left: -50%;
	width: 200%; height: 200%; z-index: -1;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--km-stl-accent, #7b61ff) 8%, transparent), transparent 60%);
	animation: km-stl-glow-drift 20s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes km-stl-glow-drift {
	0%   { transform: translate(0, 0); }
	100% { transform: translate(10%, 10%); }
}

/* Linia czasu w scannerze: cienki pipeline z lewej */
.km-stl-scanner-ui .km-stl-line,
.km-stl-scanner-ui .km-stl-line-progress {
	left: 40px;
	width: 1px;
	transform: none;
}
.km-stl-scanner-ui .km-stl-line-progress {
	box-shadow: 0 0 10px var(--km-stl-accent), 0 0 20px var(--km-stl-accent);
	transition: height 0.2s linear;
}
.km-stl-scanner-ui .km-stl-section { padding-left: 80px; }

/* HUD */
.km-stl-hud {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 60px;
	background: color-mix(in srgb, var(--km-stl-bg, #050508) 80%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: flex; justify-content: space-between; align-items: center;
	padding: 0 40px; z-index: 10;
}
.km-stl-hud-logo {
	font-weight: 700; font-size: 1.2rem;
	color: var(--km-stl-accent, #7b61ff);
	letter-spacing: 3px;
}
.km-stl-hud-logo span { color: var(--km-stl-text, #fff); }
.km-stl-hud-stats {
	display: flex; gap: 30px;
	font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.8rem;
	color: var(--km-stl-muted, #8a8a9a);
}
.km-stl-hud-stat span { color: var(--km-stl-text, #fff); margin-left: 5px; }
.km-stl-hud-status { color: var(--km-stl-accent, #7b61ff) !important; }
.km-stl-hud-status.km-stl-st-render { color: var(--km-stl-render, #00f260) !important; }
.km-stl-hud-status.km-stl-st-done   { color: var(--km-stl-text, #fff) !important; }

/* Etykieta readout */
.km-stl-label {
	display: inline-block;
	font-size: 0.8rem; letter-spacing: 2px;
	color: var(--km-stl-accent, #7b61ff);
	border: 1px solid color-mix(in srgb, var(--km-stl-accent, #7b61ff) 30%, transparent);
	background: color-mix(in srgb, var(--km-stl-accent, #7b61ff) 10%, transparent);
	padding: 4px 8px; border-radius: 4px; margin-bottom: 15px;
	font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
.km-stl-scanner-ui .km-stl-text h2 { letter-spacing: -1px; }
.km-stl-scanner-ui .km-stl-desc p { color: var(--km-stl-p-c, var(--km-stl-muted, #8a8a9a)); opacity: 1; }

/* Viewport skanera */
.km-stl-viewport {
	width: calc(var(--km-stl-circle, 300px) + 20px);
	height: calc(var(--km-stl-circle, 300px) + 20px);
	position: relative; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.km-stl-layout-left  .km-stl-viewport { order: 1; margin-left: 40px; }
.km-stl-layout-right .km-stl-viewport { order: 3; margin-right: 40px; }

.km-stl-ring {
	position: absolute;
	width: var(--km-stl-circle, 300px); height: var(--km-stl-circle, 300px);
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--km-stl-accent, #7b61ff) 20%, transparent);
	border-top: 2px solid var(--km-stl-accent, #7b61ff);
	border-left: 2px solid rgba(255, 255, 255, 0.5);
	animation: km-stl-scanner-spin 6s linear infinite;
}
@keyframes km-stl-scanner-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.km-stl-viewport-inner {
	width: calc(var(--km-stl-circle, 300px) - 40px);
	height: calc(var(--km-stl-circle, 300px) - 40px);
	border-radius: 50%; overflow: hidden; position: relative;
	background: #000;
	box-shadow: 0 0 30px color-mix(in srgb, var(--km-stl-accent, #7b61ff) 20%, transparent);
}
.km-stl-viewport-inner .km-stl-img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Efekt Gaussian Splatting: szum → krystaliczny render */
.km-stl-splatfx .km-stl-img {
	filter: blur(20px) grayscale(1) contrast(1.8) brightness(0.6);
	transform: scale(1.1);
	transition: filter 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s ease;
}
.km-stl-active .km-stl-splatfx .km-stl-img {
	filter: blur(0) grayscale(0) contrast(1) brightness(1);
	transform: scale(1);
}

/* Linia lasera */
.km-stl-scanline {
	position: absolute;
	width: 100%; height: 4px;
	background: color-mix(in srgb, var(--km-stl-accent, #7b61ff) 80%, transparent);
	box-shadow: 0 0 15px var(--km-stl-accent, #7b61ff);
	top: 0; opacity: 0; z-index: 2;
	transition: opacity 0.5s ease;
	animation: km-stl-scan-sweep 3s ease-in-out infinite;
}
.km-stl-active .km-stl-scanline { opacity: 1; }
@keyframes km-stl-scan-sweep {
	0%   { top: 0%; }
	50%  { top: 100%; }
	100% { top: 0%; }
}

/* Data stream */
.km-stl-stream {
	order: 2;
	width: 150px; height: 2px;
	background: rgba(255, 255, 255, 0.1);
	position: relative; overflow: hidden;
	transform: scaleX(0); transform-origin: left;
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
}
.km-stl-layout-right .km-stl-stream { transform-origin: right; }
.km-stl-active .km-stl-stream { transform: scaleX(1); }
.km-stl-stream::after {
	content: '';
	position: absolute; top: 0; left: -40px;
	width: 40px; height: 100%;
	background: linear-gradient(90deg, transparent, var(--km-stl-accent, #7b61ff), transparent);
	animation: km-stl-stream-pulse 2s linear infinite;
}
@keyframes km-stl-stream-pulse {
	0%   { left: -40px; }
	100% { left: 100%; }
}

/* Scanner: animacje wejścia tekstu (kaskadowe) */
.km-stl-scanner-ui .km-stl-content { opacity: 1; transform: none; }
.km-stl-scanner-ui .km-stl-text h2,
.km-stl-scanner-ui .km-stl-desc,
.km-stl-scanner-ui .km-stl-cta {
	opacity: 0; transform: translateY(30px);
	transition: all 0.8s ease;
}
.km-stl-scanner-ui .km-stl-desc { transition-delay: 0.2s; }
.km-stl-scanner-ui .km-stl-cta  { transition-delay: 0.35s; }
.km-stl-scanner-ui .km-stl-anim-none .km-stl-text h2,
.km-stl-scanner-ui.km-stl-anim-none .km-stl-text h2,
.km-stl-scanner-ui.km-stl-anim-none .km-stl-desc,
.km-stl-scanner-ui.km-stl-anim-none .km-stl-cta { opacity: 1; transform: none; }
.km-stl-scanner-ui .km-stl-active .km-stl-text h2,
.km-stl-scanner-ui .km-stl-active .km-stl-desc,
.km-stl-scanner-ui .km-stl-active .km-stl-cta { opacity: 1; transform: translateY(0); }

/* prefers-reduced-motion dla scannera */
@media (prefers-reduced-motion: reduce) {
	.km-stl-glow-layer, .km-stl-ring, .km-stl-scanline, .km-stl-stream::after { animation: none !important; }
	.km-stl-scanner-ui .km-stl-text h2,
	.km-stl-scanner-ui .km-stl-desc,
	.km-stl-scanner-ui .km-stl-cta,
	.km-stl-stream,
	.km-stl-splatfx .km-stl-img { transition: none !important; opacity: 1; transform: none; }
	.km-stl-splatfx .km-stl-img { filter: none; }
	.km-stl-stream { transform: scaleX(1); }
}

/* Responsywność scannera */
@media (max-width: 768px) {
	.km-stl-scanner-ui .km-stl-section { padding-left: 20px; padding-right: 20px; }
	.km-stl-scanner-ui .km-stl-line,
	.km-stl-scanner-ui .km-stl-line-progress { left: 10px; }
	.km-stl-viewport {
		order: 2 !important; margin: 0 !important;
		width: 220px; height: 220px;
	}
	.km-stl-ring { width: 210px; height: 210px; }
	.km-stl-viewport-inner { width: 180px; height: 180px; }
	.km-stl-stream {
		order: 3 !important;
		width: 2px; height: 80px;
		transform: scaleY(0) !important;
	}
	.km-stl-active .km-stl-stream { transform: scaleY(1) !important; }
	.km-stl-hud { padding: 0 15px; }
	.km-stl-hud-stats { gap: 15px; font-size: 0.7rem; }
}

/* ================================================================ */
/* Szablon: Fusion (Scanner + gradientowe tła) — v1.2.0             */
/* ================================================================ */

/* Gradienty sekcji jako baza, nad nimi przyciemnienie, siatka i poświata */
.km-stl-tpl-fusion .km-stl-bg { z-index: -5; }
.km-stl-overlay {
	position: fixed; inset: 0; z-index: -4;
	background: #000;
	opacity: var(--km-stl-overlay, 0.55);
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.km-stl-tpl-fusion .km-stl-grid-layer { z-index: -3; }
.km-stl-tpl-fusion .km-stl-glow-layer { z-index: -2; }

/* Poświata w Fusion reaguje mocniej — widoczna nad gradientem */
.km-stl-tpl-fusion .km-stl-glow-layer {
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--km-stl-accent, #7b61ff) 14%, transparent), transparent 60%);
}

/* ================================================================ */
/* Izolacja od stylów motywu WP — v1.2.0                            */
/* Neutralizuje typowe reguły motywów (entry-content, global img/a) */
/* ================================================================ */

.km-stl-wrap,
.km-stl-wrap *,
.km-stl-wrap *::before,
.km-stl-wrap *::after { box-sizing: border-box; }

.km-stl-wrap {
	font-size: 16px;
	line-height: 1.5;
	text-align: initial;
}

/* Nagłówki: motywy narzucają marginesy, transformacje, dekoracje */
.km-stl-wrap .km-stl-text h2 {
	padding: 0;
	border: 0;
	background: none;
	text-transform: none;
	text-indent: 0;
	font-family: inherit;
	line-height: 1.15;
	max-width: none;
}
.km-stl-wrap .km-stl-text h2::before,
.km-stl-wrap .km-stl-text h2::after { content: none; }

/* Akapity */
.km-stl-wrap .km-stl-desc p {
	padding: 0;
	text-indent: 0;
	max-width: none;
	font-family: inherit;
}

/* Obrazy: motywy dają max-width:100% + height:auto, co psuje object-fit */
.km-stl-wrap img.km-stl-img {
	max-width: none !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
	vertical-align: top;
}

/* Linki: podkreślenia motywu (text-decoration i box-shadow "underline") */
.km-stl-wrap a.km-stl-cta {
	text-decoration: none !important;
	box-shadow: none;
	background-image: none;
	font-family: inherit;
	outline-offset: 3px;
}
.km-stl-wrap a.km-stl-cta:hover { text-decoration: none !important; }

/* Przyciski (kropki): reset stylów theme/browser */
.km-stl-wrap button.km-stl-dot {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font: inherit;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	box-shadow: none;
	text-shadow: none;
	outline-offset: 3px;
}
.km-stl-wrap button.km-stl-dot:hover,
.km-stl-wrap button.km-stl-dot:focus {
	background-color: transparent;
}
.km-stl-wrap button.km-stl-dot.km-stl-dot-active {
	background-color: var(--km-stl-accent, #00f260);
}

/* Sekcje i kontenery: zeruj marginesy/paddingi narzucane przez motyw */
.km-stl-wrap section.km-stl-section {
	margin: 0;
	border: 0;
	max-width: none;
	width: auto;
}
.km-stl-wrap .km-stl-content,
.km-stl-wrap .km-stl-text,
.km-stl-wrap .km-stl-desc {
	margin: 0;
	max-width: none;
}

/* Etykieta i HUD: monospace nie może być nadpisany przez body font */
.km-stl-wrap .km-stl-label,
.km-stl-wrap .km-stl-hud-stats {
	font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ================================================================ */
/* Hotfix 1.2.1: twarda izolacja kropek nawigacyjnych               */
/* Motywy i buildery (YellowPencil, WPBakery) stylują <button>      */
/* z !important — dlatego krytyczne właściwości też są !important.  */
/* ================================================================ */

.km-stl-wrap .km-stl-dots { 
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	list-style: none !important;
}

.km-stl-wrap .km-stl-dots .km-stl-dot {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 12px !important;
	height: 12px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: 0 !important;
	letter-spacing: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 2px solid rgba(255, 255, 255, 0.6) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	text-shadow: none !important;
	outline: none;
	transform: none !important;
	cursor: pointer !important;
	transition: background 0.25s ease, transform 0.25s ease !important;
}

.km-stl-wrap .km-stl-dots .km-stl-dot:hover,
.km-stl-wrap .km-stl-dots .km-stl-dot:focus,
.km-stl-wrap .km-stl-dots .km-stl-dot:active {
	background: rgba(255, 255, 255, 0.25) !important;
	border-color: rgba(255, 255, 255, 0.9) !important;
	color: transparent !important;
}
.km-stl-wrap .km-stl-dots .km-stl-dot:focus-visible {
	outline: 2px solid var(--km-stl-accent, #00f260);
	outline-offset: 3px;
}

.km-stl-wrap .km-stl-dots .km-stl-dot.km-stl-dot-active,
.km-stl-wrap .km-stl-dots .km-stl-dot.km-stl-dot-active:hover {
	background: var(--km-stl-accent, #00f260) !important;
	border-color: var(--km-stl-accent, #00f260) !important;
	box-shadow: 0 0 8px var(--km-stl-accent, #00f260) !important;
	transform: scale(1.25) !important;
}

/* Pasek admina WP: HUD i elementy fixed nie mogą pod niego wchodzić */
body.admin-bar .km-stl-hud { top: 32px; }
body.admin-bar .km-stl-line,
body.admin-bar .km-stl-line-progress { top: 32px; }
body.admin-bar .km-stl-line { height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .km-stl-hud { top: 46px; }
	body.admin-bar .km-stl-line,
	body.admin-bar .km-stl-line-progress { top: 46px; }
	body.admin-bar .km-stl-line { height: calc(100vh - 46px); }
}

/* ================================================================ */
/* Sekcje-separatory (duży tytuł) — v1.4.0                          */
/* ================================================================ */

.km-stl-divider .km-stl-content {
	justify-content: center;
}
.km-stl-divider .km-stl-div-text {
	flex-grow: 0;
	max-width: 1000px;
	text-align: center !important;
}
.km-stl-divider .km-stl-label { margin-bottom: 25px; }

.km-stl-wrap .km-stl-div-title {
	font-size: var(--km-stl-div, 6rem);
	line-height: 1.05;
	letter-spacing: -2px;
	margin: 0 0 24px;
	text-shadow: none;
}
.km-stl-div-upper .km-stl-div-title { text-transform: uppercase; }

/* Styl: solid — pełny kolor (własny lub dziedziczony z nagłówków) */
.km-stl-divstyle-solid .km-stl-div-title {
	color: var(--km-stl-div-c, var(--km-stl-h2-c, inherit));
}

/* Styl: outline — sam kontur liter */
.km-stl-divstyle-outline .km-stl-div-title {
	color: transparent;
	-webkit-text-stroke: 2px var(--km-stl-div-c, var(--km-stl-accent, #00f260));
	paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px #000) {
	.km-stl-divstyle-outline .km-stl-div-title {
		color: var(--km-stl-div-c, var(--km-stl-accent, #00f260));
	}
}

/* Styl: glow — neonowa poświata w kolorze akcentu/własnym */
.km-stl-divstyle-glow .km-stl-div-title {
	color: var(--km-stl-div-c, var(--km-stl-text, #fff));
	text-shadow:
		0 0 20px var(--km-stl-div-c, var(--km-stl-accent, #00f260)),
		0 0 60px var(--km-stl-div-c, var(--km-stl-accent, #00f260));
}

/* Podtytuł separatora */
.km-stl-div-sub p {
	font-size: calc(var(--km-stl-p, 1.2rem) * 1.15);
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* Wejście: separator lekko powiększa się przy aktywacji */
.km-stl-divider .km-stl-div-title {
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transform: scale(0.94);
}
.km-stl-divider .km-stl-active .km-stl-div-title,
.km-stl-divider .km-stl-content.km-stl-active .km-stl-div-title { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	.km-stl-divider .km-stl-div-title { transition: none !important; transform: none; }
}

@media (max-width: 768px) {
	.km-stl-wrap .km-stl-div-title {
		font-size: var(--km-stl-div-m, 2.75rem);
		letter-spacing: -1px;
	}
	.km-stl-divider .km-stl-div-text { order: 1 !important; }
}