/* =====================================================================
 * Cf Control – web 2026 – design system
 * Modern SaaS landing style, Bootstrap 5.3 + custom tokens.
 * ===================================================================== */

/* ───── 1. Design tokens ───── */
:root,
[data-bs-theme="light"] {
	--bs-primary:        #2563eb;
	--bs-primary-rgb:    37, 99, 235;
	--cf-primary-600:    #2563eb;
	--cf-primary-700:    #1d4ed8;
	--cf-primary-800:    #1e3a8a;
	--cf-primary-50:     #eff6ff;
	--cf-primary-100:    #dbeafe;

	--cf-accent:         #06b6d4;
	--cf-accent-rgb:     6, 182, 212;
	--cf-amber:          #f59e0b;
	--cf-success:        #10b981;
	--cf-danger:         #ef4444;

	--cf-page:           #ffffff;
	--cf-section-alt:    #f8fafc;
	--cf-card:           #ffffff;
	--cf-card-elev:      #ffffff;
	--cf-footer:         #0b1220;

	--cf-text:           #0f172a;
	--cf-text-soft:      #334155;
	--cf-text-muted:     #64748b;
	--cf-text-inverse:   #ffffff;
	--cf-border:         #e5e7eb;
	--cf-border-strong:  #cbd5e1;

	--cf-shadow-sm:      0 1px 2px 0 rgba(15, 23, 42, .06);
	--cf-shadow-md:      0 4px 14px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);
	--cf-shadow-lg:      0 24px 48px -12px rgba(15, 23, 42, .18), 0 8px 16px -8px rgba(15, 23, 42, .08);
	--cf-shadow-glow:    0 0 0 1px rgba(var(--bs-primary-rgb), .15), 0 16px 36px -10px rgba(var(--bs-primary-rgb), .28);

	--cf-radius-sm:      .5rem;
	--cf-radius:         .875rem;
	--cf-radius-lg:      1.25rem;
	--cf-radius-pill:    999px;

	--cf-ease:           cubic-bezier(.22, 1, .36, 1);
}

[data-bs-theme="dark"] {
	--bs-primary:        #60a5fa;
	--bs-primary-rgb:    96, 165, 250;
	--cf-primary-600:    #3b82f6;
	--cf-primary-700:    #2563eb;
	--cf-primary-800:    #1e40af;
	--cf-primary-50:     #27272a;
	--cf-primary-100:    #3f3f46;

	--cf-accent:         #22d3ee;
	--cf-accent-rgb:     34, 211, 238;

	/* Neutral dark grays (zinc family), not blue-tinted */
	--cf-page:           #18181b;
	--cf-section-alt:    #1f1f23;
	--cf-card:           #27272a;
	--cf-card-elev:      #3f3f46;
	--cf-footer:         #09090b;

	--cf-text:           #fafafa;
	--cf-text-soft:      #d4d4d8;
	--cf-text-muted:     #a1a1aa;
	--cf-text-inverse:   #18181b;
	--cf-border:         #3f3f46;
	--cf-border-strong:  #52525b;

	--cf-shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, .4);
	--cf-shadow-md:      0 4px 16px -2px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .35);
	--cf-shadow-lg:      0 28px 56px -12px rgba(0, 0, 0, .7), 0 10px 20px -8px rgba(0, 0, 0, .45);
	--cf-shadow-glow:    0 0 0 1px rgba(var(--bs-primary-rgb), .25), 0 16px 40px -10px rgba(var(--bs-primary-rgb), .35);
}

/* ───── 2. Base ───── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	font-family: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-feature-settings: "cv11", "ss01", "ss03";
	background: var(--cf-page);
	color: var(--cf-text-soft);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	color: var(--cf-text);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-top: 0;
}
h1 { font-size: clamp(2.25rem, 3.5vw + .5rem, 3.75rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 2.2vw + .5rem, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin-top: 0; }

a { color: var(--bs-primary); text-decoration: none; transition: color .15s var(--cf-ease); }
a:hover { color: var(--cf-primary-700); text-decoration: underline; text-underline-offset: .2em; }
.btn, .btn:hover, .btn:focus, .btn:active { text-decoration: none !important; }
strong { color: var(--cf-text); font-weight: 600; }
hr { border-color: var(--cf-border); opacity: 1; }
ul, ol { padding-left: 1.25rem; }

::selection { background: rgba(var(--bs-primary-rgb), .25); color: var(--cf-text); }

/* ───── 3. Bootstrap recolouring ───── */
[data-bs-theme] .btn {
	--bs-btn-border-radius: var(--cf-radius-sm);
	--bs-btn-font-weight: 600;
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-padding-y: .65rem;
	transition: background-color .15s var(--cf-ease), border-color .15s var(--cf-ease), color .15s var(--cf-ease);
}
[data-bs-theme] .btn-lg {
	--bs-btn-padding-x: 1.75rem;
	--bs-btn-padding-y: .85rem;
	--bs-btn-font-size: 1rem;
}
[data-bs-theme] .btn-sm {
	--bs-btn-padding-x: .85rem;
	--bs-btn-padding-y: .4rem;
	--bs-btn-font-size: .8125rem;
}

