.uth-serp,
.uth-serp-screen {
	--uth-serp-border: #dfe4ec;
	--uth-serp-soft: #eff6ff;
	--uth-serp-google-blue: #1a0dab;
	--uth-serp-google-green: #188038;
	--uth-serp-yellow: #fbbc04;
	--uth-rc-border: #dfe4ec;
	--uth-rc-bezel: #10131c;
}

.uth-serp *,
.uth-serp *::before,
.uth-serp *::after,
.uth-serp-screen *,
.uth-serp-screen *::before,
.uth-serp-screen *::after {
	box-sizing: border-box;
}

.uth-serp-landing {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	display: grid;
	gap: 18px;
}

.uth-serp-landing__title {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	line-height: 1.25;
}

.uth-serp-landing__subtitle {
	margin: 0;
	color: var(--uth-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.uth-serp-landing__form {
	display: grid;
	gap: 16px;
	text-align: left;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.uth-serp-landing__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.uth-serp-field {
	display: grid;
	gap: 7px;
	color: var(--uth-heading);
	font-size: 0.86rem;
	font-weight: 700;
}

.uth-serp-field--wide {
	grid-column: 1 / -1;
}

.uth-serp-input,
.uth-serp-textarea {
	width: 100%;
	padding: 14px 16px;
	color: var(--uth-heading);
	background: var(--uth-background);
	border: 1px solid var(--uth-border);
	border-radius: 12px;
	font: inherit;
	font-weight: 400;
	line-height: 1.45;
	outline: 0;
}

.uth-serp-textarea {
	resize: vertical;
	min-height: 120px;
}

.uth-serp-input:focus,
.uth-serp-textarea:focus {
	border-color: var(--uth-primary);
	outline: 2px solid rgba(14, 116, 144, 0.2);
	outline-offset: 0;
}

.uth-serp-landing__submit {
	justify-self: center;
}

.uth-serp-status {
	margin: 0;
	min-height: 1.4em;
	color: var(--uth-muted);
	font-size: 0.86rem;
	line-height: 1.5;
	text-align: center;
}

.uth-serp-status.is-error {
	color: var(--uth-danger);
}

.uth-serp-screen > .uth-serp-status {
	padding: 8px 14px;
	background: #fff;
	border-bottom: 1px solid var(--uth-rc-border);
	font-size: 0.82rem;
	text-align: left;
	flex: none;
}

.uth-serp-screen .uth-serp-status:empty {
	display: none;
}

.uth-rc-screen-body {
	margin: 0;
	height: 100vh;
	overflow: hidden;
	background: #e9edf3;
}

.uth-rc-screen-body::before,
.uth-rc-screen-body::after,
.uth-serp-screen::before,
.uth-serp-screen::after {
	content: none;
}

.uth-serp-screen {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
	height: 100vh;
	background: #e9edf3;
	isolation: isolate;
	overflow: hidden;
}

.uth-serp-screen > * {
	position: relative;
	z-index: 1;
}

.uth-serp-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #f7f9fc;
	border-bottom: 1px solid var(--uth-rc-border);
	flex: none;
}

.uth-serp-bar__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--uth-heading);
	border: 1px solid var(--uth-rc-border);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
}

.uth-serp-bar__back:hover {
	border-color: var(--uth-primary);
	color: var(--uth-primary);
}

.uth-serp-bar__search {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 160px;
	max-width: 520px;
}

.uth-serp-bar__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	padding: 9px 12px;
	color: var(--uth-heading);
	background: #fff;
	border: 1px solid var(--uth-rc-border);
	border-radius: 8px 0 0 8px;
	font: inherit;
	font-size: 0.88rem;
	outline: 0;
}

.uth-serp-bar__input:focus {
	border-color: var(--uth-primary);
	outline: none;
}

.uth-serp-bar__go {
	flex: none;
	height: 38px;
	min-height: 0;
	padding: 0 14px;
	border-radius: 0 8px 8px 0;
}

