/* Fixim — «Проблемы» (/expertise): все, мои разделы, раздел, бренд, модель, поиск */

.fx-exp { padding: 22px 0 8px; }
.fx-exp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }

/* ---- шапка ---- */
.fx-exp h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; font-size: 38px; line-height: 1.12; font-weight: 800; letter-spacing: -0.028em; color: var(--fx-text); }
.fx-exp-cat-ico { width: 40px; height: 40px; object-fit: contain; }
.fx-exp-mycats { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-weight: 600; color: var(--fx-link) !important; }
.fx-exp-rss a { font-size: 14px; color: var(--fx-muted); float: none !important; }

/* ---- фильтры: разделы и производители «чипами» (разметка из expertise.php: <div><a>Название</a> число</div>) ---- */
.fx-exp-filter { margin: 0 0 22px; }
.fx-exp-filter-label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--fx-muted); }
.fx-exp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-exp-chips[hidden] { display: none; }
.fx-exp-chips > div { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border: 1px solid #DCE4EE; border-radius: 999px; background: #fff; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fx-muted); transition: border-color .15s ease, box-shadow .15s ease; }
.fx-exp-chips > div a { font-size: 14px; font-weight: 600; color: var(--fx-text); text-decoration: none; }
.fx-exp-chips > div a:after { content: ''; position: absolute; inset: 0; border-radius: 999px; } /* весь «чип» — ссылка */
.fx-exp-chips > div:hover { border-color: #9DBDE6; box-shadow: 0 2px 8px rgba(37,99,235,.10); }
.fx-exp-chips > div:hover a { color: var(--fx-link); }
.fx-exp-chips-more { padding: 7px 13px; border: 1px dashed #B9C8D8; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--fx-link); cursor: pointer; }
.fx-exp-chips-more:hover { border-style: solid; background: #fff; }

/* ---- заголовок списка и сортировка ---- */
.fx-exp-listhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 36px 0 16px; } /* отделён от фильтров: это уже другой блок */
.fx-exp-listhead:first-child { margin-top: 4px; } /* фильтров нет — заголовок первый в колонке */
.fx-exp-listhead h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--fx-text); }
.fx-exp-sort { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #E9EEF4; }
.fx-exp-sort a, .fx-exp-sort span { padding: 6px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--fx-muted); text-decoration: none; }
.fx-exp-sort a:hover { color: var(--fx-text); background: rgba(255,255,255,.6); }
.fx-exp-sort span[aria-current] { color: var(--fx-text); background: #fff; box-shadow: 0 1px 3px rgba(15,58,99,.12); }

/* ---- список: одна карточка, в строке слева модель, справа её проблемы (строка проблемы — общая с главной, site.css) ---- */
.fx-exp-list { margin: 0 0 16px; overflow: hidden; }
.fx-exp-list:not(:has(li)) { display: none; } /* проблем нет — пустую карточку не показываем */
.fx-exp-list .fx-plist { padding: 0; }
.fx-plist .fx-exp-group { gap: 28px; padding: 14px 18px 14px 12px; align-items: flex-start; } /* значок «?» висит в свободном месте колонки модели (site.css) */
.fx-exp-prod { flex: none; width: 140px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; text-align: center; text-decoration: none; }
.fx-exp-prod-title { font-size: 12.5px; line-height: 1.3; color: var(--fx-muted); overflow-wrap: break-word; hyphens: auto; } /* переносы по словам и слогам, не по буквам */
.fx-exp-prod:hover .fx-exp-prod-title { color: var(--fx-link); }
.fx-exp-qs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fx-exp-q + .fx-exp-q { margin-top: 13px; padding-top: 13px; border-top: 1px dashed #E3E9F0; } /* проблемы одной модели — тоньше, чем граница между моделями */

.fx-exp-empty { padding: 22px 24px; color: var(--fx-muted); }
.fx-exp-empty p { margin: 0; }
.fx-exp-empty a { color: var(--fx-link); }

/* ---- боковая колонка ---- */
.fx-exp-side { display: flex; flex-direction: column; gap: 16px; }
.fx-exp-side noindex { display: contents; }
.fx-exp-side h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; line-height: 1.25; font-weight: 800; color: var(--fx-text); }
.fx-exp-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: #E8F6EC; font-size: 15px; color: #23743A; }
.fx-exp-ico:before { margin: 0; }
.fx-exp-ico.icon-megaphone { background: #FFF2DB; color: #B45309; }
.fx-exp-ico.icon-lightbulb { background: #F3E8FF; color: #7C3AED; }
.fx-exp-ico.icon-chat-empty { background: #E0F2FE; color: #0369A1; }
.fx-exp-ico.icon-book { background: #E6F0FF; color: #1D4ED8; }
.fx-exp-ico.icon-puzzle { background: #FDE8EC; color: #BE123C; }

/* стать экспертом */
.fx-exp-join { padding: 20px; background: linear-gradient(165deg, #EFFAF2, #fff 55%); border-color: #CDE9D5; }
.fx-exp-perks { margin: 0 0 16px; padding: 0; list-style: none; }
.fx-exp-perks li { display: flex; gap: 8px; margin: 0 0 7px; font-size: 14px; line-height: 1.45; color: #2B3D50; }
.fx-exp-perks .icon-ok { flex: none; color: var(--fx-green); }
.fx-exp-perks .icon-ok:before { margin: 0; }
.fx-exp-join-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--fx-text); }
.fx-exp-join-input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border: 1px solid #CFDAE5; border-radius: 10px; background: #fff; font: inherit; font-size: 15px; }
.fx-exp-join-input:focus { outline: 0; border-color: var(--fx-link); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.fx-exp-join .fx-exp-join-tip { margin: 6px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--fx-muted); }
.fx-exp-join .fx-btn { width: 100%; justify-content: center; min-height: 46px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.fx-exp-join .error_input { font-size: 13px; color: #C0392B; }
.fx-exp-join-login { margin: 12px 0 0; font-size: 14px; text-align: center; color: var(--fx-muted); }
.fx-exp-join-login a { font-weight: 600; color: var(--fx-link); }

/* карточка вошедшего эксперта */
.fx-exp-me { padding: 20px; }
.fx-exp-me-head { display: flex; gap: 12px; align-items: center; }
.fx-exp-me-ava img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px #E3E9F0; }
.fx-exp-me-nick { font-size: 17px; font-weight: 800; color: var(--fx-text); text-decoration: none; }
.fx-exp-me-nick:hover { color: var(--fx-link); }
/* значки — как .fx-expert-ach в site.css: у глифов шрифта иконок свои боковые отступы, их обнуляем, иначе символ уезжает из розетки */
.fx-exp-me-ach { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.fx-exp-me-ach .badge { position: relative; flex: none; width: 22px; height: 22px; line-height: 22px; font-size: 22px; text-align: center; opacity: .85; }
.fx-exp-me-ach .badge:hover { opacity: 1; }
.fx-exp-me-ach .badge span:before { margin: 0; }
.fx-exp-me-ach .badge span.icon-certificate { display: block; }
.fx-exp-me-ach .badge span.b { position: absolute; left: 0; top: 0; width: 22px; line-height: 22px; font-size: 11px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.fx-exp-me-info { display: grid; gap: 1px; margin: 16px 0 0; border-radius: 12px; overflow: hidden; background: #EEF2F6; }
.fx-exp-me-info div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: #FAFBFD; }
.fx-exp-me-info dt { font-size: 13px; color: var(--fx-muted); }
.fx-exp-me-info dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; color: var(--fx-text); }
.fx-exp-me-info dd img { display: none; } /* старая картинка-ленточка звания */
.fx-exp-me-info dd { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.fx-exp-me-info dd div:empty { display: none; }
.fx-exp-me-info dd a { color: var(--fx-text); }
.fx-exp-me-company { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--fx-link); }
.fx-exp-next { margin-top: 16px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #F0F6FF, #EFFAF2); font-size: 14px; color: #2B3D50; }
.fx-exp-next b { display: block; font-size: 15px; color: var(--fx-text); }
.fx-exp-next-row { margin-top: 6px; }
.fx-exp-next a { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--fx-link); }
.fx-exp-progress { height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px #DCE6F0; overflow: hidden; }
.fx-exp-progress div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--fx-green), #2563EB); }

/* списки справа: отзывы, заметки, форум, инструкции, объявления (общая разметка .block > .spisok: subject, type, desc, misc).
   Запись: подпись модели сверху (как в основном списке), заголовок, 2 строки текста, автор и дата; записи разделены тонкой линией */
.fx-exp-box { padding: 18px 18px 0; overflow: hidden; }
.fx-exp-box-list { margin: 0 -18px; }
.fx-exp-box-list a.block { display: block; padding: 12px 18px; border: 0; border-top: 1px solid #EEF2F6; text-decoration: none; color: inherit; transition: background .15s ease; }
.fx-exp-box-list a.block:first-child { border-top: 0; padding-top: 4px; }
.fx-exp-box-list a.block:hover { background: #F7F9FC; }
.fx-exp-box .spisok { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; border: 0; } /* без пунктира и отступов старых списков */
.fx-exp-box .spisok .type { order: -1; font-size: 12px; line-height: 1.35; color: #7A8A9A; } /* модель — подписью над заголовком */
.fx-exp-box .spisok .subject { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--fx-text); overflow-wrap: anywhere; }
.fx-exp-box a.block:hover .subject { color: var(--fx-link); }
.fx-exp-box .spisok .desc { margin: 1px 0 0; padding: 0; font-size: 13.5px; line-height: 1.45; color: #4A5B6C; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-exp-box .spisok .misc { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: 4px; font-size: 12px; color: #8A99A8; font-variant-numeric: tabular-nums; }
.fx-exp-box .spisok .misc > div { float: none !important; margin-right: auto; padding-right: 6px; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: #5B6B7B; } /* автор слева, комментарии и дата — справа */
.fx-exp-box .spisok .misc > div:not(:empty):before { content: '\e807'; font-family: 'awesome'; font-size: 11px; font-weight: normal; color: #A9BACD; } /* значок автора */
.fx-exp-box .spisok .misc [class^="icon-"] { color: #A9BACD; margin-left: 10px; } /* число стоит вплотную к значку (через пробел из шаблона), между счётчиками — 10px */
.fx-exp-box .spisok .misc [class^="icon-"]:before { margin: 0; }
.fx-exp-box .spisok .img img { max-width: 100%; margin-top: 6px; border-radius: 10px; }
/* ссылки внизу блока: отдельной строкой, с заглавной и шевроном */
.fx-exp-box-more { display: flex; align-items: center; justify-content: space-between; margin: 0 -18px; padding: 12px 18px; border-top: 1px solid #EEF2F6; font-size: 14px; font-weight: 600; color: var(--fx-link); text-decoration: none; }
.fx-exp-box-more:after { content: ''; width: 7px; height: 7px; margin-right: 3px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .7; }
.fx-exp-box-more:hover { background: #F7F9FC; }

@media (max-width: 1100px) {
	.fx-exp-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
	.fx-exp-prod { width: 120px; }
}
@media (max-width: 900px) {
	.fx-exp { padding-left: 16px; padding-right: 16px; }
	.fx-exp-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
	/* модель — строкой над проблемами */
	.fx-plist .fx-exp-group { flex-direction: column; gap: 10px; padding: 12px 16px; } /* .fx-plist — иначе общее правило списка (gap 36px) перебивает */
	/* модель строкой сверху — свободного места слева нет, значок «?» в строке перед заголовком */
	.fx-exp-list .fx-sol-title { text-indent: 0; }
	.fx-exp-list .fx-sol-title:before { width: auto; }
	.fx-exp-prod { flex-direction: row; width: auto; gap: 10px; text-align: left; padding: 0; }
	.fx-exp-prod .fx-sol-img { width: 40px; height: 40px; border-radius: 10px; }
	.fx-exp-prod .fx-sol-img img { max-width: 34px; max-height: 34px; }
	.fx-exp-prod-title { font-size: 13px; font-weight: 600; }
	.fx-exp h1 { font-size: 28px; }
	.fx-exp-listhead { margin-top: 28px; }
	.fx-exp-listhead h2 { font-size: 20px; }
}
.fx-exp-box-ads .spisok .misc > div:not(:empty):before { content: '\e827'; } /* в объявлениях первым идёт город, а не автор */

/* цвет блока в тексте — точечно: подпись модели, значок автора, ссылка внизу (тот же цвет, что у квадрата с иконкой в шапке) */
.fx-exp-box { --fx-acc: #5B6B7B; }
.fx-exp-box-ads { --fx-acc: #BE123C; }
.fx-exp-box .spisok .type { color: var(--fx-acc); opacity: .85; }
.fx-exp-box .spisok .misc > div:not(:empty):before { color: var(--fx-acc); opacity: .55; }
.fx-exp-box-more { color: var(--fx-acc); }

/* ---- «Инструкции и документация» (сайдбар «Проблем» и страниц разделов): синяя гамма, значок файла с типом ---- */
.fx-docs {
	position: relative; overflow: hidden; padding: 20px 18px 16px; border-radius: 20px; border: 1px solid #CFDDF6; color: var(--fx-text);
	background:
		radial-gradient(circle, rgba(29,78,216,.06) 1px, transparent 1.5px) 0 0 / 14px 14px,
		radial-gradient(300px 160px at 100% 0%, rgba(59,130,246,.16), transparent 70%),
		linear-gradient(170deg, #F0F5FF, #fff 45%);
}
.fx-docs-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.fx-docs-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(160deg, #2563EB, #1D4ED8); box-shadow: 0 6px 14px rgba(29,78,216,.28); font-size: 19px; color: #fff; }
.fx-docs-ico:before { margin: 0; }
.fx-docs h2 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 800; }
.fx-docs-list { margin: 0 -8px 12px; padding: 0; list-style: none; }
.fx-docs-list li { margin: 0; }
.fx-docs-list li + li { border-top: 1px solid #E4EBF7; }
.fx-docs-item { display: flex; gap: 12px; padding: 12px 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s ease, box-shadow .15s ease; }
.fx-docs-item:hover { background: rgba(255,255,255,.85); box-shadow: 0 4px 14px rgba(29,78,216,.10); }
/* значок файла: лист с загнутым уголком и типом */
.fx-docf { position: relative; flex: none; width: 36px; height: 44px; border-radius: 6px 12px 6px 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #BFD0EE; }
.fx-docf:before { content: ''; position: absolute; right: 0; top: 0; width: 11px; height: 11px; border-radius: 0 10px 0 4px; background: linear-gradient(225deg, #F4F7FD 50%, #BFD0EE 50%); }
.fx-docf span { position: absolute; left: -4px; bottom: 6px; padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #1D4ED8; }
.fx-docf-pdf span { background: #DC2626; }
.fx-docf-doc span, .fx-docf-docx span { background: #2563EB; }
.fx-docf-zip span, .fx-docf-rar span { background: #B45309; }
.fx-docf-djvu span, .fx-docf-other span { background: #5B6B7B; }
.fx-docs-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-docs-model { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.fx-docs-item:hover .fx-docs-model { color: #1D4ED8; }
.fx-docs-file { font-size: 12.5px; color: #7A8A9A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-docs-desc { margin-top: 2px; font-size: 13px; line-height: 1.45; color: #4A5B6C; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-docs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; font-size: 12px; color: #7A8A9A; }
.fx-docs-size { padding: 1px 7px; border-radius: 999px; background: #E6F0FF; font-weight: 700; color: #1D4ED8; font-variant-numeric: tabular-nums; }
.fx-docs-meta [class^="icon-"] { color: #93A9D6; margin-right: 3px; }
.fx-docs-meta [class^="icon-"]:before { margin: 0; }
.fx-docs-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border-radius: 13px; background: linear-gradient(180deg, #2F6BF0, #1D4ED8); box-shadow: 0 8px 18px rgba(29,78,216,.25), inset 0 1px 0 rgba(255,255,255,.2); font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.fx-docs-btn:first-letter { text-transform: uppercase; }
.fx-docs-btn:after { content: ''; width: 8px; height: 8px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); transition: transform .15s ease; }
.fx-docs-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(29,78,216,.35), inset 0 1px 0 rgba(255,255,255,.2); }
.fx-docs-btn:hover:after { transform: translateX(3px) rotate(45deg); }
.fx-docs-btn:focus-visible { outline: 3px solid #BFDBFE; outline-offset: 2px; }
.fx-docs-add { display: block; margin-top: 10px; text-align: center; font-size: 13.5px; font-weight: 600; color: #1D4ED8; text-decoration: none; }
.fx-docs-btn + .fx-docs-add { margin-top: 10px; }
.fx-docs-add:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .fx-docs-btn, .fx-docs-btn:after, .fx-docs-item { transition: none; } }

/* ---- «Обсуждение …» (сайдбар «Проблем» и страниц разделов): небесно-синяя гамма форума, начало сообщения — «облачком» как в чате ---- */
.fx-forum {
	position: relative; overflow: hidden; padding: 20px 18px 16px; border-radius: 20px; border: 1px solid #C9E2F3; color: var(--fx-text);
	background:
		radial-gradient(circle, rgba(3,105,161,.06) 1px, transparent 1.5px) 0 0 / 14px 14px,
		radial-gradient(300px 160px at 100% 0%, rgba(56,189,248,.18), transparent 70%),
		linear-gradient(170deg, #EFF8FD, #fff 45%);
}
.fx-forum-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.fx-forum-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(160deg, #0EA5E9, #0369A1); box-shadow: 0 6px 14px rgba(3,105,161,.28); font-size: 19px; color: #fff; }
.fx-forum-ico:before { margin: 0; }
.fx-forum h2 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 800; }
.fx-forum-list { margin: 0 -8px 12px; padding: 0; list-style: none; }
.fx-forum-list li { margin: 0; }
.fx-forum-list li + li { border-top: 1px solid #E1EEF6; }
.fx-forum-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s ease, box-shadow .15s ease; }
.fx-forum-item:hover { background: rgba(255,255,255,.85); box-shadow: 0 4px 14px rgba(3,105,161,.10); }
.fx-forum-top { display: flex; gap: 10px; align-items: flex-start; }
.fx-forum-ava { width: 34px; height: 34px; font-size: 14px; }
.fx-forum-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fx-forum-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fx-forum-item:hover .fx-forum-title { color: #0369A1; }
.fx-forum-model { font-size: 12px; color: #0369A1; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* облачко: хвостик смотрит на кружок автора */
.fx-forum-bubble { position: relative; margin-left: 44px; padding: 8px 11px; border-radius: 4px 12px 12px 12px; background: #fff; box-shadow: 0 0 0 1px #D6E8F4; font-size: 13px; line-height: 1.45; color: #3A4C5E; overflow-wrap: anywhere; }
.fx-forum-bubble > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 2 строки — на тексте, не на облачке (иначе в отступ просвечивает третья) */
.fx-forum-bubble:has(> span:empty) { display: none; }
.fx-forum-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-left: 44px; font-size: 12px; color: #7A8A9A; }
.fx-forum-nick { font-weight: 600; color: #4A5B6C; margin-right: auto; }
.fx-forum-replies { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: #E0F2FE; font-weight: 700; color: #0369A1; }
.fx-forum-replies [class^="icon-"]:before { margin: 0; }
.fx-forum-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border-radius: 13px; background: linear-gradient(180deg, #0EA5E9, #0369A1); box-shadow: 0 8px 18px rgba(3,105,161,.25), inset 0 1px 0 rgba(255,255,255,.2); font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.fx-forum-btn:after { content: ''; width: 8px; height: 8px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); transition: transform .15s ease; }
.fx-forum-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(3,105,161,.35), inset 0 1px 0 rgba(255,255,255,.2); }
.fx-forum-btn:hover:after { transform: translateX(3px) rotate(45deg); }
.fx-forum-btn:focus-visible { outline: 3px solid #BAE6FD; outline-offset: 2px; }
.fx-forum-add { display: block; margin-top: 10px; text-align: center; font-size: 13.5px; font-weight: 600; color: #0369A1; text-decoration: none; }
.fx-forum-add:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .fx-forum-btn, .fx-forum-btn:after, .fx-forum-item { transition: none; } }

/* ---- «Заметки и советы» (сайдбар «Проблем» и страниц разделов): фиолетовая гамма, заметка — страница блокнота с линией полей ---- */
.fx-notes {
	position: relative; overflow: hidden; padding: 20px 18px 16px; border-radius: 20px; border: 1px solid #E1D4FA; color: var(--fx-text);
	background:
		radial-gradient(circle, rgba(124,58,237,.06) 1px, transparent 1.5px) 0 0 / 14px 14px,
		radial-gradient(300px 160px at 100% 0%, rgba(167,139,250,.22), transparent 70%),
		linear-gradient(170deg, #F6F1FF, #fff 45%);
}
.fx-notes-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.fx-notes-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(160deg, #8B5CF6, #6D28D9); box-shadow: 0 6px 14px rgba(109,40,217,.28); font-size: 19px; color: #fff; }
.fx-notes-ico:before { margin: 0; }
.fx-notes h2 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 800; }
.fx-notes-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; overflow: visible; }
.fx-notes-list li { margin: 0; }
/* страница блокнота: белый лист, слева фиолетовая линия полей */
.fx-notes-item { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #E9E0FB, 0 2px 6px rgba(109,40,217,.05); text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.fx-notes-item:before { content: none; } /* линия полей убрана — без лишних вертикальных черт слева */
.fx-notes-item:hover { box-shadow: 0 0 0 1px #D6C6F8, 0 8px 18px rgba(109,40,217,.12); transform: translateY(-1px); }
.fx-notes-model { font-size: 12px; color: #6D28D9; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-notes-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fx-notes-item:hover .fx-notes-title { color: #6D28D9; }
.fx-notes-text > span { font-size: 13px; line-height: 1.45; color: #4A5B6C; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-notes-text:has(> span:empty) { display: none; }
.fx-notes-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 4px; font-size: 12px; color: #7A8A9A; font-variant-numeric: tabular-nums; }
.fx-notes-nick { font-weight: 600; color: #4A5B6C; margin-right: auto; }
.fx-notes-votes { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: #EDE9FE; font-weight: 700; color: #6D28D9; }
.fx-notes-com { display: inline-flex; align-items: center; gap: 4px; }
.fx-notes-meta [class^="icon-"]:before { margin: 0; }
.fx-notes-com [class^="icon-"] { color: #A78BFA; }
.fx-notes-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border-radius: 13px; background: linear-gradient(180deg, #8B5CF6, #6D28D9); box-shadow: 0 8px 18px rgba(109,40,217,.25), inset 0 1px 0 rgba(255,255,255,.2); font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.fx-notes-btn:first-letter { text-transform: uppercase; }
.fx-notes-btn:after { content: ''; width: 8px; height: 8px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); transition: transform .15s ease; }
.fx-notes-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(109,40,217,.35), inset 0 1px 0 rgba(255,255,255,.2); }
.fx-notes-btn:hover:after { transform: translateX(3px) rotate(45deg); }
.fx-notes-btn:focus-visible { outline: 3px solid #DDD6FE; outline-offset: 2px; }
.fx-notes-add { display: block; margin-top: 10px; text-align: center; font-size: 13.5px; font-weight: 600; color: #6D28D9; text-decoration: none; }
.fx-notes-add:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .fx-notes-btn, .fx-notes-btn:after, .fx-notes-item { transition: none; } }

/* ---- «Отзывы» (сайдбар «Проблем» и страниц разделов): янтарная гамма, отзыв — цитата с крупной кавычкой, внизу автор и модель ---- */
.fx-rev {
	position: relative; overflow: hidden; padding: 20px 18px 16px; border-radius: 20px; border: 1px solid #F3DDB5; color: var(--fx-text);
	background:
		radial-gradient(circle, rgba(180,83,9,.06) 1px, transparent 1.5px) 0 0 / 14px 14px,
		radial-gradient(300px 160px at 100% 0%, rgba(251,191,36,.22), transparent 70%),
		linear-gradient(170deg, #FFF8EC, #fff 45%);
}
.fx-rev-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.fx-rev-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(160deg, #F59E0B, #B45309); box-shadow: 0 6px 14px rgba(180,83,9,.28); font-size: 18px; color: #fff; }
.fx-rev-ico:before { margin: 0; }
.fx-rev h2 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 800; }
.fx-rev-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; overflow: visible; }
.fx-rev-list li { margin: 0; }
.fx-rev-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #F3E3C4, 0 2px 6px rgba(180,83,9,.05); text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.fx-rev-item:hover { box-shadow: 0 0 0 1px #EBCF9C, 0 8px 18px rgba(180,83,9,.12); transform: translateY(-1px); }
/* цитата: крупная кавычка слева сверху */
.fx-rev-quote { position: relative; display: block; padding-left: 26px; }
.fx-rev-quote:before { content: '\201C'; position: absolute; left: -2px; top: -10px; font-family: Georgia, 'Times New Roman', serif; font-size: 44px; line-height: 1; font-weight: 700; color: #F59E0B; }
.fx-rev-quote > span { font-size: 14px; line-height: 1.5; color: #2B3D50; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fx-rev-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid #F6EBD6; }
.fx-rev-ava { width: 30px; height: 30px; font-size: 13px; }
.fx-rev-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.fx-rev-nick { font-size: 13px; font-weight: 700; color: var(--fx-text); }
.fx-rev-prod { font-size: 12px; color: #B45309; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-rev-item:hover .fx-rev-prod { text-decoration: underline; }
.fx-rev-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; color: #8A99A8; font-variant-numeric: tabular-nums; }
.fx-rev-votes { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: #FEF3C7; font-size: 12px; font-weight: 700; color: #B45309; }
.fx-rev-votes [class^="icon-"]:before { margin: 0; }
.fx-rev-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; margin-top: 12px; border-radius: 13px; background: linear-gradient(180deg, #F59E0B, #B45309); box-shadow: 0 8px 18px rgba(180,83,9,.25), inset 0 1px 0 rgba(255,255,255,.2); font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.fx-rev-btn:first-letter { text-transform: uppercase; }
.fx-rev-btn:after { content: ''; width: 8px; height: 8px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); transition: transform .15s ease; }
.fx-rev-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(180,83,9,.35), inset 0 1px 0 rgba(255,255,255,.2); }
.fx-rev-btn:hover:after { transform: translateX(3px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .fx-rev-btn, .fx-rev-btn:after, .fx-rev-item { transition: none; } }