/* AndroidEmulator — emulator detail page graphical revamp.
 * Layers over the shared full-page shell + ae2 modules: adds score bars,
 * icon capability cards, and a more visual hierarchy. */

.ae-emu-glance {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0 0 28px;
}
.ae-emu-glance__item {
	background: var(--ae-surface-2, #161d2b);
	border: 1px solid var(--ae-border-subtle, #1b2436);
	border-radius: var(--ae-radius-lg, 14px);
	padding: 14px 16px;
}
.ae-emu-glance__item span {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ae-text-3, #7d8ea5);
}
.ae-emu-glance__meter {
	height: 6px;
	border-radius: 99px;
	background: var(--ae-surface-1, #0d121c);
	overflow: hidden;
	margin: 8px 0 6px;
}
.ae-emu-glance__fill {
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--ae-accent, #0f62fe), var(--ae-cyan, #22d3ee));
}
.ae-emu-glance__item strong {
	color: var(--ae-text-1, #f4f6fb);
	font-size: 1.05rem;
}

.ae2-quad__title {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ae2-quad__icon {
	font-size: 1.25rem;
	line-height: 1;
}

.ae-emu-feat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
	margin-top: 16px;
}
.ae-emu-feat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--ae-radius-md, 12px);
	background: var(--ae-surface-1, #0d121c);
	border: 1px solid var(--ae-border-subtle, #1b2436);
	font-size: 0.88rem;
	color: var(--ae-text-2, #b6c0d0);
}
.ae-emu-feat__icon {
	font-size: 1.15rem;
}
.ae-emu-feat.is-on {
	border-color: color-mix(in srgb, var(--ae-green, #22c55e) 45%, transparent);
}
.ae-emu-feat.is-on .ae-emu-feat__icon {
	color: var(--ae-green, #22c55e);
}

.ae2-verdict__card {
	position: relative;
	overflow: hidden;
}
.ae2-verdict__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ae-green, #22c55e), transparent);
}
.ae2-verdict__card--warn::before {
	background: linear-gradient(90deg, var(--ae-amber, #f59e0b), transparent);
}

.ae-emu-divers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-top: 16px;
}
.ae-emu-diver {
	text-align: center;
	padding: 16px 12px;
	border-radius: var(--ae-radius-lg, 14px);
	background: var(--ae-surface-2, #161d2b);
	border: 1px solid var(--ae-border-subtle, #1b2436);
}
.ae-emu-diver .ae-emu-diver__val {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--ae-text-1, #f4f6fb);
}
.ae-emu-diver .ae-emu-diver__label {
	font-size: 0.78rem;
	color: var(--ae-text-3, #7d8ea5);
	margin-top: 4px;
}

@media (max-width: 760px) {
	.ae-emu-glance {
		grid-template-columns: repeat(2, 1fr);
	}
}