/* Fixim — основные стили нового дизайна. Подключается после style.css и переопределяет его. */

@font-face {
	font-family: 'Onest';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url(/fonts/onest/onest-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Onest';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url(/fonts/onest/onest-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--fx-navy: #0A2540;
	--fx-navy2: #0F3A63;
	--fx-navy-deep: #071C31;
	--fx-green: #2E9A4E;
	--fx-green-hover: #25883D;
	--fx-amber: #F5A524;
	--fx-link: #2563EB;
	--fx-bg: #F4F6F9;
	--fx-text: #12202E;
	--fx-muted: #5B6B7B;
	--fx-line: #E2E8F0;
	--fx-wrap: 1200px;
}

/* ---- база ---- */
html { background-color: var(--fx-navy-deep); }
body {
	font-family: Onest, 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--fx-text);
	background: var(--fx-bg);
	-webkit-font-smoothing: antialiased;
}
input, textarea, select, button { font-family: inherit; }
b, strong { font-weight: 600; }
a { color: var(--fx-link); }
h1 { font-weight: 800; letter-spacing: -0.02em; color: var(--fx-text); text-shadow: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--fx-amber);
	outline-offset: 2px;
}
.fx-code {
	display: inline-block;
	font-weight: 700;
	background: var(--fx-amber);
	color: #2B1D00;
	padding: 1px 8px;
	border-radius: 6px;
	font-variant-numeric: tabular-nums;
}

/* ---- зелёная кнопка «Объём»: .fx-btn (новый дизайн) и .button-green (старые шаблоны) ---- */
.fx-btn, a.fx-btn, a.fx-btn:visited,
.button-green, .button-green:link, .button-green:visited {
	color: #fff;
	background-color: var(--fx-green);
	background-image: linear-gradient(180deg, #3CB463 0%, #2A9149 100%);
	border: 0;
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.14), 0 1px 2px rgba(10,37,64,.25), 0 4px 12px rgba(46,154,78,.28);
	text-shadow: 0 1px 0 rgba(0,0,0,.18);
	font-weight: 600;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
/* у старых кнопок фокус рисовал светящуюся заливку — теперь фокус показывает общая жёлтая рамка */
.button-green:focus, .button-green:link:focus, .button-green:visited:focus {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.14), 0 1px 2px rgba(10,37,64,.25), 0 4px 12px rgba(46,154,78,.28);
}
/* :hover должен перебивать a.fx-btn:visited, иначе на посещённой ссылке цвет «мигает» */
.fx-btn:hover, a.fx-btn:hover, a.fx-btn:visited:hover,
.button-green:hover, .button-green:link:hover, .button-green:visited:hover {
	color: #fff;
	filter: brightness(1.07);
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.14), 0 2px 4px rgba(10,37,64,.25), 0 8px 20px rgba(46,154,78,.38);
}
.fx-btn:active, a.fx-btn:active,
.button-green:active, .button-green:link:active, .button-green:visited:active {
	filter: brightness(.97);
	transform: translateY(1px);
	box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 1px 2px rgba(10,37,64,.2);
}

/* ---- шапка ---- */
.fx-top {
	position: relative;
	color: #fff;
	background:
		radial-gradient(700px 260px at 85% 0%, rgba(37,99,235,.35), transparent 60%),
		linear-gradient(160deg, var(--fx-navy) 0%, var(--fx-navy2) 100%);
}
.fx-wrap {
	width: min(var(--fx-wrap), calc(100% - 32px));
	margin: 0 auto;
}

