/* =========================================================================
 * Insights from Google PageSpeed – admin app
 * ====================================================================== */

.gpi-app {
	--gpi-accent: var(--wp-admin-theme-color, #3858e9);
	--gpi-accent-soft: color-mix(in srgb, var(--gpi-accent) 10%, #fff);
	--gpi-bg: #f6f7f9;
	--gpi-surface: #fff;
	--gpi-border: #e3e5e8;
	--gpi-border-strong: #cfd3d8;
	--gpi-text: #1e1e1e;
	--gpi-text-2: #50575e;
	--gpi-text-3: #757c84;
	--gpi-good: #0a7c42;
	--gpi-good-bg: #e7f6ed;
	--gpi-average: #b45309;
	--gpi-average-bg: #fdf3e2;
	--gpi-poor: #c62828;
	--gpi-poor-bg: #fdecec;
	--gpi-none: #8c8f94;
	--gpi-c-performance: #3858e9;
	--gpi-c-accessibility: #0e9f6e;
	--gpi-c-best-practices: #9b51e0;
	--gpi-c-seo: #f0870a;
	--gpi-c-agentic: #e2457a;
	--gpi-radius: 12px;
	--gpi-radius-sm: 8px;
	--gpi-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
	--gpi-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
	--gpi-gap: 20px;

	margin: 0;
	padding: 0 0 96px;
	color: var(--gpi-text);
	font-size: 13px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;

	* {
		box-sizing: border-box;
	}

	a {
		color: var(--gpi-accent);
		text-decoration: none;
		transition: color 0.15s;

		&:hover,
		&:focus {
			text-decoration: none;
		}
	}

	/* Show the focus ring for keyboard focus only, not after a click. */
	a:not(.components-button):focus {
		box-shadow: none;
		outline: none;
	}

	a:not(.components-button):focus-visible {
		border-radius: 2px;
		box-shadow: 0 0 0 2px var(--gpi-accent);
		outline: 2px solid transparent;
	}

	/* Underline plain text links only, not buttons or icon links. */
	a:not([class]):hover {
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	a:not(.components-button):hover {
		color: var(--wp-admin-theme-color-darker-10, #2145e6);
	}

	.components-button.is-link {
		text-decoration: none;

		&:hover:not(:disabled) {
			color: var(--wp-admin-theme-color-darker-10, #2145e6);
		}
	}

	code {
		background: #f2f3f5;
		border-radius: 4px;
		font-size: 12px;
		padding: 1px 5px;
	}
}

#wpbody-content:has(#gpi-app) {
	padding-bottom: 0;
}

.wrap.gpi-wrap {
	margin: 0;
}

.tools_page_google-pagespeed-insights {
	background: #f6f7f9;

	#wpcontent {
		padding-left: 0;
	}

	#wpfooter {
		display: none;
	}
}

@media (max-width: 782px) {

	.gpi-app {
		margin: 0;
		--gpi-gap: 14px;
	}
}

/* -------------------------------------------------------------------------
 * Header and navigation
 * ---------------------------------------------------------------------- */

.gpi-header {
	background: var(--gpi-surface);
	border-bottom: 1px solid var(--gpi-border);
	margin: 0;
	padding: 0 32px;
	position: sticky;
	top: 32px;
	z-index: 20;

	@media (max-width: 782px) {
		margin: 0;
		padding: 0 16px;
		position: static;
	}
}

.gpi-header__top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	min-height: 72px;
	padding: 12px 0;
}

.gpi-brand {
	align-items: center;
	display: flex;
	gap: 12px;
}

.gpi-brand__logo {
	height: 36px;
	width: auto;
}

.gpi-brand__name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.gpi-brand__meta {
	color: var(--gpi-text-3);
	font-size: 12px;
}

.gpi-header__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.gpi-app .gpi-nav {
	display: flex;
	gap: 4px;
	margin-bottom: -1px;
	overflow-x: auto;
	scrollbar-width: none;

	a {
		border-bottom: 2px solid transparent;
		color: var(--gpi-text-2);
		font-size: 13px;
		font-weight: 500;
		padding: 12px 14px;
		text-decoration: none;
		white-space: nowrap;

		&:hover {
			color: var(--gpi-text);
			text-decoration: none;
		}

		&:focus-visible {
			box-shadow: none;
			outline: 2px solid var(--gpi-accent);
			outline-offset: -2px;
		}

		&.is-active {
			border-bottom-color: var(--gpi-accent);
			color: var(--gpi-text);
		}
	}
}

/* Segmented control (desktop/mobile, small tabs) */
.gpi-segmented {
	background: #f0f1f3;
	border-radius: 10px;
	display: inline-flex;
	gap: 2px;
	padding: 3px;

	button {
		align-items: center;
		background: transparent;
		border: 0;
		border-radius: 8px;
		color: var(--gpi-text-2);
		cursor: pointer;
		display: inline-flex;
		font-size: 13px;
		font-weight: 500;
		gap: 6px;
		padding: 6px 14px;
		transition: background 0.15s, color 0.15s, box-shadow 0.15s;

		.dashicons {
			font-size: 16px;
			height: 16px;
			width: 16px;
		}

		&:hover {
			color: var(--gpi-text);
		}

		&:focus-visible {
			outline: 2px solid var(--gpi-accent);
		}

		&.is-active {
			background: var(--gpi-surface);
			box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
			color: var(--gpi-text);
		}
	}
}

.gpi-segmented--small button {
	font-size: 12px;
	padding: 4px 10px;
}

/* Scan control */
.gpi-scan {
	align-items: center;
	display: flex;
	gap: 14px;

	.components-checkbox-control__label {
		color: var(--gpi-text-2);
		font-size: 13px;
	}
}

.gpi-scan--running {
	background: var(--gpi-accent-soft);
	border-radius: 10px;
	padding: 6px 6px 6px 14px;
}

.gpi-scan__progress {
	min-width: 180px;
}

.gpi-scan__label {
	align-items: center;
	color: var(--gpi-text);
	display: flex;
	font-size: 12px;
	font-weight: 500;
	gap: 8px;
	margin-bottom: 6px;
}

.gpi-pulse {
	animation: gpi-pulse 1.4s ease-in-out infinite;
	background: var(--gpi-accent);
	border-radius: 50%;
	height: 8px;
	width: 8px;
}

@keyframes gpi-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--gpi-accent) 45%, transparent);
	}

	50% {
		box-shadow: 0 0 0 6px transparent;
	}
}

