/* 登录页全局重置与卡片包裹 */

.ff-login-wrap {

    display: flex !important;

    flex-direction: row !important; /* 强制左右并排 */

    flex-wrap: nowrap !important;

    width: 900px !important;

    max-width: 95vw !important;

    min-height: 480px !important;

    margin: 60px auto !important;

    background: #fff !important;

    border-radius: 20px !important;

    box-shadow: 0 20px 50px rgba(0,0,0,0.08) !important;

    overflow: hidden !important;

}



/* 左侧品牌区 (占一半宽度，强制撑满) */

.ff-login-brand {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    width: 50% !important;

    background: linear-gradient(135deg, #FF0036, #FF7300) !important;

    color: #fff !important;

    padding: 40px !important;

    text-align: center !important;

}



/* 右侧表单区 (占一半宽度) */

.ff-login-form {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    width: 50% !important;

    padding: 50px 40px !important;

    background: #fff !important;

}



/* 响应式：手机端变成上下排列 */

@media (max-width: 768px) {

    .ff-login-wrap {

        flex-direction: column !important;

        width: 95% !important;

        margin: 20px auto !important;

    }

    .ff-login-brand { display: none !important; }

    .ff-login-form { width: 100% !important; padding: 30px 20px !important; }

}



/* 下方保留原本的表单样式 */

.ff-login-brand h2 { font-size: 32px !important; font-weight: 800 !important; margin-bottom: 12px !important; }

.ff-login-brand p { font-size: 15px !important; opacity: 0.9 !important; }

.ff-login-brand .brand-icon { font-size: 80px !important; margin-top: 40px !important; opacity: 0.8 !important; }



.ff-login-tabs { display: flex !important; gap: 30px !important; margin-bottom: 30px !important; border-bottom: 1px solid #E5E7EB !important; }

.ff-login-tab { font-size: 18px !important; font-weight: bold !important; color: #6B7280 !important; padding-bottom: 12px !important; cursor: pointer !important; position: relative !important; }

.ff-login-tab.active { color: #FF0036 !important; }

.ff-login-tab.active::after { content: '' !important; position: absolute !important; bottom: -1px !important; left: 0 !important; width: 100% !important; height: 3px !important; background: #FF0036 !important; border-radius: 3px !important; }



.ff-input-group { display: flex !important; align-items: center !important; background: #F9FAFB !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; margin-bottom: 20px !important; padding: 0 16px !important; height: 50px !important; transition: all 0.2s !important; }

.ff-input-group:focus-within { border-color: #FF0036 !important; box-shadow: 0 0 0 3px rgba(255,0,54,0.1) !important; background: #fff !important; }

.ff-input-group .icon { font-size: 18px !important; margin-right: 12px !important; }

.ff-input-group input { flex: 1 !important; border: none !important; background: transparent !important; outline: none !important; font-size: 15px !important; color: #1F2937 !important; }



.ff-btn-submit { width: 100% !important; height: 50px !important; background: linear-gradient(90deg, #FF0036, #FF7300) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-size: 16px !important; font-weight: bold !important; cursor: pointer !important; margin-top: 10px !important; transition: transform 0.2s !important; }

.ff-btn-submit:hover { transform: scale(1.02) !important; }

.ff-login-footer { margin-top: 15px !important; text-align: right !important; font-size: 14px !important; }

.ff-login-footer a { color: #6B7280 !important; text-decoration: none !important; }

.ff-login-footer a:hover { color: #FF0036 !important; }