body {
    font-family: 'Roboto', sans-serif;
    background: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

.main-wrapper {
    display: flex;
    flex-direction: row;
    width: 900px;
    max-width: 98vw;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    overflow: hidden;
}
.login-left, .login-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 30px;
}
.login-left {
    background: #fff;
}
.login-right {
    background: linear-gradient(135deg, #1677ff 0%, #0052d9 100%);
    color: #fff;
}
.login-right .notes {
    background: transparent;
    color: #fff;
}
.login-right .notes h5 {
    color: #fff;
}
.login-right .notes li {
    color: #e3e3e3;
}
.login-right .notes a {
    color: #ffe066;
}

/* 手机端竖向布局 */
@media (max-width: 767px) {
    .main-wrapper {
        flex-direction: column;
        width: 98vw;
        min-width: unset;
        border-radius: 0;
        box-shadow: none;
    }
    .login-left, .login-right {
        padding: 24px 10px;
        border-radius: 0;
    }
    .login-left {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .login-right {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .card-header {
        font-size: 1.3rem;
        padding: 1rem;
    }
}

/* 兼容原有表单样式 */
.card-header {
    background: #1677ff;
    color: white;
    border: none;
    padding: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
}
.card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; /* 添加相对定位，防止位置偏移 */
    z-index: 1; /* 确保内容在正确的层级 */
    overflow: hidden; /* 防止内容滚动 */
}
.form-control {
    border: 2px solid #eee;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.form-control:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 0.2rem rgba(22, 119, 255, 0.25);
}
.btn-primary {
    background: #1677ff;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 按钮组样式 */
.d-flex.gap-2 {
    margin-bottom: 15px;
}

.btn-outline-primary {
    border-color: #1677ff;
    color: #1677ff;
    background: transparent;
    padding: 12px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-primary:hover {
    background-color: #1677ff;
    border-color: #1677ff;
    color: #fff;
}

.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
    background: transparent;
    padding: 12px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}
.notes {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin-top: 5px;
}
.notes h5 {
    color: #4a4a4a;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1.1rem;
}
.notes ul {
    padding-left: 20px;
    margin-bottom: 0;
    list-style: none;
}
.notes li {
    color: #666;
    margin-bottom: 12px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.notes a {
    color: #1677ff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.notes a:hover {
    text-decoration: underline;
}
.input-group {
    position: relative;
    margin-bottom: 20px;
}
.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    z-index: 10;
}
.input-group input {
    padding-left: 45px;
}

.error-box {
    display: none;
}

/* 添加 Toast 样式 */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 25px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.toast.show {
    opacity: 1;
}

.toast.error {
    border-left: 4px solid #dc3545;
}

.toast.success {
    border-left: 4px solid #28a745;
}

.toast i {
    font-size: 1.2rem;
}

.toast.error i {
    color: #dc3545;
}

.toast.success i {
    color: #28a745;
}

/* 手机端默认显示，PC端隐藏 */
.mobile-login { display: block; }
.pc-login { display: none; }

@media (min-width: 768px) {
    .mobile-login { display: none !important; }
    .pc-login { display: block !important; }
}

/* 手机端body样式调整 */
@media (max-width: 767px) {
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: block;
        justify-content: unset;
        align-items: unset;
        min-height: 100vh;
    }
    .mobile-login {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column; /* 确保垂直方向布局 */
        align-items: stretch; /* 让子元素填满容器宽度 */
        justify-content: flex-start; /* 从顶部开始布局 */
        overflow: hidden; /* 禁止内容滚动 */
        position: fixed; /* 固定位置 */
        top: 0;
        left: 0;
    }
    .login-container {
        flex: 1; /* 让容器填满剩余空间 */
        display: flex;
        flex-direction: column;
        min-height: 100%; /* 确保至少填满整个视口高度 */
        overflow: hidden; /* 禁止内容滚动 */
    }
    .form-control {
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* 移除重复的安卓设备特定样式 */
}

/* PC端横向分栏样式 */
@media (min-width: 768px) {
    .main-wrapper {
        display: flex;
        flex-direction: row;
        width: 900px;
        max-width: 98vw;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .login-left, .login-right {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 30px;
    }
    .login-left {
        background: #fff;
    }
    .login-right {
        background: #1677ff;
        color: #fff;
    }
    .login-right .notes {
        background: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        text-align: left;
        width: 100%;
        max-width: 400px;
    }
    .login-right .notes h5 {
        color: #fff;
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 25px;
        margin-top: 0;
        text-align: center;
        letter-spacing: 1px;
        padding-bottom: 10px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    }
    .note-block {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
    }
    .note-title {
        color: #ffe066;
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .note-content {
        color: #fff;
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .note-content a {
        color: #ffe066;
        text-decoration: none;
        font-weight: 500;
    }
    .note-content a:hover {
        text-decoration: underline;
    }
    .card-header {
        border-radius: 20px 20px 0 0;
    }
    .card-body {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .pc-login .card-header {
        background: #fff !important;
        color: #1677ff !important;
        border-radius: 20px 20px 0 0;
        box-shadow: none;
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 25px;
        margin-top: 0;
        padding: 1.5rem 1rem 1rem 1rem;
        border-bottom: 2px solid rgba(22, 119, 255, 0.2);
        letter-spacing: 1px;
    }
}

/* 原有手机端样式 */
.login-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    background-color: #fff;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 安卓设备特定样式 - 修复card-body位置问题 */
.android-device .mobile-login .card-body {
    padding-top: 0px !important;
    margin-top: -35px !important; /* 使用负边距让内容更靠上 */
    position: relative !important; /* 添加相对定位 */
}

/* 安卓应用模式特定样式 */
.android-app-mode .mobile-login .card-body {
    margin-top: -10px !important; /* 使用负边距让内容更靠上 */
    padding-top: 0px !important;
}

/* 安卓PWA/下载应用特定样式 */
.android-pwa .mobile-login .card-body {
    margin-top: 35px !important; /* 使用负边距让内容更靠上 */
    padding-top: 0px !important;
}

/* 苹果PWA/下载应用特定样式 */
.ios-pwa .mobile-login .card-body {
    margin-top: 0; /* 移除负边距，防止内容区上移 */
    padding-top: 20px;
}

/* iOS Chrome浏览器特定样式 */
.ios-chrome .mobile-login .card-body {
    margin-top: 0; /* 移除负边距，防止内容区上移 */
    padding-top: 20px; /* 保持顶部内边距 */
    position: relative; /* 添加相对定位 */
}
/* iOS Chrome浏览器防止内容滚动 */
.ios-chrome .mobile-login {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.ios-chrome .login-container {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

/* iOS Chrome浏览器输入框优化 */
.ios-chrome .form-control {
    font-size: 16px !important; /* 防止iOS缩放 */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 10px !important;
}

/* iOS Chrome浏览器按钮优化 */
.ios-chrome .btn-primary {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 10px !important;
}

/* iOS Chrome浏览器视口高度优化 */
.ios-chrome .mobile-login {
    height: 100vh;
    height: -webkit-fill-available; /* iOS Safari 视口高度 */
    min-height: -webkit-fill-available;
}

.ios-chrome .login-container {
    height: 100vh;
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
}

/* iOS Chrome浏览器防止滚动 */
.ios-chrome body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 移除滚动相关样式 */

/* iOS Chrome浏览器输入框焦点优化 */
.ios-chrome .form-control:focus {
    transform: translateZ(0); /* 启用硬件加速 */
    -webkit-transform: translateZ(0);
}

/* iOS Chrome浏览器防止缩放 */
.ios-chrome input[type="text"],
.ios-chrome input[type="password"],
.ios-chrome input[type="email"] {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}

/* 安卓 Edge 浏览器特定样式 */
.android-edge .mobile-login .card-body {
    margin-top: -100px !important; /* 使用负边距让内容更靠上 */
    padding-top: 25px !important; /* 完全移除顶部内边距 */
    position: relative !important; /* 添加相对定位 */
}

/* 安卓 Edge 浏览器输入框优化 */
.android-edge .form-control {
    font-size: 16px !important; /* 防止缩放 */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 10px !important;
}

/* 安卓 Edge 浏览器按钮优化 */
.android-edge .btn-primary {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 10px !important;
}

/* 安卓 Edge 浏览器视口高度优化 */
.android-edge .mobile-login {
    height: 100vh;
    min-height: 100vh;
}

.android-edge .login-container {
    height: 100vh;
    min-height: 100vh;
}

/* 安卓 Edge 浏览器滚动优化 */
.android-edge .mobile-login {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 安卓 Edge 浏览器输入框焦点优化 */
.android-edge .form-control:focus {
    transform: translateZ(0); /* 启用硬件加速 */
    -webkit-transform: translateZ(0);
}

/* 微信小程序特定样式 */
.wechat-miniprogram {
    --primary-color: #07c160;
    --primary-gradient: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
}

/* 预加载微信小程序样式，防止闪烁 */
.wechat-miniprogram * {
    transition: none !important;
}

/* 确保按钮在页面加载时立即应用绿色样式 */
.wechat-miniprogram .btn-primary {
    background: #07c160 !important;
    background-color: #07c160 !important;
    border-color: #07c160 !important;
    color: #fff !important;
}

.wechat-miniprogram .card-header {
    background: var(--primary-color) !important;
}

.wechat-miniprogram .btn-primary,
.wechat-miniprogram .btn-primary:focus,
.wechat-miniprogram .btn-primary:active,
.wechat-miniprogram .btn-primary:hover,
.wechat-miniprogram .btn-primary:visited,
.wechat-miniprogram .btn-primary:focus-visible,
.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled):active,
.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled).active,
.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled):active:focus,
.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled).active:focus,
.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled):active:hover,
.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled).active:hover {
    background: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

.wechat-miniprogram .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(7, 193, 96, 0.25) !important;
}

.wechat-miniprogram .login-right {
    background: var(--primary-gradient) !important;
}

.wechat-miniprogram .notes a {
    color: #07c160 !important;
}

.wechat-miniprogram .note-content a {
    color: #07c160 !important;
}

.wechat-miniprogram .client-download {
    display: none !important;
}

/* 微信小程序 card-body 位置调整 */
.wechat-miniprogram .mobile-login .card-body {
    padding: 0px 20px 20px 20px !important;
    margin-top: -40px !important;
    position: relative !important;
}

.wechat-miniprogram .pc-login .card-header {
    background: #fff !important;
    color: #07c160 !important;
    border-bottom: 2px solid rgba(7, 193, 96, 0.3) !important;
}

/* 确保微信小程序中所有按钮状态都使用绿色 */
.wechat-miniprogram .btn-primary:focus,
.wechat-miniprogram .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(7, 193, 96, 0.25) !important;
}

.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled):active,
.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled).active,
.show > .wechat-miniprogram .btn-primary.dropdown-toggle {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled):active:focus,
.wechat-miniprogram .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .wechat-miniprogram .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(7, 193, 96, 0.25) !important;
}

