/**
 * Premium UI component library for Gutenberg Custom HTML blocks.
 * Namespace: mlx-
 * Theme: Moonlanding
 */

.mlx-ui {
	--mlx-bg: #eff1f6;
	--mlx-bg-soft: rgba(243, 245, 251, 0.92);
	--mlx-surface: #ffffff;
	--mlx-surface-strong: #fbfbfe;
	--mlx-layer-1: rgba(255, 255, 255, 0.94);
	--mlx-layer-2: rgba(249, 250, 254, 0.94);
	--mlx-layer-3: rgba(244, 246, 251, 0.96);
	--mlx-border: rgba(132, 105, 236, 0.32);
	--mlx-border-soft: rgba(132, 105, 236, 0.2);
	--mlx-divider: rgba(40, 45, 66, 0.1);
	--mlx-text: var(--ml-ink, #0c0c20);
	--mlx-text-soft: var(--ml-text, #4d4d4d);
	--mlx-muted: rgba(95, 104, 130, 0.82);
	--mlx-accent: var(--ml-accent, #5423e7);
	--mlx-accent-strong: var(--ml-accent-strong, #4b1ed1);
	--mlx-accent-2: var(--ml-teal, #7eedff);
	--mlx-success: var(--ml-success, #3da108);
	--mlx-warn: var(--ml-gold, #d78942);
	--mlx-danger: #ff6f78;
	--mlx-radius-xs: var(--ml-radius-xs, 12px);
	--mlx-radius-sm: var(--ml-radius-sm, 16px);
	--mlx-radius-md: var(--ml-radius-md, 24px);
	--mlx-radius-lg: var(--ml-radius-lg, 32px);
	--mlx-radius-pill: var(--ml-radius-pill, 999px);
	--mlx-shadow-xs: 0 12px 24px rgba(18, 24, 38, 0.08);
	--mlx-shadow-sm: 0 18px 36px rgba(18, 24, 38, 0.11);
	--mlx-shadow-md: 0 26px 48px rgba(18, 24, 38, 0.14);
	--mlx-space-1: var(--ml-space-1, 0.5rem);
	--mlx-space-2: var(--ml-space-2, 0.75rem);
	--mlx-space-3: var(--ml-space-3, 1rem);
	--mlx-space-4: var(--ml-space-4, 1.25rem);
	--mlx-space-5: var(--ml-space-5, 1.5rem);
	--mlx-space-6: var(--ml-space-6, 2rem);
	--mlx-space-7: var(--ml-space-7, clamp(2rem, 3vw, 2.75rem));
	position: relative;
	overflow: hidden;
	display: grid;
	gap: clamp(var(--mlx-space-3), 1.9vw, var(--mlx-space-5));
	padding: clamp(var(--mlx-space-3), 2vw, var(--mlx-space-6));
	border: 1px solid var(--mlx-border);
	border-radius: calc(var(--mlx-radius-md) + 2px);
	background:
		radial-gradient(circle at 12% 8%, rgba(84, 35, 231, 0.12), transparent 42%),
		radial-gradient(circle at 88% 12%, rgba(126, 237, 255, 0.11), transparent 36%),
		linear-gradient(180deg, var(--mlx-surface-strong) 0%, var(--mlx-bg) 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.84) inset, var(--mlx-shadow-md);
	backdrop-filter: none;
	color: var(--mlx-text);
	font-family: "Onest", "Segoe UI", sans-serif;
	isolation: isolate;
}

.mlx-ui.mlx-ui--natural {
	gap: clamp(var(--mlx-space-2), 1.6vw, var(--mlx-space-4));
	padding: clamp(var(--mlx-space-3), 1.6vw, var(--mlx-space-5));
	border-color: rgba(132, 105, 236, 0.28);
	background:
		radial-gradient(circle at 10% 10%, rgba(84, 35, 231, 0.08), transparent 40%),
		linear-gradient(180deg, #ffffff 0%, #f1f3f9 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, var(--mlx-shadow-sm);
}

.mlx-ui.mlx-ui--minimal {
	gap: clamp(0.7rem, 1.2vw, 0.95rem);
	padding: clamp(0.8rem, 1.2vw, 1rem);
	border-color: rgba(132, 105, 236, 0.22);
	background:
		radial-gradient(circle at 12% 8%, rgba(84, 35, 231, 0.06), transparent 36%),
		linear-gradient(180deg, #fafbfe 0%, #f2f4fa 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset, var(--mlx-shadow-xs);
}

.mlx-ui::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--mlx-divider) 1px, transparent 1px) 0 0 / 100% 36px,
		linear-gradient(90deg, var(--mlx-divider) 1px, transparent 1px) 0 0 / 32px 100%;
	opacity: 0.42;
	pointer-events: none;
}

.mlx-ui.mlx-ui--natural::before {
	opacity: 0.32;
}

.mlx-ui.mlx-ui--minimal::before {
	opacity: 0.24;
}

.mlx-ui::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 0%, rgba(84, 35, 231, 0.09), transparent 62%);
	opacity: 0.7;
	pointer-events: none;
}

.mlx-ui.mlx-ui--natural::after {
	opacity: 0.52;
}

.mlx-ui.mlx-ui--minimal::after {
	opacity: 0.36;
}

.mlx-ui * {
	box-sizing: border-box;
}

.mlx-ui p,
.mlx-ui ul,
.mlx-ui ol {
	margin: 0;
	padding: 0;
}

.mlx-ui ul,
.mlx-ui ol {
	list-style: none;
}

.mlx-fit-hero {
	width: min(42rem, calc(100vw - 1.5rem));
	margin-inline: auto;
}

.mlx-fit-section {
	width: min(var(--ml-shell, 1280px), calc(100vw - 1.5rem));
	margin-inline: auto;
}

.mlx-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	flex-wrap: wrap;
}

.mlx-head__title {
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.024em;
	color: var(--mlx-text);
}

.mlx-head__meta {
	color: var(--mlx-muted);
	font-size: 0.74rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.mlx-badge,
.mlx-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.34rem 0.64rem;
	border-radius: var(--mlx-radius-pill);
	border: 1px solid rgba(132, 105, 236, 0.24);
	background: rgba(255, 255, 255, 0.82);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mlx-text-soft);
}

.mlx-pill.is-accent {
	border-color: rgba(84, 35, 231, 0.4);
	background: rgba(84, 35, 231, 0.16);
	color: var(--mlx-accent-strong);
}

.mlx-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--mlx-radius-pill);
	background: currentColor;
	display: inline-block;
}

