.login-wrapper {
    height             : 100vh;
    display            : flex;
    flex-direction     : column;
    background-size    : cover;
    background-position: 100%;
    position           : relative;
}

.login-container {
    position  : absolute;
    top       : 22%;
    left      : 5%;
    min-height: 500px;
}

.title-container {
    .title {
        font      : var(--td-font-headline-large);
        color     : var(--td-text-color-primary);
        margin-top: var(--td-comp-margin-xs);

        &.margin-no {
            margin-top: 0;
        }
    }

    .sub-title {
        margin-top: var(--td-comp-margin-xxl);

        .tip {
            display     : inline-block;
            margin-right: var(--td-comp-margin-s);
            font        : var(--td-font-body-medium);

            &:first-child {
                color: var(--td-text-color-secondary);
            }

            &:last-child {
                color : var(--td-text-color-primary);
                cursor: pointer;
            }
        }
    }
}

.item-container {
    width     : 400px;
    margin-top: var(--td-comp-margin-xxxxl);

    &.login-qrcode {
        .tip-container {
            margin-bottom: var(--td-comp-margin-l);
            font         : var(--td-font-body-medium);
            display      : flex;
            align-items  : flex-start;

            .tip {
                color       : var(--td-text-color-primary);
                margin-right: var(--td-comp-margin-s);
            }

            .refresh {
                display    : flex;
                align-items: center;
                color      : var(--td-brand-color);

                .t-icon {
                    font-size  : var(--td-comp-size-xxxs);
                    margin-left: var(--td-comp-margin-xs);
                }

                &:hover {
                    cursor: pointer;
                }
            }
        }

        .bottom-container {
            margin-top: 32px;
        }
    }

    &.login-phone {
        .bottom-container {
            margin-top: 66px;
        }
    }

    .check-container {
        display    : flex;
        align-items: center;

        &.remember-pwd {
            margin-bottom  : var(--td-comp-margin-l);
            justify-content: space-between;
        }

        span {
            color: var(--td-brand-color);

            &:hover {
                cursor: pointer;
            }
        }
    }

    .verification-code {
        display    : flex;
        align-items: center;

        :deep(.t-form__controls) {
            width: 100%;

            button {
                flex-shrink: 0;
                margin-left: var(--td-comp-margin-l);
                width      : 128px;
            }
        }
    }

    .btn-container {
        margin-top: var(--td-comp-margin-xxxxl);
    }
}

.switch-container {
    margin-top: var(--td-comp-margin-xxl);

    .tip {
        font        : var(--td-font-body-medium);
        color       : var(--td-brand-color);
        cursor      : pointer;
        display     : inline-flex;
        align-items : center;
        margin-right: var(--td-comp-margin-l);

        &:last-child {
            &::after {
                display: none;
            }
        }

        &::after {
            content    : '';
            display    : block;
            width      : 1px;
            height     : 12px;
            background : var(--td-component-stroke);
            margin-left: var(--td-comp-margin-l);
        }
    }
}

.check-container {
    font : var(--td-font-body-medium);
    color: var(--td-text-color-secondary);

    .tip {
        float: right;
        font : var(--td-font-body-medium);
        color: var(--td-brand-color);
    }
}

.copyright {
    font    : var(--td-font-body-medium);
    position: absolute;
    left    : 5%;
    bottom  : 64px;
    color   : var(--td-text-color-secondary);
}

@media screen and (max-height: 700px) {
    .copyright {
        display: none;
    }
}

.login-header {
    padding: 0 var(--td-comp-paddingLR-xl);
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    backdrop-filter: blur(10px);
    color          : var(--td-text-color-primary);
    height         : var(--td-comp-size-xxxl);

    .operations-container {
        display    : flex;
        align-items: center;

        .t-button {
            margin-left: var(--td-comp-margin-l);
        }
    }
}
/* 全局响应式适配：手机端（屏幕宽度≤768px） */
@media (max-width: 768px) {
    /* 1. 页面容器适配：取消固定宽度，100%适配 */
    .layui-layout-admin .layui-body {
        width: 100% !important;
        padding: 0 5px !important;
        left: 0 !important; /* 手机端隐藏侧边栏后，主体内容占满宽度 */
    }

    /* 2. 表格适配：手机端横向滚动，避免列挤压 */
    .layui-table {
        width: 100% !important;
        display: block;
        overflow-x: auto; /* 表格横向滚动 */
        -webkit-overflow-scrolling: touch; /* 手机端顺滑滚动 */
    }

    /* 3. 按钮/输入框适配：手机端宽度100%，避免错位 */
    .layui-btn, .layui-input, .layui-select, .layui-textarea {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    /* 4. 卡片/面板适配：手机端取消固定宽度，加内边距 */
    .layui-card, .layui-form-item {
        margin: 5px !important;
        padding: 10px !important;
    }

    /* 5. 字体适配：手机端整体缩小字体，避免溢出 */
    body, .layui-font, .layui-table-cell {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* 6. 侧边栏适配：手机端默认隐藏，点击菜单按钮显示 */
    .layui-layout-admin .layui-side {
        position: fixed !important;
        left: -200px !important; /* 隐藏侧边栏 */
        z-index: 9999 !important;
        transition: all 0.3s;
    }
    .layui-layout-admin .layui-side.show {
        left: 0 !important; /* 点击后显示 */
    }

    /* 7. Footer适配（优化你之前的footer） */
    .copyright {
        padding: 10px 3% !important;
        margin-top: 20px !important;
    }
    .copyright div {
        font-size: 11px !important;
        line-height: 1.6 !important;
        margin-bottom: 4px !important;
    }
    .copyright img {
        width: 12px !important;
    }

    /* 8. 表单适配：手机端取消行内布局，改为块级 */
    .layui-form-item .layui-inline {
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
}
/* 手机端（≤768px）适配 */
@media (max-width: 768px) {
    /* 1. 隐藏左侧侧边栏 */
    .layui-layout-admin .layui-side {
        position: fixed !important;
        left: -200px !important; /* 移出屏幕外 */
        z-index: 9999 !important;
        transition: left 0.3s;
    }
    /* 2. 主体内容区占满宽度 */
    .layui-layout-admin .layui-body {
        left: 0 !important;
        width: 100% !important;
        padding: 0 5px !important;
    }
    /* 3. 表格横向滚动（避免列挤压） */
    .layui-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 4. 显示手机端菜单按钮（用于展开侧边栏） */
    .mobile-menu-btn {
        display: block !important;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}
@media (max-width: 768px) {
    .layui-side {
        width: 120px !important; /* 缩小侧边栏宽度 */
    }
    .layui-side .layui-nav-item a {
        padding: 0 10px !important;
        font-size: 12px !important;
    }
    .layui-body {
        left: 120px !important; /* 主体区适配新侧边栏宽度 */
    }
}