/* ══════════════════════════════════════════════
   远程支持管理后台 - 样式表
   ══════════════════════════════════════════════ */

:root { --bg:#f0f2f5; --sidebar:#001529; --sa:#1890ff; --card:#fff; --bd:#e8e8e8; --t1:#333; --t2:#666; --t3:#999; --pri:#1890ff; --ok:#52c41a; --warn:#faad14; --err:#ff4d4f; --r:8px; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--t1); min-height:100vh; display:flex; }

/* ── 侧边栏 ── */
.sidebar { 
    width:240px; 
    background:var(--sidebar); 
    height:100vh; 
    position:fixed; 
    left:0; 
    top:0; 
    z-index:100; 
    display:flex; 
    flex-direction:column;
    transition: width 0.3s ease;
}

.sidebar.collapsed {
    width: 64px;
}

.sidebar-header {
    height:64px; 
    display:flex; 
    align-items:center; 
    justify-content: space-between;
    padding:0 16px; 
    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-logo { 
    display:flex; 
    align-items:center; 
    gap: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-logo span {
    display: none;
}

.sidebar-logo svg { 
    width:28px; 
    height:28px; 
    flex-shrink: 0;
}

.sidebar-logo span { 
    color:#fff; 
    font-size:17px; 
    font-weight:600;
    transition: opacity 0.3s;
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

.sidebar-nav {
    flex:1; 
    padding:12px 0;
    overflow-y:auto;
    overflow-x:hidden;
}

.sidebar-nav a { 
    display:flex; 
    align-items:center; 
    padding:12px 24px; 
    color:rgba(255,255,255,.65); 
    text-decoration:none; 
    font-size:14px; 
    transition:all .2s; 
    gap:10px;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-nav a {
    padding: 12px 0;
    justify-content: center;
}

/* 折叠时隐藏文字和徽章 (!important 覆盖 JS 内联 style) */
.sidebar.collapsed .sidebar-nav a span,
.sidebar.collapsed .sidebar-nav a #helpBadge,
.sidebar.collapsed .sidebar-nav a #pendingBadge {
    display: none !important;
}

.sidebar-nav a:hover { 
    color:#fff; 
    background:rgba(255,255,255,.06); 
}

.sidebar-nav a.active { 
    color:#fff; 
    background:var(--sa); 
    font-weight:500; 
}

.sidebar-nav a svg {
    width:16px; 
    height:16px; 
    flex-shrink:0; 
}

/* 侧边栏分组标题 */
.nav-group-title {
    display:flex;
    align-items:center;
    padding:16px 24px 6px;
    font-size:11px;
    font-weight:600;
    color:rgba(255,255,255,.35);
    text-transform:uppercase;
    letter-spacing:1px;
    user-select:none;
}
.nav-group-title::after {
    content:'';
    flex:1;
    height:1px;
    background:rgba(255,255,255,.08);
    margin-left:8px;
}
.sidebar.collapsed .nav-group-title {
    display:none;
}

/* ── 主区域 ── */
.main { 
    margin-left:240px; 
    flex:1; 
    min-height:100vh;
    transition: margin-left 0.3s ease;
}

.sidebar.collapsed ~ .main {
    margin-left: 64px;
}
.topbar { height:56px; background:var(--card); border-bottom:1px solid var(--bd); display:flex; align-items:center; padding:0 24px; justify-content:space-between; position:sticky; top:0; z-index:50; }
.breadcrumb { font-size:14px; color:var(--t2); } .breadcrumb b { color:var(--t1); }
.user-info { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--t2); position:relative; }
.avatar { width:28px; height:28px; border-radius:50%; background:var(--pri); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }

/* ── 用户下拉菜单 ── */
.user-trigger { display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 8px; border-radius:8px; transition:background .2s; }
.user-trigger:hover { background:var(--hov); }
.user-trigger-arrow { transition:transform .2s; opacity:.5; }
.user-trigger.open .user-trigger-arrow { transform:rotate(180deg); }
.user-dropdown { position:absolute; top:calc(100% + 6px); right:0; min-width:160px; background:var(--card); border:1px solid var(--bd); border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.08); opacity:0; visibility:hidden; transform:translateY(-4px); transition:all .2s; z-index:100; overflow:hidden; }
.user-dropdown.show { opacity:1; visibility:visible; transform:translateY(0); }
.user-dropdown-item { display:flex; align-items:center; gap:8px; padding:10px 16px; font-size:13px; color:var(--t1); cursor:pointer; transition:background .15s; }
.user-dropdown-item:hover { background:var(--hov); }
.user-dropdown-item svg { flex-shrink:0; opacity:.6; }
.user-dropdown-divider { height:1px; background:var(--bd); margin:2px 0; }
.user-dropdown-danger { color:#ff4d4f; }
.user-dropdown-danger:hover { background:#fff1f0; }
.user-dropdown-danger svg { stroke:#ff4d4f; }

/* 角色标签（管理员 / 操作员）*/
.role-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.role-tag.role-admin {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}
.role-tag.role-operator {
    background: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
}
.role-tag.role-customer {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}
.content { padding:24px; }

/* ── 统计卡片 ── */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--card); border-radius:var(--r); padding:20px 24px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.stat-card .label { font-size:13px; color:var(--t3); margin-bottom:8px; }
.stat-card .value { font-size:30px; font-weight:700; line-height:1; }
.stat-card .sub { font-size:12px; color:var(--t3); margin-top:6px; }
.stat-card.blue .value { color:var(--pri); } .stat-card.green .value { color:var(--ok); }
.stat-card.orange .value { color:var(--warn); } .stat-card.red .value { color:var(--err); }

/* ── 卡片 ── */
.card { background:var(--card); border-radius:var(--r); box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:24px; }
.card-hd { padding:16px 24px; border-bottom:1px solid var(--bd); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.card-hd h3 { font-size:15px; font-weight:600; }
.card-bd { padding:0; } .card-bd.p { padding:24px; }

/* ── 表格 ── */
table { width:100%; border-collapse:collapse; }
th { background:#fafafa; color:var(--t2); font-weight:500; font-size:13px; padding:12px 16px; text-align:left; border-bottom:1px solid var(--bd); }
td { padding:12px 16px; font-size:13px; border-bottom:1px solid #f0f0f0; }
tr:last-child td { border-bottom:none; } tr:hover td { background:#fafafa; }
.empty-row td { text-align:center; padding:48px; color:var(--t3); font-size:14px; }

/* ── 标签 ── */
.tag { display:inline-flex; align-items:center; padding:2px 10px; border-radius:10px; font-size:12px; font-weight:500; gap:4px; }
.tag::before { content:''; width:6px; height:6px; border-radius:50%; }
.tag-green { background:#f6ffed; color:#389e0d; } .tag-green::before { background:#52c41a; }
.tag-blue { background:#e6f7ff; color:#096dd9; } .tag-blue::before { background:#1890ff; }
.tag-orange { background:#fff7e6; color:#d46b08; } .tag-orange::before { background:#faad14; }
.tag-gray { background:#f5f5f5; color:#8c8c8c; } .tag-gray::before { background:#bfbfbf; }
.tag-red { background:#fff1f0; color:#cf1322; } .tag-red::before { background:#ff4d4f; }

/* ── 按钮 ── */
.btn { display:inline-flex; align-items:center; gap:4px; padding:6px 16px; border:1px solid var(--bd); border-radius:4px; font-size:13px; cursor:pointer; background:var(--card); color:var(--t1); transition:all .2s; }
.btn:hover { border-color:var(--pri); color:var(--pri); }
.btn-pri { background:var(--pri); color:#fff; border-color:var(--pri); } .btn-pri:hover { background:#40a9ff; border-color:#40a9ff; color:#fff; }
.btn-dng { color:var(--err); border-color:var(--err); } .btn-dng:hover { background:#fff1f0; }
.btn-sm { padding:3px 10px; font-size:12px; }
/* 图标按钮 (操作列用) */
.btn-icon { padding:4px 6px; border:1px solid transparent; border-radius:4px; font-size:12px; cursor:pointer; background:transparent; color:var(--t2); transition:all .15s; display:inline-flex; align-items:center; }
.btn-icon:hover { background:var(--bg); border-color:var(--bd); color:var(--t1); }
.btn-icon.btn-icon-pri:hover { color:var(--pri); border-color:var(--pri); background:#e6f7ff; }
.btn-icon.btn-icon-dng:hover { color:var(--err); border-color:var(--err); background:#fff1f0; }
.btn-icon.btn-icon-warn:hover { color:var(--warn); border-color:var(--warn); background:#fff7e6; }
.btn-icon:disabled { opacity:.3; cursor:not-allowed; }
.btn-icon:disabled:hover { background:transparent; border-color:transparent; color:var(--t2); }

/* ── 表单 ── */
.fi { width:100%; padding:8px 12px; border:1px solid var(--bd); border-radius:4px; font-size:14px; color:var(--t1); transition:border-color .2s; }
.fi:focus { outline:none; border-color:var(--pri); box-shadow:0 0 0 2px rgba(24,144,255,.1); }
select.fi { appearance:auto; }
.toolbar-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar-row .fi { width:auto; min-width:160px; padding:5px 10px; font-size:13px; }
.toolbar-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; }
.toolbar-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ── 弹窗 ── */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:none; align-items:center; justify-content:center; }
.modal-mask.show { display:flex; }
.modal-box { background:var(--card); border-radius:var(--r); width:480px; max-width:90vw; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.modal-hd { padding:16px 24px; border-bottom:1px solid var(--bd); font-size:16px; font-weight:600; }
.modal-bd { padding:24px; }
.modal-ft { padding:12px 24px; border-top:1px solid var(--bd); display:flex; justify-content:flex-end; gap:8px; }
.fg { margin-bottom:16px; } .fg label { display:block; font-size:13px; color:var(--t2); margin-bottom:6px; font-weight:500; }
.secret-box { background:#f6f8fa; border:1px solid var(--bd); border-radius:4px; padding:12px 16px; font-family:monospace; font-size:13px; word-break:break-all; display:flex; align-items:center; gap:8px; }

/* ── Toast ── */
.toast { position:fixed; top:24px; right:24px; padding:12px 20px; background:var(--card); border-radius:var(--r); box-shadow:0 4px 12px rgba(0,0,0,.15); font-size:13px; z-index:2000; display:none; border-left:3px solid var(--ok); }
.toast.show { display:block; animation:si .3s ease; } .toast.error { border-left-color:var(--err); }
@keyframes si { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ── 页面切换 ── */
.page { display:none; } .page.active { display:block; }
code { background:#f5f5f5; padding:1px 6px; border-radius:3px; font-size:12px; font-family:monospace; }

/* ── 分页 ── */
.pagination { display:flex; align-items:center; justify-content:flex-end; padding:12px 16px; gap:4px; font-size:13px; color:var(--t2); }
.pagination button { padding:4px 10px; border:1px solid var(--bd); border-radius:4px; background:var(--card); cursor:pointer; font-size:12px; }
.pagination button:hover { border-color:var(--pri); color:var(--pri); }
.pagination button:disabled { opacity:.4; cursor:not-allowed; }
.pagination .current { padding:4px 10px; background:var(--pri); color:#fff; border-radius:4px; font-size:12px; }

/* ── 登录遮罩 ── */
.login-mask { 
    position:fixed; 
    inset:0; 
    background: #0a1628;
    background-image: 
        radial-gradient(ellipse at 20% 30%, rgba(24, 144, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(64, 224, 255, 0.1) 0%, transparent 50%);
    z-index:9999; 
    display:flex; 
    align-items:center; 
    justify-content:center;
    overflow: hidden;
}
.login-mask.hidden { display:none; }

/* 登录背景粒子动画画布 */
#loginCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 首屏防闪：若 localStorage 已有 token，<html> 会被内联脚本加上 .has-token，
   登录层在首次渲染前即隐藏，避免刷新时闪现登录界面。
   异步 checkAuth() 若发现 token 失效会清 token + 重载，届时 .has-token 不存在，登录层恢复显示。 */
html.has-token .login-mask { display:none; }

.login-card { 
    background:rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(20px);
    border-radius:20px; 
    padding:40px 36px; 
    width:380px; 
    box-shadow: 
        0 20px 60px rgba(0,0,0,.4),
        0 0 0 1px rgba(255,255,255,.1),
        0 0 80px rgba(24, 144, 255, 0.15);
    text-align:center;
    animation: slideUp 0.4s ease-out;
    position: relative;
    z-index: 1;
}

.login-header {
    margin-bottom: 28px;
}

.login-header svg {
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(24, 144, 255, 0.4));
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.login-header h2 { 
    font-size:24px; 
    margin:0; 
    color:#1f2937;
    font-weight:700;
    letter-spacing: -0.5px;
}

.login-card p { 
    font-size:14px; 
    color:var(--t3); 
    margin-bottom:28px;
}

.login-card .fi { 
    margin-bottom:0; 
    text-align:left;
    padding:11px 16px 11px 44px;
    font-size:14px;
    border:2px solid #e5e7eb;
    border-radius:8px;
    transition: all 0.3s;
    background: #f9fafb;
}

.input-group {
    position: relative;
    margin-bottom:14px;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 18px !important;
    height: 18px !important;
    color: #9ca3af;
    pointer-events: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    z-index: 1;
}

.input-group:focus-within .input-icon {
    color: #1890ff;
}

.login-card .fi:focus {
    border-color:#1890ff;
    background: #fff;
    box-shadow:0 0 0 4px rgba(24,144,255,.15);
    transform: translateY(-1px);
}

.login-card .btn { 
    width:100%; 
    justify-content:center; 
    padding:12px; 
    font-size:15px; 
    margin-top:6px;
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border:none;
    border-radius:8px;
    color:#fff;
    font-weight:600;
    letter-spacing: 1px;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.login-card .btn:hover {
    transform: translateY(-2px);
    box-shadow:0 6px 20px rgba(102, 126, 234, 0.4);
}

.login-card .btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.login-err { 
    color:#dc2626; 
    font-size:13px; 
    margin-top:12px; 
    min-height:0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border-left: none;
    animation: none;
    line-height: 1.5;
}

/* ── 改密弹窗优化 ── */
.modal-pwd {
    width:480px;
}

.modal-pwd .modal-hd {
    display:flex;
    align-items:center;
    font-size:17px;
    padding:20px 24px;
    background:linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-bottom:2px solid #bae6fd;
}

.modal-pwd .modal-bd {
    padding:28px 24px;
}

.modal-pwd .fg label {
    display:flex;
    align-items:center;
    font-size:13px;
    color:#374151;
    margin-bottom:8px;
    font-weight:500;
}

.modal-pwd .fi {
    padding:10px 14px;
    font-size:14px;
    border:1.5px solid #d1d5db;
    transition: all 0.3s;
}

.modal-pwd .fi:focus {
    border-color:#1890ff;
    box-shadow:0 0 0 3px rgba(24,144,255,.15);
    outline:none;
}

.modal-pwd .modal-ft {
    padding:16px 24px;
    border-top:1px solid #e5e7eb;
    background:#f9fafb;
}

/* ── 通用表单弹窗样式（添加设备、操作员等） ── */
.modal-form {
    width:480px;
}

.modal-form .modal-hd {
    display:flex;
    align-items:center;
    font-size:17px;
    padding:20px 24px;
    background:linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-bottom:2px solid #86efac;
}

.modal-form .modal-bd {
    padding:28px 24px;
}

.modal-form .fg label {
    display:flex;
    align-items:center;
    font-size:13px;
    color:#374151;
    margin-bottom:8px;
    font-weight:500;
}

.modal-form .fi,
.modal-form select.fi {
    padding:10px 14px;
    font-size:14px;
    border:1.5px solid #d1d5db;
    transition: all 0.3s;
    appearance:auto;
}

.modal-form .fi:focus,
.modal-form select.fi:focus {
    border-color:#1890ff;
    box-shadow:0 0 0 3px rgba(24,144,255,.15);
    outline:none;
}

.modal-form .modal-ft {
    padding:16px 24px;
    border-top:1px solid #e5e7eb;
    background:#f9fafb;
}

/* ── 图表 ── */
.chart-container { position:relative; height:260px; }

/* ── 响应式 ── */
@media (max-width:1024px) { 
    .stat-row { grid-template-columns:repeat(2,1fr); } 
}

/* ── 平板端（768px-1024px） ── */
@media (max-width:1024px) and (min-width:769px) {
    .sidebar {
        width: 64px; /* 默认折叠 */
    }
    .sidebar .sidebar-logo span {
        display: none;
    }
    .sidebar .sidebar-nav a {
        padding: 12px 0;
        justify-content: center;
    }
    .sidebar .sidebar-nav a span,
    .sidebar .sidebar-nav a #helpBadge,
    .sidebar .sidebar-nav a #pendingBadge {
        display: none;
    }
    .main {
        margin-left: 64px;
    }
}

/* ── 手机端（≤768px） ── */
@media (max-width:768px) { 
    /* 侧边栏改为抽屉式 */
    .sidebar { 
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        /* 适配刘海屏：侧边栏顶部预留安全区，避免 Logo/菜单被遮住 */
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
        /* 提高 z-index，确保抽屉在 topbar 之上 */
        z-index: 100;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .sidebar-header {
        justify-content: space-between;
    }
    
    /* 手机端隐藏折叠箭头（已有汉堡菜单） */
    .sidebar-toggle {
        display: none !important;
    }
    
    /* 主区域占满全屏 */
    .main { 
        margin-left:0;
        width: 100%;
    }
    
    /* 顶部栏添加汉堡菜单按钮（适配刘海屏/浏览器地址栏）*/
    .topbar {
        padding: 0 16px;
        /* 适配 iOS 刘海屏/状态栏：预留安全区内边距，避免被浏览器 UI 遮住 */
        padding-top: env(safe-area-inset-top, 0);
        height: calc(56px + env(safe-area-inset-top, 0));
        /* 提高 z-index，确保在遮罩层之上，但仍低于侧边栏 */
        z-index: 60;
    }
    
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--t1);
        /* 扩大触控区至 44x44 (符合 Apple HIG 最小点击目标) */
        width: 44px;
        height: 44px;
        padding: 0;
        cursor: pointer;
        margin-right: 8px;
        margin-left: -8px;
        border-radius: 8px;
        transition: background 0.2s;
        flex-shrink: 0;
    }
    
    .mobile-menu-btn:active {
        background: rgba(0, 0, 0, 0.06);
    }
    
    /* 遮罩层 */
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 99;
    }
    
    .mobile-overlay.show {
        display: block;
    }
    
    /* 统计卡片 2 列布局 */
    .stat-row { 
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .stat-card .value {
        font-size: 24px;
    }
    
    .stat-card .label {
        font-size: 12px;
    }
    
    /* 表格横向滚动 */
    .card-bd {
        overflow-x: auto;
    }
    
    table {
        min-width: 600px;
    }
    
    /* 工具栏堆叠 */
    .toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .toolbar-row .fi {
        width: 100%;
        min-width: unset;
    }

    .toolbar-left, .toolbar-right {
        flex-wrap: wrap;
    }
    
    /* 弹窗自适应（包括 modal-form / modal-pwd 等具体子类）*/
    .modal-box,
    .modal-form,
    .modal-pwd {
        width: calc(100vw - 24px) !important;
        max-width: 420px !important;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 12px;
        /* 适配 iOS 底部 home indicator */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    
    /* 弹窗内部内边距缩小 */
    .modal-hd,
    .modal-form .modal-hd,
    .modal-pwd .modal-hd {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }
    
    .modal-bd,
    .modal-form .modal-bd,
    .modal-pwd .modal-bd {
        padding: 18px 16px !important;
    }
    
    .modal-ft,
    .modal-form .modal-ft,
    .modal-pwd .modal-ft {
        padding: 12px 16px !important;
        /* 手机端按钮平分宽度，避免小按钮难点中 */
        display: flex !important;
        gap: 8px;
    }
    
    .modal-ft .btn {
        flex: 1;
        padding: 10px 12px;
        font-size: 14px;
        min-height: 40px;
    }
    
    /* 输入框在手机端加大高度，避免 iOS 自动缩放（<16px 会触发）*/
    .modal-form .fi,
    .modal-form select.fi,
    .modal-pwd .fi {
        width: 100% !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
    
    /* 字段垂直堆叠（如一行多列的 .fg-row）*/
    .modal-form .fg,
    .modal-pwd .fg {
        margin-bottom: 14px;
    }
    
    /* 弹窗遮罩层背景稍微加深，提高对比 */
    .modal-mask {
        background: rgba(0, 0, 0, 0.55);
        padding: 12px;
        align-items: flex-start;
        padding-top: 8vh;
    }
    
    /* 用户信息简化：仅隐藏用户名，保留角色标签 */
    .user-info #userName {
        display: none;
    }
    .user-dropdown { right: -8px; min-width: 140px; }
}