/* Passkeys登录样式 */
.alternative-login {
    margin: 20px 0;
}

.divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.divider span {
    background: #fff;
    padding: 0 15px;
    color: #666;
    font-size: 0.9rem;
}

.btn-outline-primary {
    border-color: #1677ff;
    color: #1677ff;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: #1677ff;
    border-color: #1677ff;
    color: #fff;
}

/* 微信小程序主题适配 */
.wechat-miniprogram .btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.wechat-miniprogram .btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* 微信小程序Passkeys按钮组样式 */
.wechat-miniprogram .d-flex.gap-2 {
    margin-bottom: 15px;
}

.wechat-miniprogram .btn-outline-secondary {
    border-color: var(--secondary-color, #6c757d);
    color: var(--secondary-color, #6c757d);
}

.wechat-miniprogram .btn-outline-secondary:hover {
    background-color: var(--secondary-color, #6c757d);
    border-color: var(--secondary-color, #6c757d);
    color: #fff;
}

/* Passkeys模态框强制居中样式 */
#passkeysManageModal .modal-dialog,
#passkeysModal .modal-dialog,
#userSelectionModal .modal-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

#passkeysManageModal .modal-dialog,
#passkeysModal .modal-dialog,
#userSelectionModal .modal-dialog {
    width: 92vw;
    max-width: 520px;
}

/* Passkeys模态框按钮样式 */
#passkeysModal .modal-footer .btn {
    min-width: 100px;
    height: 38px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 0.375rem;
}

#passkeysModal .modal-footer .btn-secondary,
#passkeysModal .modal-footer .btn-primary {
    flex: 1;
    margin: 0 5px;
}

/* Passkeys模态框modal-body下方间隙调整 */
#passkeysModal .modal-body {
    padding-bottom: 0.5rem;
}

