:root {
	--af-primary: #1f6f5f;
	--af-primary-dark: #155348;
}

html,
body,
button,
input,
select,
textarea {
	font-family: Inter, "Noto Sans", "Noto Sans Mongolian", Arial, sans-serif;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--af-primary);
	border-color: var(--af-primary);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--af-primary-dark);
	border-color: var(--af-primary-dark);
}

.af-mobile-shell {
	margin: 0 auto;
	max-width: 880px;
	padding: 1rem;
}

.af-mobile-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.af-mobile-card {
	align-items: center;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #dfe3e8);
	border-radius: 12px;
	color: var(--text-color, #1f2937);
	display: flex;
	font-size: 1rem;
	font-weight: 600;
	justify-content: center;
	min-height: 76px;
	padding: 0.9rem;
	text-align: center;
	text-decoration: none;
}

.af-mobile-card:hover,
.af-mobile-card:focus-visible {
	border-color: var(--af-primary);
	box-shadow: 0 0 0 3px rgb(31 111 95 / 18%);
	color: var(--af-primary-dark);
	outline: none;
	text-decoration: none;
}

@media (max-width: 390px) {
	.af-mobile-shell {
		padding: 0.75rem;
	}

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

	.af-mobile-card {
		font-size: 0.94rem;
		min-height: 72px;
	}
}