/*用户登录注册后台*/


:root {
    /* 主色调 - 采用经典深蓝色系 */
    --primary-color: #2c3e50;
    --primary-dark: #1a252f;
    --primary-light: rgba(44, 62, 80, 0.1);
    
    /* 辅助色 */
    --success-color: #27ae60;
    --success-dark: #219653;
    --danger-color: #e74c3c;
    --danger-alt: #c0392b;
    --sms-primary: #3498db;
    --sms-dark: #2980b9;
    --sms-darker: #2471a3;
    --sms-disabled: #bdc3c7;
    
    /* 中性色 */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-tertiary: #95a5a6;
    --text-quaternary: #34495e;
    --bg-primary: #ecf0f1;
    --bg-secondary: #ffffff;
    --border-primary: #dcdde1;
    --border-secondary: #eaecee;
    --border-tertiary: #f1f2f6;
    --bg-tertiary: #f8f9fa;
    --shadow-primary: rgba(0, 0, 0, 0.1);
    --sms-shadow: rgba(52, 152, 219, 0.2);
    
    /* 字体大小 */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 15px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 40px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
}

a {
    text-decoration: none;
}

body {
    background-color: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 900px;
    gap: 60px;
}

.login-promo {
    flex: 1;
    max-width: 400px;
}

.site-logo {
    display: inline-block;
    margin-bottom: 15px;
    text-align:center;
}

.site-logo img {
    width:100%;
   border-radius:10px;
}

.login-promo h1 {
    color: var(--primary-color);
    font-size: 28px;
    margin-bottom: 15px;
}

.login-promo p {
    color: var(--text-primary);
    font-size: var(--font-lg);
    line-height: 1.5;
}

.login-card {
    width: 420px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-primary);
    padding: 20px;
}

/* 错误提示 */
.error-message {
    color: var(--danger-color);
    font-size: var(--font-sm);
    margin: 15px 0;
    text-align: center;
    display: block;
    width: 100%;
    clear: both;
    padding: 0;
}

/* 登录选项卡样式 */
.login-tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-secondary);
}

.tab-btn {
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-tertiary);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.tab-btn.active {
    color: var(--sms-primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--sms-primary);
}

.tab-btn:hover:not(.active) {
    color: var(--text-quaternary);
}

/* 选项卡内容样式 */
.login-tab-content {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

.form-group {
    margin-bottom: 15px;
}

.form-control {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-size: var(--font-base);
    transition: all 0.2s;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-light);
    outline: none;
}

.captcha-group {
    display: flex;
    gap: 10px;
}

.captcha-image {
    width: 120px;
    height: 45px;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    letter-spacing: 5px;
    user-select: none;
    cursor: pointer;
    color: var(--text-secondary);
}

.login-btn {
    width: 100%;
    height: 45px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 4px;
    color: var(--bg-secondary);
    font-size: var(--font-md);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 10px;
}

.login-btn:hover {
    background-color: var(--primary-dark);
}

.forgot-password {
    display: block;
    text-align: center;
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--font-sm);
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-tertiary);
}

.forgot-password:hover {
    text-decoration: underline;
}

.register-btn {
    display: block;
    width: 100%;    
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: var(--success-color);
    border: none;
    border-radius: 4px;
    color: var(--bg-secondary);
    font-size: var(--font-md);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 0 auto;
}

.register-btn:hover {
    background-color: var(--success-dark);
}

.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: var(--font-sm);
}

.remember-me {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.remember-me input {
    margin-right: 5px;
}

.error-text {   
    color: var(--danger-alt);     
    font-size: var(--font-sm);        
}

/* 短信 verification code button style */
.get-sms-code {
    /* 基础样式 */
    padding: 0 16px;
    height: 44px; /* 与输入框高度一致 */
    background-color: var(--sms-primary);
    color: var(--bg-secondary);
    border: none;
    border-radius: 4px;
    font-size: var(--font-sm);
    cursor: pointer;
    white-space: nowrap; /* 防止文字换行 */
    
    /* 交互效果 */
    transition: all 0.2s ease;
}

.disabled { background-color: #eee; cursor: not-allowed; }

/* 悬停状态 */
.get-sms-code:hover {
    background-color: var(--sms-dark);
    box-shadow: 0 2px 8px var(--sms-shadow);
}

/* 点击状态 */
.get-sms-code:active {
    background-color: var(--sms-darker);
}

/* 禁用状态（倒计时时） */
.get-sms-code:disabled {
    background-color: var(--sms-disabled);
    cursor: not-allowed;
    box-shadow: none;
}


/* 同意条款区域样式 */
.agree-terms {
    margin-bottom: 25px;
    padding: 5px 0;
}

.agree-terms .remember-me {
    display: flex;
    align-items: flex-start; /* 使复选框与多行文本顶部对齐 */
    flex-wrap: wrap; /* 允许文本换行 */
    line-height: 1.5; /* 优化行高，提高可读性 */
    font-size: var(--font-sm);
}

.agree-terms .remember-me input {
    margin-right: 8px;
    margin-top: 3px; /* 微调复选框位置，使其与文本中线对齐 */
    flex-shrink: 0; /* 防止复选框被压缩 */
}

.terms-link {
    color: var(--sms-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 0 2px;
}

.terms-link:hover {
    color: var(--sms-dark);
    text-decoration: underline;
}

/* 错误提示位置调整 */
.agree-terms + .error-text {
    margin-top: -20px;
    margin-bottom: 20px;
    display: block;
}