.mlx-dot.is-success {
	color: var(--mlx-success);
}

.mlx-dot.is-warn {
	color: var(--mlx-warn);
}

.mlx-dot.is-danger {
	color: var(--mlx-danger);
}

.mlx-dot.is-accent {
	color: var(--mlx-accent);
}

.mlx-surface {
	background: linear-gradient(180deg, var(--mlx-layer-1), var(--mlx-layer-3));
	border: 1px solid var(--mlx-border-soft);
	border-radius: var(--mlx-radius-sm);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset, var(--mlx-shadow-xs);
	padding: clamp(0.78rem, 1.5vw, 1.08rem);
}

.mlx-ui.mlx-ui--minimal .mlx-surface {
	padding: 0.66rem 0.72rem;
	border-radius: calc(var(--mlx-radius-xs) + 2px);
	border-color: rgba(132, 105, 236, 0.18);
	background: linear-gradient(180deg, #ffffff 0%, #f5f7fd 100%);
	box-shadow: none;
}

.mlx-subtle {
	color: var(--mlx-text-soft);
	font-size: 0.84rem;
	line-height: 1.55;
}

.mlx-strong {
	color: var(--mlx-text);
	font-weight: 600;
}

.mlx-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.78rem;
	color: rgba(72, 80, 107, 0.82);
}

.mlx-kpis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.65rem;
}

.mlx-kpi {
	padding: 0.62rem 0.7rem;
	border: 1px solid var(--mlx-border-soft);
	border-radius: calc(var(--mlx-radius-xs) + 2px);
	background: rgba(255, 255, 255, 0.88);
}