/* Passkeys模态框表单最后一个元素与footer的间距调整 */
#passkeysModal .modal-body .mb-3:last-child {
    margin-bottom: 1rem !important;
}

/* 用户选择模态框样式优化 */
#userSelectionModal .modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

#userSelectionModal .modal-header {
border-bottom: 1px solid #e9ecef;
padding: 20px 24px 16px;
}

#userSelectionModal .modal-title {
font-size: 18px;
font-weight: 600;
color: #333;
}

#userSelectionModal .modal-body {
padding: 20px 24px;
max-height: 400px;
overflow-y: auto;
}

#userSelectionModal .modal-footer {
border-top: 1px solid #e9ecef;
padding: 16px 24px 20px;
}

/* 用户列表样式优化 */
.user-list {
max-height: 300px;
overflow-y: auto;
}

.user-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 12px;
background: #f8f9fa;
transition: none;
}

.user-item:last-child {
margin-bottom: 0;
}

.user-info {
flex: 1;
margin-right: 12px;
}

.user-name {
font-weight: 600;
color: #333;
font-size: 16px;
margin-bottom: 4px;
}

.user-username {
color: #666;
font-size: 14px;
margin-bottom: 4px;
}

.user-date {
color: #999;
font-size: 12px;
}

.user-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}

