/*
Theme Name: mjvfx_wp
Author: the WordPress team
Author: Jey
Version: 1.0

*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');
body{
	margin: 0;
	padding: 0;
	font-size: 16px;
	color: #666;
	font-family: 'Poppins', sans-serif;
	font-weight: normal;
	font-style: normal;
	background: #000;
}
a,
button {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}
*::-moz-selection {
	background: #d6b161;
	color: #fff;
	text-shadow: none;
}
::-moz-selection {
	background: #444;
	color: #fff;
	text-shadow: none;
}
::selection {
	background: #444;
	color: #fff;
	text-shadow: none;
}
*::-moz-placeholder {
	color: #555555;
	font-size: 14px;
	opacity: 1;
}
*::placeholder {
	color: #555555;
	font-size: 14px;
	opacity: 1;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 700;
}
h1,h2,h3,h4,h5,h6,p{
	margin:0;
	padding: 0;
}
ul{
	margin:0;
	padding: 0;
	list-style: none;
}
a{
	text-decoration: none;
	transition: .4s;
	-webkit-transition: all .4s ease-in-out;
}
a:hover{
	text-decoration: none;
	color: #82B60B;
}
button:focus{
	outline: none;
}
input:focus{
	outline: none;
}
textarea:focus{
	outline: none;
}
input,
textarea,
.form-control {
	text-transform: none;
}
p{
	color: #666;
}
.text-center{
	text-align: right;
}
/*Scroll Area*/
.scroll-area {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1;
    display: none;
}
.scroll-area i {
	width: 45px;
	height: 45px;
	background-color: #5f3afc;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #fff;
	font-size: 20px;
	border-radius: 50%;
}
.section-padding{
	padding: 50px 0px;
}
.section-padding-2{
	padding-top: 50px;
	padding-bottom: 70px;
}
.section-padding-3{
	padding: 70px 0px;
}
img{
	max-width: 100%;
}

/* 外层容器 */
.page-header-section {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 60px 0;
}

/* 所有背景图绝对定位叠在一起 */
.header-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    animation: bgFade 15s infinite ease-in-out;
    z-index: 0;
}

/* 依次延迟，实现轮播 */
.slide1 { animation-delay: 0s; }
.slide2 { animation-delay: 5s; }
.slide3 { animation-delay: 10s; }

/* 渐隐渐显动画 */
@keyframes bgFade {
    0% { opacity: 0; }
    20% { opacity: 1; }
    40% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

/* 内容在上层 */
.container-xxl {
    position: relative;
    z-index: 2;
}

/* 文字白色更清晰 */
.page-header-section h1,
.page-header-section p {
    color: #fff;
}

/* 半透明遮罩（让文字更清晰，可选） */
.page-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}
/* 可选：给文字加白色更清晰 */
.page-header-section h1,
.page-header-section p {
    color: #fff;
}

/* 文章分类 Banner 标题区 */
.category-banner-header {
    min-height: 800px;
    padding: 80px 0;
}

.category-banner-header h1 {
    font-size: 3.8em;
}

.category-banner-header p {
    font-size: 1.8em;
}

@media (max-width: 991px) {
    .category-banner-header h1 {
        font-size: 2.8em;
    }
    .category-banner-header p {
        font-size: 1.4em;
    }
}

@media (max-width: 767px) {
    .category-banner-header h1 {
        font-size: 2.2em;
    }
    .category-banner-header p {
        font-size: 1.1em;
    }
}

/* 底部透明渐变过渡，与页面背景融合 */
.category-banner-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    background: linear-gradient(to bottom, transparent 0%, #000 100%);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 991px) {
    .category-banner-header {
        min-height: 560px;
        padding: 60px 0;
    }
    .category-banner-header::after {
        height: 180px;
    }
}

@media (max-width: 767px) {
    .category-banner-header {
        min-height: 460px;
        padding: 50px 0;
    }
    .category-banner-header::after {
        height: 140px;
    }
}

/*
 * #-Button
*/
.button-1 {
	display: inline-block;
	border: 1px solid hsla(0,0%,100%,.1);
	color: #fff;
	background: #262626;
	text-transform: capitalize;
	font-weight: 500;
	font-size: 0.8rem;
	border-radius: 10px;
	padding: 10px 10px;
	letter-spacing: .5px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .3s ease-in-out;
}
.button-1:hover{
	background: #5f3afc;
	color: #fff;
}
.button-2 {
	display: inline-block;
	border: 1px solid #5f3afc;
	color: #fff;
	background: #061328;
	text-transform: capitalize;
	font-weight: 500;
	font-size: 15px;
	border-radius: 10px;
	padding: 16px 35px;
	letter-spacing: .5px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .3s ease-in-out;
}
.button-2:hover{
	background: #5f3afc;
	color: #fff;
}
.section-bg {
	background: #111;
}
/*
 * #-Header
*/
.menu ul li {
	display: inline-block;
	position: relative;
}
.menu ul li a {
	display: inline-block;
	color: #fff;
	text-transform: capitalize;
	font-weight: 500;
	padding: 28px 20px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	font-size: 15px;
}
.menu ul li:hover > a {
	color: #5f3afc;
}
.menu nav ul li > ul {
	position: absolute;
	top: 120px;
	left: -4px;
	background-color: #fff;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	width: 200px;
	opacity: 0;
	visibility: hidden;
	z-index: 999;
	text-align: left;
	border: 1px solid #efefef;
	border-top: 6px solid #5f3afc;
}
.menu nav ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	top: 92px;
	left: 0;
}
.menu nav ul li > ul > li {
	display: block;
	position: relative;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	margin: 0px;
	padding: 0px;
}
.menu nav ul li > ul > li a::after {
	content: "+";
	clear: both;
	display: block;
	position: absolute;
	top: 49%;
	left: 14px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all .4 ease-in-out;
	transition: all .4s ease-in-out;
}
.menu nav ul li > ul > li:hover > a {
	color: #5f3afc;
	background: #f7f9fe;
}
.menu nav ul li > ul > li:hover > a::after{
	opacity: 1;
	visibility: visible;
}
.menu nav ul li > ul > li:hover > a {
	color: #5f3afc !important;
}
.menu nav ul li > ul > li li > a:hover{
	color: #fff;
}
.menu nav ul li > ul > li a {
	display: inline-block;
	width: 100%;
	padding: 15px 14px;
	border-bottom: 1px dashed #efefef;
	font-size: 14px;
	color: #1e1b39;
	margin: 0px;
	font-weight: 400;
	text-transform: capitalize;
}
.menu nav ul li > ul > li:last-child a{
	border-bottom: none;
}
.menu nav ul > li > ul > li > ul {
	left: 200px;
	top: 28px;
}
.menu nav ul li > ul > li:hover > ul {
	top: -3px;
}
.menu nav ul li > ul > li:hover > ul {
	top: -3px;
	left: 100%;
}
.menu ul li.menu-item-has-children {
	position: relative;
}
.menu nav ul li > ul > li a::after {
	content: " ";
	clear: both;
	display: block;
	position: absolute;
	top: 29%;
	left: 13px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all .4 ease-in-out;
	transition: all .4s ease-in-out;
	color: #5f3afc;
}
.menu ul li.menu-item-has-children:hover::after{
	color: #5f3afc;
}
.menu ul li.menu-item-has-children::after {
	content: "+";
	clear: both;
	display: block;
	position: absolute;
	font-weight: 700;
	top: 39%;
	right: 7px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	color: #fff;
	font-size: 14px;
}
.menu ul li ul li.menu-item-has-children::after {
	transform: rotate(-90deg);
	top: 30%;
}
.menu{
	float: left;
}
.header-right {
	float: right;
	height: 100%;
	display: flex;
	align-items: center;
}
.header-search-icon {
	width: 45px;
	height: 45px;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 0px 10px 0px #eeeeee63;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.header-search-icon i.fa-times {
	display: none;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.header-search-icon i.fa-times.active {
	position: absolute;
	z-index: 999;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #5f3afc;
	color: #fff;
}
.header-search {
	position: relative;
	margin-right: 40px;
}
.header-search-icon:hover{
	color: #fff;
	background: #5f3afc;
}
.header-search-icon i {
	cursor: pointer;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-top-search-form {
	transform: scale(0);
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	position: absolute;
	top: 65px;
	right: 0;
	opacity: 0;
	visibility: hidden;
	width: 360px;
	background: #fff;
	width: 400px;
	background: #ffffff;
	border-top: 3px solid #5f3afc;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
	z-index: 9;
}
.header-top-search-form.active {
	transform: scale(1);
	opacity: 1;
	visibility: visible;
}
.header-top-search-form-full {
	padding: 20px;
	position: relative;
	width: 100%;
}
.header-top-search-form-full form {
	width: 100%;
	position: relative;
}
.header-top-search-form-full::after {
	content: "";
	position: absolute;
	right: 4px;
	top: -12px;
	clear: both;
	display: block;
	clip-path: polygon(55% 0, 0% 100%, 100% 100%);
	width: 20px;
	height: 10px;
	background: #5f3afc;
}
.header-top-search-form-full input {
	font-size: 14px;
	background-color: #f7f9fe;
	color: #333;
	border: 1px solid #f1f1f1;
	width: 100%;
	position: relative;
	padding: 14px 20px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.header-top-search-form-full input:focus{
	border-color: #5f3afc;
}
.header-top-search-form-full button {
	position: absolute;
	top: 0;
	background: #5f3afc;
	height: 100%;
	border: none;
	right: 0;
	color: #fff;
	padding: 0px 15px;
}
.header-user-icon {
	width: 45px;
	height: 45px;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 0px 10px 0px #eeeeee63;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.header-user-icon:hover{
	color: #fff;
	background: #5f3afc;
}
.header-user {
	position: relative;
}
.header-top-user-list {
	position: absolute;
	top: 100px;
	width: 180px;
	text-align: left;
	background: #5f3afc;;
	color: #000;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	right: 0;
	opacity: 0;
	visibility: hidden;
	padding: 15px 10px;
	z-index: 99;
}
.header-user:hover .header-top-user-list {
	opacity: 1;
	visibility: visible;
	top: 54px;
}
.header-top-user-list::after {
	content: "";
	position: absolute;
	right: 4px;
	top: -10px;
	clear: both;
	display: block;
	clip-path: polygon(55% 0, 0% 100%, 100% 100%);
	width: 20px;
	height: 10px;
	background: #5f3afc;
}
.header-top-user-list ul li a {
	display: inline-block;
	width: 100%;
	color: #fff;
	font-size: 15px;
	padding: 7px 10px;
}
.header-top-user-list ul li a:hover{
	color: #ddd;
}
/*
 * #-Hero Section
*/
.hero-caption h2 {
	font-size: 52px;
	text-transform: capitalize;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}
.hero-caption h2 span {
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #5f3afc;
	color: transparent;
	text-transform: uppercase;
	letter-spacing: 4.2px;
}
.hero-caption p {
	font-size: 19px;
	line-height: 30px;
	margin-bottom: 30px;
	margin-top: 10px;
	color: #828282;
}
.hero-caption .hero-btn a:first-child {
	margin-right: 20px;
}
/*
 * #-Explore Item
*/
.explore-item {
	background: #bcbcbc30;
	border-radius: 10px;
	overflow: hidden;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	padding: 0px;
}

/* 鼠标悬浮渐变效果 */
.explore-item:hover {
	/* 背景变亮 */
	background: #bcbcbc50;
	/* 轻微放大 */
	transform: scale(1.03);
	/* 阴影增强（立体效果） */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	/* 边框高亮（可选，更精致） */
	border-color: #ffffff40;
}
.explore-item .thumbnail {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}
.explore-item .thumbnail img {
	border-radius: 10px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.explore-item:hover .thumbnail img{
	transform: scale(1.08) rotate(1deg);
}
.explore-item .react-exp {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #fff;
	border-radius: 20px;
	padding: 8px 14px;
	display: inline-block;
	text-align: center;
	line-height: 1.1;
	font-size: 14px;
	font-weight: 700;
	padding-top: 10px;
	/* color: red; */
}
.explore-item .content {
	padding: 10px 10px 10px 10px;
}
.explore-item .content h4 {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0px;
}
.explore-item .content h4 a {
	color: #fff;
}
.explore-item .content h4 a:hover{
	color: #5f3afc;
}
.explore-item .auth-ex {
	overflow: hidden;
	margin-bottom: 1px;
}
.explore-item .auth-ex .left {
	float: left;
}
.explore-item .auth-ex .left img {
	width: 30px;
	border-radius: 50%;
	float: left;
	margin-right: 10px;
	border: 1px solid hsla(0,0%,100%,.1);
}
.explore-item .auth-ex .left .name {
	overflow: hidden;
}
.explore-item .auth-ex .left .name span {
	display: block;
	font-size: 0.5rem;
	/* padding-top: 1px; */
	color: #fff;
	font-weight: 500;
}
.explore-item .auth-ex .left .name a {
	color: #fff;
	font-weight: 600;
	font-size: 0.6rem;
	display: block; 
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	white-space: nowrap;
	overflow: hidden;
}
.explore-item .auth-ex .left .name a:hover{
	color: #5f3afc;;
}


.explore-item .auth-ex .right {
	float: right;
	overflow: hidden;
	align-items: center;
	margin-right: 10px;
}
.explore-item .auth-ex .right p {
	color: #ddd;
	font-size: 0.6rem;
}
.explore-item .auth-ex .right p b {
	display: block;
	text-align: right;
	font-weight: 600;
	font-size: 0.5rem;
	color: #fff;
}
.explore-item .btm {
	overflow: hidden;
}
.explore-item .btm .left {
	float: left;
}
.explore-item .btm .left .button-2 {
	padding: 8px 15px;
	font-size: 14px;
	background: transparent;
}
.explore-item .btm .left .button-2:hover{
	background: #5f3afc;
}
.explore-item .btm .right a {
	color: #ddd;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
}
.explore-item .btm .right {
	float: right;
	padding-top: 8px;
}
.explore-item .btm .right a:hover{
	color: #5f3afc;
}
.explore-item .btm .right a i {
	margin-right: 5px;
}
.explore-countdown {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 206px;
	background: #4241458f;
	text-align: center;
	color: #fff;
	padding: 5px 20px;
	border-radius: 30px;
	font-size: 1rem;
	font-weight: 500;
}
.explore-countdown .timer {
	margin: 0 auto;
}
.section-headding .text-center a {
	float: right;
}
.section-headding h2 {
	color: #fff;
	font-size: 30px;
	font-weight: 700;
}
.liveac-slider-nav {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	background: #162844;
	color: #fff;
	font-size: 23px;
}
.disabled .liveac-slider-nav {
	cursor: no-drop;
}
.live-auction-slider .owl-prev {
	position: absolute;
	top: 45%;
	left: -12px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	opacity: 0;
	visibility: hidden;
}
.live-auction-slider .owl-next {
	position: absolute;
	top: 45%;
	right: -12px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	opacity: 0;
	visibility: hidden;
}
.live-auction-slider:hover .owl-prev, .live-auction-slider:hover .owl-next{
	opacity: 1;
	visibility: visible;
}
/*
 * #-Creator Item
*/
.creator-item {
    background: #262626;
    border: 1px solid hsla(0,0%,100%,.1);
    border-radius: 16px;
    cursor: pointer;
    flex: 1;
    padding: 10px 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* iOS 悬浮磨砂玻璃 + 折射质感 */
.creator-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

/* 白色渐变流光层 */
.creator-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255,255,255,0.35), 
        transparent
    );
    /* 关键：默认不播放、不显示 */
    opacity: 0;
    animation: textStream 1.5s linear forwards;
    animation-play-state: paused; /* 动画暂停 */
}

/* hover 触发一次流光 */
.creator-item:hover::after {
    opacity: 1;
    animation-play-state: running; /* 播放动画 */
}

/* 流光动画 从左往右扫一次 */
@keyframes textStream {
    0% { left: -100%; }
    100% { left: 100%; }
}


.creator-item .thumb {
	width: 60px;
	float: left;
	margin-right: 10px;
	position: relative;
}
.creator-item .thumb img {
	border-radius: 50%;
	width: 100%;
	 border: 1px solid hsla(0,0%,100%,.1);
}
.creator-item .content h4 a {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.creator-item .content h4 a:hover{
	color: #fff;
}


.creator-item .content p {
	color: #ddddddd6;
	font-size: 15px;
	font-weight: 500;
	padding-top: 4px;
}
.creator-item .content {
	overflow: hidden;
}
.creator-item .thumb .verifi {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 50%;
	font-size: 8px;
	right: -3px;
	background-color: #019DEA;
	border: 2px solid #FFFFFF;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.explore-item .thumbnail img{
	width: 100%;
}
/*
 * #-Collect NFT
*/
.collect-nft-content h2 {
	font-size: 45px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 10px;
	color: #fff;
}
.collect-nft-content h2 span {
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #5f3afc;
	color: transparent;
	text-transform: uppercase;
	letter-spacing: 0px;
}
.collect-nft-content p {
	margin-bottom: 20px;
	color: #fff;
	font-size: 18px;
	line-height: 30px;
}
/*
 * #-Blog
*/
.blog-item {
	background: #121313;
	border-radius: 10px;
	overflow: hidden;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	padding: 15px;
}
.blog-item .thumbnail {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}
.blog-item .thumbnail img {
	border-radius: 10px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	
}
.blog-item:hover .thumbnail img {
	transform: scale(1.08) rotate(1deg);
}
.blog-item .content {
	padding: 20px 0px 10px 0px;
}
.blog-item .thumbnail .date {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #fff;
	padding: 7px 18px;
	text-transform: capitalize;
	font-weight: 500;
	font-size: 15px;
	color: #333;
	border-top-right-radius: 10px;
}
.blog-item .content h2 {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 12px;
	font-weight: 700;
}
.blog-item .content h2 a{
	color: #fff;
}
.blog-item .content h2 a:hover{
	color: #5f3afc;
}
.blog-item .content p {
	font-size: 16px;
	line-height: 28px;
	margin-bottom: 25px;
	color: #ddd;
}
.blog-item .content .bottom {
	width: 100%;
	overflow: hidden;
}
.blog-item .content .bottom .left {
	float: left;
}
.blog-item .content .bottom .left img {
	width: 50px;
	border-radius: 50%;
	margin-right: 5px;
	border: 2px solid #5f3afc;
	display: inline;
}
.blog-item .content .bottom .left span {
	font-size: 16px;
	text-transform: capitalize;
	font-weight: 600;
	color: #ddd;
}
.blog-item .content .bottom .right {
	float: right;
	padding-top: 5px;
}
.blog-item .content .bottom .right a {
	background: transparent;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 22px;
	border-radius: 50%;
	-webkit-transition: all .4s ease;
	transition: all .4s ease-in-out;
	border: 2px solid #5f3afc;
}
.blog-item .content .bottom .right a:hover{
	background: #5f3afc;;
}
.latest-slider-nav {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	background: #162844;
	color: #fff;
	font-size: 23px;
}
.latest-blog-slider .owl-prev {
	position: absolute;
	top: 45%;
	left: -12px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	opacity: 0;
	visibility: hidden;
}
.latest-blog-slider .owl-next {
	position: absolute;
	top: 45%;
	right: -12px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	opacity: 0;
	visibility: hidden;
}
.latest-blog-slider:hover .owl-prev, .latest-blog-slider:hover .owl-next {
	opacity: 1;
	visibility: visible;
}
.disabled .latest-slider-nav {
	cursor: no-drop;
}
/*
 * #-Subscribe Form
*/
.subscribe-form {
	background: #090909;
}
.subscribe-left {
	display: flex;
}
.subscribe-left .img {
	padding-right: 15px;
}
.subscribe-left .content h2 {
	font-size: 35px;
	color: #fff;
	line-height: 1.2;
}
.subscribe-left .content p {
	color: #9f9f9f;
}
.subscribe-form form {
	width: 100%;
	position: relative;
}
.subscribe-form form input {
	width: 100%;
	height: 70px;
	border: 0;
	padding: 0 50px;
	text-transform: uppercase;
	font-weight: 600;
	background: #141626;
	font-size: 14px;
	color: #aaabc3;
}
.subscribe-form form input::-moz-placeholder {
	color: #aaabc3;
	font-size: 14px;
	opacity: 1;
}
.subscribe-form form input::placeholder {
	color: #aaabc3;
	font-size: 14px;
	opacity: 1;
}
.subscribe-form form button {
	position: absolute;
	top: 0;
	right: 0;
	height: 70px;
	border: none;
	background: #5f3afc;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: .2px;
	padding: 0px 40px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
/*
 * #-Footer
*/
.footer-widgets-single h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
	padding-bottom: 10px;
	position: relative;
	text-transform: uppercase;
	color: #fff;
}
.footer-widgets-single h3::before {
	content: "";
	clear: both;
	display: block;
	position: absolute;
	width: 100%;
	height: 1px;
	background: #293c5b;
	bottom: 0;
	left: 0;
}
.footer-widgets-single h3::after {
	content: "";
	clear: both;
	display: block;
	position: absolute;
	width: 25%;
	height: 2px;
	background: #5f3afc;
	bottom: 0;
}
.footer-widgets-single .corporate-address li {
	line-height: 28px;
	padding: 4px 0px;
	display: flex;
}
.footer-widgets-single .corporate-address li i {
	float: left;
	margin-top: 4px;
	padding-right: 15px;
	color: #5f3afc;
	font-size: 16px;
}
.footer-widgets-single .corporate-address li span {
	color: #8c8b8b;
	font-size: 15px;
	line-height: 26px;
	padding-top: 0px;
}
.footer-social {
	margin-top: 15px;
}
.footer-social span a{
	display: inline-block;
}
.footer-social span a i {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 33px;
	height: 32px;
	background: #084f99;
	color: #fff;
	font-size: 14px;
	border-radius: 2px;
}
.footer-social span a i.fa-twitter {
	background: #1da1f2;
}
.footer-social span a i.fa-linkedin {
	background: #0e76a8;
}
.footer-social span a i.fa-instagram {
	background: radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#234bd7 12%,#c33cbe 58%);
}
.footer-widgets-single .footer-menu li {
	display: block;
	line-height: 32px;
}
.footer-widgets-single .footer-menu li a {
	display: inline-block;
	position: relative;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	color: #8c8b8b;
	font-size: 15px;
	padding: 3px 0px;
}
.footer-widgets-single .footer-menu li a:hover{
	text-decoration: underline;
	color: #fff;
}
.footer-copy p {
	font-size: 16px;
	color: #ddd;
}
.footer-copy p a{
	color: #ddd;
}
.footer-copy p a:hover{
	color: #5f3afc;
}

/* ==========================================================
 * 网站底部信息栏（动态 Footer）
 * ========================================================== */
.mjvfx-footer {
	background: #0b0b10;
	color: #9ca3af;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 14px;
}

.mjvfx-footer-top {
	padding: 100px 0 60px;
}

.mjvfx-footer-inner {
	width: 100%;
	max-width: min(calc(100vw - 400px), 1700px);
	margin: 0 auto;
	padding: 0 24px;
}

.mjvfx-footer-grid {
	display: grid;
	gap: 80px;
	align-items: start;
}

.mjvfx-footer-grid-main {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mjvfx-footer-col {
	min-width: 0;
	text-align: left;
}

.mjvfx-footer-title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 30px;
	padding-bottom: 16px;
	position: relative;
	text-align: left;
}

.mjvfx-footer-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: linear-gradient(90deg, #5f3afc, #8b5cf6);
	border-radius: 2px;
}

.mjvfx-footer-subtitle {
	font-size: 14px;
	font-weight: 600;
	color: #e5e7eb;
	margin-bottom: 16px;
}

.mjvfx-footer-block + .mjvfx-footer-block {
	margin-top: 36px;
}

.mjvfx-footer-address-list,
.mjvfx-footer-contact-list,
.mjvfx-footer-links,
.mjvfx-footer-partners {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mjvfx-footer-address-list li,
.mjvfx-footer-contact-list li {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px 0;
	line-height: 1.7;
}

.mjvfx-footer-address-icon,
.mjvfx-footer-contact-list li i {
	flex: 0 0 22px;
	width: 22px;
	text-align: center;
	color: #5f3afc;
	font-size: 16px;
}

.mjvfx-footer-address-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	filter: brightness(1.1);
}

.mjvfx-footer-address-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}

.mjvfx-footer-address-content strong {
	color: #fff;
	font-weight: 600;
	font-size: 13px;
}

.mjvfx-footer-address-content span {
	color: #9ca3af;
}

.mjvfx-footer-contact-list a {
	color: #d1d5db;
	transition: color 0.25s ease;
}

.mjvfx-footer-contact-list a:hover {
	color: #5f3afc;
}

.mjvfx-footer-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.mjvfx-footer-links.mjvfx-footer-links-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-items: start;
	gap: 10px 8px;
	width: 100%;
}

.mjvfx-footer-links li {
	padding: 0;
}

.mjvfx-footer-links a {
	color: #9ca3af;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.25s ease;
	position: relative;
	padding: 4px 0;
	white-space: nowrap;
	overflow-wrap: break-word;
}

.mjvfx-footer-links a:hover {
	color: #fff;
}

.mjvfx-footer-partners {
	display: grid;
	gap: 14px;
	justify-items: start;
	align-items: center;
}

.mjvfx-footer-partners-grid {
	grid-template-columns: repeat(3, 1fr);
}

.mjvfx-footer-partners li {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	text-align: left;
	transition: transform 0.3s ease;
	display: flex;
	align-items: center;
}

.mjvfx-footer-partners li:hover {
	transform: translateY(-3px);
}

.mjvfx-footer-partners img {
	max-width: 100%;
	max-height: 56px;
	object-fit: contain;
	display: block;
	margin: 0;
	filter: grayscale(20%) brightness(1.1);
	transition: filter 0.3s ease;
}

.mjvfx-footer-partners li:hover img {
	filter: grayscale(0%) brightness(1);
}

.mjvfx-footer-partner-name {
	color: #d1d5db;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
}

.mjvfx-footer-socials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-items: start;
	gap: 14px 10px;
}