.mlx-kpi__label {
	font-size: 0.69rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mlx-muted);
}

.mlx-kpi__value {
	margin-top: 0.22rem;
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--mlx-text);
}

.mlx-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
}

.mlx-line {
	height: 0.45rem;
	border-radius: var(--mlx-radius-pill);
	background: rgba(135, 148, 186, 0.22);
	overflow: hidden;
}

.mlx-line > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(126, 237, 255, 0.72), rgba(84, 35, 231, 0.88));
}

.mlx-fill-20 {
	width: 20%;
}

.mlx-fill-30 {
	width: 30%;
}

.mlx-fill-35 {
	width: 35%;
}

.mlx-fill-40 {
	width: 40%;
}

.mlx-fill-45 {
	width: 45%;
}

.mlx-fill-50 {
	width: 50%;
}

.mlx-fill-55 {
	width: 55%;
}

.mlx-fill-60 {
	width: 60%;
}

.mlx-fill-65 {
	width: 65%;
}

.mlx-fill-70 {
	width: 70%;
}

.mlx-fill-75 {
	width: 75%;
}

.mlx-fill-80 {
	width: 80%;
}

.mlx-fill-85 {
	width: 85%;
}

.mlx-fill-90 {
	width: 90%;
}

.mlx-fill-95 {
	width: 95%;
}

.mlx-h-20 {
	height: 20%;
}

.mlx-h-30 {
	height: 30%;
}

.mlx-h-40 {
	height: 40%;
}

.mlx-h-50 {
	height: 50%;
}

.mlx-h-60 {
	height: 60%;
}

.mlx-h-70 {
	height: 70%;
}

.mlx-h-80 {
	height: 80%;
}

.mlx-h-90 {
	height: 90%;
}

.mlx-ui .is-float {
	animation: mlx-float 6s ease-in-out infinite;
}

.mlx-ui .is-pulse {
	animation: mlx-pulse 2.7s ease-in-out infinite;
}

.mlx-ui .is-scan {
	position: relative;
	overflow: hidden;
}

.mlx-ui .is-scan::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, rgba(84, 35, 231, 0.08), transparent);
	transform: translateY(-120%);
	animation: mlx-scan 7s linear infinite;
}

/* Block 01 - Tworzenie stron - Hero-side launch panel */

.mlx-web-launch__layout {
	display: grid;
	grid-template-columns: 1.05fr 1.4fr 1fr;
	gap: 0.7rem;
}

.mlx-web-launch__menu li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.56rem;
	border-radius: var(--mlx-radius-xs);
	color: var(--mlx-text-soft);
	font-size: 0.78rem;
}

.mlx-web-launch__menu li + li {
	margin-top: 0.32rem;
}

.mlx-web-launch__menu li.is-active {
	background: rgba(84, 35, 231, 0.1);
	border: 1px solid rgba(84, 35, 231, 0.28);
	color: var(--mlx-text);
}

.mlx-web-launch__canvas {
	display: grid;
	gap: 0.55rem;
}

.mlx-web-launch__frame {
	padding: 0.62rem;
	border-radius: var(--mlx-radius-xs);
	background: linear-gradient(180deg, var(--mlx-layer-1), var(--mlx-layer-3));
	border: 1px solid var(--mlx-border-soft);
}

.mlx-web-launch__frame-title {
	font-size: 0.74rem;
	color: var(--mlx-muted);
	margin-bottom: 0.45rem;
}

.mlx-web-launch__blocks {
	display: grid;
	gap: 0.42rem;
}

.mlx-web-launch__bar {
	height: 0.48rem;
	border-radius: var(--mlx-radius-pill);
	background: rgba(133, 151, 196, 0.24);
}

.mlx-web-launch__bar:nth-child(1) {
	width: 90%;
}

.mlx-web-launch__bar:nth-child(2) {
	width: 72%;
}

.mlx-web-launch__bar:nth-child(3) {
	width: 54%;
}

.mlx-web-launch__status li + li {
	margin-top: 0.6rem;
}

.mlx-web-launch__status strong {
	display: block;
	font-size: 0.77rem;
	color: var(--mlx-text-soft);
}

