/* Кланы: светлая тема, скругления, акцент из темы сайта */
.clans-page {
	--clans-bg: #fafafa;
	--clans-card: #fff;
	--clans-text: #1f2937;
	--clans-muted: #6b7280;
	--clans-accent: var(--bg1s, #7c3aed);
	--clans-accent-hover: var(--bg2s, var(--bg-btn-hover, #6d28d9));
	--clans-border: #e5e7eb;
	--clans-shadow: 0 1px 3px rgba(0,0,0,.08);
	--clans-radius: 12px;
	--clans-radius-sm: 8px;
	font-family: inherit;
	color: var(--clans-text);
	background: var(--clans-bg);
	padding: 20px 0;
	border-radius: var(--clans-radius);
}

/* --- Список: заголовок и табы --- */
.clans-page--list .clans-page__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--clans-text);
	margin: 0 0 20px;
}

.clans-tabs-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 20px;
	flex-wrap: wrap;
}

.clans-tabs-row__left {
	flex-shrink: 0;
}

.clans-tabs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
	flex-wrap: wrap;
	flex: 1;
}

.clans-tab {
	padding: 10px 18px;
	border-radius: var(--clans-radius-sm);
	border: 1px solid var(--clans-border);
	background: var(--clans-card);
	color: var(--clans-text);
	cursor: pointer;
	font-size: 0.95rem;
	transition: background .2s, border-color .2s;
}

.clans-tab:hover {
	background: #f9fafb;
	border-color: #d1d5db;
}

.clans-tab.active {
	background: var(--clans-accent);
	border-color: var(--clans-accent);
	color: #fff;
}

/* --- Недельный топ: 3 карточки --- */
.clans-week-top {
	margin-bottom: 28px;
}

.clans-week-top__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--clans-text);
	text-align: center;
}

.clans-week-top__grid {
	display: grid;
	grid-template-columns: repeat(3, 290px);
	gap: 16px;
	max-width: 922px;
	margin: 0 auto 24px;
	justify-content: center;
}

@media (max-width: 700px) {
	.clans-week-top__grid { grid-template-columns: 1fr; max-width: 100%; }
	.clans-top-card { width: 100%; max-width: 290px; margin: 0 auto; }
}

.clans-top-card {
	position: relative;
	border-radius: var(--clans-radius);
	overflow: hidden;
	box-shadow: var(--clans-shadow);
	background: var(--clans-card);
	width: 290px;
	height: 120px;
}

.clans-top-card__cover {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #e5e7eb;
	border-radius: var(--clans-radius);
}

.clans-top-card__cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	border-radius: var(--clans-radius);
}

.clans-top-card__link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
}

.clans-top-card__rank {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: #1f2937;
	font-weight: 700;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.clans-top-card__name {
	position: absolute;
	top: 10px;
	right: 10px;
	left: 50px;
	z-index: 2;
	font-weight: 700;
	font-size: 1.15rem;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clans-top-card__contrib {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 2;
	font-size: 0.85rem;
	color: rgba(255,255,255,.95);
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* --- Кнопка + Создать клан (зелёная, слева от вкладок) --- */
.clans-btn-create {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: var(--clans-radius-sm);
	background: #22c55e;
	color: #fff !important;
	border: none;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background .2s;
}

.clans-btn-create:hover {
	background: #16a34a;
	color: #fff !important;
}

/* --- Список клубов: заголовок и сетка --- */
.clans-list-section__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--clans-text);
	margin: 0 0 16px;
}

.clans-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.clans-list-item {
	margin: 0;
	padding: 0;
}

.clans-club-card {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
	background: var(--clans-card);
	border-radius: var(--clans-radius);
	box-shadow: var(--clans-shadow);
	padding: 20px;
	text-align: center;
	transition: box-shadow .2s, transform .15s;
}

.clans-club-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
	transform: translateY(-2px);
}

.clans-club-card__rank {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(124, 58, 237, .2);
	color: var(--clans-accent);
	font-weight: 700;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clans-club-card__wrap {
	position: relative;
}

.clans-club-card__avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 12px;
	display: block;
	background: var(--clans-border);
}

