/**
 * Пользователи: профиль (users.details) и список (users.tpl).
 * Список пользователей дополнительно использует .s24-prj-list (стили аукциона из s24-projects.css).
 * @scope — Chrome 118+, Safari 17.4+, Firefox 128+.
 * Токены: var(--s24-*) из s24-tokens.css.
 */

/* ═══════════════════════════════════════════
   Страница профиля (users.details)
   ═══════════════════════════════════════════ */
@scope (.s24-user-page) {

	/* ═══ Status bar (online/offline) ═══ */
	.s24-user-status-bar {
		min-height: 40px;
		margin-bottom: var(--s24-space-3);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--s24-space-3);
		width: 100%;
		box-sizing: border-box;
	}

	/* Текст «Последний визит» сразу слева от бейджа, блок целиком справа */
	.s24-user-status-group {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 10px;
		max-width: 100%;
	}

	.s24-status {
		display: inline-flex;
		align-items: center;
		font-size: var(--s24-body);
		font-weight: 600;
		padding: 4px 14px;
		border-radius: var(--s24-radius-lg);
		line-height: 1.4;
	}

	.s24-status--online {
		color: #15803d;
		background: rgba(0, 160, 0, 0.08);
	}

	.s24-status--offline {
		color: #b91c1c;
		background: rgba(220, 38, 38, 0.06);
	}

	.s24-status-lastvisit {
		color: var(--s24-text-muted);
		font-size: var(--s24-caption);
		text-align: left;
		line-height: 1.4;
	}

	/* ═══ Avatar thumbnail ═══ */
	.thumbnail {
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-md);
		padding: var(--s24-space-1);
		background-color: var(--s24-surface);
		transition: box-shadow var(--s24-transition-fast);
		overflow: hidden;
		margin-bottom: var(--s24-space-4);
		display: inline-block;
	}

	.thumbnail img {
		border-radius: var(--s24-radius-md);
		display: block;
	}

	.thumbnail:hover {
		box-shadow: var(--s24-shadow-card);
	}

	/* ═══ Avatar wrap — hover overlay ═══ */
	.s24-avatar-wrap {
		position: relative;
		width: 264px;
		height: 264px;
	}

	.s24-avatar-img {
		position: absolute;
		z-index: 1;
		width: 264px;
		height: 264px;
		border-radius: var(--s24-radius-md);
	}

	.s24-avatar-delete {
		position: absolute;
		top: 8px;
		right: 8px;
		z-index: 10;
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.55);
		color: #fff;
		border-radius: 50%;
		cursor: pointer;
		opacity: 0;
		transition: opacity var(--s24-transition-fast), background var(--s24-transition-fast);
	}

	.s24-avatar-delete svg {
		stroke: #fff;
	}

	.s24-avatar-wrap:hover .s24-avatar-delete {
		opacity: 1;
	}

	.s24-avatar-delete:hover {
		background: var(--s24-danger);
	}

	.s24-avatar-upload {
		position: absolute;
		bottom: -1px;
		left: 0;
		right: 0;
		z-index: 5;
		background: rgba(0, 0, 0, 0.55);
		color: #fff;
		text-align: center;
		padding: var(--s24-space-3) var(--s24-space-2);
		cursor: pointer;
		border-radius: 0 0 var(--s24-radius-md) var(--s24-radius-md);
		opacity: 0;
		transition: opacity var(--s24-transition-fast);
	}

	.s24-avatar-wrap:hover .s24-avatar-upload {
		opacity: 1;
	}

	.s24-avatar-upload__text {
		font-size: var(--s24-caption);
		font-weight: 500;
	}

	.s24-avatar-upload input[type="file"] {
		position: absolute;
		inset: 0;
		opacity: 0;
		cursor: pointer;
	}

	/* ═══ Avatar uploader (fileapi internals) ═══ */
	.userpic {
		height: 263px;
		display: inline-block;
		position: relative;
		background-size: cover;
		width: 100%;
	}

	.userpic__preview {
		position: absolute;
		z-index: 1;
	}

	.userpicback {
		background-image: url('../../../datas/defaultav/student_avatar_default.png');
	}

	/* ═══ Sidebar actions — см. .s24-action-stack в s24-components.css ═══ */
	.s24-action-stack {
		margin-bottom: var(--s24-space-5);
	}

	/* ═══ PRO badge ═══ */
	.s24-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--s24-space-1);
		padding: 2px 10px;
		border-radius: 100px;
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.5;
		white-space: nowrap;
		vertical-align: middle;
	}

	.s24-badge--pro {
		background: linear-gradient(135deg, #fbbf24, #f59e0b);
		color: #78350f;
	}

	/* ═══ Rating card (sidebar) ═══ */
	.s24-rating-card {
		border-radius: var(--s24-radius-md);
		border-color: var(--s24-border);
		box-shadow: var(--s24-shadow-card);
	}

	.s24-rating-card__total {
		font-size: 40px;
		font-weight: 800;
		line-height: 1.3;
		color: var(--s24-ink);
	}

	.s24-rating-card__row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1px 0;
		margin: 0;
		font-size: var(--s24-caption);
		color: var(--s24-text);
	}

	.s24-rating-card__row + .s24-rating-card__row {
		margin-top: var(--s24-space-2);
	}

	.s24-rating-card .center + .s24-rating-card__row {
		margin-top: var(--s24-space-2);
	}

	/* ═══ Works stat card ═══ */
	.s24-works-stat {
		border-radius: var(--s24-radius-md);
		border-color: var(--s24-border);
		font-size: var(--s24-caption);
		line-height: var(--s24-lh-relaxed);
	}

	/* ═══ Комиссия / бонус (plugin bonus) ═══ */
	.well.bonusblock {
		padding: var(--s24-space-4) var(--s24-space-6);
	}

	.bonusblock h3 {
		font-size: 0.875rem;
		line-height: 1.5;
		margin-bottom: var(--s24-space-4);
	}

	/* Узкий прогресс-бар: подписи убираем модификаторами (раньше — три встроенных <style> в TPL). */
	.s24-bonus-profile-progress__track {
		display: block;
		height: 16px;
	}

	.s24-bonus-profile-progress__bar {
		line-height: 1.2;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
	}

	.s24-bonus-profile-progress--hide-next .s24-bonus-profile-progress__bar > .next_fincome {
		display: none;
	}

	@media (max-width: 480px) {
		.s24-bonus-profile-progress--hide-next-sm .s24-bonus-profile-progress__bar > .next_fincome {
			display: none;
		}
	}

	.s24-bonus-profile-progress--hide-current .s24-bonus-profile-progress__bar > .curent_fincome {
		display: none;
	}

	/* ═══ Well cards — general ═══ */

	.well-small {
		border-radius: var(--s24-radius-md);
	}

	/* ═══ Календарь (simplecalendar) в сайдбаре профиля — просторная сетка как в макете ═══ */
	.calendar-container.well {
		padding: var(--s24-space-5) var(--s24-space-5) var(--s24-space-4);
		box-shadow: var(--s24-shadow-card-soft);
		border-color: var(--s24-border);
	}

	.calendar-container .calendar {
		color: var(--s24-text-muted);
	}

	.calendar-container .calendar header {
		position: relative;
		padding: 0 var(--s24-space-6);
		margin-bottom: 10px;
	}

	.calendar-container .calendar h2.month {
		font-family: var(--s24-font-family);
		font-size: var(--s24-heading-sm);
		font-weight: 700;
		line-height: var(--s24-lh-tight);
		color: var(--s24-text);
		margin: 0 0 var(--s24-space-1) 0;
		letter-spacing: -0.01em;
	}

	.calendar-container .calendar .year {
		font-family: var(--s24-font-family);
		font-size: var(--s24-caption);
		font-weight: 300;
		line-height: var(--s24-lh-tight);
		margin: 0;
	}

	.calendar-container .btn-prev,
	.calendar-container .btn-next {
		width: 36px;
		height: 36px;
		line-height: 32px;
		margin-top: -18px;
		font-size: 1.125rem;
		font-weight: 300;
		color: var(--s24-border-strong);
	}

	.calendar-container .btn-prev {
		left: var(--s24-space-1);
	}

	.calendar-container .btn-next {
		right: var(--s24-space-1);
	}

	.calendar-container .calendar table {
		border-collapse: separate;
		/* Без внешнего border-spacing — зазор задаётся padding ячеек */
		border-spacing: 0;
		width: 100%;
		table-layout: fixed;
		margin: 0;
		text-align: center;
	}

	.calendar-container .calendar thead {
		font-weight: 700;
	}

	.calendar-container .calendar thead td {
		display: table-cell;
		height: auto;
		width: auto;
		min-width: 0;
		padding: 0 0 var(--s24-space-3) 0;
		border: none;
		border-radius: 0;
		font-size: var(--s24-label);
		font-weight: 700;
		line-height: var(--s24-lh-tight);
		vertical-align: bottom;
	}

	.calendar-container .calendar tbody td {
		display: table-cell;
		box-sizing: border-box;
		width: 14.28%;
		min-height: 2rem;
		padding: 6px;
		line-height: 1.25;
		font-size: var(--s24-body-sm);
		font-weight: 300;
		vertical-align: middle;
		border: 2px solid transparent;
		border-radius: 999px;
		position: relative;
	}

	.calendar-container .calendar tbody td[disabled] {
		border-color: transparent;
		border-radius: 0;
		background: transparent;
		color: transparent;
		pointer-events: none;
	}

	.calendar-container .calendar tbody td:not([disabled]):hover {
		background: color-mix(in srgb, var(--s24-border) 55%, transparent);
	}

	.calendar-container .calendar tbody td.active {
		background: var(--s24-primary-soft);
	}

	.calendar-container .current-day {
		background: var(--s24-surface-alt);
	}

	.calendar-container .event:after {
		bottom: 7px;
	}

	.calendar-container .event:before {
		top: 6px;
	}

	/* Список событий дня: без цветного фона; state 2 — цвет ссылки вместо зелёного фона */
	.calendar-container .day-event[event-type="1"],
	.calendar-container .day-event[event-type="2"] {
		background-color: transparent;
	}

	.calendar-container .day-event[event-type="2"] .title > a {
		color: var(--s24-success);
	}

	.calendar-container .day-event[event-type="2"] h3.title.red > a {
		color: #ff3e3e;
	}

	/* ═══ "Подробнее" links ═══ */
	.s24-more-link {
		font-size: 12px;
		margin-top: 2px;
		color: var(--s24-primary);
	}

	.s24-more-link--tight {
		margin-top: 5px;
	}

	/* Ряд «Подробнее» сразу под карточкой сайдбара — одна сетка для всех блоков */
	.s24-sidebar-more {
		text-align: right;
		margin-top: -20px;
		margin-bottom: var(--s24-space-3);
		line-height: 1.2;
	}

	.s24-sidebar-more .s24-more-link {
		margin-top: 0;
		float: none;
		display: inline-block;
	}

	/* ═══ Tabs — стили перенесены в глобальный .s24-tabs (s24-components.css) ═══ */

	/* ═══ Info rows (replaces table) ═══ */
	.s24-info-row {
		padding: var(--s24-space-3) var(--s24-space-2);
	}

	/* ═══ Tab content — единая «карточка» под основную таблицу и вкладки ═══ */
	.tab-content {
		padding: var(--s24-card-pad-y) var(--s24-card-pad-x);
		background: var(--s24-surface);
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-md);
		box-shadow: var(--s24-shadow-card);
		overflow: hidden;
	}

	#important_notifications {
		margin-top: var(--s24-space-6);
	}

	/* ═══ Плагин notification — вкладка «Уведомления» (users.details) ═══ */
	#tab_notification .s24-notification-list {
		display: flex;
		flex-direction: column;
		gap: var(--s24-space-3);
	}

	#tab_notification .s24-notification-item {
		padding: var(--s24-card-pad-y) var(--s24-card-pad-x);
		background: var(--s24-surface);
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-md);
		box-shadow: var(--s24-shadow-card-soft);
		transition: background-color 2.5s ease;
	}

	#tab_notification .s24-notification-item--new {
		background: color-mix(in srgb, #fbbf24 12%, var(--s24-surface));
		border-color: color-mix(in srgb, #fbbf24 35%, var(--s24-border));
	}

	#tab_notification .s24-notification-item__head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--s24-space-1) var(--s24-space-4);
		margin-bottom: var(--s24-space-2);
	}

	#tab_notification .s24-notification-item__title {
		flex: 1 1 12rem;
		min-width: 0;
		font-size: var(--s24-body-sm);
		font-weight: 600;
		line-height: var(--s24-lh-tight);
		color: var(--s24-text);
		letter-spacing: 0.01em;
	}

	#tab_notification .s24-notification-item__date {
		flex-shrink: 0;
		margin-left: auto;
		font-size: var(--s24-caption);
		line-height: var(--s24-lh-tight);
		color: var(--s24-text-muted);
		white-space: nowrap;
	}

	#tab_notification .s24-notification-item__body {
		font-size: var(--s24-caption);
		line-height: var(--s24-lh-base);
		color: var(--s24-text-secondary);
		word-break: break-word;
	}

	#tab_notification .s24-notification-item__body :first-child {
		margin-top: 0;
	}

	#tab_notification .s24-notification-item__body :last-child {
		margin-bottom: 0;
	}

	#tab_notification .s24-notification-item__body a {
		font-weight: 500;
	}

	@media (max-width: 480px) {
		#tab_notification .s24-notification-item__head {
			flex-direction: column;
			align-items: stretch;
		}

		#tab_notification .s24-notification-item__date {
			margin-left: 0;
			white-space: normal;
		}
	}

	/* ═══ Review add form ═══ */
	.s24-reviews-add-form {
		margin-top: var(--s24-space-5);
		padding: var(--s24-card-pad-y) var(--s24-card-pad-x);
		background: var(--s24-surface);
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-md);
		box-shadow: var(--s24-shadow-card-soft);
	}

	.s24-reviews-add-form + .s24-reviews-block {
		margin-top: var(--s24-space-4);
	}

	.s24-reviews-add-form .s24-form-layout {
		max-width: none;
		margin: 0;
		padding: 0;
		box-shadow: none;
		border: none;
		background: transparent;
	}

	.s24-reviews-add-form select,
	.s24-reviews-add-form textarea {
		width: 100%;
		box-sizing: border-box;
	}

	.s24-reviews-add-form .s24-btn {
		border-radius: var(--s24-radius-md);
	}

	/* ═══ Review rows: date, project link ═══ */
	.s24-review-actions {
		display: flex;
		gap: var(--s24-space-2);
		flex-shrink: 0;
	}

	/* Контент отзыва — дата, проект, детальные оценки, текст. Без gap'а:
	   строки идут вплотную (line-height сам даёт воздух), визуально читается
	   как одна плотная сущность. Отступ от шапки задаётся row-gap карточки
	   (.customform.ownreview). */
	.s24-review-content {
		display: flex;
		flex-direction: column;
	}

	.s24-review-date {
		color: var(--s24-text-soft);
		font-size: 0.75rem;
	}

	.s24-review-project {
		font-size: 0.8125rem;
		color: var(--s24-text-muted);
		line-height: 1.4;
		margin: 0;
	}

	.s24-review-project a {
		color: var(--s24-primary);
		text-decoration: none;
	}

	.s24-review-project a:hover {
		text-decoration: underline;
	}

	.s24-reply-icon {
		display: none;
	}

	.s24-review-text {
		margin-top: 0;
		text-align: left;
		font-size: var(--s24-caption);
		line-height: 1.5;
		color: var(--s24-text);
	}

	.s24-review-scores-detail {
		font-size: 0.75rem;
		color: var(--s24-text-muted);
		margin-top: 0;
	}

	/* На мобиле аватар автора отзыва оставляем видимым — он помогает идентифицировать
	   автора, а flex-компоновка .customform.ownreview (gap: space-3) хорошо сжимается.
	   Если на очень узких экранах нужно вернуть скрытие — точечно под конкретный breakpoint. */

	/* ═══ Reviews block (карточка; раньше часть визуала давал .myform.myform-body) ═══ */
	.s24-reviews-block {
		border-radius: var(--s24-radius-md);
		border: 1px solid var(--s24-border);
		background: var(--s24-surface);
		margin-top: var(--s24-space-5);
		padding: var(--s24-space-6) 30px var(--s24-space-2) 30px;
	}

	.s24-reviews-sort {
		display: flex;
		align-items: center;
		gap: var(--s24-space-3);
		margin-bottom: var(--s24-space-4);
		flex-wrap: wrap;
	}

	.s24-reviews-sort__label {
		font-size: var(--s24-caption);
		color: var(--s24-text-muted);
		font-weight: 500;
		margin-right: var(--s24-space-1);
	}

	/* Сортировка отзывов — как ссылки; цвет по смыслу вкладки */
	.s24-reviews-sort__btn {
		font-size: var(--s24-caption);
		padding: 2px 6px;
		margin: 0;
		border: none;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--s24-text-muted);
		text-decoration: none;
		text-underline-offset: 3px;
		transition: color var(--s24-transition-fast);
		cursor: pointer;
		font-weight: 500;
	}

	.s24-reviews-sort__btn[data-filter="all"].active {
		color: var(--s24-ink);
		font-weight: 600;
	}

	.s24-reviews-sort__btn[data-filter="all"]:hover {
		color: color-mix(in srgb, var(--s24-ink) 70%, var(--s24-text-muted));
	}

	.s24-reviews-sort__btn[data-filter="positive"].active {
		color: hsl(142 71% 30%);
		font-weight: 600;
	}

	.s24-reviews-sort__btn[data-filter="positive"]:hover {
		color: color-mix(in srgb, hsl(142 71% 30%) 48%, var(--s24-text-muted));
	}

	.s24-reviews-sort__btn[data-filter="negative"].active {
		color: var(--s24-danger);
		font-weight: 600;
	}

	.s24-reviews-sort__btn[data-filter="negative"]:hover {
		color: color-mix(in srgb, var(--s24-danger) 48%, var(--s24-text-muted));
	}

	/* ═══ Review tiles (ownreview) ═══ */
	.reviews {
		margin-bottom: var(--s24-space-4);
	}

	/* Карточка отзыва — grid-layout:
	     row 1: [ .s24-person (1fr) ] [ .s24-review-actions (auto) ]
	     row 2: [ .s24-review-content — full-width, visually выровнен под body ]

	   Content вырван из .s24-person__body и растянут на всю ширину карточки —
	   иначе вертикальная колонка кнопок на средних экранах (481–979) съедала
	   ширину у левой колонки и зажимала дату/проект/текст. Визуальное
	   выравнивание «в одну колонку» достигается за счёт padding-left у
	   content, равного ширине аватара (48px) + gap компоненты (space-3). */
	.customform.ownreview {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: var(--s24-space-3);
		row-gap: var(--s24-space-2);
		align-items: start;
		border-radius: var(--s24-radius-md);
		padding: var(--s24-space-4) var(--s24-space-6);
		margin-bottom: 0;
		box-shadow: var(--s24-shadow-card-soft);
		font-family: var(--s24-font-family);
		font-size: var(--s24-caption);
		line-height: var(--s24-lh-relaxed);
		transition: box-shadow var(--s24-transition-fast);
		/* Сама карточка — size-container. Кнопки «Редактировать/Удалить/…»
		   перестраиваются в колонку, когда внутри карточки становится тесно,
		   а не по фиксированному viewport-breakpoint'у — см. @container ниже. */
		container-type: inline-size;
		container-name: review-card;
	}

	.customform.ownreview > .s24-person {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}

	.customform.ownreview > .s24-review-actions {
		grid-column: 2;
		grid-row: 1;
	}

	.customform.ownreview > .s24-review-content {
		grid-column: 1 / -1;
		grid-row: 2;
		/* Визуальное выравнивание под .s24-person__body: сдвиг вправо
		   = ширина аватара (48px из .s24-person__avatar img) + gap компоненты. */
		padding-left: calc(48px + var(--s24-space-3));
	}

	.customform.ownreview:hover {
		box-shadow: var(--s24-shadow-card);
	}

	.customform.ownreview.good {
		background-color: rgba(226, 255, 228, 0.8);
		border: 1px solid rgba(0, 128, 0, 0.2);
	}

	.customform.ownreview.bad {
		background-color: rgba(255, 238, 238, 0.8);
		border: 1px solid rgba(255, 0, 0, 0.2);
	}

	.customform.ownreview.neutral {
		background-color: rgba(242, 242, 242, 0.8);
		border: 1px solid rgba(128, 128, 128, 0.2);
	}

	/* Текст отзыва — во всю ширину внутри .s24-review-content */
	.customform.ownreview .s24-review-text,
	.answers .s24-review-text {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: left;
		margin-left: 0;
		padding-left: 0;
	}

	.customform.ownreview .s24-review-text p,
	.answers .s24-review-text p {
		margin-left: 0;
		padding-left: 0;
	}

	.customform.ownreview .s24-review-text ul,
	.customform.ownreview .s24-review-text ol,
	.answers .s24-review-text ul,
	.answers .s24-review-text ol {
		margin-left: 0;
		padding-left: 1.5em;
		box-sizing: border-box;
	}

	.customform.ownreview .s24-review-text blockquote,
	.answers .s24-review-text blockquote {
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--s24-space-3);
		border-left: 3px solid var(--s24-border);
	}

	/* Review answer (reply) — внутри .reviews, прижат к отзыву */
	.answers {
		margin-left: var(--s24-space-10);
		margin-top: var(--s24-space-2);
		padding-bottom: var(--s24-space-2);
	}

	.s24-review-reply {
		border-radius: var(--s24-radius-md);
		padding: var(--s24-space-3) var(--s24-space-4);
		background: var(--s24-surface);
		border: 1px solid var(--s24-border);
	}

	.s24-review-reply__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s24-space-2);
		flex-wrap: wrap;
		margin-bottom: var(--s24-space-1);
	}

	/* В ответе на отзыв аватар меньше — 40×40 (стандартный 48 чуть велик для вложенного блока) */
	.answers .s24-person__avatar img {
		width: 40px;
		height: 40px;
	}

	/* ═══ User categories (subject list) ═══ */
	.well.usercat {
		padding: var(--s24-space-4) var(--s24-space-4) var(--s24-space-4) var(--s24-space-8);
		overflow: hidden;
	}

	.well.usercat ul {
		margin: 0;
		padding-left: var(--s24-space-4);
		list-style-position: outside;
	}

	.well.usercat li {
		font-size: var(--s24-caption);
		line-height: var(--s24-lh-relaxed);
	}

	/* ═══ Portfolio tab ═══ */
	#tab_portfolio {
		padding: var(--s24-space-4) 0;
		overflow: visible;
	}

	/* Стили карусели портфолио — компонент .s24-folio-carousel в s24-components.css */

	/* ═══ FileAPI / загрузка документов ═══ */
	.b-upload_dnd {
		width: 100%;
		height: 100px;
		border: 5px dashed var(--s24-border-strong);
		margin: 25px 0 15px 0;
		box-sizing: border-box;
		text-align: center;
		font-size: var(--s24-heading-sm);
		visibility: visible;
		border-radius: var(--s24-radius-md);
	}

	.b-upload__dnd { padding: 30px 0 40px 0; cursor: pointer; }
	.b-upload__dnd_hover {
		background-color: var(--s24-primary-soft);
		outline: 1px dashed var(--s24-border-strong);
		outline-offset: 1px;
	}

	/* Чипы загруженных файлов mavatars — глобальный компонент .s24-mavatar-chip* в s24-components.css */

	.js-file-tpl {
		float: left;
		width: 80px;
		margin: 20px 20px 0 0;
		opacity: 0.75;
	}

	.js-file-tpl:hover { opacity: 1; }
	.b-thumb__preview > canvas { border-radius: var(--s24-radius-md); }
	.b-upload__dnd-not-supported > input { font-size: 0; display: none; }

	.b-upload__files {
		text-align: left;
		font-size: var(--s24-caption);
		margin: 15px 0 0 -15px;
	}

	.b-upload_dnd .progress { margin: var(--s24-space-3) 0 0 0; display: none; border-radius: 4px; }

	/* JS-инъектированная кнопка «Отправить» внутри .b-upload__files
	   (раньше — btn pull-right; теперь — s24-btn, а флоат дадим здесь) */
	.dnd_button {
		float: right;
		margin-top: var(--s24-space-2);
	}

	/* ═══ Admin edit link ═══ */
	.s24-admin-edit {
		margin-top: -25px;
		margin-bottom: 10px;
		position: absolute;
	}

	/* ═══ Admin email modal input ═══ */
	#emailForm input[name="emailheader"] {
		width: 98%;
	}

	/* ═══ Strikes ═══ */
	.strikes .deletestrike {
		position: absolute;
	}

	.strikes .deletestrike img {
		width: 14px;
		margin-top: 2px;
	}

	/* ═══ Sidebar projects list ═══ */
	.s24-sidebar-projects {
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--s24-space-2);
	}

	.s24-sidebar-projects__item {
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--s24-space-1);
	}

	.s24-sidebar-projects__meta {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--s24-space-2);
		margin: 0;
		font-size: var(--s24-label);
	}

	.s24-sidebar-projects__cost {
		flex-shrink: 0;
		color: var(--s24-text-muted);
	}

	.agrrement-info-text > div {
		margin: var(--s24-space-4) 0;
	}

	[data-toggle="collapse"] {
		cursor: pointer;
	}

	/* ═══ Notes block (админские пометки; раньше — .myform.myform-body + .s24-notes-block) ═══ */
	.s24-notes-block {
		margin: var(--s24-space-5) 0;
		padding: var(--s24-card-pad-y) var(--s24-card-pad-x) var(--s24-space-2);
		border-radius: var(--s24-radius-md);
		border: 1px solid var(--s24-border);
		background: var(--s24-surface);
	}

	.s24-notes-block li {
		position: relative;
		margin-bottom: var(--s24-space-2);
		padding-right: var(--s24-space-6);
	}

	.s24-notes-block .deletenote {
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 0;
	}

	.s24-notes-block .deletenote img {
		width: 14px;
	}

	/* ═══ CUDIR-модалка (users.details — КУДиР) ═══ */
	/* Лейбл-колонка таблицы формы внутри #CUDIR: заменяет HTML-атрибут <td width=150> */
	.modal#CUDIR .modal-body table.table .s24-cudir-label-cell {
		width: 150px;
	}

	/* ═══ sbrPercent-модалка (users.details — SBR: изменить процент, админ) ═══ */
	/* Лейбл-колонка таблицы формы: заменяет HTML-атрибут <td width=75>. */
	.modal#sbrPercent .modal-body table.table .s24-sbr-percent-label-cell {
		width: 75px;
	}

	/* ═══════════════════════════
	   Responsive
	   ═══════════════════════════ */

	/* ═══ Review tile: container query — кнопки в колонку, когда тесно ═══
	   Когда content-box'у карточки становится недостаточно места для row-раскладки
	   actions рядом с шапкой (.s24-person), складываем кнопки в колонку справа —
	   каждая в своём ряду.

	   Важно: container-query-size измеряется по CONTENT-BOX самого контейнера
	   (как CSS `width`), а не по border-box. Поэтому порог нужно считать
	   относительно внутренней ширины карточки, без учёта padding/border.

	   Оценка минимальной ширины для row:
	     avatar 48 + gap 12 + body (мин. ~110 — 5 звёзд) = 170 (person)
	     + gap 12 между person и actions
	     + actions row ≈ 210 (кнопки «Редактировать ~120 + 8 + Удалить ~80»)
	     ≈ 392px content-box.
	   Порог 420 даёт ~28px запаса на длинный ник, доп. кнопку «Ответить» и т.п.

	   Ниже 481px viewport'а mobile-grid (@media) всё равно перекинет actions
	   отдельной строкой наверх. */
	@container review-card (max-width: 420px) {
		.customform.ownreview .s24-review-actions {
			flex-direction: column;
			align-items: flex-end;
			flex-shrink: 0;
			row-gap: var(--s24-space-2);
		}
	}

	/* ═══ Review tile: совсем тесно — actions уезжают отдельной строкой наверх ═══
	   Когда content-box карточки меньше ~340px (content-box считается без
	   padding/border, см. комментарий к @container выше) — даже колонка кнопок
	   не помещается рядом с шапкой. Переключаем grid на одноколоночный
	   (1fr) с тремя строками:
	     row 1: actions (prижат справа через justify-self)
	     row 2: .s24-person — остаётся flex-row [avatar | body] из компоненты
	     row 3: .s24-review-content (на всю ширину)

	   Важно: .s24-person здесь НЕ превращается в display: contents — его
	   внутренний flex остаётся нетронутым, аватар и ник лежат рядом. Меняется
	   только внешний grid (template + grid-row на каждом item). */
	@container review-card (max-width: 340px) {
		.customform.ownreview {
			grid-template-columns: 1fr;
			padding: var(--s24-space-3) var(--s24-space-4);
		}

		.customform.ownreview > .s24-review-actions {
			grid-column: 1;
			grid-row: 1;
			justify-self: end;
			/* Сбрасываем column-режим из @container (max-width: 420): */
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
			row-gap: var(--s24-space-2);
			column-gap: var(--s24-space-2);
			justify-content: flex-end;
			flex-shrink: 1;
		}

		.customform.ownreview > .s24-person {
			grid-column: 1;
			grid-row: 2;
		}

		.customform.ownreview > .s24-review-content {
			grid-column: 1;
			grid-row: 3;
			padding-left: 0;
		}
	}

	@media (max-width: 767px) {
		.thumbnail {
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: fit-content;
		}

		.s24-user-status-bar {
			justify-content: center;
		}

		/* Offline: бейдж сверху, подпись снизу; общая ось по центру (без съезда вправо) */
		.s24-user-status-group {
			flex-direction: column-reverse;
			align-items: center;
			justify-content: center;
			gap: 6px;
			width: 100%;
			box-sizing: border-box;
		}

		.s24-status-lastvisit {
			float: none;
			margin-top: 0;
			text-align: center;
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
		}

		.answers {
			margin-left: var(--s24-space-4);
		}

		/* На планшетных и мобильных экранах (≤767) убираем визуальное
		   выравнивание content под body — текст подлезает под аватар,
		   занимая всю ширину карточки (как usersrowtext на user-листе). */
		.customform.ownreview > .s24-review-content {
			padding-left: 0;
		}

		/* .tabbable .nav-tabs → стили в глобальном .s24-tabs (s24-components.css) */
	}

	/* Глобальные viewport-правила для узких экранов. Раскладка самой карточки
	   отзыва (.customform.ownreview) — в @container выше (container-driven),
	   здесь только общие UI-подстройки, легитимно зависящие от ширины экрана. */
	@media (max-width: 480px) {
		.s24-notes-block {
			padding: var(--s24-space-3);
		}

		.s24-reviews-block {
			padding: var(--s24-space-3) var(--s24-space-4) var(--s24-space-2);
		}

		.s24-reviews-sort {
			gap: var(--s24-space-2);
		}

		.s24-reviews-sort__btn {
			font-size: 0.8125rem;
			padding: 2px 4px;
		}

		.answers {
			margin-left: var(--s24-space-2);
		}
	}
}

