/* 重置和基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: 'Poppins', sans-serif;
}

/* 主容器 */
.login-body {
    position: relative;
    width: 100%;
    height: 100%;
    background: #EEF3FF;
    overflow: hidden;
}

/* Group 7609 - 背景渐变层 */
.background-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: radial-gradient(100% 100% at 50% 0%, #D8E4FF 0%, rgba(245, 248, 255, 0) 100%);
    z-index: 1;
}

/* 背景图片层 */
.background-image {
    position: absolute;
    width: 60%;
    height: 50%;
    left: 50%;
    top: 0px;
    transform: translateX(-50%) matrix(1, 0, 0, -1, 0, 0);
    background: url('/static/system/admin/images/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0.8;
    z-index: 2;
}

/* 主内容容器 */
.main-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

/* Logo区域 */
.logo-section {
    position: absolute;
    width: min(145.59px, 13vw);
    height: min(32.5px, 3.9vh);
    left: 50%;
    top: min(15%, 150px);
    transform: translateX(-50%);
    z-index: 4;
}

.logo-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: min(4.88px, 0.65vw);
    width: 100%;
    height: 100%;
}

.logo {
    width: min(32.17px, 5.2vw);
    height: min(32.5px, 3.9vh);
    flex: none;
    order: 0;
    flex-grow: 0;
}

.title {
    width: min(108.55px, 9.75vw);
    height: min(26.65px, 3.25vh);
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: min(18.66px, 2.6vw);
    line-height: min(26.65px, 3.25vh);
    text-align: center;
    color: #080305;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* 登录卡片 */
.login-card {
    position: absolute;
    width: min(422.5px, 58.5vw);
    height: min(416px, 52vh);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: min(13px, 1.3vw);
    padding: min(38.35px, 5.2vw) min(42.25px, 5.2vw);
    box-shadow: 0 2.6px 13px rgba(0, 0, 0, 0.1);
    z-index: 4;
}

.form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: min(39px, 5.2vh);
    width: 100%;
    height: 100%;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* 输入框容器 */
.inputs-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: min(13px, 1.95vh);
    width: 100%;
    height: min(239.85px, 32.5vh);
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* 输入框组 */
.input-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: min(9.1px, 1.3vh) min(13px, 1.95vw);
    gap: min(6.5px, 0.975vw);
    width: 100%;
    height: min(61.1px, 7.8vh);
    border: 1px solid #E7E7E7;
    border-radius: min(13px, 1.3vw);
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    transition: all 0.3s ease;
}

.input-group:hover {
    border-color: #2A62FF;
    box-shadow: 0 0 0 2px rgba(42, 98, 255, 0.1);
}

.input-group:focus-within {
    border-color: #2A62FF;
    box-shadow: 0 0 0 2px rgba(42, 98, 255, 0.2);
}

.form-input {
    width: 100%;
    height: min(23.4px, 3.25vh);
    border: none;
    outline: none;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: min(15.6px, 1.95vw);
    line-height: min(23.4px, 3.25vh);
    color: #888888;
    background: transparent;
    flex: none;
    order: 0;
    flex-grow: 1;
}

.form-input::placeholder {
    color: #888888;
}

.form-input:focus {
    color: #080305;
}

.form-input:focus::placeholder {
    color: #CCCCCC;
}

/* 验证码组 */
.captcha-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: min(6.5px, 0.975vw);
    width: 100%;
    height: min(61.1px, 7.8vh);
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

.captcha-group:hover .captcha-input {
    border-color: #2A62FF;
    box-shadow: 0 0 0 2px rgba(42, 98, 255, 0.1);
}

.captcha-group:focus-within .captcha-input {
    border-color: #2A62FF;
    box-shadow: 0 0 0 2px rgba(42, 98, 255, 0.2);
}

.captcha-input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: min(9.1px, 1.3vh) min(13px, 1.95vw);
    gap: min(6.5px, 0.975vw);
    width: 48%;
    height: min(61.1px, 7.8vh);
    border: 1px solid #E7E7E7;
    border-radius: min(13px, 1.3vw);
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: min(15.6px, 1.95vw);
    line-height: min(61.1px, 7.8vh);
    color: #888888;
    background: transparent;
    outline: none;
    flex: none;
    order: 0;
    flex-grow: 0;
    transition: all 0.3s ease;
}

.captcha-input::placeholder {
    color: #888888;
}

.captcha-input:focus {
    color: #080305;
}

.captcha-input:focus::placeholder {
    color: #CCCCCC;
}

