.tcLogin {width:100%;height:100vh;position:absolute;top:0;left:0;
	justify-content: center;
	align-items: center;
	overflow-x: hidden;
	background-color: white;
	background: linear-gradient(135deg, #6e8efb, #a777e3, #6e8efb);
	display: flex;  
	/* display: none; */
	}


 




/* 背景装饰元素 */
.bg-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
	background: linear-gradient(135deg, #6e8efb, #a777e3);
    overflow: hidden;
}

.bg-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
    background: rgba(255, 255, 255, 0.15);
}

.circle-2 {
    width: 200px;
    height: 200px;
    bottom: -100px;
    right: -100px;
    background: rgba(255, 255, 255, 0.1);
}

.circle-3 {
    width: 400px;
    height: 400px;
    bottom: -200px;
    left: 30%;
    background: rgba(255, 255, 255, 0.05);
}

.bg-shape {
    position: absolute;
    opacity: 0.1;
}

.shape-1 {
    width: 100px;
    height: 100px;
    background: #ff7e5f;
    transform: rotate(45deg);
    top: 20%;
    left: 10%;
}

.shape-2 {
    width: 80px;
    height: 80px;
    background: #feb47b;
    transform: rotate(30deg);
    bottom: 15%;
    right: 15%;
}

.shape-3 {
    width: 120px;
    height: 120px;
    background: #7be0ff;
    transform: rotate(60deg);
    top: 50%;
    right: 10%;
}

/**
 * 注册界面
 */
.top-bar {
	background-color: #2968ed;
	width: 100%;
	color: white;
	padding: 8px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	position: fixed;
	left: 0;top: 0;
	
}

.main-content {
	width: 100%;
	height: 100%;padding-top: 78px;
	
}

.logo-top {width: 40px;height: 40px}