/*
 * Модалка кадрирования аватара (FileAPI + vodal) — только ВНЕ @scope(.s24-user-page).
 * При открытии #popup переносится под body; внутри scope он не потомок .s24-user-page,
 * поэтому правила из scoped-блока не срабатывают и в DevTools «не видно» стилей из s24-users.
 */
#popup.s24-avatar-crop-popup .s24-avatar-crop-popup__actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--s24-space-2);
	margin: 0;
	padding-bottom: var(--s24-space-2);
	width: 100%;
	box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   Список пользователей (users.tpl)
   ═══════════════════════════════════════════ */
@scope (.s24-users-list) {
	/* Сайдбар категорий: компактный паддинг, без лишнего отступа снизу (legacy .block / .filterblock) */
	.span3 > .well.prjlistfilter {
		padding: var(--s24-space-4) var(--s24-space-2);
	}

	.span3 > .well.prjlistfilter .filterblock {
		margin-bottom: 0;
	}

	.span3 > .well.prjlistfilter .block {
		margin-bottom: 0;
	}

	/* Карточка юзера: position: relative для absolute-кнопки invite;
	   внутри лежит .s24-person (аватар + body) — он сам даёт flex-вёрстку. */
	.s24-users-prj-card {
		position: relative;
		padding: var(--s24-space-4);
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-md);
		background: var(--s24-surface);
		margin-bottom: var(--s24-space-3);
	}

	.s24-users-prj-card__invite {
		position: absolute;
		top: var(--s24-space-3);
		right: var(--s24-space-3);
		z-index: 1;
	}

	/* Если кнопка invite видима (не hidden) — даём место под неё справа от body */
	.s24-users-prj-card:has(.s24-users-prj-card__invite:not(.hidden)) .s24-person__body {
		padding-right: 7.5rem;
	}

	.usersrowtext {
		font-size: var(--s24-caption);
		color: var(--s24-text-secondary);
		line-height: 1.55;
		margin: 0;
	}

	/* .s24-sidebar-nav — глобально в s24-components.css */

	.s24-usercat-tree {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.s24-usercat-tree > li {
		margin: 0;
		padding: 0;
	}

	.s24-usercat-link {
		display: block;
		padding: var(--s24-space-2) var(--s24-space-3);
		font-size: var(--s24-caption);
		color: var(--s24-text);
		text-decoration: none;
		border-radius: var(--s24-radius-sm);
		transition: background var(--s24-transition-fast), color var(--s24-transition-fast);
	}

	.s24-usercat-link:hover {
		background: var(--s24-surface-alt);
		color: var(--s24-primary);
		text-decoration: none;
	}

	.s24-usercat-count {
		white-space: nowrap;
		font-weight: 500;
		color: var(--s24-text-muted);
	}

	.s24-usercat-nested {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0 0 var(--s24-space-2) var(--s24-space-3);
	}

	/* Поле поиска: класс с поля — запасной вид (основной — .s24-prj-search из списка проектов) */
	.s24-users-search-input {
		width: 100%;
		box-sizing: border-box;
	}

	/* Приглашения авторов (студент) */
	.s24-users-invite-well {
		text-align: center;
		padding: var(--s24-space-4);
		margin-bottom: var(--s24-space-4);
	}

	.s24-users-invite-sep {
		height: 1px;
		background: var(--s24-border);
		margin: var(--s24-space-3) 0;
	}

	#topinviteblock {
		margin-bottom: var(--s24-space-2);
	}

	.s24-users-invite-hint {
		font-size: var(--s24-caption);
		color: var(--s24-text-muted);
	}

	.s24-users-invite-help {
		font-size: var(--s24-caption);
		color: var(--s24-text-secondary);
		margin: 0 0 var(--s24-space-2);
		line-height: 1.5;
	}

	.s24-users-invite-help:last-child {
		margin-bottom: 0;
	}

	.s24-users-invited-chip {
		display: inline-flex;
		align-items: center;
		gap: var(--s24-space-2);
		margin: var(--s24-space-1);
		vertical-align: middle;
	}

	.s24-users-invited-chip__avatar img {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		object-fit: cover;
		display: block;
	}

	.s24-users-invited-chip__cancel {
		margin: 0;
	}

	/* ═══ Мобильная раскладка карточки юзера ═══
	   Шапка: [avatar] [name + stars]
	   Далее: [текст о себе на всю ширину]
	   Подход: CSS Grid + display: contents на .s24-person и .s24-person__body,
	   чтобы их дети (avatar/name/meta/usersrowtext) стали grid-item'ами карточки. */
	@media (max-width: 767px) {
		.s24-users-prj-card {
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: var(--s24-space-3);
			row-gap: var(--s24-space-2);
			align-items: start;
			padding: var(--s24-space-3) var(--s24-space-4);
		}

		/* «Прозрачные» обёртки — их дети попадают в grid карточки */
		.s24-users-prj-card > .s24-person,
		.s24-users-prj-card .s24-person__body {
			display: contents;
		}

		/* Аватар растягиваем на обе строки шапки (ник + звёзды), чтобы
		   не было «дыры» во 2-й строке левой колонки. Он вертикально
		   выравнивается по центру получившейся шапки. */
		.s24-users-prj-card .s24-person__avatar {
			grid-column: 1;
			grid-row: 1 / span 2;
			align-self: center;
		}

		/* Ник — первая строка шапки, справа от аватара */
		.s24-users-prj-card .s24-person__name {
			grid-column: 2;
			grid-row: 1;
			align-self: end;
		}

		/* Звёзды — вторая строка шапки, тоже справа от аватара */
		.s24-users-prj-card .s24-person__meta {
			grid-column: 2;
			grid-row: 2;
			align-self: start;
		}

		/* Текст «о себе» — на всю ширину, аватар его не «режет» */
		.s24-users-prj-card .usersrowtext {
			grid-column: 1 / -1;
		}
	}
}