.mjvfx-footer-social-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.mjvfx-footer-social-name {
	color: #d1d5db;
	font-size: 13px;
	font-weight: 500;
	transition: color 0.25s ease;
}

.mjvfx-footer-social-name:hover {
	color: #5f3afc;
}

.mjvfx-footer-qr {
	width: 90px;
	height: 90px;
	background: #fff;
	border-radius: 8px;
	padding: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.mjvfx-footer-qr img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 4px;
}

.mjvfx-footer-bottom {
	background: #08080c;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding: 30px 0;
}

.mjvfx-footer-copy {
	text-align: center;
	color: #6b7280;
	font-size: 13px;
}

.mjvfx-footer-copy a {
	color: #9ca3af;
	transition: color 0.25s ease;
}

.mjvfx-footer-copy a:hover {
	color: #5f3afc;
}

@media (max-width: 1200px) {
	.mjvfx-footer-grid-main {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 60px;
	}
}

@media (max-width: 992px) {
	.mjvfx-footer-inner {
		max-width: none;
		padding: 0 80px;
	}
	.mjvfx-footer-grid-main {
		grid-template-columns: repeat(2, 1fr);
		gap: 50px;
	}
}

@media (max-width: 768px) {
	.mjvfx-footer-top {
		padding: 60px 0 30px;
	}
	.mjvfx-footer-inner {
		padding: 0 24px;
	}
	.mjvfx-footer-grid-main {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.mjvfx-footer-links.mjvfx-footer-links-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.mjvfx-footer-partners-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.mjvfx-footer-links.mjvfx-footer-links-grid {
		grid-template-columns: 1fr;
	}
	.mjvfx-footer-partners-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * #-Hero Section 2
*/
.hero-section-search h2 {
	font-size: 50px;
	text-transform: capitalize;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	margin-bottom: 14px;
}
.hero-section-search p {
	font-size: 20px;
	margin-bottom: 25px;
	color: #ddd;
}
.s-bar-full {
	position: relative;
	max-width: 550px;
	margin: 0 auto;
}
.s-bar-full form {
	position: relative;
	width: 100%;
	z-index: 999;
}
.s-bar-full form input {
	width: 100%;
	padding: 16px 20px;
	border: none;
	position: relative;
	border-radius: 5px;
	font-size: 17px;
	text-transform: capitalize;
	font-weight: 600;
	color: #666;
	line-height: 1.2;
}
.s-bar-full form input::-moz-placeholder {
	font-size: 17px;
	text-transform: capitalize;
	font-weight: 600;
	color: #666;
	line-height: 1.2;
}
.s-bar-full form input::placeholder {
	font-size: 17px;
	text-transform: capitalize;
	font-weight: 600;
	color: #666;
	line-height: 1.2;
}
.s-bar-full form button {
	position: absolute;
	height: 100%;
	right: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border: none;
	color: #fff;
	padding: 10px 20px;
	font-size: 20px;
	background: #5f3afc;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.s-bar-full form button:hover{
	background: #765de1;
}
.s-bar-overly-focus {
	position: absolute;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0px 1px 11px 0px #eeeeee59;
	z-index: 999;
	top: 58px;
	min-height: 350px;
	height: 100%;
	overflow-y: auto;
	text-align: left;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	opacity: 0;
	visibility: hidden;
}
.s-bar-overly-focus.active{
	opacity: 1;
	visibility: visible;
}
.s-bar-overly-focus .single {
	padding: 14px 20px;
	border-bottom: 1px solid #eee;
}
.s-bar-overly-focus .single h6 {
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 10px;
	color: #666;
}
.s-bar-overly-focus .single .tags-s a {
	display: inline-block;
	padding: 6px 15px;
	text-transform: capitalize;
	background: #d5d5d5;
	border-radius: 25px;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	-webkit-transition: all .4s ease-in-out;
	transition: all .2s ease-in-out;
	margin: 4px;
}
.s-bar-overly-focus .single .tags-s a:hover{
	background: #b3b1b1;
}
.s-bar-overly-focus .single .trending-topic a {
	display: inline-block;
	border: 1px solid #ddd;
	border-radius: 5px;
	margin: 6px;
	padding: 10px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .3s ease-in-out;
}
.s-bar-overly-focus .single .trending-topic a:hover {
	background: #f2f2f2;
}
.s-bar-overly-focus .single .trending-topic a img {
	width: 50px;
	border-radius: 50%;
	height: 50px;
}
.s-bar-overly-focus .single .trending-topic a span {
	color: #444;
	font-size: 14px;
	font-weight: 600;
	padding-left: 5px;
	text-transform: capitalize;
}
.off_canvars_overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	cursor: crosshair;
	background: #232323;
	top: 0;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}
.off_canvars_overlay.active {
	opacity: 0.5;
	visibility: visible;
}
/*
 * #-Breadcrumb
*/
.breadcrumb-content {
	padding-top: 100px;
	padding-bottom: 70px;
}
.breadcrumb-content h2 {
	color: #fff;
	font-size: 40px;
	text-transform: capitalize;
	line-height: 1.2;
	margin-bottom: 20px;
}
.breadcrumb-content ul li {
	display: inline-block;
	margin: 0px 4px;
	color: #c1c1c1;
}
.breadcrumb-content ul li a{
	color: #fff;
}
.breadcrumb-content ul li a:hover{
	text-decoration: underline;
}
.up-headding h2 {
	font-size: 40px;
	text-transform: capitalize;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 2px;
}
.up-headding p {
	color: #ddd;
	line-height: 30px;
	margin-top: 10px;
}
.upload-info-box {
	background: #001a46;
	border-radius: 10px;
	overflow: hidden;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	padding: 32px 20px;
	text-align: center;
}
.upload-info-box:hover{
	transform: translateY(-10px);
}
.upload-info-box .content {
	margin-top: 20px;
}
.upload-info-box .content h2 {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 8px;
}
.upload-info-box .content p {
	color: #c8c8c8;
	font-size: 15px;
	line-height: 1.30;
	margin-bottom: 20px;
}
.upload-info-box .content .button-1 {
	padding: 10px 20px;
}
.art-upload-file label {
	width: 100%;
	border: 2px dashed #5f3afc;
	border-radius: 8px;
	padding: 70px 50px;
	background: #5f3afc1a;
	cursor: pointer;
}
.art-upload-file label input {
	display: none;
}
.art-upload-file label i {
	font-size: 86px;
	color: #7d10ea;
	margin-bottom: 10px;
}
.art-upload-file label .h4 {
	font-size: 20px;
	text-transform: capitalize;
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 6px;
	display: block;
}
.art-upload-file label .p {
	color: #ddd;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 30px;
	display: block;
}
.art-upload-from .single-field {
	width: 100%;
	margin-bottom: 28px;
}
.art-upload-from .single-field input {
	width: 100%;
	font-weight: 600;
	text-transform: none;
	padding: 16px 20px;
	border-radius: 5px;
	background: #5f3afc1a;
	color: #fff;
	border: none;
}
.art-upload-from .single-field textarea {
	width: 100%;
	font-weight: 600;
	text-transform: none;
	padding: 16px 20px;
	border-radius: 5px;
	background: #5f3afc1a;
	color: #fff;
	border: none;
	height: 120px;
}
.art-upload-from .single-field label {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding-bottom: 5px;
}
.art-upload-from .single-field .nice-select {
	width: 100%;
	border: none;
	padding: 8px 20px;
	border-radius: 5px;
	background: #5f3afc1a;
	height: auto;
	color: #fff;
	font-weight: 600;
}
.art-upload-from .single-field .nice-select .list {
	width: 100%;
	background: #081c3c;
	z-index: 9;
}
.art-upload-from .single-field .nice-select .list li:hover{
	background-color: #041e48;
}
.art-upload-from .single-field .nice-select .list li.selected.focus{
	background-color: #041e48;
}
.f-right{
	float: right;
}
.explore-sort-bg {
	background: #001a46;
	border-radius: 0px;
	padding: 15px 4px;
}
.explore-select-single .nice-select {
	width: 100%;
	border-radius: 0px;
	background: #5f3afc;
	color: #fff;
	font-weight: 500;
	text-transform: capitalize;
	border: none;
	height: auto;
	padding: 2px 20px;
}
.explore-select-single .nice-select .list {
	width: 100%;
	border-radius: 0px;
	background: #071122;
	font-size: 14px;
	font-weight: 600;
}
.explore-select-single .nice-select .list li:hover{
	background: #5f3afc !important;
}
.explore-select-single .nice-select .list li.option.selected.focus {
	background-color: #240f79 !important;
}
.explore-search-single {
	max-width: 300px;
	width: 100%;
}
.explore-search-single form{
	position: relative;
	width: 100%;
}
.explore-search-single form input {
	width: 100%;
	position: relative;
	background: #051124;
	border: none;
	padding: 14px 20px;
	color: #fff;
	font-weight: 500;
	text-transform: capitalize;
	font-size: 15px;
}
.explore-search-single form input::-moz-placeholder {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	opacity: 1;
}
.explore-search-single form input::placeholder {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	opacity: 1;
}
.explore-search-single form button {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	border: none;
	padding: 10px 15px;
	background: transparent;
	color: #fff;
	font-size: 20px;
}
/*
 * #-Pagination
*/
.nft-pagination ul li {
	display: inline-block;
	margin: 0px 2px;
}
.nft-pagination ul li a {
	display: flex;
	background: #001a46;
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: 600;
}
.nft-pagination ul li span {
	display: flex;
	background: #5f3afc;
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: 600;
}
.tab-pane.fade {
	transition: all 0.6s ease-out;
	transform: translateY(1rem);
}
.tab-pane.fade.show {
	transform: translateY(0rem);
}
.explore-details-left .thumb {
	margin-bottom: 30px;
}
.explore-details-left .thumb img{
	width: 100%;
}
.explore-details-left ul.nav {
	border: none;
	border-radius: 0px;
	background: #1a203c;
	margin-bottom: 20px;
}
.explore-details-left ul.nav li button {
	background: transparent;
	padding: 15px 26px;
	display: inline-block;
	line-height: 1.2;
	color: #fff !important;
	text-transform: capitalize;
	border: none;
	font-weight: 600;
	font-size: 15px;
	position: relative;
	-webkit-transition: all.4s ease;
	transition: all .4s ease;
}
.explore-details-left ul.nav li button.active {
	color: #5f3afc !important;
	background: transparent !important;
	position: relative;
}
.explore-details-left ul.nav li button.active::after {
	content: "";
	clear: both;
	display: block;
	position: absolute;
	width: 20px;
	height: 12px;
	background: #051124;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.explore-details-conetnt p {
	color: #ddd;
	font-size: 16px;
	line-height: 27px;
	margin-bottom: 20px;
}
.explore-details-conetnt .auth {
	overflow: hidden;
	margin-bottom: 20px;
}
.explore-details-conetnt .auth .img {
	width: 70px;
	float: left;
	margin-right: 20px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
}
.explore-details-conetnt .auth .img img{
	width: 100%;
}
.explore-details-conetnt .auth .con {
	overflow: hidden;
	padding-top: 8px;
}
.explore-details-conetnt .auth .con span {
	font-size: 15px;
	text-transform: capitalize;
	font-weight: 500;
	line-height: 1.2;
	color: #ddd;
}
.explore-details-conetnt .auth .con h4 a {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.explore-details-conetnt ul li {
	display: block;
	line-height: 36px;
	color: #ddd;
	font-size: 16px;
}
.explore-details-conetnt ul li span {
	width: 150px;
	display: inline-block;
	font-weight: 700;
	font-size: 16px;
	text-transform: capitalize;
}
.explore-details-conetnt-bid {
	text-align: center;
}
.explore-details-conetnt-bid i {
	text-align: center;
	color: #fff;
	font-size: 40px;
	margin-bottom: 15px;
}
.explore-details-conetnt-bid p {
	color: #ddd;
	font-weight: 600;
	font-size: 16px;
}
.explore-details-conetnt-history ul {
	border-left: 2px dashed #5f3afc;
	padding: 0;
}
.explore-details-conetnt-history ul li {
	display: block;
	position: relative;
	line-height: 30px;
	padding: 5px 0px;
	padding-left: 20px;
}
.explore-details-conetnt-history ul li::after {
	content: "";
	clear: both;
	display: block;
	position: absolute;
	width: 15px;
	height: 15px;
	background: #5f3afc;
	top: 12px;
	left: -8px;
	border-radius: 50%;
}
.explore-details-conetnt-history ul li p {
	font-size: 15px;
	line-height: 1.2;
	font-weight: 700;
	color: #ddd;
}
.explore-details-conetnt-history ul li p a{
	color: #5f3afc;
}
.explore-details-conetnt-history ul li span {
	color: #ddd;
	font-size: 14px;
}
.explore-details-right {
	position: sticky;
	top: 95px;
	background: #1a203c;
	border-radius: 5px;
	padding: 30px 20px;
}
.explore-details-right h2 {
	font-size: 28px;
	text-transform: capitalize;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 10px;
	color: #fff;
}
.explore-details-right h3 {
	font-size: 24px;
	text-transform: capitalize;
	font-weight: 700;
	color: #fff;
	margin-bottom: 30px;
}
.explore-details-right h4 {
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 4px;
}
.explore-details-right .running {
	display: inline-block;
	font-size: 35px;
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 20px;
	color: #5f3afc;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #5f3afc;
	color: transparent;
}
.explore-details-right .price-d p {
	font-weight: 700;
	color: #fff;
	font-size: 20px;
	margin-bottom: 30px;
}
.explore-details-right .price-d p i{
	color: #5f3afc;
}
.explore-details-right .price-d p span{
	font-weight: 600;
	font-size: 16px;
}
.explore-details-right .buying-btns a.mr-5 {
	margin-right: 20px;
}
/*
 * #-Creator Details
*/
.creator-details-left{
	position: sticky;
	top: 95px;
	background: #1a203c;
	border-radius: 5px;
	padding: 30px 20px;
	text-align: center;
}
.creator-details-left img {
	width: 150px;
	height: 150px;
	margin-bottom: 20px;
	border-radius: 50%;
}
.creator-details-left h2 {
	font-size: 22px;
	text-transform: capitalize;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
}
.creator-details-left p {
	margin-bottom: 20px;
	font-size: 15px;
	text-align: left;
	color: #ddd;
}
.creator-details-left .s-c-s {
	margin-top: 30px;
}
.creator-details-left .s-c-s span {
	display: inline-block;
	margin: 0px 4px;
}
.creator-details-left .s-c-s span a {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #242c53;
	border-radius: 50%;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	box-shadow: 0px 0px 10px 0px #080f0a21;
	color: #fff;
	font-size: 13px;
}
.creator-details-left .s-c-s span a:hover{
	transform: translateY(-5px);
	background: #fff;
	color: #000;
}
/*
 * #-Activity
*/
.activity-filter {
	position: sticky;
	top: 95px;
	background: #1a203c;
	border-radius: 5px;
	padding: 30px 20px;
}
.activity-filter h2 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
	color: #fff;
	letter-spacing: 1px;
}
.activity-filter .activity-filter-all a {
	display: inline-block;
	color: #fff;
	text-transform: capitalize;
	border: 1px solid #3e3e3e;
	padding: 8px 20px;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 600;
	margin: 5px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .2s ease-in-out;
}
.activity-filter .activity-filter-all a i{
	color: #5f3afc;
	padding-right: 5px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .2s ease-in-out;
}
.activity-filter .activity-filter-all a:hover{
	border-color: #5f3afc;
	background: #5f3afc;
	color: #fff;
}
.activity-filter .activity-filter-all a:hover i{
	color: #fff;
}
.activity-single-item {
	background: #1a203c;
	padding: 20px;
	border-radius: 5px;
	width: 100%;
	overflow: hidden;
}
.activity-single-item .thumb {
	max-width: 120px;
	float: left;
	margin-right: 20px;
	border-radius: 5px;
}
.activity-single-item .thumb img{
	width: 100%;
	border-radius: 5px;
}
.activity-single-item .content {
  overflow: hidden;
  height: 100%;
  float: left;
  margin-right: 10px;
  padding-top: 20px;
}
.activity-single-item .content h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.activity-single-item .content h4 a {
  color: #fff;
}
.activity-single-item .content h4 a:hover{
	color: #5f3afc;
}
.activity-single-item .content p {
  color: #ddd;
  font-size: 16px;
}
.activity-single-item .content  small {
  color: #ccc;
}
.activity-single-item .content p span {
  color: #5f3afc;
}
.activity-single-item .icon {
	overflow: hidden;
	float: right;
	display: flex;
	width: 80px;
	height: 80px;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #5f3afc;
	border-radius: 50%;
	margin-top: 15px;
}
/*
 * #-Team
*/
.team-item {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.team-item .content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #5f3afc;
	text-align: center;
	padding: 15px 10px;
	border-top-left-radius: 60px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.team-item:hover .content{
	border-radius: 0px;
}
.team-item .content h2 {
	font-size: 20px;
	color: #fff;
	text-transform: capitalize;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 5px;
}
.team-item .content p {
	color: #fff;
	font-size: 16px;
	text-transform: capitalize;
}
.team-item .team-social {
	position: absolute;
	top: 14%;
	right: 10px;
	bottom: 0;
	height: 100%;
	-webkit-transition: all .4s ease-in-out;
	transition: all .6s ease-in-out;
	transform: translateY(100%);
}
.team-item:hover .team-social{
	transform: translateY(0);
}
.team-item .team-social ul li a i{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background: #084f99;
	color: #fff;
	font-size: 14px;
	border-radius: 2px;
}
.team-item .team-social ul li a i.fa-twitter {
	background: #1da1f2;
}
.team-item .team-social ul li a i.fa-instagram {
	background: radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#234bd7 12%,#c33cbe 58%);
}
.team-item .team-social ul li a i.fa-linkedin {
	background: #0e76a8;
}
.team-item .team-social ul li a {
	margin: 3px 0px;
	display: inline-block;
}
/*
 * #-Pricing Plane
*/
.pricing-item {
	text-align: center;
	box-sizing: border-box;
	padding: 12px;
	border-radius: 5px;
	background: #1a203c;
}
.pricing-header {
	background: #5e2ced42;
	border-radius: 5px;
	padding: 20px 0px;
	margin-bottom: 20px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease;
}
.pricing-item:hover .pricing-header{
	background: #5e2ced;
}
.pricing-header h4 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease;
	color: #fff;
}
.pricing-item:hover .pricing-header h4{
	color: #fff;
}
.pricing-header h2 {
	color: #5e2ced;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 10px;
	margin-bottom: 10px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease;
	color: #fff;
}
.pricing-item:hover .pricing-header h2{
	color: #fff;
}
.pricing-header h2 span {
	font-size: 20px;
}
.pricing-header p {
	font-weight: 500;
	text-transform: capitalize;
	font-size: 16px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease;
	color: #fff;
}
.pricing-item:hover .pricing-header p{
	color: #fff;
}
.pricing-content {
	padding-bottom: 20px;
}
.pricing-content ul {
	margin-bottom: 20px;
}
.pricing-content ul li {
	line-height: 34px;
	padding: 10px 0px;
	color: #ddd;
}
.pricing-btn {
	background: #5e2ced4f;
	color: #fff;
	text-transform: capitalize;
	font-weight: 500;
	padding: 15px 30px;
	display: inline-block;
	border-radius: 40px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.pricing-btn:hover{
	color: #fff;
	background: #5e2ced;
}
/*
 * #-About Us
*/
.about-content h2 {
	font-size: 38px;
	text-transform: capitalize;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
	color: #fff;
}
.about-content p {
	line-height: 30px;
	margin-bottom: 20px;
	color: #a2a2a2;
}
.about-content p:last-child{
	margin-bottom: 0px;
}
.ab-card-info {
	text-align: center;
	background: #1a203c;
	border-radius: 5px;
	padding: 20px 5px;
}
.ab-card-info h2 {
	font-size: 30px;
	font-weight: 900;
	color: #fff;
	line-height: 1.2;
	padding-top: 8px;
	padding-bottom: 5px;
}
.ab-card-info p {
	color: #ddd;
	font-size: 15px;
}
/*
 * #-Error 404
*/
.error-404-content {
	background: #1a203c;
	padding: 50px 20px;
	border-radius: 5px;
	width: 100%;
	overflow: hidden;
}
.error-404-content i {
	color: #5f3afc;
	font-size: 120px;
	margin-bottom: 20px;
}
.error-404-content h2 {
	font-size: 50px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #ddd;
}
.error-404-content p {
	max-width: 364px;
	color: #fff;
	margin: 0 auto;
	font-size: 16px;
}
/*
 * #-Faq Page
*/
.accordion-item {
	border: 2px solid #4e536a;
	border-bottom: none;
	background: #1a203c;
}
.accordion-item:last-child{
	border-bottom: 2px solid #4e536a;
}
.accordion-item .accordion-header {
	line-height: 1;
	margin: 0;
	padding: 0;
}
.accordion-item .accordion-header a {
	font-size: 16px;
	width: 100%;
	display: inline-block;
	color: #fff;
	padding: 20px 20px;
	font-weight: 500;
	text-transform: capitalize;
	position: relative;
}
.accordion-item .accordion-header a::after {
	content: "-";
	clear: both;
	overflow: hidden;
	position: absolute;
	top: 14px;
	right: 10px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #5f3afc;
	color: #fff;
	font-size: 20px;
	height: 30px;
}
.accordion-item .accordion-header a.collapsed::after{
	content: "+";
}
.accordion-item .accordion-body {
	border: none;
	padding: 15px 20px;
	border-top: 2px solid #4e536a;
}
.accordion-item .accordion-collapse {
	border: none;
}
.accordion-item .accordion-body p {
	line-height: 30px;
	color: #ddd;
	margin-bottom: 10px;
}
h2.accordion-header {
	padding: 0 !important;
	margin: 0 !important;
}
.accordion-item .accordion-header a:hover{
	color: #5f3afc;
}
.faq-content-t h2 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: capitalize;
	color: #fff;
}
.faq-content-t p {
	line-height: 30px;
	margin-bottom: 20px;
	color: #ddd;
}
.faq-content-t {
	background: #1a203c;
	padding: 30px;
}
.faq-content-t h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 6px;
	color: #5f3afc;
}
.faq-content-t ul {
	margin-bottom: 15px;
	list-style: disc;
	padding-left: 30px;
}
.faq-content-t ul li {
	font-weight: 500;
	line-height: 32px;
	color: #ddd;
}
.vedio-popup-area {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	padding: 150px 0px;
	background-attachment: fixed;
	position: relative;
	z-index: 1;
}
.vedio-popup-area::after {
	content: "";
	clear: both;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #0000008c;
}
.video-btn a {
	background: #fff;
	height: 100px;
	width: 100px;
	text-align: center;
	border-radius: 50%;
	line-height: 100px;
	font-size: 30px;
	-webkit-transition: .5s -webkit-animation ripple-red 1s linear infinite;
	animation: ripple-red 1s linear infinite;
	-webkit-transition: .5s;
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	color: #5e2ced;
}
@-webkit-keyframes ripple-red {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(2241, 42, 2, 0)
    }
}
.video-btn span {
	display: none;
}
/*
 * #-Sidebar
*/
.sidebar-sticky{
	position: sticky;
	top: 95px;
}
.sidebar-widgets {
	background: #001a46;
	border-radius: 2px;
	overflow: hidden;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	padding: 18px 15px;
}
.sidebar-widgets h2 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
	padding-bottom: 10px;
	position: relative;
	text-transform: uppercase;
	color: #fff;
}
.sidebar-widgets h2::before {
	content: "";
	clear: both;
	display: block;
	position: absolute;
	width: 100%;
	height: 1px;
	background: #293c5b;
	bottom: 0;
	left: 0;
}
.sidebar-widgets h2::after {
	content: "";
	clear: both;
	display: block;
	position: absolute;
	width: 25%;
	height: 2px;
	background: #5f3afc;
	bottom: 0;
}
.wi_search_form form {
	width: 100%;
	position: relative;
}
.wi_search_form input {
	width: 100%;
	position: relative;
	border: 1px solid #eeeeee3b;
	padding: 15px 20px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	background: #001944;
	color: #fff;
	font-weight: 600;
	text-transform: capitalize;
	font-size: 15px;
}
.wi_search_form button {
	position: absolute;
	top: 10%;
	right: 0;
	width: 50px;
	height: 80%;
	background: none;
	border: none;
	font-size: 20px;
	color: #666;
	border-left: 1px solid #eeeeee3b;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.wi_search_form button:hover {
	color: #5f3afc;
}
.wi_search_form input:focus {
	border-color: #5f3afc;
}
.wi_search_form input::-moz-placeholder {
	color: #fff;
	font-size: 15px;
	opacity: 1;
	font-weight: 600;
}
.wi_search_form input::placeholder {
	color: #fff;
	font-size: 15px;
	opacity: 1;
	font-weight: 600;
}
.sidebar-widgets ul li a {
	display: inline-block;
	padding: 6px 0px;
	color: #ddd;
	font-size: 15px;
	font-weight: 500;
	text-transform: capitalize;
}
.sidebar-widgets ul li a:hover{
	color: #5f3afc;
}
.side-widgets-l-blog .item {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.side-widgets-l-blog .item .thubnail {
	width: 80px;
	height: 70px;
	float: left;
}
.side-widgets-l-blog .item .thubnail img {
	width: 100%;
	height: 100%;
}
.side-widgets-l-blog .item .content {
	overflow: hidden;
	padding-left: 10px;
}
.side-widgets-l-blog .item .content h4 {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 4px;
}
.side-widgets-l-blog .item .content h4 a {
	color: #fff;
}
.side-widgets-l-blog .item:hover .content h4 a {
	color: #5f3afc;
}
.side-widgets-l-blog .item .content span {
	padding-top: 4px;
	display: block;
	font-size: 14px;
	color: #ccc;
}
.tagcloud span {
	align-items: center;
	align-self: flex-start;
	border: 1px solid hsla(0,0%,100%,.2);
	border-radius: 23px;
	display: inline-flex;
	gap: 10px;
	padding: 2px 10px;
	color: #fff;
	overflow: hidden;
	transition: all 0.3s ease;  
	margin-top: 0.625rem;
}
.tagcloud span:hover {
	color: #fff;
	border-color: rgba(255,255,255,0.35);
	background: rgba(255,255,255,0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/*
 * #-Blog Details
*/
.blog-details .thumbnail {
	margin-bottom: 20px;
}
.blog-details .thumbnail img{
	max-width: 100%;
}
.blog-details .content .meta {
	margin-bottom: 16px;
}
.blog-details .content .meta span {
	padding-right: 20px;
	color: #fff;
}
.blog-details .content .meta span i{
	color: #5f3afc;
}
.blog-details .content .meta span a{
	color: #fff;
}
.blog-details .content .meta span:hover a{
	color: #5f3afc;
}
.blog-details .content .meta span:last-child{
	padding-right: 0px;
}
.blog-details .content h2 {
	font-size: 32px;
	text-transform: capitalize;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
	color: #fff;
}
.blog-details .content p {
	line-height: 27px;
	color: #fff;
	margin-bottom: 20px;
}
.comments-list-full h2 {
	font-size: 28px;
	text-transform: capitalize;
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 25px;
}
.comments-list-full ul li {
	margin-bottom: 30px;
	overflow: hidden;
	position: relative;
	padding-left: 85px;
}
.comments-list-full ul li ul.comment-reply li {
	margin-top: 30px;
	overflow: hidden;
	width: 100%;
	margin-bottom: 0px;
}
.comments-list-full ul li .thum {
	width: 70px;
	position: absolute;
	top: 0;
	left: 0;
}
.comments-list-full ul li .content h4 {
	font-size: 16px;
	text-transform: capitalize;
	font-weight: 500;
}
.comments-list-full ul li .content h4 a {
	color: #fff;
}
.comments-list-full ul li .content span {
	font-size: 12px;
	color: #ddd;
}
.comments-list-full ul li .content p {
	width: 100%;
	line-height: 28px;
	color: #e8e8e8;
	font-size: 14px;
	word-wrap: break-word;
}
.comments-list-full ul li .content a.reply {
	display: inline-block;
	color: #fff;
	text-transform: capitalize;
	border: 1px solid #626262;
	margin-top: 10px;
	border-radius: 50px;
	padding: 5px 20px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.comments-list-full ul li .content a.reply:hover{
	color: #5f3afc;
	border-color: #5f3afc;
}
.comments-form-full textarea {
	width: 100%;
	margin-bottom: 20px;
	height: 160px;
	border: 1px solid #eeeeee3b;
	padding: 15px 20px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	background: #001944;
	color: #000000;
	font-weight: 600;
	text-transform: capitalize;
	font-size: 15px;
}
.comments-form-full input {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #eeeeee3b;
	padding: 15px 20px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	background: #001944;
	color: #fff;
	font-weight: 600;
	text-transform: capitalize;
	font-size: 15px;
}
.comments-form-full textarea:focus{
	border-color: #5f3afc;
}
.comments-form-full input:focus{
	border-color: #5f3afc;
}
.comments-form-full h2 {
	font-size: 28px;
	text-transform: capitalize;
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 25px;
}
/*
 * #-Contact Us
*/
.contact-form h2 {
	font-size: 26px;
	text-transform: capitalize;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
	color: #fff;
}
.contact-form input {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #0b2142;
	background: transparent;
	-webkit-transition: all .4s ease-in-out;
	transition: all .3s ease-in-out;
	padding: 10px 10px;
	color: #ddd;
	text-transform: capitalize;
	font-weight: 600;
	font-size: 15px;
}
.contact-form input::-moz-placeholder {
	color: #ddd;
	font-size: 15px;
	opacity: 1;
}
.contact-form input::placeholder {
	color: #ddd;
	font-size: 15px;
	opacity: 1;
}
.contact-form textarea {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #0b2142;
	background: transparent;
	-webkit-transition: all .4s ease-in-out;
	transition: all .3s ease-in-out;
	padding: 15px 15px;
	color: #ddd;
	text-transform: capitalize;
	font-weight: 600;
	font-size: 15px;
	height: 150px;
}
.contact-form textarea::-moz-placeholder {
	color: #ddd;
	font-size: 15px;
	opacity: 1;
}
.contact-form textarea::placeholder {
	color: #ddd;
	font-size: 15px;
	opacity: 1;
}
.contact-info {
	background: #1a203c;
	padding: 20px;
	border-radius: 5px;
	width: 100%;
	overflow: hidden;
}
.contact-info h2 {
	font-size: 20px;
	text-transform: uppercase;
	color: #ddd;
	margin-bottom: 3px;
}
.contact-info p {
	color: #999;
	font-size: 15px;
	line-height: 26px;
	margin-bottom: 10px;
}
.contact-info-list .item {
	width: 100%;
	overflow: hidden;
	margin-bottom: 15px;
}
.contact-info-list .item:last-child{
	margin-bottom: 0px;
}
.contact-info-list .item .icon {
	float: left;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #5f3afc;
	margin-right: 10px;
}
.contact-info-list .item .content {
	overflow: hidden;
}
.contact-info-list .item .content h4 {
	font-size: 16px;
	text-transform: capitalize;
	color: #fff;
}
.contact-info-list .item .content p {
	line-height: 23px;
	margin-bottom: 0px;
	font-size: 14px;
}
/*
 * #-Login & Register
*/
.log-in-register-form {
	max-width: 450px;
	margin: 0 auto;
	background: #1a2248;
	box-sizing: border-box;
	padding: 30px;
}
.login-register-form-head h2 {
	text-align: center;
	font-size: 26px;
	text-transform: capitalize;
	letter-spacing: 1px;
	margin-bottom: 20px;
	color: #fff;
}
.login-register-form-head ul li {
	display: inline-block;
	text-align: center;
	width: 23%;
	float: left;
	margin: 0% 1%;
}
.login-register-form-head ul li.google {
	width: 48%;
}
.login-register-form-head ul li.facebook a {
	width: 100%;
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	border-radius: 5px;
	padding: 13px 0px;
	background: #36528C;
}
.login-register-form-head ul li.twitter a{
	width: 100%;
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	border-radius: 5px;
	padding: 13px 0px;
	background: #0D8DDC;
}
.login-register-form-head ul li.google a {
	background: #D04237;
	width: 100%;
	display: block;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-transform: capitalize;
	border-radius: 5px;
	padding: 15px 0px;
}
.login-register-form-head ul li.google a i{
	font-size: 20px;
}
.login-register-form-head ul li.google a span {
	padding-left: 6px;
}
.login-register-form-head {
	width: 100%;
	overflow: hidden;
	margin-bottom: 35px;
}
.login-register-form-middle .single-input {
	width: 100%;
	position: relative;
	margin-bottom: 25px;
}
.login-register-form-middle .single-input input {
	width: 100%;
	position: relative;
	padding: 15px 20px;
	background: transparent;
	border: 1px solid #1a3e73;
	color: #fff;
}
.login-register-form-middle .single-input label {
	position: absolute;
	top: -10px;
	background: #1a3e73;
	z-index: 1;
	font-size: 12px;
	font-weight: 500;
	text-transform: capitalize;
	left: 20px;
	color: #fff;
	padding: 1px 10px;
	border-radius: 5px;
}
.login-register-form-middle .single-input label.rememberme {
	position: relative;
	top: -7px;
	left: 10px;
}
.login-register-form-middle .single-input input#rememberme {
	width: auto;
	float: left;
	border-radius: 0px;
}
.login-register-form-middle .single-input button {
	width: 100%;
}
.single-input.checkbox {
	margin-bottom: 10px;
}
.login-register-from-btom p {
	font-size: 14px;
	color: #ddd !important;
}
.login-register-from-btom p a {
	color: #fff;
}
.login-register-from-btom p a:hover{
	color: #5f3afc;
}
.login-register-from-btom p.text-dark a {
	padding-left: 6px;
}
/*
 * #-Mobile Menu
*/
.off_canvars_overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  cursor: crosshair;
  background: #232323;
  top: 0;
}
.off_canvars_overlay.active {
  opacity: 0.5;
  visibility: visible;
}
.offcanvas_menu {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas_menu {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas_menu {
    display: block;
  }
}
.offcanvas_menu_wrapper {
	width: 290px;
	position: fixed;
	background: #000000;
	z-index: 9991;
	top: 0;
	height: 100vh;
	transition: .5s;
	left: 0;
	margin-left: -300px;
	padding: 20px 0px 30px;
	overflow-y: auto;
}
.offcanvas_menu_wrapper.active {
  margin-left: 0;
}
.offcanvas_menu_wrapper .slinky-theme-default {
  background: inherit;
  min-height: 300px;
  overflow-y: auto;
}
.offcanvas_menu_wrapper .header_search_box {
  display: block;
}
.offcanvas_main_menu > li.menu-item-has-children.menu-open > span.menu-expand {
  transform: rotate(180deg);
}
.offcanvas_main_menu > li ul li.menu-item-has-children.menu-open span.menu-expand {
  transform: rotate(180deg);
}

.offcanvas_main_menu li {
  position: relative;
}
.offcanvas_main_menu li:last-child {
  margin: 0;
}
.offcanvas_main_menu li span.menu-expand {
  position: absolute;
  right: 10px;
}
.offcanvas_main_menu li a {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  display: block;
  padding: 0px 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #202020;
  color: #ddd;
}
.offcanvas_main_menu li a:hover {
  color: #5f3afc;
}
.offcanvas_main_menu li ul.sub-menu {
  padding-left: 20px;
}
.offcanvas_footer {
  margin-top: 50px;
  padding-bottom: 50px;
  text-align: center;
}
.offcanvas_footer span a {
  font-size: 14px;
}
.offcanvas_footer span a:hover {
  color: #5f3afc;
}
.slinky-theme-default a:not(.back) {
  padding: 10px 0;
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 400;
}
.slinky-theme-default a:not(.back):hover {
  background: inherit;
  color: #5f3afc;
}
.canvas_close {
  position: absolute;
  top: 10px;
  right: 13px;
}
.canvas_close a {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 500;
  width: 32px;
  height: 32px;
  display: block;
  text-align: center;
  line-height: 32px;
  border: 1px solid #ededed;
  border-radius: 50%;
  color: #fff;
}
.canvas_close a:hover {
  background: #5f3afc;
  border-color: #5f3afc;
  color: #fff;
}
.mobile-logo {
	padding-left: 20px;
	margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .canvas_open {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .canvas_open {
    right: 20px;
    top: 27px;
    display: block;
    width: 36px;
  }
}
.canvas_open a {
  font-size: 27px;
  display: block;
  line-height: 37px;
  text-align: center;
  color: #232323;
}
@media only screen and (max-width: 767px) {
  .canvas_open a {
    width: 36px;
    height: 34px;
    line-height: 33px;
    font-size: 27px;
  }
}
.canvas_open a:hover {
  color: #fe3737;
  border-color: #fe3737;
}
.mobile-logo h2 {
	font-size: 30px;
	letter-spacing: 2px;
	font-weight: 900;
}
.mobile-logo h2 a{
	color: #333;
}
/*
 * Sticky
*/
.header.sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	-webkit-animation: sticky 1s;
	-moz-animation: sticky 1s;
	-o-animation: sticky 1s;
	animation: sticky 1s;
	-webkit-box-shadow: 2px 4px 8px rgba(51, 51, 51, 0.25);
	-moz-box-shadow: 2px 4px 8px rgba(51, 51, 51, 0.25);
	box-shadow: 2px 4px 8px rgba(140, 129, 129, 0.25);
	background: #000;
}
@-webkit-keyframes sticky {
  	0% {
    	-webkit-transform: translateY(-100%);
    	transform: translateY(-100%); 
    }
  	100% {
    	-webkit-transform: translateY(0%);
    	transform: translateY(0%); 
	} 
}
@keyframes sticky {
  	0% {
    	-webkit-transform: translateY(-100%);
    	transform: translateY(-100%); 
	}
  	100% {
    	-webkit-transform: translateY(0%);
    	transform: translateY(0%); 
	} 
}
.mobile-menu-login {
	margin-top: 20px;
	padding-left: 20px;
	box-sizing: border-box;
}
.mobile-menu-login a {
	color: #2e1b6a;
	font-weight: 600;
	text-transform: capitalize;
	font-size: 18px;
}
.mobile-menu-login a:hover{
	color: #5f3afc;
}
.canvas_open a {
	font-size: 27px;
	display: block;
	line-height: 37px;
	text-align: center;
	color: #232323;
}
.canvas_open a span {
	width: 30px;
	height: 3px;
	display: block;
	background: #333;
	margin: 6px 0px;
}
.canvas_open a span:nth-child(2) {
	width: 25px;
	margin-left: 5px;
}
.canvas_open {
	display: none;
}
/* 视频banner*/
.video-background-container {
    position: relative;
    height: 83vh;
    overflow: hidden;
    /* 关键：垂直靠底 + 水平靠左 */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 160px; /* 控制文字离底部距离，可改 */
    box-sizing: border-box;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* 底部黑色渐变 */
.container-bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%);
    z-index: 3;
    pointer-events: none;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

/* 隐藏默认视频控件，防止移动端被浏览器强制全屏/悬浮播放 */
.video-background::-webkit-media-controls,
.video-background::-webkit-media-controls-enclosure,
.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-play-button,
.video-background::-webkit-media-controls-start-playback-button {
    display: none !important;
}

/* 自动播放被阻止时的兜底样式，显示 poster 图 */
.video-background.mjvfx-video-paused {
    object-fit: cover;
}

/* 文字：左侧定位 */
@font-face {
    font-family: 'iFonts周年体';
    src: url('fonts/11022-4ed10d.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

.banner-text {
    position: relative;
    z-index: 4;
    color: #fff;
    font-family: 'iFonts周年体', sans-serif;
    margin-left: 10%;
    text-align: left;
	font-style: italic; /* 全部文字斜体 */
}

.banner-text h1 {
    font-size: 6.5rem;
    font-weight: 900;
    margin: 0 0 10px;
    line-height: 1;
    /* text-shadow: 0 0 10px rgba(0,0,0,0.5); */
}

/* MINGJIANG 去掉阴影渐变 */
.banner-text p {
    font-size: 5rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: 0.1em;
	color: #ffffff!important;
    /* text-shadow: none; */
}

/* 移动端：文字居中 仍靠底部 */
@media (max-width: 1024px) {
    .video-background-container {
        justify-content: center;
        padding-bottom: 50px;
		height: 70vh;
    }
    .banner-text {
        margin-left: 0;
        text-align: center;
        padding: 0 20px;
    }
    .banner-text h1 { font-size: 5rem; }
    .banner-text p { font-size: 3rem; }
}

@media (max-width: 700px) {
	
    .video-background-container {
        padding-bottom: 30px;
		height: 60vh;
    }
    .banner-text h1 { font-size: 4rem; }
    .banner-text p { font-size: 3rem; }
}

@media (max-width: 480px) {
    .video-background-container {
		height: 50vh;
        padding-bottom: 30px;
    }
    .banner-text h1 { font-size: 2.8rem; }
    .banner-text p { font-size: 2rem; }
}

.liked{
	color: red;
}

/* 收藏按钮样式（无边界版本） */
.favorite-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6c757d; /* 默认灰色 */
}

.favorite-btn:hover:not(.disabled) {
    color: #ffc107; /* 悬停黄色 */
}

.favorite-btn.favorited {
    color: #ffc107; /* 已收藏黄色 */
}

.favorite-btn.loading {
    cursor: not-allowed;
    opacity: 0.7;
}

.favorite-btn .icon-favorite {
    font-size: 1.2em;
}

.favorite-btn .favorite-count {
    font-size: 0.9em;
}

/* 动画效果 */
@keyframes scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.animate-scale {
    animation: scale 0.3s ease-in-out;
}

.animate-pulse {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 自定义单选按钮容器 */
.contact-form .form-check {
    position: relative;
    margin-bottom: 15px;
    padding-left: 30px;
}

/* 自定义单选按钮外观 */
.contact-form .form-check-input {
    position: absolute;
    left: 0;
    top: 2px;
    width: 10px;
    height: 10px;
    margin: 0;
    border: 2px solid #0b2142;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.3s ease-in-out;
}

/* 选中状态样式 */
.contact-form .form-check-input:checked {
    border-color: #5f3afc;
    background-color: #5f3afc;
}

/* 选中状态的指示器 */
.contact-form .form-check-input:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/* 标签样式 */
.contact-form .form-check-label {
    color: #ddd;
    font-weight: 600;
    font-size: 15px;
    text-transform: capitalize;
    cursor: pointer;
    margin-left: 5px;
}

/* 悬停状态 */
.contact-form .form-check:hover .form-check-input {
    border-color: #5f3afc;
}

/* 聚焦状态 */
.contact-form .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(95, 58, 252, 0.25);
}
.text-cover{
	color: #000000 !important;
}
	
.cover-height{
	height: 8.25rem;
}
.icon-upload{
	margin-top: 33px;
}



.edit-comment-form {
    display: none;
    margin-top: 16px;
    padding: 24px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.comment-edit-textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    color: #fff;
    padding: 16px 20px;
    font-size: 15px;
    min-height: 120px;
    resize: vertical;
    transition: border-color .25s ease, background .25s ease;
}

.comment-edit-textarea::placeholder {
    color: rgba(255,255,255,0.35);
}

.comment-edit-textarea:focus {
    outline: none;
    background: rgba(255,255,255,0.06);
    border-color: rgba(95, 58, 252, 0.5);
}

.edit-comment-form .save-comment-btn,
.edit-comment-form .cancel-edit-btn {
    margin-top: 8px;
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.edit-comment-form .cancel-edit-btn {
    margin-left: 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
}

.edit-comment-form .cancel-edit-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

.edit-comment-btn, .delete-comment {
    margin-left: 5px;
}

.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.comments-title{
	color: #fff !important;
}


/*帖子置顶样式*/
.sticky-item {
/*// border: 2px solid #ffc107;*/
	position: relative;
}
.sticky-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: #ffc107;
	color: #333;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: bold;
	z-index: 10;
}
.debug-info {
	font-family: monospace;
	background-color: #f0f0f0;
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #ddd;
}
/* 二级分类小样式宽度 */
.nice-select {
	width: 100% !important; /* 核心：宽度100% */
}
.nice-select .list{
	width: 100%;
}

/* 联系方式css */
/* 右侧悬浮联系栏 - 纯线描图标风格 */
.right-float-contact {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 图标按钮基础样式 */
.float-contact-btn {
    position: relative;
    width: 45px;
    height: 45px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.2);
}

/* 线描图标 */
.float-contact-btn img {
    width: 25px;
    height: 25px;

}

/* 悬停放大效果 */
.float-contact-btn:hover {
    transform: scale(1.15);
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.5);
}

/* 悬浮面板 */
.contact-panel {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: #111;
    border-radius: 8px;
    padding: 10px;
    min-width: 150px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    display: none;
    border: 1px solid rgba(255,255,255,0.1);
}

/* 鼠标悬浮显示面板 */
.float-contact-btn:hover .contact-panel {
    display: block;
}

/* 面板内容 */
.contact-panel p {
    color: #fff;
    margin: 0;
    font-size: 14px;
    text-align: center;
}

.contact-panel .qrcode {
    width: 130px;
    height: 130px;
    /* margin: 10px auto 0; */
    display: block;
}
/* 首页作品展示 */

/* 超大屏：作品展示区域距离浏览器左右边缘各 400px */
@media (min-width: 2000px) {
   .container-xxl.home-works-xxl {
       padding-left: 400px !important;
       padding-right: 400px !important;
	   max-width: calc(100% + 800px) !important;
    
  }
}

/* 1. 先重置可能限制宽度的全局样式 */
.explore-item .content {
  width: 100% !important;
}

/* 2. 作者信息行核心布局 */
.auth-ex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 10px !important;
}

/* 3. 左侧头像+作者区域：自动占满所有可用空间 */
.auth-ex .left {
  /* display: flex !important; */
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important; /* 关键：自动扩张，吃掉剩余空间 */
  min-width: 0 !important;   /* 关键：允许内部元素被压缩，否则截断无效 */
  max-width: 100% !important;
}

/* 4. 名字容器：跟着父级一起伸缩 */
.auth-ex .name {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 1 auto !important; /* 跟着父级一起扩张 */
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 5. 作者名字：只在空间不足时截断 */
.auth-ex .name .text-truncate {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 6. 右侧日期：禁止被挤压 */
.auth-ex .right {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* =========================================================
 *  Creator Card V2 - 高级用户卡片
 * ========================================================= */
.creator-card-v2 {
  --cc-primary: #866ff4;
  --cc-primary-soft: rgba(124,125,187,0.14);
  --cc-glow: rgba(124,125,187,0.12);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 16px;
  background: linear-gradient(145deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  isolation: isolate;
}

.creator-card-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(124,125,187,0.45), rgba(255,255,255,0.08), rgba(124,125,187,0.22));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.creator-card-v2::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, var(--cc-glow), transparent 60%);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.6s ease;
  pointer-events: none;
  z-index: 0;
}

.creator-card-v2:hover {
  transform: translateY(-6px);
  border-color: rgba(124,125,187,0.28);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px var(--cc-glow);
}

.creator-card-v2:hover::before {
  opacity: 1;
}

.creator-card-v2:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* 头像区域 */
.creator-card-v2 .cc-avatar {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  z-index: 2;
}

.creator-card-v2 .cc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  transition: all 0.4s ease;
  background: #1a1a1a;
}

.creator-card-v2:hover .cc-avatar img {
  border-color: rgba(95,58,252,0.6);
  box-shadow: 0 0 20px rgba(95,58,252,0.35);
  transform: scale(1.05);
}

/* 头像外侧光环 */
.creator-card-v2 .cc-avatar::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #5f3afc, #a855f7, #5f3afc);
  opacity: 0.35;
  animation: cc-ring-rotate 6s linear infinite;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.creator-card-v2:hover .cc-avatar::before {
  opacity: 0.7;
}

@keyframes cc-ring-rotate {
  to { transform: rotate(360deg); }
}

/* 状态指示点 */
.creator-card-v2 .cc-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  background: #6c757d;
  z-index: 3;
  transition: all 0.3s ease;
}

.creator-card-v2 .cc-status.employed { background: #5cb67f; box-shadow: 0 0 6px rgba(92,182,127,0.45); }
.creator-card-v2 .cc-status.testing  { background: #d4a843; box-shadow: 0 0 6px rgba(212,168,67,0.45); }
.creator-card-v2 .cc-status.freelance { background: #5f8fd4; box-shadow: 0 0 6px rgba(95,143,212,0.45); }
.creator-card-v2 .cc-status.unset,
.creator-card-v2 .cc-status.unemployed { background: #6c757d; }

/* 内容区 */
.creator-card-v2 .cc-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  z-index: 2;
}

.creator-card-v2 .cc-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-card-v2 .cc-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.creator-card-v2 .cc-name a:hover {
  color: #a5a6d6;
}

/* 徽章区域：强制单行左右排列 */
.creator-card-v2 .cc-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.creator-card-v2 .cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.creator-card-v2:hover .cc-badge {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.creator-card-v2 .cc-badge.experience {
  color: #b8b3e0;
  border-color: rgba(167,139,250,0.18);
  background: rgba(167,139,250,0.08);
}

/* 工作年限对应颜色 */
.creator-card-v2 .cc-badge.experience.exp-newbie { color: #adb5bd; border-color: rgba(156,163,175,0.22); background: rgba(156,163,175,0.1); }
.creator-card-v2 .cc-badge.experience.exp-junior { color: #86efac; border-color: rgba(134,239,172,0.22); background: rgba(134,239,172,0.1); }
.creator-card-v2 .cc-badge.experience.exp-mid { color: #5eead4; border-color: rgba(94,234,212,0.22); background: rgba(94,234,212,0.1); }
.creator-card-v2 .cc-badge.experience.exp-senior { color: #fcd34d; border-color: rgba(252,211,77,0.22); background: rgba(252,211,77,0.1); }
.creator-card-v2 .cc-badge.experience.exp-expert { color: #d8b4fe; border-color: rgba(216,180,254,0.22); background: rgba(216,180,254,0.1); }

.creator-card-v2 .cc-badge.employment {
  color: #fff;
}

.creator-card-v2 .cc-badge.employment.employed { background: rgba(92,182,127,0.12); border-color: rgba(92,182,127,0.22); color: #8dd9a8; }
.creator-card-v2 .cc-badge.employment.testing  { background: rgba(212,168,67,0.12); border-color: rgba(212,168,67,0.22); color: #e8cf7a; }
.creator-card-v2 .cc-badge.employment.freelance { background: rgba(95,143,212,0.12); border-color: rgba(95,143,212,0.22); color: #9fc3ec; }
.creator-card-v2 .cc-badge.employment.unemployed { background: rgba(108,117,125,0.12); border-color: rgba(108,117,125,0.22); color: #c8cdd1; }
.creator-card-v2 .cc-badge.employment.unset { background: rgba(108,117,125,0.1); border-color: rgba(108,117,125,0.18); color: #adb5bd; }

/* 箭头动作 */
.creator-card-v2 .cc-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  transition: all 0.35s ease;
  z-index: 2;
}

.creator-card-v2:hover .cc-arrow {
  background: var(--cc-primary);
  border-color: var(--cc-primary);
  color: #fff;
  transform: translateX(4px);
}

/* 主页优秀学员横向滑块中的卡片微调 */
.creator-section .creator-card-v2 {
  margin-bottom: 0;
}

/* 用户目录页网格适配 */
.creator-grid .col-lg-3,
.creator-grid .col-sm-6 {
  margin-bottom: 20px;
}

/* 响应式 */
@media (max-width: 767px) {
  .creator-card-v2 {
    padding: 14px;
    gap: 12px;
    border-radius: 16px;
  }
  .creator-card-v2::before {
    border-radius: 16px;
  }
  .creator-card-v2 .cc-avatar {
    width: 58px;
    height: 58px;
  }
  .creator-card-v2 .cc-name {
    font-size: 15px;
    margin-bottom: 8px;
  }
  .creator-card-v2 .cc-badge {
    font-size: 11px;
    padding: 4px 8px;
  }
  .creator-card-v2 .cc-arrow {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

@media (max-width: 575px) {
  .creator-card-v2 .cc-meta {
    gap: 6px;
  }
  .creator-card-v2 .cc-badge {
    font-size: 10px;
    padding: 4px 7px;
  }
}

/* =========================================================
 *  作品前台展示模板样式
 * ========================================================= */

/* ---------- 作品详情页 Hero ---------- */
.work-detail-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.work-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(8,8,16,0.95));
  z-index: 1;
}
.work-detail-hero .container-xxl {
  position: relative;
  z-index: 2;
}
.work-detail-hero h1 {
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.25;
  margin: 16px 0 20px;
}
.work-detail-categories {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.work-detail-cat-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(95, 58, 252, 0.15);
  border: 1px solid rgba(95, 58, 252, 0.3);
  color: #9078fc;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s ease;
}
.work-detail-cat-tag:hover {
  background: #5f3afc;
  border-color: #5f3afc;
  color: #fff;
}
.work-detail-featured {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6b6b, #ff8e53);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.work-detail-author-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.work-detail-author-avatar img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.15);
}
.work-detail-author-info {
  text-align: left;
}
.work-detail-author-name {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.work-detail-author-name:hover {
  color: #5f3afc;
}
.work-detail-date {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}
.work-detail-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.work-detail-actions .work-like,
.work-detail-actions .favorite-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all .3s ease;
}
.work-detail-actions .work-like:hover,
.work-detail-actions .favorite-btn:hover {
  background: rgba(95, 58, 252, 0.85);
  border-color: #5f3afc;
}
.work-detail-actions .work-like.liked {
  background: rgba(95, 58, 252, 0.85);
  border-color: #5f3afc;
}
.work-detail-actions .work-like.disabled,
.work-detail-actions .favorite-btn.disabled {
  cursor: not-allowed;
  opacity: .7;
}
.work-detail-edit-btn {
  padding: 10px 22px;
}

/* ---------- 信息栏 ---------- */
.work-detail-info-bar {
  background: #080810;
  padding: 60px 0;
}
.work-info-card {
  text-align: center;
  padding: 28px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  transition: all .35s ease;
  height: 100%;
}
.work-info-card:hover {
  background: rgba(95, 58, 252, 0.08);
  border-color: rgba(95, 58, 252, 0.2);
  transform: translateY(-4px);
}
.work-info-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(95, 58, 252, 0.12);
  color: #5f3afc;
  font-size: 22px;
  margin-bottom: 14px;
}
.work-info-card span {
  display: block;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  margin-bottom: 6px;
}
.work-info-card strong {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

/* ---------- 详情内容区 ---------- */
.work-detail-body {
  background: #0a0a0a;
}
.work-detail-body .container-xxl {
  max-width: 95vw;
  padding-left: 24px;
  padding-right: 24px;
}
.work-detail-main-row {
  align-items: flex-start;
}
.work-detail-flex-row {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}
.work-detail-left {
  flex: 1;
  max-width: 1500px;
  min-width: 0;
}
.work-detail-right {
  position: relative;
  width: 650px;
  flex-shrink: 0;
}
.work-detail-comments-sticky {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 6px;
}
.work-detail-comments-sticky::-webkit-scrollbar {
  width: 6px;
}
.work-detail-comments-sticky::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}
@media (max-width: 1199px) {
  .work-detail-flex-row {
    flex-direction: column;
    justify-content: flex-start;
  }
  .work-detail-right {
    width: 100%;
  }
  .work-detail-left {
    max-width: 100%;
  }
}
.work-detail-content {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.9;
}
.work-detail-content p {
  margin-bottom: 18px;
}
.work-detail-desc {
  max-width: 820px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
.work-detail-desc img {
  max-width: 100%;
  border-radius: 12px;
  margin: 16px 0;
}
.work-section-title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 28px;
  text-align: left;
}
.work-section-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(95, 58, 252, 0.12);
  color: #5f3afc;
  font-size: 18px;
  margin-right: 10px;
  vertical-align: middle;
}
.work-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1500px;
  margin: 0 auto;
}
.work-detail-gallery .work-detail-img-link {
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: #000;
}
.work-detail-gallery .work-detail-img-link img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .45s ease, filter .45s ease;
}
.work-detail-gallery .work-detail-img-link:hover img {
  transform: scale(1.01);
  filter: brightness(1.06);
}
.work-detail-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1500px;
  margin: 0 auto;
}
.work-detail-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.06);
}
.work-detail-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* ---------- 作者卡片 ---------- */
.work-author-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 24px;
}
.work-author-card-avatar {
  display: inline-block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  border: 2px solid rgba(95, 58, 252, 0.4);
}
.work-author-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-author-card h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.work-author-card h4 a {
  color: #fff;
  text-decoration: none;
}
.work-author-card h4 a:hover {
  color: #5f3afc;
}
.work-author-card p {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.work-author-fans {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin-bottom: 16px;
}
.work-author-fans span {
  color: #5f3afc;
  font-weight: 700;
}
.work-author-more h5 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}
.work-author-more ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.work-author-more li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color .3s ease;
}
.work-author-more li a:hover {
  color: #fff;
}
.work-author-more li:last-child a {
  border-bottom: none;
}
.work-author-more li img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.work-author-more li span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 相关作品 ---------- */
.work-related-section {
  padding: 80px 0;
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
  .work-detail-hero {
    min-height: 420px;
  }
  .work-detail-hero h1 {
    font-size: 32px;
  }
  .work-detail-info-bar {
    padding: 40px 0;
  }
}
@media (max-width: 767px) {
  .work-detail-hero {
    min-height: 360px;
  }
  .work-detail-hero h1 {
    font-size: 26px;
  }
  .work-detail-cat-tag {
    font-size: 12px;
    padding: 4px 12px;
  }
  .work-detail-actions .work-like,
  .work-detail-actions .favorite-btn,
  .work-detail-edit-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  .work-info-card {
    padding: 20px 12px;
  }
  .work-info-card i {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  .work-detail-media .work-detail-img-link img {
    height: auto;
  }
}

/* =========================================================
 *  作品列表/归档/分类卡片样式（archive + taxonomy 共用）
 * ========================================================= */
.work-archive-item {
  position: relative;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: all .4s ease-in-out;
}
.work-archive-item:hover {
  transform: translateY(-6px);
  border-color: rgba(95, 58, 252, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.work-archive-item .thumbnail {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.work-archive-item .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .4s ease-in-out;
}
.work-archive-item:hover .thumbnail img {
  transform: scale(1.05);
}
.work-archive-item .work-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(95, 58, 252, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s ease;
}
.work-archive-item .work-cat-badge:hover {
  background: #5f3afc;
}
.work-archive-item .work-featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6b6b, #ff8e53);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.work-archive-item .react-exp {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
}
.work-archive-item .work-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all .3s ease;
}
.work-archive-item .work-like:hover {
  background: rgba(95, 58, 252, 0.85);
}
.work-archive-item .work-like.liked {
  background: rgba(95, 58, 252, 0.85);
}
.work-archive-item .work-like .icon-like.liked,
.work-archive-item .work-like.liked .icon-like {
  color: #ff0000;
}
.work-archive-item .work-like.disabled {
  cursor: not-allowed;
  opacity: .7;
}
.work-card-content {
  padding: 18px;
}
.work-card-content h4 {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
}
.work-card-content h4 a {
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}
.work-card-content h4 a:hover {
  color: #5f3afc;
}
.work-card-meta {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
.work-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.work-author img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.work-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.work-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.work-stats-row {
  display: flex;
  gap: 14px;
}
.work-stats-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.work-empty-state {
  color: rgba(255, 255, 255, 0.6);
  padding: 60px 0;
}
.work-empty-state h4 {
  color: #fff;
  margin-bottom: 8px;
}
.work-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  transition: all .3s ease;
}
.work-pagination .page-numbers.current,
.work-pagination .page-numbers:hover {
  background: #5f3afc;
  color: #fff;
}

@media (max-width: 767px) {
  .work-card-content h4 {
    font-size: 15px;
  }
  .work-author img {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================
 * 作品分类瀑布流 + 骨架屏
 * ============================================================ */

/* 骨架屏容器 */
.skeleton-img-wrap {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.skeleton-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.6s infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* 懒加载图片状态 */
.lazyload,
.lazyloading {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lazyloaded {
  opacity: 1;
}

/* 图片加载完成后移除骨架效果 */
.skeleton-img-wrap img.lazyloaded {
  position: relative;
  z-index: 2;
}

.skeleton-img-wrap:has(img.lazyloaded)::before,
.skeleton-img-wrap.loaded::before {
  display: none;
}

.skeleton-img-wrap:has(img.lazyloaded),
.skeleton-img-wrap.loaded {
  min-height: 0 !important;
  background: transparent;
}

/* 瀑布流容器与条目 */
#masonry-grid {
  position: relative;
}

#masonry-grid .masonry-item {
  position: absolute !important;
  float: none !important;
}

/* 瀑布流中的作品卡片：取消固定比例，让图片自然高度 */
#masonry-grid .work-archive-item .thumbnail {
  aspect-ratio: auto;
  min-height: 180px;
}

#masonry-grid .work-archive-item .thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

/* 瀑布流中卡片悬浮效果 */
#masonry-grid .work-archive-item:hover {
  transform: translateY(-6px);
  border-color: rgba(95, 58, 252, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* 加载提示 */
#load-status .loading-text,
#no-more p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* 瀑布流窄列下卡片内容适配 */
@media (min-width: 992px) {
  #masonry-grid .work-archive-item .work-card-content {
    padding: 12px;
  }
  #masonry-grid .work-archive-item .work-card-content h4 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  #masonry-grid .work-archive-item .work-card-meta {
    font-size: 12px;
  }
  #masonry-grid .work-archive-item .work-author {
    margin-bottom: 8px;
  }
  #masonry-grid .work-archive-item .work-author img {
    width: 22px;
    height: 22px;
  }
  #masonry-grid .work-archive-item .work-meta-row,
  #masonry-grid .work-archive-item .work-stats-row {
    gap: 8px;
    margin-bottom: 8px;
  }
}

@media (max-width: 991px) {
  #masonry-grid .work-archive-item .thumbnail {
    min-height: 220px;
  }
}

/* ============================================================
 * 首页作品展示：横向滚动瀑布流
 * ============================================================ */
.home-works-scroll-outer {
  position: relative;
  z-index: 2;
}

.home-works-scroll {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  height: 1320px;
  overflow-x: auto;
  overflow-y: hidden;
  align-content: flex-start;
  align-items: stretch;
  padding: 0 40px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 58, 252, 0.6) rgba(255, 255, 255, 0.05);
}

.home-works-scroll::-webkit-scrollbar {
  height: 8px;
}

.home-works-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.home-works-scroll::-webkit-scrollbar-thumb {
  background: rgba(95, 58, 252, 0.6);
  border-radius: 4px;
}

.home-works-scroll::-webkit-scrollbar-thumb:hover {
  background: #5f3afc;
}

.home-work-scroll-item {
  width: 300px;
  flex: 0 0 auto;
  display: flex;
  margin-bottom: 0;
}

.home-work-scroll-item .work-archive-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  transition: transform .4s ease-in-out, border-color .4s ease-in-out, box-shadow .4s ease-in-out;
}

