.user-cover { background-position: center; height: 80px; margin-bottom: -70px; box-shadow: 0 0 0 1px rgb(var(--theme-sh), var(--theme-sh-op));}
.user-info { padding-right: 40px; padding-top: 65px; text-align: right; }
.user-data { padding-left: 40px; padding-top: 50px; }	
.user-info .info-1 { display: inline-block; margin-right: 20px; }
.user-info .info-2 { display: inline-block; }
.user-info .info-name { text-align: right; justify-content: right; }
.user-data .data { display: inline-block; }
.user-data .data-1, .user-data .data-4, .user-data .data-5  { margin-right: 20px; }

/* page gifts */
.slide-btn 	  { margin: -40px 0 0 0; z-index: 2; right: -35px; transform: translateY(-40%) translateX(0%); transition: transform 0.4s ease-in-out; }
.slide-btn.fr { margin: -40px 0 0px -30px;  right: -35px; }	
.slide-btn.gift-like { transform: translateY(50%) translateX(0); }

.gift-bg { margin-top: -19px; position: relative;  width: 100px; height: 100px; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; }
.gift-bg.bw { filter: grayscale(100%); opacity: 0.8; transition: transform 0.5s ease, filter 0.5s ease; }

.slide-btn-block {transition: box-shadow 0.2s ease; }
.slide-btn-block:hover { box-shadow: 0 0 8px #faa400; }
.slide-btn-block:hover .slide-btn { transform: translateY(50%) translateX(0); }
.slide-btn-block:hover .gift-bg.bw {filter: grayscale(0%); }

.gift-mark  { box-shadow: 0 0 5px #faa400; }
.gift-limit {margin: -20px 13px 4px 13px; background: linear-gradient(45deg, #ffc705, #ffe899, #a37a00); color: black; border-radius: 5px; padding: 2px 0px 2px 7px;  line-height: 1; text-shadow: none; font-weight: bold;}	
.gift-count { z-index: 2; position: absolute; bottom: 0px; background-color: rgba(0, 0, 0, 0.4); color: white; border-radius: 5px; padding: 2px 6px 5px 5px; right: -2px; line-height: 1; text-shadow: none; font-size: var(--fs--10); font-weight: bold; }
/*___end page gifts*/

@media (max-width: 768px) { /* Если меньше 768px */
	.user-info { padding-right: 0px; padding-top: 15px; }
	.user-info .info-1 { float: left; text-align: left; justify-content: left; }
	.user-info .info-name { text-align: center; justify-content: center; }
	.user-info .info-2 { text-align: right; }
	.user-data { padding-left: 0px; padding-top: 5px; }
	.user-data .data-2 { float: right; text-align: right; }
	.user-data .data-4 { width: 33%; margin:0;}
	.user-data .data-5 { width: 33%; text-align: center; margin:0; }
	.user-data .data-6 { width: 33%; text-align: right; margin:0; }
	.user-data .data-box { display: flex; justify-content: space-between; }
	.user-data .w-200 { width: 100% !important;}
}

/* page achieves */
.bg-soc {position: relative; z-index: 1; overflow: hidden; filter: grayscale(15%); }
.bg-soc.st {
background: linear-gradient(rgba(1, 2, 30, 0.7), rgba(1, 2, 30, 0.5)),linear-gradient(to right, rgba(40, 105, 179, 0.7), rgba(5, 28, 76, 0.7));}
.bg-soc.tg {
background: linear-gradient(rgba(0, 53, 86, 0.7), rgba(0, 53, 86, 0.5)),linear-gradient(to right, rgba(0, 206, 249, 0.7), rgba(3, 63, 77, 0.7));}
.bg-soc.vk {
background: linear-gradient(rgba(0, 50, 91, 0.7), rgba(0, 50, 91, 0.5)),linear-gradient(to right, rgba(0, 148, 255, 0.7), rgba(0, 60, 103, 0.7));}
.bg-soc.yt {
background: linear-gradient(rgba(59, 0, 0, 0.7), rgba(59, 0, 0, 0.5)),linear-gradient(to right, rgba(248, 4, 4, 0.7), rgba(99, 5, 5, 0.7));}
	
.bg-soc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.24; z-index: -1; }
.bg-soc.st::before { background: url('/img/bg/logo/st.webp') no-repeat 95% center;}
.bg-soc.vk::before { background: url('/img/bg/logo/vk.webp') no-repeat 95% center;}
.bg-soc.tg::before { background: url('/img/bg/logo/tg.webp') no-repeat 95% center;}
.bg-soc.yt::before { background: url('/img/bg/logo/yt.webp') no-repeat 95% center;}	

.bg-soc.off {  background: linear-gradient(rgba(60, 60, 60, 0.8), rgba(30, 30, 30, 0.8));}
.bg-soc.off::before { filter: grayscale(100%); opacity: 0.2; }

/* achieves */
.fc-showcase{ padding: 0 0 65px 50px; }
	
.fc-3d {
  width: 210px;
  height: 290px;
  perspective: 1200px;
  position: relative;
  cursor: pointer;
  margin: 18px 18px 0px 0px;
  display: inline-block;
  z-index: 1;
  transition: z-index 0.1s;
}

.fc-3d.noactive { filter: grayscale(100%); transition: filter 0.3s ease, opacity 0.3s ease; }
.fc-3d:hover, .fc-3d.is-turned { z-index: 5; }
.fc-3d.is-turned .fc-w { transform: rotateY(180deg) scale3d(1.45, 1.45, 1.45); }
.fc-3d:not(.is-turned).hovered .glare { opacity: 0.6; }
	
	
.fc-stat-menu { width: 100%; padding: 5px 0 0px 0; border-radius: 12px; border: 1px solid white;}
	
.fc-title{
  overflow: hidden;
  padding: 3px 8px 0 8px;
  line-height: 1.1;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  text-transform: uppercase;
}

.fc-bottom { margin-top: auto; font-size: 14px; line-height: 1; width: 100%; margin-top: auto;}
.fc-bottom .fc-char { text-align: center; font-weight: bold; width: 42px; white-space: nowrap;}

.fc-bottom .xp{
	float: left;
	background: #ffd700;
	background: -webkit-linear-gradient(to bottom, #ffd700 20%, #ff7f00 30%, #ffd700 66%, #ffd700 69%, #ff7f00 85%);
	background: -moz-linear-gradient(to bottom, #ffd700 20%, #ff7f00 30%, #ffd700 66%, #ffd700 69%, #ff7f00 85%);
	background: linear-gradient(to bottom, #ffd700 20%, #ff7f00 30%, #ffd700 66%, #ffd700 69%, #ff7f00 85%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fc-bottom .bns{
	float: right;
	background: #57acff;
	background: -webkit-linear-gradient(to bottom, #57acff 20%, #1a7bef 30%, #57acff 66%, #57acff 69%, #1a7bef 85%);
	background: -moz-linear-gradient(to bottom, #57acff 20%, #1a7bef 30%, #57acff 66%, #57acff 69%, #1a7bef 85%);
	background: linear-gradient(to bottom, #57acff 20%, #1a7bef 30%, #57acff 66%, #57acff 69%, #1a7bef 85%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fc-bottom .vts{
	float: right;
	background: #36EE42;
	background: -webkit-linear-gradient(to bottom, #36EE42 20%, #0A6413 30%, #36EE42 66%, #36EE42 69%, #0A6413 85%);
	background: -moz-linear-gradient(to bottom, #36EE42 20%, #0A6413 30%, #36EE42 66%, #36EE42 69%, #0A6413 85%);
	background: linear-gradient(to bottom, #36EE42 20%, #0A6413 30%, #36EE42 66%, #36EE42 69%, #0A6413 85%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fc-bottom .low-title{
  font-weight: 400;
  font-size: 10px;
	padding: 0 3px;
	overflow: hidden;
	display: flex;
	text-align: center;
    align-items: center;
	height: 30px;
}

.fs-xp{
	font-weight: bold;
	font-size: 13px;
	background: #ffd700;
	background: -webkit-linear-gradient(to bottom, #ffd700 48%, #ff7f00 64%);
	background: -moz-linear-gradient(to bottom, #ffd700 48%, #ff7f00 64%);
	background: linear-gradient(to bottom, #ffd700 48%, #ff7f00 64%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.fc-bns{
	font-weight: bold;
	font-size: 13px;
	background: #57acff;
	background: -webkit-linear-gradient(to bottom, #57acff 48%, #1a7bef 64%);
	background: -moz-linear-gradient(to bottom, #57acff 48%, #1a7bef 64%);
	background: linear-gradient(to bottom, #57acff 48%, #1a7bef 64%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
	
.fc-vts{
	padding-left: 25px;
	font-weight: 700;
	font-size: 13px;
	background: #36EE42;
	background: -webkit-linear-gradient(to bottom, #36EE42 48%, #0A6413 64%);
	background: -moz-linear-gradient(to bottom, #36EE42 48%, #0A6413 64%);
	background: linear-gradient(to bottom, #36EE42 48%, #0A6413 64%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
	
.fc-lvl { background-image: url(/img/ach/test/001.png); position: absolute; background-repeat: no-repeat;}

.fc-frame {
  padding: 8px;
  background-image: url(/img/ach/test/frame.png); 
  display: flex;
  flex-direction: column;
  background-size: cover;
  width: 100%;
  height: 100%;
  border-radius: 12px;
				   
}

.fc-w {  width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);}
.fc-w .fc-ac { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; backface-visibility: hidden;}
.fc-w .fc-ac .fc-a {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out, filter 0.3s ease-out;
  will-change: transform;
}


.glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.fc-c { width: 100%;  height: 100%; backface-visibility: hidden; border-radius: 12px; /*padding: 10px 13px;*/ box-sizing: border-box; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }

.fc-c.cfr-1{ border: 2px solid rgba(120, 160, 190, 0.7); }
.fc-c.cfr-2{ border: 2px solid rgba(79, 223, 11, 0.7); }
.fc-c.cfr-3{ border: 2px solid rgba(15, 136, 255, 0.7); }
.fc-c.cfr-4{ border: 2px solid rgba(198, 50, 250, 0.7); }
.fc-c.cfr-5{ border: 2px solid rgba(250, 210, 30, 0.7); }

.fc-c.rear { background: linear-gradient(#101010 100%); color: white; transform: rotateY(180deg); display: flex; align-items: center; padding: 12px; /*justify-content: center;*/ }

.fc-c.ach { background-size: 100%; background-position: center; background-repeat: no-repeat; }

.fc-3d.is-turned .fc-ac { pointer-events: none; }
.fc-3d.is-turned .fc-a { transform: none !important; filter: none !important; }
.fc-3d.is-turned .glare { opacity: 0 !important; }

.fc-3d:not(.is-turned):hover .fc-c.ach.lt-1 { transition: transform 0.5s ease-out, filter 0.5s ease-out; filter: brightness(1.1) saturate(1.1); box-shadow: 0 0 15px 5px rgba(120, 160, 190, 0.5); }
.fc-3d:not(.is-turned):hover .fc-c.ach.lt-2 { transition: transform 0.5s ease-out, filter 0.5s ease-out; filter: brightness(1.1) saturate(1.1); box-shadow: 0 0 15px 5px rgba(137, 255, 107, 0.5); }
.fc-3d:not(.is-turned):hover .fc-c.ach.lt-3 { transition: transform 0.5s ease-out, filter 0.5s ease-out; filter: brightness(1.1) saturate(1.1); box-shadow: 0 0 15px 5px rgba(5, 165, 248, 0.5); }
.fc-3d:not(.is-turned):hover .fc-c.ach.lt-4 { transition: transform 0.5s ease-out, filter 0.5s ease-out; filter: brightness(1.1) saturate(1.1); box-shadow: 0 0 15px 5px rgba(198, 50, 250, 0.5); }
.fc-3d:not(.is-turned):hover .fc-c.ach.lt-5 { transition: transform 0.5s ease-out, filter 0.5s ease-out; filter: brightness(1.1) saturate(1.1); box-shadow: 0 0 15px 5px rgba(255, 238, 77, 0.5); }

.fc-3d .fc-c.lta-1 { box-shadow: 0 0 15px 3px rgba(120, 160, 190, 0.5); }
.fc-3d .fc-c.lta-2 { box-shadow: 0 0 15px 3px rgba(137, 255, 107, 0.5); }
.fc-3d .fc-c.lta-3 { box-shadow: 0 0 15px 3px rgba(5, 165, 248, 0.5); }
.fc-3d .fc-c.lta-4 { box-shadow: 0 0 15px 3px rgba(198, 50, 250, 0.5); }
.fc-3d .fc-c.lta-5 { box-shadow: 0 0 15px 3px rgba(250, 215, 30, 0.5); } 

.circular-progress-container { display: flex; justify-content: center; }
.circular-progress { width: 200px; height: 200px; position: relative; animation: fadeInScale 0.5s ease-out; padding-top: 20px;}

.progress-circle { position: relative; width: 100%; height: 100%; }
.progress-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-bg { fill: none; stroke: #e0e0e0; stroke-width: 12; }
.progress-fill { fill: none; stroke: #007bff; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; animation: breathe 3s ease-in-out infinite; }

.progress-percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; animation: pulseIn 0.6s ease-out;}

.percentage-number {
    display: block;
    font-size: 44px;
    font-weight: 800;
    background: linear-gradient(135deg, #007bff 0%, #00a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -1px;
    animation: numberGlow 0.8s ease-in-out, softPulse 2.5s ease-in-out infinite;
}

.percentage-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    margin-top: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    animation: slideUp 0.5s ease-out 0.2s both;
}

.next-level {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 768px) {
    .circular-progress { width: 160px; height: 160px; }
    .percentage-number { font-size: 36px; }
    .next-level { font-size: 16px; }
    .progress-bg, .progress-fill { stroke-width: 10;}
    
    @keyframes breathe {
        0%, 100% { stroke-width: 10; }
        50% { stroke-width: 12;}
    }
}

/* other */
.head-bg.achieves {
    background: url(/img/bg/card_bg.webp?v=1), url(/img/bg/card_bg.webp?v=1), linear-gradient(to right, rgba(18, 0, 36, 0.9), rgba(0, 0, 0, 0)), linear-gradient(rgba(61, 177, 255, 0.7), rgba(0, 58, 122, 0.7));
    filter: grayscale(15%);
}