/* ============================================
   LAYOUT / PAGE
   ============================================ */
.profilePage {
	margin-left: 8vw;
	padding: 2vw 2.4vw 3vw;
}


/* ============================================
   PROFILE HERO
   ============================================ */
.profileHero {
	background: linear-gradient(135deg, rgba(45,125,255,0.18), rgba(20,22,26,0.95));
	border: .1vw solid #1E2127;
	border-radius: 1.6vw;
	padding: 1.4vw;
	box-shadow: 0 .7vw 1.5vw rgba(0, 0, 0, 0.2);
}

.profileHeroInfo {
	display: flex;
	align-items: center;
	gap: 1.2vw;
}

.profileAvatarWrap {
	flex-shrink: 0;
}

.profileAvatar {
	width: 5.2vw;
	height: 5.2vw;
	border-radius: 50%;
	object-fit: cover;
	border: .16vw solid rgba(255,255,255,0.14);
}

.profileText h1 {
	margin: 0;
	font-size: 1.3vw;
	color: #ffffff;
}

.profileTag {
	color: #7B818D;
	font-size: .9vw;
}

.profileText p {
	margin: .3vw 0 0;
	color: #C6D6F4;
	font-size: .95vw;
	line-height: 1.45;
	max-width: 42vw;
}

.profileStats {
	display: flex;
	flex-wrap: wrap;
	gap: 1vw;
	margin-top: .8vw;
}

.profileStats span {
	color: #ffffff;
}

.profileStats strong {
	color: #ffffff;
	margin-right: .2vw;
}

/* ============================================
   BANNER
   ============================================ */