/* 平衡计算时禁用过渡，避免读到中间态高度 */
.home-works-scroll.is-balancing .home-work-scroll-item .work-archive-item,
.home-works-scroll.is-balancing .home-work-scroll-item .work-archive-item .thumbnail,
.home-works-scroll.is-balancing .home-work-scroll-item .work-archive-item .thumbnail img {
  transition: none !important;
}

.home-work-scroll-item .work-archive-item .thumbnail {
  flex: 0 0 auto;
  aspect-ratio: auto;
  position: relative;
  overflow: hidden;
}

.home-work-scroll-item .work-archive-item .work-card-admin-bar,
.home-work-scroll-item .work-archive-item .work-card-content {
  flex: 0 0 auto;
}

/* 首页横向滚动卡片按参考图比例区分尺寸
   4 行总高约 1260px（去间隙/内边距后），目标让每列尽量装 3~4 张卡片 */
.home-work-scroll-item .work-archive-item.thumbnail-ratio-landscape .thumbnail {
  height: 180px;
}
.home-work-scroll-item .work-archive-item.thumbnail-ratio-square .thumbnail {
  height: 230px;
}
.home-work-scroll-item .work-archive-item.thumbnail-ratio-portrait .thumbnail {
  height: 280px;
}

.home-work-scroll-item .work-archive-item .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