.captcha-image {
    width: 49%;
    height: min(61.1px, 7.8vh);
    border-radius: min(13px, 1.3vw);
    cursor: pointer;
    border: 1px solid #E7E7E7;
    object-fit: cover;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* 复选框组 */
.checkbox-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: min(6.5px, 0.975vw);
    width: min(184.6px, 39%);
    height: min(17.55px, 2.6vh);
    flex: none;
    order: 3;
    flex-grow: 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: min(6.5px, 0.975vw);
}

.checkbox-input {
    display: none;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: min(6.5px, 0.975vw);
    cursor: pointer;
}

.checkbox-icon {
    width: min(11.7px, 1.95vw);
    height: min(11.7px, 1.95vw);
    border: 2px solid #737876;
    border-radius: min(1.95px, 0.325vw);
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-input:checked + .checkbox-label .checkbox-icon {
    background: #2A62FF;
    border-color: #2A62FF;
}

.checkbox-input:checked + .checkbox-label .checkbox-icon::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: min(7.8px, 1.3vw);
    font-weight: bold;
}

.checkbox-text {
    width: min(148.2px, 32.5%);
    height: min(17.55px, 2.6vh);
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: min(11.7px, 1.625vw);
    line-height: min(17.55px, 2.6vh);
    text-align: left;
    color: #495464;
    flex: none;
    order: 2;
    flex-grow: 0;
    white-space: nowrap;
}

/* 按钮组 */
.button-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 0;
    width: 100%;
    height: min(57.2px, 7.8vh);
    background: transparent;
    border-radius: min(9.75px, 1.3vw);
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.login-button {
    width: 100%;
    height: 100%;
    background: #000000;
    border: none;
    border-radius: min(9.75px, 1.3vw);
    color: #FFFFFF;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: min(16.9px, 2.275vw);
    line-height: min(57.2px, 7.8vh);
    cursor: pointer;
    flex: none;
    order: 0;
    flex-grow: 0;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
}

.login-button:hover {
    background: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.login-button:active {
    transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .login-card {
        width: 95%;
        height: min(640px, 85vh);
        padding: min(40px, 6vw) min(50px, 7vw);
    }
    
    .form-container {
        gap: min(40px, 6vh);
    }
    
    .inputs-container {
        gap: min(15px, 2.5vh);
    }
}

@media (max-width: 768px) {
    .logo-section {
        top: min(10%, 100px);
    }
    
    .login-card {
        width: 98%;
        height: min(640px, 90vh);
        padding: min(30px, 5vw) min(40px, 6vw);
    }
    
    .form-container {
        gap: min(30px, 5vh);
    }
    
    .input-group,
    .captcha-group {
        height: min(70px, 10vh);
        padding: min(10px, 2vh) min(15px, 3vw);
    }
    
    .form-input,
    .captcha-input {
        font-size: min(18px, 3vw);
        height: min(30px, 4vh);
    }
    
    .captcha-input {
        width: min(200px, 45%);
    }
    
    .captcha-image {
        width: min(200px, 50%);
        height: min(70px, 10vh);
    }
    
    .button-group {
        height: min(70px, 10vh);
        padding: min(20px, 3vh) min(40px, 6vw);
    }
    
    .login-button {
        font-size: min(20px, 3vw);
    }
    
    .checkbox-group {
        width: min(250px, 80%);
    }
    
    .checkbox-text {
        font-size: min(16px, 2.5vw);
    }
}

@media (max-width: 480px) {
    .logo-section {
        top: min(8%, 80px);
    }
    
    .login-card {
        width: 98%;
        height: min(640px, 95vh);
        padding: min(20px, 4vw) min(30px, 5vw);
    }
    
    .form-container {
        gap: min(20px, 4vh);
    }
    
    .inputs-container {
        gap: min(10px, 2vh);
    }
    
    .input-group,
    .captcha-group {
        height: min(60px, 8vh);
        padding: min(8px, 1.5vh) min(12px, 2.5vw);
    }
    
    .form-input,
    .captcha-input {
        font-size: min(16px, 2.5vw);
        height: min(25px, 3.5vh);
    }
    
    .captcha-input {
        width: min(150px, 40%);
    }
    
    .captcha-image {
        width: min(150px, 55%);
        height: min(60px, 8vh);
    }
    
    .button-group {
        height: min(60px, 8vh);
        padding: min(15px, 2.5vh) min(30px, 5vw);
    }
    
    .login-button {
        font-size: min(18px, 2.5vw);
    }
    
    .checkbox-group {
        width: min(200px, 90%);
    }
    
    .checkbox-text {
        font-size: min(14px, 2vw);
    }
    
    .title {
        font-size: min(20px, 3vw);
    }
}