.pixelz-site-auditor {
	width: 100%;
	max-width: 960px;
}

.pixelz-site-auditor .psa-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

.pixelz-site-auditor .psa-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
}

.pixelz-site-auditor .psa-input {
	flex: 1 1 240px;
	min-width: 200px;
	height: 52px;
	padding: 0 18px;
	border: 1px solid #cfd4dc;
	border-radius: 10px;
	background: #fff;
	color: #1f2937;
	font-size: 16px;
	line-height: 1.2;
	box-sizing: border-box;
}

.pixelz-site-auditor .psa-input::placeholder {
	color: #9ca3af;
}

.pixelz-site-auditor .psa-input:focus {
	outline: none;
	border-color: #086BD7;
	box-shadow: 0 0 0 3px rgba(8, 107, 215, 0.15);
}

.pixelz-site-auditor .psa-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 64px;
	padding: 18px 28px;
	border: 1px solid #086BD7;
	border-radius: 999px;
	background: #086BD7;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
	box-sizing: border-box;
}

.pixelz-site-auditor .psa-submit.px-viscous-pill,
.pixelz-site-auditor button.psa-submit.px-viscous-pill {
	position: relative !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	z-index: 2;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
	line-height: normal;
	touch-action: manipulation;
	transition: none !important;
	min-width: 0 !important;
	height: 64px !important;
	min-height: 64px !important;
	color: transparent !important;
	text-transform: none;
}

.pixelz-site-auditor .psa-submit.px-viscous-pill .px-viscous-canvas {
	display: block !important;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	touch-action: none;
	border-radius: 999px;
	pointer-events: none;
}

.pixelz-site-auditor .psa-submit.px-viscous-pill .psa-submit__label,
.pixelz-site-auditor .psa-submit.px-viscous-pill .px-viscous-pill__text,
.pixelz-site-auditor .psa-submit.px-viscous-pill .elementor-button-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

.pixelz-site-auditor .psa-submit.px-viscous-pill:hover,
.pixelz-site-auditor .psa-submit.px-viscous-pill:focus,
.pixelz-site-auditor .psa-submit.px-viscous-pill:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	color: transparent !important;
}

.pixelz-site-auditor .psa-submit.px-viscous-pill:focus-visible {
	outline: 3px solid var(--px-viscous-focus, #086BD7);
	outline-offset: 2px;
}

.pixelz-site-auditor .psa-submit:hover {
	background: #0663c9;
}

.pixelz-site-auditor .psa-submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

.pixelz-site-auditor .psa-submit.px-viscous-pill:disabled {
	opacity: 0.75;
}

.pixelz-site-auditor .psa-message {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #374151;
}

.pixelz-site-auditor .psa-message.is-error {
	color: #b42318;
}

.pixelz-site-auditor .psa-message.is-success {
	color: #027a48;
}

/* Live gather progress */
.pixelz-site-auditor .psa-progress {
	width: 100%;
	margin-top: 22px;
	padding: 18px 18px 16px;
	border: 1px solid #d7dee7;
	border-radius: 14px;
	background: linear-gradient(180deg, #f7fafc 0%, #ffffff 55%);
	box-sizing: border-box;
	animation: psa-rise 0.35s ease;
}

.pixelz-site-auditor .psa-progress__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.pixelz-site-auditor .psa-progress__title {
	margin: 0;
	color: #002a45;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.pixelz-site-auditor .psa-progress__pct {
	margin: 0;
	color: #002a45;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.pixelz-site-auditor .psa-progress__bar {
	position: relative;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #e5ebf1;
}

.pixelz-site-auditor .psa-progress__bar > span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #002a45 0%, #0b5f8a 100%);
	transition: width 0.45s ease;
}

.pixelz-site-auditor .psa-progress.is-done .psa-progress__title {
	color: #027a48;
}

/* Interactive results */
.pixelz-site-auditor .psa-results {
	width: 100%;
	margin-top: 28px;
}

.pixelz-site-auditor .psa-panel {
	background: linear-gradient(180deg, #f7fafc 0%, #ffffff 40%);
	border: 1px solid #e5eaf0;
	border-radius: 18px;
	padding: 28px 24px;
	animation: psa-rise 0.45s ease;
}

@keyframes psa-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pixelz-site-auditor .psa-panel__head h3 {
	margin: 0 0 6px;
	color: #002a45;
	font-size: 1.45rem;
}

.pixelz-site-auditor .psa-panel__head p {
	margin: 0 0 20px;
	color: #6b7280;
	word-break: break-all;
}

.pixelz-site-auditor .psa-gauges {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: center;
	margin-bottom: 24px;
}

.pixelz-site-auditor .psa-ring {
	position: relative;
	width: 150px;
	height: 150px;
}

.pixelz-site-auditor .psa-ring svg {
	width: 150px;
	height: 150px;
	transform: rotate(-90deg);
}

.pixelz-site-auditor .psa-ring__track,
.pixelz-site-auditor .psa-ring__value {
	fill: none;
	stroke-width: 12;
}

.pixelz-site-auditor .psa-ring__track {
	stroke: #e5eaf0;
}

.pixelz-site-auditor .psa-ring__value {
	stroke-linecap: round;
	transition: stroke-dashoffset 1s ease;
}

.pixelz-site-auditor .psa-ring--good .psa-ring__value {
	stroke: #229d60;
}
.pixelz-site-auditor .psa-ring--ok .psa-ring__value {
	stroke: #d69e1e;
}
.pixelz-site-auditor .psa-ring--bad .psa-ring__value {
	stroke: #c83c32;
}

.pixelz-site-auditor .psa-ring__label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.pixelz-site-auditor .psa-ring__label strong {
	font-size: 2rem;
	line-height: 1;
	color: #002a45;
}

.pixelz-site-auditor .psa-ring__label span {
	font-size: 0.8rem;
	color: #9ca3af;
}

.pixelz-site-auditor .psa-ring__label em {
	margin-top: 4px;
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 700;
	color: #4b5563;
}

.pixelz-site-auditor .psa-ring--muted {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	border-radius: 50%;
}

.pixelz-site-auditor .psa-meters {
	display: grid;
	gap: 14px;
	margin-bottom: 24px;
}

.pixelz-site-auditor .psa-meter__top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 0.92rem;
	color: #374151;
}

.pixelz-site-auditor .psa-meter__track {
	height: 12px;
	background: #e8eef3;
	border-radius: 999px;
	overflow: hidden;
}

.pixelz-site-auditor .psa-meter__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	transition: width 1s ease;
}