.user-actions .btn {
padding: 8px 12px;
font-size: 13px;
border-radius: 6px;
border: none;
min-width: 60px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}

.user-actions .login-btn {
background: #1677ff;
color: white;
}

.user-actions .delete-btn {
background: #dc3545;
color: white;
}

/* 微信小程序用户选择界面适配 */
.wechat-miniprogram .user-actions .login-btn {
background: #07c160;
}

/* Passkeys管理模态框样式优化 - 全新设计 */
#passkeysManageModal .modal-content {
border-radius: 10px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#passkeysManageModal .modal-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
padding: 16px 20px;
border-radius: 10px 10px 0 0;
}

#passkeysManageModal .modal-title {
font-size: 17px;
font-weight: 600;
color: #333;
display: flex;
align-items: center;
}

#passkeysManageModal .modal-title:before {
content: '\f084';
font-family: 'Font Awesome 5 Free';
margin-right: 10px;
color: #1677ff;
}

#passkeysManageModal .modal-body {
padding: 16px 20px;
max-height: 450px;
overflow-y: auto;
}

#passkeysManageModal .modal-footer {
background-color: #f8f9fa;
border-top: 1px solid #dee2e6;
padding: 12px 20px;
border-radius: 0 0 10px 10px;
}

/* 用户管理卡片新设计 */
.user-management-list {
display: grid;
grid-gap: 12px;
max-height: 400px;
overflow-y: auto;
padding: 2px;
}

.user-management-item {
border: 1px solid #e0e0e0;
border-radius: 8px;
background: white;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 用户信息头部 */
.user-header {
display: flex;
align-items: center;
padding: 12px 16px;
background-color: #f8f9fa;
border-bottom: 1px solid #e0e0e0;
}

.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #1677ff;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 12px;
font-size: 16px;
}

.user-header-info {
flex: 1;
}

.user-display-name {
font-weight: 600;
color: #333;
font-size: 15px;
margin: 0;
line-height: 1.3;
}

.user-username {
color: #666;
font-size: 13px;
margin: 0;
line-height: 1.3;
}

/* 用户详情内容 */
.user-content {
padding: 12px 16px;
}

.user-info-row {
display: flex;
margin-bottom: 8px;
}

.user-info-row:last-child {
margin-bottom: 0;
}

.user-info-label {
flex: 0 0 90px;
color: #666;
font-size: 13px;
}

.user-info-value {
flex: 1;
color: #333;
font-size: 13px;
font-weight: 500;
}

/* 用户操作按钮 */
.user-management-actions {
display: flex;
gap: 8px;
padding: 12px 16px;
background-color: #f8f9fa;
border-top: 1px solid #e0e0e0;
}

