/* Results panel. */
.smgpu-results {
	padding: 1.25rem;
	background: var(--smgpu-bg, #fff);
	border: 1px solid var(--smgpu-border, #e1e7f3);
	border-radius: var(--smgpu-radius, 14px);
}

.smgpu-results[hidden] {
	display: none;
}

.smgpu-results h3 {
	margin-top: 0;
}

.smgpu-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.smgpu-table th,
.smgpu-table td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--smgpu-border, #e1e7f3);
}

.smgpu-table th {
	width: 45%;
	font-weight: 500;
	color: var(--smgpu-muted, #5b6475);
}

.smgpu-table td {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.smgpu-table tr:last-child th,
.smgpu-table tr:last-child td {
	font-weight: 700;
	color: var(--smgpu-primary, #0b5cff);
	border-bottom: 0;
}

.smgpu-results .smgpu-buttons {
	margin: 1rem 0 0;
}

.smgpu-submit {
	display: grid;
	gap: 0.6rem;
	margin-top: 1rem;
	padding-top: 1rem;
	font-size: 0.85rem;
	color: var(--smgpu-muted, #5b6475);
	border-top: 1px solid var(--smgpu-border, #e1e7f3);
}

@media print {
	body * {
		visibility: hidden;
	}

	.smgpu-results,
	.smgpu-results * {
		visibility: visible;
		color: #000 !important;
		background: #fff !important;
	}

	.smgpu-results {
		position: absolute;
		inset: 0 auto auto 0;
		width: 100%;
		border: 0;
	}

	.smgpu-results .smgpu-buttons,
	.smgpu-submit {
		display: none !important;
	}
}

/* ---------------- SMG Verdict ---------------- */
.smgpu-results {
	color: var(--smgpu-text, #0b1220);
}

.smgpu-results__sub,
.smgpu-verdict h4 {
	margin: 1.5rem 0 0.5rem;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smgpu-muted, #5b6475);
}

.smgpu-verdict {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
	margin-bottom: 1rem;
	background: var(--smgpu-surface, #f5f8ff);
	border: 1px solid var(--smgpu-border, #e1e7f3);
	border-radius: 12px;
}

.smgpu-verdict__top {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
}

.smgpu-eyebrow {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smgpu-primary, #0b5cff);
}

.smgpu-verdict__head h3 {
	margin: 0.1rem 0 0.3rem;
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
}

.smgpu-verdict__lede {
	margin: 0 0 0.25rem;
}

.smgpu-verdict__sub {
	margin: 0;
	font-size: 0.88rem;
	color: var(--smgpu-muted, #5b6475);
}

.smgpu-tier {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	font-size: 2.4rem;
	font-weight: 800;
	color: #fff;
	background: #5b6475;
	border-radius: 14px;
}

.smgpu-tier--S { background: #0b5cff; }
.smgpu-tier--A { background: #12a150; }
.smgpu-tier--B { background: #3a6ea5; }
.smgpu-tier--C { background: #9a5b00; }
.smgpu-tier--D { background: #b42318; }

.smgpu-index {
	display: grid;
	justify-items: end;
	text-align: right;
}

.smgpu-index strong {
	font-size: 2.2rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.smgpu-index span,
.smgpu-index em {
	font-size: 0.75rem;
	font-style: normal;
	color: var(--smgpu-muted, #5b6475);
}

.smgpu-compare {
	margin: 0;
	padding: 0.6rem 0.85rem;
	font-size: 0.9rem;
	background: #fff;
	border: 1px solid var(--smgpu-border, #e1e7f3);
	border-radius: 8px;
}

.smgpu-verdict__grid {
	display: grid;
	grid-template-columns: minmax(0, 300px) 1fr;
	gap: 1.25rem;
	align-items: center;
}

.smgpu-verdict__grid figure {
	margin: 0;
}

.smgpu-radar,
.smgpu-slices {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	aspect-ratio: 1;
}

.smgpu-slices {
	max-width: 420px;
	aspect-ratio: 320 / 90;
}

.smgpu-axes {
	display: grid;
	gap: 0.8rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.smgpu-axes__row {
	display: flex;
	justify-content: space-between;
	font-size: 0.92rem;
}

.smgpu-axes__bar {
	display: block;
	height: 6px;
	margin: 0.25rem 0;
	overflow: hidden;
	background: #e6ecf7;
	border-radius: 3px;
}

.smgpu-axes__bar i {
	display: block;
	height: 100%;
	background: var(--smgpu-primary, #0b5cff);
}

.smgpu-axes small {
	font-size: 0.78rem;
	color: var(--smgpu-muted, #5b6475);
}

.smgpu-chip {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	border-radius: 999px;
}

.smgpu-chip--yes { color: #14532d; background: #dcf2e3; }
.smgpu-chip--maybe { color: #7a4a00; background: #fbecc9; }
.smgpu-chip--no { color: #8a1c13; background: #fbe0dd; }

.smgpu-table--plain tr:last-child th,
.smgpu-table--plain tr:last-child td {
	color: inherit;
	font-weight: inherit;
	border-bottom: 1px solid var(--smgpu-border, #e1e7f3);
}

.smgpu-table--plain th {
	width: 60%;
	color: var(--smgpu-text, #0b1220);
}

.smgpu-advice {
	padding-left: 1.2rem;
	margin: 0.25rem 0;
	line-height: 1.55;
}

.smgpu-advice li + li {
	margin-top: 0.4rem;
}

@media (max-width: 640px) {
	.smgpu-verdict__top {
		grid-template-columns: auto 1fr;
	}

	.smgpu-index {
		grid-column: 1 / -1;
		justify-items: start;
		text-align: left;
	}

	.smgpu-verdict__grid {
		grid-template-columns: 1fr;
	}
}

.smgpu-scorecard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0 0 0.5rem; }
.smgpu-scorecard > div { padding: 0.9rem 1rem; background: #f5f8ff; border: 1px solid #e1e7f3; border-radius: 12px; }
.smgpu-scorecard__label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5b6475; }
.smgpu-scorecard strong { font-size: 1.8rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.smgpu-band { font-size: 1.4rem !important; }
.smgpu-band--entry { color: #8a1c13; } .smgpu-band--mainstream { color: #7a4a00; } .smgpu-band--performance { color: #0b5cff; } .smgpu-band--high { color: #0a7a3a; } .smgpu-band--enthusiast { color: #6a2bd9; }
@media (max-width: 560px) { .smgpu-scorecard { grid-template-columns: 1fr; } }

/* ---- responsive ---- */
.smgpu-results { min-width: 0; padding: clamp(0.9rem, 3vw, 1.5rem); -webkit-tap-highlight-color: rgba(11, 92, 255, 0.15); }
.smgpu-results :focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.smgpu-results .smgpu-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.smgpu-results .smgpu-btn { min-height: 44px; }
.smgpu-table th { overflow-wrap: anywhere; }
.smgpu-table td, .smgpu-table th { vertical-align: top; }
.smgpu-scorecard { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.smgpu-scorecard > div { min-width: 0; }
.smgpu-scorecard strong { overflow-wrap: anywhere; }
.smgpu-verdict__grid figure { justify-self: center; width: 100%; }
.smgpu-submit input[type='checkbox'] { width: 22px; height: 22px; accent-color: var(--smgpu-primary, #0b5cff); }
.smgpu-submit label { display: flex; gap: 0.6rem; align-items: flex-start; min-height: 44px; }
@media (max-width: 640px) {
	.smgpu-results .smgpu-buttons .smgpu-btn { flex: 1 1 calc(50% - 0.25rem); }
	.smgpu-verdict { padding: 1rem; }
	.smgpu-tier { width: 3.5rem; height: 3.5rem; font-size: 1.9rem; }
	.smgpu-index strong { font-size: 1.8rem; }
	.smgpu-table th { width: 48%; }
	.smgpu-table th, .smgpu-table td { padding: 0.5rem 0.4rem; font-size: 0.92rem; }
	.smgpu-radar { max-width: 260px; margin-inline: auto; }
}
@media (max-width: 400px) { .smgpu-results .smgpu-buttons .smgpu-btn { flex-basis: 100%; } }
.smgpu-scorecard { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.smgpu-scorecard > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .smgpu-scorecard { grid-template-columns: repeat(3, 1fr); } .smgpu-scorecard > div:last-child:nth-child(odd) { grid-column: auto; } }