@charset "UTF-8";
	* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 100%);
			font-family: 'Noto Sans SC', 'Ma Shan Zheng', cursive, sans-serif;
			color: #333;
			overflow-x: hidden;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}

		#login_div {
			position: relative;
			width: 500px;
			text-align: center;
			padding: 40px 30px;
			background: white;
			border: 3px solid #2e7d32;
			border-radius: 15px;
			box-shadow: 0 8px 30px rgba(46, 125, 50, 0.2);
			z-index: 10;
		}

		#login_div::before {
			content: "";
			position: absolute;
			top: -6px;
			left: -6px;
			right: -6px;
			bottom: -6px;
			background: linear-gradient(45deg, #2e7d32, #4caf50, #81c784, #a5d6a7);
			z-index: -1;
			border-radius: 18px;
			opacity: 0.2;
			filter: blur(4px);
		}

		h1 {
			color: #1b5e20;
			font-size: 36px;
			margin-bottom: 25px;
			letter-spacing: 2px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15px;
		}

		h1::after {
			content: "";
			position: absolute;
			bottom: -8px;
			left: 50%;
			transform: translateX(-50%);
			width: 60%;
			height: 3px;
			background: linear-gradient(90deg, transparent, #2e7d32, transparent);
		}

		.logo-icon {
			font-size: 40px;
		}

		table {
			width: 100%;
			border-collapse: separate;
			border-spacing: 0 20px;
			margin: 20px 0;
		}

		tr {
			position: relative;
		}

		td {
			height: 55px;
			vertical-align: middle;
			text-align: left;
			position: relative;
		}

		.td_left {
			width: 100px;
			color: #1b5e20;
			font-size: 16px;
			font-weight: 500;
			padding-left: 5px;
		}

		.td_right {
			width: 330px;
			position: relative;
		}

		input {
			width: 100%;
			height: 48px;
			border: 2px solid #c8e6c9;
			background: white;
			color: #333;
			font-size: 16px;
			padding: 0 15px;
			outline: none;
			font-family: 'Noto Sans SC', sans-serif;
			box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
			transition: all 0.3s;
			border-radius: 8px;
		}

		input:focus {
			border-color: #2e7d32;
			box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
		}

		#imgVerifyCode {
			height: 48px;
			border: 2px solid #c8e6c9;
			background: white;
			vertical-align: middle;
			cursor: pointer;
			margin-left: 10px;
			box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
			border-radius: 8px;
			transition: all 0.3s;
		}

		#imgVerifyCode:hover {
			border-color: #2e7d32;
			transform: translateY(-1px);
		}

		#login_btn {
			margin-top: 30px;
			font-size: 18px;
			font-weight: 600;
			background: linear-gradient(to bottom, #2e7d32, #1b5e20);
			color: white;
			height: 55px;
			line-height: 55px;
			cursor: pointer;
			border: 2px solid #1b5e20;
			border-radius: 10px;
			box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
			transition: all 0.3s;
			position: relative;
			overflow: hidden;
			letter-spacing: 1px;
		}

		#login_btn:hover {
			background: linear-gradient(to bottom, #4caf50, #2e7d32);
			box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
			transform: translateY(-2px);
		}

		#login_btn:active {
			transform: translateY(0);
			box-shadow: 0 2px 10px rgba(46, 125, 50, 0.3);
		}

		#login_btn::after {
			content: "";
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: rgba(255, 255, 255, 0.1);
			transform: rotate(30deg);
			transition: all 0.5s;
		}

		#login_btn:hover::after {
			left: 100%;
		}

		.health-decoration {
			position: absolute;
			font-size: 24px;
			color: #4caf50;
			opacity: 0.3;
			z-index: 5;
		}

		.health-decoration.top-left {
			top: 15px;
			left: 15px;
		}

		.health-decoration.top-right {
			top: 15px;
			right: 15px;
		}

		.health-decoration.bottom-left {
			bottom: 15px;
			left: 15px;
		}

		.health-decoration.bottom-right {
			bottom: 15px;
			right: 15px;
		}

		.health-border {
			position: absolute;
			width: 100%;
			height: 5px;
			bottom: -3px;
			left: 0;
			background: linear-gradient(90deg, transparent, #4caf50, transparent);
			border-radius: 3px;
			opacity: 0.5;
		}

		.leaf-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			z-index: 1;
			overflow: hidden;
		}

		.leaf {
			position: absolute;
			background: #4caf50;
			border-radius: 50% 0 50% 50%;
			opacity: 0;
			animation: leaf-float 20s infinite linear;
		}

		@keyframes leaf-float {
			0% {
				transform: translateY(100vh) translateX(0) rotate(0deg);
				opacity: 0;
			}
			10% {
				opacity: 0.1;
			}
			90% {
				opacity: 0.1;
			}
			100% {
				transform: translateY(-100px) translateX(100px) rotate(360deg);
				opacity: 0;
			}
		}

		.health-glow {
			position: absolute;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(76, 175, 80, 0.2) 0%, transparent 70%);
			filter: blur(20px);
			z-index: 0;
			animation: health-pulse 6s infinite alternate;
		}

		.health-glow-1 {
			top: 10%;
			left: 10%;
		}

		.health-glow-2 {
			bottom: 10%;
			right: 10%;
		}

		@keyframes health-pulse {
			0% { transform: scale(1); opacity: 0.2; }
			100% { transform: scale(1.3); opacity: 0.4; }
		}

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

		.login-info a {
			color: #2e7d32;
			text-decoration: none;
			font-weight: 500;
			transition: color 0.3s;
		}

		.login-info a:hover {
			color: #1b5e20;
			text-decoration: underline;
		}

		.verify-container {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.verify-code-input {
			flex: 1;
		}

		.verify-code-img {
			flex-shrink: 0;
		}

		/* 响应式设计 */
		@media (max-width: 768px) {
			#login_div {
				width: 90%;
				max-width: 400px;
				padding: 30px 20px;
			}

			h1 {
				font-size: 28px;
			}

			.td_left {
				width: 80px;
				font-size: 15px;
			}

			.td_right {
				width: calc(100% - 80px);
			}

			input {
				height: 45px;
				font-size: 15px;
			}

			#imgVerifyCode {
				height: 45px;
			}

			#login_btn {
				height: 50px;
				line-height: 50px;
				font-size: 16px;
			}
		}

		@media (max-width: 480px) {
			#login_div {
				padding: 25px 15px;
			}

			h1 {
				font-size: 24px;
			}

			.logo-icon {
				font-size: 32px;
			}

			.td_left {
				width: 70px;
				font-size: 14px;
			}

			input {
				height: 42px;
				font-size: 14px;
			}

			#imgVerifyCode {
				height: 42px;
			}

			.verify-container {
				gap: 8px;
			}
		}

		/* 输入框图标 */
		.input-with-icon {
			position: relative;
		}

		.input-icon {
			position: absolute;
			left: 15px;
			top: 50%;
			transform: translateY(-50%);
			color: #4caf50;
			font-size: 18px;
			pointer-events: none;
		}

		.input-with-icon input {
			padding-left: 45px;
		}

		/* 表单错误状态 */
		input.error {
			border-color: #f44336;
			background-color: #ffebee;
		}

		.error-message {
			color: #f44336;
			font-size: 12px;
			margin-top: 5px;
			text-align: left;
			display: none;
		}

		input.error + .error-message {
			display: block;
		}

		/* 加载状态 */
		#login_btn.loading {
			pointer-events: none;
			opacity: 0.7;
		}

		#login_btn.loading::before {
			content: '';
			display: inline-block;
			width: 16px;
			height: 16px;
			border: 2px solid rgba(255, 255, 255, 0.3);
			border-top-color: white;
			border-radius: 50%;
			animation: loading-spin 0.8s linear infinite;
			margin-right: 10px;
			vertical-align: middle;
		}

		@keyframes loading-spin {
			to { transform: rotate(360deg); }
		}
		
		.logo-container {
		    text-align: center;
		}
		
		.top-logo {
		    width: 120px;          
		    margin-bottom: 10px; 
		}
		
		.logo-text {
		    font-size: 20px;
		    font-weight: bold;
		}
		
		.logo-icon {
		    margin: 0 5px;
		}
		/* 在您的 style 标签中添加 */
		.footer-copyright {
		    text-align: center;
		    margin-top: 20px;
		    padding: 10px 0;
		    font-size: 14px;
		    color: #1b5e20;
		    position: relative;
		    z-index: 10;
		}
		
		/* 如果想添加一些装饰 */
		.footer-copyright::before,
		.footer-copyright::after {
		    content: "🌿";
		    margin: 0 10px;
		    opacity: 0.5;
		}
		.page-wrapper {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		}
		
		@media (max-width: 767px) {
			.input-icon {
				position: absolute;
				left: 15px;
				top: 35%;
				transform: translateY(-50%);
				color: #4caf50;
				font-size: 18px;
				pointer-events: none;
			}
		}