.pixelz-site-auditor .psa-meter__fill--good {
	background: #229d60;
}
.pixelz-site-auditor .psa-meter__fill--ok {
	background: #d69e1e;
}
.pixelz-site-auditor .psa-meter__fill--bad {
	background: #c83c32;
}

.pixelz-site-auditor .psa-split {
	display: flex;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: #e8eef3;
}

.pixelz-site-auditor .psa-split__pass {
	background: #229d60;
	min-width: 0;
}
.pixelz-site-auditor .psa-split__fail {
	background: #c83c32;
	min-width: 0;
}

.pixelz-site-auditor .psa-columns {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 20px;
}

.pixelz-site-auditor .psa-columns h4 {
	margin: 0 0 10px;
	color: #002a45;
}

.pixelz-site-auditor .psa-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	max-height: 320px;
	overflow: auto;
}

.pixelz-site-auditor .psa-checks li {
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #f8fafc;
}

.pixelz-site-auditor .psa-checks li.is-pass {
	background: #eefbf4;
}
.pixelz-site-auditor .psa-checks li.is-fail {
	background: #fff1f0;
}

.pixelz-site-auditor .psa-checks strong {
	display: block;
	color: #111827;
	font-size: 0.92rem;
}

.pixelz-site-auditor .psa-checks p {
	margin: 2px 0 0;
	color: #6b7280;
	font-size: 0.82rem;
}

.pixelz-site-auditor .psa-check-badge {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.pixelz-site-auditor .psa-checks .is-pass .psa-check-badge {
	background: #229d60;
	color: #fff;
}
.pixelz-site-auditor .psa-checks .is-fail .psa-check-badge {
	background: #c83c32;
	color: #fff;
}

.pixelz-site-auditor .psa-todos {
	margin: 0;
	padding-left: 18px;
	color: #374151;
}

.pixelz-site-auditor .psa-todos li {
	margin-bottom: 8px;
}

.pixelz-site-auditor .psa-cta {
	margin-top: 22px;
	padding: 18px;
	border-radius: 14px;
	background: #002a45;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pixelz-site-auditor .psa-cta p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.pixelz-site-auditor .psa-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border-radius: 999px;
	background: #fff;
	color: #002a45;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease;
}

.pixelz-site-auditor .psa-cta__btn:hover {
	transform: translateY(-1px);
	color: #002a45;
}

@media screen and (max-width: 700px) {
	.pixelz-site-auditor .psa-fields {
		flex-direction: column;
	}

	.pixelz-site-auditor .psa-input {
		width: 100%;
		min-width: 0;
	}

	.pixelz-site-auditor .psa-submit,
	.pixelz-site-auditor .psa-submit.px-viscous-pill {
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
	}

	.pixelz-site-auditor .psa-columns {
		grid-template-columns: 1fr;
	}
}