.gpi-progress {
	background: rgba(0, 0, 0, 0.08);
	border-radius: 99px;
	height: 6px;
	overflow: hidden;
}

.gpi-progress__bar {
	background: var(--gpi-accent);
	border-radius: 99px;
	height: 100%;
	transition: width 0.6s ease;
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */

.gpi-main {
	margin: 0 auto;
	max-width: 1424px;
	padding: 28px 32px 0;

	@media (max-width: 782px) {
		padding: 20px 16px 0;
	}
}

.gpi-notices {
	margin: 0 auto;
	max-width: 1424px;
	padding: 20px 32px 0;

	&:empty {
		display: none;
	}

	.components-notice {
		background: var(--gpi-surface);
		border-radius: var(--gpi-radius-sm);
		box-shadow: var(--gpi-shadow);
		margin: 0 0 10px;
	}

	@media (max-width: 782px) {
		padding: 16px 16px 0;
	}
}

.gpi-pagehead {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 24px;
}

.gpi-pagehead__title {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
}

.gpi-pagehead__description {
	align-items: center;
	color: var(--gpi-text-2);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 6px;
	margin: 6px 0 0;
}

.gpi-pagehead__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	.components-base-control {
		min-width: 200px;
	}
}

.gpi-back {
	align-items: center;
	color: var(--gpi-text-2) !important;
	transition: color 0.15s;

	&:hover {
		color: var(--gpi-accent) !important;
	}

	display: inline-flex;
	font-size: 13px;
	gap: 2px;
	margin-bottom: 8px;

	.dashicons {
		font-size: 16px;
		height: 16px;
		width: 16px;
	}
}

.gpi-sep {
	color: var(--gpi-border-strong);
}

.gpi-grid {
	display: grid;
	gap: var(--gpi-gap);
	grid-template-columns: repeat(12, minmax(0, 1fr));
	transition: opacity 0.2s;

	> * {
		grid-column: span 12;
	}

	&.is-refreshing {
		opacity: 0.6;
	}
}

@media (min-width: 1100px) {

	.gpi-span-4 {
		grid-column: span 4 !important;
	}

	.gpi-span-5 {
		grid-column: span 5 !important;
	}

	.gpi-span-6 {
		grid-column: span 6 !important;
	}

	.gpi-span-7 {
		grid-column: span 7 !important;
	}

	.gpi-span-8 {
		grid-column: span 8 !important;
	}
}