@media (max-width: 1199px) {
  .home-work-scroll-item .work-archive-item.thumbnail-ratio-landscape .thumbnail {
    height: 150px;
  }
  .home-work-scroll-item .work-archive-item.thumbnail-ratio-square .thumbnail {
    height: 190px;
  }
  .home-work-scroll-item .work-archive-item.thumbnail-ratio-portrait .thumbnail {
    height: 230px;
  }
}

@media (max-width: 767px) {
  .home-work-scroll-item .work-archive-item.thumbnail-ratio-landscape .thumbnail {
    height: 130px;
  }
  .home-work-scroll-item .work-archive-item.thumbnail-ratio-square .thumbnail {
    height: 160px;
  }
  .home-work-scroll-item .work-archive-item.thumbnail-ratio-portrait .thumbnail {
    height: 200px;
  }
}

.home-work-scroll-empty {
  width: 100%;
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.7);
}

.home-work-scroll-empty h4 {
  color: #fff;
  margin-bottom: 10px;
}

/* 首页横向滚动卡片内容适配 */
.home-works-scroll .work-archive-item .work-card-content {
  padding: 16px;
}

.home-works-scroll .work-archive-item .work-card-content h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

.home-works-scroll .work-archive-item .work-card-meta {
  font-size: 12px;
}