/* ═══════════════════════════════════════════
   Responsive overrides для users.list (ВНЕ @scope)
   ═══════════════════════════════════════════
   Почему вне @scope:
   1) Внутри @scope (.s24-users-list) селектор вида «.s24-users-list .X»
      не матчит, т.к. сам scope root не считается как «потомок .s24-users-list»
      внутри scope'а. Внутри scope префикс пришлось бы убирать → селектор
      получал бы спецификацию 0,1,0 и не мог стабильно перебить базовое
      .prjlistfilter { position: fixed } из @scope (.s24-prj-list).
   2) Базовое правило из s24-base.css
      «.s24-sidebar-layout:has(> .span3 > .prjlistfilter) > [class*="span"]:not(.span3) { order: -1 }»
      имеет спецификацию 0,5,0 (:has() берёт максимум из аргументов),
      и перебить его нужно селектором ≥0,5,0.

   Поэтому override'ы вынесены в «обычное» место с явными префиксами
   .s24-users-list на каждом селекторе — это даёт стабильную спецификацию
   и нужную победу в каскаде. */

/* Категории юзеров — короткий список (≈5 пунктов). Не уносим его в off-canvas
   drawer как фильтры проектов/маркета, оставляем inline сверху над списком. */
@media (max-width: 767px) {
	.s24-users-list .prjlistfilter {
		position: static;
		top: auto;
		right: auto;
		width: auto;
		height: auto;
		max-height: none;
		overflow: visible;
		z-index: auto;
		padding: var(--s24-space-4) var(--s24-space-2);
		margin: 0;
		background: var(--s24-surface);
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-md);
		box-shadow: none;
		transition: none;
	}

	/* Backdrop и toggle drawer'а не нужны для users.list */
	.s24-users-list .s24-drawer-overlay,
	.s24-users-list .s24-filter-toggle {
		display: none;
	}

	/* Порядок стэка на мобиле: категории сверху, список юзеров снизу.
	   Перебиваем базовое order: -1 из s24-base.css. Спецификация селектора
	   = 0,5,0 (совпадает с базовой), выигрывает за счёт порядка загрузки:
	   s24-users.css подключается после s24-base.css. */
	.s24-users-list .s24-sidebar-layout:has(> .span3 > .prjlistfilter) > .span3,
	.s24-users-list .s24-sidebar-layout:has(> .span3 > .prjlistfilter) > [class*="span"]:not(.span3) {
		order: 0;
	}
}

