/* 全局基础样式 - 兼容所有浏览器 */
    * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-family: 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    html, body {
        height: 100%;
        background-color: #f8f9fa;
        color: #333;
        line-height: 1.5;
        font-size: 13px;
    }

    body {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
    }

	/* 导航栏样式 */
	.main-nav {
		background-color: #fff;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		padding: 0 20px;
	}

	.nav-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 1200px;
		margin: 0 auto;
		height: 60px;
	}

	.nav-brand a {
		color: #315efb;
		font-size: 20px;
		font-weight: bold;
		text-decoration: none;
		margin-left: 20px; /* 品牌logo左间距20px */
	}

	.nav-menu {
		display: flex;
		list-style: none;
		margin-left: -20px; /* 菜单项整体向左移动20px */
		flex-grow: 1; /* 让菜单占据剩余空间 */
		padding-left: 20px; /* 补偿向左移动的20px */
	}

	.nav-menu li {
		margin: 0 15px;
	}

	.nav-menu a {
		color: #555;
		text-decoration: none;
		font-size: 14px;
	}

	.nav-menu a:hover {
		color: #315efb;
	}

	.nav-actions {
		display: flex;
		gap: 10px;
		margin-right: 20px; /* 确保按钮右侧有间距 */
	}

	.btn-nav {
		padding: 6px 15px;
		border-radius: 4px;
		font-size: 13px;
		text-decoration: none;
		transition: all 0.3s;
		color: #555;
		border: 1px solid #ddd;
		background-color: #fff;
	}

	.btn-nav.btn-primary {
		background-color: #315efb;
		color: white;
		border-color: #315efb;
	}

	.btn-nav:hover {
		opacity: 0.9;
		transform: translateY(-1px);
	}



    /* 主内容区 - 兼容性修复 */
    .container {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        align-items: center;
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
        width: 100%;
    }

    .login-wrapper {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        width: 100%;
        max-width: 800px;
        background-color: #fff;
        border-radius: 8px;
        -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        overflow: hidden;
        min-height: 400px;
    }

    /* 左侧图片展示区 */
    .login-image {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background: #315efb;
        background: -webkit-linear-gradient(135deg, #4e6ef2, #315efb);
        background: -moz-linear-gradient(135deg, #4e6ef2, #315efb);
        background: -o-linear-gradient(135deg, #4e6ef2, #315efb);
        background: linear-gradient(135deg, #4e6ef2, #315efb);
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        align-items: center;
        padding: 20px;
        color: white;
        text-align: center;
    }

    .login-image img {
        max-width: 70%;
        max-height: 150px;
        margin-bottom: 15px;
        width: auto;
        height: auto;
    }

    .login-image h2 {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .login-image p {
        opacity: 0.9;
        font-size: 12px;
        margin: 0;
    }

    /* 右侧注册表单区 */
    .auth-container {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 20px;
        max-width: 400px;
        width: 100%;
    }

    .auth-title {
        color: #315efb;
        font-size: 18px;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .auth-description {
        color: #666;
        margin-bottom: 15px;
        font-size: 12px;
    }

    /* 表单样式 */
    .form-row, .captcha-row {
        margin-bottom: 12px;
    }

    .form-label, .captcha-label {
        display: block;
        color: #555;
        font-weight: 500;
        margin-bottom: 5px;
        font-size: 12px;
    }

    .form-label i, .captcha-label i {
        margin-right: 5px;
        color: #9ca3af;
        width: 14px;
        text-align: center;
        font-size: 13px;
    }

    .input-container, .captcha-input-container {
        position: relative;
        width: 100%;
    }

    .form-control {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 3px;
        font-size: 13px;
        height: 32px;
        -webkit-transition: border-color 0.3s ease, -webkit-box-shadow 0.3s ease;
        -moz-transition: border-color 0.3s ease, box-shadow 0.3s ease;
        -o-transition: border-color 0.3s ease, box-shadow 0.3s ease;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .password-toggle {
        position: absolute;
        right: 8px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #9ca3af;
        cursor: pointer;
        padding: 6px;
        font-size: 13px;
    }

    /* 验证码 */
    .captcha-input-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        align-items: center;
    }

    .captcha-img {
        width: 70px;
        height: 32px;
        border-radius: 3px;
    }

    /* 协议同意复选框 */
    .agree-checkbox {
        display: flex;
        align-items: center;
        margin: 15px 0;
        font-size: 12px;
        color: #666;
    }
    
    .agree-checkbox input {
        margin-right: 8px;
    }
    
    .agree-checkbox a {
        color: #315efb;
        text-decoration: none;
    }

    /* 按钮 */
    .btn-submit {
        width: 100%;
        padding: 7px;
        height: 32px;
        line-height: 18px;
        background-color: #315efb;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 13px;
    }
    
    .btn-submit:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

    /* 已有账号登录 */
    .text-center {
        text-align: center;
        margin-top: 15px;
        font-size: 12px;
        color: #666;
    }
    
    .text-center a {
        color: #315efb;
        text-decoration: none;
    }

    /* 页脚 */
    .footer {
        background-color: #f3f4f6;
        padding: 15px 0;
        text-align: center;
        margin-top: auto;
        width: 100%;
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .footer-info p {
        color: #6b7280;
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .login-wrapper {
            -webkit-flex-direction: column;
            -moz-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            min-height: auto;
        }
        
        .login-image {
            padding: 15px;
            display: none;
        }
        
        .auth-container {
            padding: 20px;
            max-width: 100%;
        }
        
        .nav-container {
            flex-direction: column;
            height: auto;
            padding: 10px 0;
        }
        
        .nav-menu {
            margin: 10px 0;
        }
        
        .nav-actions {
            margin-bottom: 10px;
        }
    }
	
	/* 用户头像样式 */
	.user-profile {
		display: flex;
		align-items: center;
	}

	.user-avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		object-fit: cover;
		margin-right: 8px;
		border: 2px solid #315efb;
	}

	.user-link {
		display: flex;
		align-items: center;
		padding: 4px 12px;
		text-decoration: none;
	}

	.username {
		font-size: 14px;
		color: #555;
		transition: color 0.3s;
	}

	.user-link:hover .username {
		color: #315efb;
	}

	/* 调整导航按钮样式 */
	.btn-nav {
		padding: 6px 15px;
		border-radius: 20px;
		transition: all 0.3s;
	}