.carousel-container {
	padding: 15px;
	background-color: white;
	border: 10px solid #2968ed;
	border-radius: 8px;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.carousel-item img {
	
	object-fit: cover;
}

.auth-box {
	padding: 25px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	min-height: 400px;
}

.auth-form {
	transition: all 0.5s ease;
	position: absolute;
	width: calc(100% - 50px);
}

.login-form {
	left: 25px;
	opacity: 1;
}

.register-form {
	left: calc(100% + 25px);
	opacity: 0;
}

.auth-box.active .login-form {
	left: -100%;
	opacity: 0;
}

.auth-box.active .register-form {
	left: 25px;
	opacity: 1;
}

.auth-box.active2 .login-form {
	left: 100%;
	opacity: 0;
}

.auth-box.active2 .forget-form {
	left: 25px;
	opacity: 1;
}


.form-title {
	margin-bottom: 20px;
	color: #343a40;
	font-weight: 600;
}

.toggle-auth {
	color: #6c757d;
	cursor: pointer;
	font-size: 14px;
	margin-top: 15px;
	display: inline-block;
}

.toggle-auth:hover {
	color: #007bff;
	text-decoration: underline;
}

.btn-primary {
	background-color: #007bff;
	border-color: #007bff;
}

.footer {
	width: 100%;
	margin-top: 50px;
	padding: 20px 0;
	background-color: #2968ed;
	color: white;
	text-align: center;
	position: fixed;left: 0;bottom: 0
}

/* 轮播调整 */
.lunbo-1 {right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.6);text-align: center;padding: 10px 0px;}
.carousel-indicators {margin-bottom: 5px;}
.lunbo-2 {font-size: 18px;line-height: 14px;text-indent: 2rem;}
.lunbo-3 {font-size: 12px;line-height: 12px;text-indent: 2rem;}
/* 注册框 */
.auth-box {overflow-y: scroll;min-height: 495px;border: 10px solid #2968ed;}
.auth-box::-webkit-scrollbar {width: 5px; /* 滚动条宽度 */}
.auth-box::-webkit-scrollbar-track {background-color: #fff; /* 滚动条轨道颜色 */border-radius: 4px;}
.auth-box::-webkit-scrollbar-thumb {background-color: #eee; /* 滚动条滑块颜色 */border-radius: 4px;}
.auth-box::-webkit-scrollbar-thumb:hover {background-color: #ddd; /* 鼠标悬停颜色 */}
.form-label {margin-bottom: 0px;}
.btn-primary {font-size: 15px !important;}
.magin-bottom-10 {margin-bottom: 10px !important;}
.register-form {padding-top: 20px;padding-bottom: 40px}
#registerEmail {display: inline-block;width: 65%;}
.sendCode {display: inline-block;width: 33%;padding: 10px 10px;font-size: 1rem;line-height: 1;border: 1px solid #efefef;border-radius: 8px;text-align: center;}
.sendCodeHove:hover {background-color: #333;color: white;cursor: pointer;}
/* 忘记密码 */
.forget-form {left: calc(-100% - 25px);opacity: 0;}
#registerEmail2 {display: inline-block;width: 65%;}





.displaybolck {display: block;}

/* 登录容器 */
.login-container {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    width: 400px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    z-index: 1;
    position: relative;
    transition: all 0.3s ease;
}

.login-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2 {
    color: #333;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.login-header p {
    color: #666;
    font-size: 14px;
}

.form-group {
    margin-bottom: 25px;
	width: 100%;
    position: relative;
}

.form-group input {
    width: 92%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.8);
}

.form-group input:focus {
    border-color: #6e8efb;
    box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.2);
    outline: none;
}

.form-group label {
    position: absolute;
    left: 10px;
    top: -10px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    background: white;
    padding: 0 5px;
    color: #6e8efb;
}

.form-group i {
    position: absolute;
    left: 15px;
    top: 15px;
    color: #999;
    font-size: 18px;
}

.login-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, #6e8efb, #a777e3);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.login-btn:hover {
    background: linear-gradient(45deg, #5d7df9, #9665d8);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(110, 142, 251, 0.4);
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: #666;
}

.login-footer a {
    color: #6e8efb;
    text-decoration: none;
    font-weight: 600;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* 通知提示 */
.notification {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: top 0.5s ease;
    z-index: 1000;
}

.notification.show {
    top: 20px;
}

.notification i {
    margin-right: 10px;
    font-size: 20px;
}

.notification.success i {
    color: #4CAF50;
}

.notification.error i {
    color: #F44336;
}

.notification-message {
    font-size: 14px;
    color: #333;
}


/* 大柜子的样式 */
.content-big {position: relative}
						
#xiangzis {
width: 260px;
height: 500px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0px;
/* background-color: #eee; */
padding: 1px;
box-sizing: border-box;
overflow: hidden;
position: absolute;
top: 30px;
left: 20px;
}

.box {
height: 89px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0px;
background-color: #fff;
border: 2px solid #bfdbfe;
/* box-sizing: border-box; */
margin-right: 35px;
/* margin-bottom: 5px; */
/* margin-top: 5px; */
margin-left: 8px;
padding: 1px;
position: relative; /* 确保伪元素相对于盒子定位 */
}

.cell {
width: 100%;
aspect-ratio: 1 / 1;
width: 24px;
height: 7px;
border: 1px solid #bfdbfe;
box-sizing: border-box;
background-color: #ffffff;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
}


.cell.occupied {
  /* border-color: #a0cfff; */
  background-color: #a0d7a3;
}
.cell.important {
  /* border-color: #ff9999; */
  background-color: #ff6699;
}

.box:hover {
	/* transform: scale(1.1); */
	transition: transform 0.2s ease;
	border: 2px solid #2968ed;
	cursor: pointer;
}
.box:active {transform: scale(0.96);}

.boxActived {
	border: 2px solid #ffab91;
}

 

/* 重点盒子样式,流光效果 */
.boxActived {
  border: 2px solid transparent; /* 清除默认边框 */
  background: linear-gradient(45deg, #ff4d4d, #ff9933, #ffff00, #33cc33, #0099ff, #9966cc, #ff66cc, #ff4d4d);
  background-size: 600% 600%; /* 设置背景尺寸 */
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 100%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 100%; }
}





/* 复制一份给新增卡片的界面 */
/* 大柜子的样式 */
#newCardBoxList {
width: 100%;
height: 90%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0px;
/* background-color: #eee; */
padding: 1px;
box-sizing: border-box;
overflow: hidden;
text-align: center;
margin-top: 20px;
}

.newcard-box {
display: grid;
width: 87px;
grid-template-columns: repeat(4, 1fr);
gap: 0px;
background-color: #fff;
border: 2px solid #bfdbfe;
box-sizing: border-box;
margin: auto;
/* margin-right: 1px;
margin-bottom: 1px;
margin-top:1px;
margin-left: 1px; */

position: relative; /* 确保伪元素相对于盒子定位 */
}

.newcard-cell {
display: inline-block;
aspect-ratio: 1 / 1;
width: 19px;
height: 3px;
border: 1px solid #bfdbfe;
box-sizing: border-box;
background-color: #ffffff;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
}
.cell-newcard{
	border: 2px solid #bfdbfe;
}

.newcard-cell.occupied {
  /* border-color: #a0cfff; */
  background-color: #a0d7a3;
}
.newcard-cell.important {
  /* border-color: #ff9999; */
  background-color: #ff6699;
}

.newcard-box:hover {
	/* transform: scale(1.1); */
	border: 2px solid #1890ff !important;
	cursor: pointer;
}

.newcard-boxActived {
	/* border: 2px solid #1890ff !important; */
	outline: 2px solid #1890ff;
}