.clans-club-card__name {
	display: block;
	font-weight: 600;
	font-size: 1rem;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clans-club-card__level {
	display: block;
	font-size: 0.875rem;
	color: var(--clans-muted);
	margin: 0 0 10px;
}

.clans-club-card__progress-wrap {
	margin-top: 8px;
}

.clans-club-card__progress-text {
	font-size: 0.8rem;
	color: var(--clans-muted);
	margin-bottom: 4px;
}

.clans-club-card__progress-bar {
	display: block;
	width: 100%;
	height: 6px;
	background: var(--clans-border);
	border-radius: 3px;
	overflow: hidden;
}

.clans-club-card__progress-fill {
	display: block;
	height: 100%;
	min-width: 2%;
	background: var(--clans-accent);
	border-radius: 3px;
	transition: width .3s;
}

.clans-club-card__progress-fill--lvl-1 { background: #8E8E8E; }
.clans-club-card__progress-fill--lvl-2 { background: #6EDC5F; }
.clans-club-card__progress-fill--lvl-3 { background: #3EC6FF; }
.clans-club-card__progress-fill--lvl-4 { background: #3B6CFF; }
.clans-club-card__progress-fill--lvl-5 { background: #A24BFF; }
.clans-club-card__progress-fill--lvl-6 { background: #FF4B4B; }
.clans-club-card__progress-fill--lvl-7 { background: #FFD700; }
.clans-club-card__progress-fill--lvl-8 { background: #0ea5e9; }

/* --- Блок топа (при переключении таба) --- */
.clans-top-block {
	margin-bottom: 20px;
}

.clans-top-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--clans-text);
}

.clans-top-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clans-top-list .clans-list-item {
	margin-bottom: 8px;
}

/* ТОП за неделю/месяц в виде сетки карточек, как «Список клубов» */
.clans-top-list.clans-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}

.clans-top-list.clans-list-grid .clans-club-card {
	display: block;
	text-align: center;
	padding: 20px;
}

.clans-top-list.clans-list-grid .clans-club-card__avatar {
	width: 80px;
	height: 80px;
	margin: 0 auto 12px;
}

.clans-loading,
.clans-err {
	color: var(--clans-muted);
	padding: 12px 0;
}

/* --- Страница одного клана --- */
.clans-page--single {
	max-width: 900px;
	margin: 0 auto;
}

.clans-cover-wrap {
	position: relative;
}

.clans-cover {
	width: 100%;
	height: 220px;
	background-size: cover;
	background-position: center;
	background-color: #e5e7eb;
	border-radius: var(--clans-radius);
}

.clans-cover-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	border-radius: var(--clans-radius);
	pointer-events: none;
}

.clans-cover-title {
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	z-index: 2;
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.clans-cover-edit {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0,0,0,.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 1;
	transition: opacity .2s, background .2s;
	font-size: 1.2rem;
	border: none;
}

.clans-cover-edit:hover {
	background: rgba(0,0,0,.7);
}

.clans-header {
	position: relative;
	padding: 0 24px 24px;
	padding-top: 0;
	margin-top: -48px;
	/* аватар на 50% заходит на обложку (48px из 96px) */
	margin-bottom: 20px;
}

.clans-header::before {
	content: '';
	position: absolute;
	top: 48px;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--clans-card);
	border-radius: 0 0 var(--clans-radius) var(--clans-radius);
	box-shadow: var(--clans-shadow);
	z-index: -1;
}

.clans-header__row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 0;
}

.clans-header__row--avatar {
	margin-bottom: 4px;
}

.clans-header__row--stats {
	margin-top: 12px;
}

.clans-header__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

.clans-header__stats--center {
	justify-content: center;
}

@media (max-width: 640px) {
	.clans-header__stats--center {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		gap: 10px;
	}
	.clans-header__stats--center .clans-stat-box {
		width: 100%;
		max-width: 160px;
	}
}

.clans-stat-box {
	background: var(--clans-bg);
	border: 1px solid var(--clans-border);
	border-radius: var(--clans-radius-sm);
	padding: 12px 16px;
	min-width: 100px;
	text-align: center;
}

.clans-stat-box__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--clans-muted);
	margin-bottom: 4px;
}

.clans-stat-box__icon {
	font-size: 0.9rem;
	color: var(--clans-text);
	opacity: 0.85;
}

.clans-stat-box__icon--energy {
	color: #fff;
	opacity: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: #22c55e;
	font-size: 0.75rem !important;
}

.clans-stat-box__num {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--clans-text);
}

.clans-avatar-wrap {
	position: relative;
	display: inline-block;
}

.clans-avatar-wrap .clans-avatar {
	border: 5px solid #e5e7eb;
}

.clans-avatar-wrap--lvl-1 .clans-avatar { border-color: #8E8E8E; }
.clans-avatar-wrap--lvl-2 .clans-avatar { border-color: #6EDC5F; }
.clans-avatar-wrap--lvl-3 .clans-avatar { border-color: #3EC6FF; }
.clans-avatar-wrap--lvl-4 .clans-avatar { border-color: #3B6CFF; }
.clans-avatar-wrap--lvl-5 .clans-avatar { border-color: #A24BFF; }
.clans-avatar-wrap--lvl-6 .clans-avatar { border-color: #FF4B4B; }
.clans-avatar-wrap--lvl-7 .clans-avatar { border-color: #FFD700; }
.clans-avatar-wrap--lvl-8 .clans-avatar { border-color: #0ea5e9; }

.clans-avatar-level {
	position: absolute;
	bottom: 12px;
	right: -6px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	z-index: 2;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.clans-avatar-wrap--lvl-1 .clans-avatar-level { background: #8E8E8E; }
.clans-avatar-wrap--lvl-2 .clans-avatar-level { background: #6EDC5F; }
.clans-avatar-wrap--lvl-3 .clans-avatar-level { background: #3EC6FF; }
.clans-avatar-wrap--lvl-4 .clans-avatar-level { background: #3B6CFF; }
.clans-avatar-wrap--lvl-5 .clans-avatar-level { background: #A24BFF; }
.clans-avatar-wrap--lvl-6 .clans-avatar-level { background: #FF4B4B; }
.clans-avatar-wrap--lvl-7 .clans-avatar-level { background: #FFD700; }
.clans-avatar-wrap--lvl-8 .clans-avatar-level { background: #0ea5e9; }

.clans-avatar-edit {
	display: none;
}

.clans-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--clans-card);
	display: block;
	position: relative;
	z-index: 1;
	background: var(--clans-border);
}

.clans-name {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 12px 0 6px;
	color: var(--clans-text);
}

.clans-meta {
	font-size: 0.95rem;
	color: var(--clans-muted);
	margin: 0 0 16px;
}

.clans-meta .clans-meta--accent {
	color: var(--clans-accent);
	font-weight: 500;
}

/* Уровень и прогресс на странице клана */
.clans-level-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.clans-level-row__label {
	font-size: 0.95rem;
	color: var(--clans-text);
	font-weight: 500;
}

.clans-level-row__bar {
	flex: 1;
	min-width: 120px;
	height: 8px;
	background: var(--clans-border);
	border-radius: 4px;
	overflow: hidden;
}

.clans-level-row__fill {
	height: 100%;
	background: var(--clans-accent);
	border-radius: 4px;
	transition: width .3s;
}

.clans-level-row__value {
	font-size: 0.875rem;
	color: var(--clans-muted);
}

.clans-top-rank-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.clans-top-rank-row__label {
	font-size: 0.95rem;
	color: var(--clans-muted);
}

.clans-top-rank-row__num {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--clans-text);
}

/* Кнопки действий */
.clans-actions {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--clans-border);
}

.clans-actions--center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.clans-actions--center .clans-btn {
	margin-right: 0;
}

.clans-btn-action {
	background: #fff !important;
	color: var(--clans-text) !important;
	border: 1px solid #d1d5db !important;
}

.clans-btn-action:hover {
	background: #f9fafb !important;
	border-color: #9ca3af !important;
	color: var(--clans-text) !important;
}

.clans-actions .clans-link {
	color: var(--clans-accent);
	text-decoration: none;
	font-weight: 500;
	margin-right: 12px;
}

.clans-actions .clans-link:hover {
	text-decoration: underline;
}

.clans-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--clans-radius-sm);
	border: 1px solid var(--clans-border);
	background: var(--clans-card);
	color: var(--clans-text);
	font-size: 0.9rem;
	cursor: pointer;
	transition: background .2s, border-color .2s;
	margin-right: 8px;
	margin-bottom: 8px;
}

.clans-btn:hover {
	background: #f9fafb;
	border-color: #d1d5db;
}

.clans-btn-donate,
.clans-btn-join {
	background: var(--clans-accent);
	border-color: var(--clans-accent);
	color: #fff !important;
}

.clans-btn-donate:hover,
.clans-btn-join:hover {
	background: var(--clans-accent-hover);
	border-color: var(--clans-accent-hover);
	color: #fff !important;
}

.clans-btn--secondary {
	background: transparent;
	color: var(--clans-muted);
}

.clans-btn-sm {
	padding: 4px 10px;
	font-size: 0.8rem;
}

/* Шкала рейтинга (над ТОП участников) */
.clans-rating-scale {
	background: var(--clans-card);
	border-radius: var(--clans-radius);
	box-shadow: var(--clans-shadow);
	padding: 20px;
	margin-bottom: 20px;
}

.clans-rating-scale__title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--clans-text);
}

.clans-rating-scale__track-wrap {
	position: relative;
	height: 24px;
	margin-bottom: 28px;
}

.clans-rating-scale__track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 12px;
	background: #e5e7eb;
	border-radius: 999px;
	overflow: visible;
}

.clans-rating-scale__fill {
	display: block;
	height: 100%;
	background: #ef4444;
	border-radius: 999px;
	min-width: 2%;
	transition: width 0.3s ease;
}

.clans-rating-scale__markers {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
	pointer-events: none;
}

.clans-rating-scale__marker {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff;
	border: 2px solid #ef4444;
	box-shadow: 0 0 0 2px #fff;
	box-sizing: border-box;
}

.clans-rating-scale__marker--lvl-1 { border-color: #8E8E8E; }
.clans-rating-scale__marker--lvl-2 { border-color: #6EDC5F; }
.clans-rating-scale__marker--lvl-3 { border-color: #3EC6FF; }
.clans-rating-scale__marker--lvl-4 { border-color: #3B6CFF; }
.clans-rating-scale__marker--lvl-5 { border-color: #A24BFF; }
.clans-rating-scale__marker--lvl-6 { border-color: #FF4B4B; }
.clans-rating-scale__marker--lvl-7 { border-color: #FFD700; }
.clans-rating-scale__marker--lvl-8 { border-color: #0ea5e9; }

.clans-rating-scale__labels {
	position: relative;
	height: 1.2em;
	font-size: 0.8rem;
	color: var(--clans-muted);
}

.clans-rating-scale__label {
	position: absolute;
	left: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

/* Блоки: заявки, уровни, задания, участники */
.clans-applications-block,
.clans-levels-block,
.clans-tasks-block,
.clans-top-members {
	background: var(--clans-card);
	border-radius: var(--clans-radius);
	box-shadow: var(--clans-shadow);
	padding: 20px;
	margin-bottom: 20px;
}

.clans-applications-block h3,
.clans-levels-block h3,
.clans-tasks-block h3,
.clans-top-members h3 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--clans-text);
}

.clans-applications-list,
.clans-tasks-list,
.clans-levels-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clans-application-item {
	padding: 8px 0;
	border-bottom: 1px solid var(--clans-border);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.clans-application-item:last-child {
	border-bottom: none;
}

.clans-task {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--clans-border);
	font-size: 0.95rem;
	color: var(--clans-text);
}

.clans-task:last-child {
	border-bottom: none;
}

.clans-task-icon {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--clans-accent);
	font-size: 1.1rem;
	flex-shrink: 0;
}

.clans-task-name {
	font-weight: 500;
	min-width: 0;
}

.clans-task-progress-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 120px;
}

.clans-task-progress-bar {
	flex: 1;
	height: 8px;
	background: var(--clans-border);
	border-radius: 4px;
	overflow: hidden;
	min-width: 60px;
}

.clans-task-progress-fill {
	height: 100%;
	background: var(--clans-accent);
	border-radius: 4px;
	transition: width .3s;
}

.clans-task-progress-text {
	font-size: 0.85rem;
	color: var(--clans-muted);
	white-space: nowrap;
}

.clans-task-faq {
	width: 28px;
	height: 28px;
	min-width: 28px;
	border-radius: 50%;
	background: #fff;
	color: #6b7280;
	border: 1px solid #d1d5db;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	transition: background .2s, color .2s, border-color .2s;
}

.clans-task-faq:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
	color: #4b5563;
}

.clans-levels-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 12px;
}

.clans-level-card {
	background: var(--clans-card);
	border: 1px solid var(--clans-border);
	border-radius: var(--clans-radius);
	padding: 0;
	min-width: 220px;
	width: 100%;
	max-width: 100%;
	pointer-events: auto;
}

.clans-level-card:hover {
	/* без изменений при наведении */
}

.clans-level-btn {
	display: block;
	width: 100%;
	padding: 10px 16px;
	border-radius: var(--clans-radius) var(--clans-radius) 0 0;
	border: none;
	font-weight: 700;
	font-size: 1rem;
	cursor: default;
	margin: 0;
	pointer-events: none;
}

.clans-level-btn:hover {
	/* без подсветки при наведении */
}

.clans-level-btn--1 { background: #8E8E8E; color: #fff; }
.clans-level-btn--2 { background: #6EDC5F; color: #fff; }
.clans-level-btn--3 { background: #3EC6FF; color: #fff; }
.clans-level-btn--4 { background: #3B6CFF; color: #fff; }
.clans-level-btn--5 { background: #A24BFF; color: #fff; }
.clans-level-btn--6 { background: #FF4B4B; color: #fff; }
.clans-level-btn--7 { background: #FFD700; color: #1a1a1a; }
.clans-level-btn--8 { background: #0ea5e9; color: #fff; }

.clans-level-btn--locked {
	opacity: 0.7;
	filter: grayscale(0.3);
}

.clans-level-attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 0 0;
	border-top: 1px solid var(--clans-border);
	align-items: flex-start;
}

.clans-level-attr {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 140px;
	padding: 8px 10px;
	background: var(--clans-bg);
	border: 1px solid var(--clans-border);
	border-radius: var(--clans-radius-sm);
	font-size: 0.85rem;
}

.clans-level-attr__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	margin-bottom: 6px;
	flex-shrink: 0;
}

.clans-level-attr__icon--user {
	background: #e5e7eb;
	color: #4b5563;
}

.clans-level-attr__icon--brush {
	background: #e5e7eb;
	color: #4b5563;
}

.clans-level-attr__icon--energy {
	background: #22c55e;
	color: #fff;
}

.clans-level-attr__icon--price {
	background: #f59e0b;
	color: #fff;
}

.clans-level-attr__icon--limit {
	background: #e0e7ff;
	color: #4338ca;
}

.clans-level-attr__icon--extra {
	background: #fce7f3;
	color: #be185d;
}

.clans-level-attr__label {
	display: block;
	font-size: 0.75rem;
	color: var(--clans-muted);
	margin-bottom: 2px;
	text-align: center;
}

.clans-level-attr__value {
	display: block;
	font-size: 0.8rem;
	color: var(--clans-text);
	text-align: center;
	word-break: break-word;
}

.clans-level-attr--perks {
	flex: 1 1 100%;
	min-width: 0;
}

.clans-level-attr--perks .clans-level-attr__value {
	text-align: left;
	font-size: 0.85rem;
}

@media (max-width: 640px) {
	.clans-level-attrs {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.clans-level-attr {
		flex-direction: column;
		max-width: none;
	}
	.clans-level-attr__label,
	.clans-level-attr__value {
		text-align: center;
	}
}

.clans-level-frames {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.clans-level-frame {
	border: 1px solid var(--clans-border);
	border-radius: var(--clans-radius-sm);
	padding: 8px 12px;
	font-size: 0.9rem;
	background: var(--clans-card);
}

.clans-level-frame__label {
	display: block;
	font-size: 0.75rem;
	color: var(--clans-muted);
	margin-bottom: 2px;
}

.clans-level-frame__value,
.clans-level-frame__text {
	color: var(--clans-text);
}

.clans-levels-list .clans-levels-ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clans-top-members ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clans-top-members li {
	padding: 4px 0;
	font-size: 0.95rem;
}

.clans-tabs--sm {
	margin-bottom: 12px;
}

.clans-tabs--sm .clans-tab {
	padding: 6px 14px;
	font-size: 0.9rem;
}

.clans-top-members-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 16px;
}

.clans-member-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 80px;
}

.clans-member-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: opacity .2s;
}

.clans-member-card__link:hover {
	opacity: 0.85;
}

.clans-member-card__avatar-wrap {
	position: relative;
	margin-bottom: 8px;
}

.clans-member-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--clans-border);
	display: block;
	object-fit: cover;
}

.clans-member-card__badge {
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--clans-accent);
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

.clans-member-card__name {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--clans-text);
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.clans-history-tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
}

.clans-history-tab {
	padding: 8px 16px;
	border: 1px solid var(--clans-border);
	background: var(--clans-bg);
	border-radius: var(--clans-radius-sm);
	font-size: 0.9rem;
	cursor: pointer;
	color: var(--clans-muted);
	transition: background .2s, color .2s, border-color .2s;
}

.clans-history-tab:hover {
	background: #f3f4f6;
	color: var(--clans-text);
}

.clans-history-tab.active {
	background: var(--clans-accent);
	border-color: var(--clans-accent);
	color: #fff;
}

.clans-history-pane {
	margin-top: 0;
}

.clans-energy-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 12px;
	padding: 10px 12px;
	background: var(--clans-bg);
	border: 1px solid var(--clans-border);
	border-radius: var(--clans-radius-sm);
	font-size: 0.9rem;
}

.clans-energy-earned { color: #16a34a; }
.clans-energy-spent { color: #dc2626; }

.clans-history-list {
	max-height: 50vh;
	overflow: auto;
	padding: 8px 0;
	font-size: 0.9rem;
}

.clans-history-list .clans-history-item {
	padding: 6px 0;
	border-bottom: 1px solid var(--clans-border);
}

.clans-history-list .clans-history-item:last-child {
	border-bottom: none;
}

/* Модалки: светлая тема */
.clans-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.clans-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
}

.clans-modal__box {
	position: relative;
	background: var(--clans-card);
	border-radius: var(--clans-radius);
	padding: 24px;
	min-width: 320px;
	max-width: 90vw;
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

.clans-modal__box--wide {
	min-width: 320px;
	max-width: 700px;
}

.clans-edit-media-section {
	margin-bottom: 20px;
}

.clans-edit-media-section:last-of-type {
	margin-bottom: 0;
}

.clans-edit-media-label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--clans-text);
	margin-bottom: 10px;
}

.clans-pick-list-empty {
	font-size: 0.9rem;
	color: var(--clans-muted);
	padding: 12px 0;
	margin: 0;
}

.clans-edit-media-upload-hint {
	margin: 10px 0 6px;
	font-size: 0.9rem;
	color: var(--clans-muted);
}

.clans-edit-media-file {
	display: block;
	width: 100%;
	margin-top: 4px;
	font-size: 0.9rem;
	box-sizing: border-box;
}

.clans-modal__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--clans-text);
}

.clans-modal__actions {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--clans-border);
}

.clans-modal__hint {
	margin: 0 0 16px;
	color: var(--clans-muted);
	font-size: 0.9rem;
}

.clans-modal__form label {
	display: block;
	margin-bottom: 16px;
	font-size: 0.95rem;
	color: var(--clans-text);
}

.clans-modal__input {
	width: 100%;
	padding: 10px 14px;
	margin-top: 6px;
	box-sizing: border-box;
	border: 1px solid var(--clans-border);
	border-radius: var(--clans-radius-sm);
	font-size: 1rem;
}

.clans-modal__actions {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.clans-modal__actions .clans-btn {
	margin: 0;
}

.clans-modal__actions .clans-btn[type="submit"] {
	background: var(--clans-accent);
	border-color: var(--clans-accent);
	color: #fff !important;
}

.clans-modal__actions .clans-btn[type="submit"]:hover {
	background: var(--clans-accent-hover);
	border-color: var(--clans-accent-hover);
	color: #fff !important;
}

.clans-pick-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
	transform: translateZ(0);
}

.clans-pick-list img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--clans-radius-sm);
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color .2s;
}

.clans-pick-list img:hover,
.clans-pick-list img.selected,
.clans-pick-list img.clans-pick-item--selected {
	border-color: var(--clans-accent);
}

.clans-pick-cover img {
	width: 120px;
	height: 48px;
	object-fit: cover;
}

.clans-btn-back {
	background: transparent;
	color: var(--clans-muted);
	margin-bottom: 12px;
}

.clans-btn-back:hover {
	background: #f9fafb;
	color: var(--clans-text);
}

/* Стена клана (8 уровень) */
.clans-wall {
	background: var(--clans-card);
	border-radius: var(--clans-radius);
	box-shadow: var(--clans-shadow);
	padding: 20px;
	margin-bottom: 20px;
}

.clans-wall__title {
	margin: 0 0 12px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--clans-text);
}

.clans-wall-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.clans-wall-form__textarea {
	width: 100%;
	min-height: 80px;
	padding: 12px 14px;
	box-sizing: border-box;
	border: 1px solid var(--clans-border);
	border-radius: var(--clans-radius-sm);
	font-size: 1rem;
	font-family: inherit;
	resize: vertical;
}

.clans-wall-form__submit {
	align-self: flex-start;
}

.clans-wall-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.clans-wall-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--clans-border);
}

.clans-wall-item:last-child {
	border-bottom: none;
}

.clans-wall-item__avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--clans-border);
}

.clans-wall-item__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.clans-wall-item__main {
	flex: 1;
	min-width: 0;
}

.clans-wall-item__header {
	margin-bottom: 6px;
	font-size: 0.95rem;
}

.clans-wall-item__header a {
	color: var(--clans-accent);
	text-decoration: none;
}

.clans-wall-item__header a:hover {
	text-decoration: underline;
}

.clans-wall-item__date {
	color: var(--clans-muted);
	font-size: 0.85rem;
	font-weight: 400;
	margin-left: 8px;
}

.clans-wall-item__text {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--clans-text);
}

.clans-wall-item__text.full-text-com img {
	max-width: 100%;
	height: auto;
}

/* Активные бусты и модалка покупки */
.clans-active-boosts {
	background: var(--clans-card);
	border-radius: var(--clans-radius);
	box-shadow: var(--clans-shadow);
	padding: 20px;
	margin-bottom: 20px;
}

.clans-active-boosts h3 {
	margin: 0 0 12px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--clans-text);
}

.clans-active-boosts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clans-active-boost-item {
	padding: 6px 0;
	border-bottom: 1px solid var(--clans-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.clans-active-boost-item:last-child {
	border-bottom: none;
}

.clans-active-boost-name {
	font-weight: 600;
	color: var(--clans-text);
}

.clans-active-boost-until {
	font-size: 0.9rem;
	color: var(--clans-muted);
}

.clans-boosts-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.clans-boost-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--clans-border);
}

.clans-boost-row:last-child {
	border-bottom: none;
}

.clans-boost-name {
	font-weight: 600;
	min-width: 140px;
	color: var(--clans-text);
}

.clans-boost-meta {
	flex: 1;
	font-size: 0.9rem;
	color: var(--clans-muted);
}