[data-bs-theme] .btn-primary {
	--bs-btn-bg: var(--cf-primary-600);
	--bs-btn-border-color: var(--cf-primary-600);
	--bs-btn-hover-bg: var(--cf-primary-700);
	--bs-btn-hover-border-color: var(--cf-primary-700);
	--bs-btn-active-bg: var(--cf-primary-800);
	--bs-btn-active-border-color: var(--cf-primary-800);
	color: #fff;
}
[data-bs-theme] .btn-primary:hover { color: #fff; }

[data-bs-theme] .btn-outline-primary {
	--bs-btn-color: var(--cf-primary-700);
	--bs-btn-border-color: var(--cf-border-strong);
	--bs-btn-hover-bg: var(--cf-primary-600);
	--bs-btn-hover-border-color: var(--cf-primary-600);
	--bs-btn-hover-color: #fff;
}

[data-bs-theme="dark"] .btn-outline-primary {
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--cf-border-strong);
}

[data-bs-theme] .btn-light {
	--bs-btn-bg: #ffffff;
	--bs-btn-color: var(--cf-primary-800);
	--bs-btn-border-color: #ffffff;
	--bs-btn-hover-bg: #f8fafc;
	--bs-btn-hover-color: var(--cf-primary-800);
	--bs-btn-hover-border-color: #f8fafc;
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, .35);
}

[data-bs-theme] .btn-outline-light {
	--bs-btn-color: #ffffff;
	--bs-btn-border-color: rgba(255, 255, 255, .55);
	--bs-btn-hover-bg: rgba(255, 255, 255, .15);
	--bs-btn-hover-border-color: #ffffff;
	--bs-btn-hover-color: #ffffff;
	backdrop-filter: blur(8px);
}

/* ───── 4. Header & navbar ───── */
#header {
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--cf-border);
	z-index: 990;
	position: sticky; top: 0;
}
[data-bs-theme="dark"] #header {
	background: rgba(24, 24, 27, .88);  /* zinc-900 alpha — neutral, not blue */
	border-bottom-color: var(--cf-border);
}

.header-inner {
	display: flex; align-items: center;
	min-height: 72px; gap: 1rem;
}
#header .logo { display: inline-flex; align-items: center; }
#header .logo img { max-height: 38px; width: auto; }

#header .navbar { padding: 0; }
#header .navbar-nav { gap: .25rem; }
#header .navbar-nav .nav-link {
	color: var(--cf-text-soft);
	font-weight: 500;
	font-size: .9375rem;
	padding: .5rem .9rem;
	border-radius: var(--cf-radius-sm);
	transition: background .15s var(--cf-ease), color .15s var(--cf-ease);
}
#header .navbar-nav .nav-link:hover { color: var(--cf-text); background: var(--cf-section-alt); text-decoration: none; }
#header .navbar-nav .nav-link.active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); font-weight: 600; }

.navbar-toggler { border: 0; padding: .4rem .55rem; font-size: 1.5rem; color: var(--cf-text); background: transparent; border-radius: var(--cf-radius-sm); }
.navbar-toggler:hover { background: var(--cf-section-alt); }
.navbar-toggler:focus { box-shadow: none; }

.header-controls { display: flex; align-items: center; gap: .5rem; margin-left: .75rem; }
.currency-switch {
	display: inline-flex; align-items: center;
	background: var(--cf-section-alt);
	border-radius: var(--cf-radius-pill);
	padding: .25rem;
	gap: 0;
	font-size: .8125rem;
	font-weight: 600;
}
.currency-btn {
	background: transparent; border: 0; padding: .3rem .75rem;
	color: var(--cf-text-muted); cursor: pointer;
	border-radius: var(--cf-radius-pill);
	transition: all .15s var(--cf-ease);
}
.currency-btn:hover { color: var(--cf-text); }
body.body-czk .currency-btn[data-currency="czk"],
body.body-eur .currency-btn[data-currency="eur"] {
	background: var(--cf-card);
	color: var(--cf-primary-700);
	box-shadow: var(--cf-shadow-sm);
}
[data-bs-theme="dark"] body.body-czk .currency-btn[data-currency="czk"],
[data-bs-theme="dark"] body.body-eur .currency-btn[data-currency="eur"] {
	background: var(--cf-card-elev);
	color: var(--bs-primary);
}
.currency-sep { display: none; }

.theme-toggle {
	background: var(--cf-section-alt);
	border: 0; width: 38px; height: 38px;
	border-radius: var(--cf-radius-pill);
	color: var(--cf-text-soft); font-size: 1rem;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all .15s var(--cf-ease);
}
.theme-toggle:hover { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); }
.theme-icon-light, .theme-icon-dark { display: none; }
[data-bs-theme="light"] .theme-icon-dark { display: inline-block; }
[data-bs-theme="dark"] .theme-icon-light { display: inline-block; }

@media (max-width: 991.98px) {
	#header .navbar-collapse {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--cf-card);
		border-top: 1px solid var(--cf-border);
		padding: 1rem;
		box-shadow: var(--cf-shadow-lg);
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	#header .navbar-nav { flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
	#header .navbar-nav .nav-link { padding: .65rem .85rem; font-size: 1rem; }
	.header-controls { margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--cf-border); }
}

