:root {
	--ae-surface: #09111f;
	--ae-accent: #0ea5e9;
	--ae-card-bg: #ffffff;
	--ae-card-border: #dce7f5;
	--ae-text-main: #0f172a;
	--ae-text-soft: #52607a;
	--ae-radius-lg: 18px;
	--ae-radius-md: 12px;
}

.ae-repo-directory {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 20px;
	margin: 1rem 0 2rem;
	font-family: "Manrope", "Segoe UI", sans-serif;
}

.ae-repo-directory--wide {
	grid-template-columns: 1fr;
}

.ae-repo-directory__sidebar {
	position: sticky;
	top: 90px;
	align-self: start;
}

.ae-repo-panel {
	background: linear-gradient(180deg, #f7fbff 0%, #edf6ff 100%);
	border: 1px solid #d6e6fa;
	border-radius: var(--ae-radius-lg);
	padding: 14px;
	margin-bottom: 12px;
}

.ae-repo-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--ae-text-main);
	margin-bottom: 6px;
}

.ae-repo-label--small {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--ae-text-soft);
	margin: 8px 0 4px;
}

.ae-repo-input,
.ae-repo-select {
	width: 100%;
	border: 1px solid #cfe1f5;
	border-radius: var(--ae-radius-md);
	padding: 10px 12px;
	background: #fff;
	color: var(--ae-text-main);
}

.ae-repo-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
	color: var(--ae-text-main);
	font-size: 14px;
}

