/* ================= 登录页专属核心样式 ================= */

.login-box {
    background: #fff;
    padding: 40px 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin: 20px 15px 30px;
    position: relative;
    z-index: 10;
}
.login-header { text-align: center; margin-bottom: 30px; }
.login-header h2 { font-size: 22px; color: #333; margin: 0 0 5px; font-weight: bold; }
.login-header p { font-size: 13px; color: #999; margin: 0; }

.input-group { 
    background: #f8f9fa; 
    border-radius: 25px; 
    padding: 12px 20px; 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
    border: 1px solid transparent;
    transition: border-color 0.3s;
}
.input-group:focus-within { border-color: #009688; background: #fff; }
.input-group input { border: none; background: transparent; width: 100%; font-size: 15px; outline: none; color: #333; }

.submit-btn { 
    width: 100%; 
    background: linear-gradient(90deg, #009688, #00796b); 
    color: #fff; border: none; padding: 14px; 
    border-radius: 25px; font-size: 16px; font-weight: bold; 
    margin-top: 10px; cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,150,136,0.3); 
    transition: transform 0.2s, box-shadow 0.2s; 
}
.submit-btn:active { transform: scale(0.98); box-shadow: 0 2px 5px rgba(0,150,136,0.2); }

.form-options { display: flex; justify-content: space-between; font-size: 13px; margin: 20px 10px 0; }
.form-options a { color: #666; transition: color 0.2s; text-decoration: none; }
.form-options a:hover { color: #009688; }

/* --- 第三方登录区域 --- */
.third-party-login { margin-top: 50px; text-align: center; }
.third-party-title { font-size: 12px; color: #bbb; position: relative; margin-bottom: 25px; display: inline-block; width: 100%; }
.third-party-title::before, .third-party-title::after { content: ''; position: absolute; top: 50%; width: 28%; height: 1px; background: #eee; }
.third-party-title::before { left: 0; }
.third-party-title::after { right: 0; }

.third-party-icons { display: flex; justify-content: center; gap: 35px; }
.tp-icon { 
    width: 48px; height: 48px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    background: #f8f9fa; border: 1px solid #f0f0f0; 
    transition: transform 0.2s; 
    text-decoration: none;
}
.tp-icon:active { transform: scale(0.9); }
.tp-icon.wx { background: #eafff1; border-color: #bdf2cf; }
.tp-icon.qq { background: #eaf8ff; border-color: #bde7ff; }
/* ================= 右上角折角二维码样式 ================= */
.qr-corner-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    z-index: 20;
    overflow: hidden;
    border-top-right-radius: 16px; /* 跟随登录框的圆角 */
    cursor: pointer;
}

/* 使用 CSS 画出一个纯绿色的倒三角折角 */
.qr-corner-btn::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 60px 60px 0;
    border-color: transparent #009688 transparent transparent;
    transition: border-color 0.2s;
}

.qr-corner-btn:active::before {
    border-color: transparent #00796b transparent transparent;
}

/* 二维码 SVG 图标定位在三角形中间 */
.qr-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    color: #fff;
    z-index: 21;
}