/* ───── 5. Main content area ───── */
main.content { padding: 0; }
main.content > .container { padding-top: 4rem; padding-bottom: 4rem; }
@media (max-width: 767.98px) {
	main.content > .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* Section heading with optional eyebrow */
.section-head { text-align: center; margin-bottom: 3rem; }
.eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	font-size: .75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--bs-primary);
	background: none; border: 0;
	padding: 0;
}
.eyebrow::before {
	content: ""; display: inline-block;
	width: 2rem; height: 2px;
	background: currentColor;
	border-radius: 1px;
}
.eyebrow i { display: none; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h1, .section-head h2 { margin: 0 0 1rem; max-width: none; }
.section-head p {
	color: var(--cf-text-muted);
	font-size: 1.0625rem;
	max-width: none;
	margin: 0;
}
.section-head .section-lead {
	font-size: 1.125rem;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767.98px) {
	.section-head { margin-bottom: 2rem; }
	.section-head p { font-size: 1rem; }
}

section[class*="section-"] {
	padding-block: 4rem;
}
@media (max-width: 767.98px) {
	section[class*="section-"] { padding-block: 2.5rem; }
}
/* (.section-alt removed; sections now share the same page background.) */

/* Homepage overview block */
.overview-lead { font-size: 1.0625rem; color: var(--cf-text-muted); }
.overview-list li {
	display: flex; gap: .65rem; align-items: flex-start;
	padding: .35rem 0;
	font-size: .9375rem;
	color: var(--cf-text-soft);
}
.overview-list li i { font-size: 1.1rem; margin-top: .2rem; flex-shrink: 0; }

/* ───── 6. Hero — theme-aware, flat, no color gradients ───── */
:root, [data-bs-theme="light"] {
	--cf-hero-bg:        #f4f5f7;
	--cf-hero-text:      #0f172a;
	--cf-hero-text-muted:#52525b;
	--cf-hero-dot:       rgba(15, 23, 42, .07);
	--cf-hero-border:    var(--cf-border);
	--cf-hero-eyebrow:   #71717a;  /* neutral gray — subtle, "fits in" */
}
[data-bs-theme="dark"] {
	--cf-hero-bg:        #0d0d10;
	--cf-hero-text:      #fafafa;
	--cf-hero-text-muted:rgba(255, 255, 255, .7);
	--cf-hero-dot:       rgba(255, 255, 255, .12);
	--cf-hero-border:    rgba(255, 255, 255, .08);
	--cf-hero-eyebrow:   rgba(255, 255, 255, .55);
}

#hero {
	position: relative;
	background: var(--cf-hero-bg);
	color: var(--cf-hero-text);
	padding: clamp(4rem, 8vw, 7rem) 0;
	border-bottom: 1px solid var(--cf-hero-border);
	overflow: hidden;
}
/* Subtle dot pattern, mono-color */
#hero::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(circle at 1px 1px, var(--cf-hero-dot) 1px, transparent 0);
	background-size: 28px 28px;
	pointer-events: none;
}
#hero .hero-content { position: relative; z-index: 2; text-align: center; }
#hero .hero-eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	font-size: .75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--cf-hero-eyebrow);
	background: none; border: 0;
	padding: 0; margin-bottom: 1.5rem;
}
#hero .hero-eyebrow::before {
	content: ""; display: inline-block;
	width: 2rem; height: 2px;
	background: currentColor;
	border-radius: 1px;
}
#hero .hero-eyebrow i { display: none; }
#hero h1 {
	color: var(--cf-hero-text);
	margin: 0 auto 1.25rem;
	letter-spacing: -0.03em;
	font-weight: 800;
}
#hero p.lead {
	color: var(--cf-hero-text-muted);
	font-size: clamp(1rem, 1.2vw + .25rem, 1.2rem);
	font-weight: 400;
	margin: 0 auto 2.25rem;
	line-height: 1.6;
	max-width: 720px;
}
#hero .hero-cta { display: inline-flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
#hero .hero-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem 1.5rem;
	margin: 3rem auto 0;
	padding-top: 2.25rem;
	border-top: 1px solid var(--cf-hero-border);
}
@media (min-width: 576px) {
	#hero .hero-stats { grid-template-columns: repeat(4, 1fr); }
}
#hero .hero-stat { text-align: center; }
#hero .hero-stat .stat-value {
	font-size: 2rem; font-weight: 800;
	color: var(--cf-hero-text);
	letter-spacing: -0.02em;
	line-height: 1;
}
#hero .hero-stat .stat-label {
	font-size: .8125rem;
	color: var(--cf-hero-text-muted);
	margin-top: .35rem;
}

/* ───── 7. Cards (general) ───── */
.card {
	background: var(--cf-card);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	box-shadow: var(--cf-shadow-sm);
	color: var(--cf-text-soft);
	transition: transform .2s var(--cf-ease), box-shadow .2s var(--cf-ease), border-color .2s var(--cf-ease);
}
.card .card-body { padding: 1.5rem; }
.card-body h3 { color: var(--cf-text); }
.card-link-hover:hover {
	box-shadow: var(--cf-shadow-md);
	border-color: var(--cf-border-strong);
}

/* About features layout — CSS columns for masonry-style stacking (no forced equal heights) */
.features-masonry { columns: 1; column-gap: 1.5rem; }
@media (min-width: 992px) {
	.features-masonry { columns: 2; }
}
.features-masonry > .feature-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 1.5rem;
	display: block;
	width: 100%;
}