.home-works-scroll .work-archive-item .work-author {
  margin-bottom: 8px;
}

.home-works-scroll .work-archive-item .work-author img {
  width: 22px;
  height: 22px;
}

.home-works-scroll .work-archive-item .work-meta-row,
.home-works-scroll .work-archive-item .work-stats-row {
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 1199px) {
  .home-works-scroll {
    height: 1120px;
    gap: 16px;
    padding: 0 30px 18px;
  }
  .home-work-scroll-item {
    width: 260px;
  }
}

@media (max-width: 767px) {
  .home-works-scroll {
    height: 880px;
    gap: 12px;
    padding: 0 16px 14px;
  }
  .home-work-scroll-item {
    width: 200px;
  }
  .home-works-scroll .work-archive-item .work-card-content {
    padding: 12px;
  }
  .home-works-scroll .work-archive-item .work-card-content h4 {
    font-size: 13px;
  }
}

/* ============================================================
 * 作品分类页：通栏 banner、面包屑与宽屏布局
 * ============================================================ */

.work-category-banner {
  position: relative;
  padding: 70px 0 60px;
  background: linear-gradient(135deg, rgba(20, 18, 38, 0.98) 0%, rgba(35, 30, 70, 0.95) 50%, rgba(20, 18, 38, 0.98) 100%),
              url('../img/bg/breadcrumb-bg.jpg') center/cover no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.work-category-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(95, 58, 252, 0.12) 0%, transparent 45%),
              radial-gradient(circle at 80% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.work-banner-inner {
  position: relative;
  z-index: 2;
  padding-left: 4%;
  padding-right: 4%;
  text-align: center;
}

/* 自定义 Banner 背景图（在个人资料设置页上传） */
.custom-banner-bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  z-index: 0;
}