.mlx-web-launch__status span {
	display: block;
	margin-top: 0.16rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mlx-text);
}

/* Block 02 - Tworzenie stron - Compare panel */

.mlx-web-compare__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem;
}

.mlx-web-compare__pane {
	position: relative;
	display: grid;
	gap: 0.55rem;
}

.mlx-web-compare__pane::before {
	content: "";
	position: absolute;
	inset: auto 0 -0.35rem 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(84, 35, 231, 0.34), transparent);
}

.mlx-web-compare__label {
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mlx-muted);
}

.mlx-web-compare__pane.is-after {
	border-color: rgba(84, 35, 231, 0.26);
}

.mlx-web-compare__item {
	display: grid;
	gap: 0.35rem;
}

.mlx-web-compare__item p {
	font-size: 0.78rem;
	color: var(--mlx-text-soft);
}

.mlx-web-compare__delta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.34rem 0.52rem;
	border-radius: 999px;
	border: 1px solid rgba(61, 161, 8, 0.28);
	background: rgba(61, 161, 8, 0.12);
	color: #2f8206;
	font-size: 0.69rem;
	font-weight: 600;
	width: fit-content;
}

/* Block 03 - Tworzenie stron - Readiness board */

.mlx-web-readiness__top {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0.7rem;
}

.mlx-web-readiness__matrix {
	display: grid;
	gap: 0.45rem;
}

.mlx-web-readiness__matrix li {
	display: grid;
	grid-template-columns: 6.5rem 1fr auto;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.78rem;
	color: var(--mlx-text-soft);
}

.mlx-web-readiness__matrix em {
	font-style: normal;
	color: var(--mlx-text);
}

.mlx-web-readiness__flow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
}

.mlx-web-readiness__step {
	padding: 0.52rem 0.58rem;
	border-radius: var(--mlx-radius-xs);
	border: 1px solid var(--mlx-border-soft);
	background: var(--mlx-layer-2);
	font-size: 0.74rem;
	color: var(--mlx-text-soft);
}

.mlx-web-readiness__step strong {
	display: block;
	color: var(--mlx-text);
	font-size: 0.79rem;
	margin-top: 0.2rem;
}

/* Block 04 - SEO insights panel */

.mlx-seo-insights__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0.7rem;
}

.mlx-seo-insights__bars {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 0.36rem;
	align-items: end;
	height: 7.2rem;
}

.mlx-seo-insights__bars span {
	display: block;
	width: 100%;
	border-radius: var(--mlx-radius-pill);
	background: linear-gradient(180deg, rgba(126, 237, 255, 0.86), rgba(84, 35, 231, 0.72));
	box-shadow: 0 0 0 1px rgba(84, 35, 231, 0.18) inset;
}

.mlx-seo-insights__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.42rem 0;
	font-size: 0.79rem;
	color: var(--mlx-text-soft);
}

.mlx-seo-insights__list li + li {
	border-top: 1px dashed var(--mlx-divider);
}

.mlx-seo-insights__list strong {
	color: var(--mlx-text);
}

/* Block 05 - SEO audit workflow */

.mlx-seo-audit__flow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
}

.mlx-seo-audit__step {
	display: grid;
	gap: 0.4rem;
	padding: 0.55rem;
	border-radius: var(--mlx-radius-xs);
	border: 1px solid var(--mlx-border-soft);
	background: var(--mlx-layer-2);
}

.mlx-seo-audit__step code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.69rem;
	color: rgba(72, 80, 107, 0.88);
}

.mlx-seo-audit__checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.mlx-seo-audit__checks li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.55rem;
	padding: 0.5rem 0.6rem;
	border-radius: var(--mlx-radius-xs);
	border: 1px solid var(--mlx-border-soft);
	background: var(--mlx-layer-2);
	font-size: 0.78rem;
	color: var(--mlx-text-soft);
}

.mlx-seo-audit__checks strong {
	color: var(--mlx-text);
	font-weight: 600;
}

/* Block 06 - SEO SERP console */

.mlx-seo-serp__grid {
	display: grid;
	grid-template-columns: 1.35fr 0.9fr;
	gap: 0.7rem;
}