/* Feature cards (About) */
.feature-card {
	display: block;
}
.feature-card .feature-header {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-bottom: 1rem;
}
.feature-card .feature-header h3 {
	margin: 0;
}
.feature-card .feature-header .feature-icon {
	margin-bottom: 0;
	flex-shrink: 0;
}
.feature-card .feature-icon {
	width: 56px; height: 56px;
	border-radius: var(--cf-radius);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.6rem;
	color: var(--bs-primary);
	background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .15), rgba(var(--cf-accent-rgb), .1));
	box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .15);
	margin-bottom: 1rem;
}
.feature-card ul { list-style: none; padding: 0; margin: 0; }
.feature-card ul li {
	position: relative;
	padding: .35rem 0 .35rem 1.5rem;
	color: var(--cf-text-soft);
	font-size: .9375rem;
}
.feature-card ul li::before {
	content: "";
	position: absolute; left: 0; top: .75rem;
	width: 6px; height: 6px;
	background: var(--bs-primary);
	border-radius: 50%;
}
.feature-card ul ul { margin-top: 0; padding-left: 1rem; }

/* Benefits row (Homepage) */
.benefits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
}
.benefit {
	text-align: center;
	padding: 1.5rem 1rem;
	background: var(--cf-card);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	transition: border-color .15s var(--cf-ease), background-color .15s var(--cf-ease);
}
.benefit:hover { border-color: var(--cf-border-strong); background: var(--cf-section-alt); }
.benefit .benefit-icon {
	width: 56px; height: 56px;
	border-radius: var(--cf-radius);
	background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .15), rgba(var(--cf-accent-rgb), .12));
	color: var(--bs-primary);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.6rem;
	margin-bottom: .75rem;
	box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .12);
}
.benefit strong { color: var(--cf-text); display: block; font-size: .9375rem; line-height: 1.35; }

/* ───── 8. Pricing ───── */
.pricing-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
}
.pricing-card {
	background: var(--cf-card);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg);
	padding: 2rem 1.5rem;
	text-align: left;
	box-shadow: var(--cf-shadow-sm);
	display: flex; flex-direction: column;
	position: relative;
	transition: border-color .15s var(--cf-ease), background-color .15s var(--cf-ease);
	overflow: hidden;
}
.pricing-card:hover {
	border-color: var(--cf-border-strong);
}
/* (Doporučeno badge removed – licence se volí podle počtu zákazníků.) */
.pricing-card h3 {
	font-size: 1.125rem;
	color: var(--cf-text);
	margin-bottom: .25rem;
	letter-spacing: -0.01em;
}
.pricing-card .pricing-tagline {
	color: var(--cf-text-muted);
	font-size: .875rem;
	margin-bottom: 1.25rem;
	min-height: 1.25rem;
}
.pricing-card .pricing-price {
	margin-bottom: 1.25rem;
	color: var(--cf-text);
}
.pricing-card .pricing-price strong {
	font-size: 2rem;
	font-weight: 800;
	color: var(--cf-text);
	letter-spacing: -0.02em;
	display: block;
	line-height: 1;
}
.pricing-card .pricing-price .interval {
	color: var(--cf-text-muted);
	font-size: .8125rem;
	font-weight: 500;
	display: block;
	margin-top: .25rem;
}
.pricing-card ul {
	list-style: none; padding: 0; margin: 0 0 1.5rem;
	font-size: .875rem;
	flex: 1;
}
.pricing-card ul li {
	padding: .4rem 0 .4rem 1.5rem;
	position: relative;
	color: var(--cf-text-soft);
}
.pricing-card ul li::before {
	content: "\F26B";  /* bi-check-lg */
	font-family: "bootstrap-icons";
	position: absolute; left: 0; top: .35rem;
	color: var(--cf-success);
	font-weight: 700;
}
.pricing-card .btn { width: 100%; }

/* Price tables (on /cenik) */
.price-section {
	background: var(--cf-card);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg);
	overflow: hidden;
	box-shadow: var(--cf-shadow-sm);
	margin-bottom: 2rem;
}
.price-section-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--cf-border);
	display: flex; align-items: center; gap: .75rem;
}
.price-section-header h2 {
	font-size: 1.25rem; margin: 0;
	letter-spacing: -0.01em;
}
.price-section-header .section-icon {
	width: 36px; height: 36px;
	border-radius: var(--cf-radius-sm);
	background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .15), rgba(var(--cf-accent-rgb), .1));
	color: var(--bs-primary);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.1rem;
	box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .12);
}
.price-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}
.price-table col.col-name { width: 13rem; }
.price-table col.col-price { width: 11rem; }
.price-table col.col-action { width: 9rem; }
@media (max-width: 767.98px) {
	.price-table { table-layout: auto; }
	.price-table col.col-name,
	.price-table col.col-price,
	.price-table col.col-action { width: auto; }
}
.price-table > tbody td {
	padding: 1.1rem 1.5rem;
	vertical-align: middle;
	border-bottom: 1px solid var(--cf-border);
	font-size: .9375rem;
}
.price-table > tbody tr:last-child td { border-bottom: 0; }
.price-table .pkg-name {
	font-weight: 700; font-size: 1.0625rem;
	color: var(--cf-text);
	letter-spacing: -0.01em;
}
.price-table .pkg-name sup { color: var(--cf-text-muted); font-weight: 500; }
.price-table .pkg-price {
	font-weight: 700; font-size: 1.0625rem;
	color: var(--cf-text);
	white-space: nowrap;
}
.price-table .pkg-price .interval {
	display: block; font-size: .8125rem;
	color: var(--cf-text-muted); font-weight: 500;
	margin-top: .15rem;
}
.price-table .info-only {
	color: var(--cf-text-muted);
	font-weight: 500;
	font-style: italic;
}
.price-table tr.row-pkg.selected {
	background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .06), transparent);
}
.price-table tr.row-pkg.selected td:first-child {
	box-shadow: inset 3px 0 0 var(--bs-primary);
}
.price-table .item-selected,
.price-table .item-remove { display: none; }
.price-table tr.row-pkg.selected .item-select,
.module-card.selected .item-select { display: none; }
.price-table tr.row-pkg.selected .item-selected { display: inline-flex; align-items: center; gap: .35rem; }
.module-card.selected .item-remove { display: inline-flex; align-items: center; gap: .35rem; }