.user-management-actions .btn {
flex: 1;
padding: 6px 0;
font-size: 12px;
border-radius: 4px;
border: none;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.user-management-actions .btn i {
margin-right: 4px;
font-size: 12px;
}

.user-management-actions .btn-primary {
background: #1677ff;
color: white;
}

.user-management-actions .btn-warning {
background: #ffc107;
color: #212529;
}

.user-management-actions .btn-danger {
background: #dc3545;
color: white;
}

/* 添加新用户按钮 */
.add-new-user-btn {
margin-top: 16px;
background-color: #f8f9fa;
border: 1px dashed #1677ff;
border-radius: 8px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #1677ff;
font-weight: 500;
cursor: pointer;
}

.add-new-user-btn i {
margin-right: 8px;
font-size: 16px;
}

/* 微信小程序管理界面适配 */
.wechat-miniprogram .user-management-actions .btn-primary {
background: #07c160;
}

/* 移除所有悬停动画效果 */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
transition: none !important;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover {
filter: none !important;
transform: none !important;
}

/* 移除用户项目悬停效果 */
.user-item:hover,
.user-management-item:hover {
transform: none !important;
box-shadow: none !important;
}

/* 模态框按钮统一样式 */
.modal-footer .btn {
min-width: 100px;
    height: 38px;
    padding: 8px 16px;
    font-size: 14px;
border-radius: 6px;
border: none;
transition: none;
}

.modal-footer .btn-secondary {
background: #6c757d;
color: white;
}

.modal-footer .btn-primary {
background: #1677ff;
color: white;
}

.modal-footer .btn-success {
background: #28a745;
color: white;
}

/* 微信小程序模态框按钮适配 */
.wechat-miniprogram .modal-footer .btn-primary {
background: #07c160;
}

.wechat-miniprogram .modal-footer .btn-success {
background: #07c160;
}

/* 滚动条样式优化 */
.user-list::-webkit-scrollbar,
.user-management-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
width: 6px;
}

.user-list::-webkit-scrollbar-track,
.user-management-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}

.user-list::-webkit-scrollbar-thumb,
.user-management-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}

.user-list::-webkit-scrollbar-thumb:hover,
.user-management-list::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}

/* Passkeys 管理模态框 - 新版排版 */
.pk-modal {
border: none;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.pk-header {
padding: 16px 20px;
border-bottom: 1px solid #e9ecef;
display: flex;
align-items: center;
justify-content: space-between;
}

.pk-header .modal-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0;
}

.pk-header-actions {
display: flex;
align-items: center;
gap: 8px;
}

.pk-body {
padding: 16px 20px;
}

.pk-tip {
background: #f8f9fa;
border: 1px solid #e9ecef;
color: #666;
font-size: 13px;
padding: 8px 12px;
border-radius: 8px;
margin-bottom: 12px;
}

.pk-user-list {
max-height: 60vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}

.pk-user-card {
display: grid;
grid-template-columns: 44px 1fr 120px;
gap: 12px;
align-items: center;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 10px;
background: #fff;
}

/* 选择用户模态框：卡片高度提升至 97px */
#userSelectionModal .pk-user-card {
min-height: 97px !important;
}

/* 通行密钥管理模态框：卡片高度与选择用户一致 */
#passkeysManageModal .pk-user-card {
min-height: 97px !important;
}

.pk-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #1677ff 0%, #0052d9 100%);
color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
font-weight: 700;
letter-spacing: 0.5px;
}

.pk-info {
min-width: 0;
}

.pk-name-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}