.uth-serp-bar__tools {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.uth-serp-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #475569;
	background: #fff;
	border: 1px solid var(--uth-rc-border);
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
	transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.uth-serp-bar__back svg,
.uth-serp-bar__go svg,
.uth-serp-bar__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.uth-serp-bar__btn:hover {
	color: var(--uth-primary);
	border-color: var(--uth-primary);
}

.uth-serp-bar__btn:focus-visible {
	color: var(--uth-primary);
	border-color: var(--uth-primary);
	background: #fff;
}

.uth-serp-bar__btn.is-active {
	color: #fff;
	background: var(--uth-primary);
	border-color: var(--uth-primary);
}

.uth-serp-bar__btn.is-active:hover,
.uth-serp-bar__btn.is-active:focus-visible {
	color: #fff;
	background: var(--uth-primary);
	border-color: var(--uth-primary);
}

.uth-serp-workspace {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	display: grid;
	grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
	gap: 18px;
	width: 100%;
	margin: 0;
	padding: 28px;
	align-items: start;
}

.uth-serp-editor,
.uth-serp-results {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--uth-rc-border);
	border-radius: 8px;
	box-shadow: none;
	isolation: isolate;
}

.uth-serp-editor {
	display: grid;
	align-content: start;
	gap: 16px;
	padding: 18px;
}

.uth-serp-editor__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.uth-serp-meter {
	color: var(--uth-muted);
	font-size: 0.78rem;
	font-weight: 800;
}

.uth-serp-meter.is-pass {
	color: var(--uth-success);
}

.uth-serp-meter.is-warn {
	color: #a16207;
}

.uth-serp-meter.is-fail {
	color: var(--uth-danger);
}