/* Modules grid on PriceList (as 'package' helper class) */
.package.module-card {
	background: var(--cf-card);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg);
	padding: 1.75rem 1.5rem;
	text-align: left;
	box-shadow: var(--cf-shadow-sm);
	display: flex; flex-direction: column;
	transition: border-color .15s var(--cf-ease);
	height: 100%;
}
.package.module-card:hover { border-color: var(--cf-border-strong); }
.package.module-card.selected {
	border-color: rgba(var(--bs-primary-rgb), .5);
	box-shadow: var(--cf-shadow-glow);
}
.package.module-card h3 {
	font-size: 1.1875rem; color: var(--cf-text);
	margin-bottom: .5rem;
}
.package.module-card .price {
	font-size: 1.5rem; font-weight: 800; color: var(--cf-text);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: .75rem;
}
.package.module-card .price strong { font-weight: 800; }
.package.module-card .price span {
	display: block; font-size: .8125rem;
	color: var(--cf-text-muted); font-weight: 500;
	margin-top: .25rem;
}
.package.module-card p {
	color: var(--cf-text-muted);
	font-size: .9rem;
	margin-bottom: 1rem;
	flex: 1;
}
.package.module-card .btn { width: 100%; }

/* Currency-driven visibility */
body.body-czk .price-eur,
body.body-czk .eur { display: none !important; }
body.body-eur .price-czk,
body.body-eur .czk { display: none !important; }

/* per-license module rows — show default "20 %" until license is chosen.
 * Rules apply globally so both module table AND order summary share behavior. */
.price-by-license { display: none; }
.price-default { display: inline; }
body[class*="license-"] .price-default { display: none; }
body.license-free .price-by-license[data-license="free"],
body.license-mini .price-by-license[data-license="mini"],
body.license-basic .price-by-license[data-license="basic"],
body.license-standart .price-by-license[data-license="standart"],
body.license-profesional .price-by-license[data-license="profesional"],
body.license-individual .price-by-license[data-license="individual"] { display: inline; }

/* backup individual / not-individual variants */
body:not(.license-individual) .backup-individual { display: none; }
body.license-individual .backup-not-individual { display: none; }

/* Order summary */
.order-summary {
	background: var(--cf-section-alt);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	padding: 1.5rem;
}
.order-summary h3 {
	font-size: 1.0625rem;
	margin-bottom: 1rem;
	color: var(--cf-text);
}
.order-summary .order-row {
	display: none;
	padding: .65rem 0;
	border-bottom: 1px dashed var(--cf-border);
	font-size: .9rem;
}
.order-summary .order-row.selected {
	display: flex;
	justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
}
.order-summary .order-row:last-child { border-bottom: 0; }
.order-summary .item-title { color: var(--cf-text-soft); }
.order-summary .item-price { color: var(--cf-text); }
.order-summary .item-price strong { color: var(--bs-primary); font-weight: 700; }
.order-empty {
	color: var(--cf-text-muted);
	font-style: italic;
	padding: .5rem 0;
	font-size: .9rem;
}
.order-empty.hidden { display: none; }
.order-summary .item-price .interval { color: var(--cf-text-muted); font-weight: 400; font-size: .8125rem; margin-left: .15rem; }

/* ───── 8b. Alt pricelist (card-style) ───── */
.alt-section { margin-block: 3rem; }
.alt-section-head { margin-bottom: 1.5rem; }
.alt-section-eyebrow {
	display: inline-flex; align-items: center; gap: .65rem;
	font-size: .7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--bs-primary);
	margin-bottom: .5rem;
}
.alt-section-eyebrow::before {
	content: ""; display: inline-block;
	width: 1.75rem; height: 2px;
	background: currentColor; border-radius: 1px;
}
.alt-section-head h2 {
	margin: 0;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
}
.alt-section-head h2::after { display: none; }