.ae-repo-btn {
	background: linear-gradient(135deg, color-mix(in srgb, var(--ae-accent) 75%, #004e7a) 0%, var(--ae-accent) 100%);
	border: none;
	color: #fff;
	border-radius: var(--ae-radius-md);
	padding: 10px 14px;
	font-weight: 700;
	cursor: pointer;
}

.ae-repo-btn:hover {
	filter: brightness(1.03);
}

.ae-repo-btn--ghost {
	background: #fff;
	color: var(--ae-text-main);
	border: 1px solid #d2e1f4;
}

.ae-repo-top-filters {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
	gap: 10px;
	margin-bottom: 12px;
}

.ae-repo-directory__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 6px 0 12px;
}

.ae-repo-directory__count {
	font-weight: 700;
	color: var(--ae-text-main);
}

.ae-repo-directory__status {
	font-size: 13px;
	color: var(--ae-text-soft);
}

.ae-repo-grid {
	display: grid;
	gap: 14px;
}

.ae-repo-grid--emulator {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ae-repo-grid--game,
.ae-repo-grid--tool {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ae-repo-card {
	background: var(--ae-card-bg);
	border: 1px solid var(--ae-card-border);
	border-radius: var(--ae-radius-lg);
	padding: 12px;
	text-decoration: none;
	color: inherit;
	display: grid;
	gap: 10px;
	box-shadow: 0 6px 18px rgba(14, 30, 64, 0.06);
}

.ae-repo-card:hover {
	transform: translateY(-1px);
	transition: 0.2s transform ease;
}

.ae-repo-card__media {
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 12px;
	background: linear-gradient(120deg, #e7f2ff 0%, #f6fbff 100%);
	object-fit: cover;
}

.ae-repo-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ae-repo-card__logo {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	background: #f0f5ff;
}

.ae-repo-card__title {
	font-weight: 800;
	color: var(--ae-text-main);
	line-height: 1.25;
}

.ae-repo-card__summary {
	font-size: 13px;
	color: var(--ae-text-soft);
	min-height: 36px;
}

.ae-repo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ae-repo-pill {
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 4px 8px;
	background: #f2f8ff;
	color: #1d4b75;
	border: 1px solid #d8e9ff;
}

.ae-repo-scores {
	display: flex;
	gap: 8px;
	font-size: 11px;
	color: #0f3559;
}

.ae-repo-scores span {
	border: 1px solid #d6e7f7;
	border-radius: 999px;
	padding: 4px 8px;
	background: #f6fbff;
}

.ae-repo-directory__pager {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

.ae-repo-directory__pager .ae-repo-btn {
	min-width: 120px;
}

@media (max-width: 1200px) {
	.ae-repo-grid--game,
	.ae-repo-grid--tool {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.ae-repo-directory {
		grid-template-columns: 1fr;
	}

	.ae-repo-directory__sidebar {
		position: static;
	}

	.ae-repo-grid--emulator,
	.ae-repo-grid--game,
	.ae-repo-grid--tool {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ae-repo-top-filters {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.ae-repo-grid--emulator,
	.ae-repo-grid--game,
	.ae-repo-grid--tool {
		grid-template-columns: 1fr;
	}

	.ae-repo-top-filters {
		grid-template-columns: 1fr;
	}
}

.ae-repo-single,
.ae-repo-archive {
	max-width: 1200px;
	margin: 1rem auto 2rem;
	padding: 0 1rem;
}

.ae-repo-archive__header {
	margin-bottom: 14px;
}

.ae-repo-archive__header h1 {
	margin-bottom: 4px;
}

.ae-repo-single__hero {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 18px;
	margin-bottom: 18px;
}

.ae-repo-single__hero-content h1 {
	margin-top: 0;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.ae-repo-single__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.ae-repo-single__content {
	background: #fff;
	border: 1px solid #dbe8f8;
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 14px;
}

.ae-repo-single__related h2 {
	margin-bottom: 10px;
}

@media (max-width: 980px) {
	.ae-repo-single__hero {
		grid-template-columns: 1fr;
	}

	.ae-repo-single__grid {
		grid-template-columns: 1fr;
	}
}

.ae-repo-compat-widget,
.ae-repo-canrun-widget {
	background: #ffffff;
	border: 1px solid #dbe8f8;
	border-radius: 14px;
	padding: 14px;
	margin: 14px 0;
}

.ae-repo-compat-widget h3,
.ae-repo-canrun-widget h3 {
	margin: 0 0 10px;
}

.ae-repo-compat-table-wrap {
	overflow-x: auto;
}

.ae-repo-compat-frontend-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ae-repo-compat-frontend-table th,
.ae-repo-compat-frontend-table td {
	border-bottom: 1px solid #e6edf8;
	padding: 10px 8px;
	text-align: left;
	vertical-align: middle;
}

.ae-repo-compat-frontend-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #4e5f7e;
}

.ae-repo-pill--good {
	background: #e6f9ef;
	border-color: #b7ebcb;
	color: #0f6b34;
}

.ae-repo-pill--muted {
	background: #f2f5fb;
	border-color: #e0e8f6;
	color: #5c6a83;
}

.ae-repo-canrun-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.ae-repo-canrun-grid label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ae-text-main);
	margin-bottom: 4px;
}

.ae-repo-canrun-grid input,
.ae-repo-canrun-grid select {
	width: 100%;
	border: 1px solid #cfe1f5;
	border-radius: 10px;
	padding: 9px 10px;
}

.ae-repo-canrun-check {
	display: flex;
	align-items: end;
}

.ae-repo-canrun-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.ae-repo-canrun-status {
	font-size: 13px;
	color: #4b5f81;
}

.ae-repo-canrun-result {
	margin-top: 12px;
}

.ae-repo-canrun-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #dbe8f8;
	border-radius: 12px;
	background: #f7fbff;
}

.ae-repo-canrun-emulator {
	font-weight: 800;
	color: #0f172a;
}

.ae-repo-canrun-score {
	font-size: 12px;
	color: #4f6180;
}

.ae-repo-canrun-verdict {
	font-size: 12px;
	font-weight: 800;
	border-radius: 999px;
	padding: 6px 10px;
}

.ae-repo-canrun-verdict--recommended {
	background: #e6f9ef;
	color: #0f6b34;
	border: 1px solid #b7ebcb;
}

.ae-repo-canrun-verdict--playable {
	background: #ecf8ff;
	color: #045c9f;
	border: 1px solid #bfe4ff;
}

.ae-repo-canrun-verdict--borderline {
	background: #fff6e8;
	color: #8a4b00;
	border: 1px solid #ffdca8;
}

.ae-repo-canrun-verdict--not_recommended {
	background: #ffedf0;
	color: #8f1c2c;
	border: 1px solid #ffc9d0;
}

.ae-repo-canrun-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.ae-repo-canrun-columns h4,
.ae-repo-canrun-alts h4 {
	margin: 0 0 8px;
}

.ae-repo-canrun-columns ul {
	margin: 0;
	padding-left: 18px;
}

.ae-repo-canrun-alt-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.ae-repo-canrun-alt-card {
	display: grid;
	grid-template-columns: 34px 1fr;
	grid-template-areas:
		"logo name"
		"logo score";
	gap: 2px 8px;
	text-decoration: none;
	background: #fff;
	border: 1px solid #dbe8f8;
	border-radius: 12px;
	padding: 8px;
}

.ae-repo-canrun-alt-card img,
.ae-repo-canrun-alt-logo {
	grid-area: logo;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	object-fit: cover;
	background: #eaf3ff;
}

.ae-repo-canrun-alt-name {
	grid-area: name;
	font-weight: 700;
	color: #0f172a;
}

.ae-repo-canrun-alt-score {
	grid-area: score;
	font-size: 12px;
	color: #51617d;
}

.ae-repo-canrun-error {
	background: #ffedf0;
	border: 1px solid #ffc9d0;
	color: #8f1c2c;
	padding: 8px 10px;
	border-radius: 10px;
}

@media (max-width: 980px) {
	.ae-repo-canrun-grid {
		grid-template-columns: 1fr 1fr;
	}

	.ae-repo-canrun-alt-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.ae-repo-canrun-grid,
	.ae-repo-canrun-columns,
	.ae-repo-canrun-alt-grid {
		grid-template-columns: 1fr;
	}
}