@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400|Lora");

/* 登录弹窗遮罩 */
#loginOverlay.login-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 2000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 当显示时的样式 */
#loginOverlay.login-overlay.show {
    display: flex !important;
}

/* 关闭按钮样式 */
#loginOverlay .close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    color: #8b0000 !important;
    cursor: pointer !important;
    z-index: 2001 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s !important;
}

#loginOverlay .close-btn:hover {
    background: rgba(139, 0, 0, 0.1) !important;
    color: #a52a2a !important;
}

/* 登录容器样式 */
#loginOverlay .welcome {
    background: #fff8dc !important;
    width: 650px !important;
    height: 415px !important;
    position: absolute !important;
    top: 25% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 5px !important;
    box-shadow: 5px 5px 5px rgba(156, 123, 88, 0.3) !important;
    border: 1px solid #9C7B58 !important;
    line-height: normal !important; /* 重置行高 */
}

/* 左侧登录区 */
#loginOverlay .pinkbox {
    position: absolute !important;
    top: -10% !important;
    left: 5% !important;
    background: #8b0000 !important;
    width: 320px !important;
    height: 500px !important;
    border-radius: 5px !important;
    box-shadow: 2px 0 10px rgba(156, 123, 88, 0.3) !important;
    z-index: 2 !important;
    background-image: url("login2.0/assets/角形左上.png"), url("login2.0/assets/角形右下.png"), url("login2.0/assets/角形右上.png"), url("login2.0/assets/角形左下.png") !important;
    background-position: top 20px left 20px, bottom 20px right 20px, top 20px right 20px, bottom 20px left 20px !important;
    background-repeat: no-repeat !important;
    background-size: 60px 60px !important;
    background-blend-mode: soft-light !important;
    transition: all 0.5s ease-in-out !important;
}

/* 外部双线条框 */
#loginOverlay .pinkbox::before {
    content: '' !important;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    right: 15px !important;
    bottom: 15px !important;
    border: 2px solid #9C7B58 !important;
    border-radius: 3px !important;
    pointer-events: none !important;
}

/* 内部双线条框 */
#loginOverlay .pinkbox::after {
    content: '' !important;
    position: absolute !important;
    top: 25px !important;
    left: 25px !important;
    right: 25px !important;
    bottom: 25px !important;
    border: 1px solid #9C7B58 !important;
    border-radius: 2px !important;
    pointer-events: none !important;
}

/* 用户名/密码输入框背景调整 - 高优先级 */
#loginOverlay .pinkbox input {
    background: #8b0000 !important; /* 复古红色背景 */
    width: 65% !important;
    color: #fff8dc !important; /* 浅暖米色文字 */
    border: none !important;
    border-bottom: 1px solid #9C7B58 !important; /* 檀木色下划线*/
    padding: 9px !important;
    transition: all 0.3s ease !important; /* 添加过渡动画 */
    outline: none !important;
    font-family: "Open Sans", sans-serif !important; /* 确保字体正确 */
    font-size: 0.9em !important; /* 固定字体大小 */
}

/* 输入框占位符文字调整 - 高优先级 */
#loginOverlay .pinkbox input::placeholder {
    color: rgba(255, 248, 220, 0.7) !important; /* 半透浅暖米色 */
    letter-spacing: 1px !important;
    font-size: 0.9em !important;
}

/* 输入框聚焦效果 - 高优先级 */
#loginOverlay .pinkbox input:focus {
    color: #fff8dc !important;
    border-bottom: 1.2px solid #EFB3B3 !important; /* 桃花粉下划线 */
    outline: none !important;
    font-size: 0.9em !important; /* 保持字体大小不变 */
    transition: 0.8s all ease !important; /* 缓缓延伸效果 */
}

#loginOverlay .pinkbox input:focus::placeholder {
    opacity: 0 !important;
}

#loginOverlay .nodisplay {
    display: none !important;
    transition: all 0.5s ease !important;
}

#loginOverlay .leftbox, #loginOverlay .rightbox {
    position: absolute !important;
    width: 50% !important;
    transition: 1s all ease !important;
}

#loginOverlay .leftbox {
    left: -2% !important;
}

#loginOverlay .rightbox {
    right: -2% !important;
}

/* 字体和按钮样式 */
#loginOverlay .welcome h1 {
    font-family: "Lora", serif !important;
    text-align: center !important;
    margin-top: 95px !important;
    text-transform: uppercase !important;
    color: #fff8dc !important;
    font-size: 2em !important;
    letter-spacing: 8px !important;
    line-height: normal !important; /* 重置行高 */
}

#loginOverlay .welcome .title {
    font-family: "Lora", serif !important;
    color: #8b0000 !important;
    font-size: 1.8em !important;
    line-height: 1.1em !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    font-weight: 300 !important;
    margin-top: 20% !important;
}

#loginOverlay .welcome .desc {
    margin-top: 8px !important;
    color: #9C7B58 !important;
}