.pk-displayName {
color: #333;
font-weight: 600;
font-size: 16px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.pk-username {
color: #666;
font-size: 13px;
}

.pk-meta {
color: #999;
font-size: 12px;
margin-top: 2px;
}

.pk-actions {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
justify-content: flex-start;
width: 120px;
}

.pk-actions .btn {
padding: 0 12px;
height: 32px;
font-size: 13px;
border-radius: 6px;
line-height: 30px;
width: 100%;
min-width: 0;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
transition: none !important;
}

.pk-actions .btn i { margin-right: 6px; }

.pk-actions .btn-primary {
background: #1677ff;
border-color: #1677ff;
color: #fff;
}

.pk-actions .btn-warning {
background: #ffc107;
border-color: #ffc107;
color: #212529;
}

.pk-actions .btn-danger {
background: #dc3545;
border-color: #dc3545;
color: #fff;
}

.pk-actions .btn-outline-secondary {
background: #fff;
color: #495057;
border-color: #ced4da;
}

.wechat-miniprogram .pk-actions .btn-primary {
background: #07c160;
border-color: #07c160;
}

/* 小屏适配 */
@media (max-width: 480px) {
.pk-user-card {
grid-template-columns: 36px 1fr;
grid-template-areas:
    'avatar info'
    'actions actions';
row-gap: 10px;
}
.pk-avatar { width: 36px; height: 36px; font-size: 14px; }
.pk-actions { grid-area: actions; width: 100%; align-items: stretch; justify-content: flex-start; }
.pk-actions .btn { width: 100%; }
}

/* 微信小程序配色适配 */
.wechat-miniprogram .pk-avatar {
background: linear-gradient(135deg, #07c160 0%, #07a955 100%);
}
.wechat-miniprogram .pk-actions .btn.btn-primary { background: #07c160; }

/* 全局去悬停动画（已统一处理，这里确保新类也不受影响） */
.pk-user-card,
.pk-actions .btn {
transition: none !important;
}

/* 选择用户 - 登录按钮居中（桌面端） */
@media (min-width: 481px) {
.pk-actions .login-btn {
width: 100px;
margin: 0 auto;
}
}

/* 手机端：选择用户登录按钮下移一点，整体下间距更小 */
@media (max-width: 480px) {
    /* 三个模态框在移动端保持一致的内部间隙 */
    #passkeysManageModal .pk-body, #userSelectionModal .pk-body, #passkeysModal .pk-body { padding: 12px 16px; }
    #passkeysManageModal .pk-user-list, #userSelectionModal .pk-user-list { gap: 6px; }
    #passkeysManageModal .pk-user-card, #userSelectionModal .pk-user-card { padding: 8px 10px; }
    #passkeysManageModal .pk-actions, #userSelectionModal .pk-actions { margin-top: -5px; }
    #userSelectionModal .pk-actions .login-btn { margin-top: 4px; margin-bottom: 2px; }
}

/* Passkeys 模态框头部统一高度 */
#passkeysManageModal .modal-header,
#passkeysModal .modal-header,
#userSelectionModal .modal-header {
    min-height: 64px;
    padding-top: 14px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
}

/* 与上保持一致的 pk-header 最小高度 */
.pk-header {
    min-height: 64px;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* 统一模态框圆角为 12px */
#passkeysManageModal .modal-content,
#userSelectionModal .modal-content,
#passkeysModal .modal-content,
.pk-modal {
    border-radius: 12px !important;
}

/* 统一 header 圆角 */
#passkeysManageModal .modal-header,
#userSelectionModal .modal-header,
#passkeysModal .modal-header,
.pk-header {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

/* 统一 footer 圆角 */
#passkeysManageModal .modal-footer,
#userSelectionModal .modal-footer,
#passkeysModal .modal-footer,
.pk-footer {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* 统一 footer 高度与布局 */
#passkeysManageModal .modal-footer,
#userSelectionModal .modal-footer,
#passkeysModal .modal-footer,
.pk-footer {
    padding: 0.85rem 1rem !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* 使 passkeysModal 的页脚按钮与 pk-modal 完全一致（不自适应铺满） */
#passkeysModal .modal-footer .btn-secondary,
#passkeysModal .modal-footer .btn-primary {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* 设置/更新通行密钥弹窗：提高 footer 高度 */
#passkeysModal .modal-content.is-update .modal-footer.pk-footer,
#passkeysModal .modal-content.is-create .modal-footer.pk-footer {
    min-height: 74px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* 设置/更新通行密钥弹窗：提高 header 高度 */
#passkeysModal .modal-content.is-update .modal-header.pk-header,
#passkeysModal .modal-content.is-create .modal-header.pk-header {
    min-height: 66px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* 通行密钥管理弹窗：header/footer 白色背景 */
#passkeysManageModal .modal-header,
#passkeysManageModal .pk-header {
    background-color: #ffffff !important;
}
#passkeysManageModal .modal-footer,
#passkeysManageModal .pk-footer {
    background-color: #ffffff !important;
}

/* 选择用户与更新用户信息模态框标题图标（与管理一致） */
#userSelectionModal .modal-title,
#passkeysModal .modal-title {
    display: flex;
    align-items: center;
}
#userSelectionModal .modal-title:before,
#passkeysModal .modal-title:before {
    content: '\f084';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    color: #1677ff;
}

/* is-update 弹窗：提高内容区与 footer 的间距（仅手机端生效，且不改变模态框高度）见下方 @media 规则 */

/* 统一三个模态框的位置与大小（覆盖所有差异） */
#passkeysManageModal .modal-dialog,
#passkeysModal .modal-dialog,
#userSelectionModal .modal-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 92vw !important;         /* 统一视觉宽度 */
    max-width: 520px !important;     /* 桌面端一致的最大宽度 */
}

#passkeysManageModal .modal-content,
#passkeysModal .modal-content,
#userSelectionModal .modal-content {
    max-height: 88vh !important;     /* 统一最大高度 */
    display: flex;
    flex-direction: column;
}