.blockBanner {
	background: linear-gradient(#14161a9c, #14161a9c), url(/template/assets/img/profile/bannerProfile.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #14161A;
	border: .15vw solid #1E2127;
	border-radius: 1.6vw;
	width: 92vw;
	height: 13vw;
	position: absolute;
	top: 1vw;
	left: 7vw;
	box-shadow: 0 .7vw 1.5vw rgba(0, 0, 0, 0.2);
	overflow: hidden;
	opacity: 0;
	transform: translateY(-1vw) scale(.98);
	animation: bannerSlideDown .6s ease forwards;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.blockBanner::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .8s ease;
	pointer-events: none;
}

.blockBanner:hover::before {
	left: 100%;
}

.blockBanner:hover {
	transform: translateY(-.15vw);
	box-shadow: 0 .9vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.5vw rgba(45, 125, 255, 0.1);
	border-color: #2D7DFF;
}

@keyframes bannerSlideDown {
	from {
		opacity: 0;
		transform: translateY(-1vw) scale(.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ============================================
   PROFILE INFORMATION CARD
   ============================================ */
.ProfileInformation {
    border: .15vw solid #1E2127;
    border-radius: 1.6vw;
    width: 26vw;
    height: 22vw;
    position: absolute;
    top: 15vw;
    left: 7vw;
    overflow: hidden;
    opacity: 0;
    transform: translateY(1.2vw) scale(.96);
    animation: profileCardSlideUp .6s ease .2s forwards;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ProfileInformation::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 1;
}

.ProfileInformation::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 0;
}

.ProfileInformation:hover::before {
	left: 100%;
}

.ProfileInformation:hover::after {
	opacity: 1;
}

.ProfileInformation:hover {
	transform: translateY(-.3vw) scale(1.01);
	box-shadow: 0 .8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.8vw rgba(45, 125, 255, 0.15);
	border-color: #2D7DFF;
}

@keyframes profileCardSlideUp {
	from {
		opacity: 0;
		transform: translateY(1.2vw) scale(.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* --- Avatar (внешний) --- */
.avatarProfile {
	position: absolute;
	top: 2vw;
	left: 10vw;
	width: 6vw;
	opacity: 0;
	transform: scale(0) rotate(-10deg);
	animation: avatarPopIn .5s ease .4s forwards;
	transition: transform .25s ease, filter .25s ease;
	z-index: 10;
}

.avatarProfile:hover {
	transform: scale(1.08) rotate(0deg);
	filter: brightness(1.1) drop-shadow(0 .5vw 1vw rgba(45, 125, 255, 0.3));
}

.avatarProfile img {
	border-radius: 50%;
	border: .2vw solid rgba(255,255,255,0.15);
	transition: border-color .25s ease, box-shadow .25s ease;
}

.avatarProfile:hover img {
	border-color: #5A9CFF;
	box-shadow: 0 .4vw 1.2vw rgba(90, 156, 255, 0.4);
}

@keyframes avatarPopIn {
	0% {
		opacity: 0;
		transform: scale(0) rotate(-10deg);
	}
	60% {
		transform: scale(1.1) rotate(3deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

/* --- Username --- */
.NameUser {
	text-align: center;
	font-size: 1.2vw;
	position: relative;
	top: 7.4vw;
	color: #94A3B8;
	opacity: 0;
	transform: translateY(.6vw);
	animation: nameFadeIn .4s ease .55s forwards;
	transition: color .25s ease, transform .25s ease, text-shadow .25s ease;
	cursor: default;
}

.NameUser:hover {
	color: #ffffff;
	transform: translateY(-.15vw);
	text-shadow: 0 .3vw .8vw rgba(255, 255, 255, 0.2);
}

.NameUser::after {
	content: '';
	position: absolute;
	bottom: -.3vw;
	left: 50%;
	width: 0;
	height: .12vw;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 999px;
	transform: translateX(-50%);
	transition: width .35s ease;
}

.NameUser:hover::after {
	width: 60%;
}

@keyframes nameFadeIn {
	from {
		opacity: 0;
		transform: translateY(.6vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- User Profile Card (внутренняя карточка) --- */
.userProfileCard {
    position: relative;
    background: #14161A;
    border: .1vw solid #1E2127;
    border-radius: 1.6vw;
    padding: 2vw 1.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.userProfileCard:hover {
	transform: translateY(-.2vw);
	box-shadow: 0 .6vw 1.5vw rgba(0, 0, 0, 0.3);
	border-color: #2D7DFF;
}

/* --- Profile Avatar (внутренний) --- */
.profileAvatar {
	width: 6vw;
	height: 6vw;
	border-radius: 50%;
	overflow: hidden;
	border: .15vw solid #1E2127;
	opacity: 0;
	transform: scale(.9);
	animation: innerAvatarScale .4s ease .3s forwards;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.profileAvatar:hover {
	transform: scale(1.05);
	border-color: #5A9CFF;
	box-shadow: 0 .4vw 1vw rgba(45, 125, 255, 0.3);
}

.profileAvatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.profileAvatar:hover img {
	transform: scale(1.05);
}

@keyframes innerAvatarScale {
	from {
		opacity: 0;
		transform: scale(.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- Profile Name --- */
.profileName {
	margin: 0;
	color: #E6EEF9;
	font-size: 1.3vw;
	font-weight: 700;
	letter-spacing: .05vw;
	opacity: 0;
	transform: translateY(.5vw);
	animation: textSlideUp .35s ease .4s forwards;
	transition: color .2s ease, transform .2s ease;
}

.profileName:hover {
	color: #ffffff;
	transform: translateY(-.1vw);
}

@keyframes textSlideUp {
	from {
		opacity: 0;
		transform: translateY(.5vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Profile Stats --- */
.profileStats {
	display: flex;
	flex-direction: row;
	gap: 3vw;
	margin: 0.5vw 0;
	position: relative;
	left: -.7vw;
	opacity: 0;
	animation: statsFadeIn .4s ease .5s forwards;
}

@keyframes statsFadeIn {
	from {
		opacity: 0;
		transform: translateY(.4vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.statItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3vw;
	cursor: default;
	opacity: 0;
	transform: translateY(.5vw) scale(.95);
	transition: transform .2s ease;
}

.statItem:nth-child(1) { animation: statItemSlide .35s ease .6s forwards; }
.statItem:nth-child(2) { animation: statItemSlide .35s ease .7s forwards; }
.statItem:nth-child(3) { animation: statItemSlide .35s ease .8s forwards; }

.statItem:hover {
	transform: translateY(-.2vw) scale(1.05);
}

.statItem:hover .statValue {
	text-shadow: 0 .3vw .8vw rgba(255, 255, 255, 0.3);
	color: #5A9CFF;
}

.statItem:hover .statLabel {
	color: #94A3B8;
}

@keyframes statItemSlide {
	from {
		opacity: 0;
		transform: translateY(.5vw) scale(.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.statValue {
	color: #ffffff;
	font-size: 1.6vw;
	font-weight: 700;
	line-height: 1;
	transition: color .25s ease, text-shadow .25s ease;
	position: relative;
}

.statValue::after {
	content: '';
	position: absolute;
	bottom: -.2vw;
	left: 50%;
	width: 0;
	height: .1vw;
	background: linear-gradient(90deg, #5A9CFF, transparent);
	border-radius: 999px;
	transform: translateX(-50%);
	transition: width .3s ease;
}

.statItem:hover .statValue::after {
	width: 80%;
}

.statLabel {
	color: #7B818D;
	font-size: .85vw;
	font-weight: 400;
	transition: color .25s ease;
}

/* --- Subscribe Button --- */
.subscribeButton {
	width: 100%;
	padding: .8vw 2vw;
	border: none;
	border-radius: 999px;
	background: linear-gradient(142deg, #2C85FC, #811A96);
	color: #ffffff;
	font-size: 1.05vw;
	font-weight: 700;
	font-family: 'Plus Jakarta Sans', Arial, sans-serif;
	cursor: pointer;
	box-shadow: 0 .4vw 1.2vw rgba(45, 125, 255, 0.25);
	opacity: 0;
	transform: scale(.95);
	animation: buttonPopIn .4s ease .9s forwards;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.subscribeButton::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(255,255,255,0.2), transparent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width .4s ease, height .4s ease;
}

.subscribeButton:hover::before {
	width: 25vw;
	height: 25vw;
}

.subscribeButton:hover {
	transform: scale(1.03);
	box-shadow: 0 .6vw 1.5vw rgba(45, 125, 255, 0.35);
	filter: brightness(1.08);
}

.subscribeButton:active {
	transform: scale(.97);
}

@keyframes buttonPopIn {
	0% {
		opacity: 0;
		transform: scale(.95);
	}
	60% {
		transform: scale(1.03);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ===== ЭФФЕКТ БЛИКА ПРИ НАВЕДЕНИИ (Shine Effect) ===== */
.subscribeButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transition: left .6s ease;
    z-index: -1;
}

.subscribeButton:hover::before {
    left: 100%;
}

/* ===== СОСТОЯНИЕ НАВЕДЕНИЯ (Hover) ===== */
.subscribeButton:hover {
    transform: translateY(-.15vw) scale(1.02);
    box-shadow: 0 .6vw 1.8vw rgba(44, 133, 252, 0.4), 0 .3vw .8vw rgba(129, 26, 150, 0.3);
    filter: brightness(1.1); /* Лёгкое увеличение яркости градиента */
}

/* ===== СОСТОЯНИЕ НАЖАТИЯ (Active / Click) ===== */
.subscribeButton:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 .2vw .6vw rgba(44, 133, 252, 0.3);
    filter: brightness(0.95);
    transition: all .1s ease; /* Быстрый отклик при клике */
}

/* ===== СОСТОЯНИЕ ЗАГРУЗКИ (Disabled) ===== */
.subscribeButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    filter: grayscale(0.3) brightness(0.9);
    pointer-events: none;
    animation: none; /* Отключаем анимацию, если кнопка уже disabled */
}


/* ===== АНИМАЦИЯ ПОЯВЛЕНИЯ (Bouncy Pop-In) ===== */
@keyframes buttonPopIn {
    0% {
        opacity: 0;
        transform: scale(.9) translateY(.5vw);
    }
    60% {
        transform: scale(1.03) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* ===== СОСТОЯНИЕ: ОТПИСАТЬСЯ / УДАЛИТЬ ИЗ ДРУЗЕЙ (Нейтральное, но с намёком) ===== */
.subscribeButton[data-sub="UnSubscribe"],
.subscribeButton[data-sub="UnFollowing"] {
    background: rgba(255, 255, 255, 0.05);
    color: #94A3B8;
    border: 0.06vw solid #1E2127; /* Тонкая рамка, чтобы кнопка не "прыгала" при наведении */
    box-shadow: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* При наведении: мягкий красный акцент (стиль Twitter/X) */
.subscribeButton[data-sub="UnSubscribe"]:hover,
.subscribeButton[data-sub="UnFollowing"]:hover {
    background: rgba(239, 68, 68, 0.1); /* Очень прозрачный красный фон */
    color: #ef4444; /* Яркий красный текст */
    border-color: rgba(239, 68, 68, 0.3); /* Красная рамка */
    box-shadow: 0 0.4vw 1.2vw rgba(239, 68, 68, 0.15); /* Мягкое красное свечение */
}

/* При нажатии: тактильный отклик */
.subscribeButton[data-sub="UnSubscribe"]:active,
.subscribeButton[data-sub="UnFollowing"]:active {
    transform: scale(0.96);
    background: rgba(239, 68, 68, 0.15);
}

/* Состояние загрузки (когда JS ставит disabled) */
.subscribeButton[data-sub="UnSubscribe"]:disabled,
.subscribeButton[data-sub="UnFollowing"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}

/* ============================================
   GROUP CARD (ФЛАГ NEVADA)
   ============================================ */
.groupCard {
    background: #14161A;
    border: .1vw solid #1E2127;
    border-radius: 1.6vw;
    width: 14vw;
    height: 22vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2vw;
    padding: 1.4vw;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor: pointer;
    position: absolute;
    left: 34vw;
    top: 15vw;
    overflow: hidden;
    opacity: 0;
    transform: translateX(1.5vw) scale(.96);
    animation: groupCardSlideIn .6s ease .8s forwards;
}

.groupCard::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 1;
}

.groupCard::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 0%, rgba(90,156,255,0.1), transparent 60%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 0;
}

.groupCard:hover::before {
	left: 100%;
}

.groupCard:hover::after {
	opacity: 1;
}

.groupCard:hover {
	transform: translateY(-.3vw) scale(1.01);
	box-shadow: 0 .8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.5vw rgba(45, 125, 255, 0.15);
	border-color: #2D7DFF;
}

@keyframes groupCardSlideIn {
	from {
		opacity: 0;
		transform: translateX(1.5vw) scale(.96);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

/* --- Group Logo (флаг) --- */
.groupLogo {
	width: 10vw;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0vw;
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: scale(.85) rotate(-8deg);
	animation: groupLogoPopIn .5s ease 1s forwards;
	transition: transform .25s ease;
}

.groupCard:hover .groupLogo {
	transform: scale(1.05);
}

.groupLogo::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8vw;
	height: 8vw;
	background: radial-gradient(circle, rgba(90,156,255,0.12), transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform .4s ease;
	pointer-events: none;
}

.groupCard:hover .groupLogo::before {
	transform: translate(-50%, -50%) scale(1.2);
}

.groupLogo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(1.05);
	position: relative;
	z-index: 1;
	animation: logoFloat 3s ease infinite;
	transition: transform .3s ease, filter .3s ease;
}

.groupCard:hover .groupLogo img {
	transform: scale(1.06);
	filter: brightness(1.15) drop-shadow(0 .4vw 1vw rgba(90, 156, 255, 0.4));
	animation-play-state: paused;
}

@keyframes groupLogoPopIn {
	0% {
		opacity: 0;
		transform: scale(.85) rotate(-8deg);
	}
	60% {
		transform: scale(1.08) rotate(3deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

@keyframes logoFloat {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-.25vw) scale(1.03);
	}
}

/* --- Group Name --- */
.groupName {
	color: #ffffff;
	font-size: 1.1vw;
	font-weight: 700;
	letter-spacing: .12vw;
	text-transform: uppercase;
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateY(.5vw);
	animation: groupNameSlide .4s ease 1.2s forwards;
	transition: color .25s ease, transform .25s ease, text-shadow .25s ease, letter-spacing .25s ease;
}

.groupName::after {
	content: '';
	position: absolute;
	bottom: -.3vw;
	left: 50%;
	width: 0;
	height: .12vw;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 999px;
	transform: translateX(-50%);
	transition: width .35s ease;
}

.groupCard:hover .groupName {
	color: #5A9CFF;
	transform: translateY(-.15vw);
	text-shadow: 0 .3vw .8vw rgba(90, 156, 255, 0.4);
	letter-spacing: .18vw;
}

.groupCard:hover .groupName::after {
	width: 70%;
}

@keyframes groupNameSlide {
	from {
		opacity: 0;
		transform: translateY(.5vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   INFO CARD
   ============================================ */
.infoCard {
	background: #14161A;
	border: .15vw solid #1E2127;
	border-radius: 1.6vw;
	padding: 1.4vw 1.6vw;
	width: 20vw;
	position: absolute;
	top: 15vw;
	left: 48.8vw;
	overflow: hidden;
	opacity: 0;
	transform: translateY(1.2vw) scale(.96);
	animation: profileCardSlideUp .6s ease .4s forwards;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.infoCard::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 1;
}

.infoCard::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 0;
}

.infoCard:hover::before {
	left: 100%;
}

.infoCard:hover::after {
	opacity: 1;
}

.infoCard:hover {
	transform: translateY(-.3vw) scale(1.01);
	box-shadow: 0 .8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.8vw rgba(45, 125, 255, 0.15);
	border-color: #2D7DFF;
}

/* --- Info Title --- */
.infoCardTitle {
	margin: 0 0 .8vw 0;
	color: #ffffff;
	font-size: 1.15vw;
	font-weight: 700;
	position: relative;
	display: inline-block;
	opacity: 0;
	transform: translateX(-.5vw);
	animation: infoTitleSlide .4s ease .55s forwards;
}

.infoCardTitle::after {
	content: '';
	position: absolute;
	bottom: -.25vw;
	left: 0;
	width: 0;
	height: .12vw;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 999px;
	transition: width .35s ease;
}

.infoCard:hover .infoCardTitle::after {
	width: 100%;
}

@keyframes infoTitleSlide {
	from {
		opacity: 0;
		transform: translateX(-.5vw);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- Info Rows --- */
.infoRow {
	display: flex;
	align-items: center;
	gap: .5vw;
	margin-bottom: .5vw;
	font-size: 1vw;
	color: #C6D6F4;
	padding: .3vw .4vw;
	border-radius: .8vw;
	cursor: default;
	opacity: 0;
	transform: translateX(-.4vw);
	transition: background .2s ease, transform .2s ease, color .2s ease;
}

.infoRow:nth-child(2) { animation: infoRowSlide .35s ease .65s forwards; }
.infoRow:nth-child(3) { animation: infoRowSlide .35s ease .75s forwards; }

.infoRow:hover {
	background: rgba(255, 255, 255, 0.04);
	transform: translateX(.3vw);
	color: #ffffff;
}

.infoRow:hover .infoIcon {
	transform: scale(1.15) rotate(-6deg);
	filter: drop-shadow(0 .2vw .4vw rgba(90, 156, 255, 0.4));
}

.infoRow:hover .infoValue {
	text-shadow: 0 0 .6vw rgba(255, 255, 255, 0.3);
}

@keyframes infoRowSlide {
	from {
		opacity: 0;
		transform: translateX(-.4vw);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- Info Icons --- */
.infoIcon {
	width: 1.3vw;
	height: 1.3vw;
	flex-shrink: 0;
	transition: transform .25s ease, filter .25s ease;
	animation: infoIconPulse 2.5s ease infinite;
}

@keyframes infoIconPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}

.infoRow:nth-child(2) .infoIcon {
	animation: hourglassSpin 3s linear infinite;
}

@keyframes hourglassSpin {
	0%   { transform: rotate(0deg); }
	50%  { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}

.infoRow:nth-child(3) .infoIcon {
	animation: skullBounce 2s ease infinite;
}

@keyframes skullBounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-.15vw); }
}

/* --- Info Value --- */
.infoValue {
	color: #ffffff;
	font-weight: 600;
	position: relative;
	transition: text-shadow .2s ease;
}

.infoValue::after {
	content: '';
	position: absolute;
	bottom: -.1vw;
	left: 0;
	width: 100%;
	height: .08vw;
	background: linear-gradient(90deg, #5A9CFF, transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.infoRow:hover .infoValue::after {
	transform: scaleX(1);
}

/* --- Info Verifies --- */
.infoVerifies {
    display: flex;
    gap: 0vw;
    margin-top: .8vw;
    opacity: 0;
    animation: infoVerifiesFade .4s ease .85s forwards;
    width: 18vw;
}

@keyframes infoVerifiesFade {
	from {
		opacity: 0;
		transform: translateY(.4vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.infoVerify {
	display: flex;
	align-items: center;
	gap: .4vw;
	font-size: .95vw;
	font-weight: 600;
	padding: .25vw .5vw;
	border-radius: .6vw;
	cursor: default;
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, background .2s ease;
}

.infoVerify::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(90,156,255,0.15), transparent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width .4s ease, height .4s ease;
}

.infoVerify:hover::before {
	width: 8vw;
	height: 8vw;
}

.infoVerify:hover {
	transform: scale(1.05);
	background: rgba(255, 255, 255, 0.04);
}

.infoVerify:hover .verifyIcon {
	animation: verifyIconPop .35s ease;
}

@keyframes verifyIconPop {
	0%   { transform: scale(1) rotate(0deg); }
	50%  { transform: scale(1.25) rotate(10deg); }
	100% { transform: scale(1.08) rotate(0deg); }
}

.infoVerify.discord { color: #5A9CFF; }
.infoVerify.telegram { color: #ffffff; }

.infoVerify .verifyIcon {
	width: 1.2vw;
	height: 1.2vw;
	transition: transform .2s ease;
}

.infoVerify.discord .verifyIcon {
	animation: discordGlow 2s ease infinite;
}

@keyframes discordGlow {
	0%, 100% { filter: drop-shadow(0 0 .3vw rgba(90, 156, 255, 0.3)); }
	50%      { filter: drop-shadow(0 0 .8vw rgba(90, 156, 255, 0.6)); }
}

.infoVerify.telegram .verifyIcon {
	animation: telegramSlide 2.5s ease infinite;
}

@keyframes telegramSlide {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(.15vw); }
}

.infoVerifyText {
	position: relative;
}

.infoVerifyText::before {
	content: '';
	position: absolute;
	left: -.3vw;
	top: 50%;
	width: .3vw;
	height: .3vw;
	background: currentColor;
	border-radius: 50%;
	transform: translateY(-50%) scale(0);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
}

.infoVerify:hover .infoVerifyText::before {
	transform: translateY(-50%) scale(1);
	opacity: 1;
}

/* ============================================
   ACHIEVEMENTS / ДОСТИЖЕНИЯ
   ============================================ */
.achievementsCard {
	background: #14161A;
	border: .15vw solid #1E2127;
	border-radius: 1.6vw;
	padding: 1.4vw 1.6vw;
	width: 20vw;
	height: 12.2vw;
	position: absolute;
	top: 15vw;
	left: 70vw;
	overflow: hidden;
	opacity: 0;
	transform: translateY(1.2vw) scale(.96);
	animation: profileCardSlideUp .6s ease .6s forwards;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.achievementsCard::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 1;
}

.achievementsCard::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 0;
}

.achievementsCard:hover::before {
	left: 100%;
}

.achievementsCard:hover::after {
	opacity: 1;
}

.achievementsCard:hover {
	transform: translateY(-.3vw) scale(1.01);
	box-shadow: 0 .8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.8vw rgba(45, 125, 255, 0.15);
	border-color: #2D7DFF;
}

/* --- Achievements Title --- */
.achievementsTitle {
	margin: 0 0 1vw 0;
	color: #ffffff;
	font-size: 1.15vw;
	font-weight: 700;
	position: relative;
	display: inline-block;
	opacity: 0;
	transform: translateX(-.5vw);
	animation: achievementsTitleSlide .4s ease .75s forwards;
}

.achievementsTitle::after {
	content: '';
	position: absolute;
	bottom: -.25vw;
	left: 0;
	width: 0;
	height: .12vw;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 999px;
	transition: width .35s ease;
}

.achievementsCard:hover .achievementsTitle::after {
	width: 100%;
}

@keyframes achievementsTitleSlide {
	from {
		opacity: 0;
		transform: translateX(-.5vw);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- Achievements List --- */
.achievementsList {
	display: flex;
	flex-direction: column;
	gap: .6vw;
}

/* --- Achievement Item --- */
.achievementItem {
	display: flex;
	align-items: center;
	gap: .5vw;
	padding: .5vw .6vw;
	border-radius: .8vw;
	background: rgba(255, 255, 255, 0.02);
	cursor: default;
	opacity: 0;
	transform: translateX(-.6vw);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
	position: relative;
	overflow: hidden;
}

.achievementItem::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: .15vw;
	background: linear-gradient(180deg, #5A9CFF, #2D7DFF);
	opacity: 0;
	transition: opacity .25s ease;
}

.achievementItem:hover::before {
	opacity: 1;
}

.achievementItem:nth-child(1) { animation: achievementItemSlide .35s ease .85s forwards; }
.achievementItem:nth-child(2) { animation: achievementItemSlide .35s ease .95s forwards; }
.achievementItem:nth-child(3) { animation: achievementItemSlide .35s ease 1.05s forwards; }

.achievementItem:hover {
	background: rgba(255, 255, 255, 0.04);
	transform: translateX(.3vw);
	box-shadow: 0 .3vw .8vw rgba(0, 0, 0, 0.15);
}

@keyframes achievementItemSlide {
	from {
		opacity: 0;
		transform: translateX(-.6vw);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- Achievement Icon --- */
.achievementIcon {
	width: 1.4vw;
	height: 1.4vw;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s ease, filter .25s ease;
	position: relative;
}

.achievementItem:hover .achievementIcon {
	transform: scale(1.15) rotate(-5deg);
}

.achievementItem:nth-child(1) .achievementIcon {
	animation: chatBubblePulse 2.5s ease infinite;
}

@keyframes chatBubblePulse {
	0%, 100% {
		transform: scale(1);
		filter: brightness(1);
	}
	50% {
		transform: scale(1.08);
		filter: brightness(1.15);
	}
}

.achievementItem:nth-child(2) .achievementIcon {
	animation: sparkleTwinkle 2s ease infinite;
}

@keyframes sparkleTwinkle {
	0%, 100% {
		transform: scale(1) rotate(0deg);
		filter: brightness(1) drop-shadow(0 0 .2vw rgba(255, 215, 0, 0.3));
	}
	25% {
		transform: scale(1.1) rotate(5deg);
		filter: brightness(1.3) drop-shadow(0 0 .5vw rgba(255, 215, 0, 0.6));
	}
	50% {
		transform: scale(1) rotate(0deg);
		filter: brightness(1);
	}
	75% {
		transform: scale(1.08) rotate(-5deg);
		filter: brightness(1.2) drop-shadow(0 0 .4vw rgba(255, 215, 0, 0.5));
	}
}

.achievementItem:nth-child(3) .achievementIcon {
	animation: clockTick 2s linear infinite;
}

@keyframes clockTick {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* --- Achievement Text --- */
.achievementText {
	color: #C6D6F4;
	font-size: .95vw;
	font-weight: 500;
	transition: color .2s ease, text-shadow .2s ease;
	position: relative;
}

.achievementItem:hover .achievementText {
	color: #ffffff;
	text-shadow: 0 0 .5vw rgba(255, 255, 255, 0.2);
}

/* --- Achievement Badge/Glow Effect --- */
.achievementItem::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(90,156,255,0.15), transparent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width .4s ease, height .4s ease;
	pointer-events: none;
}

.achievementItem:hover::after {
	width: 12vw;
	height: 12vw;
}

/* --- Special Achievement (Rare/Legendary) --- */
.achievementItem.rare {
	background: linear-gradient(90deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02));
	border: .05vw solid rgba(255,215,0,0.2);
}

.achievementItem.rare:hover {
	background: linear-gradient(90deg, rgba(255,215,0,0.12), rgba(255,215,0,0.04));
	border-color: rgba(255,215,0,0.4);
	box-shadow: 0 .3vw .8vw rgba(255, 215, 0, 0.15);
}

.achievementItem.rare .achievementText {
	color: #FFD700;
}

/* --- Achievement Count Badge --- */
.achievementCount {
	margin-left: auto;
	background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
	color: #ffffff;
	font-size: .75vw;
	font-weight: 700;
	padding: .2vw .5vw;
	border-radius: 999px;
	opacity: 0;
	transform: scale(.8);
	animation: achievementCountPop .4s ease 1.15s forwards;
	transition: transform .2s ease, box-shadow .2s ease;
}

.achievementItem:hover .achievementCount {
	transform: scale(1.05);
	box-shadow: 0 .2vw .5vw rgba(45, 125, 255, 0.3);
}

@keyframes achievementCountPop {
	0% {
		opacity: 0;
		transform: scale(.8);
	}
	60% {
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- Progress Bar for Achievements --- */
.achievementsProgress {
	margin-top: 1vw;
	padding-top: 1vw;
	border-top: .08vw solid #1E2127;
}

.achievementsProgressTitle {
	color: #7B818D;
	font-size: .8vw;
	margin-bottom: .4vw;
}

.achievementsProgressBar {
	width: 100%;
	height: .4vw;
	background: #1E2127;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.achievementsProgressBarFill {
	height: 100%;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 999px;
	width: 0%;
	animation: progressBarFill 1s ease 1.25s forwards;
	position: relative;
	overflow: hidden;
}

.achievementsProgressBarFill::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	animation: progressBarShine 2s ease infinite;
}

@keyframes progressBarFill {
	to {
		width: 65%;
	}
}

@keyframes progressBarShine {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

/* --- Floating Particles Effect --- */
.achievementsCard .particle {
	position: absolute;
	width: .3vw;
	height: .3vw;
	background: rgba(90, 156, 255, 0.4);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	animation: particleFloat 3s ease infinite;
}

.achievementsCard .particle:nth-child(1) {
	top: 20%;
	left: 10%;
	animation-delay: 0s;
}

.achievementsCard .particle:nth-child(2) {
	top: 60%;
	right: 10%;
	animation-delay: 1s;
}

.achievementsCard .particle:nth-child(3) {
	bottom: 20%;
	left: 50%;
	animation-delay: 2s;
}

@keyframes particleFloat {
	0%, 100% {
		opacity: 0;
		transform: translateY(0) scale(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-1vw) scale(1);
	}
}
/* ============================================
   SKINS / СКИНЫ
   ============================================ */
.skinsCard {
    background: #14161A;
    border: .15vw solid #1E2127;
    border-radius: 1.6vw;
    padding: 1.1vw 1.6vw;
    width: 20vw;
    position: absolute;
    top: 28vw;
    left: 48.9vw;
    overflow: hidden;
    opacity: 0;
    transform: translateY(1.2vw) scale(.96);
    animation: profileCardSlideUp .6s ease .8s forwards;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.skinsCard::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 1;
}

.skinsCard::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 0;
}

.skinsCard:hover::before {
	left: 100%;
}

.skinsCard:hover::after {
	opacity: 1;
}

.skinsCard:hover {
	transform: translateY(-.3vw) scale(1.01);
	box-shadow: 0 .8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.8vw rgba(45, 125, 255, 0.15);
	border-color: #2D7DFF;
	overflow: auto;
	transition: overflow 1s;
}

/* --- Skins Title --- */
.skinsTitle {
	margin: 0 0 1vw 0;
	color: #ffffff;
	font-size: 1.15vw;
	font-weight: 700;
	position: relative;
	display: inline-block;
	opacity: 0;
	transform: translateX(-.5vw);
	animation: skinsTitleSlide .4s ease .95s forwards;
}

.skinsTitle::after {
	content: '';
	position: absolute;
	bottom: -.25vw;
	left: 0;
	width: 0;
	height: .12vw;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 999px;
	transition: width .35s ease;
}

.skinsCard:hover .skinsTitle::after {
	width: 100%;
}

@keyframes skinsTitleSlide {
	from {
		opacity: 0;
		transform: translateX(-.5vw);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- Skins Gallery --- */
.skinsGallery {
    display: flex;
    gap: 0.8vw;
    width: 50%;
    margin-bottom: 1vw;
    opacity: 1;
    animation: skinsGalleryFade .4s ease 1.05s forwards;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start; /* Выравнивание по левому краю */
}

/* Базовые стили для всех skinItem */
.skinItem {
    flex: 0 0 calc(33.333% - 0.53vw); /* Фиксированная ширина: 1/3 контейнера минус gap */
    max-width: 6.2vw; /* Максимальная ширина */
    min-width: 3vw;   /* Минимальная ширина */
    aspect-ratio: 1;  /* Квадратное соотношение */
    position: relative;
    border-radius: .8vw;
    overflow: hidden;
    cursor: pointer;
    opacity: 0; /* Скрыто по умолчанию для анимации */
    transform: scale(.85);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Анимация появления для каждого элемента */
.skinItem:nth-child(1) { animation: skinItemPop .35s ease 1.15s forwards; }
.skinItem:nth-child(2) { animation: skinItemPop .35s ease 1.25s forwards; }
.skinItem:nth-child(3) { animation: skinItemPop .35s ease 1.35s forwards; }
.skinItem:nth-child(4) { animation: skinItemPop .35s ease 1.45s forwards; }
.skinItem:nth-child(5) { animation: skinItemPop .35s ease 1.55s forwards; }
.skinItem:nth-child(6) { animation: skinItemPop .35s ease 1.65s forwards; }

/* Для 7+ элементов */
.skinItem:nth-child(n+7) {
    animation: skinItemPop .35s ease 1.75s forwards;
}

.skinItem:hover {
    transform: scale(1.05) translateY(-.15vw);
    box-shadow: 0 .4vw 1vw rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Если скинов меньше 3, они всё равно будут правильного размера */
.skinsGallery:has(.skinItem:nth-child(1):only-child) .skinItem {
    flex: 0 0 auto;
    max-width: 6.2vw;
}

.skinsGallery:has(.skinItem:nth-child(2):last-child) .skinItem {
    flex: 0 0 calc(50% - 0.4vw);
}

/* Остальные стили остаются без изменений */
.skinItem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(90,156,255,0.15), rgba(45,125,255,0.08));
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 1;
}

.skinItem:hover::before {
    opacity: 1;
}


.skinItem::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(90,156,255,0.25), transparent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width .4s ease, height .4s ease;
	pointer-events: none;
}

.skinItem:hover::after {
	width: 10vw;
	height: 10vw;
}

@keyframes skinItemPop {
	0% {
		opacity: 0;
		transform: scale(.85);
	}
	60% {
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- Skin Preview Image --- */
.skinPreview {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	filter: brightness(1.05);
	transition: transform .3s ease, filter .3s ease;
	position: relative;
	z-index: 2;
}

.skinItem:hover .skinPreview {
	transform: scale(1.08);
	filter: brightness(1.15) drop-shadow(0 .3vw .6vw rgba(0, 0, 0, 0.4));
}

/* --- Skin Active Indicator --- */
.skinActive {
	position: absolute;
	top: .3vw;
	right: .3vw;
	width: .8vw;
	height: .8vw;
	background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0);
	transition: opacity .2s ease, transform .2s ease;
	z-index: 3;
	box-shadow: 0 .2vw .5vw rgba(45, 125, 255, 0.4);
}

.skinItem.isActive .skinActive {
	opacity: 1;
	transform: scale(1);
	animation: activePulse .4s ease;
}

@keyframes activePulse {
	0% { transform: scale(0); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* --- Upload Button --- */
.skinsUploadButton {
	width: 100%;
	padding: .7vw 1.2vw;
	border: .1vw dashed #2D7DFF;
	border-radius: .8vw;
	background: rgba(45, 125, 255, 0.06);
	color: #5A9CFF;
	font-size: .9vw;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4vw;
	opacity: 0;
	transform: translateY(.4vw);
	animation: uploadButtonSlide .4s ease 1.35s forwards;
	transition: all .25s ease;
	position: relative;
	overflow: hidden;
}

.skinsUploadButton::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(90,156,255,0.1), transparent);
	transition: left .5s ease;
	pointer-events: none;
}

.skinsUploadButton:hover::before {
	left: 100%;
}

.skinsUploadButton:hover {
	background: rgba(45, 125, 255, 0.12);
	border-color: #5A9CFF;
	color: #ffffff;
	transform: translateY(-.1vw);
	box-shadow: 0 .3vw .8vw rgba(45, 125, 255, 0.2);
}

.skinsUploadButton:active {
	transform: translateY(0);
}

@keyframes uploadButtonSlide {
	from {
		opacity: 0;
		transform: translateY(.4vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Upload Icon --- */
.uploadIcon {
	width: 1.2vw;
	height: 1.2vw;
	transition: transform .25s ease;
}

.skinsUploadButton:hover .uploadIcon {
	transform: translateY(-.15vw);
}

/* --- Skins Count Badge --- */
.skinsCount {
	margin-left: auto;
	background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
	color: #ffffff;
	font-size: .75vw;
	font-weight: 700;
	padding: .2vw .5vw;
	border-radius: 999px;
	opacity: 0;
	transform: scale(.8);
	animation: skinsCountPop .4s ease 1.45s forwards;
	transition: transform .2s ease, box-shadow .2s ease;
}

.skinsCard:hover .skinsCount {
	transform: scale(1.05);
	box-shadow: 0 .2vw .5vw rgba(45, 125, 255, 0.3);
}

@keyframes skinsCountPop {
	0% {
		opacity: 0;
		transform: scale(.8);
	}
	60% {
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- Floating Sparkles Effect --- */
.skinsCard .sparkle {
	position: absolute;
	width: .4vw;
	height: .4vw;
	background: rgba(255, 215, 0, 0.6);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	animation: sparkleAppear 2.5s ease infinite;
}

.skinsCard .sparkle:nth-child(1) {
	top: 25%;
	left: 15%;
	animation-delay: 0s;
}

.skinsCard .sparkle:nth-child(2) {
	top: 55%;
	right: 15%;
	animation-delay: .8s;
}

.skinsCard .sparkle:nth-child(3) {
	bottom: 30%;
	left: 50%;
	animation-delay: 1.6s;
}

@keyframes sparkleAppear {
	0%, 100% {
		opacity: 0;
		transform: scale(0) rotate(0deg);
	}
	50% {
		opacity: 1;
		transform: scale(1) rotate(180deg);
	}
}


/* --- Upload Success State --- */
.skinsUploadButton.uploading {
	background: rgba(255, 184, 0, 0.12);
	border-color: #FFB800;
	color: #FFD700;
	pointer-events: none;
}

.skinsUploadButton.uploading::before {
	content: '';
	position: absolute;
	width: 1.2vw;
	height: 1.2vw;
	border: .15vw solid rgba(255, 255, 255, 0.3);
	border-top-color: #FFB800;
	border-radius: 50%;
	animation: uploadSpin .8s linear infinite;
}

@keyframes uploadSpin {
	to { transform: rotate(360deg); }
}

.skinsUploadButton.success {
	background: rgba(46, 213, 115, 0.15);
	border-color: #2ED573;
	color: #2ED573;
	animation: successPulse .4s ease;
}

@keyframes successPulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.skinsUploadButton.success .uploadIcon {
	display: none;
}

.skinsUploadButton.success::after {
	content: '✓';
	font-size: 1.1vw;
	font-weight: 700;
}

/* --- Upload Progress Bar --- */
.uploadProgress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: .2vw;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 0 0 .8vw .8vw;
	width: 0%;
	transition: width .3s ease;
	opacity: 0;
}

.uploadProgress.active {
	opacity: 1;
}

/* --- Upload Toast Notification --- */
.uploadToast {
	position: fixed;
	bottom: 2vw;
	right: 2vw;
	background: #14161A;
	border: .15vw solid #2ED573;
	border-radius: 1.2vw;
	padding: 1vw 1.4vw;
	box-shadow: 0 .8vw 2vw rgba(0, 0, 0, 0.4), 0 0 1.5vw rgba(46, 213, 115, 0.3);
	display: flex;
	align-items: center;
	gap: .8vw;
	opacity: 0;
	transform: translateY(2vw) scale(.95);
	transition: opacity .3s ease, transform .3s ease;
	z-index: 1000;
}

.uploadToast.show {
	opacity: 1;
	transform: translateY(0) scale(1);
	animation: toastSlide .4s ease;
}

@keyframes toastSlide {
	0% {
		opacity: 0;
		transform: translateY(2vw) scale(.95);
	}
	60% {
		transform: translateY(-.2vw) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.uploadToastIcon {
	width: 2.4vw;
	height: 2.4vw;
	background: linear-gradient(135deg, #2ED573, #7BED9F);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.uploadToastIcon svg {
	width: 1.4vw;
	height: 1.4vw;
	stroke: #ffffff;
}

.uploadToastContent {
	display: flex;
	flex-direction: column;
	gap: .2vw;
}

.uploadToastTitle {
	color: #ffffff;
	font-size: .95vw;
	font-weight: 700;
}

.uploadToastText {
	color: #7B818D;
	font-size: .8vw;
}

.uploadToastClose {
	margin-left: 1vw;
	background: transparent;
	border: none;
	color: #7B818D;
	cursor: pointer;
	padding: .3vw;
	transition: color .2s ease;
}

.uploadToastClose:hover {
	color: #ffffff;
}

/* --- Skin Upload Counter --- */
.skinUploadCount {
	position: absolute;
	top: .4vw;
	right: .4vw;
	background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
	color: #ffffff;
	font-size: .65vw;
	font-weight: 700;
	padding: .2vw .45vw;
	border-radius: 999px;
	opacity: 0;
	transform: scale(0);
	transition: opacity .3s ease, transform .3s ease;
}

.skinUploadCount.show {
	opacity: 1;
	transform: scale(1);
	animation: countPop .4s ease;
}

@keyframes countPop {
	0% { transform: scale(0); }
	60% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* --- Preview Animation for New Skin --- */
.skinItem.newUpload {
	animation: newSkinHighlight 1s ease;
}

@keyframes newSkinHighlight {
	0% {
		box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.7);
	}
	50% {
		box-shadow: 0 0 0 .4vw rgba(46, 213, 115, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(46, 213, 115, 0);
	}
}



/* ============================================
   DESCRIPTION / ОПИСАНИЕ
   ============================================ */
.descriptionCard {
    background: #14161A;
    border: .15vw solid #1E2127;
    border-radius: 1.6vw;
    padding: 1.4vw 1.6vw;
    width: 20vw;
    height: 9vw;
    position: absolute;
	top: 28vw;
    left: 70vw;
    overflow: hidden;
    opacity: 0;
    transform: translateY(1.2vw) scale(.96);
    animation: profileCardSlideUp .6s ease 1s forwards;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.descriptionCard::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 1;
}

.descriptionCard::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 0;
}

.descriptionCard:hover::before {
	left: 100%;
}

.descriptionCard:hover::after {
	opacity: 1;
}

.descriptionCard:hover {
	transform: translateY(-.3vw) scale(1.01);
	box-shadow: 0 .8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.8vw rgba(45, 125, 255, 0.15);
	border-color: #2D7DFF;
}

/* --- Description Title --- */
.descriptionTitle {
	margin: 0 0 1vw 0;
	color: #ffffff;
	font-size: 1.15vw;
	font-weight: 700;
	position: relative;
	display: inline-block;
	opacity: 0;
	transform: translateX(-.5vw);
	animation: descriptionTitleSlide .4s ease 1.15s forwards;
}

.descriptionTitle::after {
	content: '';
	position: absolute;
	bottom: -.25vw;
	left: 0;
	width: 0;
	height: .12vw;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 999px;
	transition: width .35s ease;
}

.descriptionCard:hover .descriptionTitle::after {
	width: 100%;
}

@keyframes descriptionTitleSlide {
	from {
		opacity: 0;
		transform: translateX(-.5vw);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- Description Text --- */
.descriptionText {
	color: #C6D6F4;
	font-size: .95vw;
	line-height: 1.6;
	margin: 0;
	opacity: 0;
	transform: translateY(.4vw);
	animation: descriptionTextFade .4s ease 1.25s forwards;
	transition: color .2s ease, text-shadow .2s ease;
}

.descriptionCard:hover .descriptionText {
	color: #ffffff;
	text-shadow: 0 0 .5vw rgba(255, 255, 255, 0.15);
}

@keyframes descriptionTextFade {
	from {
		opacity: 0;
		transform: translateY(.4vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Description Lines (for multi-line text) --- */
.descriptionLine {
	display: block;
	margin-bottom: .3vw;
	opacity: 0;
	transform: translateX(-.4vw);
	transition: transform .2s ease, color .2s ease;
}

.descriptionLine:nth-child(1) { animation: descriptionLineSlide .35s ease 1.3s forwards; }
.descriptionLine:nth-child(2) { animation: descriptionLineSlide .35s ease 1.4s forwards; }
.descriptionLine:nth-child(3) { animation: descriptionLineSlide .35s ease 1.5s forwards; }

.descriptionLine:hover {
	transform: translateX(.2vw);
	color: #ffffff;
}

@keyframes descriptionLineSlide {
	from {
		opacity: 0;
		transform: translateX(-.4vw);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- Description Highlight --- */
.descriptionHighlight {
	color: #5A9CFF;
	font-weight: 600;
	position: relative;
	display: inline-block;
	transition: color .25s ease, text-shadow .25s ease;
}

.descriptionCard:hover .descriptionHighlight {
	color: #7FB3FF;
	text-shadow: 0 0 .6vw rgba(90, 156, 255, 0.4);
}

.descriptionHighlight::after {
	content: '';
	position: absolute;
	bottom: -.1vw;
	left: 0;
	width: 100%;
	height: .08vw;
	background: linear-gradient(90deg, #5A9CFF, transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.descriptionCard:hover .descriptionHighlight::after {
	transform: scaleX(1);
}

/* ============================================
   POST /   ПОСТ
   ============================================ */

.blockContentMain {
    position: relative;
    top: 56vw;
    left: 23vw;
    height: 100%;
    width: calc(100% - 34vw - 13vw);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

/* ============================================
TAB STRIP / ВКЛАДКИ
============================================ */
.tabStrip {
	position: absolute;
	top: 50vw;
	left: 27.7vw;
	display: flex;
	gap: 0vw;
	padding: .35vw;
	background-color: #14161A;
	border: .15vw solid #1E2127;
	border-radius: 999px;
	box-shadow: 0 0 0 .05vw rgba(255, 255, 255, 0.03);
	overflow: hidden;
	opacity: 0;
	transform: translateY(1.2vw) scale(.96);
	animation: profileCardSlideUp .6s ease 1.4s forwards;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tabStrip::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 1;
}

.tabStrip::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 0;
}

.tabStrip:hover::before {
	left: 100%;
}

.tabStrip:hover::after {
	opacity: 1;
}


/* --- Tab Item --- */
.tabItem {
	border: none;
	background: transparent;
	color: #8A90A0;
	padding: 0.55vw 9.6vw;
	border-radius: 999px;
	font-size: .95vw;
	font-family: 'Plus Jakarta Sans', Arial, sans-serif;
	font-weight: 500;
	cursor: pointer;
	position: relative;
	z-index: 2;
	overflow: hidden;
	opacity: 0;
	transform: translateY(.5vw) scale(.95);
	transition: all .25s ease;
}

.tabItem:nth-child(1) {
	animation: tabItemSlide .4s ease 1.55s forwards;
}

.tabItem:nth-child(2) {
	animation: tabItemSlide .4s ease 1.65s forwards;
}

.tabItem:hover {
	color: #ffffff;
	transform: translateY(-.06vw) scale(1.02);
}

.tabItem:hover::before {
	opacity: 1;
}

.tabItem::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(255,255,255,0.06), transparent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width .4s ease, height .4s ease;
	opacity: 0;
	pointer-events: none;
}

.tabItem:hover::before {
	width: 20vw;
	height: 20vw;
}

.tabItem:active {
	transform: scale(.97);
}

/* --- Tab Item Active --- */
.tabItem.active {
	background: linear-gradient(90deg, #2D7DFF, #5A9CFF);
	color: white;
	box-shadow: 0 .2vw .7vw rgba(45, 125, 255, 0.35);
	font-weight: 600;
}

.tabItem.active::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
	transition: left .5s ease;
	pointer-events: none;
}

.tabItem.active:hover::after {
	left: 100%;
}

/* --- Tab Item Switch Animation --- */
.tabItem.switching {
	animation: tabSwitch .3s ease;
}

@keyframes tabItemSlide {
	from {
		opacity: 0;
		transform: translateY(.5vw) scale(.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes tabSwitch {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(.95);
		opacity: .7;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* --- Tab Count Badge (optional) --- */
.tabCount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: .4vw;
	padding: .15vw .45vw;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	font-size: .75vw;
	font-weight: 700;
	transition: background .2s ease, transform .2s ease;
}

.tabItem:hover .tabCount {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
}

.tabItem.active .tabCount {
	background: rgba(255, 255, 255, 0.25);
}

/* --- Tab Indicator Dot --- */
.tabIndicator {
	position: absolute;
	bottom: .15vw;
	left: 50%;
	width: .3vw;
	height: .3vw;
	background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
	border-radius: 50%;
	transform: translateX(-50%) scale(0);
	opacity: 0;
	transition: transform .3s ease, opacity .3s ease;
	pointer-events: none;
}

.tabItem.active .tabIndicator {
	transform: translateX(-50%) scale(1);
	opacity: 1;
	animation: indicatorPop .4s ease;
}

@keyframes indicatorPop {
	0% {
		transform: translateX(-50%) scale(0);
	}
	60% {
		transform: translateX(-50%) scale(1.3);
	}
	100% {
		transform: translateX(-50%) scale(1);
	}
}

/* ============================================
CREATE POST / СОЗДАНИЕ ПОСТА (X/Twitter Style)
============================================ */
.createPostCard {
    background: #14161A;
    border: .15vw solid #1E2127;
    border-radius: 1.6vw;
    padding: 1.4vw;
    width: 41.6vw;
    position: relative;
    top: 55vw;
    left: 29.5vw;
    overflow: hidden;
    opacity: 0;
    transform: translateY(1.2vw) scale(.96);
    animation: profileCardSlideUp .6s ease 1.2s forwards;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.createPostCard::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 1;
}

.createPostCard::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 0;
}

.createPostCard:hover::before {
	left: 100%;
}

.createPostCard:hover::after {
	opacity: 1;
}

.createPostCard:hover {
	transform: translateY(-.3vw) scale(1.01);
	box-shadow: 0 .8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.8vw rgba(45, 125, 255, 0.15);
	border-color: #2D7DFF;
}

/* --- Post Composer Layout --- */
.postComposer {
	display: flex;
	gap: 1vw;
	position: relative;
	z-index: 2;
}

/* --- Composer Avatar --- */
.composerAvatar {
	flex-shrink: 0;
	width: 3.2vw;
	height: 3.2vw;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transform: scale(.8);
	animation: composerAvatarPop .4s ease 1.3s forwards;
}

.composerAvatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: .15vw solid #1E2127;
	transition: transform .25s ease, border-color .25s ease;
}

.composerAvatar:hover img {
	transform: scale(1.05);
	border-color: #5A9CFF;
}

@keyframes composerAvatarPop {
	0% {
		opacity: 0;
		transform: scale(.8);
	}
	60% {
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- Composer Content --- */
.composerContent {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .8vw;
}

/* --- Post Textarea --- */
.postTextarea {
	width: 100%;
	min-height: 3vw;
	max-height: 15vw;
	background: transparent;
	border: none;
	outline: none;
	color: #E6EEF9;
	font-size: 1.1vw;
	font-family: 'Plus Jakarta Sans', Arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	resize: none;
	overflow: hidden;
	padding: .2vw 0;
	opacity: 0;
	transform: translateY(.4vw);
	animation: textareaSlide .4s ease 1.35s forwards;
	transition: color .2s ease;
}

.postTextarea::placeholder {
	color: #6D747E;
	font-weight: 300;
}

.postTextarea:focus {
	outline: none;
	color: #ffffff;
}

@keyframes textareaSlide {
	from {
		opacity: 0;
		transform: translateY(.4vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Attached Media Preview --- */
.attachedMedia {
	display: flex;
	flex-wrap: wrap;
	gap: .6vw;
	margin-top: .4vw;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity .3s ease, max-height .4s ease, margin .3s ease;
}

.attachedMedia.hasFiles {
	opacity: 1;
	max-height: 20vw;
	margin-top: .8vw;
}

.mediaPreview {
	position: relative;
	width: 12vw;
	height: 8vw;
	border-radius: 1vw;
	overflow: hidden;
	border: .1vw solid #1E2127;
	opacity: 0;
	transform: scale(.9);
	animation: mediaPreviewPop .3s ease forwards;
	transition: transform .2s ease, box-shadow .2s ease;
}

.mediaPreview:hover {
	transform: scale(1.03);
	box-shadow: 0 .4vw 1vw rgba(0, 0, 0, 0.3);
}

.mediaPreview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mediaPreviewRemove {
	position: absolute;
	top: .3vw;
	right: .3vw;
	width: 1.6vw;
	height: 1.6vw;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	font-size: .9vw;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.8);
	transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.mediaPreview:hover .mediaPreviewRemove {
	opacity: 1;
	transform: scale(1);
}

.mediaPreviewRemove:hover {
	background: rgba(255, 77, 77, 0.9);
}

@keyframes mediaPreviewPop {
	0% {
		opacity: 0;
		transform: scale(.9);
	}
	60% {
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- Composer Actions --- */
.composerActions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: .8vw;
	border-top: .1vw solid #1E2127;
	opacity: 0;
	transform: translateY(.4vw);
	animation: actionsSlide .4s ease 1.45s forwards;
}

@keyframes actionsSlide {
	from {
		opacity: 0;
		transform: translateY(.4vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Composer Tools --- */
.composerTools {
	display: flex;
	gap: .4vw;
}

.toolButton {
	width: 2.4vw;
	height: 2.4vw;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s ease;
	position: relative;
}

.toolButton svg {
	width: 1.4vw;
	height: 1.4vw;
	stroke: #7B818D;
	transition: stroke .2s ease, transform .2s ease;
}

.toolButton:hover {
	background: rgba(45, 125, 255, 0.1);
}

.toolButton:hover svg {
	stroke: #5A9CFF;
	transform: scale(1.1);
}

.toolButton:active {
	transform: scale(.95);
}

/* --- Composer Right Section --- */
.composerRight {
	display: flex;
	align-items: center;
	gap: .8vw;
}

/* --- Character Counter --- */
.characterCounter {
	color: #6D747E;
	font-size: .8vw;
	font-weight: 500;
	opacity: 0;
	transition: opacity .2s ease, color .2s ease;
}

.postTextarea:focus ~ .composerActions .characterCounter,
.characterCounter.visible {
	opacity: 1;
}

.characterCounter.warning {
	color: #FFB800;
}

.characterCounter.danger {
	color: #FF5D7A;
	animation: counterPulse .5s ease infinite;
}

@keyframes counterPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .6; }
}

/* --- Send Button --- */
.sendButton {
	width: 2.8vw;
	height: 2.8vw;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.8);
	animation: sendButtonPop .4s ease 1.5s forwards;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
	position: relative;
	overflow: hidden;
}

.sendButton::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(255,255,255,0.3), transparent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width .3s ease, height .3s ease;
}

.sendButton:hover::before {
	width: 4vw;
	height: 4vw;
}

.sendButton:hover {
	transform: scale(1.08) rotate(-5deg);
	box-shadow: 0 .4vw 1vw rgba(45, 125, 255, 0.4);
	filter: brightness(1.1);
}

.sendButton:active {
	transform: scale(.95);
}

.sendButton:disabled {
	opacity: .4;
	cursor: not-allowed;
	filter: grayscale(0.5);
}

.sendButton svg {
	width: 1.2vw;
	height: 1.2vw;
	stroke: #ffffff;
	transition: transform .25s ease;
}

.sendButton:hover svg {
	transform: translateX(.1vw) translateY(-.1vw);
}

@keyframes sendButtonPop {
	0% {
		opacity: 0;
		transform: scale(.8);
	}
	60% {
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- Pinned Post Section --- */
.pinnedPostSection {
	margin-top: 1vw;
	padding-top: 1vw;
	border-top: .1vw solid #1E2127;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5vw;
	opacity: 0;
	transform: translateY(.4vw);
	animation: pinnedPostFade .4s ease 1.6s forwards;
	cursor: pointer;
	transition: transform .2s ease;
}

.pinnedPostSection:hover {
	transform: translateY(-.1vw);
}

.pinnedPostSection:hover .pinIcon {
	transform: rotate(-10deg) scale(1.1);
}

.pinnedPostSection:hover .pinnedPostText {
	color: #ffffff;
}

@keyframes pinnedPostFade {
	from {
		opacity: 0;
		transform: translateY(.4vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Pin Icon --- */
.pinIcon {
	width: 1.2vw;
	height: 1.2vw;
	transition: transform .25s ease, filter .25s ease;
}

.pinIcon svg {
	width: 100%;
	height: 100%;
	stroke: #7B818D;
}

.pinnedPostSection:hover .pinIcon svg {
	stroke: #5A9CFF;
	filter: drop-shadow(0 0 .4vw rgba(90, 156, 255, 0.4));
}

/* --- Pinned Post Text --- */
.pinnedPostText {
	color: #7B818D;
	font-size: .95vw;
	font-weight: 500;
	transition: color .25s ease, text-shadow .25s ease;
}

.pinnedPostSection:hover .pinnedPostText {
	color: #ffffff;
	text-shadow: 0 0 .5vw rgba(255, 255, 255, 0.2);
}

/* --- Floating Particles --- */
.createPostCard .particle {
	position: absolute;
	width: .3vw;
	height: .3vw;
	background: rgba(90, 156, 255, 0.4);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	animation: particleFloat 3s ease infinite;
}

.createPostCard .particle:nth-child(1) {
	top: 15%;
	left: 10%;
	animation-delay: 0s;
}

.createPostCard .particle:nth-child(2) {
	top: 70%;
	right: 10%;
	animation-delay: 1.2s;
}

.createPostCard .particle:nth-child(3) {
	bottom: 25%;
	left: 50%;
	animation-delay: 2.4s;
}

@keyframes particleFloat {
	0%, 100% {
		opacity: 0;
		transform: translateY(0) scale(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-1vw) scale(1);
	}
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== КАРТОЧКА КЛАНА (ОБЫЧНАЯ) ===== */
.groupCard {
    position: absolute;
    top: 18vw;
    right: 35vw;
    background: #14161A;
    border: 0.06vw solid #1E2127;
    border-radius: 1.2vw;
    padding: 1.5vw;
    text-align: center;
    box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.groupCard:hover {
    transform: translateY(-0.2vw);
    box-shadow: 0 0.8vw 2vw rgba(0, 0, 0, 0.4);
}

.shimmerBorder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1.2vw;
    background: linear-gradient(135deg, rgba(90, 156, 255, 0.3), transparent, rgba(45, 125, 255, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.groupCard:hover .shimmerBorder {
    opacity: 1;
}

.groupLogo {
    position: relative;
    width: 6vw;
    height: 6vw;
    margin: 0 auto 1vw;
}

.pulseRing {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 0.15vw solid #5A9CFF;
    animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

.groupLogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 0.2vw solid #14161A;
}

.groupName {
    font-size: 1.3vw;
    font-weight: 700;
    color: #ffffff;
    display: block;
}

/* ===== КАРТОЧКА КЛАНА (ПУСТАЯ - НЕ В КЛАНЕ) ===== */
.groupCardEmpty {
	top: 15vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8vw;
    padding: 2vw 1.5vw;
    background: linear-gradient(135deg, #14161A 0%, #1a1d23 100%);
    border: 0.1vw dashed #2D3038;
    cursor: pointer;
    transition: all 0.3s ease;
}

.groupCardEmpty:link,
.groupCardEmpty:visited {
	color: inherit;
	text-decoration: none;
}

.groupCardEmpty:hover {
    border-color: #5A9CFF;
    background: linear-gradient(135deg, #1a1d23 0%, #14161A 100%);
    transform: translateY(-0.2vw);
    box-shadow: 0 0.8vw 2vw rgba(90, 156, 255, 0.15);
}

.emptyClanIcon {
    color: #4A4F5A;
    transition: all 0.3s ease;
    animation: float 3s ease-in-out infinite;
}

.groupCardEmpty:hover .emptyClanIcon {
    color: #5A9CFF;
    transform: scale(1.1);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.3vw); }
}

.emptyClanText {
    font-size: 0.9vw;
    color: #6D747E;
    font-weight: 500;
    transition: color 0.3s ease;
}

.groupCardEmpty:hover .emptyClanText {
    color: #CFE4FF;
}

.emptyClanButton {
    padding: 0.5vw 1.2vw;
    background: rgba(90, 156, 255, 0.1);
    border: 0.06vw solid rgba(90, 156, 255, 0.3);
    border-radius: 0.6vw;
    color: #5A9CFF;
    font-size: 0.85vw;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.emptyClanButton:hover {
    background: rgba(90, 156, 255, 0.2);
    border-color: #5A9CFF;
    transform: scale(1.05);
}

.emptyClanButton:active {
    transform: scale(0.98);
}

.tabStrip {
    top: 51vw;
    left: 27vw;
}

/* === SKINS CARD HOVER EFFECTS === */
.skinsHint {
    position: relative;
    top: -1.5vw;
    color: #7f7f7f;
    margin-bottom: -1vw;
    font-size: 0.9vw;
}

.skinItem {
    position: relative;
    border-radius: 1.6vw;
    overflow: visible; /* Важно для тултипа и кнопки удаления */
    transition: all 0.25s ease;
}

.skinWrapper {
    position: relative;
    cursor: pointer;
    border-radius: 0.6vw;
    overflow: hidden;
}

.skinPreview {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* Hover эффект на голову */
.skinItem:hover .skinPreview {
    transform: scale(1.05);
    filter: brightness(0.7);
}

/* Тултип "Установить на сервере" */
.skinTooltip {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    opacity: 0;
    transform: translateY(1vw);
    transition: all 0.25s ease;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.skinTooltip svg {
    width: 2.5vw;
    height: 2.5vw;
    stroke: var(--accent);
}

.skinTooltip span {
    font-size: 0.85vw;
    font-weight: 700;
    letter-spacing: 0.05vw;
}

.skinItem:hover .skinTooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Кнопка удаления */
.skinDeleteBtn {
    position: absolute;
    top: -0.6vw;
    right: -0.6vw;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background: var(--danger);
    border: 0.15vw solid var(--card);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
    padding: 0;
}

.skinDeleteBtn svg {
    width: 1vw;
    height: 1vw;
}

.skinItem:hover .skinDeleteBtn {
    opacity: 1;
    transform: scale(1);
}

.skinDeleteBtn:hover {
    background: #ff3b5c;
    transform: scale(1.15) !important;
    box-shadow: 0 0.3vw 1vw rgba(255, 93, 122, 0.4);
}

/* Бейдж активного скина */
.skinActiveBadge {
    position: absolute;
    bottom: 0.8vw;
    left: 50%;
    transform: translateX(-50%);
    width: 0.6vw;
    height: 0.6vw;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0.8vw rgba(46, 213, 115, 0.5);
}

/* Пустое состояние */
.skinsEmpty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3vw;
    color: var(--text-muted);
    font-size: 1vw;
    border: 0.1vw dashed var(--border);
    border-radius: 1.6vw;
}

/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ ПРОФИЛЯ — DARK STYLE
   ============================================ */

@media screen and (max-width: 768px) {

    /* ============================================
       BASE / RESET
       ============================================ */
    * {
        box-sizing: border-box;
    }

    .profilePage {
        margin-left: 0;
        padding: 0;
        width: 100vw;
        min-height: 100vh;
        background: #000000;
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
    }

    .profileMobileContainer {
        display: flex;
        flex-direction: column;
        width: 100vw;
        min-height: 100vh;
        padding: 0;
        gap: 0;
    }

    /* ============================================
       BANNER
       ============================================ */
    .blockBanner {
        position: relative;
        top: auto;
        left: auto;
        width: 92vw;
        height: 28vw;
        margin: 3vw auto 0;
        border-radius: 3vw;
        border: .15vw solid #1E2127;
        box-shadow: 0 .7vw 1.5vw rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(-2vw) scale(.98);
        animation: mobileBannerSlide .6s ease forwards;
        overflow: hidden;
    }

    .blockBanner::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(45,125,255,0.06), transparent);
        transition: left .8s ease;
        pointer-events: none;
    }

    .blockBanner:hover::before {
        left: 100%;
    }

    @keyframes mobileBannerSlide {
        from {
            opacity: 0;
            transform: translateY(-2vw) scale(.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* ============================================
       PROFILE HERO
       ============================================ */
    .profileHero {
        position: relative;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        opacity: 0;
        animation: heroFadeIn .5s ease .2s forwards;
    }

    @keyframes heroFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .profileHeroInfo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* ============================================
       AVATAR WRAP
       ============================================ */
    .profileAvatarWrap {
        position: relative;
        margin-top: -8vw;
        z-index: 10;
        flex-shrink: 0;
    }

    .profileAvatar {
        width: 18vw;
        height: 18vw;
        border-radius: 50%;
        object-fit: cover;
        border: .5vw solid #000000;
        background: #1a1d23;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: scale(.8);
        animation: avatarMobilePop .5s ease .3s forwards;
    }

    .profileAvatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    /* Зелёный индикатор онлайн */
    .profileAvatar .onlineDot {
        position: absolute;
        bottom: 1vw;
        right: 1vw;
        width: 3.5vw;
        height: 3.5vw;
        background: #22c55e;
        border-radius: 50%;
        border: .4vw solid #000000;
        z-index: 2;
        animation: onlinePulse 2s ease infinite;
    }

    @keyframes onlinePulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
        50%      { box-shadow: 0 0 0 .6vw rgba(34, 197, 94, 0); }
    }

    @keyframes avatarMobilePop {
        0%   { opacity: 0; transform: scale(.8); }
        60%  { transform: scale(1.05); }
        100% { opacity: 1; transform: scale(1); }
    }

    /* ============================================
       PROFILE TEXT
       ============================================ */
    .profileText {
        margin-top: 2.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .profileText h1 {
        margin: 0;
        font-size: 4.5vw;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -.02vw;
        opacity: 0;
        transform: translateY(1vw);
        animation: textSlideUp .4s ease .4s forwards;
    }

    .profileTag {
        color: #7B818D;
        font-size: 3vw;
        font-weight: 400;
        margin-top: .5vw;
        opacity: 0;
        transform: translateY(.8vw);
        animation: textSlideUp .4s ease .5s forwards;
    }

    @keyframes textSlideUp {
        from { opacity: 0; transform: translateY(1vw); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ============================================
       PROFILE STATS
       ============================================ */
    .profileStats {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-top: 3vw;
        padding: 0 4vw;
        width: 100%;
        opacity: 0;
        animation: statsMobileFade .4s ease .6s forwards;
    }

    .profileStats .statBlock {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        padding: 1.5vw 0;
    }

    .profileStats .statBlock strong {
        color: #ffffff;
        font-size: 3.5vw;
        font-weight: 700;
        margin-right: 0;
    }

    .profileStats .statBlock span {
        color: #7B818D;
        font-size: 2.5vw;
        margin-top: .3vw;
    }

    .profileStats .statDivider {
        width: .15vw;
        height: 6vw;
        background: #1E2127;
        flex-shrink: 0;
    }

    @keyframes statsMobileFade {
        from { opacity: 0; transform: translateY(.8vw); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ============================================
       ACTION BUTTONS ROW
       ============================================ */
    .profileActions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2vw;
        margin-top: 3vw;
        padding: 0 4vw;
        width: 100%;
        opacity: 0;
        animation: actionsMobileFade .4s ease .7s forwards;
    }

    @keyframes actionsMobileFade {
        from { opacity: 0; transform: translateY(.8vw); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Кнопка настроек */
    .settingsButton {
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all .25s ease;
        flex-shrink: 0;
    }

    .settingsButton svg {
        width: 4vw;
        height: 4vw;
        fill: #3b82f6;
    }

    .settingsButton:hover {
        background: #22252b;
        transform: scale(1.05);
    }

    /* Кнопка редактировать */
    .editProfileButton {
        flex: 1;
        max-width: 30vw;
        padding: 2vw 4vw;
        background: #ffffff;
        color: #000000;
        border: none;
        border-radius: 999px;
        font-size: 2.8vw;
        font-weight: 600;
        font-family: 'Plus Jakarta Sans', sans-serif;
        cursor: pointer;
        transition: all .25s ease;
    }

    .editProfileButton:hover {
        background: #e5e7eb;
        transform: scale(1.02);
    }

    .editProfileButton:active {
        transform: scale(.97);
    }

    /* Кнопка клана */
    .clanButton {
        flex: 1;
        max-width: 30vw;
        padding: 2vw 3vw;
        background: #1a1d23;
        color: #ffffff;
        border: .15vw solid #1E2127;
        border-radius: 999px;
        font-size: 2.5vw;
        font-weight: 600;
        font-family: 'Plus Jakarta Sans', sans-serif;
        cursor: pointer;
        transition: all .25s ease;
        text-align: center;
        white-space: nowrap;
    }

    .clanButton:hover {
        background: #22252b;
        border-color: #2D7DFF;
        transform: scale(1.02);
    }

    .clanButton:active {
        transform: scale(.97);
    }

    /* ============================================
       REGISTRATION INFO
       ============================================ */
    .registrationInfo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5vw;
        margin-top: 3vw;
        padding-bottom: 3vw;
        opacity: 0;
        animation: regInfoFade .4s ease .8s forwards;
    }

    @keyframes regInfoFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .registrationInfo .regIcon {
        width: 3.5vw;
        height: 3.5vw;
        opacity: .5;
    }

    .registrationInfo .regIcon svg {
        width: 100%;
        height: 100%;
        stroke: #7B818D;
    }

    .registrationInfo .regText {
        color: #7B818D;
        font-size: 2.8vw;
        font-weight: 400;
    }

    /* ============================================
       SEPARATOR LINE
       ============================================ */
    .profileSeparator {
        width: 100vw;
        height: .15vw;
        background: #1E2127;
        margin: 0;
        flex-shrink: 0;
    }

    /* ============================================
       TAB STRIP
       ============================================ */
    .tabStrip {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        width: 92vw;
        margin: 2vw auto;
        padding: .6vw;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        border-radius: 999px;
        gap: 0;
        opacity: 0;
        transform: translateY(1vw);
        animation: tabStripMobile .4s ease .9s forwards;
    }

    @keyframes tabStripMobile {
        from { opacity: 0; transform: translateY(1vw); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .tabItem {
        flex: 1;
        border: none;
        background: transparent;
        color: #7B818D;
        padding: 2.5vw 0;
        border-radius: 999px;
        font-size: 2.8vw;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 500;
        cursor: pointer;
        transition: all .3s ease;
        position: relative;
    }

    .tabItem:hover {
        color: #ffffff;
    }

    .tabItem.active {
        background: #2a2d35;
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 .3vw .8vw rgba(0, 0, 0, 0.3);
    }

    /* ============================================
       BLOCK CONTENT MAIN
       ============================================ */
    .blockContentMain {
        position: relative;
        top: auto;
        left: auto;
        width: 100vw;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 4vw;
    }

    /* ============================================
       CREATE POST CARD
       ============================================ */
    .createPostCard {
        position: relative;
        top: auto;
        left: auto;
        width: 92vw;
        margin: 2vw auto;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        border-radius: 2vw;
        padding: 3vw;
        opacity: 0;
        transform: translateY(1vw);
        animation: createPostMobile .4s ease 1s forwards;
    }

    @keyframes createPostMobile {
        from { opacity: 0; transform: translateY(1vw); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .postComposer {
        display: flex;
        gap: 2vw;
        align-items: flex-start;
    }

    .composerAvatar {
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        background: #0d0f12;
    }

    .composerAvatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .composerContent {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
    }

    .postTextarea {
        width: 100%;
        min-height: 8vw;
        background: transparent;
        border: none;
        outline: none;
        color: #ffffff;
        font-size: 3vw;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        resize: none;
        padding: 0;
    }

    .postTextarea::placeholder {
        color: #4A4F5A;
    }

    .composerActions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 2vw;
        border-top: .15vw solid #1E2127;
    }

    .composerTools {
        display: flex;
        gap: 1vw;
    }

    .toolButton {
        width: 7vw;
        height: 7vw;
        border: none;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .2s ease;
    }

    .toolButton svg {
        width: 3.5vw;
        height: 3.5vw;
        stroke: #7B818D;
        transition: stroke .2s ease;
    }

    .toolButton:hover {
        background: rgba(45, 125, 255, 0.1);
    }

    .toolButton:hover svg {
        stroke: #5A9CFF;
    }

    .sendButton {
        width: 8vw;
        height: 8vw;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .25s ease;
    }

    .sendButton:hover {
        transform: scale(1.08);
        box-shadow: 0 .4vw 1vw rgba(59, 130, 246, 0.4);
    }

    .sendButton:active {
        transform: scale(.95);
    }

    .sendButton svg {
        width: 3.5vw;
        height: 3.5vw;
        stroke: #ffffff;
    }

    /* ============================================
       EMPTY POSTS STATE
       ============================================ */
    .emptyPostsState {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8vw 4vw;
        text-align: center;
        opacity: 0;
        animation: emptyFade .5s ease 1.1s forwards;
    }

    @keyframes emptyFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .emptyPostsIcon {
        width: 12vw;
        height: 12vw;
        margin-bottom: 3vw;
        opacity: .3;
    }

    .emptyPostsIcon svg {
        width: 100%;
        height: 100%;
        stroke: #7B818D;
    }

    .emptyPostsText {
        color: #7B818D;
        font-size: 3.2vw;
        font-weight: 400;
    }

    /* ============================================
       PROFILE INFORMATION CARD (адаптация)
       ============================================ */
    .ProfileInformation {
        position: relative;
        top: auto;
        left: auto;
        width: 92vw;
        height: auto;
        min-height: auto;
        margin: 2vw auto;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        border-radius: 2vw;
        padding: 3vw;
        opacity: 0;
        transform: translateY(1vw);
        animation: cardMobileSlide .4s ease .5s forwards;
    }

    @keyframes cardMobileSlide {
        from { opacity: 0; transform: translateY(1vw); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .userProfileCard {
        position: relative;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2vw;
    }

    .profileName {
        font-size: 3.5vw;
        color: #ffffff;
    }

    .profileStats {
        flex-direction: row;
        gap: 4vw;
        position: relative;
        left: 0;
    }

    .statItem {
        gap: .5vw;
    }

    .statValue {
        font-size: 3.5vw;
    }

    .statLabel {
        font-size: 2.2vw;
    }

    .subscribeButton {
        width: 100%;
        padding: 2.5vw 4vw;
        font-size: 3vw;
        border-radius: 999px;
    }

    /* ============================================
       GROUP CARD (адаптация)
       ============================================ */
    .groupCard {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 92vw;
        height: auto;
        min-height: auto;
        margin: 2vw auto;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        border-radius: 2vw;
        padding: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2vw;
        opacity: 0;
        animation: cardMobileSlide .4s ease .6s forwards;
    }

    .groupLogo {
        width: 12vw;
        height: 12vw;
    }

    .groupLogo img {
        width: 100%;
        height: 100%;
    }

    .groupName {
        font-size: 3vw;
    }

    /* Group Card Empty */
    .groupCardEmpty {
        position: relative;
        top: auto;
        width: 92vw;
        min-height: auto;
        margin: 2vw auto;
        background: #1a1d23;
        border: .15vw dashed #2D3038;
        border-radius: 2vw;
        padding: 4vw 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5vw;
        opacity: 0;
        animation: cardMobileSlide .4s ease .6s forwards;
    }

    .emptyClanIcon {
        font-size: 6vw;
        color: #4A4F5A;
        height: 3vw;
        width: 3vw;
        font-size: 4vw;
        color: #4A4F5A;
    }

    .emptyClanText {
        font-size: 2.5vw;
        color: #6D747E;
    }

    .emptyClanButton {
        padding: 2vw 4vw;
        font-size: 2.5vw;
        border-radius: 999px;
    }

    /* ============================================
       INFO CARD (адаптация)
       ============================================ */
    .infoCard {
        position: relative;
        top: auto;
        left: auto;
        width: 92vw;
        margin: 2vw auto;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        border-radius: 2vw;
        padding: 3vw;
        opacity: 0;
        animation: cardMobileSlide .4s ease .7s forwards;
    }

    .infoCardTitle {
        font-size: 3vw;
        margin-bottom: 2vw;
    }

    .infoRow {
        gap: 1.5vw;
        margin-bottom: 1.5vw;
        font-size: 2.8vw;
        padding: 1.5vw;
        border-radius: 1.5vw;
    }

    .infoIcon {
        width: 3.5vw;
        height: 3.5vw;
    }

    .infoValue {
        font-size: 2.8vw;
    }

    .infoVerifies {
        width: 100%;
        gap: 1.5vw;
        margin-top: 2vw;
        flex-wrap: wrap;
    }

    .infoVerify {
        gap: 1vw;
        font-size: 2.5vw;
        padding: 1.2vw 2vw;
        border-radius: 1.5vw;
    }

    .infoVerify .verifyIcon {
        width: 3vw;
        height: 3vw;
    }

    /* ============================================
       ACHIEVEMENTS (адаптация)
       ============================================ */
    .achievementsCard {
        position: relative;
        top: auto;
        left: auto;
        width: 92vw;
        height: auto;
        margin: 2vw auto;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        border-radius: 2vw;
        padding: 3vw;
        opacity: 0;
        animation: cardMobileSlide .4s ease .8s forwards;
    }

    .achievementsTitle {
        font-size: 3vw;
        margin-bottom: 2vw;
    }

    .achievementsList {
        gap: 1.5vw;
    }

    .achievementItem {
        gap: 1.5vw;
        padding: 2vw;
        border-radius: 1.5vw;
    }

    .achievementIcon {
        width: 4vw;
        height: 4vw;
    }

    .achievementText {
        font-size: 2.8vw;
    }

    .achievementCount {
        font-size: 2vw;
        padding: .5vw 1.5vw;
    }

    .achievementsProgressBar {
        height: 1vw;
    }

    /* ============================================
       SKINS (адаптация)
       ============================================ */
    .skinsCard {
        position: relative;
        top: auto;
        left: auto;
        width: 92vw;
        margin: 2vw auto;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        border-radius: 2vw;
        padding: 3vw;
        opacity: 0;
        animation: cardMobileSlide .4s ease .9s forwards;
    }

    .skinsTitle {
        font-size: 3vw;
        margin-bottom: 2vw;
    }

    .skinsGallery {
        width: 100%;
        gap: 1.5vw;
        margin-bottom: 2vw;
        flex-wrap: wrap;
        justify-content: center;
    }

    .skinItem {
        flex: 0 0 calc(33.333% - 1vw);
        border-radius: 1.5vw;
    }

    .skinActive {
        width: 2vw;
        height: 2vw;
        top: 1vw;
        right: 1vw;
    }

    .skinsUploadButton {
        padding: 2vw;
        font-size: 2.5vw;
        border-radius: 1.5vw;
    }

    .uploadIcon {
        width: 3vw;
        height: 3vw;
    }

    /* ============================================
       DESCRIPTION (адаптация)
       ============================================ */
    .descriptionCard {
        position: relative;
        top: auto;
        left: auto;
        width: 92vw;
        height: auto;
        margin: 2vw auto;
        background: #1a1d23;
        border: .15vw solid #1E2127;
        border-radius: 2vw;
        padding: 3vw;
        opacity: 0;
        animation: cardMobileSlide .4s ease 1s forwards;
    }

    .descriptionTitle {
        font-size: 3vw;
        margin-bottom: 2vw;
    }

    .descriptionText {
        font-size: 2.8vw;
        line-height: 1.6;
    }

    .descriptionLine {
        margin-bottom: 1vw;
        font-size: 2.8vw;
    }

    /* ============================================
       TOUCH DEVICE OPTIMIZATIONS
       ============================================ */
    @media (hover: none) {
        .blockBanner:hover::before,
        .ProfileInformation:hover::before,
        .groupCard:hover::before,
        .infoCard:hover::before,
        .achievementsCard:hover::before,
        .skinsCard:hover::before,
        .descriptionCard:hover::before,
        .createPostCard:hover::before {
            left: -100%;
        }

        .editProfileButton:hover,
        .clanButton:hover,
        .settingsButton:hover {
            transform: none;
        }

        .sendButton:hover {
            transform: none;
        }
    }

    /* ============================================
       VERY SMALL SCREENS
       ============================================ */
    @media screen and (max-width: 380px) {
        .profileText h1 {
            font-size: 5vw;
        }

        .profileTag {
            font-size: 3.5vw;
        }

        .profileAvatar {
            width: 20vw;
            height: 20vw;
        }

        .editProfileButton {
            font-size: 3vw;
            padding: 2.5vw 3vw;
        }

        .clanButton {
            font-size: 2.8vw;
            padding: 2.5vw 2.5vw;
        }

        .tabItem {
            font-size: 3vw;
            padding: 3vw 0;
        }

        .postTextarea {
            font-size: 3.2vw;
        }

        .emptyPostsText {
            font-size: 3.5vw;
        }
    }

    /* ============================================
       SAFE AREA (iPhone notch)
       ============================================ */
    @supports (padding-top: env(safe-area-inset-top)) {
        .profilePage {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    /* ============================================
       SCROLLBAR STYLING
       ============================================ */
    .profilePage::-webkit-scrollbar {
        width: .6vw;
    }

    .profilePage::-webkit-scrollbar-track {
        background: #000000;
    }

    .profilePage::-webkit-scrollbar-thumb {
        background: #1E2127;
        border-radius: 999px;
    }

    .profilePage::-webkit-scrollbar-thumb:hover {
        background: #2D3038;
    }
}

.emptyClanLink {
	color: #5A9CFF;
	font-size: 0.78vw;
	font-weight: 600;
	transition: color 0.25s ease, transform 0.35s var(--clan-spring, ease);
}

.groupCardEmpty:hover .emptyClanLink {
	color: #CFE4FF;
	transform: translateY(-1px);
}