/* 视差 Banner：背景图需要比容器稍高，避免滚动时露边 */
.has-parallax-banner .custom-banner-bg {
  height: 140%;
  top: -20%;
  will-change: transform;
}

.custom-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
  pointer-events: none;
}

.work-banner-inner .row {
  justify-content: center;
}

.work-banner-inner .col-lg-8 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.work-breadcrumb {
  margin-bottom: 18px;
}

.work-breadcrumb .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent;
  font-size: 13px;
}

.work-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: rgba(255, 255, 255, 0.25);
  padding-right: 8px;
}

.work-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s ease;
}

.work-breadcrumb .breadcrumb-item a:hover {
  color: #5f3afc;
}

.work-breadcrumb .breadcrumb-item.active {
  color: #fff;
  font-weight: 500;
}

.work-parent-cat {
  display: inline-block;
  color: #5f3afc;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 5px 12px;
  background: rgba(95, 58, 252, 0.12);
  border: 1px solid rgba(95, 58, 252, 0.25);
  border-radius: 20px;
}

.work-cat-title {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.15;
}

.work-cat-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  max-width: 600px;
  margin: 0 auto 18px;
  line-height: 1.7;
}

.work-cat-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
}

/* 宽屏作品列表容器 */
.work-category-wide {
  padding-top: 50px;
  padding-bottom: 80px;
}

.work-grid-outer {
  padding-left: 150px;
  padding-right: 150px;
}

@media (min-width: 1921px) {
  .work-grid-outer {
    padding-left: 300px;
    padding-right: 300px;
  }
}

@media (max-width: 1199px) {
  .work-grid-outer {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (max-width: 767px) {
  .work-category-banner {
    padding: 50px 0 40px;
  }
  .work-banner-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .work-cat-title {
    font-size: 30px;
  }
  .work-grid-outer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
 * 课程分类页：通栏 banner、面包屑与课程卡片网格
 * ============================================================ */

.course-category-banner {
  position: relative;
  padding: 80px 0 65px;
  background: linear-gradient(135deg, rgba(16, 24, 32, 0.98) 0%, rgba(28, 36, 56, 0.95) 50%, rgba(16, 24, 32, 0.98) 100%),
              url('../img/bg/breadcrumb-bg.jpg') center/cover no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.course-category-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 50%, rgba(95, 58, 252, 0.12) 0%, transparent 45%),
              radial-gradient(circle at 75% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.course-banner-inner {
  position: relative;
  z-index: 2;
  padding-left: 4%;
  padding-right: 4%;
  text-align: center;
}

.course-banner-inner .row {
  justify-content: center;
}

.course-banner-inner .col-lg-8 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.course-breadcrumb {
  margin-bottom: 18px;
}

.course-breadcrumb .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent;
  font-size: 13px;
}

.course-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: rgba(255, 255, 255, 0.25);
  padding-right: 8px;
}

.course-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s ease;
}

.course-breadcrumb .breadcrumb-item a:hover {
  color: #5f3afc;
}

.course-breadcrumb .breadcrumb-item.active {
  color: #fff;
  font-weight: 500;
}

/* 文章分类/详情页面包屑，与作品、课程分类页保持一致 */
.post-category-breadcrumb,
.post-detail-breadcrumb {
  margin-bottom: 18px;
}

.post-category-breadcrumb .breadcrumb,
.post-detail-breadcrumb .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent;
  font-size: 13px;
}

.post-category-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.post-detail-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: rgba(255, 255, 255, 0.25);
  padding-right: 8px;
}

.post-category-breadcrumb .breadcrumb-item a,
.post-detail-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s ease;
}

.post-category-breadcrumb .breadcrumb-item a:hover,
.post-detail-breadcrumb .breadcrumb-item a:hover {
  color: #5f3afc;
}

.post-category-breadcrumb .breadcrumb-item.active,
.post-detail-breadcrumb .breadcrumb-item.active {
  color: #fff;
  font-weight: 500;
}

.course-parent-cat {
  display: inline-block;
  color: #5f3afc;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 5px 12px;
  background: rgba(95, 58, 252, 0.12);
  border: 1px solid rgba(95, 58, 252, 0.25);
  border-radius: 20px;
}

.course-cat-title {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.15;
}

.course-cat-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  max-width: 620px;
  margin: 0 auto 18px;
  line-height: 1.7;
}

.course-cat-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
}

.course-category-section {
  padding-top: 60px;
  padding-bottom: 90px;
}

.course-grid-row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}

.course-grid-col {
  margin-bottom: 16px;
}

/* 课程卡片 */
.course-archive-card {
  height: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.course-archive-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  border-color: rgba(95, 58, 252, 0.35);
}

.course-card-thumbnail {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.course-card-thumbnail > a:not(.course-card-cat-badge) {
  display: block;
  width: 100%;
  height: 100%;
}

.course-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.course-archive-card:hover .course-card-thumbnail img {
  transform: scale(1.08);
}

/* 课程倒计时徽章 */
.course-countdown {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-block;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 10px 18px;
  text-align: center;
  white-space: nowrap;
}

.course-countdown .timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
}

.course-countdown .countdown-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
}

.course-countdown .countdown-numbers {
  font-size: 17px;
  font-weight: 700;
}

.course-countdown .countdown-numbers .days,
.course-countdown .countdown-numbers .hours,
.course-countdown .countdown-numbers .minutes,
.course-countdown .countdown-numbers .seconds {
  color: #5f3afc;
  margin: 0 2px;
}

.course-countdown .countdown-numbers em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  margin-right: 5px;
  font-size: 13px;
}

.course-card-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.course-archive-card:hover .course-card-body {
  opacity: 1;
  pointer-events: auto;
}

.course-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
  text-align: center;
}

.course-card-title a {
  color: #fff;
  transition: color 0.25s ease;
}

.course-card-title a:hover {
  color: #5f3afc;
}

.course-card-excerpt {
  display: none;
}

.course-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 7px;
  background: #5f3afc;
  border: 1px solid #5f3afc;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.course-card-btn:hover {
  background: #4c2fd9;
  border-color: #4c2fd9;
  color: #fff;
}

.course-card-btn i {
  font-size: 12px;
  transition: transform 0.25s ease;
}

.course-card-btn:hover i {
  transform: translateX(3px);
}

/* 空状态 */
.course-empty-state {
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.5);
}

.course-empty-state i {
  color: rgba(255, 255, 255, 0.2);
}

.course-empty-state h4 {
  color: #fff;
  margin-bottom: 8px;
}

/* 课程列表容器：左右 240px 边距，超大屏 300px */
.course-grid-outer {
  padding-left: 240px;
  padding-right: 240px;
}

/* 分页 - 高级样式 */
.course-pagination {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.course-pagination .screen-reader-text {
  display: none;
}

.course-pagination .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.course-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-pagination .page-numbers:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateY(-2px);
}