.gpi-stack {
	display: grid;
	gap: var(--gpi-gap);
	max-width: 960px;

	.gpi-banner {
		margin-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */

.gpi-card {
	background: var(--gpi-surface);
	border: 1px solid var(--gpi-border);
	border-radius: var(--gpi-radius);
	box-shadow: var(--gpi-shadow);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gpi-card__header {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 20px 24px 0;
}

.gpi-card__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
	padding: 0;
}

.gpi-card__description {
	color: var(--gpi-text-3);
	font-size: 13px;
	margin: 4px 0 0;
}

.gpi-card__actions {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 8px;
}

.gpi-card__body {
	flex: 1;
	padding: 20px 24px 24px;
	position: relative;
}

.gpi-card__body--flush {
	overflow-x: auto;
	padding: 0;
}

.gpi-card__header + .gpi-card__body--flush {
	margin-top: 16px;
}

.gpi-card__footer {
	border-top: 1px solid var(--gpi-border);
	margin: 16px -24px -24px;
	padding: 12px 24px;
}

.gpi-card--hero .gpi-card__body {
	padding: 28px 24px;
}

.gpi-card--danger {
	border-color: #f3c7c7;
}

@media (max-width: 782px) {

	.gpi-card__header {
		padding: 16px 16px 0;
	}

	.gpi-card__body {
		padding: 16px;
	}

	.gpi-card__footer {
		margin: 16px -16px -16px;
		padding: 12px 16px;
	}
}

/* -------------------------------------------------------------------------
 * Score ring, badges, pills
 * ---------------------------------------------------------------------- */

.gpi-rings {
	display: grid;
	gap: 24px 16px;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	justify-items: center;
}

.gpi-rings__item {
	align-items: center;
	cursor: help;
	display: flex;
	flex-direction: column;
	position: relative;
}

.gpi-ring {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	--gpi-ring-color: var(--gpi-none);
	--gpi-ring-bg: #eef0f2;

	&--good {
		--gpi-ring-color: var(--gpi-good);
		--gpi-ring-bg: var(--gpi-good-bg);
	}

	&--average {
		--gpi-ring-color: var(--gpi-average);
		--gpi-ring-bg: var(--gpi-average-bg);
	}

	&--poor {
		--gpi-ring-color: var(--gpi-poor);
		--gpi-ring-bg: var(--gpi-poor-bg);
	}

	svg {
		overflow: visible;
	}
}

.gpi-ring__track {
	stroke: var(--gpi-ring-bg);
}

.gpi-ring__value {
	stroke: var(--gpi-ring-color);
	transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.gpi-ring__score {
	fill: var(--gpi-ring-color);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.gpi-ring__label {
	color: var(--gpi-text);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
}

.gpi-ring__sublabel {
	color: var(--gpi-text-3);
	font-size: 12px;
}

.gpi-tag {
	background: var(--gpi-c-agentic);
	border-radius: 99px;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 1px 7px;
	position: absolute;
	right: 6px;
	text-transform: uppercase;
	top: -4px;
}

.gpi-badge {
	align-items: center;
	border-radius: 8px;
	display: inline-flex;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	justify-content: center;
	min-width: 38px;
	padding: 3px 8px;

	&--md {
		font-size: 13px;
	}

	&--sm {
		border-radius: 6px;
		font-size: 11px;
		min-width: 28px;
		padding: 1px 6px;
	}

	&--good {
		background: var(--gpi-good-bg);
		color: var(--gpi-good);
	}

	&--average {
		background: var(--gpi-average-bg);
		color: var(--gpi-average);
	}

	&--poor {
		background: var(--gpi-poor-bg);
		color: var(--gpi-poor);
	}

	&--none {
		background: #f0f1f3;
		color: var(--gpi-none);
	}
}

.gpi-pill {
	background: #f0f1f3;
	border-radius: 99px;
	color: var(--gpi-text-2);
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	padding: 0 8px;
	vertical-align: middle;
	white-space: nowrap;

	&--accent {
		background: var(--gpi-accent-soft);
		color: var(--gpi-accent);
	}
}

.gpi-text--good {
	color: var(--gpi-good);
}

.gpi-text--average {
	color: var(--gpi-average);
}

.gpi-text--poor {
	color: var(--gpi-poor);
}

.gpi-muted {
	color: var(--gpi-text-3);
}

.gpi-small {
	font-size: 12px;
}

.gpi-pad {
	padding: 20px 24px;
}

.gpi-dot {
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
	height: 8px;
	width: 8px;

	&--good {
		background: var(--gpi-good);
	}

	&--average {
		background: #e8a33d;
	}

	&--poor {
		background: var(--gpi-poor);
	}

	&--before {
		background: #b8c2d6;
	}

	&--after {
		background: var(--gpi-accent);
	}
}

/* Status icons (audits, issues) */
.gpi-status {
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
	height: 10px;
	width: 10px;

	&--fail {
		background: var(--gpi-poor);
		border-radius: 2px;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		height: 11px;
		width: 12px;
	}

	&--average {
		background: #e8a33d;
		border-radius: 2px;
	}

	&--pass {
		background: var(--gpi-good);
	}

	&--info,
	&--manual,
	&--na {
		background: transparent;
		border: 2px solid var(--gpi-border-strong);
	}
}

/* -------------------------------------------------------------------------
 * Charts
 * ---------------------------------------------------------------------- */

.gpi-chart-empty {
	align-items: center;
	background: repeating-linear-gradient(-45deg, #fafbfc, #fafbfc 8px, #f4f5f7 8px, #f4f5f7 16px);
	border-radius: var(--gpi-radius-sm);
	color: var(--gpi-text-3);
	display: flex;
	justify-content: center;
	padding: 24px;
	text-align: center;
}

.gpi-linechart {
	position: relative;

	svg {
		display: block;
		overflow: visible;
		width: 100%;
	}
}

.gpi-linechart__grid {
	stroke: #eceef1;
	stroke-dasharray: 3 4;
	vector-effect: non-scaling-stroke;
}

.gpi-linechart__band--good {
	fill: var(--gpi-good-bg);
	opacity: 0.55;
}

.gpi-linechart__axis {
	fill: var(--gpi-text-3);
	font-size: 11px;
}

.gpi-linechart__series {
	color: var(--gpi-series);
}

.gpi-linechart__line {
	stroke: var(--gpi-series);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.gpi-linechart__area {
	fill: var(--gpi-series);
	opacity: 0.08;
}

.gpi-linechart__dot {
	fill: #fff;
	stroke: var(--gpi-series);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.gpi-linechart__cursor {
	stroke: var(--gpi-border-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.gpi-tooltip {
	background: #1e1e1e;
	border-radius: 8px;
	box-shadow: var(--gpi-shadow-lg);
	color: #fff;
	font-size: 12px;
	min-width: 150px;
	padding: 8px 10px;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translate(-50%, -105%);
	z-index: 5;
}

.gpi-tooltip__title {
	color: #c3c4c7;
	margin-bottom: 4px;
}

.gpi-tooltip__row {
	align-items: center;
	display: flex;
	gap: 6px;

	strong {
		font-variant-numeric: tabular-nums;
		margin-left: auto;
		padding-left: 12px;
	}
}

.gpi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.gpi-chip {
	align-items: center;
	background: transparent;
	border: 1px solid var(--gpi-border);
	border-radius: 99px;
	color: var(--gpi-text-3);
	cursor: pointer;
	display: inline-flex;
	font-size: 12px;
	gap: 6px;
	padding: 3px 10px;
	transition: all 0.15s;

	.gpi-dot {
		opacity: 0.35;
	}

	&.is-on {
		background: #fff;
		border-color: var(--gpi-border-strong);
		color: var(--gpi-text);

		.gpi-dot {
			opacity: 1;
		}
	}

	&:focus-visible {
		outline: 2px solid var(--gpi-accent);
	}
}

.gpi-donut {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 20px;

	svg {
		overflow: visible;
	}
}

.gpi-donut__track {
	stroke: #f0f1f3;
}

.gpi-donut__segment {
	cursor: pointer;
	transition: stroke-width 0.15s, opacity 0.15s;

	&--good {
		stroke: var(--gpi-good);
	}

	&--average {
		stroke: #e8a33d;
	}

	&--poor {
		stroke: var(--gpi-poor);
	}
}

.gpi-donut svg:hover .gpi-donut__segment:not(.is-active) {
	opacity: 0.45;
}

.gpi-donut__value {
	fill: var(--gpi-text);
	font-size: 34px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.gpi-donut__label {
	fill: var(--gpi-text-3);
	font-size: 12px;
}

.gpi-legend {
	display: grid;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;

	li {
		align-items: center;
		border-radius: 6px;
		display: flex;
		gap: 8px;
		margin: 0;
		padding: 4px 6px;

		&:hover {
			background: #f6f7f9;
		}
	}
}

.gpi-legend__label {
	flex: 1;
}

.gpi-legend__value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.gpi-legend__share {
	color: var(--gpi-text-3);
	font-variant-numeric: tabular-nums;
	text-align: right;
	width: 40px;
}

.gpi-barlist {
	display: grid;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpi-barlist__item {
	margin: 0;
}

.gpi-barlist__head {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 6px;
}

.gpi-barlist__label {
	font-weight: 500;
}

.gpi-barlist__value {
	color: var(--gpi-text-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gpi-barlist__track {
	background: #f0f1f3;
	border-radius: 99px;
	height: 8px;
	overflow: hidden;
}

.gpi-barlist__fill {
	border-radius: 99px;
	height: 100%;
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);

	&--good {
		background: var(--gpi-good);
	}

	&--average {
		background: #e8a33d;
	}

	&--poor {
		background: var(--gpi-poor);
	}

	&--accent {
		background: var(--gpi-accent);
	}
}

.gpi-sparkline {
	display: inline-flex;

	polyline {
		stroke: var(--gpi-accent);
	}

	circle {
		fill: var(--gpi-accent);
	}

	&--good polyline,
	&--good circle {
		stroke: var(--gpi-good);
		fill: var(--gpi-good);
	}

	&--good polyline,
	&--average polyline,
	&--poor polyline {
		fill: none;
	}

	&--average polyline,
	&--average circle {
		stroke: #e8a33d;
	}

	&--average circle {
		fill: #e8a33d;
	}

	&--poor polyline,
	&--poor circle {
		stroke: var(--gpi-poor);
	}

	&--poor circle {
		fill: var(--gpi-poor);
	}

	&--empty {
		border-top: 2px dotted var(--gpi-border-strong);
		height: 0;
		width: 40px;
	}
}

.gpi-distribution {
	border-radius: 6px;
	display: flex;
	gap: 2px;
	height: 22px;
	overflow: hidden;
}

.gpi-distribution__part {
	align-items: center;
	color: #fff;
	display: flex;
	flex-basis: 0;
	font-size: 11px;
	font-weight: 600;
	justify-content: center;
	min-width: 4px;

	&--good {
		background: var(--gpi-good);
	}

	&--average {
		background: #e8a33d;
	}

	&--poor {
		background: var(--gpi-poor);
	}
}

.gpi-scale {
	border-radius: 99px;
	display: flex;
	gap: 2px;
	height: 6px;
	margin-top: 14px;
	position: relative;
}

.gpi-scale__part {
	border-radius: 99px;
	height: 100%;

	&--good {
		background: #9fd8b8;
	}

	&--average {
		background: #f3cf8d;
	}

	&--poor {
		background: #f2a7a7;
		flex: 1;
	}
}

.gpi-scale__marker {
	background: var(--gpi-text);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
	height: 14px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
}

.gpi-compare {
	display: grid;
	gap: 14px;
}

.gpi-compare__legend {
	color: var(--gpi-text-2);
	display: flex;
	font-size: 12px;
	gap: 16px;

	span {
		align-items: center;
		display: inline-flex;
		gap: 6px;
	}
}

.gpi-compare__row {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: 120px 1fr 48px;
}

.gpi-compare__label {
	font-weight: 500;
}

.gpi-compare__bars {
	display: grid;
	gap: 4px;
}

.gpi-compare__bar {
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	height: 18px;
	min-width: 28px;
	position: relative;
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);

	span {
		position: absolute;
		right: 6px;
		top: 1px;
	}

	&--before {
		background: #b8c2d6;
	}

	&--after {
		background: var(--gpi-accent);
	}
}

.gpi-delta {
	color: var(--gpi-text-3);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin-left: 4px;
	text-align: right;

	&.is-up {
		color: var(--gpi-good);
	}

	&.is-down {
		color: var(--gpi-poor);
	}
}

/* -------------------------------------------------------------------------
 * Metric tiles
 * ---------------------------------------------------------------------- */

/* Five tiles in one row, or 3 + 2 in narrower cards (never 4 + 1). */
.gpi-metrics-wrap {
	container-type: inline-size;
}

.gpi-metrics {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

@container (max-width: 980px) {

	.gpi-metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (max-width: 600px) {

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

@container (max-width: 340px) {

	.gpi-metrics {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gpi-metric {
	background: #fafbfc;
	border: 1px solid var(--gpi-border);
	border-radius: var(--gpi-radius-sm);
	padding: 16px;
	position: relative;

	&::before {
		background: var(--gpi-none);
		border-radius: 8px 0 0 8px;
		bottom: -1px;
		content: "";
		left: -1px;
		position: absolute;
		top: -1px;
		width: 3px;
	}

	&--good::before {
		background: var(--gpi-good);
	}

	&--average::before {
		background: #e8a33d;
	}

	&--poor::before {
		background: var(--gpi-poor);
	}
}

.gpi-metric__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.gpi-metric__acronym {
	color: var(--gpi-text-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.gpi-metric__rating {
	font-size: 11px;
	font-weight: 500;

	&--good {
		color: var(--gpi-good);
	}

	&--average {
		color: var(--gpi-average);
	}

	&--poor {
		color: var(--gpi-poor);
	}
}

.gpi-metric__value {
	font-size: 28px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-top: 6px;
}

.gpi-metric--good .gpi-metric__value {
	color: var(--gpi-good);
}

.gpi-metric--average .gpi-metric__value {
	color: var(--gpi-average);
}

.gpi-metric--poor .gpi-metric__value {
	color: var(--gpi-poor);
}

.gpi-metric__label {
	color: var(--gpi-text-3);
	font-size: 12px;
}

.gpi-metric__thresholds {
	color: var(--gpi-text-3);
	display: flex;
	font-size: 11px;
	justify-content: space-between;
	margin-top: 6px;
}

.gpi-metrics--compact {

	.gpi-metric__value {
		font-size: 22px;
	}
}

/* -------------------------------------------------------------------------
 * Lists
 * ---------------------------------------------------------------------- */

.gpi-pagelist,
.gpi-issuelist {
	list-style: none;
	margin: 0;
	padding: 0;

	li {
		align-items: center;
		border-bottom: 1px solid var(--gpi-border);
		display: flex;
		gap: 12px;
		margin: 0;
		padding: 10px 0;

		&:last-child {
			border-bottom: 0;
		}
	}
}

.gpi-pagelist li {
	position: relative;

	.gpi-url {
		flex: 1;
	}
}

.gpi-pagelist__go {
	color: var(--gpi-text-3);
}

.gpi-issuelist {
	padding: 4px 0 0;
}

.gpi-issuelist__title {
	flex: 1;
}

.gpi-url {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gpi-url__path {
	color: var(--gpi-text);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.gpi-url__path {
	color: var(--gpi-text);

	&:hover {
		color: var(--gpi-accent);
	}
}

.gpi-url__host {
	color: var(--gpi-text-3);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpi-tabs {
	border-bottom: 1px solid var(--gpi-border);
	display: flex;
	gap: 4px;
	margin: -4px 0 16px;
	overflow-x: auto;

	button {
		align-items: center;
		background: transparent;
		border: 0;
		border-bottom: 2px solid transparent;
		color: var(--gpi-text-2);
		cursor: pointer;
		display: inline-flex;
		font-size: 13px;
		font-weight: 500;
		gap: 8px;
		margin-bottom: -1px;
		padding: 10px 12px;
		white-space: nowrap;

		&:hover {
			color: var(--gpi-text);
		}

		&:focus-visible {
			outline: 2px solid var(--gpi-accent);
			outline-offset: -2px;
		}

		&.is-active {
			border-bottom-color: var(--gpi-accent);
			color: var(--gpi-text);
		}
	}
}

.gpi-tabs__count {
	background: var(--gpi-poor-bg);
	border-radius: 99px;
	color: var(--gpi-poor);
	font-size: 11px;
	font-weight: 600;
	padding: 0 7px;
}

/* -------------------------------------------------------------------------
 * Tables
 * ---------------------------------------------------------------------- */

.gpi-toolbar {
	align-items: center;
	border-bottom: 1px solid var(--gpi-border);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px 20px;

	.components-base-control {
		margin: 0;
	}
}

.gpi-toolbar__search {
	max-width: 320px;
	width: 100%;
}

.gpi-toolbar__spacer {
	flex: 1;
}

.gpi-bulk {
	align-items: center;
	animation: gpi-fade 0.15s ease;
	display: flex;
	gap: 8px;
}

.gpi-bulk__count {
	color: var(--gpi-text-2);
	font-weight: 500;
	margin-right: 4px;
}

@keyframes gpi-fade {

	from {
		opacity: 0;
		transform: translateY(-2px);
	}
}

/* Positioned so hidden labels inside the table stay in the scroll area. */
.gpi-table-wrap {
	overflow-x: auto;
	position: relative;
	transition: opacity 0.2s;

	&.is-refreshing {
		opacity: 0.55;
	}
}

.gpi-table {
	border-collapse: collapse;
	width: 100%;

	th,
	td {
		border-bottom: 1px solid var(--gpi-border);
		padding: 12px 16px;
		text-align: left;
		vertical-align: middle;
	}

	th {
		background: #fafbfc;
		color: var(--gpi-text-2);
		font-size: 12px;
		font-weight: 600;
		white-space: nowrap;
	}

	tbody tr {
		transition: background 0.1s;

		&:hover {
			background: #fafbfc;
		}

		&.is-selected {
			background: var(--gpi-accent-soft);
		}

		&:last-child td {
			border-bottom: 0;
		}
	}

	td .gpi-pill {
		margin-top: 4px;
	}

	.components-checkbox-control__input-container {
		margin: 0;
	}

	.components-base-control__field {
		margin: 0;
	}
}

.gpi-table__check {
	padding-right: 0 !important;
	width: 28px;
}

.gpi-table__score {
	width: 1%;
}

.gpi-table__num {
	font-variant-numeric: tabular-nums;
	text-align: right !important;
	white-space: nowrap;
}

.gpi-table__actions {
	text-align: right !important;
	width: 1%;
}

.gpi-table--compact {

	th,
	td {
		padding: 8px 10px;
	}
}

.gpi-sort {
	align-items: center;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 2px;
	padding: 0;

	.dashicons {
		font-size: 14px;
		height: 14px;
		opacity: 0;
		width: 14px;
	}

	&:hover .dashicons {
		opacity: 0.45;
	}

	&.is-active {
		color: var(--gpi-text);

		.dashicons {
			opacity: 1;
		}
	}
}

.gpi-tablefoot {
	align-items: center;
	border-top: 1px solid var(--gpi-border);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	padding: 12px 20px;
}

.gpi-perpage {
	align-items: center;
	color: var(--gpi-text-2);
	display: flex;
	gap: 8px;

	.components-base-control__field {
		margin: 0;
	}
}

.gpi-check {
	margin: 0 !important;
}

.gpi-pagination {
	align-items: center;
	display: flex;
	gap: 16px;
}

.gpi-pagination__total {
	color: var(--gpi-text-3);
}

.gpi-pagination__controls {
	align-items: center;
	display: flex;
	gap: 4px;
}

.gpi-pagination__page {
	color: var(--gpi-text-2);
	font-variant-numeric: tabular-nums;
	padding: 0 6px;
}

.gpi-strong-link {
	color: var(--gpi-text) !important;
	font-weight: 500;

	&:hover {
		color: var(--gpi-accent) !important;
	}
}

@media (max-width: 1280px) {

	.gpi-hide-md {
		display: none;
	}
}

@media (max-width: 782px) {

	.gpi-hide-sm {
		display: none;
	}

	.gpi-toolbar {
		padding: 12px 16px;
	}

	.gpi-toolbar__search {
		max-width: none;
	}

	.gpi-table th,
	.gpi-table td {
		padding: 10px 12px;
	}
}

/* -------------------------------------------------------------------------
 * Report detail
 * ---------------------------------------------------------------------- */

.gpi-hero {
	align-items: center;
	display: flex;
	gap: 32px;

	.gpi-rings {
		flex: 1;
	}
}

.gpi-hero__shot {
	border: 1px solid var(--gpi-border);
	border-radius: var(--gpi-radius-sm);
	box-shadow: var(--gpi-shadow);
	flex-shrink: 0;
	max-height: 200px;
	width: auto;

	@media (max-width: 1100px) {
		display: none;
	}
}

.gpi-banner {
	align-items: center;
	background: var(--gpi-accent-soft);
	border-radius: var(--gpi-radius-sm);
	color: var(--gpi-text);
	display: flex;
	gap: 10px;
	margin-bottom: var(--gpi-gap);
	padding: 12px 16px;

	.gpi-grid & {
		margin-bottom: 0;
	}

	.dashicons {
		color: var(--gpi-accent);
	}

	&--warning {
		background: var(--gpi-average-bg);

		.dashicons {
			color: var(--gpi-average);
		}
	}
}

.gpi-hint {
	align-items: flex-start;
	color: var(--gpi-text-2);
	display: flex;
	gap: 8px;
	margin: 20px 0 0;

	.dashicons {
		color: var(--gpi-text-3);
		font-size: 18px;
		height: 18px;
		width: 18px;
	}
}

.gpi-assessment {
	align-items: center;
	border-radius: var(--gpi-radius-sm);
	display: inline-flex;
	font-weight: 600;
	gap: 8px;
	margin-bottom: 16px;
	padding: 8px 14px;

	&--good {
		background: var(--gpi-good-bg);
		color: var(--gpi-good);
	}

	&--average,
	&--poor {
		background: var(--gpi-poor-bg);
		color: var(--gpi-poor);
	}
}

.gpi-field {
	display: grid;
	gap: 0;
}

.gpi-field__row {
	align-items: center;
	border-bottom: 1px solid var(--gpi-border);
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(200px, 1.3fr) 120px minmax(200px, 2fr);
	padding: 12px 0;

	&:last-child {
		border-bottom: 0;
	}

	@media (max-width: 782px) {
		grid-template-columns: 1fr auto;

		.gpi-distribution {
			grid-column: span 2;
		}
	}
}

.gpi-field__name {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	span {
		color: var(--gpi-text-2);
	}
}

.gpi-field__value {
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.gpi-field__rating {
	display: block;
	font-size: 11px;
	font-weight: 500;
}

.gpi-fieldempty {
	align-items: flex-start;
	background: #fafbfc;
	border-radius: var(--gpi-radius-sm);
	color: var(--gpi-text-2);
	display: flex;
	gap: 12px;
	padding: 16px;

	.dashicons {
		color: var(--gpi-text-3);
	}

	p {
		margin: 0;
	}
}

.gpi-filmstrip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;

	figure {
		flex-shrink: 0;
		margin: 0;
		text-align: center;
	}

	img {
		border: 1px solid var(--gpi-border);
		border-radius: 6px;
		display: block;
		height: 120px;
		width: auto;
	}

	figcaption {
		color: var(--gpi-text-3);
		font-size: 11px;
		margin-top: 4px;
	}
}

/* Audits */
.gpi-auditgroup {
	border: 1px solid var(--gpi-border);
	border-radius: var(--gpi-radius-sm);
	margin-bottom: 12px;
	overflow: hidden;
}

.gpi-auditgroup__head {
	align-items: center;
	background: #fafbfc;
	border: 0;
	color: var(--gpi-text);
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	padding: 10px 16px;
	text-align: left;
	width: 100%;

	.dashicons {
		color: var(--gpi-text-3);
		margin-left: auto;
	}

	&:focus-visible {
		outline: 2px solid var(--gpi-accent);
		outline-offset: -2px;
	}
}

.gpi-auditgroup__count {
	background: #eef0f2;
	border-radius: 99px;
	color: var(--gpi-text-2);
	font-size: 11px;
	padding: 0 8px;
}

.gpi-auditgroup--fail .gpi-auditgroup__count {
	background: var(--gpi-poor-bg);
	color: var(--gpi-poor);
}

.gpi-auditgroup--pass .gpi-auditgroup__count {
	background: var(--gpi-good-bg);
	color: var(--gpi-good);
}

.gpi-auditlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpi-audit {
	border-top: 1px solid var(--gpi-border);
	margin: 0;

	&.is-open {
		background: #fcfcfd;
	}
}

.gpi-audit__head {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--gpi-text);
	cursor: pointer;
	display: flex;
	font-size: 13px;
	gap: 12px;
	padding: 12px 16px;
	text-align: left;
	width: 100%;

	&:hover:not(:disabled) {
		background: #f6f7f9;
	}

	&:disabled {
		cursor: default;
	}

	&:focus-visible {
		outline: 2px solid var(--gpi-accent);
		outline-offset: -2px;
	}
}

.gpi-audit__title {
	flex: 1;
	font-weight: 500;
}

.gpi-audit__value {
	color: var(--gpi-text-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gpi-audit--fail .gpi-audit__value {
	color: var(--gpi-poor);
}

.gpi-audit--average .gpi-audit__value {
	color: var(--gpi-average);
}

.gpi-audit__chevron {
	color: var(--gpi-text-3);
	transition: transform 0.15s;

	.is-open & {
		transform: rotate(180deg);
	}
}

.gpi-audit__body {
	animation: gpi-fade 0.15s ease;
	padding: 0 16px 16px 38px;
}

.gpi-audit__description {
	color: var(--gpi-text-2);
	margin-bottom: 12px;
	max-width: 900px;
}

.gpi-savings {
	display: inline-flex;
	gap: 4px;
}

.gpi-savings__chip {
	background: var(--gpi-average-bg);
	border-radius: 6px;
	color: var(--gpi-average);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	padding: 1px 6px;
	white-space: nowrap;
}

.gpi-tip {
	background: var(--gpi-accent-soft);
	border-radius: var(--gpi-radius-sm);
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
	padding: 12px 14px;

	> .dashicons {
		color: var(--gpi-accent);
	}

	p {
		margin: 2px 0 0;
	}
}

.gpi-allgood {
	align-items: center;
	color: var(--gpi-good);
	display: flex;
	font-weight: 500;
	gap: 8px;
	margin: 4px 0 16px;
}

.gpi-details-table-wrap {
	border: 1px solid var(--gpi-border);
	border-radius: var(--gpi-radius-sm);
	margin-top: 4px;
	overflow-x: auto;

	> .components-button {
		margin: 8px 12px;
	}
}

.gpi-details-table {
	border-collapse: collapse;
	font-size: 12px;
	width: 100%;

	th,
	td {
		border-bottom: 1px solid var(--gpi-border);
		padding: 8px 12px;
		text-align: left;
		vertical-align: top;
	}

	th {
		background: #fafbfc;
		color: var(--gpi-text-2);
		font-weight: 600;
	}

	tr:last-child td {
		border-bottom: 0;
	}

	.is-num {
		text-align: right;
		white-space: nowrap;
	}

	.is-sub td {
		background: #fbfbfc;
		color: var(--gpi-text-2);

		&:first-child {
			padding-left: 28px;
		}
	}
}

.gpi-cell-url {
	display: flex;
	flex-direction: column;
	max-width: 520px;
}

.gpi-cell-url__path {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpi-cell-url__host {
	color: var(--gpi-text-3);
	font-size: 11px;
}

.gpi-cell-text {
	overflow-wrap: anywhere;
}

.gpi-cell-num {
	font-variant-numeric: tabular-nums;
}

.gpi-cell-node {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 560px;
}

.gpi-cell-node__label {
	font-weight: 500;
}

.gpi-cell-node__snippet {
	color: #8a2b1e;
	display: block;
	max-height: 60px;
	overflow: hidden;
	white-space: pre-wrap;
	word-break: break-all;
}

.gpi-checklist {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;

	li {
		align-items: center;
		display: flex;
		gap: 6px;
		margin: 0 0 4px;
	}

	.is-pass .dashicons {
		color: var(--gpi-good);
	}

	.is-fail .dashicons {
		color: var(--gpi-poor);
	}
}

.gpi-tree {
	border: 1px solid var(--gpi-border);
	border-radius: var(--gpi-radius-sm);
	font-size: 12px;
	list-style: none;
	margin: 4px 0 0;
	padding: 8px 12px;

	ul {
		border-left: 1px dashed var(--gpi-border-strong);
		list-style: none;
		margin: 4px 0 0 6px;
		padding-left: 14px;
	}

	li {
		margin: 0 0 4px;
	}

	.is-longest > .gpi-tree__row .gpi-cell-url__path {
		color: var(--gpi-poor);
	}
}

.gpi-tree__row {
	align-items: baseline;
	display: flex;
	gap: 10px;
}

.gpi-tree__meta {
	color: var(--gpi-text-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gpi-details-list__item + .gpi-details-list__item {
	margin-top: 12px;
}

.gpi-footnav {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 24px;
}

/* ShortPixel offer */
.gpi-offer {
	align-items: center;
	background: linear-gradient(135deg, #f3f6ff, #fbf5ff);
	border: 1px solid #e2e6fb;
	border-radius: var(--gpi-radius-sm);
	display: flex;
	gap: 16px;
	margin: 0 0 14px;
	padding: 14px 16px;

	p {
		color: var(--gpi-text-2);
		margin: 4px 0;
	}

	@media (max-width: 782px) {
		align-items: flex-start;
		flex-direction: column;
	}
}

.gpi-offer__logo {
	flex-shrink: 0;
	height: 44px;
	width: auto;
}

.gpi-offer__text {
	flex: 1;
}

.gpi-offer__disclosure {
	color: var(--gpi-text-3);
	font-size: 11px;
}

.gpi-offer-link {
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	gap: 6px;
	margin-top: 6px;
}

.gpi-offer-link__tag {
	background: #f0f1f3;
	border-radius: 4px;
	color: var(--gpi-text-3);
	font-size: 10px;
	padding: 0 5px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Forms / settings
 * ---------------------------------------------------------------------- */

.gpi-setting {
	align-items: flex-start;
	border-bottom: 1px solid var(--gpi-border);
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	padding: 16px 0;

	&:first-child {
		padding-top: 0;
	}

	&:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	@media (max-width: 782px) {
		gap: 10px;
		grid-template-columns: 1fr;
	}
}

.gpi-setting__title {
	font-weight: 600;
}

.gpi-setting__description {
	color: var(--gpi-text-3);
	margin-top: 4px;

	.components-button.is-link {
		font-size: inherit;
	}
}

.gpi-setting__control {

	.components-toggle-control {
		margin-top: 2px;
	}
}

.gpi-keyfield {
	align-items: flex-end;
	display: flex;
	gap: 8px;

	.components-base-control {
		flex: 1;
	}

	input {
		font-family: Menlo, Consolas, monospace;
	}
}

.gpi-choice {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, 1fr);

	button {
		align-items: center;
		background: #fff;
		border: 1px solid var(--gpi-border-strong);
		border-radius: var(--gpi-radius-sm);
		color: var(--gpi-text-2);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		font-size: 12px;
		font-weight: 500;
		gap: 4px;
		padding: 10px 6px;
		transition: all 0.15s;

		&:hover {
			border-color: var(--gpi-accent);
		}

		&:focus-visible {
			outline: 2px solid var(--gpi-accent);
		}

		&.is-active {
			background: var(--gpi-accent-soft);
			border-color: var(--gpi-accent);
			box-shadow: inset 0 0 0 1px var(--gpi-accent);
			color: var(--gpi-accent);
		}
	}
}

.gpi-checkgrid {
	display: grid;
	gap: 12px 24px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gpi-subsection {
	border-top: 1px solid var(--gpi-border);
	margin-top: 16px;
	padding-top: 16px;
}

.gpi-subsection__title {
	font-weight: 600;
	margin-bottom: 12px;
}

.gpi-form {
	display: grid;
	gap: 16px;

	textarea {
		font-family: Menlo, Consolas, monospace;
		font-size: 12px;
	}
}

.gpi-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gpi-hints {
	display: grid;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;

	li {
		margin: 0;
	}
}

.gpi-savebar {
	align-items: center;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border: 1px solid var(--gpi-border);
	border-radius: var(--gpi-radius);
	bottom: 16px;
	box-shadow: var(--gpi-shadow-lg);
	display: flex;
	gap: 12px;
	margin-top: 24px;
	max-width: 960px;
	padding: 12px 16px;
	position: static;

	&__text {
		color: var(--gpi-text-3);
		flex: 1;
	}

	&.is-dirty {
		position: sticky;
	}

	&.is-dirty .gpi-savebar__text {
		color: var(--gpi-average);
		font-weight: 500;
	}
}

.gpi-logerror {
	display: flex;
	flex-direction: column;
	gap: 2px;

	& + & {
		margin-top: 6px;
	}
}

/* -------------------------------------------------------------------------
 * States: empty, loading, errors, toasts, modals
 * ---------------------------------------------------------------------- */

.gpi-empty {
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 56px 24px;
	text-align: center;
}

.gpi-empty__icon {
	align-items: center;
	background: var(--gpi-accent-soft);
	border-radius: 16px;
	color: var(--gpi-accent);
	display: flex !important;
	font-size: 28px;
	height: 56px !important;
	justify-content: center;
	margin-bottom: 16px;
	width: 56px !important;
}

.gpi-empty__title {
	font-size: 16px;
	margin: 0 0 6px;
}

.gpi-empty__text {
	color: var(--gpi-text-2);
	max-width: 460px;
}

.gpi-empty__action {
	margin-top: 20px;
}

.gpi-loading {
	align-items: center;
	color: var(--gpi-text-2);
	display: flex;
	gap: 8px;
	justify-content: center;
	padding: 80px 0;
}

.gpi-skeleton {
	display: grid;
	gap: 12px;
}

.gpi-skeleton__row {
	animation: gpi-shimmer 1.4s ease infinite;
	background: linear-gradient(90deg, #f0f1f3 25%, #f7f8f9 37%, #f0f1f3 63%);
	background-size: 400% 100%;
	border-radius: 6px;
}

@keyframes gpi-shimmer {

	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

.gpi-error {
	align-items: center;
	background: var(--gpi-poor-bg);
	border-radius: var(--gpi-radius-sm);
	color: var(--gpi-poor);
	display: flex;
	gap: 8px;
	margin: 16px;
	padding: 12px 16px;
}

.gpi-crash__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.gpi-crash__details {
	color: var(--gpi-text-2);
	margin-top: 20px;
	max-width: 560px;

	summary {
		cursor: pointer;
	}

	code {
		display: block;
		margin-top: 8px;
		overflow-wrap: anywhere;
		text-align: left;
		white-space: pre-wrap;
	}
}

.gpi-toasts {
	bottom: 24px;
	display: grid;
	gap: 8px;
	left: 50%;
	position: fixed;
	transform: translateX(-50%);
	z-index: 100000;
}

.gpi-toast {
	align-items: center;
	animation: gpi-toast 0.2s ease;
	background: #1e1e1e;
	border-radius: 10px;
	box-shadow: var(--gpi-shadow-lg);
	color: #fff;
	display: flex;
	gap: 8px;
	max-width: 560px;
	padding: 12px 16px;

	.dashicons {
		color: #7ad59c;
	}

	&--error .dashicons {
		color: #f28b82;
	}

	&--info .dashicons {
		color: #9ab4ff;
	}
}

@keyframes gpi-toast {

	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

.gpi-modal {

	.gpi-modal__actions {
		display: flex;
		gap: 8px;
		justify-content: flex-end;
		margin-top: 24px;
	}
}

.gpi-keystatus {
	align-items: flex-start;
	color: var(--gpi-text-3);
	display: flex;
	font-size: 12px;
	gap: 6px;
	margin: 8px 0 0;

	.dashicons {
		flex: none;
		font-size: 16px;
		height: 16px;
		width: 16px;
	}

	&.is-valid {
		color: var(--gpi-good);
	}

	&.is-invalid {
		color: var(--gpi-poor);
	}
}

.gpi-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 4px;
}

.gpi-external {
	align-items: center;
	display: inline-flex;
	gap: 2px;

	.dashicons {
		font-size: 14px;
		height: 14px;
		width: 14px;
	}
}

.gpi-quote {
	color: var(--gpi-text-2);
	font-style: italic;
}

.gpi-filter {
	min-width: 180px;
}

@media (prefers-reduced-motion: reduce) {

	.gpi-app *,
	.gpi-app *::before {
		animation: none !important;
		transition: none !important;
	}
}