.mlx-seo-serp__result + .mlx-seo-serp__result {
	margin-top: 0.48rem;
}

.mlx-seo-serp__result {
	padding: 0.58rem;
	border-radius: var(--mlx-radius-xs);
	border: 1px solid var(--mlx-border-soft);
	background: linear-gradient(180deg, var(--mlx-layer-1), var(--mlx-layer-3));
}

.mlx-seo-serp__url {
	font-size: 0.72rem;
	color: #248a64;
}

.mlx-seo-serp__title {
	margin-top: 0.2rem;
	font-size: 0.85rem;
	color: var(--mlx-text);
}

.mlx-seo-serp__snippet {
	margin-top: 0.16rem;
	font-size: 0.77rem;
	color: var(--mlx-text-soft);
	line-height: 1.42;
}

.mlx-seo-serp__positions li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.38rem 0;
	font-size: 0.77rem;
	color: var(--mlx-text-soft);
}

.mlx-seo-serp__positions li + li {
	border-top: 1px dashed var(--mlx-divider);
}

.mlx-seo-serp__heat {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.25rem;
	margin-top: 0.45rem;
}

.mlx-seo-serp__heat span {
	height: 0.55rem;
	border-radius: var(--mlx-radius-pill);
	background: rgba(130, 146, 187, 0.28);
}

.mlx-seo-serp__heat span.is-hot {
	background: linear-gradient(90deg, rgba(126, 237, 255, 0.88), rgba(84, 35, 231, 0.9));
}

/* Block 07 - AI orchestration flow */

.mlx-ai-orchestration__flow {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.45rem;
	position: relative;
}

.mlx-ai-orchestration__node {
	display: grid;
	gap: 0.32rem;
	padding: 0.54rem;
	border-radius: var(--mlx-radius-xs);
	border: 1px solid var(--mlx-border-soft);
	background: linear-gradient(180deg, var(--mlx-layer-1), var(--mlx-layer-2));
	font-size: 0.73rem;
	color: var(--mlx-text-soft);
}

.mlx-ai-orchestration__node strong {
	color: var(--mlx-text);
	font-size: 0.78rem;
}

.mlx-ai-orchestration__queue li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.55rem;
	padding: 0.38rem 0;
	font-size: 0.77rem;
	color: var(--mlx-text-soft);
}

.mlx-ai-orchestration__queue li + li {
	border-top: 1px dashed var(--mlx-divider);
}

/* Block 08 - AI operations dashboard */

.mlx-ai-ops__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 0.7rem;
}

.mlx-ai-ops__chat {
	display: grid;
	gap: 0.5rem;
}

.mlx-ai-ops__bubble {
	max-width: 92%;
	padding: 0.55rem 0.65rem;
	border-radius: var(--mlx-radius-xs);
	font-size: 0.77rem;
	line-height: 1.46;
	border: 1px solid var(--mlx-border-soft);
	color: var(--mlx-text-soft);
	background: var(--mlx-layer-2);
}

.mlx-ai-ops__bubble.is-agent {
	margin-left: auto;
	border-color: rgba(84, 35, 231, 0.28);
	background: rgba(84, 35, 231, 0.1);
	color: var(--mlx-text);
}

.mlx-ai-ops__integrations li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.58rem;
	padding: 0.43rem 0;
	font-size: 0.77rem;
	color: var(--mlx-text-soft);
}

.mlx-ai-ops__integrations li + li {
	border-top: 1px dashed var(--mlx-divider);
}

/* Block 09 - AI intelligence and decisions */

.mlx-ai-intelligence__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem;
}

.mlx-ai-intelligence__scenario li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.77rem;
	color: var(--mlx-text-soft);
	padding: 0.36rem 0;
}

.mlx-ai-intelligence__scenario li + li {
	border-top: 1px dashed var(--mlx-divider);
}

.mlx-ai-intelligence__confidence {
	display: grid;
	gap: 0.45rem;
}

.mlx-ai-intelligence__confidence li {
	display: grid;
	gap: 0.28rem;
}

