@font-face {
	font-family: PingFang SC Local;
	src: url(../fonts/PingFangSC-Regular.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: PingFang SC Local;
	src: url(../fonts/PingFangSC-Medium.woff2) format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: PingFang SC Local;
	src: url(../fonts/PingFangSC-Light.woff2) format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: SF Display Local;
	src: url(../fonts/SFDisplay-Regular.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: SF Display Local;
	src: url(../fonts/SFDisplay-Medium.woff2) format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: SF Display Local;
	src: url(../fonts/SFDisplay-Bold.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: SF Display Local;
	src: url(../fonts/SFDisplay-Light.woff2) format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}


:root {
	--bg: #f7f7f7;
	--ink: #1f2937;
	--muted: #5b6475;
	--border: #d9dbe1;
	--accent: #6abab0;
	--accent-2: #7f86c9;
	--footer: #8b95c7;
	--radius: 18px;
	--header-height: 94px;
	--carousel-duration: 1s;
	--carousel-ease: cubic-bezier(.645, .045, .355, 1);
	--font-sans: "SF Display Local", "PingFang SC Local", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	--font-display: var(--font-sans)
}

* {
	box-sizing: border-box
}


body {
	margin: 0;
	font-family:"SF Display Local";
	background: var(--bg);
	color: var(--ink);
}


strong,
b {
	font-weight: 500
}

.container {
	width: min(1180px, 92vw);
	margin: 0 auto
}

.page-backbar {
	width: 94vw;
	max-width: 1800px;
	margin: 48px auto 0;
	display: flex;
	align-items: center;
	gap: 18px;
	color: #1f2937
}

.page-backbar a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none
}

.site-header {
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	z-index: 10;
	position: sticky;
	top: 0
}

.site-header.menu-open {
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	z-index: 95
}

.nav {
	width: 94vw;
	max-width: 1800px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0 10px
}

.brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3
}

.brand-title {
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: 400;
	color: #2b2b2b
}

.brand-sub {
	font-family: var(--font-sans);
	font-size: 1.15rem;
	font-weight: 300;
	color: #2b2b2b
}

.menu-icon {
	width: 36px;
	height: 26px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	transition: transform .2s ease;
	z-index: 101;
	position: relative
}

.menu-icon:hover {
	transform: scale(1.05)
}

.menu-icon span {
	display: block;
	height: 3px;
	border-radius: 3px;
	background: #6abab0;
	transition: transform .3s ease, opacity .3s ease, background-color .3s;
	transform-origin: center
}

.menu-icon span:nth-child(2) {
	background: #7f86c9
}

.menu-icon span:nth-child(3) {
	background: #f7a35c
}

.site-header.menu-open .menu-icon span:nth-child(1),
.menu-icon.active span:nth-child(1) {
	transform: translateY(11.5px) rotate(45deg)
}

.site-header.menu-open .menu-icon span:nth-child(2),
.menu-icon.active span:nth-child(2) {
	opacity: 0
}

.site-header.menu-open .menu-icon span:nth-child(3),
.menu-icon.active span:nth-child(3) {
	transform: translateY(-11.5px) rotate(-45deg)
}

.menu-overlay {
	position: fixed;
	top: var(--header-height, 94px);
	left: 0;
	width: 100%;
	height: calc(100svh - var(--header-height, 94px));
	z-index: 90;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility .3s ease;
	display: flex;
	justify-content: flex-start;
	padding: 0 clamp(20px, 4vw, 90px);
	color: #1f2937;
	overflow: hidden
}

.menu-overlay:before {
	content: "";
	position: absolute;
	inset: -40px;
	background-color: #fff;
	background-image: url(../assets/navbg.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: auto 100%;
	filter: blur(10px) saturate(1) contrast(1);
	transform: scale(1);
	opacity: 1;
	z-index: 0
}

.menu-overlay:after {
	content: "";
	position: absolute;
	inset: 0;
	background: #ffffff2e;
	z-index: 1
}

.menu-overlay.open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}

.menu-content {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 40px;
	height: 100%;
	padding-top: 60px
}

.menu-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 24px
}

.menu-nav a {
	font-family: var(--font-sans);
	font-size: 1.4rem;
	font-weight: 400;
	color: #1f2937;
	text-decoration: none;
	position: relative;
	padding-bottom: 4px;
	display: inline-block;
	transition: color .2s, opacity .2s
}

.menu-nav a:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: currentColor;
	opacity: .6;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease
}

.menu-nav a:hover,
.menu-nav a.active {
	color: #1f2937
}

.menu-nav a:hover:after,
.menu-nav a.active:after {
	transform: scaleX(1)
}

.menu-nav a[data-disabled-link] {
	color: #a0a0a0
}

.menu-nav a[data-disabled-link]:after {
	opacity: .35
}

.menu-nav a.is-unavailable {
	opacity: .55
}

.menu-nav a.is-unavailable:hover {
	color: #1f2937
}

.menu-divider {
	width: 2px;
	height: 60%;
	background: #1f293759;
	margin-top: 8px
}

.hero {
	position: relative;
	min-height: 520px
}

.hero-img {
	width: 100%;
	display: block;
	object-fit: contain
}

.hero-cta {
	background: #f7f7f7;
	padding: 0;
	margin-bottom: 0
}

.hero-cta-inner {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	align-items: center;
	gap: 0;
	min-height: clamp(260px, 22vw, 360px);
	padding: clamp(22px, 2.6vw, 34px) 0;
	width: 94vw;
	max-width: 1800px;
	margin: 0 auto
}

.hero-cta-inner .cta-btn {
	grid-row: 1;
	justify-self: center;
	align-self: center
}

.hero-cta-inner .cta-line {
	grid-row: 2;
	justify-self: center;
	align-self: center
}

.cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 30px;
	background: #3f3f3f;
	color: #fff;
	border-radius: 1px;
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: .02em;
	box-shadow: none;
	transition: transform .12s ease, box-shadow .2s ease
}

