/**
 * 登录页面背景和样式增强 - 恢复原始背景图
 * 集成安全区域适配功能
 */

/* 登录页面和注册页面背景图修改 - 恢复原始设置 */
.content[data-v-8bae2890],
.content[data-v-0ecda973],
.content[data-v-6a30f558],
.content[data-v-a4e06ae0],
.content[data-v-7d8b2ef6] {
    background-image: url('https://hf.lmha.cn/bj.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #f5f5f5 !important; /* 备用背景色 */
}

/* 只针对页面中包含登录框的content元素添加背景 */
.content:has(.login-box) {
    background-image: url('https://hf.lmha.cn/bj.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #f5f5f5 !important; /* 备用背景色 */
}

/* 为了更好的兼容性，也可以通过body的类名来控制 */
body.login-page .content,
body.register-page .content {
    background-image: url('https://hf.lmha.cn/bj.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #f5f5f5 !important;
}

/* 登录框和注册框背景透明化，让背景图更明显 - 恢复原始样式 */
.login-box[data-v-8bae2890],
.login-box[data-v-0ecda973],
.login-box[data-v-6a30f558],
.login-box[data-v-a4e06ae0],
.login-box[data-v-7d8b2ef6] {
    background-color: rgba(255, 255, 255, 0.7) !important; /* 更透明 */
    border-radius: 15px !important;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    margin-top: 120px !important; /* 为logo和标题留出空间 */
}

.login-box {
    background-color: rgba(255, 255, 255, 0.7) !important; /* 更透明 */
    border-radius: 15px !important;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

/* 安全区域适配 - 只在刘海屏设备上应用 */
body.has-notch .login-box,
body.has-notch .login-box[data-v-8bae2890],
body.has-notch .login-box[data-v-0ecda973],
body.has-notch .login-box[data-v-6a30f558],
body.has-notch .login-box[data-v-a4e06ae0],
body.has-notch .login-box[data-v-7d8b2ef6] {
    margin-top: calc(120px + env(safe-area-inset-top)) !important;
    margin-top: calc(120px + constant(safe-area-inset-top)) !important;
}

/* 返回按钮样式 - 恢复原始设置 */
.back-button {
    position: absolute !important;
    top: -60px !important;
    left: 0 !important;
    width: 50px !important;
    height: 50px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
}

.back-button:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}

.back-button::before {
    content: "←" !important;
    font-size: 24px !important;
    color: #333 !important;
    font-weight: bold !important;
}

/* 只针对注册页面的Vue组件标识符添加返回按钮 */
.content[data-v-7d8b2ef6] .login-box::before {
    content: "←" !important;
    position: absolute !important;
    top: -60px !important;
    left: 0 !important;
    width: 50px !important;
    height: 50px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    font-size: 24px !important;
    color: #333 !important;
    font-weight: bold !important;
    z-index: 1000 !important;
}

/* 返回按钮hover效果 - 只针对注册页面 */
.content[data-v-7d8b2ef6] .login-box::before:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}

/* 安全区域适配的返回按钮位置调整 - 只在刘海屏设备上 */
body.has-notch .back-button {
    top: calc(-60px + env(safe-area-inset-top)) !important;
    top: calc(-60px + constant(safe-area-inset-top)) !important;
}

body.has-notch .content[data-v-7d8b2ef6] .login-box::before {
    top: calc(-60px + env(safe-area-inset-top)) !important;
    top: calc(-60px + constant(safe-area-inset-top)) !important;
}

/* 横屏模式适配 */
@media screen and (orientation: landscape) {
    body.has-notch .login-box {
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 小屏幕设备适配 */
@media screen and (max-width: 380px) {
    body.has-notch .login-box {
        margin: calc(120px + env(safe-area-inset-top)) 10px 20px 10px !important;
        margin: calc(120px + constant(safe-area-inset-top)) 10px 20px 10px !important;
    }
}