.uth-serp-checks {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.uth-serp-check {
	padding: 10px 11px;
	background: var(--uth-serp-soft);
	border: 1px solid var(--uth-rc-border);
	border-left-width: 4px;
	border-radius: 8px;
	color: var(--uth-text);
	font-size: 0.86rem;
	line-height: 1.45;
}

.uth-serp-check.is-pass {
	border-left-color: var(--uth-success);
}

.uth-serp-check.is-warn {
	border-left-color: #ca8a04;
}

.uth-serp-check.is-fail {
	border-left-color: var(--uth-danger);
}

.uth-serp-results {
	padding: 22px;
	overflow: auto;
	background: #fff;
	min-height: 100%;
}

.uth-serp-google {
	position: relative;
	z-index: 1;
	min-height: 620px;
	background: #fff;
	color: #202124;
	font-family: Arial, Helvetica, sans-serif;
}

.uth-serp-google.is-mobile {
	max-width: 390px;
	min-height: 720px;
	margin: 0 auto;
	border: 1px solid #e5e7eb;
	border-radius: 28px;
	box-shadow: inset 0 0 0 8px #111827;
	padding: 36px 18px 22px;
}

.uth-serp-google__head {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: -8px -16px 0;
	padding: 0 16px;
}

.uth-google-logo {
	font-family: "Product Sans", "Google Sans", "Segoe UI", Arial, sans-serif;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -1.5px;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

.uth-google-logo__g1,
.uth-google-logo__g2 {
	color: #4285f4;
}

.uth-google-logo__o1 {
	color: #ea4335;
}

.uth-google-logo__o2 {
	color: #fbbc05;
}

.uth-google-logo__l {
	color: #34a853;
}

.uth-google-logo__e {
	color: #ea4335;
}

.uth-serp-google__search {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #dfe1e5;
	border-radius: 24px;
	color: #202124;
	font-size: 15px;
	transition: box-shadow 120ms ease;
}

.uth-serp-google__search:focus-within {
	border-color: transparent;
	box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

.uth-serp-google__query {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #202124;
}

.uth-serp-google__tools {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-left: 12px;
	flex: 0 0 auto;
}

.uth-serp-google__mic {
	width: 18px;
	height: 18px;
	fill: #4285f4;
}

.uth-serp-google__cam {
	width: 20px;
	height: 20px;
}

.uth-serp-google__apps {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	color: #5f6368;
}

.uth-serp-google__apps svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.uth-serp-google__nav {
	display: flex;
	gap: 2px;
	margin: 14px -16px 0;
	padding: 0 12px;
	border-bottom: 1px solid #ebebeb;
	white-space: nowrap;
	overflow-x: auto;
}

.uth-serp-google__nav button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px 10px;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: #5f6368;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.uth-serp-google__nav button:hover {
	color: #202124;
}

.uth-serp-google__nav button.is-active {
	color: #1a0dab;
	border-bottom-color: #1a0dab;
}

.uth-serp-google__nav svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.uth-serp-google__body {
	padding-top: 18px;
}

.uth-serp-google__stats {
	margin: 0 0 20px;
	color: #70757a;
	font-size: 13px;
}

.uth-serp-context {
	margin: 0 0 22px;
	color: #3c4043;
	font-size: 14px;
	line-height: 1.58;
}

.uth-serp-context[hidden] {
	display: none;
}

.uth-serp-context__label {
	display: block;
	margin-bottom: 4px;
	color: #70757a;
	font-size: 12px;
}

.uth-serp-context__title {
	display: block;
	margin-bottom: 4px;
	color: #1a0dab;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
}

.uth-serp-context__text {
	margin: 0;
}

.uth-serp-context--ai {
	padding: 16px 18px;
	background: linear-gradient(180deg, #f4f8ff 0%, #fff 100%);
	border: 1px solid #e3ecf8;
	border-radius: 12px;
}

.uth-serp-ai-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: #202124;
	font-size: 16px;
	font-weight: 600;
}

.uth-serp-ai-label::before {
	content: "";
	width: 18px;
	height: 18px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234285f4" d="M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4z"/><circle cx="19" cy="18" r="2.5" fill="%2334a853"/></svg>') no-repeat center / contain;
}

.uth-serp-ai-text {
	margin: 0;
	color: #4d5156;
}

.uth-serp-snippet {
	max-width: 652px;
}

.uth-serp-snippet--dummy {
	margin-top: 28px;
	padding-top: 2px;
}

.uth-serp-snippet__source {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.uth-serp-snippet__favicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	overflow: hidden;
	color: #fff;
	background: #dadce0;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.uth-serp-snippet__favicon-img {
	display: block;
	width: 18px;
	height: 18px;
}

.uth-serp-snippet__meta {
	min-width: 0;
}

.uth-serp-snippet__site {
	display: block;
	margin-bottom: 2px;
	color: #202124;
	font-size: 14px;
	font-weight: 700;
}

.uth-serp-snippet__url {
	display: block;
	color: #0d652d;
	font-size: 14px;
	line-height: 1.25;
	word-break: break-word;
}

.uth-serp-snippet__title {
	margin: 0 0 4px;
	color: var(--uth-serp-google-blue);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

.uth-serp-snippet__title:hover {
	text-decoration: underline;
}

.uth-serp-snippet__title strong,
.uth-serp-snippet__description strong {
	font-weight: 700;
}

.uth-serp-snippet__rating {
	margin: 0 0 4px;
	color: var(--uth-serp-yellow);
	font-size: 14px;
}

.uth-serp-snippet__rating[hidden] {
	display: none;
}

.uth-serp-snippet__rating span {
	color: #4d5156;
}

.uth-serp-snippet__description {
	margin: 0;
	color: #4d5156;
	font-size: 14px;
	line-height: 1.58;
}

.uth-serp-google.is-mobile .uth-serp-google__head {
	gap: 14px;
	margin: -4px -10px 0;
	padding: 0 10px;
}

.uth-serp-google.is-mobile .uth-google-logo {
	font-size: 22px;
}

.uth-serp-google.is-mobile .uth-serp-google__search {
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
}

.uth-serp-google.is-mobile .uth-serp-google__nav {
	margin: 12px -10px 0;
	padding: 0 6px;
}

.uth-serp-google.is-mobile .uth-serp-snippet__title {
	font-size: 18px;
}

.uth-serp-google.is-mobile .uth-serp-snippet__description {
	font-size: 13px;
	line-height: 1.5;
}

@media (max-width: 900px) {
	.uth-serp-workspace {
		grid-template-columns: 1fr;
	}

	.uth-serp-bar {
		flex-wrap: wrap;
	}

	.uth-serp-bar__tools {
		width: 100%;
		overflow-x: auto;
	}
}

@media (max-width: 640px) {
	.uth-serp-landing__grid {
		grid-template-columns: 1fr;
	}

	.uth-serp-landing__form {
		padding: 16px;
	}

	.uth-serp-workspace {
		width: 100%;
		padding: 16px;
	}

	.uth-serp-results,
	.uth-serp-editor {
		padding: 14px;
	}

	.uth-serp-google {
		padding: 16px;
	}
}