.cta-btn-label {
	display: inline-block;
	transform: scale(1.12);
	transform-origin: center
}

.cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px #0000001f
}

.cta-line {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	color: #3b3b3b;
	font-size: 1rem;
	letter-spacing: .01em;
	justify-content: center;
	text-align: center
}

.cta-note {
	white-space: nowrap
}

.line {
	flex: 1;
	height: 1.5px;
	background: #3b3b3b;
	opacity: .95;
	min-width: 60px
}

.poster-strip {
	width: 100%;
	height: clamp(460px, 60vw, 760px);
	background: var(--bg);
	margin-bottom: 0
}

.poster-carousel {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: block
}

.poster-track {
	height: 100%;
	display: flex;
	width: fit-content;
	gap: 18px;
	transform: translate(0);
	transition: transform var(--carousel-duration) var(--carousel-ease);
	will-change: transform;
	opacity: 0
}

.poster-track.is-ready {
	opacity: 1
}

.poster-track.is-resetting {
	transition: none
}

.poster-slide {
	flex: 0 0 auto;
	height: 100%;
	width: min(1400px, 82vw)
}

.poster-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: transparent
}

.gallery {
	background: var(--bg);
	overflow: hidden;
	margin-top: 0;
	padding-top: 15px
}

.gallery-viewport {
	width: 100%;
	overflow: hidden;
	padding: 0
}

.gallery-row {
	width: 100%;
	max-width: none;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0;
	transform: translateZ(0);
	transition: transform var(--carousel-duration) var(--carousel-ease);
	will-change: transform;
	opacity: 0
}

.gallery-row.is-ready {
	opacity: 1
}

.gallery-row.is-resetting {
	transition: none
}

.thumb {
	flex: 0 0 auto;
	width: clamp(280px, 22vw, 420px);
	aspect-ratio: 16 / 9;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	padding: 0;
	scroll-snap-align: center
}

.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: transparent
}

.gallery-dotnav {
	display: flex;
	justify-content: center;
	padding: 10px 0;
	background: var(--bg)
}

.gallery-dotnav .dotnav-viewport {
	width: min(340px, 72vw);
	overflow: hidden;
	padding: 10px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%)
}

.gallery-dotnav .dotnav-track {
	display: flex;
	align-items: center;
	gap: 14px;
	width: fit-content;
	transform: translateZ(0);
	transition: transform var(--carousel-duration) var(--carousel-ease);
	will-change: transform
}

.gallery-dotnav .dotnav-track.is-resetting {
	transition: none
}

.gallery-dotnav .dotnav-dot {
	appearance: none;
	border: 0;
	padding: 0;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #d4d6db;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transform-origin: center;
	transition: width .26s ease, transform .26s ease, opacity .26s ease
}

.gallery-dotnav .dotnav-dot.trunc-1 {
	transform: scale(1);
	opacity: 1
}

.gallery-dotnav .dotnav-dot.trunc-2 {
	transform: scale(.86);
	opacity: .75
}

.gallery-dotnav .dotnav-dot.trunc-3 {
	transform: scale(.72);
	opacity: .55
}

.gallery-dotnav .dotnav-dot.trunc-4 {
	transform: scale(.58);
	opacity: .35
}

.gallery-dotnav .dotnav-dot.is-current {
	width: 44px;
	transform: none;
	opacity: 1
}

.gallery-dotnav .dotnav-dot.is-current:after {
	content: "";
	position: absolute;
	inset: 0;
	background: #535353;
	transform: scaleX(var(--p, 0));
	transform-origin: left center
}

.gallery-dotnav .dotnav-dot:focus-visible {
	outline: 2px solid rgba(0, 0, 0, .35);
	outline-offset: 3px
}

.partners {
	background: #fff;
	padding-bottom: 180px
}

.partners-line {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 22px 0;
	color: var(--muted);
	font-size: 1.4rem;
	font-weight: 400
}

.partners-line a {
	text-decoration: none;
	color: var(--muted)
}

.partners-line a.is-unavailable {
	opacity: .65
}

.partners-line span {
	color: #a0a4b3
}

.site-footer {
	background: var(--footer);
	color: #fff;
	padding: 60px 0 80px;
	font-size: .85rem
}

.footer-wide-container {
	width: 94vw;
	max-width: 1800px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch
}

.footer-left {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 4px
}

.foot-title {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: .02em;
	line-height: 1.2;
	white-space: nowrap
}

.socials {
	display: flex;
	gap: 16px;
	align-items: center
}

.social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #fff;
	color: var(--footer);
	border-radius: 50%;
	transition: transform .2s, opacity .2s;
	overflow: hidden;
	text-decoration: none
}

.social-btn:hover {
	transform: translateY(-2px);
	opacity: .95
}

.social-btn svg {
	width: 20px;
	height: 20px
}

.social-btn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block
}

.social-btn.xiaohongshu {
	font-size: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b95c7'%3E%3Cpath d='M19 0H5C2.2 0 0 2.2 0 5v14c0 2.8 2.2 5 5 5h14c2.8 0 5-2.2 5-5V5c0-2.8-2.2-5-5-5zM9 11.5c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5zm-5 6h2v-2H4v2zm2-4H4v2h2v-2zm12 4h-2v-2h2v2zm2-2h-2v-2h2v2z'/%3E%3C/svg%3E") center/65% no-repeat;
	border-radius: 6px
}

.social-btn.wechat {
	background: transparent;
	border: 0;
	border-radius: 50%;
	position: relative;
	overflow: visible
}

.wechat-qrcode {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 0;
	background: #fff;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 0 4px 20px #00000026;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	pointer-events: none;
	z-index: 100
}

.wechat-qrcode:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 16px;
	border: 8px solid transparent;
	border-top-color: #fff
}

.wechat-qrcode img {
	width: 120px;
	height: 120px;
	display: block
}

.social-btn.wechat:hover .wechat-qrcode {
	opacity: 1;
	visibility: visible
}