#loginOverlay .welcome .account {
    margin-top: 50% !important;
    font-size: 10px !important;
    color: #9C7B58 !important;
    line-height: normal !important; /* 重置行高 */
}

#loginOverlay .welcome p {
    font-family: "Open Sans", sans-serif !important;
    font-size: 0.7em !important;
    letter-spacing: 2px !important;
    color: #8b0000 !important;
    text-align: center !important;
    line-height: normal !important; /* 重置行高 */
}

#loginOverlay .welcome span {
    color: #8b0000 !important;
}

#loginOverlay .welcome .flower {
    position: absolute !important;
    width: 150px !important;
    height: 150px !important;
    top: 40% !important;
    left: 27% !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 0 3px #9C7B58) !important;
}

#loginOverlay .welcome .smaller {
    width: 130px !important;
    height: 130px !important;
    top: 48% !important;
    left: 30% !important;
    opacity: 0.9 !important;
}

/* 按钮样式 */
#loginOverlay .welcome button {
    padding: 12px !important;
    font-family: "Open Sans", sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    margin: auto !important;
    outline: none !important;
    display: block !important;
    border: 1px solid #9C7B58 !important;
    background: #fff8dc !important;
    color: #8b0000 !important;
}

#loginOverlay .welcome button:hover {
    background: #EFB3B3 !important;
    color: #8b0000 !important;
    transition: background-color 1s ease-out !important;
}

#loginOverlay .welcome .button {
    margin-top: 5% !important;
    background: #fff8dc !important;
    color: #8b0000 !important;
    border: solid 1px #9C7B58 !important;
}

/* 表单样式 */
#loginOverlay .welcome form {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    padding-top: 7px !important;
}

#loginOverlay .welcome .more-padding {
    padding-top: 35px !important;
}

#loginOverlay .welcome .more-padding input {
    padding: 12px !important;
}

#loginOverlay .welcome .more-padding .sumbit {
    margin-top: 45px !important;
}

#loginOverlay .welcome .sumbit {
    margin-top: 25px !important;
    padding: 12px !important;
    border-color: #9C7B58 !important;
    background: #fff8dc !important;
    color: #8b0000 !important;
}

#loginOverlay .welcome .sumbit:hover {
    background: #EFB3B3 !important;
    border-color: #8b0000 !important;
}

#loginOverlay .welcome input {
    background: #8b0000 !important; /* 复古红色背景 */
    width: 65% !important;
    color: #fff8dc !important; /* 浅暖米色文字 */
    border: none !important;
    border-bottom: 1px solid #9C7B58 !important; /* 檀木色下划线 */
    padding: 9px !important;
    font-weight: 100 !important;
    transition: all 0.3s ease !important; /* 添加过渡动画 */
    outline: none !important;
    font-family: "Open Sans", sans-serif !important; /* 确保字体正确 */
    font-size: 0.9em !important; /* 固定字体大小 */
}

#loginOverlay .welcome input::placeholder {
    color: rgba(255, 248, 220, 0.7) !important; /* 半透浅暖米色占位符 */
    letter-spacing: 2px !important;
    font-size: 1.0em !important;
    font-weight: 100 !important;
}

#loginOverlay .welcome input:focus {
    color: #fff8dc !important; /* 浅暖米色聚焦文字 */
    outline: none !important;
    border-bottom: 1.2px solid #EFB3B3 !important; /* 桃花粉下划线 */
    font-size: 0.9em !important; /* 保持字体大小不变 */
    transition: 0.8s all ease !important; /* 缓缓延伸效果 */
}

#loginOverlay .welcome input:focus::placeholder {
    opacity: 0 !important;
}

#loginOverlay .welcome label {
    font-family: "Open Sans", sans-serif !important;
    color: #fff8dc !important; /* 辅助色标签文字 */
    font-size: 0.8em !important;
    letter-spacing: 1px !important;
}

#loginOverlay .welcome input[type=checkbox]:checked + label {
    color: #EFB3B3 !important; /* 桃花粉选中状态 */
    transition: 0.5s all ease !important;
}

#loginOverlay .welcome .checkbox {
    display: inline !important;
    white-space: nowrap !important;
    position: relative !important;
    left: -52px !important;
    top: 25px !important;
}

#loginOverlay .welcome input[type=checkbox] {
    width: 15px !important;
    height: 15px !important;
    background: #fff8dc !important;
    border: 1px solid #9C7B58 !important; /* 檀木色复选框边框 */
    appearance: auto !important; /* 恢复默认复选框样式 */
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    display: inline-block !important;
    margin-right: 5px !important;
    cursor: pointer !important;
}

#loginOverlay .welcome .checkbox input[type=checkbox]:checked + label {
    color: #EFB3B3 !important;
    transition: 0.5s all ease !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    #loginOverlay .welcome {
        width: 90% !important;
        height: auto !important;
        min-height: 400px !important;
    }
    #loginOverlay .pinkbox {
        width: 280px !important;
        height: 450px !important;
    }
}