.alt-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.alt-cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 768px) {
	.alt-cards-license { grid-template-columns: repeat(3, 1fr); }
	.alt-cards-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
	.alt-cards-license { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.alt-card {
	background: var(--cf-card);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg);
	padding: 1.5rem 1.25rem;
	display: flex; flex-direction: column;
	box-shadow: var(--cf-shadow-sm);
	transition: border-color .15s var(--cf-ease), background-color .15s var(--cf-ease);
}
.alt-card:hover { border-color: var(--cf-border-strong); }
.alt-card.selected {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 1px var(--bs-primary);
	background: rgba(var(--bs-primary-rgb), .04);
}
[data-bs-theme="dark"] .alt-card.selected { background: rgba(var(--bs-primary-rgb), .08); }
.alt-card h3 {
	font-size: 1.05rem;
	color: var(--cf-text);
	margin: 0 0 .35rem;
	letter-spacing: -0.01em;
}
.alt-card .alt-tagline {
	color: var(--cf-text-muted);
	font-size: .825rem;
	margin: 0 0 1rem;
	min-height: 2.3rem;
}
.alt-card .alt-price {
	color: var(--cf-text);
	margin-top: auto;       /* push price + button to the bottom of the card */
	margin-bottom: 1rem;
	padding-top: 1rem;
	line-height: 1.2;
}
.alt-card .alt-price strong {
	font-size: 1.4rem; font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cf-text);
	display: block;
}
.alt-card .alt-price .alt-interval {
	display: block; margin-top: .25rem;
	font-size: .75rem; font-weight: 500;
	color: var(--cf-text-muted);
}
.alt-card .alt-features {
	list-style: none; padding: 0; margin: 0 0 1rem;
	font-size: .825rem; color: var(--cf-text-soft);
}
.alt-card .alt-features li {
	padding: .2rem 0 .2rem 1.25rem;
	position: relative;
}
.alt-card .alt-features li::before {
	content: "\F26B";
	font-family: "bootstrap-icons";
	position: absolute; left: 0; top: .1rem;
	color: var(--cf-success);
	font-size: .9rem; font-weight: 700;
}
.alt-card .item-selected { display: none; }
.alt-card.selected .item-select { display: none; }
.alt-card.selected .item-selected { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }

/* ───── 9. News ───── */
.news-card {
	background: var(--cf-card);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	box-shadow: var(--cf-shadow-sm);
	padding: 1.75rem;
	height: 100%;
	display: flex; flex-direction: column;
	transition: background-color .15s var(--cf-ease), border-color .15s var(--cf-ease);
}
.news-card:hover {
	background: var(--cf-section-alt);
	border-color: var(--cf-border-strong);
}
.news-date {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	font-size: .75rem; font-weight: 700;
	color: var(--bs-primary);
	background: rgba(var(--bs-primary-rgb), .1);
	padding: .3rem .7rem;
	border-radius: var(--cf-radius-pill);
	letter-spacing: .02em;
	width: auto;
	margin-bottom: 1rem;
}
.news-card h3 { font-size: 1.1875rem; line-height: 1.35; margin-bottom: .65rem; }
.news-card h3 a { color: var(--cf-text); }
.news-card h3 a:hover { color: var(--bs-primary); text-decoration: none; }
.news-card p { color: var(--cf-text-muted); font-size: .9375rem; margin-bottom: 1rem; }
.news-card .news-more { margin-top: auto; }
.news-card .news-more a { font-weight: 600; font-size: .875rem; }

.news-back-link {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .875rem; font-weight: 600;
	color: var(--cf-text-muted);
}
.news-back-link:hover { color: var(--bs-primary); text-decoration: none; }

.news-detail-header { margin-bottom: 2rem; }
.news-detail-header h1 {
	font-size: clamp(1.75rem, 2.5vw + .5rem, 2.75rem);
	margin: 1rem 0 1rem;
	letter-spacing: -0.025em;
}
.news-date-lg {
	font-size: .875rem;
	padding: .45rem 1rem;
}
.news-perex {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--cf-text-muted);
	margin: 0;
}

.news-body { box-shadow: var(--cf-shadow-md); }
.news-body p { font-size: 1.0625rem; line-height: 1.75; color: var(--cf-text-soft); }
.news-body p:last-child { margin-bottom: 0; }
.news-body h2, .news-body h3, .news-body h4 {
	margin-top: 2rem; margin-bottom: .75rem;
	color: var(--cf-text); text-align: left;
}
.news-body h2 { font-size: 1.6rem; }
.news-body h2::after { display: none; }
.news-body h2:first-child, .news-body h3:first-child, .news-body h4:first-child { margin-top: 0; }
.news-body ul, .news-body ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.news-body ul li, .news-body ol li { padding: .25rem 0; line-height: 1.6; }
.news-body img { border-radius: var(--cf-radius-sm); margin: 1.5rem 0; max-width: 100%; height: auto; }
.news-body a { font-weight: 500; }
.news-nav {
	display: grid; gap: 1rem;
	grid-template-columns: 1fr 1fr;
	margin-top: 3rem;
}
.news-nav .news-nav-link {
	background: var(--cf-card);
	border: 1px solid var(--cf-border);
	padding: 1.1rem 1.25rem;
	border-radius: var(--cf-radius);
	text-decoration: none;
	display: flex; flex-direction: column;
	transition: border-color .15s var(--cf-ease), background-color .15s var(--cf-ease);
}
.news-nav .news-nav-link:hover {
	background: var(--cf-section-alt);
	border-color: var(--cf-border-strong);
	text-decoration: none;
}
.news-nav .news-nav-link span { font-size: .7rem; color: var(--cf-text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem; font-weight: 600; }
.news-nav .news-nav-link strong { color: var(--cf-text); font-size: .9375rem; }
.news-nav .news-nav-link:hover strong { color: var(--bs-primary); }
.news-nav .news-nav-link-right { text-align: right; }
@media (max-width: 575.98px) { .news-nav { grid-template-columns: 1fr; } .news-nav .news-nav-link-right { text-align: left; } }

/* ───── 10. Demo ───── */
.demo-card { padding: 0; height: 100%; }
.demo-card .card-body { padding: 2rem; }
.demo-card h3 { display: flex; align-items: center; gap: .75rem; }
.demo-card .demo-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--cf-radius);
	background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .15), rgba(var(--cf-accent-rgb), .1));
	color: var(--bs-primary); font-size: 1.25rem;
	box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .12);
}