.course-pagination .page-numbers.current {
  background: linear-gradient(135deg, #5f3afc 0%, #4c2fd9 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(95, 58, 252, 0.35);
}

.course-pagination .page-numbers.prev,
.course-pagination .page-numbers.next {
  padding: 0 18px;
  gap: 8px;
  font-weight: 500;
}

.course-pagination .page-numbers.prev i,
.course-pagination .page-numbers.next i {
  font-size: 12px;
  transition: transform 0.25s ease;
}

.course-pagination .page-numbers.prev:hover i {
  transform: translateX(-3px);
}

.course-pagination .page-numbers.next:hover i {
  transform: translateX(3px);
}

.course-pagination .page-numbers.prev.disabled,
.course-pagination .page-numbers.next.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.course-pagination .page-numbers.prev.disabled:hover,
.course-pagination .page-numbers.next.disabled:hover {
  background: transparent;
  transform: none;
}

.course-pagination .page-numbers.dots {
  min-width: auto;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.35);
  cursor: default;
}

.course-pagination .page-numbers.dots:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  transform: none;
}

/* NFT 分页统一为 course-pagination 风格 */
.nft-pagination {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.nft-pagination ul {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  list-style: none;
  margin: 0;
}

.nft-pagination ul li {
  display: inline-flex;
  margin: 0;
}

.nft-pagination ul li a,
.nft-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  width: auto;
}

.nft-pagination ul li a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateY(-2px);
}

.nft-pagination ul li.active span {
  background: linear-gradient(135deg, #5f3afc 0%, #4c2fd9 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(95, 58, 252, 0.35);
}

.nft-pagination ul li.disabled span {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
}

.nft-pagination ul li:not(.active):not(.disabled) span {
  min-width: auto;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.35);
  cursor: default;
  background: transparent;
}

.nft-pagination ul li:first-child a,
.nft-pagination ul li:first-child span,
.nft-pagination ul li:last-child a,
.nft-pagination ul li:last-child span {
  padding: 0 18px;
}

.nft-pagination ul li:first-child i,
.nft-pagination ul li:last-child i {
  font-size: 12px;
  transition: transform 0.25s ease;
}

.nft-pagination ul li:first-child a:hover i,
.nft-pagination ul li:first-child span:hover i {
  transform: translateX(-3px);
}

.nft-pagination ul li:last-child a:hover i,
.nft-pagination ul li:last-child span:hover i {
  transform: translateX(3px);
}

/* 分类筛选标签 */
.course-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}

.course-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.25s ease;
}

.course-filter-pill:hover {
  background: rgba(95, 58, 252, 0.15);
  border-color: rgba(95, 58, 252, 0.4);
  color: #fff;
}

.course-filter-pill.active {
  background: rgba(95, 58, 252, 0.2);
  border-color: rgba(95, 58, 252, 0.5);
  color: #5f3afc;
}

.course-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
}

.course-filter-pill.active .course-filter-count {
  background: rgba(95, 58, 252, 0.25);
  color: #5f3afc;
}

/* 课程卡片分类角标 */
.course-card-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(95, 58, 252, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.course-card-cat-badge:hover {
  background: #5f3afc;
  color: #fff;
}

@media (min-width: 1920px) {
  .course-grid-outer {
    padding-left: 300px;
    padding-right: 300px;
  }
}

@media (max-width: 1199px) {
  .course-cat-title {
    font-size: 38px;
  }
  .course-grid-outer {
    padding-left: 140px;
    padding-right: 140px;
  }
}

@media (max-width: 767px) {
  .course-category-banner {
    padding: 55px 0 45px;
  }
  .course-banner-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .course-cat-title {
    font-size: 30px;
  }
  .course-cat-desc {
    font-size: 14px;
  }
  .course-category-section {
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .course-card-thumbnail {
    aspect-ratio: 1 / 1;
  }
  .course-card-cat-badge {
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 4px;
  }
  .course-card-body {
    padding: 14px;
  }
  .course-card-title {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .course-card-excerpt {
    display: none;
  }
  .course-card-btn {
    padding: 7px 12px;
    font-size: 11px;
  }
  .course-countdown {
    padding: 8px 14px;
    bottom: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 8px;
  }
  .course-countdown .countdown-numbers {
    font-size: 15px;
  }
  .course-countdown .countdown-numbers em {
    font-size: 12px;
  }
  .course-countdown .countdown-label {
    font-size: 12px;
  }
  .course-pagination,
  .nft-pagination {
    margin-top: 35px;
  }
  .course-pagination .nav-links,
  .nft-pagination ul {
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
  }
  .course-pagination .page-numbers,
  .nft-pagination ul li a,
  .nft-pagination ul li span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
  }
  .course-pagination .page-numbers.prev,
  .course-pagination .page-numbers.next,
  .nft-pagination ul li:first-child a,
  .nft-pagination ul li:first-child span,
  .nft-pagination ul li:last-child a,
  .nft-pagination ul li:last-child span {
    padding: 0 12px;
  }
  .course-grid-outer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
 * 作品详情页：评论与作者卡片高级样式
 * ============================================================ */
.work-detail-comments-section {
  background: #07070a;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* 作者卡片增强 */
.work-author-card {
  position: sticky;
  top: 100px;
  background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.work-author-card-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  border: 3px solid rgba(95, 58, 252, 0.35);
  box-shadow: 0 0 0 4px rgba(95, 58, 252, 0.08);
}
.work-author-card h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.work-author-card .work-author-bio {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 12px;
}
.work-author-card .work-author-fans {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 评论区域 */
.work-comments-wrap {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 32px;
}
.work-comments-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.work-comments-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.work-comments-title i {
  color: #5f3afc;
  margin-right: 8px;
}
.work-comments-title span {
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.work-comments-tip {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  margin: 0;
}
.work-comments-tip i {
  color: #5f3afc;
  margin-right: 6px;
}
.work-comments-empty {
  text-align: center;
  padding: 50px 20px;
  color: rgba(255,255,255,0.35);
}
.work-comments-empty i {
  font-size: 42px;
  margin-bottom: 14px;
  display: block;
}
.work-comments-empty p {
  margin: 0;
  font-size: 14px;
}

/* 评论列表 */
.work-comments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.work-comments-list .single-comment {
  margin-bottom: 0;
}
.work-comments-list > .single-comment {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 24px 0;
}
.work-comments-list > .single-comment:last-child {
  border-bottom: none;
}
.work-comments-list .comment-wrapper {
  display: flex;
  gap: 16px;
}
.work-comments-list .comment-wrapper .thum {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(95, 58, 252, 0.25);
}
.work-comments-list .comment-wrapper .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-comments-list .comment-wrapper .content {
  flex: 1;
  min-width: 0;
}
.work-comments-list .comment-header {
  margin-bottom: 8px;
}
.work-comments-list .comment-header .comment-meta-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 4px;
}
.work-comments-list .comment-header h4 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.work-comments-list .comment-header h4 a {
  color: #fff;
  text-decoration: none;
}
.work-comments-list .comment-header .floor {
  color: #5f3afc;
  font-size: 12px;
  font-weight: 600;
}
.work-comments-list .comment-header .date {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}
.work-comments-list .comment-header .reply-to {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.work-comments-list .comment-header .reply-to .reply-to-text {
  color: rgba(255,255,255,0.45);
}
.work-comments-list .comment-header .reply-to .reply-to-author {
  color: #5f3afc;
  font-weight: 500;
  text-decoration: none;
}
.work-comments-list .comment-header .reply-to .reply-to-author:hover {
  text-decoration: underline;
}
.work-comments-list .comment-text {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.75;
  word-break: break-word;
}
.work-comments-list .comment-text p {
  margin-bottom: 8px;
}
.work-comments-list .comment-text p:last-child {
  margin-bottom: 0;
}
.work-comments-list .comment-moderation {
  display: inline-block;
  color: #f0ad4e;
  font-size: 12px;
  margin-bottom: 8px;
}
.work-comments-list .comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}
.work-comments-list .comment-actions a {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  text-decoration: none;
  transition: color .25s ease;
}
.work-comments-list .comment-actions a:hover {
  color: #5f3afc;
}
/* B站风格楼中楼：统一左侧缩进，细边线，扁平化列表 */
.work-comments-list .comment-reply {
  list-style: none;
  margin: 12px 0 0 52px;
  padding: 0 0 0 16px;
  border-left: 2px solid rgba(95, 58, 252, 0.12);
}
.work-comments-list .comment-reply .single-comment {
  margin-left: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.work-comments-list .comment-reply .single-comment:last-child {
  border-bottom: none;
}
.work-comments-list .comment-reply .comment-wrapper .thum {
  width: 36px;
  height: 36px;
}
.work-comments-list .comment-reply .comment-text {
  font-size: 14px;
}

/* 评论分页 */
.work-comments-pagination {
  margin-top: 30px;
}

/* 评论表单 */
.work-comments-form-row {
  width: 100%;
  margin: 0 0 36px 0;
  padding: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.work-comments-form-row .work-comments-form {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.work-comments-form .comment-reply-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}
.work-comment-close-x {
  position: absolute;
  top: -16px;
  right: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
  z-index: 2;
}
.work-comment-close-x:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
#respond,
.comment-respond {
  position: relative;
}
.work-comments-form .comment-reply-title small {
  margin-left: 12px;
}
.work-comments-form .comment-reply-title small a {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  text-decoration: none;
}
.work-comments-form .logged-in-as {
  width: 100%;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  margin-bottom: 16px;
}
.work-comments-form .logged-in-as a {
  color: #5f3afc;
  text-decoration: none;
}
.work-comment-reply-info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(95, 58, 252, 0.08);
  border: 1px solid rgba(95, 58, 252, 0.2);
  border-radius: 12px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}
.work-comment-reply-info i.bi-reply-fill {
  color: #5f3afc;
}
.work-comment-reply-info .reply-target a {
  color: #5f3afc;
  font-weight: 600;
  text-decoration: none;
}
.work-comment-reply-info .cancel-reply-link {
  margin-left: auto;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .2s ease;
}
.work-comment-reply-info .cancel-reply-link:hover {
  color: #dc3545;
}
.work-comment-textarea-wrap {
  width: 100%;
}
.work-comment-textarea-wrap textarea,
.work-comment-field input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: #fff;
  padding: 16px 20px;
  font-size: 15px;
  transition: border-color .25s ease, background .25s ease;
}
.work-comment-textarea-wrap textarea::placeholder,
.work-comment-field input::placeholder {
  color: rgba(255,255,255,0.35);
}
.work-comment-textarea-wrap textarea:focus,
.work-comment-field input:focus {
  outline: none;
  background: rgba(255,255,255,0.06);
  border-color: rgba(95, 58, 252, 0.5);
}
.work-comment-textarea-wrap textarea {
  min-height: 140px;
  resize: vertical;
}
.work-comments-form .comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.work-comments-form .comment-form-comment,
.work-comments-form .comment-form-author,
.work-comments-form .comment-form-email,
.work-comments-form .form-submit {
  width: 100%;
}
.work-comments-form .comment-form-author,
.work-comments-form .comment-form-email {
  width: 100%;
}
.work-comment-field {
  margin-bottom: 0;
}
.work-comment-field input {
  width: 100%;
}
.work-comment-submit {
  margin-top: 8px;
  padding: 12px 32px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}
.work-comment-policy {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  margin-top: 14px;
  margin-bottom: 0;
}
.work-comment-policy i {
  color: #5f3afc;
  margin-right: 6px;
}

/* 前端验证提示 */
.work-comment-error {
  width: 100%;
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #ff6b7a;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  margin: 0 0 16px 0;
  display: none;
}
.work-comment-error.show {
  display: block;
}
.work-comment-error i {
  margin-right: 6px;
}
.work-comment-textarea-wrap textarea.is-invalid {
  border-color: rgba(220, 53, 69, 0.6);
  background: rgba(220, 53, 69, 0.05);
}

/* 回复目标评论高亮 */
.work-comments-list .single-comment.is-reply-target {
  animation: replyTargetPulse 1.6s ease-out;
}

@keyframes replyTargetPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(95, 58, 252, 0.35);
    background: rgba(95, 58, 252, 0.06);
  }
  40% {
    box-shadow: 0 0 0 5px rgba(95, 58, 252, 0);
    background: rgba(95, 58, 252, 0.06);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(95, 58, 252, 0);
    background: transparent;
  }
}

/* 隐藏 WordPress 原生取消回复链接，使用自定义取消按钮 */
.work-comments-form .comment-reply-title small {
  display: none;
}

/* 内联回复表单：位于目标评论下方 */
.single-comment > .work-comments-form-row {
  margin: 16px 0 12px 0;
}
.comment-reply > .single-comment > .work-comments-form-row {
  margin: 14px 0 10px 0;
  padding: 24px;
  border-radius: 16px;
}
.work-comments-form-placeholder {
  display: none;
}

/* AJAX 操作提示 */
.work-comment-notice {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  margin: 0 0 20px 0;
  animation: noticeSlideIn 0.3s ease;
}
.work-comment-notice--success {
  background: rgba(40, 167, 69, 0.12);
  border: 1px solid rgba(40, 167, 69, 0.25);
  color: #5dd879;
}
.work-comment-notice--error {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: #ff6b7a;
}
@keyframes noticeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式 */
@media (max-width: 991px) {
  .work-author-card {
    position: static;
    margin-bottom: 30px;
  }
  .work-comments-wrap {
    padding: 24px;
  }
  .work-comments-form-row {
    padding: 24px;
    margin-bottom: 28px;
  }
  .work-detail-gallery {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .work-comments-wrap {
    padding: 20px;
  }
  .work-comments-form-row {
    padding: 20px;
    margin-bottom: 24px;
  }
  .work-comments-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .work-comments-form .comment-form-author,
  .work-comments-form .comment-form-email {
    width: 100%;
    margin-right: 0;
    display: block;
  }
  .work-comments-list .comment-reply {
    margin-left: 44px;
    padding-left: 12px;
  }
  .work-comments-list .comment-reply .comment-wrapper .thum {
    width: 32px;
    height: 32px;
  }
}

/* ============================================================
 * 首页作品展示区域：与优秀学员背景做视觉分割
 * ============================================================ */
.home-works-section {
  position: relative;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* 顶部微弱渐变，柔化与优秀学员区域的分界 */
.home-works-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.6) 0%, rgba(13, 13, 13, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.home-works-section .container-xxl {
  position: relative;
  z-index: 2;
}

/* ============================================================
 * 作者页 / 个人主页
 * ============================================================ */
.author-page-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 120px;
  min-height: 420px;
  overflow: hidden;
}

/* 个人主页 banner：加深遮罩 + 底部向内容区自然过渡 */
.author-page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 65%, #111 100%);
  pointer-events: none;
  z-index: 1;
}

.author-page-banner .custom-banner-overlay {
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 1199px) {
  .author-page-banner {
    padding: 110px 0 90px;
    min-height: 340px;
  }
}

@media (max-width: 767px) {
  .author-page-banner {
    padding: 80px 0 60px;
    min-height: 260px;
  }
}

/* 发布页 / 编辑页 banner 上的面包屑 */
.posting-page-banner .banner-breadcrumb-content,
.posting-edit-page-banner .banner-breadcrumb-content {
  position: relative;
  z-index: 2;
  padding: 30px 0;
}

.posting-page-banner .banner-breadcrumb-content h2,
.posting-edit-page-banner .banner-breadcrumb-content h2 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.posting-page-banner .banner-breadcrumb-content ul li,
.posting-edit-page-banner .banner-breadcrumb-content ul li,
.posting-page-banner .banner-breadcrumb-content ul li a,
.posting-edit-page-banner .banner-breadcrumb-content ul li a {
  color: rgba(255, 255, 255, 0.85);
}

/* 个人资料设置页 banner */
.profile-settings-banner {
  padding: 70px 0 60px;
}

.profile-settings-banner .banner-breadcrumb-content {
  position: relative;
  z-index: 2;
  padding: 30px 0;
}

.profile-settings-banner .banner-breadcrumb-content h2 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.profile-settings-banner .banner-breadcrumb-content ul li,
.profile-settings-banner .banner-breadcrumb-content ul li a {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
 * 个人资料设置：头像上传
 * ============================================================ */
.avatar-preview-container {
  display: inline-block;
  margin-bottom: 20px;
}

.avatar-upload-trigger {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.avatar-upload-trigger:hover {
  border-color: rgba(95, 58, 252, 0.8);
  box-shadow: 0 0 0 4px rgba(95, 58, 252, 0.15);
}

.avatar-upload-trigger.has-avatar {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.12);
}

.avatar-upload-trigger.no-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-upload-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-upload-trigger.no-avatar img {
  display: none;
}

.avatar-upload-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.avatar-upload-trigger.no-avatar .avatar-upload-overlay {
  opacity: 1;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.avatar-upload-trigger:hover .avatar-upload-overlay {
  opacity: 1;
}

.avatar-upload-overlay i {
  font-size: 32px;
  margin-bottom: 8px;
}

.avatar-upload-overlay span {
  font-size: 14px;
}

.avatar-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

/* 侧边栏卡片 */
.author-sidebar-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

.author-sidebar-card .author-avatar {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
}

.author-sidebar-card .author-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(95, 58, 252, 0.35);
}

.author-status-dot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  background: #6c757d;
}

.author-status-dot.employed {
  background: #5cb67f;
  -webkit-box-shadow: 0 0 8px rgba(92, 182, 127, 0.5);
  box-shadow: 0 0 8px rgba(92, 182, 127, 0.5);
}

.author-status-dot.testing {
  background: #d4a843;
}

.author-status-dot.freelance {
  background: #5f8fd4;
}

.author-status-dot.unemployed,
.author-status-dot.unset {
  background: #6c757d;
}

.author-name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.author-badges {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.author-bio {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: left;
  white-space: pre-line;
}

/* 统计 */
.author-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.author-stat-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 8px;
}

.author-stat-item .stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.author-stat-item .stat-label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* 操作按钮 */
.author-actions .button-1 {
  margin-bottom: 14px;
}

.author-actions .button-1:last-child {
  margin-bottom: 0;
}

.author-own-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.author-own-links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-decoration: none;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.author-own-links a:hover {
  color: #fff;
  background: rgba(95, 58, 252, 0.15);
}

/* 分类筛选栏 */
.author-filter-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.author-filter-bar .button-1 {
  font-size: 14px;
  padding: 8px 18px;
}

.author-filter-bar .button-1.active {
  background: #5f3afc;
  border-color: #5f3afc;
}

/* 卡片管理条 */
.work-card-admin-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.work-card-admin-bar .btn-edit,
.work-card-admin-bar .btn-delete {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
}

.work-card-admin-bar .btn-edit {
  background: rgba(95, 58, 252, 0.85);
}

.work-card-admin-bar .btn-edit:hover {
  background: #5f3afc;
}

.work-card-admin-bar .btn-delete {
  background: rgba(220, 53, 69, 0.85);
}

.work-card-admin-bar .btn-delete:hover {
  background: #dc3545;
}

.work-status-badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
  margin-right: auto;
}

.work-status-badge.status-pending {
  background: #ff9800;
}

.work-status-badge.status-draft {
  background: #6c757d;
}

.work-status-badge.status-future {
  background: #17a2b8;
}

.work-status-badge.status-publish {
  background: #5cb67f;
}

.work-status-badge.status-rejected {
  background: #dc3545;
}

/* 响应式 */
@media (max-width: 1199px) {
  .author-sidebar-card {
    top: 90px;
  }
}

@media (max-width: 991px) {
  .author-sidebar-col {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .author-sidebar-card {
    position: static;
    margin-bottom: 30px;
  }
  .author-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .author-page-banner {
    padding: 50px 0 40px;
  }
  .author-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .author-filter-bar .button-1 {
    font-size: 13px;
    padding: 6px 12px;
  }
}

/* ============================================================
 * 我的关注页面：用户卡片与交互
 * ============================================================ */
.my-follows-banner {
  padding: 70px 0 60px;
}

.user-follow-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 24px 18px;
  text-align: center;
  height: 100%;
  -webkit-transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease;
  transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease;
  -o-transition: transform .25s ease, box-shadow .25s ease;
  transition: transform .25s ease, box-shadow .25s ease;
  transition: transform .25s ease, box-shadow .25s ease, -webkit-transform .25s ease, -webkit-box-shadow .25s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.user-follow-card:hover {
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.user-follow-avatar {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(95, 58, 252, 0.35);
  -webkit-transition: border-color .25s ease;
  -o-transition: border-color .25s ease;
  transition: border-color .25s ease;
}

.user-follow-avatar:hover {
  border-color: rgba(95, 58, 252, 0.7);
}

.user-follow-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.user-follow-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.user-follow-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.user-follow-name a {
  color: #fff;
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

.user-follow-name a:hover {
  color: #5f3afc;
}

.user-follow-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.user-follow-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.user-follow-stats i {
  color: #5f3afc;
  margin-right: 4px;
}

.btn-follow-action {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  background: #5f3afc;
  cursor: pointer;
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.btn-follow-action:hover {
  background: #4a2be0;
  color: #fff;
  text-decoration: none;
}

.btn-follow-action.is-followed {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.btn-follow-action.is-followed:hover {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.35);
  color: #dc3545;
}

.btn-follow-action:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.empty-follows-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 60px 30px;
  max-width: 480px;
  margin: 0 auto;
}

.empty-follows-card > i {
  font-size: 48px;
  color: #5f3afc;
  margin-bottom: 16px;
  display: block;
}

.empty-follows-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.empty-follows-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}

/* 首页 Banner 图片背景 */
.banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}

.empty-follows-card .btn-follow-action {
  width: auto;
  min-width: 160px;
}

/* 响应式 */
@media (max-width: 767px) {
  .my-follows-banner {
    padding: 50px 0 40px;
  }
  .user-follow-card {
    padding: 20px 14px;
  }
  .user-follow-avatar {
    width: 80px;
    height: 80px;
  }
  .user-follow-name {
    font-size: 16px;
  }
  .user-follow-desc {
    font-size: 12px;
  }
  .user-follow-stats {
    font-size: 12px;
    gap: 12px;
  }
}

/* ============================================================
 * 商务合作 / 课程咨询 表单
 * ============================================================ */
.business-contact-area {
  background: #090909;
  position: relative;
  overflow: hidden;
}

.business-contact-area::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(95, 58, 252, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.business-contact-area .container {
  position: relative;
  z-index: 1;
}

.business-contact-heading .section-subtitle {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9a86ff;
  margin-bottom: 14px;
  padding: 8px 16px;
  border-radius: 50px;
  background: rgba(95, 58, 252, 0.12);
  border: 1px solid rgba(95, 58, 252, 0.2);
}

.business-contact-heading h2 {
  font-size: 40px;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.business-contact-heading h2 .text-primary {
  color: #9a86ff;
}

.business-contact-heading p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  max-width: 420px;
}

.business-contact-form {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* 类型切换 */
.contact-type-switcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}

.contact-type-option {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  margin: 0;
}

.contact-type-option:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(95, 58, 252, 0.3);
  color: #fff;
}

.contact-type-option.active {
  background: -webkit-gradient(linear, left top, right top, from(rgba(95, 58, 252, 0.2)), to(rgba(123, 97, 255, 0.15)));
  background: linear-gradient(90deg, rgba(95, 58, 252, 0.2) 0%, rgba(123, 97, 255, 0.15) 100%);
  border-color: rgba(95, 58, 252, 0.5);
  color: #fff;
  -webkit-box-shadow: 0 0 20px rgba(95, 58, 252, 0.2);
  box-shadow: 0 0 20px rgba(95, 58, 252, 0.2);
}

.contact-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-type-option .option-icon {
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.contact-type-option.active .option-icon {
  background: rgba(95, 58, 252, 0.25);
  color: #9a86ff;
}

.contact-type-option .option-text {
  font-size: 15px;
  font-weight: 600;
}

/* 输入框 */
.business-contact-form .form-group {
  margin-bottom: 22px;
}

.business-contact-form .input-group {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.business-contact-form .input-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #7a7d9a;
  font-size: 16px;
  z-index: 2;
  pointer-events: none;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

.business-contact-form .form-control {
  width: 100%;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0 22px 0 56px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  outline: none;
}

.business-contact-form .form-control:focus {
  border-color: rgba(95, 58, 252, 0.6);
  background: rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 0 4px rgba(95, 58, 252, 0.12), 0 0 25px rgba(95, 58, 252, 0.15);
  box-shadow: 0 0 0 4px rgba(95, 58, 252, 0.12), 0 0 25px rgba(95, 58, 252, 0.15);
}

.business-contact-form .form-control:focus + .input-icon,
.business-contact-form .input-group:focus-within .input-icon {
  color: #9a86ff;
}

.business-contact-form .form-control::-webkit-input-placeholder {
  color: #5d6078;
  font-size: 14px;
}

.business-contact-form .form-control::-moz-placeholder {
  color: #5d6078;
  font-size: 14px;
  opacity: 1;
}

.business-contact-form .form-control:-ms-input-placeholder {
  color: #5d6078;
  font-size: 14px;
}

.business-contact-form .form-control::-ms-input-placeholder {
  color: #5d6078;
  font-size: 14px;
}

.business-contact-form .form-control::placeholder {
  color: #5d6078;
  font-size: 14px;
}

.business-contact-form .form-text {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  line-height: 1.5;
}

/* 提交按钮 */
#business-contact-form .business-contact-btn,
.business-contact-form .business-contact-btn {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  height: 60px;
  border: none;
  border-radius: 16px;
  background: -webkit-gradient(linear, left top, right top, from(#5f3afc), to(#7b61ff));
  background: linear-gradient(90deg, #5f3afc 0%, #7b61ff 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  -webkit-box-shadow: 0 10px 30px rgba(95, 58, 252, 0.35);
  box-shadow: 0 10px 30px rgba(95, 58, 252, 0.35);
}

#business-contact-form .business-contact-btn::before,
.business-contact-form .business-contact-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(255, 255, 255, 0.2)));
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 100%);
  -webkit-transition: left .5s ease;
  transition: left .5s ease;
}

#business-contact-form .business-contact-btn:hover,
.business-contact-form .business-contact-btn:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 15px 40px rgba(95, 58, 252, 0.5);
  box-shadow: 0 15px 40px rgba(95, 58, 252, 0.5);
}

#business-contact-form .business-contact-btn:hover::before,
.business-contact-form .business-contact-btn:hover::before {
  left: 100%;
}

#business-contact-form .business-contact-btn:active,
.business-contact-form .business-contact-btn:active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* 提示消息 */
.business-contact-message {
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 500;
}

.business-contact-message.alert-success {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.2);
  color: #7ee08f;
}

.business-contact-message.alert-danger {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.2);
  color: #f5959e;
}

@media (max-width: 1199px) {
  .business-contact-form {
    padding: 26px;
  }
}

@media (max-width: 991px) {
  .business-contact-area {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .business-contact-heading {
    text-align: center;
  }
  .business-contact-heading p {
    margin-left: auto;
    margin-right: auto;
  }
  .business-contact-form {
    margin-top: 10px;
  }
}

@media (max-width: 575px) {
  .business-contact-form {
    padding: 22px 18px;
    border-radius: 20px;
  }
  .contact-type-option {
    padding: 14px 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 6px;
  }
  .contact-type-option .option-text {
    font-size: 13px;
  }
  .business-contact-form .form-control {
    height: 58px;
    padding-left: 50px;
  }
  .business-contact-form .input-icon {
    left: 18px;
  }
  .business-contact-btn {
    height: 54px;
    font-size: 15px;
  }
}

/* ============================================================
 * 个人资料设置 - 简历编辑区增强
 * ============================================================ */
.resume-section-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 48px 0 32px;
}

.resume-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.resume-editor-header-left {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.resume-editor-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(95, 58, 252, 0.2), rgba(0, 240, 255, 0.12));
  border: 1px solid rgba(95, 58, 252, 0.25);
  color: #9a86ff;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(95, 58, 252, 0.18);
}

