/**
 * Единая шапка IQMO — эталон subject-biology / subject-chemistry.
 * Подключать после Google Fonts, до page-specific <style>.
 */
:root {
	--site-max: 1280px;
	--site-gutter: 28px;
}

.shell {
	width: 100%;
	max-width: var(--site-max);
	margin: 0 auto;
	padding: 24px var(--site-gutter) 56px;
	box-sizing: border-box;
}

.topnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	align-self: stretch;
	box-sizing: border-box;
	padding: 10px 14px;
	background: var(--surface, #fff);
	border: 1px solid var(--line, #e6e8f0);
	border-radius: 18px;
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 18, 38, 0.04), 0 1px 1px rgba(15, 18, 38, 0.03));
	gap: 12px;
}
.topnav .brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	text-decoration: none;
	color: inherit;
}
.topnav .brand-mark {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: linear-gradient(135deg, #4f46e5, #7c3aed);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.5px;
	box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}
.topnav .brand-name {
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.2px;
}
.topnav .nav-mid {
	display: flex;
	gap: 4px;
	flex: 1;
	justify-content: center;
}
/* ВАЖНО: селекторы для пунктов меню используют дочерний комбинатор «>».
   Раньше тут было `.topnav .nav-mid a, .topnav .nav-mid span`, и общие
   стили подхватывали вложенные спаны внутри .rb-rating
   (__ico/__text/__badge) — у бейджа «NEW» слетало абсолютное
   позиционирование, и он раздувался в большое оранжевое пятно. Дочерний
   комбинатор оставляет правила только для прямых детей .nav-mid. */
.topnav .nav-mid > a,
.topnav .nav-mid > span {
	padding: 8px 14px;
	border-radius: 10px;
	color: var(--muted, #6b7094);
	font-weight: 600;
	font-size: 13.5px;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	cursor: pointer;
}
.topnav .nav-mid > a:hover {
	background: var(--bg, #f6f7fb);
	color: var(--ink-2, #2a2e4a);
}
.topnav .nav-mid > a.is-active {
	color: var(--ink, #0f1226);
	background: var(--primary-50, #eef0ff);
}
.topnav .nav-mid > .is--disabled {
	cursor: default;
	opacity: 0.5;
	pointer-events: none;
}
.topnav .nav-mid > .is--disabled:hover {
	background: transparent;
	color: var(--muted, #6b7094);
}
/* Кнопка «Рейтинг» (.rb-rating, см. rating-button.css) внутри топ-меню:
   общие правила .topnav .nav-mid > a выигрывают по специфичности и сбивают
   золотой фон/цвет/font-size/padding/transition, поэтому возвращаем их
   обратно. Сам hover/halo управляются исходными стилями модуля. */
.topnav .nav-mid > a.rb-rating,
.topnav .nav-mid > a.rb-rating:hover {
	padding: 9px 14px 9px 12px;
	background: linear-gradient(180deg, #fffaed 0%, #fff5da 100%);
	color: #0f1226;
	font-size: 14px;
	font-weight: 700;
	transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.topnav .nav-right {
	display: flex;
	gap: 8px;
	align-items: center;
}
.topnav .pill-btn {
	padding: 8px 10px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 13px;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	line-height: 1.2;
}
/* Авторизованный блок: плоские «Профиль» / «Выйти» — как на subject-biology */
.topnav .nav-right .pill-btn:not(.primary) {
	background: transparent;
	color: var(--ink-2, #2a2e4a);
	box-shadow: none;
}
.topnav .nav-right .pill-btn:not(.primary):hover {
	background: var(--bg, #f6f7fb);
}
/* Гость: фиолетовая «Войти» */
.topnav .nav-right .pill-btn.primary {
	background: linear-gradient(180deg, var(--primary, #4f46e5), var(--primary-2, #6366f1));
	color: #fff;
	box-shadow: 0 6px 14px rgba(79, 70, 229, 0.32);
	padding: 8px 14px;
}
.topnav .nav-right .pill-btn.primary:hover {
	filter: brightness(1.04);
}
.topnav .avatar {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: linear-gradient(135deg, #a5b4fc, #7c3aed);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.topnav + .crumbs,
.crumbs {
	display: flex;
	gap: 6px;
	align-items: center;
	color: var(--muted, #6b7094);
	font-size: 12.5px;
	margin: 14px 4px 4px;
	font-weight: 600;
}
.crumbs a {
	color: var(--muted, #6b7094);
	text-decoration: none;
}
.crumbs a:hover {
	color: var(--ink-2, #2a2e4a);
}
.crumbs .sep {
	opacity: 0.5;
}
.crumbs b,
.crumbs .cur {
	color: var(--ink-2, #2a2e4a);
	font-weight: 700;
}

@media (max-width: 768px) {
	:root {
		--site-gutter: 16px;
	}
	.shell {
		padding-top: 16px;
		padding-bottom: 40px;
	}
	.topnav .nav-mid {
		display: none;
	}
}