/* ───── 11. Contact ───── */
.contact-info p.contact-line {
	display: flex; align-items: center; gap: .75rem;
	margin-bottom: .65rem; font-size: .9375rem;
}
.contact-info i {
	color: var(--bs-primary);
	width: 22px; text-align: center;
	font-size: 1.05rem;
}
.contact-info hr { margin: 1rem 0; }

.contact-map .ratio { border-radius: var(--cf-radius-lg); overflow: hidden; box-shadow: var(--cf-shadow-md); border: 1px solid var(--cf-border); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }

/* ───── 12. Forms ───── */
.form-control, .form-select {
	background: var(--cf-card);
	border: 1px solid var(--cf-border-strong);
	color: var(--cf-text);
	border-radius: var(--cf-radius-sm);
	padding: .65rem .85rem;
	font-size: .9375rem;
	transition: border-color .15s var(--cf-ease), box-shadow .15s var(--cf-ease);
}
.form-control::placeholder { color: var(--cf-text-muted); }
.form-control:focus, .form-select:focus {
	background: var(--cf-card);
	color: var(--cf-text);
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15);
	outline: none;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
	background: var(--cf-card-elev);
	border-color: var(--cf-border-strong);
}

.form-overlay { position: relative; }
.form-overlay .form-overlay-message {
	display: none;
	position: absolute; inset: 0;
	background: rgba(var(--bs-primary-rgb), .96);
	color: #fff;
	padding: 2rem;
	border-radius: var(--cf-radius);
	text-align: center;
	z-index: 10;
	align-items: center; justify-content: center; flex-direction: column;
	backdrop-filter: blur(8px);
}
.form-overlay.success .form-overlay-message,
.form-overlay.error .form-overlay-message { display: flex; }
.form-overlay.error .form-overlay-message { background: rgba(239, 68, 68, .96); }

.field-errors {
	background: rgba(239, 68, 68, .08);
	border: 1px solid rgba(239, 68, 68, .25);
	border-radius: var(--cf-radius-sm);
	padding: .75rem 1rem;
}
.field-errors p { color: var(--cf-danger); margin: 0; font-size: .875rem; }
.field-errors p + p { margin-top: .25rem; }

/* ───── 13. Galleries / Lightbox triggers ───── */
[data-lightbox] {
	display: block;
	overflow: hidden;
	border-radius: var(--cf-radius);
	cursor: zoom-in;
	border: 1px solid var(--cf-border);
	background: var(--cf-card);
	box-shadow: var(--cf-shadow-sm);
	transition: border-color .15s var(--cf-ease), box-shadow .15s var(--cf-ease);
	position: relative;
}
[data-lightbox]:hover {
	box-shadow: var(--cf-shadow-md);
	border-color: var(--cf-border-strong);
}
[data-lightbox] img {
	width: 100%; height: auto; display: block;
}

/* Lightbox modal */
#lightboxModal .modal-content {
	background: transparent;
	border: 0;
}
.lightbox-image {
	width: 100%; height: auto; display: block;
	max-height: 85vh; object-fit: contain;
	border-radius: var(--cf-radius);
	background: #000;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.lightbox-caption {
	color: #fff; text-align: center;
	padding: .75rem 0;
	font-size: .9375rem;
	font-weight: 500;
}
.lightbox-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(0, 0, 0, .5);
	color: #fff; border: 0;
	width: 48px; height: 48px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.5rem; cursor: pointer;
	transition: background .15s var(--cf-ease);
}
.lightbox-nav:hover { background: rgba(0, 0, 0, .85); }
.lightbox-prev { left: -60px; }
.lightbox-next { right: -60px; }
.lightbox-close { position: absolute; top: -3rem; right: 0; opacity: .9; }
.lightbox-close:hover { opacity: 1; }
@media (max-width: 991.98px) {
	.lightbox-prev { left: .5rem; }
	.lightbox-next { right: .5rem; }
	.lightbox-close { top: -2.5rem; right: .5rem; }
}