/* ═══════════════════════════════════════════
   Profile Settings (users.profile)
   ═══════════════════════════════════════════ */
@scope (.s24-user-profile) {

	/* ═══ Profile fields — compact override (base fill-style from s24-forms.css) ═══ */
	.s24-profile-layout :is(
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="tel"],
		select,
		textarea
	) {
		border-radius: var(--s24-radius-sm);
		padding: 0.625rem 0.875rem;
		min-height: 42px;
		font-size: var(--s24-caption);
		max-width: 100%;
	}

	/* Текстовые поля — умеренная ширина; селекты — по содержимому; textarea — отдельное правило ниже */
	.s24-profile-layout :is(
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="tel"]
	) {
		width: min(100%, 24rem);
	}

	/* Ширина по самой длинной опции + padding под шеврон (задаётся в s24-forms) */
	.s24-profile-layout select {
		width: max-content;
		max-width: 100%;
	}

	/* Пара «валюта / таймзона» и др. ряды: селект на всю колонку */
	.s24-profile-layout .s24-form-row > .s24-profile-field .s24-profile-field__value select {
		width: 100%;
		max-width: 100%;
	}

	.s24-profile-layout :is(input[type="text"], select):where(select) {
		height: 36px;
		padding: 6px 40px 6px 12px;
		line-height: 1.25;
	}

	.s24-profile-layout :is(input, select, textarea):focus {
		border-color: var(--s24-primary);
	}

	/* ═══ Settings sections (карточка: s24-components.css) ═══ */
	.s24-settings-section__title {
		font-weight: 700;
		font-size: var(--s24-heading-sm);
		margin-bottom: var(--s24-space-2);
		color: var(--s24-ink);
		line-height: 1.3;
	}

	.s24-settings-section__title--with-meta {
		display: flex;
		align-items: baseline;
		gap: var(--s24-space-2);
	}

	.s24-settings-section__hint {
		font-size: var(--s24-caption);
		color: var(--s24-text-muted);
		margin-bottom: var(--s24-space-3);
		line-height: var(--s24-lh-base);
	}

	.s24-settings-section__title + .s24-profile-field {
		margin-top: var(--s24-space-3);
	}

	/* ═══ Field rows ═══ */
	.s24-profile-field {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s24-space-1);
		margin-bottom: var(--s24-space-3);
	}

	/* Локация: три селекта на всю ширину секции */
	.s24-profile-field:has(.locselect) {
		width: 100%;
		max-width: 100%;
		align-items: stretch;
	}

	.s24-profile-field__value:has(.locselect) {
		width: 100%;
		max-width: 100%;
	}

	/* Форма смены почты внутри collapse — на всю ширину секции */
	.s24-profile-layout .s24-profile-email-change {
		width: 100%;
		max-width: 100%;
	}

	.s24-profile-layout .s24-profile-email-change > .s24-profile-field {
		width: 100%;
		max-width: 100%;
		align-items: stretch;
	}

	.s24-profile-layout .s24-profile-email-change .s24-profile-field__value {
		width: 100%;
		max-width: 100%;
	}

	.s24-settings-section > .s24-form-row {
		margin-bottom: var(--s24-space-3);
	}

	.s24-profile-field:last-child { margin-bottom: 0; }

	/* Три селекта даты рождения — в ряд, с зазором, без растягивания на всю ширину */
	.s24-profile-layout .s24-profile-field__value--birthdate {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s24-space-2);
	}

	.s24-profile-layout .s24-profile-field__value--birthdate select {
		width: auto;
		flex: 0 1 auto;
	}

	.s24-profile-field__value--action {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--s24-space-2);
		max-width: 100%;
	}

	.s24-profile-field__value-main {
		min-width: 0;
	}

	.s24-profile-field__value--action .s24-edit-icon {
		margin-left: 0;
		flex-shrink: 0;
	}

	.s24-form__label:hover .s24-edit-icon {
		opacity: 0.8;
	}

	.s24-profile-field__link {
		color: var(--s24-primary);
		text-decoration: none;
		border-bottom: 1px dashed var(--s24-primary);
		transition: color var(--s24-transition-fast), border-color var(--s24-transition-fast);
	}

	.s24-profile-field__link:hover {
		color: var(--s24-primary-hover);
		border-bottom-style: solid;
	}

	.s24-profile-field__value {
		font-size: var(--s24-caption);
		color: var(--s24-text);
		min-width: 0;
		width: fit-content;
		max-width: 100%;
	}

	.s24-profile-field__value input[type="text"],
	.s24-profile-field__value input[type="email"],
	.s24-profile-field__value input[type="password"],
	.s24-profile-field__value select {
		max-width: 100%;
	}

	/*
	 * «О себе»: у .s24-profile-field__value стоит width: fit-content — для textarea это ломает
	 * процентную ширину (100% считается от схлопнутого родителя). Явно задаём ширину обёртке.
	 */
	.s24-profile-layout .s24-profile-field__value:has(textarea) {
		width: min(100%, 700px);
		max-width: 100%;
	}

	.s24-profile-layout .s24-profile-field__value textarea {
		width: 100%;
		max-width: 100%;
		min-height: 240px;
		resize: none;
		overflow-y: hidden;
	}

	.s24-profile-field__hint {
		font-size: 0.8125rem;
		color: var(--s24-text-muted);
		margin-top: var(--s24-space-1);
		line-height: var(--s24-lh-base);
	}

	/* ═══ Location selector — flex-раскладка вместо legacy 160px ═══ */

	.s24-profile-layout .locselect {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s24-space-2);
	}

	.s24-profile-layout .locselect select {
		width: auto;
		min-width: 140px;
		flex: 1 1 0;
		margin-bottom: 0;
	}

	/* ═══ Horizontal field pairs — дополнение глобального .s24-form-row из s24-forms.css ═══ */

	.s24-form-row > .s24-profile-field {
		flex: 1;
		min-width: 0;
		align-items: stretch;
	}

	.s24-form-row > .s24-profile-field .s24-profile-field__value {
		width: 100%;
		max-width: 100%;
	}

	.s24-form-row--auto > .s24-profile-field {
		flex: 0 1 auto;
	}

	/* ═══ Password UX ═══ */
	.s24-input-icon-wrap {
		position: relative;
		display: flex;
		width: 100%;
	}

	.s24-input-icon-wrap input[type="password"],
	.s24-input-icon-wrap input[type="text"] {
		flex: 1;
		min-width: 0;
		padding-right: var(--s24-space-10);
	}

	.s24-pass-toggle {
		position: absolute;
		right: 8px;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		background: none;
		border: none;
		cursor: pointer;
		font-size: 1.1rem;
		color: var(--s24-text-muted);
		padding: 0 4px;
		z-index: 2;
	}

	.s24-pass-toggle:hover {
		color: var(--s24-text);
	}

	.s24-pass-strength {
		height: 4px;
		background: var(--s24-border);
		border-radius: 2px;
		margin-top: var(--s24-space-2);
		overflow: hidden;
	}

	.s24-pass-strength__fill {
		height: 100%;
		width: 0;
		border-radius: 2px;
		transition: width 0.3s ease, background 0.3s ease;
	}

	.s24-field-error {
		border-color: var(--s24-danger);
	}

	.s24-field-ok {
		border-color: var(--s24-success);
	}

	/* ═══ Categories ═══ */
	.s24-profile-cats-header {
		margin-bottom: var(--s24-space-4);
	}

	.s24-profile-cats-search {
		width: 100%;
		max-width: 400px;
		box-sizing: border-box;
	}

	.s24-profile-cats-counter {
		font-size: var(--s24-caption);
		font-weight: 600;
		color: var(--s24-success);
	}

	.s24-profile-cats-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 0;
		gap: var(--s24-space-10);
	}

	.s24-profile-cats-list .s24-cat-col--root {
		break-inside: auto;
		display: block;
		width: auto;
		margin-bottom: var(--s24-space-2);
	}

	.s24-profile-cats-list .s24-cat-col__title {
		margin: 0 0 var(--s24-space-2);
		font-size: var(--s24-heading-sm);
		font-weight: 700;
		line-height: 1.25;
		color: var(--s24-ink);
	}

	.s24-profile-cats-list .s24-cat-item {
		margin-bottom: var(--s24-space-2);
	}

	.s24-profile-cats-list .s24-cat-item > label {
		display: flex;
		align-items: flex-start;
		gap: var(--s24-space-2);
		margin: 0;
		font-size: 1.0625rem;
		font-weight: 500;
		line-height: 1.3;
		color: var(--s24-text);
		cursor: pointer;
	}

	.s24-profile-cats-list .s24-cat-item > label input[type="checkbox"] {
		margin-top: 1px;
	}

	.s24-profile-cats-list .s24-cat-children {
		margin-left: 0;
	}

	.s24-profile-cats-list .s24-cat-children.grey {
		opacity: 0.55;
	}

	.s24-profile-notifications {
		text-align: left;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s24-space-10);
		align-items: start;
	}

	.s24-profile-notifications .s24-notify-col--root {
		min-width: 0;
		padding-bottom: 0;
	}

	/* Внутри колонки: плотно между пунктами; крупный отступ только перед «главным» подблоком (заголовок секции) */
	.s24-profile-notifications .s24-notify-col__list {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.s24-profile-notifications .s24-notify-col__list > .s24-notify-col + .s24-notify-col {
		margin-top: var(--s24-space-2);
	}

	.s24-profile-notifications .s24-notify-col__list > .s24-notify-col + .s24-notify-col:has(> .s24-notify-col__title) {
		margin-top: var(--s24-space-8);
		padding-top: 0;
		border-top: none;
	}

	.s24-profile-notifications .s24-notify-col__title {
		margin: 0 0 var(--s24-space-3);
		font-size: var(--s24-heading-sm);
		font-weight: 700;
		line-height: 1.25;
		color: var(--s24-ink);
	}

	.s24-profile-notifications .s24-notify-col__title:not(:first-child) {
		margin-top: var(--s24-space-7);
	}

	.s24-profile-notifications .s24-notify-col__title label {
		display: block;
		font-size: inherit;
		font-weight: inherit;
		color: inherit;
		line-height: inherit;
	}

	.s24-profile-notifications .s24-notify-item {
		margin-bottom: var(--s24-space-3);
	}

	.s24-profile-notifications .s24-notify-item:last-child {
		margin-bottom: 0;
	}

	.s24-profile-notifications .s24-notify-item > label {
		display: flex;
		align-items: center;
		gap: var(--s24-space-3);
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 1.3;
		color: var(--s24-text);
		cursor: pointer;
		margin: 0;
	}

	.s24-profile-notifications .s24-notify-item__desc {
		margin-left: 30px;
		margin-top: 2px;
		font-size: 0.875rem;
		line-height: 1.35;
		color: var(--s24-text-muted);
		max-width: 260px;
	}

	.s24-profile-notifications input[type="checkbox"] {
		width: 18px;
		height: 18px;
		min-width: 18px;
		min-height: 18px;
		border-radius: 5px;
		margin-top: 0;
	}

	.s24-profile-email-change {
		overflow: hidden;
		height: 0;
	}

	.s24-profile-stack-8 {
		margin-top: var(--s24-space-2);
	}

	.s24-profile-inline-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.s24-profile-phone-change-link {
		font-size: 0.8125rem;
	}

	.confirmcode-btn {
		display: none;
	}

	/* ═══ Save Footer (сетка — .s24-form-actions в s24-components.css) ═══ */
	.s24-profile-save-footer.s24-form-actions {
		margin-top: var(--s24-space-6);
		margin-bottom: var(--s24-space-6);
		padding: 0;
		border-top: 0;
		background: transparent;
		border-radius: 0;
	}

	.s24-profile-save-footer .s24-btn.disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	/* ═══ Responsive ═══ */
	@media (max-width: 979px) {
		.s24-profile-cats-list {
			grid-template-columns: repeat(2, 1fr);
		}

		.s24-profile-notifications {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 640px) {
		/* Location selector (legacy select-search): ширина инпута и списка = ширине поля */
		.s24-profile-layout .select-search-block {
			width: 100%;
			max-width: 100%;
		}

		.s24-profile-layout .select-search-block > .select-search {
			left: 0;
			right: 0;
			width: 100%;
			max-width: 100%;
			min-width: 0;
			box-sizing: border-box;
		}

		/* bootstrap-responsive.css в этом проекте отключён (см. bootlance.rc.php),
		   select-search JS-плагин (bootstrap/bootstrap8.min.js) не ставит inline width —
		   !important здесь не нужен. */
		.s24-profile-layout .select-search-block > .input-select-search.active {
			left: 0;
			right: 0;
			width: 100%;
			max-width: 100%;
			min-width: 0;
			box-sizing: border-box;
		}

		.s24-form-row {
			flex-direction: column;
			gap: 0;
			align-items: stretch;
		}

		.s24-profile-cats-list {
			grid-template-columns: 1fr;
		}

		.s24-profile-notifications {
			grid-template-columns: 1fr;
		}

		.s24-profile-notifications .s24-notify-col--root + .s24-notify-col--root {
			padding-top: var(--s24-space-6);
			border-top: none;
		}

		.s24-profile-notifications .s24-notify-col__list > .s24-notify-col + .s24-notify-col:has(> .s24-notify-col__title) {
			border-top: none;
		}

		.s24-pass-toggle {
			right: 5px;
		}

	}
}