.mlx-ai-intelligence__confidence p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--mlx-text-soft);
}

.mlx-ai-intelligence__recommend {
	display: grid;
	gap: 0.45rem;
}

.mlx-ai-intelligence__recommend li {
	padding: 0.47rem 0.54rem;
	border-radius: var(--mlx-radius-xs);
	border: 1px solid var(--mlx-border-soft);
	background: var(--mlx-layer-2);
	font-size: 0.76rem;
	color: var(--mlx-text-soft);
}

/* Layout helpers used by multiple blocks */

.mlx-stack {
	display: grid;
	gap: 0.7rem;
}

.mlx-mini {
	font-size: 0.72rem;
	color: var(--mlx-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mlx-ui.mlx-ui--minimal .mlx-mini {
	font-size: 0.64rem;
	letter-spacing: 0.07em;
}

.mlx-ui.mlx-ui--minimal .mlx-head__title {
	font-size: 0.86rem;
	font-weight: 600;
}

.mlx-ui.mlx-ui--minimal .mlx-badge,
.mlx-ui.mlx-ui--minimal .mlx-pill {
	padding: 0.24rem 0.46rem;
	font-size: 0.62rem;
}

.mlx-ui.mlx-ui--minimal .mlx-kpi {
	padding: 0.5rem;
	border-radius: calc(var(--mlx-radius-xs) - 1px);
}

.mlx-ui.mlx-ui--minimal .mlx-kpi__label {
	font-size: 0.62rem;
}

.mlx-ui.mlx-ui--minimal .mlx-kpi__value {
	font-size: 0.8rem;
}

.mlx-ui.mlx-ui--minimal .mlx-line {
	height: 0.36rem;
}

.mlx-ui.mlx-ui--minimal .mlx-subtle,
.mlx-ui.mlx-ui--minimal .mlx-mono,
.mlx-ui.mlx-ui--minimal .mlx-web-launch__menu li,
.mlx-ui.mlx-ui--minimal .mlx-web-readiness__matrix li,
.mlx-ui.mlx-ui--minimal .mlx-seo-insights__list li,
.mlx-ui.mlx-ui--minimal .mlx-seo-serp__positions li,
.mlx-ui.mlx-ui--minimal .mlx-ai-orchestration__queue li,
.mlx-ui.mlx-ui--minimal .mlx-ai-intelligence__scenario li,
.mlx-ui.mlx-ui--minimal .mlx-ai-ops__bubble {
	font-size: 0.72rem;
}

.mlx-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--mlx-divider), transparent);
}

/* Responsive */

@media (max-width: 1024px) {
	.mlx-web-launch__layout,
	.mlx-web-readiness__top,
	.mlx-seo-insights__grid,
	.mlx-seo-serp__grid,
	.mlx-ai-ops__grid,
	.mlx-ai-intelligence__grid {
		grid-template-columns: 1fr;
	}

	.mlx-web-readiness__flow,
	.mlx-seo-audit__flow,
	.mlx-ai-orchestration__flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.mlx-ui {
		padding: 1rem;
		border-radius: calc(var(--mlx-radius-sm) + 2px);
	}

	.mlx-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mlx-web-compare__grid,
	.mlx-seo-audit__checks {
		grid-template-columns: 1fr;
	}

	.mlx-web-readiness__flow,
	.mlx-seo-audit__flow,
	.mlx-ai-orchestration__flow {
		grid-template-columns: 1fr;
	}

	.mlx-web-readiness__matrix li {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlx-ui::after,
	.mlx-ui .is-float,
	.mlx-ui .is-pulse,
	.mlx-ui .is-scan::after {
		animation: none !important;
	}
}

@keyframes mlx-shimmer {
	0% {
		transform: translateX(-115%);
	}
	62%,
	100% {
		transform: translateX(115%);
	}
}

@keyframes mlx-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

@keyframes mlx-pulse {
	0%,
	100% {
		opacity: 0.88;
	}
	50% {
		opacity: 1;
	}
}

@keyframes mlx-scan {
	0% {
		transform: translateY(-120%);
	}
	40%,
	100% {
		transform: translateY(120%);
	}
}