/* ───── 14. Cookies banner ───── */
.cc-container {
	display: none;
	position: fixed;
	left: 50%; bottom: 1.25rem;
	transform: translateX(-50%);
	width: calc(100% - 2rem);
	max-width: 640px;
	max-height: 85vh; overflow-y: auto;
	padding: 1.75rem;
	z-index: 1080;
	background: var(--cf-card);
	color: var(--cf-text-soft);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg);
	box-shadow: var(--cf-shadow-lg);
}
.cc-container.show { display: block; }
.cc-close {
	position: absolute;
	top: .85rem; right: 1rem;
	background: none; border: 0;
	font-size: 1.75rem; line-height: 1;
	color: var(--cf-text-muted);
	cursor: pointer;
	padding: 0; width: 32px; height: 32px;
	border-radius: 50%;
}
.cc-close:hover { color: var(--cf-text); background: var(--cf-section-alt); }
.cc-title {
	font-size: 1.25rem; font-weight: 700;
	color: var(--cf-text);
	margin-bottom: .85rem;
	letter-spacing: -0.01em;
}
.cc-text { font-size: .9375rem; color: var(--cf-text-soft); }
.cc-text p { margin-bottom: .75rem; }
.cc-text p:last-child { margin-bottom: 0; }
.cc-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.cc-buttons button {
	background: var(--cf-section-alt);
	color: var(--cf-text-soft);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-sm);
	padding: .55rem 1rem;
	cursor: pointer; font-weight: 600;
	font-size: .875rem;
	transition: all .15s var(--cf-ease);
}
.cc-buttons button:hover {
	background: var(--cf-card);
	color: var(--cf-text);
	border-color: var(--cf-border-strong);
	transform: translateY(-1px);
}
.cc-buttons button[data-cc-action="allowAll"] {
	background: var(--cf-primary-600);
	color: #fff;
	border-color: var(--cf-primary-600);
	box-shadow: 0 4px 14px -2px rgba(var(--bs-primary-rgb), .35);
}
.cc-buttons button[data-cc-action="allowAll"]:hover {
	background: var(--cf-primary-700);
	border-color: var(--cf-primary-700);
	color: #fff;
}
.cc-more { display: none; margin-top: 1rem; }
.cc-container.more .cc-basic { display: none; }
.cc-container.more .cc-more { display: block; }
.cc-options { margin-top: 1rem; }
.cc-option {
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	padding: .85rem 1rem;
	margin-bottom: .5rem;
	transition: border-color .15s var(--cf-ease);
}
.cc-option.cc-option-active { border-color: rgba(var(--bs-primary-rgb), .4); }
.cc-option-header { display: flex; align-items: center; cursor: pointer; gap: 1rem; }
.cc-option-title { flex: 1; font-weight: 600; color: var(--cf-text); font-size: 1rem; }
.cc-option-choose {
	position: relative; width: 42px; height: 22px;
	border-radius: var(--cf-radius-pill);
	background: var(--cf-text-muted);
	flex-shrink: 0;
	transition: background .2s var(--cf-ease);
}
.cc-option-choose:not(.cc-option-choose-disabled) { cursor: pointer; }
.cc-option-choose.cc-option-choose-disabled { background: var(--cf-success); opacity: .65; }
.cc-option-choose::after {
	content: "";
	display: block;
	width: 16px; height: 16px;
	border-radius: 50%; background: #fff;
	position: absolute; top: 3px; left: 3px;
	transition: left .2s var(--cf-ease);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.cc-option.cc-option-active .cc-option-choose { background: var(--cf-success); }
.cc-option.cc-option-active .cc-option-choose::after { left: 23px; }
.cc-option-text { display: none; margin-top: .5rem; color: var(--cf-text-muted); font-size: .85rem; }
.cc-option.expand .cc-option-text { display: block; }

/* ───── 15. Footer ───── */
#footer {
	background: var(--cf-footer);
	color: rgba(255, 255, 255, .7);
	padding: 0 0 1.5rem;
	margin-top: 4rem;
	position: relative;
}
#footer .footer-top { padding: 3.5rem 0 2rem; }
#footer h3 { color: #fff; font-size: 1.25rem; margin-bottom: 1rem; letter-spacing: -0.01em; }
#footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
#footer h4 a { color: #fff; }
#footer .footer-info p { line-height: 1.7; font-size: .9rem; margin-bottom: .35rem; color: rgba(255, 255, 255, .65); }
#footer .footer-info .contact-line { display: flex; align-items: center; gap: .65rem; }
#footer .footer-info .contact-line i { color: var(--bs-primary); width: 1.25rem; }
#footer .footer-links ul { list-style: none; padding: 0; margin: 0; }
#footer .footer-links ul li { padding: .25rem 0; font-size: .9rem; }
#footer a {
	color: rgba(255, 255, 255, .75);
	transition: color .15s var(--cf-ease);
}
#footer a:hover { color: #fff; text-decoration: none; }
#footer .social-links {
	margin-top: 1.25rem;
	display: flex; gap: .5rem;
}
#footer .social-links .social {
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .08);
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-size: 1rem;
	transition: all .15s var(--cf-ease);
}
#footer .social-links .social:hover {
	background: var(--cf-primary-600);
	border-color: var(--cf-primary-600);
	transform: translateY(-2px);
}
#footer .copyright {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 1.5rem; margin-top: 1.5rem;
	text-align: center;
	color: rgba(255, 255, 255, .55);
	font-size: .8125rem;
}
#footer .copyright a { color: rgba(255, 255, 255, .75); }
@media (max-width: 575.98px) {
	#footer .row [class*="col-"] { margin-bottom: 1.75rem; }
}

/* ───── 16. Back to top ───── */
.back-to-top {
	position: fixed;
	right: 1.5rem; bottom: 1.5rem;
	width: 44px; height: 44px;
	background: var(--cf-primary-600);
	color: #fff;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 25px -8px rgba(var(--bs-primary-rgb), .55);
	visibility: hidden; opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s var(--cf-ease), visibility .2s var(--cf-ease), transform .2s var(--cf-ease), background .15s var(--cf-ease);
	z-index: 1050;
	font-size: 1.1rem;
}
.back-to-top:hover {
	background: var(--cf-primary-700);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}
.back-to-top.show { visibility: visible; opacity: 1; transform: translateY(0); }

/* ───── 17. Utilities ───── */
.text-brand { color: var(--bs-primary) !important; }
.text-accent { color: var(--cf-accent) !important; }
.bg-brand-soft { background: rgba(var(--bs-primary-rgb), .08) !important; }
.icon-circle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: var(--cf-radius);
	background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .15), rgba(var(--cf-accent-rgb), .1));
	color: var(--bs-primary);
	font-size: 1.3rem;
	box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .12);
}

/* Tracy bar — keep light text for our dark theme */
[data-bs-theme="dark"] #tracy-debug, [data-bs-theme="dark"] #tracy-debug * { color: initial; }