.resume-editor-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.resume-editor-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #5f3afc;
}

.resume-editor-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.resume-editor-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.6;
}

/* 简历公开显示按钮 */
.resume-visible-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  padding: 11px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
}

.resume-visible-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(95, 58, 252, 0.4);
  color: #fff;
  box-shadow: 0 6px 20px rgba(95, 58, 252, 0.12);
  transform: translateY(-1px);
}

.resume-visible-btn.is-on {
  background: linear-gradient(135deg, #5f3afc, #7c5cff);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px rgba(95, 58, 252, 0.25);
}

.resume-visible-btn.is-on:hover {
  background: linear-gradient(135deg, #6a4afc, #876aff);
  box-shadow: 0 8px 26px rgba(95, 58, 252, 0.35);
}

.resume-visible-btn input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.resume-visible-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 15px;
}

/* 简历编辑页保存按钮：保持大一点 */
#resume-edit-form [name="submit_resume"].button-1,
#resume-edit-form [type="submit"].button-1 {
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 100px;
  min-width: 160px;
}

/* 联系方式与个人简介区块 */
.resume-contact-section {
  margin-top: 8px;
}

.resume-section-subtitle {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.resume-section-subtitle i {
  color: #5f3afc;
  font-size: 20px;
}

.resume-toggle-field {
  margin-bottom: 20px;
}

/* 复用个人资料联系方式开关 */
.resume-use-profile-contact-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.resume-use-profile-contact-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(95, 58, 252, 0.35);
  box-shadow: 0 6px 20px rgba(95, 58, 252, 0.12);
}

.resume-use-profile-contact-toggle.is-on .toggle-track {
  background: linear-gradient(135deg, #5f3afc, #7c5cff);
}

.resume-use-profile-contact-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.resume-use-profile-contact-toggle .toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.25s ease;
}

.resume-use-profile-contact-toggle .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.resume-use-profile-contact-toggle.is-on .toggle-thumb {
  transform: translateX(20px);
}

.resume-use-profile-contact-toggle .toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.resume-use-profile-contact-toggle .toggle-hint {
  display: block;
  width: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.resume-use-profile-contact-toggle.is-on .toggle-label {
  color: #a78bfa;
}

.resume-contact-group {
  animation: resume-contact-fade-in 0.25s ease;
}

@keyframes resume-contact-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 575px) {
  .resume-editor-header {
    flex-wrap: wrap;
    gap: 16px;
  }

  .resume-visible-btn {
    width: 100%;
  }

  .resume-use-profile-contact-toggle {
    flex-wrap: wrap;
  }

  .resume-use-profile-contact-toggle .toggle-label {
    order: 2;
    width: 100%;
  }

  .resume-use-profile-contact-toggle .toggle-hint {
    order: 3;
  }
}

/* 简历未完成警告 */
.resume-incomplete-alert {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  margin-bottom: 28px;
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.85);
}

.resume-alert-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  font-size: 18px;
}

.resume-alert-body strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.resume-alert-body p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 10px;
  line-height: 1.6;
}

.resume-alert-body ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.resume-alert-body li {
  font-size: 12px;
  padding: 5px 10px;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.2);
  border-radius: 6px;
  color: #ffe082;
}

@media (max-width: 575px) {
  .resume-editor-header {
    gap: 14px;
  }
  .resume-editor-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
    border-radius: 12px;
  }
  .resume-editor-title {
    font-size: 22px;
  }
  .resume-incomplete-alert {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
 * 简历页 - 微信二维码展示
 * ============================================================ */
.resume-wechat-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.resume-wechat-qr {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #fff;
}

/* ============================================================
 * 个人资料设置 - 简历展示作品选择器
 * ============================================================ */
.resume-works-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

@media (max-width: 575px) {
  .resume-works-selector {
    grid-template-columns: repeat(2, 1fr);
  }
}

.resume-work-select-item {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.resume-work-select-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.resume-work-select-card {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(18, 18, 28, 0.6);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.resume-work-select-item:hover .resume-work-select-card,
.resume-work-select-item.selected .resume-work-select-card {
  border-color: #5f3afc;
  background: rgba(95, 58, 252, 0.12);
  box-shadow: 0 8px 24px rgba(95, 58, 252, 0.18);
}

.resume-work-select-item.disabled .resume-work-select-card {
  opacity: 0.45;
}

.resume-work-select-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #151520;
}

.resume-work-select-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.resume-work-select-item:hover .resume-work-select-cover img {
  transform: scale(1.05);
}

.resume-work-select-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.resume-work-select-item.selected .resume-work-select-check {
  opacity: 1;
  transform: scale(1);
  background: #5f3afc;
  border-color: #5f3afc;
}

.resume-work-select-title {
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.resume-works-selected-count {
  display: block;
  margin-top: 8px;
}

.resume-works-selected-count span {
  color: #5f3afc;
  font-weight: 600;
}

.resume-works-search {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.resume-works-search input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f7f7ff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}

.resume-works-search input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.resume-works-search input[type="text"]:focus {
  border-color: #5f3afc;
  background: rgba(255, 255, 255, 0.09);
}

.resume-works-search .button-1 {
  padding: 10px 16px;
  font-size: 14px;
}

.resume-works-load-more-wrap {
  margin: 20px 0 8px;
  text-align: center;
}

.resume-works-load-more-wrap .button-1 {
  padding: 10px 24px;
  font-size: 14px;
}

.resume-works-loading {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.resume-works-empty {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

/* 简历必填项提示弹窗 */
.resume-incomplete-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.resume-incomplete-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.resume-incomplete-modal {
  width: 100%;
  max-width: 420px;
  background: #161622;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(10px);
  transition: transform 0.25s ease;
}

.resume-incomplete-modal-overlay.active .resume-incomplete-modal {
  transform: translateY(0);
}

.resume-incomplete-modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.12);
  color: #ffc107;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.resume-incomplete-modal h4 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

.resume-incomplete-modal p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 16px;
  line-height: 1.6;
}

.resume-incomplete-modal ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resume-incomplete-modal li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.resume-incomplete-modal li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5f3afc;
}

.resume-incomplete-modal .button-1 {
  width: 100%;
  justify-content: center;
}