/* 通行密钥管理模态框高度与选择用户一致 */
#passkeysManageModal .modal-content {
    max-height: 88vh !important;
}

/* 通行密钥管理模态框：主体区域高度与选择用户一致 */
#passkeysManageModal .modal-body {
    max-height: 400px; /* 取消强制值，保持与其它统一设置一致 */
}

#passkeysManageModal .modal-body,
#passkeysModal .modal-body,
#userSelectionModal .modal-body {
    overflow-y: auto !important;     /* 统一滚动区域 */
}

/* pk-tip 固定，列表单独滚动 */
#passkeysManageModal .pk-body,
#userSelectionModal .pk-body,
#passkeysModal .pk-body {
    
    flex-direction: column;
    overflow: hidden !important; /* 覆盖 modal-body 的统一滚动设置 */
}

#passkeysManageModal .pk-tip,
#userSelectionModal .pk-tip,
#passkeysModal .pk-tip {
    flex: 0 0 auto;
}

#passkeysManageModal .pk-user-list,
#userSelectionModal .pk-user-list,
#passkeysModal .pk-user-list {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none; /* 交给弹窗整体高度控制 */
}

/* 桌面端（>=992px）适当收窄模态框 */
@media (min-width: 992px) {
    #passkeysManageModal .modal-dialog,
    #passkeysModal .modal-dialog,
    #userSelectionModal .modal-dialog {
        width: 80vw !important;
        max-width: 460px !important;
    }
}

/* 隐藏通行密钥相关模态框头部的关闭叉号 */
#passkeysManageModal .modal-header .btn-close,
#userSelectionModal .modal-header .btn-close,
#passkeysModal .modal-header .btn-close {
    display: none !important;
}

/* 隐藏通行密钥管理模态框的列表滚动条（仍可滚动） */
#passkeysManageModal .pk-user-list {
    -ms-overflow-style: none !important;   /* IE/Edge */
    scrollbar-width: none !important;      /* Firefox */
}
#passkeysManageModal .pk-user-list::-webkit-scrollbar {
    width: 0 !important;                   /* WebKit */
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}
/* 隐藏选择用户模态框的列表滚动条（仍可滚动） */
#userSelectionModal .pk-user-list {
    -ms-overflow-style: none !important;   /* IE/Edge */
    scrollbar-width: none !important;      /* Firefox */
}
#userSelectionModal .pk-user-list::-webkit-scrollbar {
    width: 0 !important;                   /* WebKit */
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}
/* 选择用户模态框：header 固定为 66px 高度 */
#userSelectionModal .modal-header,
#userSelectionModal .pk-header {
    height: 66px !important;
    min-height: 66px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 选择用户 与 通行密钥管理：统一尺寸（宽度与高度完全一致） */
#passkeysManageModal .modal-dialog,
#userSelectionModal .modal-dialog,
#passkeysModal .modal-dialog {
    width: 92vw !important;
    max-width: 520px !important;
}
#passkeysManageModal .modal-content,
#userSelectionModal .modal-content,
#passkeysModal .modal-content {
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
}
#passkeysManageModal .modal-body,
#userSelectionModal .modal-body,
#passkeysModal .modal-body {
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* 统一两个模态框的 body 与 pk-body 内边距（完全一致） */
#passkeysManageModal .modal-body,
#passkeysManageModal .pk-body,
#userSelectionModal .modal-body,
#userSelectionModal .pk-body,
#passkeysModal .modal-body,
#passkeysModal .pk-body {
    padding: 20px 24px !important;
}

