/*login页面和index页面的公共样式 */
/*登录页面样式 */
.container {width: 80% ; max-width: 1200px; height: 100%; margin: 41px auto; background-color: rgba(255, 241, 255, 0.63);
    border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); overflow: hidden; position: relative;}
.login-form {width: 400px; padding: 41px; background: rgba(255, 255, 255, 0.92); border-radius: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-align: center; margin: 41px auto;}
@media (max-width: 600px) {
	.login-form {width: auto;}
}

.logo {margin-bottom: 30px;}
.logo img{ height: 63px; width: auto;}
.logo h1 {color: #111; margin-top: 10px; font-size: 28px; font-family: yuanTi;}

.input-group {margin-bottom: 20px; text-align: left;}
.input-group label {display: block; margin-bottom: 8px; font-weight: 600; color: #444;}
.input-group input {width: calc(100% - 14px); padding: 14px; border: 2px solid #faf; border-radius: 10px; font-size: 16px; transition: border-color 0.3s;}
.input-group input:focus {border-color: #b0b; outline: none;}
.required::after {content: " *"; color: #f00;}

.login-btn {width: 60%; padding: 15px; background: #eaaeee; margin-top: 10px;
    color: #eee; border: none; border-radius: 10px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s;}
.login-btn:hover {transform: translateY(-3px); box-shadow: 0 5px 15px rgba(122, 0, 122, 0.2);}

.tips{font-size: 12px; margin-top: 12px; color: #aaa;}
/* 主页面样式 */
@media (min-width: 918px){
	.container-index{top: 0; right: 0; width: 410px; height: 100%; }
	#profilePhoto{margin: 0 0 2px 121.5px;}
	.login-btn1{display: block;}
	.login-btn2{display: none;}
	.content-area{padding: 30px;}
	.page-header{margin-bottom: 30px; padding-bottom: 15px;}
	.user-info-card {padding: 22px;}
}
@media (max-width: 918px){
	.container-index{top: 200px; width: 100%; height: 300px;}
	.card-leftAndRight, .card-top{display: flex;}
	.card-top{justify-content: center;}
	.card-left{flex: 3;}
	.card-right{flex: 4;}
	#profilePhoto{margin: 0 63px 2px 0px;}
	.login-btn1{display: none;}
	.login-btn2{display: block; position: fixed; top: 192px; right: 32px;}
	.content-area{padding: 15px;}
	.page-header{margin-bottom: 8px; padding-bottom: 8px;}
	.user-info-card {padding: 12px 12px 4px 12px;}
}
.container-index{position: fixed; padding: 5px; background-color: rgba(255, 249, 255, 0.92); border-left: 1px solid #faf; }
.content-area {overflow-y: auto;}
.page-header {justify-content: space-between; align-items: center;  
	border-bottom: 2px solid #F7C7F7;}
.page-header h1 {color: #111; font-size: 28px; font-family: yuanTi; padding-bottom: 6px;}
#current-time{font-family: moe;}
/*用户信息*/
.user-info-card {background-color: rgba(255, 249, 255, 0.95); border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	max-width: 600px; margin: 0 auto;}
#profilePhoto{height: 63px; width: 63px; position: relative; top: -6px; overflow: hidden; background: #ccc; border-radius: 50%;}
#profilePhoto img{height: 63px; width: auto; border-radius: 50%;}
.profilePhoto-head,.profilePhoto-body{background: #666; border-radius: 50%; left: 50%; transform: translate(-50%, -50%);}
.profilePhoto-head{height: 32px; width: 32px; position: absolute; top: 50%;}
.profilePhoto-body{height: 52px; width: 52px; position: relative; top: 52px;}
.card-header {text-align: center; margin-bottom: 30px;}
.card-header h2 {color: #111; font-size: 22px; font-family: moe; line-height: 30px;}
.card-header p {color: #777; font-size: 16px; font-family: yuanTi;}

.info-item {display: flex; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee;}
.info-label {flex: 2; width: 120px; font-weight: bold; color: #555; font-family: yuanTi;}
.info-value {flex: 5; color: #333; font-size: 18px; font-family: yuanTi;}
#info-join-time{padding-bottom: 6px;}
.member-badge {background: linear-gradient(to right, #ede 40%, #fdf 80%); color: #b0b; padding: 5px 10px;
    border-radius: 20px; font-size: 14px; display: inline-block; margin-left: 6px;}
.admin-badge {background: linear-gradient(to right, #d4af37, #c9a227); color: white;
	padding: 5px 15px; border-radius: 20px; font-size: 14px; display: inline-block; margin-left: 10px;}
.logout-btn {margin: 30px auto 0; padding: 12px 30px; background: #eaaeee;
    color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s;
}
.logout-btn:hover {transform: translateY(-3px); box-shadow: 0 5px 15px rgba(122, 0, 122, 0.2);}
/*主页面左*/
.left{opacity: 0.92;}
/*sections*/
@media (min-width: 1258px){
	.sections{width: 838px; margin: 0 auto;}
	.section a{height: 192px;}
	.sectionIntro{width: 355.6px;}
}
@media only screen and (min-width: 1092px) and (max-width: 1258px) {
	.sections{width: 672px; margin: 0 auto;}
	.section a{height: 147px;}
	.sectionIntro{width: 272.2px;}
}
@media only screen and (min-width: 918px) and (max-width: 1092px){
	.sections{width: 498px; margin: 0 auto;}
	.section a{height: 100px;}
	.sectionIntro{width: 185.2px;}
}
@media (max-width: 918px){
	.sections{width: 672px; margin: 500px auto 0 auto;}
	.section a{height: 147px;}
	.sectionIntro{width: 272.2px;}
}
/*banner*/
@media (min-width: 918px){
	.indexBanner{width: calc(100% - 421px);}
	.left{margin: 200px 421px 0 0;}
}
@media (max-width: 918px){
	.indexBanner{width: 100%;}
	.left{margin: 200px 0 0 0;}
}
.indexBanner{height: 200px; position: fixed; top: 0; z-index: 1; transition: background 1.2s; 
	background: #fef;}
.indexBanner::before, .indexBanner::after {
	content: ''; position: absolute; top: 0; height: 100%; width: 49%; transition: width 1.2s ease; z-index: 1;}
/* 左侧深色+渐变区域 */
.indexBanner::before {left: 0; background-image: linear-gradient(to right, #fdf 0%, #fdf 41%, #fef 92%);
    background-position: left;
}
/* 右侧深色+渐变区域 */
.indexBanner::after {right: 0; background-image: linear-gradient(to left,  #fdf 0%, #fdf 41%, #fef 92%);
    background-position: right;
}
/* 悬停时两侧区域变宽（深色区域位置不变，渐变区域向中间扩展） */
.indexBanner:hover::before,.indexBanner:hover::after {width: 10%;}

.THEME{height: 63px; width: 380px; margin: 0 auto; position: relative; margin-top: 16px; z-index: 2;}
.THEME img{width: auto; display: inline-block;}
.THEME img:nth-child(1){height: 56px;}
.THEME img:nth-child(2){height: 49px; vertical-align: 2px; border-right: 5px solid #111;
	padding-right: 11px; margin-right: 11px;}
.THEME span{font-family: wenKai; font-size: 46px; color: #111; vertical-align: 9px; display: inline-block;}
.WELCOME{width: 410px; margin: 6px auto; text-indent: 2em; font-family: wenKai; font-size: 20px; line-height: 30px;
	position: relative; z-index: 2;}
.ICON{height: 41px; width: 141px; margin: 0 auto;position: relative; z-index: 2;}
.ICON img{width: 24px; height: 24px;}
.iconButton{display: inline-block;}
#Contact{float: right;}
.sections{height: calc(100vh - 200px); min-height: 630px; padding-bottom: 41px; background: rgba(255,249,255,0.63);}
.section{display: inline-block; margin: 22px 0 0 11px; padding: 22px; transition: background 0.3s; 
	background: #f9e9f9; opacity: 0.92; border-radius: 1px;}
.section a{display: inline-block; aspect-ratio: 1 / 0.54; -webkit-aspect-ratio: 1 / 0.54; 
	transition: transform 0.3s, box-shadow 0.3s; overflow: hidden; position: relative;
	box-shadow: 0 5px 15px rgba(122, 0, 122, 0.41);}
.section:hover{background: #fcf;}
.section a:hover{transform: translateY(-3px); box-shadow: 0 5px 15px rgba(92, 0, 92, 0.63);}
.section a::before{
	content: ''; position: absolute; top: 0; left: 0px; width: 55px; height: 100%; 
	background-image: linear-gradient(90deg, rgba(255, 249, 255, 0) 0%, rgba(255, 249, 255, 0.22) 50%, rgba(255, 249, 255, 0) 100%); 
	opacity: 0.8; transform: skewX(50deg) translateX(630px); transition: 1.22s;
}
.section a:hover::before{transform: skewX(50deg) translateX(-200px);}
.sectionImg{width: 100%; height: 100%; display: inline-block;}
.sectionImg img{height: 100%; width: 100%; object-fit: cover;}
.section .headline{font-size: 19px; font-family: wenKai;}
.section .sectionIntro{font-size: 15px; font-family: wenKai;}
/* 弹窗样式 */
.modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center;
    align-items: center; z-index: 1000;}
.modal-content {background: white; border-radius: 15px; padding: 40px; text-align: center; max-width: 500px; width: 90%;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); animation: modalAppear 0.4s ease-out;}

@keyframes modalAppear {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-icon {font-size: 60px; margin-bottom: 20px; color: #aaa;}
.welcome-member .modal-icon {color: #aaa;}
.modal h2 {font-size: 28px; margin-bottom: 15px; color: #111;}
.welcome-member h2 {color: #111;}
.modal p { font-size: 18px; color: #555; margin-bottom: 25px;}
.modal-btn {padding: 12px 35px; background: #eaaeee; color: white; border: none;
    border-radius: 10px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s;}
.modal-btn:hover {transform: translateY(-3px); box-shadow: 0 5px 15px rgba(122, 0, 122, 0.2);}
/* 错误提示弹窗 */
.error-modal .modal-content {text-align: center;}
.error-modal .modal-icon {color: #d9534f;}
.error-modal h2 {color: #d9534f;}