.social-btn.douyin svg {
	width: 18px;
	height: 18px
}

.social-btn.bili {
	border-radius: 6px
}

.footer-right {
	flex: 0 0 65%;
	max-width: 900px;
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 20px
}

.foot-col {
	display: flex;
	flex-direction: column
}

.col-1,
.col-2 {
	justify-content: space-between
}

.col-1 .mt-auto,
.col-2 .info-group:last-child {
	margin-top: auto;
	padding-top: 40px
}

.col-3 {
	justify-content: space-between
}

.col-3 .mt-auto {
	margin-top: auto
}

.info-group {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.contact-block {
	gap: 16px
}

.contact-item {
	display: flex;
	flex-direction: column;
	gap: 2px
}

.foot-head {
	margin: 0 0 2px;
	font-weight: 400;
	font-size: .9rem;
	color: #fff;
	opacity: 1
}

.foot-col p:not(.foot-head) {
	margin: 0;
	color: #fff;
	line-height: 1.5;
	opacity: .85;
	font-size: .85rem;
	font-weight: 400
}

@media(max-width:900px) {
	.footer-wide-container {
		flex-direction: column;
		gap: 50px;
		width: 90vw
	}

	.footer-left {
		flex: none;
		gap: 30px
	}

	.footer-right {
		flex: 1;
		max-width: none;
		grid-template-columns: 1fr 1fr;
		gap: 30px
	}

	.col-1 .mt-auto,
	.col-2 .info-group:last-child {
		padding-top: 30px
	}
}

@media(max-width:640px) {
	.site-footer {
		padding: 40px 0 60px
	}

	.footer-wide-container {
		width: 92vw;
		gap: 32px
	}

	.footer-left {
		flex: none;
		gap: 20px;
		text-align: center;
		align-items: center
	}

	.foot-title {
		font-size: 1.15rem;
		line-height: 1.4
	}

	.socials {
		justify-content: center
	}

	.footer-right {
		flex: 1;
		max-width: none;
		grid-template-columns: 1fr;
		gap: 0
	}

	.foot-col {
		gap: 0
	}

	.col-1, .col-2, .col-3 {
		justify-content: flex-start
	}

	.col-1 .mt-auto,
	.col-2 .info-group:last-child,
	.col-1 .info-group + .info-group,
	.col-2 .info-group + .info-group,
	.col-3 .contact-block + .info-group {
		margin-top: 0;
		padding-top: 24px
	}

	.foot-head {
		font-size: .85rem
	}

	.foot-col p:not(.foot-head) {
		font-size: .85rem
	}
}

/*��ϵ����*/
.contact-page {	background: var(--bg);	height: calc(100svh - 94px);	padding: 0;	display: flex;	flex-direction: column}
.contact-backbar {margin: 34px auto 50px;}
.contact-main {width: 94vw;max-width: 1800px;margin: 0 auto;flex: 1;min-height: 0;display: flex;align-items: center;justify-content: center;padding: 0 0 72px;}
.contact-inner {width: min(980px, 92vw);text-align: left;color: #333;}

.contact-hint {font-size: 1.2rem;font-weight: 300;color: #000;letter-spacing: .25em;margin-bottom: 26px}
.contact-email {display: inline-block;font-size: 4rem;font-weight: 500;letter-spacing: .15em;color: #000;text-decoration: none;line-height: 1.05;white-space: nowrap;position: relative;padding-bottom: 22px}

.contact-email-wrap {display: inline-block;max-width: 100%}

.contact-email:after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 2px;background: #000c}

.contact-email:hover {color: var(--accent-2)}

.contact-meta {width: min(760px, 72vw);margin-top: 32px;text-align: left;font-size: .95rem;color: #000000b3;letter-spacing: .03em;display: grid;gap: 12px;justify-items: start}

.contact-row {display: flex;gap: 10px;align-items: baseline;flex-wrap: wrap;justify-content: flex-start;font-size: 1.2rem;font-weight: 300;color: #000;letter-spacing: .25em}

.contact-label{color: #000}

@media(max-width:720px) {
	.contact-email {white-space: normal;overflow-wrap: anywhere;font-size: clamp(34px, 8.6vw, 60px);letter-spacing: .02em}

	.contact-meta {width: 100%}
}

/*��������*/
.about-page {	background: var(--bg);padding: 0; }
.about-main {width: 94vw;max-width: 1800px;margin: 0 auto;flex: 1;min-height: 0;padding: 0 0 72px;}
.about-inner {width: min(1030px, 92vw);text-align: left;color: #333; margin:0 auto;}
.about-hint {font-size: 2rem;font-weight: 300;color: #333;letter-spacing: .25em;margin-bottom: 26px}

.works-header {
    padding: 0 0 78px;
}

.works-back {
    display: inline-flex;
    align-items: center;
}

.about-header-text {
    display: inline-flex;
    align-items: baseline;
    gap: 22px;
}

.about-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 400;
    color: #1f2937;
}


/*��¼*/
.btnloginout{ width:120px; float:right;}
.login{ width:800px; margin:120px auto; text-align:left; margin-left:50px;}
.logn_inner{ display:flex;}
.login_wel{ font-size:24px; color:#7f86c9; text-align:right; width:200px; padding-right:30px;}

.login_welr{ flex:1}

.login_t{ font-size:24px; color:#333; margin-bottom:50px; font-weight:500}


.login_reg{ font-size:16px; display:inline-block; color:#7f86c9; text-decoration:underline; margin:0 10px}
.login_forget{ font-size:16px; display:inline-block; color:#333; text-decoration:underline; }
.login_reg_i{ width:18px; height:18px; border-radius:18px; background:#000; display:inline-block; text-align:center; margin-bottom:-4px;}
.login_reg_i i{ font-size:9px; color:#fff; font-weight:normal}

.login_tab .layui-this{ color:#333 !important; font-size:18px !important; font-weight:500 !important}
.login_tab>.layui-tab-title .layui-this:after{ border-bottom:2px solid #7f86c9 !important;}
.layui-tab .layui-tab-title{ border-bottom:1px solid #ccc !important;}

.btn-login{ background:#000 !important;}

.regbtn_out{ text-align:right;}
.btn-reg-prev{ width:100px; background:#fff !important; border:1px solid #000 !important; color:#000 !important}
.btn-reg{ width:100px; background:#000 !important;}

.regcountry{ display:flex; font-size:16px; align-items:center}
.regcountryBtn{ padding:5px 10px; background:#f7f7f7; border-radius:5px; margin-right:10px; cursor:pointer;}
.regcountryBtn i{ color:#f7f7f7; font-size:16px}
.regcountry_on i{ color:#fff;}
.regcountry_on{ background:#000; color:#fff;}


.login_reg_out{ display:flex; justify-content:space-between}
.login_noid{ font-size:16px}
.login_noacc{ margin-left:20px; font-size:15px; color:#666}


/*������Ʒ*/
.portal-inner {width: min(80vw);text-align: left;color: #000; margin:0 auto;}
.protal_wel{ font-size:24px; color:#7f86c9; text-align:right; width:300px; padding-right:30px;}

#noexpert{ display:flex;}
.portal_nav{ width:120px; min-height:400px; border-right:1px solid #ccc; margin-right:180px}
.portal_nav ul li a{ font-size:1.2rem; padding-bottom:10px; color:#c1c1c1; display:block; font-weight:bold}
.portal_nav ul li a:hover{ color:#333;}
.portal_nav ul li a.navon{ color:#333; text-decoration:underline}

.portal{ flex:1;}
.portal_l{display:flex; flex-wrap:nowrap;}

.portal_head{ margin-bottom:30px; border-bottom:1px solid #ccc; }
.portal_head_name{ font-size:1.1rem; margin-bottom:10px; color:#777}
.portal_head_txt{ font-size:0.9rem}
.portal_head_tips a{ font-size:0.9rem; color:#f90;  padding:5px 0; display:block}
.portal_head_tips a:hover{  text-decoration:underline; color:#f50}
.portal_no{ font-size:0.8rem; color:#7f86c9}

.portal_img{ width:120px; height:120px; border:1px solid #000; flex-direction:column}
.portal_img img{ width:100%;}
.portal_name{ font-size:18px;}
.portal_edit_div{ margin:15px 0; width:200px;}
.portal_edit{ background:#000; padding:10px; color:#fff; font-size:1rem; display:block; text-align:center; transition:0.3s}
.portal_edit:hover{ background:#7f86c9; color:#fff}
.portal_info{  font-size:1.1rem; flex:1}

.portal_info_item{ margin-bottom:10px; display:flex; align-items:baseline; color:#777;}
.portal_info_item_l{ width:100px; text-align:right; color:#777;}

.portal_info_item_txt{ color:#111}

.protal_c{align-items: flex-end; display:flex;}
.portal_c_add{ background:#000; color:#fff; text-align:center; padding:10px 20px; font-size:16px; border-radius:4px; display:block}
.portal_c_add:hover{ background:#666; color:#fff;}

.portal_r{ width:200px; text-align:center; background:#f7f7f7; border-radius:4px; }
.portal_r h1{ font-size:20px; padding:10px 0;}
.portal_r_btn{ background:#000; color:#fff; margin:20px; text-align:center; padding:10px 20px; font-size:16px; border-radius:4px; display:block}
.portal_r_btn:hover{ background:#666; color:#fff;}

.portal_works{ width: min(900px, 92vw);    text-align: left;}
.portal_works_ul{ margin:0; padding:0; display:flex; align-items:center; border-bottom:1px solid #ccc; margin-bottom:30px; }
.portal_works_ul li{ margin-right:20px; font-size:1rem; color:#c1c1c1; padding-bottom:10px; height:3rem; line-height:3rem;}
.portal_works_ul li.workson{ font-size:1.2rem; color:#7f86c9; border-bottom:2px solid #7f86c9; font-weight:bold}
.portal_works_ul li.workson_view{ font-size:1.2rem; color:#333; border-bottom:2px solid #333; font-weight:bold}

.protal_lnav{ width:20%;}
.protal_lnav_t{ margin-bottom:20px;font-size:18px; color:#000;font-weight:bold;}
.protal_lnav_dl{ list-style:none;}
.protal_lnav_dl dt a.on{ color:#000; font-weight:bold;}
.protal_lnav_dl dd a{ font-size:14px; color:#666; padding:5px 10px; display:block}
.protal_lnav_dl dd a:hover{  color:#000;}
.protal_lnav_dl dd a.on{ color:#000; font-weight:bold;}

.portal_works_r{ }
.portal_workstlist{ padding-bottom:20px}
.portal_workstlist_type{ padding:20px 0; font-size:24px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;}

.portal_opus{ list-style:none; display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:20px;; border-bottom:1px solid #666; padding-bottom:20px;}
.portal_opus_img{ padding:5px; border:1px solid #000;width:25%; display:flex; align-items:center; justify-content:center;}
.portal_opus_img img{ width:100%; }
.portal_opus_info{ padding:10px;width:70%; text-align:left; line-height:200%;}
.portal_opus_t{ font-size:16px; margin-bottom:10px;}

.portal_opus_btn{ margin-top:20px;}
.portal_opus_edit{ text-align:center; font-size:16px; padding:5px 10px; display:block; background:#eee; color:#000; border:1px solid #666;}
.portal_opus_edit:hover{ background:#000; color:#fff;}

.portal_edit_content{ display:none; }
.memberInfo{width:600px; padding:20px; text-align:left;}
.protal_previous_border{ border:1px solid #ccc; box-shadow:none !important;}

#abroadCountry input{ border-color: #000 !important;}

.certiPanel{ margin-top:10px; border:1px solid #ccc; padding:5px; border-radius:5px; width:auto; color:#f60; display:inline-block; font-size:16px}
.certiPanel a{ padding:0 5px; background:#f60; color:#fff; display:inline-block; margin-right:10px; border-radius:5px; font-size:14px}
.certiPanel a:hover{ background:#F00; color:#fff;}

/*������ί*/
.judgesMatch{ width:500px; margin:0 auto; border-radius:4px; border:1px solid #ccc;}
.judgesMatch_tit{ padding:20px; font-size:24px; background:#000; color:#fff;}
.judgesMatch_h1{ text-align:center; padding:20px 0; font-size:24px;}

.judgeslist{ border-bottom:1px solid #ccc; padding:20px;}
.judgeslist_t{ font-size:16px; margin-bottom:20px;}
.judgeslist_btn{}
.judges_btn{ padding:10px 20px; border:1px solid #000; font-size:16px; text-align:center; margin-right:20px; border-radius:4px; display:inline-block;}
.judges_btn:hover{ background:#000; color:#fff;}



.portal_editPage{ width: min(900px, 92vw); text-align:left;  }
.portal_editPage_t{ font-size:18px; font-weight:300; color:#000; margin-bottom:10px;   border-bottom:1px solid #000;}
.portal_editPage_t span{ padding:10px; background:#000; display:inline-block; color:#fff}

.portal_real_t{ font-size:18px; font-weight:300; color:#000; margin:40px 0;   border-bottom:1px solid #000;}
.portal_real_t span{ padding:10px; background:#000; display:inline-block; color:#fff}

.portal_edit_p{ font-size:0.9rem; color:#777; padding:5px 0;}
.portal_need{ color:#7f86c9;}
.portal_edit_ai{ font-size:0.9rem; color:#8895CB ; padding:5px 0; font-weight:bold}
.division{ float:right; color:#000}
.divisionName{ font-weight:bold; }
.divisionTableIn{ padding:20px}
.divisionHelp{ cursor:pointer; color:#666}
.portal_edit_out{ padding:20px 0;}
.layui-laydate-footer{ text-align:left;}
.headimgurl{ width:100px; height:100px; border:1px solid #000; margin-bottom:10px; display:flex; align-items:center; justify-content:center; position:relative;}
#headimgurl_btn{ background:#999; width:100px;}
#sex .layui-form-radio:hover>*, .layui-form-radioed, .layui-form-radioed>i{ color:#000 !important;}
#sex .layui-form-radio{ margin:0; padding:0}
#sex label{ margin-right:10px; }

.headimg_uploadbtn{ position:absolute; left:0; top:0;  opacity:0; cursor:pointer; width:100px; height:100px; z-index:99;}

.enroll_upload_type{ margin-bottom:50px;}
.enroll_upload_type_on{ padding:10px 20px; background:#000; color:#fff; font-size:20px; width:100px; display:inline-block; text-align:center;border:2px solid #000; margin-right:20px;}
.enroll_upload_jpg{ padding:10px 20px; background:#000; color:#fff; font-size:20px; display:inline-block; text-align:center;border:2px solid #000; margin-right:20px;}
.enroll_upload_type_1{ padding:10px 20px; color:#000; font-size:20px; border:2px solid #000;width:100px; display:inline-block; text-align:center;}
.enroll_upload_tips{ font-size:0.9rem; color:#888;}

#tabHeader .layui-this{background:#000; color:#fff;}
.typechange{ padding:10px 20px; color:#000; font-size:20px; border:2px solid #000;width:100px; display:inline-block; text-align:center; cursor:pointer; margin-right:20px;}


.enroll_upload_img{ }
.reservation_upfile{ position:relative; display:inline-block;width:100px !important; height:100px !important; line-height:100px; border-radius:4px; border:1px solid #ccc; text-align:center; margin-right:10px;}
.reservation_upfile i{ font-size:30px; color:#000;}
.reservation_upfile_input{position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0; width:100px !important; height:100px !important;}
.reservation_upfile_tips{font-size:12px; padding-left:150px; color:#999;}


.item-close{position:absolute; top:0; right:0; z-index:100; width:20px; height:20px; line-height:20px; border-radius:20px; }
.item-close i{ font-size:20px; color:#000;}
.gallery-item img{ height:80px;}

.enroll_submit{ text-align:right; margin:50px 0;}
.btn-enroll-video{ border:1px solid #000 !important; color:#000 !important; background:#f7f7f7 !important;}
.layui-btn-black{ background:#333 !important; padding:0 50px !important;}
.layui-btn-red{background:#c00 !important; }
.enroll_upload_form .layui-form-select .layui-input{ background:#fff; border-color:#eee !important;}


.layui-input-black{ border:1px solid #000 !important; background:#f7f7f7 !important;}

.layui-form-select dl dd.layui-this{ color:#000 !important;}


.uppanel_idcard{ width:150px; display:inline-block; border:1px solid #ccc; border-radius:4px; margin-right:20px; position:relative; overflow:hidden; border: 2px dashed #e5e7eb; border-radius:12px;}
.uppanel_close{ width:30px; height:30px; border-radius:50%; position:absolute; right:15px; top:5px; z-index:99; cursor:pointer; background:#fff;}
.uppanel_close i{ font-size:30px;}
.imgDiv{ width:150px; height:120px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff url(../assets/upButtonImg.png) no-repeat center center;}
.imgDiv_front{ background:#fff url(../assets/idcardFront.jpg) no-repeat center center;}
.imgDiv_back{background:#fff url(../assets/idcardBack.jpg) no-repeat center center;}
.imgDiv_stucard{ background:#fff url(../assets/stucard.jpg) no-repeat center center;}
.imgDiv_stucardHome{ background:#fff url(../assets/stucardHome.jpg) no-repeat center center;}
.imgDiv img{ width:100%; display:block;}
.uppanel_txt{ padding:0; width:100%; }
.uppanel_btn{ background:#999 !important; cursor:pointer;}

 
.enroll_upload_video{ margin-bottom:50px; position:relative; }

.enroll_video_block{ width:300px; border:1px solid #ccc; border-radius:4px; display: inline-block; margin-right:15px;}
.uppanel_video_btn{ background:#999 !important; cursor:pointer;}
.enroll_upload_video_in{ width:100%; height:45px;}.layui-enroll
.videoConBg{ width:100%; height:170px;  display:inline-block;background:url(../assets/upVideo.png) no-repeat center center; position:relative;}
#videoCon{ width:300px;  position:relative;}
.video_close{ width:30px; height:30px; border-radius:30px; position:absolute; right:15px; top:5px; z-index:999; cursor:pointer; background:#000; }
.video_close i{ font-size:30px; color:#fff;}

.word{position: absolute;right: 18px;bottom: 5px;color: #aaa;font-size: 12px;}

.enroll_tips{ font-size:16px; color:#c00; text-align:center; }

.jpglist{ display:flex;}
.jpglist a{ width:200px; overflow:hidden; display:inline-block; border:1px solid #ccc; border-radius:4px; margin-right:20px; position:relative;}
.jpglist a img{ width:100%;}

.bhlk{ margin-top:20px;}
.bhdiv{ padding:5px 10px; border:1px dotted #333; border-radius:5px; color:#f60; margin-top:10px}

.upload-textarea{ min-height:150px !important;}
.upload-textarea_ai{ min-height:100px !important;}

.post_submit{ text-align:right;}
.typeCon{ margin-bottom:30px;}
.workType{ font-size:1.4rem; padding:0 0 20px 0; font-weight:inherit}
.cateInro{ font-size:0.9rem; color:#333; line-height:180%; }
.agreement{ display:flex; align-items:center}
.agreement_txt{ font-size:1rem; color:#333; text-decoration:underline; margin-left:10px;}
.agreement .layui-form-checkbox[lay-skin=primary]{ margin-top:3px !important; }
.agreement .layui-form-checked[lay-skin=primary]>i{border-color: #000 !important;    background-color: #000;    color: #fff; }
.agreement .layui-form-checkbox[lay-skin=primary]>i{width:20px !important; height:20px !important; border:1px solid #000;}


#noMatch{ text-align:center;}
.noMatch_icon{padding:30px 0;}
.noMatch_icon i{ font-size:3rem; }
.noMatch_tit{color:#999; }

.matchTalbe{ margin-bottom:50px !important;}
.matchUpload{ padding:10px 30px; background:#333; color:#fff; font-size:1.2rem; display:inline-block}
.matchUpload_btn{ background:#7f86c9 !important; }
.layui-enroll{ width:100%; display:block; padding:0 10px; height: 38px;  line-height: 1.3; line-height: 38px;   border-width: 1px;    border-style: solid;    background-color: #fff;    color: rgba(0, 0, 0, .85);    border-radius: 2px; border:1px solid #eee;}
.layui-enroll-textarea{ width:100%; display:block; padding:10px;  line-height: 1.3;  border-width: 1px;    border-style: solid;    background-color: #fff;    color: rgba(0, 0, 0, .85);    border-radius: 2px; border:1px solid #eee;}
.workslist{ font-size:1.5rem; padding-bottom:20px; border-bottom:2px solid #7f86c9; margin-bottom:30px; color:#333; font-weight:600;}

.works-grid{ display:flex; flex-direction:column; gap:16px;}
.work-card{ background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.06); overflow:hidden; transition:all 0.3s ease; border:1px solid #e8e8e8;}
.work-card:hover{ box-shadow:0 4px 16px rgba(127,134,201,0.12); transform:translateY(-2px); border-color:#c5cae9;}

.work-card-row{ display:flex; align-items:center; padding:16px 20px; gap:20px; background:#fafbff;}
.work-img-wrapper{ width:100px; height:100px; min-width:100px; border-radius:8px; overflow:hidden; border:2px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,0.08); flex-shrink:0;}
.work-img-wrapper a{ display:block; width:100%; height:100%;}
.work-img{ width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease;}
.work-img-wrapper:hover .work-img{ transform:scale(1.05);}

.work-info-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.work-info-top{ display:flex; align-items:center; justify-content:space-between; gap:12px;}
.work-title{ font-size:17px; font-weight:600; color:#1a1a2e; margin:0; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:400px;}
.work-status-badge{ display:flex; gap:8px; flex-shrink:0;}
.status-label{ display:inline-block; padding:4px 14px; border-radius:15px; font-size:12px; font-weight:500; white-space:nowrap;}
.status-pending{ background:linear-gradient(135deg,#ff6b6b,#ee5a52); color:#fff; box-shadow:0 2px 6px rgba(238,90,82,0.25);}
.status-reviewing{ background:linear-gradient(135deg,#ffa726,#ff9800); color:#fff; box-shadow:0 2px 6px rgba(255,152,0,0.25);}
.status-approved{ background:linear-gradient(135deg,#66bb6a,#43a047); color:#fff; box-shadow:0 2px 6px rgba(67,160,71,0.25);}
.status-rejected{ background:linear-gradient(135deg,#ef5350,#e53935); color:#fff; box-shadow:0 2px 6px rgba(229,57,53,0.25);}
.status-success{ background:linear-gradient(135deg,#42a5f5,#1e88e5); color:#fff; box-shadow:0 2px 6px rgba(30,136,229,0.25);}

.work-info-details{ display:flex; flex-wrap:wrap; gap:16px; margin-top:4px;}
.work-info-details span{ display:inline-flex; align-items:center; gap:5px; font-size:14px; color:#666; line-height:1.6;}
.work-info-details span i{ font-size:14px; color:#7f86c9;}

.work-card-footer{ padding:12px 20px 16px; border-top:1px dashed #eee; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.reject-notice{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:linear-gradient(135deg,#fff5f5,#ffebee); border-radius:8px; border-left:3px solid #ef5350; color:#c62828; font-size:13px; line-height:1.5; width:100%; box-sizing:border-box;}
.reject-notice i{ font-size:16px; color:#ef5350; flex-shrink:0;}

.work-actions{ display:flex; gap:10px; flex-wrap:wrap;}
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px 18px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.3s ease; text-decoration:none; border:none; outline:none;}
.btn-edit{ background:linear-gradient(135deg,#333,#555); color:#fff; box-shadow:0 2px 6px rgba(51,51,51,0.15);}
.btn-edit:hover{ background:linear-gradient(135deg,#444,#666); box-shadow:0 3px 10px rgba(51,51,51,0.25); transform:translateY(-1px);}
.btn-delete{ background:transparent; color:#ef5350; border:1.5px solid #ef5350; box-shadow:0 2px 6px rgba(239,83,80,0.12);}
.btn-delete:hover{ background:#ef5350; color:#fff; box-shadow:0 3px 10px rgba(239,83,80,0.2); transform:translateY(-1px);}
.btn-primary{ background:linear-gradient(135deg,#7f86c9,#6b73b8); color:#fff; box-shadow:0 2px 6px rgba(127,134,201,0.25);}
.btn-primary:hover{ background:linear-gradient(135deg,#8e95d4,#7a82bf); box-shadow:0 3px 10px rgba(127,134,201,0.35); transform:translateY(-1px);}
.btn-revise{ background:linear-gradient(135deg,#1976d2,#1565c0); color:#fff; box-shadow:0 2px 6px rgba(25,118,210,0.25);}
.btn-revise:hover{ background:linear-gradient(135deg,#1e88e5,#1976d2); box-shadow:0 3px 10px rgba(25,118,210,0.35); transform:translateY(-1px);}
.certiPanel{ width:100%;}
.certi-info{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:linear-gradient(135deg,#fff8e1,#ffecb3); border-radius:6px; color:#f57c00; font-size:13px; font-weight:500; border:1px solid #ffd54f;}
.certi-info i{ font-size:16px;}
.certi-info a{ color:#f57c00; text-decoration:none; font-weight:600; margin-left:4px; transition:color 0.2s;}
.certi-info a:hover{ color:#e65100; text-decoration:underline;}

@media screen and (max-width:768px){
    .works-grid{ gap:12px;}
    .work-card-row{ flex-direction:column; padding:14px 16px; gap:14px; align-items:flex-start;}
    .work-img-wrapper{ width:80px; height:80px; min-width:80px;}
    .work-info-top{ flex-direction:column; align-items:flex-start; gap:8px;}
    .work-title{ max-width:none; font-size:15px; white-space:normal;}
    .work-status-badge{ align-self:flex-end; position:absolute; top:14px; right:14px;}
    .work-card{ position:relative;}
    .work-info-details{ gap:10px; font-size:12px;}
    .work-info-details span{ font-size:12px;}
    .work-card-footer{ flex-direction:column; align-items:stretch; padding:12px 16px;}
    .work-actions{ justify-content:stretch;}
    .work-actions .btn{ flex:1; justify-content:center; padding:8px 12px;}
    .reject-notice{ font-size:12px; padding:8px 12px;}
}

@media screen and (max-width:480px){
    .work-card-row{ padding:12px 14px; gap:12px;}
    .work-img-wrapper{ width:70px; height:70px; min-width:70px; border-radius:6px;}
    .work-title{ font-size:14px;}
    .status-label{ padding:3px 10px; font-size:11px;}
    .work-info-details{ flex-direction:column; gap:4px;}
    .btn{ padding:7px 14px; font-size:12px;}
}

.layui-laydate .layui-this, .layui-laydate .layui-this>div {
    background-color: #7f86c9 !important;
    color: #fff !important;
}

        .main-container { max-width: 1024px; margin: 32px auto 0; padding: 0 16px; }
        .card { background-color: #ffffff; padding: 32px; border-radius: 16px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border: 1px solid #f3f4f6; margin-bottom: 24px; }

        .section-header { margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #f9fafb; display: flex; justify-content: space-between; align-items: flex-end; }
        .page-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; color:#333}
        .page-desc { font-size: 0.875rem; color: #c1c1c1; }
        
        .count-badge { font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 9999px; background: #f3f4f6; color: #6b7280; transition: all 0.3s ease; }
        .count-badge.error { background: #fee2e2; color: #ef4444; }
        .count-badge.success { background: #dcfce7; color: #16a34a; }

        .panels-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
        .uppanel { aspect-ratio: 1 / 1; border-radius: 12px; border: 2px dashed #e5e7eb; background-color: #ffffff; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
        .uppanel:hover { border-color: #d1d5db; background-color: #fafafa; }
        .uppanel.filled { border-style: solid; border-color: #f3f4f6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); cursor: move; }

        .required-tag { position: absolute; top: 8px; left: 8px; background: #374151; color: white; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; z-index: 10; }
        .optional-tag { position: absolute; top: 8px; left: 8px; background: #f3f4f6; color: #9ca3af; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; z-index: 10; }

        .uppanel.dragging { opacity: 0.4; transform: scale(0.95); box-shadow: none; }
        .uppanel.drag-over { border-color: #000; background-color: #f9fafb; transform: scale(1.03); z-index: 20; border-width: 2px; }

        .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px; }
        .icon-circle { width: 40px; height: 40px; border-radius: 50%; background-color: #f9fafb; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
        .icon-svg { width: 20px; height: 20px; color: #9ca3af; display: block; }
        .slot-label { font-size: 11px; color: #9ca3af; font-weight: 600; }
        .preview-img, .preview-video { width: 100%; height: 100%; object-fit: cover; animation: fadeIn 0.3s ease-out; }

        .action-btns { position: absolute; top: 6px; right: 6px; display: none; gap: 6px; z-index: 35; }
        .uppanel.filled:hover .action-btns { display: flex; }
        
        .action-btn { padding: 6px; background-color: rgba(255, 255, 255, 0.95); border-radius: 50%; border: none; cursor: pointer; color: #374151; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; }
        .action-btn:hover { transform: scale(1.1); background-color: #ffffff; }
        .action-btn.remove-btn:hover { color: #ef4444; }
        .action-btn.preview-btn:hover { color: #3b82f6; }
        
        .media-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.6); color: white; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; }

        .uploading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 40; backdrop-filter: blur(2px); }
        .loader { width: 16px; height: 16px; border: 2px solid #e5e7eb; border-top-color: #374151; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 6px; }

        #mediaModal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); animation: fadeIn 0.2s ease-out; }
        #mediaModal .modal-content { position: relative; width: 90%; max-width: 960px; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
        #mediaModal .modal-content.video-mode { aspect-ratio: 16 / 9; }
        #mediaModal .modal-content.image-mode { max-height: 90vh; }
        #mediaModal video, #mediaModal img { max-width: 100%; max-height: 90vh; display: block; object-fit: contain; }
        #mediaModal .close-modal { position: absolute; top: -40px; right: 0; color: white; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; opacity: 0.8; transition: opacity 0.2s; }
        #mediaModal .close-modal:hover { opacity: 1; }

        .debug-section { margin-top: 32px; padding: 20px; background-color: #f9fafb; border-radius: 12px; border: 1px solid #f3f4f6; }
        .debug-title { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
        .status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
        .status-item { background-color: #ffffff; padding: 10px; border-radius: 8px; border: 1px solid #e5e7eb; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
        .status-label { color: #fff; margin-bottom: 4px; font-weight: 600; }
        .status-value { color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #f9fafb; padding: 4px 6px; border-radius: 4px; border: 1px solid transparent; }
        .status-value.empty { color: #d1d5db; font-style: italic; }
        .status-value:not(.empty) { border-color: #e5e7eb; color: #111827; }

        .submit-section { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
        .submit-btn { 
            background-color: #111827; 
            color: #ffffff; 
            padding: 16px 48px; 
            border-radius: 12px; 
            font-size: 1rem; 
            font-weight: 600; 
            border: none; 
            cursor: pointer; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
            display: flex; 
            align-items: center; 
            gap: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .submit-btn:hover { background-color: #1f2937; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        .submit-btn:active { transform: translateY(0); }
        .submit-btn.disabled { background-color: #9ca3af; cursor: not-allowed; transform: none; box-shadow: none; }
        .submit-btn .btn-loader { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #ffffff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
        .submit-btn.loading .btn-loader { display: block; }
        .submit-btn.loading .btn-text { opacity: 0.7; }
        
        .validation-hint { font-size: 0.875rem; color: #ef4444; font-weight: 500; min-height: 1.25rem; opacity: 0; transition: opacity 0.3s; }
        .validation-hint.show { opacity: 1; }

        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        
        .hidden { display: none !important; }
        
        /* �������� */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }


         /* ȫ�ֵ�������ʽ */
        .upload-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; visibility: hidden; opacity: 0; transition: all 0.3s; }
        .upload-modal.active { visibility: visible; opacity: 1; }
        .modal-content-box { background: white; padding: 24px; border-radius: 16px; width: 320px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .modal-title-text { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: #111827; }
        .progress-container { width: 100%; height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
        .progress-bar { height: 100%; width: 0%; background: #3498db; transition: width 0.1s linear; }
        .progress-text { font-size: 14px; font-weight: 600; color: #6b7280; }


        /*���ӽ�ʦ*/
        .teacherCon{background-color: #ffffff;    padding: 20px;    border-radius: 16px;    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);    border: 1px solid #f3f4f6;    margin-bottom: 24px;}
        .teacherBot{ width:100%; display:flex; align-items:center; justify-content:space-between;}
        .teacher_tit{ font-size:1rem; font-weight:normal; margin-bottom:10px; display:flex; justify-content:space-between; align-items:flex-end; width:100%}
        .teacherBot_tips{ color:#7f86c9;}
        .teacher_del{ display:block;}
        .teacher_del i{ font-size:1.7rem; color:#7f86c9}
        .teacherAdd{ background:#7f86c9 !important}
        #addAuthorBtn{ background:#7f86c9 !important}


        .view_works{ background:#fff; padding:20px; margin-bottom:30px;}
        .view_author{background:#fff;}
        .author-item-view{margin-bottom: 0px; padding: 20px;background-color: #fff; border-bottom:1px solid #ccc;}
        .author-header-tips{ font-size:0.9rem; color:#7f86c9}

         /*-- �Ҳม��������ť */
         .layui-layer-setwin .layui-layer-close2{ border:2px solid #fff !important; width:40px !important; height:40px !important; line-height:30px !important;}
        .float-nav {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .float-nav-item {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #eee 0%, #ccc 100%);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            color: #333;
            font-size: 12px;
            text-align: center;
            line-height: 1.4;
        }
        
        .float-nav-item:hover {
            color:#fff;
            transform: translateX(-5px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
            background: linear-gradient(135deg, #9ca3e8 0%, #7f86c9 100%);
        }
        
        .float-nav-item.active {
            color:#fff;
            background: linear-gradient(135deg, #7f86c9 0%, #7f86c9 100%);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .float-nav-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }
        .float-nav-icon i{ font-size:24px;}
        
        @media (max-width: 1200px) {
            .float-nav {
                right: 15px;
            }
            
            .float-nav-item {
                width: 60px;
                height: 60px;
                font-size: 11px;
            }
            
            .float-nav-icon {
                font-size: 20px;
            }
        }
        
        @media (max-width: 768px) {
            .float-nav {
                position: fixed;
                right: 10px;
                bottom: 20px;
                top: auto;
                transform: none;
                flex-direction: row;
            }
            
            .float-nav-item {
                width: 70px;
                height: 50px;
                font-size: 10px;
            }
            
            .float-nav-icon {
                font-size: 18px;
            }
        }

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
.matchUpload:hover{ background:#7f86c9; color:#fff}
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/ 
.clearfix { display:block; }