/* 桌面端：固定 pk-tip，仅让列表滚动（手机端保持原样） */
@media (min-width: 768px) {
    /* 阻止整个 modal-body 滚动，避免 pk-tip 跟随滚动 */
    #passkeysManageModal .modal-body,
    #userSelectionModal .modal-body,
    #passkeysModal .modal-body {
        overflow: hidden !important;
    }

    /* 确保内部采用列布局，头部固定，列表自适应高度 */
    #passkeysManageModal .pk-body,
    #userSelectionModal .pk-body,
    #passkeysModal .pk-body {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* 头部提示固定不参与滚动 */
    #passkeysManageModal .pk-tip,
    #userSelectionModal .pk-tip,
    #passkeysModal .pk-tip {
        flex: 0 0 auto !important;
    }

    /* 列表作为唯一滚动区域 */
    #passkeysManageModal .pk-user-list,
    #userSelectionModal .pk-user-list,
    #passkeysModal .pk-user-list {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        max-height: none !important;
    }
}
*::-webkit-scrollbar {
display: none;
}

/* 桌面端：小数量自适应，高数量固定高度 */
@media (min-width: 576px) {
    /* 默认自适应内容高度（小数量时与图片一致） */
    #passkeysManageModal .modal-content,
    #userSelectionModal .modal-content,
    #passkeysModal .modal-content {
        height: auto !important;
        max-height: 88vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 当用户卡片达到 4 个及以上时，切换为固定高度（列表滚动） */
    #passkeysManageModal:has(.pk-user-list .pk-user-card:nth-child(4)) .modal-content,
    #userSelectionModal:has(.pk-user-list .pk-user-card:nth-child(4)) .modal-content {
        height: 531px !important;
        max-height: none !important;
    }

    /* 让 body 区域自适应填充剩余高度，并在内容过多时滚动 */
    #passkeysManageModal .modal-body,
    #userSelectionModal .modal-body,
    #passkeysModal .modal-body {
        flex: 1 1 auto !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
}

/* 移动端模态框高度调整 */
@media (max-width: 575px) {
    /* 保持通行密钥设置弹窗原有固定高度规则不变 */
    #passkeysModal .modal-content {
        height: var(--mobile-modal-height, 520px) !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 手机端：用户选择/通行密钥管理 默认自适应小高度（少量用户时更紧凑） */
    #userSelectionModal .modal-content,
    #passkeysManageModal .modal-content {
        height: auto !important;
        max-height: 88vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 手机端：当达到第4个用户卡片时切换为固定高度（列表滚动） */
    #userSelectionModal:has(.pk-user-list .pk-user-card:nth-child(3)) .modal-content,
    #passkeysManageModal:has(.pk-user-list .pk-user-card:nth-child(3)) .modal-content {
        height: var(--mobile-modal-height, 520px) !important;
        max-height: none !important;
    }

    /* 手机端：修改密码和设置通行密钥模态框禁止内部滚动 */
    #passkeysModal .modal-content.is-update .modal-body,
    #passkeysModal .modal-content.is-create .modal-body {
        overflow: hidden !important;
    }

    #passkeysModal .modal-content.is-update .pk-body,
    #passkeysModal .modal-content.is-create .pk-body {
        overflow: hidden !important;
    }

    #passkeysManageModal .modal-body,
    #userSelectionModal .modal-body,
    #passkeysModal .modal-body {
        /* 仅调整内边距，不改动其布局与滚动规则 */
        padding: 15px 16px !important;
    }

    .pk-user-card {
        padding: 8px 10px !important;
    }

    .pk-body {
        /* 仅调整内边距，不改变布局行为 */
        padding: 12px 16px !important;
    }

    /* 仅手机端：is-update 弹窗提升内容区与 footer 的间距（不改变模态框高度） */
    #passkeysModal .modal-content.is-update .modal-body > :last-child,
    #passkeysModal .modal-content.is-update .pk-body > :last-child {
        margin-bottom: var(--pk-update-footer-gap, 12px) !important;
    }
}