/* колонки старой вёрстки: были под 1000px, теперь тянутся до 1200px */
@media (min-width: 901px) {
	.content { width: min(var(--fx-wrap), calc(100% - 32px)); }
	.left_column { width: calc(100% - 350px); }
	.right_wide_column { width: calc(100% - 395px); }
	.right_wide_column2 { width: calc(100% - 245px); }
}
.fx-bar {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 64px;
}
/* логотип из трёх частей: плашка, ключ, надпись. При наведении ключ «подкручивается», по плашке пробегает блик */
.fx-logo { --fx-logo-h: 40px; display: flex; align-items: center; flex: 0 0 auto; }
.fx-logo-mark { position: relative; flex: none; width: var(--fx-logo-h); height: var(--fx-logo-h); }
.fx-logo-mark img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-logo-word { display: block; width: auto; height: var(--fx-logo-h); }
.fx-logo-key { transform-origin: 50% 50%; }
.fx-logo-shine { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; border-radius: 22.5%; overflow: hidden; pointer-events: none; }
.fx-logo-shine:before {
	content: '';
	position: absolute;
	top: -20%; bottom: -20%; left: -80%;
	width: 55%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
	transform: skewX(-18deg);
	opacity: 0;
}
.fx-logo:hover .fx-logo-key, .fx-logo:focus-visible .fx-logo-key { animation: fx-logo-twist .7s cubic-bezier(.3,1.4,.5,1); }
.fx-logo:hover .fx-logo-shine:before, .fx-logo:focus-visible .fx-logo-shine:before { animation: fx-logo-sweep .75s ease-out; }
@keyframes fx-logo-twist { 0% { transform: rotate(0); } 35% { transform: rotate(-28deg); } 65% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
@keyframes fx-logo-sweep { 0% { left: -80%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.fx-nav {
	position: relative;
	display: flex;
	gap: 2px;
	flex: 1 1 auto;
	font-weight: 500;
	font-size: 15px;
}
.fx-nav a { padding: 8px 11px; color: #DCE7F3; text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.fx-nav a:hover, .fx-nav a:focus-visible, .fx-nav a[aria-current] { color: #fff; }
/* бегущая дорожка платы под пунктом меню (js/site.js): едет за курсором, возвращается к текущему разделу */
.fx-nav-ind {
	position: absolute;
	left: 0; bottom: 1px;
	width: 0; height: 8px;
	opacity: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, #4ADE80, #60A5FA) left center / calc(100% - 8px) 2px no-repeat,
		radial-gradient(circle at center, #0F3A63 2px, #60A5FA 2.5px, #60A5FA 4px, transparent 4.5px) right center / 8px 8px no-repeat;
	transition: left .35s cubic-bezier(.5,.1,.2,1), width .35s cubic-bezier(.5,.1,.2,1), opacity .2s ease;
}
.fx-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.fx-btn, a.fx-btn, a.fx-btn:visited {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.fx-btn-ghost, a.fx-btn-ghost, a.fx-btn-ghost:visited {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}
.fx-btn-ghost:hover, a.fx-btn-ghost:hover, a.fx-btn-ghost:visited:hover { background: rgba(255,255,255,.1); color: #fff; }
.fx-icon-link, a.fx-icon-link:visited {
	position: relative;
	display: inline;
	color: #DCE7F3;
	text-decoration: none;
	font-size: 18px;
	padding: 6px;
}
.fx-icon-link:hover, a.fx-icon-link:visited:hover { color: #fff; }
.fx-icon-link span[id$="_count"] {
	font-size: 12px;
	font-weight: 700;
	background: var(--fx-amber);
	color: #2B1D00;
	border-radius: 999px;
	padding: 0 6px;
	margin-left: 2px;
	vertical-align: 2px;
}

/* меню пользователя */
.fx-user { position: relative; }
.fx-user > button {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: #DCE7F3;
	cursor: pointer;
}
.fx-user img { width: 34px; height: 34px; border-radius: 50%; display: block; border: 2px solid rgba(255,255,255,.35); }
.fx-user-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 600;
	min-width: 230px;
	padding: 8px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(10,37,64,.25);
}
.fx-user-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--fx-text);
	text-decoration: none;
	font-size: 15px;
}
.fx-user-menu a:hover { background: var(--fx-bg); }

/* строка поиска в шапке */
.fx-searchbar { padding: 4px 0 18px; }
.fx-search {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	padding: 5px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
	transition: box-shadow .2s ease;
}
.fx-search:focus-within { box-shadow: 0 0 0 4px rgba(46,160,90,.35), 0 10px 30px rgba(0,0,0,.25); }
.fx-search-ico { display: flex; padding-left: 10px; color: var(--fx-muted); }
.fx-search input[type=text] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: none;
	font: inherit;
	font-size: 17px;
	color: var(--fx-text);
	padding: 10px 4px;
	background: transparent;
}
.fx-search input[type=text]:focus-visible { outline: none; }
.fx-search .fx-btn { min-height: 44px; padding: 0 22px; font-size: 16px; }
.fx-search-here {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 8px;
	font-size: 14px;
	color: #C9D8E8;
}
.fx-search-here input[type=checkbox] { margin: 0 0 0 2px; } /* браузерный отступ справа (8px) убран — подпись ближе к галочке */

/* бургер (мобильный) */
.fx-burger {
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.08);
	color: #fff;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.fx-burger-lines,
.fx-burger-lines:before,
.fx-burger-lines:after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	position: relative;
}
.fx-burger-lines:before, .fx-burger-lines:after { content: ''; position: absolute; left: 0; }
.fx-burger-lines:before { top: -6px; }
.fx-burger-lines:after { top: 6px; }

.fx-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* панель админа и уведомления */
.admin { background: #E2E8F0; }

/* ---- подвал: логотип с описанием, три колонки ссылок, юридическая строка; фон — продолжение шапки ---- */
.fx-foot {
	position: relative;
	overflow: hidden;
	margin-top: 64px;
	color: #B9CBDD;
	font-size: 15px;
	background:
		radial-gradient(800px 300px at 90% 0%, rgba(37,99,235,.28), transparent 60%),
		linear-gradient(180deg, #0B2742 0%, var(--fx-navy-deep) 70%);
}
.fx-foot-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 32px;
	padding: 48px 0 36px;
}
.fx-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.fx-foot-col b { color: #fff; font-weight: 700; margin-bottom: 4px; }
.fx-foot a { color: #B9CBDD; text-decoration: none; transition: color .15s ease; }
.fx-foot a:hover { color: #fff; }
.fx-foot-col a [class^="icon-"] { margin-right: 6px; }
.fx-foot .fx-foot-logo { min-height: 0; } /* у логотипа шапки на узких экранах min-height 64px — в подвале не нужен */
.fx-foot .fx-foot-slogan { margin: 6px 0 0; padding: 0; max-width: 300px; line-height: 1.55; color: #8EA6BF; }
.fx-foot-misc {
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 18px 0 28px;
	font-size: 13px;
	color: #7F97B0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}
.fx-foot-misc a { color: #7F97B0; }
.fx-foot-misc a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .fx-foot a { transition: none; } }

/* ---- компактная шапка при прокрутке (js/site.js) ---- */
html { scroll-padding-top: 76px; } /* якоря (#s123) не прячутся под шапкой */
.fx-top.fx-fixed {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 600;
	background: rgba(10,37,64,.9);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	box-shadow: 0 8px 24px rgba(10,37,64,.25);
	animation: fx-slide-down .25s ease-out;
	max-height: 100vh;
	overflow-y: auto;
}
.fx-top.fx-fixed .fx-bar { min-height: 56px; }
.fx-top.fx-fixed .fx-logo { --fx-logo-h: 34px; }
.fx-top.fx-fixed .fx-searchbar { display: none; }
.fx-top.fx-fixed.fx-search-open .fx-searchbar { display: block; padding-top: 0; }
@keyframes fx-slide-down { from { transform: translateY(-100%); } to { transform: none; } }
.fx-search-toggle {
	display: none;
	width: 40px; height: 40px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.08);
	color: #fff;
	font-size: 16px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.fx-search-toggle:hover { background: rgba(255,255,255,.16); }
.fx-top.fx-fixed .fx-search-toggle { display: inline-flex; }

/* ---- кнопка «наверх» ---- */
a#back-top {
	left: auto;
	right: 20px;
	bottom: 20px;
	margin: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--fx-navy2);
	box-shadow: 0 8px 22px rgba(10,37,64,.3);
	font-size: 0;
	opacity: .92;
	transition: opacity .2s ease, transform .2s ease;
}
a#back-top:before { content: none; }
a#back-top:after {
	content: '';
	position: absolute;
	left: 50%; top: 52%;
	width: 12px; height: 12px;
	border-left: 3px solid #fff;
	border-top: 3px solid #fff;
	transform: translate(-50%, -30%) rotate(45deg);
}
a#back-top:hover { opacity: 1; transform: translateY(-2px); }

/* ---- ленивые картинки проявляются, а не выскакивают ---- */
img.lazy { transition: opacity .35s ease; }
img.lazy.loading { opacity: 0; }

/* ---- коды ошибок в тексте (js/site.js) ---- */
.fx-code { font-size: .88em; line-height: 1.25; padding: 0 .4em; border-radius: 5px; vertical-align: .05em; white-space: nowrap; }

/* ---- общие элементы блоков (заголовок с картинкой, дорожка платы, карточки, плашки иконок) ---- */
.fx-page h1, .fx-page h2, .fx-page h3 { padding: 0; text-shadow: none; }
/* старая обёртка .content обрезает всё по краю (overflow: hidden для обтекания колонок) — новым страницам это не нужно:
   иначе обрезаются тени, подсветка фокуса и мерцание индикаторов у края */
.content:has(> .fx-page) { overflow: visible; }
.fx-page p { padding: 0; }
/* заголовок блока: подзаголовок с данными, «дорожка платы», справа тематическая картинка,
   прозрачная слева и проявляющаяся к правому краю */
.fx-sec-head {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 8px 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	padding-top: 6px;
}
.fx-sec-head > * { position: relative; z-index: 1; }
.fx-art:after {
	content: '';
	position: absolute;
	top: -8px; bottom: -6px; right: 0;
	width: 68%;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 100%);
}
.fx-art-devices:after { background-image: url(/image/art/devices.svg); }
.fx-art-board:after { background-image: url(/image/art/board.svg); }
.fx-art-questions:after { background-image: url(/image/art/questions.svg); }
.fx-art-search:after { background-image: url(/image/art/search.svg); }
.fx-art-tools:after { background-image: url(/image/art/tools.svg); }
.fx-sec-sub { margin: 4px 0 0; color: var(--fx-muted); font-size: 16px; }
.fx-trace { display: flex; align-items: center; width: 72px; margin-top: 14px; }
.fx-trace:before { content: ''; flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--fx-green), #2563EB); }
.fx-trace:after { content: ''; width: 9px; height: 9px; margin-left: -1px; border-radius: 50%; border: 3px solid #2563EB; background: var(--fx-bg); }
.fx-sec-head .fx-more { margin-right: -6px; padding: 2px 6px; border-radius: 8px; background: rgba(244,246,249,.85); }
.fx-sec-head h2, .fx-h2 {
	margin: 0;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--fx-text);
}
.fx-more { font-weight: 600; color: var(--fx-link); text-decoration: none; }
.fx-more:hover { text-decoration: underline; }
.fx-card {
	background: #fff;
	border: 1px solid #E3E9F0;
	border-radius: 18px;
}
.fx-lift { transition: transform .2s ease, box-shadow .2s ease; }
.fx-lift:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15,58,99,.14); }

.fx-cat-ico {
	width: 50px; height: 50px;
	flex: none;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.fx-cat-ico:before { margin: 0; }
.fx-tone1 { background: #E6F0FF; color: #1D4ED8; }
.fx-tone2 { background: #E7F7EC; color: #1E7A3C; }
.fx-tone3 { background: #FFF2DB; color: #B45309; }
.fx-tone4 { background: #F1E8FF; color: #6D28D9; }
.fx-tone5 { background: #E0F5F7; color: #0E7490; }
.fx-tone6 { background: #FDE8EC; color: #BE123C; }

/* ---- хлебные крошки (все страницы) ---- */
.fx-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 14px; color: var(--fx-muted); }
.fx-crumbs a { color: var(--fx-muted); text-decoration: none; }
.fx-crumbs a:hover { color: var(--fx-link); text-decoration: underline; }

/* ---- пагинация (navigation.html, все страницы) ---- */
.navigation_placeholder { margin: 8px 0 16px; }
.navigation_placeholder table { margin: 0 auto; border-collapse: separate; border-spacing: 6px 0; }
.navigation_placeholder td { padding: 0; }
.navigation_list a, .navigation_list_active span {
	min-width: 40px; height: 40px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	font-weight: 600;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.navigation_list a { background: #fff; border: 1px solid #E3E9F0; color: var(--fx-text); transition: border-color .15s ease, color .15s ease; }
.navigation_list a:hover { border-color: var(--fx-link); color: var(--fx-link); }
.navigation_list_active span { background: var(--fx-navy2); border: 1px solid var(--fx-navy2); color: #fff; }

/* ---- участник: аватар/инициалы, ачивки, значок звания (главная, «Сейчас на сайте» и др.) ---- */
.fx-ini, .fx-ava { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.fx-ava { display: block; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px #E3E9F0; } /* обводка — круг виден и у аватарок-логотипов на белом фоне */
.fx-ini { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; }
.fx-ini1 { background: linear-gradient(135deg, #2563EB, #0F3A63); }
.fx-ini2 { background: linear-gradient(135deg, #2E9A4E, #1E7A3C); }
.fx-ini3 { background: linear-gradient(135deg, #F59E0B, #B45309); }
.fx-ini4 { background: linear-gradient(135deg, #8B5CF6, #5B21B6); }
.fx-ini5 { background: linear-gradient(135deg, #06B6D4, #0E7490); }
.fx-ini6 { background: linear-gradient(135deg, #F43F5E, #BE123C); }
.fx-expert-ach { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.fx-ach-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; height: 22px; min-width: 0; overflow: hidden; } /* не влезший значок уходит на скрытую вторую строку — целиком, а не обрезанным */
.fx-ach-more { flex: none; font-size: 12px; font-weight: 400; line-height: 20px; color: #94A3B8; font-variant-numeric: tabular-nums; cursor: default; } /* тонко, без фона — не отвлекает от ника и цифр */
.fx-expert-ach .badge { position: relative; flex: none; width: 22px; height: 22px; line-height: 22px; font-size: 22px; text-align: center; opacity: .75; transition: opacity .15s ease; }
.fx-expert-ach .badge:hover { opacity: 1; }
.fx-expert-ach .badge span:before { margin: 0; }
.fx-expert-ach .badge span.b { position: absolute; left: 0; top: 0; width: 22px; line-height: 22px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* значок звания: звезда над шевроном (свой рисунок — не путается с ачивками), цвет растёт со званием */
.fx-rank {
	flex: none;
	width: 20px; height: 20px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.00%200.60%20L14.17%206.01%20L19.99%206.40%20L15.52%2010.14%20L16.94%2015.80%20L12.00%2012.70%20L7.06%2015.80%20L8.48%2010.14%20L4.01%206.40%20L9.83%206.01Z%22%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4.5%2017.6%20L12%2021.4%20L19.5%2017.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.00%200.60%20L14.17%206.01%20L19.99%206.40%20L15.52%2010.14%20L16.94%2015.80%20L12.00%2012.70%20L7.06%2015.80%20L8.48%2010.14%20L4.01%206.40%20L9.83%206.01Z%22%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4.5%2017.6%20L12%2021.4%20L19.5%2017.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.fx-rank0 { background: linear-gradient(180deg, #B4C0CD, #8A9AAB); }  /* участник */
.fx-rank1 { background: linear-gradient(180deg, #60A5FA, #2563EB); }  /* опытный */
.fx-rank2 { background: linear-gradient(180deg, #F48C7F, #D9534A); }  /* эксперт */
.fx-rank3 { background: linear-gradient(180deg, #6CC47A, #2E8B45); }  /* мастер — зелёный, как исходный значок */
.fx-rank4 { background: linear-gradient(180deg, #FCC94B, #D4920F); }  /* гуру */

/* ---- адаптив ---- */
/* шапка: меню из шести пунктов целиком помещается от 1280px; уже — плотнее; от 1140px и уже — под бургером */
@media (min-width: 1141px) and (max-width: 1279px) {
	.fx-bar { gap: 18px; }
	.fx-nav { font-size: 14px; gap: 0; }
	.fx-nav a { padding: 8px 7px; }
}
@media (max-width: 1140px) {
	.fx-bar { gap: 12px; flex-wrap: wrap; }
	/* высота строки с логотипом — у самих элементов: иначе при открытом меню min-height шапки делится на две строки и логотип подпрыгивает */
	.fx-logo, .fx-actions { min-height: 64px; }
	.fx-top.fx-fixed .fx-logo, .fx-top.fx-fixed .fx-actions { min-height: 56px; }
	.fx-burger { display: inline-flex; }
	.fx-nav {
		display: none;
		order: 10;
		flex: 1 1 100%;
		flex-direction: column;
		gap: 0;
		padding-bottom: 10px;
	}
	.fx-top.fx-open .fx-nav { display: flex; }
	.fx-nav a { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); }
	.fx-nav a[aria-current] { font-weight: 700; }
	.fx-nav-ind { display: none; }
}
@media (max-width: 960px) {
	.fx-foot-grid { grid-template-columns: 1fr 1fr; }
	.fx-foot-about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.fx-sec-head h2, .fx-h2 { font-size: 27px; }
	.fx-art:after { width: 70%; opacity: .5; background-size: contain; }
	.fx-sec-sub { font-size: 15px; }
	.fx-logo { --fx-logo-h: 36px; }
	.fx-actions .fx-btn { display: none; } /* «Задать вопрос» на мобильном — в меню */
	.fx-search .fx-btn { padding: 0 14px; }
	.fx-search .fx-btn-label { display: none; }
	.fx-foot-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (min-width: 561px) {
	.fx-nav .fx-only-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-btn, .fx-search, .button-green { transition: none; }
	.fx-top.fx-fixed { animation: none; }
	img.lazy, a#back-top { transition: none; }
	.fx-nav-ind, .fx-nav a { transition: none; }
	.fx-logo-key, .fx-logo-shine:before { animation: none !important; }
	.fx-btn:hover, .fx-btn:active, .button-green:hover, .button-green:active { transform: none !important; }
}

/* ---- дополнительные иконки (из Font Awesome 4.7, в метриках основного шрифта иконок): значки экспертов новых разделов ---- */
@font-face {
	font-family: 'awesome3';
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url(/fonts/awesome3.woff2) format('woff2'), url(/fonts/awesome3.woff) format('woff');
}
.icon-microchip:before, .icon-keyboard:before, .icon-hdd:before, .icon-cutlery:before, .icon-snowflake:before, .icon-headphones:before { font-family: 'awesome3'; }
.icon-microchip:before { content: '\f2db'; }
.icon-keyboard:before { content: '\f11c'; }
.icon-hdd:before { content: '\f0a0'; }
.icon-cutlery:before { content: '\f0f5'; }
.icon-snowflake:before { content: '\f2dc'; }
.icon-headphones:before { content: '\f025'; }

/* ---- вкладки раздела «О сайте» (/about, /faq, /achievements, /contact …): вместо старого бокового меню ---- */
.fx-info-tabs { display: flex; gap: 6px; margin: 0 0 30px; padding: 5px; border-radius: 14px; background: #E9EEF4; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fx-info-tabs::-webkit-scrollbar { display: none; }
.fx-info-tabs a, .fx-info-tabs span { flex: none; padding: 8px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--fx-muted); text-decoration: none; white-space: nowrap; }
.fx-info-tabs a:hover { color: var(--fx-text); background: rgba(255,255,255,.6); }
.fx-info-tabs a:focus-visible { outline: 2px solid var(--fx-link); outline-offset: 1px; }
.fx-info-tabs span[aria-current] { color: var(--fx-text); background: #fff; box-shadow: 0 1px 3px rgba(15,58,99,.12); }
@media (max-width: 700px) {
	/* на телефоне пункты переносятся, а не уезжают за край: все пять видны сразу */
	.fx-info-tabs { flex-wrap: wrap; gap: 4px; width: auto; overflow: visible; margin-bottom: 24px; }
	.fx-info-tabs a, .fx-info-tabs span { padding: 7px 12px; }
}

/* ---- подсказки в поиске (js/site.js, searchSuggest): слой в body под полем поиска ---- */
.fx-suggest { position: fixed; z-index: 1000; overflow-y: auto; padding: 6px; border: 1px solid #DCE4EE; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(10,37,64,.22); text-align: left; }
.fx-suggest[hidden] { display: none; }
.fx-suggest ul { margin: 0; padding: 0; list-style: none; }
.fx-suggest li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.fx-suggest li[aria-selected="true"] { background: #EEF4FC; }
.fx-suggest-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #F1F4F8; font-size: 15px; font-weight: 800; color: var(--fx-muted); }
.fx-suggest-ico:before { margin: 0; }
.fx-suggest-model .fx-suggest-ico { background: #E6F0FF; color: #1D4ED8; }
.fx-suggest-brand .fx-suggest-ico { background: var(--fx-navy); color: #fff; }
.fx-suggest-cat .fx-suggest-ico { background: #E8F6EC; color: #2E8B45; }
.fx-suggest-problem .fx-suggest-ico { background: #FFF4E0; color: #B7791F; }
.fx-suggest-text { display: flex; flex-direction: column; min-width: 0; }
.fx-suggest-title { font-size: 15px; line-height: 1.35; color: var(--fx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-suggest-title b { font-weight: 700; }
.fx-suggest-problem .fx-suggest-title, .fx-suggest-search .fx-suggest-title { font-weight: 400; }
.fx-suggest-model .fx-suggest-title, .fx-suggest-brand .fx-suggest-title, .fx-suggest-cat .fx-suggest-title { font-weight: 500; }
.fx-suggest-sub { font-size: 12.5px; line-height: 1.3; color: var(--fx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-suggest-search { border-bottom: 1px solid #EEF2F6; border-radius: 10px 10px 0 0 !important; margin-bottom: 4px !important; }
@media (max-width: 560px) {
	.fx-suggest li { padding: 9px 8px; gap: 10px; }
	.fx-suggest-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ---- списки проблем: один вид заголовка и статусов на всём сайте (главная, «Проблемы», старые шаблоны) ---- */
.fx-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #E7F7EC; font-size: 13px; color: #1E7A3C; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; }
a.fx-pill:hover { background: #D6F0DE; }
.fx-pill-none { background: #FFF2DB; color: #92400E; }
.fx-urgent { background: #FDE8EC; color: #BE123C; }
/* старые шаблоны (.question_list_placeholder): заголовок как в новых списках, без синего и значка «?» */
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject { padding-left: 0; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--fx-text); }
/* значок «?» перед заголовком проблемы во всех списках (вариант B: светло-серый, одинаковый) — главная, «Проблемы», старые шаблоны.
   Где слева есть свободное место (колонка модели шире картинки) — значок «висячий»: текст заголовка ровно по краю описания,
   значок на поле. На главной картинка вплотную к тексту — значок в строке перед заголовком. */
.fx-plist .fx-sol-title:before,
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject:before {
	content: '\e816';
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 0;
	font-family: 'awesome';
	font-size: .95em;
	font-weight: normal;
	color: #A9BACD;
	text-decoration: none;
}
/* висячий: «Проблемы» (справа от картинки в колонке модели ~40px свободно) и старые шаблоны (справа от картинки продукта ~40px).
   Значок остаётся в строке (выравнивается по тексту так же, как на главной), а первая строка заголовка сдвинута влево на его ширину
   (text-indent) — текст начинается ровно по краю описания, значок висит на поле. Без position/top — положение не зависит от округлений. */
.fx-exp-list .fx-sol-title,
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject { text-indent: -26px; }
.fx-exp-list .fx-sol-title:before,
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject:before { width: 18px; margin-right: 8px; text-align: center; text-indent: 0; }
/* старые шаблоны: блок проблемы стоит рядом с плавающей колонкой продукта и обрезал выступающее (overflow: hidden).
   flow-root даёт то же поведение рядом с колонкой, но не обрезает — значок выходит на свободное место справа от картинки продукта */
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .question { overflow: visible; display: flow-root; }
/* список без колонки продукта (страница модели и т.п.): слева свободного места нет — значок в строке перед заголовком */
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder):not(:has(.product)) .subject { text-indent: 0; }
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder):not(:has(.product)) .subject:before { width: auto; }
@media (max-width: 530px) {
	/* продукт строкой над проблемой — свободного места слева нет, значок в строке перед заголовком */
	.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject { text-indent: 0; }
	.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject:before { width: auto; }
}
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject a { color: var(--fx-text); }
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject a:hover { color: var(--fx-link); }
.question_list_placeholder .problem_type { margin-left: 0; margin-top: 2px; }
/* без значка «?» у заголовка отступ под него не нужен: описание и цифры — вровень с заголовком */
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .description { padding-left: 0; padding-top: 0; margin-top: 6px; font-size: 15px; line-height: 1.5; color: #3A4C5E; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* описание проблемы — две строки */
.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .same_block { padding-left: 0; margin-top: 12px; } /* отступ от описания */
@media (max-width: 560px) {
	.question_list_placeholder:not(.manual_list_placeholder):not(.advice_list_placeholder) .subject { font-size: 17px; }
}

/* ---- строка проблемы: картинка модели, подпись модели, заголовок, описание (2 строки), статусы —
        общая для списков главной («Новые/Популярные проблемы») и «Проблем» (/expertise); перенесено из home.css ---- */
.fx-sol-img { width: 72px; height: 72px; flex: none; border-radius: 14px; background: #F4F6F9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fx-sol-img img { max-width: 64px; max-height: 64px; width: auto; height: auto; }
.fx-sol-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fx-sol-device { font-size: 13px; color: var(--fx-muted); }
.fx-sol-device a { color: var(--fx-muted); text-decoration: none; }
.fx-sol-device a:hover { color: var(--fx-link); text-decoration: underline; }
.fx-sol-title { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--fx-text); text-decoration: none; }
.fx-sol-title:hover { color: var(--fx-link); }
.fx-sol-meta { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--fx-muted); font-variant-numeric: tabular-nums; }
.fx-sol-meta a { color: inherit; }
.fx-plist { list-style: none; margin: 0; padding: 6px 0; }
.fx-plist li { display: flex; gap: 14px; padding: 14px 20px; border-top: 1px solid #EEF2F6; }
.fx-plist li:first-child { border-top: 0; }
.fx-plist .fx-sol-img { width: 52px; height: 52px; border-radius: 12px; }
.fx-plist .fx-sol-img img { max-width: 44px; max-height: 44px; }
.fx-plist .fx-sol-desc { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: #3A4C5E; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* описание — две строки */
.fx-plist .fx-sol-desc:empty { display: none; }
@media (max-width: 560px) {
	.fx-sol-img { width: 56px; height: 56px; }
	.fx-sol-img img { max-width: 48px; max-height: 48px; }
	.fx-plist li { padding: 14px 16px; }
	.fx-sol-title, .fx-plist .fx-sol-title { font-size: 17px; } /* на телефоне чуть меньше — как и во всех списках */
}

/* ---- иконка раздела вместо фото продукта (image/cat-ico/*.svg — уже скруглённый цветной квадрат): во весь слот, без подложки для фото ---- */
.fx-sol-img:has(img[src*="/image/cat-ico/"]), .fx-sol-img:has(img[data-src*="/image/cat-ico/"]),
.fx-exp-prod-img:has(img[src*="/image/cat-ico/"]), .fx-exp-prod-img:has(img[data-src*="/image/cat-ico/"]) { background: none; box-shadow: none; }
.fx-sol-img img[src*="/image/cat-ico/"], .fx-sol-img img[data-src*="/image/cat-ico/"],
.fx-exp-prod-img img[src*="/image/cat-ico/"], .fx-exp-prod-img img[data-src*="/image/cat-ico/"] { width: 100% !important; height: 100% !important; max-width: none; max-height: none; }
.question_list_placeholder .image img[src*="/image/cat-ico/"], .question_list_placeholder .image img[data-src*="/image/cat-ico/"] { width: 56px; height: 56px; opacity: 1; }

/* ---- вкладки (страницы участника и продукта): прокручиваются по горизонтали на узком экране ---- */
.fx-usub-tabs { display: flex; gap: 6px; margin: 0 0 24px; padding-bottom: 2px; border-bottom: 1px solid #E3E9F0; overflow-x: auto; scrollbar-width: none; }
.fx-usub-tabs::-webkit-scrollbar { display: none; }
.fx-usub-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -3px; padding: 10px 14px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 600; color: var(--fx-muted); text-decoration: none; white-space: nowrap; }
.fx-usub-tab span { padding: 1px 7px; border-radius: 999px; background: #EEF2F6; font-size: 12px; font-weight: 700; color: var(--fx-muted); font-variant-numeric: tabular-nums; }
.fx-usub-tab:hover { color: var(--fx-text); }
.fx-usub-tab-on { border-bottom-color: #2563EB; color: var(--fx-text); }
.fx-usub-tab-on span { background: #E6F0FF; color: #1D4ED8; }

@media (max-width: 700px) {
	.fx-usub-tabs { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px; }
}