:root { --sidebar-width: 276px; --primary: #1677ff; --danger: #dc2626; --success: #059669; --warning: #d97706; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }

/* ===== 骨架屏动画 ===== */
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-text-sm { height: 12px; margin-bottom: 6px; }
.skeleton-title { height: 20px; margin-bottom: 12px; width: 60%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-btn { height: 32px; width: 80px; border-radius: 6px; }
.skeleton-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.skeleton-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.skeleton-row:last-child { margin-bottom: 0; }
.skeleton-flex { flex: 1; }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.page-content { animation: fadeIn 0.3s ease-out; }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #000c17; background: linear-gradient(135deg, #000c17 0%, #002140 50%, #24243e 100%); overflow: hidden; position: relative; }
.login-page::before { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(22,119,255,0.15) 0%, transparent 70%); top: -200px; right: -100px; animation: float 8s ease-in-out infinite; }
.login-page::after { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(64,150,255,0.1) 0%, transparent 70%); bottom: -100px; left: -50px; animation: float 6s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(5deg); } }
.login-wrapper { display: flex; width: 900px; max-width: 95vw; min-height: 520px; border-radius: 24px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,0.4); animation: scaleIn 0.5s ease-out; position: relative; z-index: 1; }
.login-brand { flex: 1; background: linear-gradient(135deg, #1677ff 0%, #4096ff 50%, #69b1ff 100%); padding: 3rem; display: flex; flex-direction: column; justify-content: center; color: #fff; position: relative; overflow: hidden; }
.login-brand::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.05); top: -80px; right: -80px; }
.login-brand::after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.03); bottom: -60px; left: -40px; }
.login-brand .brand-icon { width: 64px; height: 64px; background: rgba(255,255,255,0.15); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 2rem; backdrop-filter: blur(10px); }
.login-brand h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.75rem; line-height: 1.3; }
.login-brand p { font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 2rem; }
.login-brand .features { display: flex; flex-direction: column; gap: 12px; }
.login-brand .feature-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.8); }
.login-brand .feature-item i { color: #bae0ff; font-size: 1rem; }
.login-card { background: #fff; flex: 1; padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.login-card .login-header { margin-bottom: 2rem; }
.login-card .login-header h2 { font-size: 1.5rem; font-weight: 700; color: #001529; margin-bottom: 0.4rem; }
.login-card .login-header p { font-size: 0.9rem; color: #888; }
.login-card .form-label { font-size: 0.85rem; font-weight: 600; color: #555; margin-bottom: 0.4rem; }
.login-card .input-group-text { background: #e6f4ff; border-color: #e5e7eb; color: #69b1ff; }
.login-card .form-control { border-color: #e5e7eb; padding: 0.7rem 1rem; font-size: 0.95rem; transition: all 0.2s; }
.login-card .form-control:focus { border-color: #69b1ff; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.login-card .btn-login { background: linear-gradient(135deg, #1677ff, #69b1ff); border: none; padding: 0.75rem; font-size: 1rem; font-weight: 600; border-radius: 10px; transition: all 0.3s; letter-spacing: 0.5px; }
.login-card .btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
.login-card .btn-login:active { transform: translateY(0); }
.login-card .login-footer { text-align: center; margin-top: 2rem; font-size: 0.8rem; color: #aaa; }
.login-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; background: #f3f6fb; border-radius: 12px; }
.login-mode-btn { border: none; background: transparent; color: #64748b; border-radius: 9px; padding: 0.55rem 0.35rem; font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; transition: all 0.18s ease; }
.login-mode-btn.active { background: #fff; color: #1677ff; box-shadow: 0 2px 8px rgba(15,23,42,0.08); }
.admin-qr-box { min-height: 210px; border: 1px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; display: flex; align-items: center; justify-content: center; padding: 16px; }
.admin-qr-box.is-one-tap { min-height: 72px; padding: 12px; }
.admin-qr-box canvas,
.admin-qr-box img { width: 176px; height: 176px; }
.admin-wechat-one-tap { min-width: 132px; min-height: 42px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0 16px; font-size: 0.94rem; font-weight: 750; line-height: 1; box-shadow: 0 8px 18px rgba(34,197,94,0.22); }
.admin-wechat-one-tap i { font-size: 1.08rem; }
.admin-wechat-one-tap:active { transform: translateY(1px); }
.security-mini-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; background: #fff; height: 100%; }
.security-mini-card .label { font-size: 0.78rem; color: #64748b; margin-bottom: 0.25rem; }
.security-mini-card .value { font-weight: 700; color: #0f172a; word-break: break-all; }
.security-qr-inline { min-height: 168px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; display: flex; align-items: center; justify-content: center; padding: 12px; }
.security-qr-inline canvas,
.security-qr-inline img { width: 136px; height: 136px; }
.wechat-bind-panel { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; background: #fff; min-height: 360px; }
.wechat-binding-list,
.wechat-user-results { display: grid; gap: 10px; }
.wechat-binding-item,
.wechat-user-item { display: flex; align-items: center; gap: 12px; border: 1px solid #edf2f7; border-radius: 12px; padding: 10px 12px; background: #f8fafc; }
.wechat-binding-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 42px; background: #e2e8f0; }
.wechat-binding-main { min-width: 0; flex: 1; }
.wechat-binding-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wechat-bind-qr { min-height: 240px; }
.wechat-bind-qr canvas,
.wechat-bind-qr img { width: 184px; height: 184px; }
@media (max-width: 768px) { .login-wrapper { flex-direction: column; } .login-brand { padding: 2rem; min-height: auto; } .login-brand h1 { font-size: 1.3rem; } .login-brand .features { display: none; } }

.app { display: none; }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: #fff; color: #0f172a; padding: 0; overflow: hidden; z-index: 100; border-right: 1px solid #e6edf5; box-shadow: 10px 0 30px rgba(15,23,42,0.02); display: flex; flex-direction: column; transition: width 0.22s ease, background-color 0.22s ease, border-color 0.22s ease; }
.sidebar .logo { min-height: 84px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #eef2f7; overflow: hidden; flex: 0 0 auto; }
.sidebar .logo-mark { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: linear-gradient(135deg, #f97316 0%, #f59e0b 26%, #14b8a6 27%, #14b8a6 52%, #6366f1 53%, #6366f1 76%, #ef4444 77%, #ef4444 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.22rem; box-shadow: 0 10px 20px rgba(20,184,166,0.12); }
.sidebar .logo-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; color: #111827; white-space: nowrap; }
.sidebar .logo-copy strong { font-size: 1.08rem; font-weight: 800; }
.sidebar .logo-copy span { margin-top: 4px; font-size: 0.78rem; color: #64748b; font-weight: 700; }
.tenant-info { margin: 10px 14px 2px; padding: 9px 11px; border-radius: 12px; background: #f7fbfd; border: 1px solid #edf4f7; color: #64748b; font-size: 0.75rem; line-height: 1.42; flex: 0 0 auto; overflow: hidden; }
.tenant-info .tenant-info-name { color: #0f172a; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-info .tenant-info-role { margin-top: 4px; color: #0f766e; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-info .tenant-info-danger { color: #dc2626; font-weight: 800; }
.tenant-info .tenant-info-warning { color: #d97706; font-weight: 800; }
.sidebar-menu { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px 14px; scrollbar-width: thin; scrollbar-color: #d8e2ea transparent; }
.sidebar-menu::-webkit-scrollbar { width: 6px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: #d8e2ea; border-radius: 999px; }
.menu-section { margin-bottom: 4px; }
.sidebar .menu-group { width: 100%; min-height: 34px; padding: 0 8px 0 10px; border: 0; border-radius: 10px; background: transparent; color: #64748b; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0; transition: color 0.18s ease, background-color 0.18s ease; }
.sidebar .menu-group:hover,
.menu-section.has-active > .menu-group { background: #f3f8fa; color: #0f172a; }
.menu-group-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.menu-group-main i { width: 18px; flex: 0 0 18px; text-align: center; font-size: 0.94rem; color: currentColor; }
.menu-group-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-group-meta { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #94a3b8; }
.menu-group-count { min-width: 18px; height: 18px; border-radius: 999px; background: #eef2f7; color: #64748b; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; line-height: 1; }
.menu-group-caret { font-size: 0.74rem; transition: transform 0.16s ease; }
.menu-section.is-collapsed .menu-group-caret { transform: rotate(-90deg); }
.menu-section-items { display: grid; gap: 1px; padding: 2px 0 4px; }
.menu-section.is-collapsed .menu-section-items { display: none; }
.sidebar .menu-item { display: flex; align-items: center; gap: 9px; min-height: 34px; margin: 1px 0; padding: 0 10px 0 18px; color: #4b5563; cursor: pointer; transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease; text-decoration: none !important; position: relative; border-left: 0; border-radius: 10px; font-size: 0.84rem; font-weight: 650; white-space: nowrap; }
.sidebar .menu-item:hover { background: #f3f8fa; color: #0f172a; transform: translateX(1px); }
.sidebar .menu-item.active { background: #eafaf7; color: #0f9f92; box-shadow: none; }
.sidebar .menu-item i { font-size: 1rem; width: 20px; flex: 0 0 20px; text-align: center; color: currentColor; }
.sidebar .menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .menu-item.sidebar-logout { color: #dc2626; margin-top: 8px; padding-left: 10px; }
.sidebar .menu-item.sidebar-logout:hover { background: #fff1f2; color: #b91c1c; }
.sidebar-actions { flex: 0 0 auto; border-top: 1px solid #eef2f7; padding: 10px 12px 14px; display: grid; gap: 4px; }
.sidebar-action { width: 100%; min-height: 36px; border: 0; background: transparent; color: #4b5563; border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 0.84rem; font-weight: 800; transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease; }
.sidebar-action:hover { color: #0f172a; background: #f5f8fb; transform: translateX(1px); }
.sidebar-action.active { color: #0f9f92; background: #eafaf7; }
.sidebar-action i { width: 20px; flex: 0 0 20px; text-align: center; font-size: 1.02rem; color: currentColor; }
body.sidebar-collapsed { --sidebar-width: 88px; }
body.sidebar-collapsed .sidebar .logo { justify-content: center; padding-left: 14px; padding-right: 14px; }
body.sidebar-collapsed .sidebar .logo-copy,
body.sidebar-collapsed .tenant-info,
body.sidebar-collapsed .menu-group-main span,
body.sidebar-collapsed .menu-group-meta,
body.sidebar-collapsed .sidebar-action span { display: none; }
body.sidebar-collapsed .sidebar-menu { padding-left: 10px; padding-right: 10px; }
body.sidebar-collapsed .menu-section.is-collapsed .menu-section-items { display: grid; }
body.sidebar-collapsed .sidebar .menu-group { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .menu-group-main { gap: 0; }
body.sidebar-collapsed .menu-group-main i { width: auto; flex-basis: auto; font-size: 1.1rem; }
body.sidebar-collapsed .sidebar .menu-item,
body.sidebar-collapsed .sidebar-action { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; font-size: 0; }
body.sidebar-collapsed .sidebar .menu-item span { display: none; }
body.sidebar-collapsed .sidebar .menu-item i,
body.sidebar-collapsed .sidebar-action i { font-size: 1.12rem; width: auto; flex-basis: auto; }
body.sidebar-collapsed .sidebar .menu-item:hover,
body.sidebar-collapsed .sidebar-action:hover { transform: none; }
body.admin-dark {
    --admin-dark-bg: #0b1220;
    --admin-dark-surface: #111827;
    --admin-dark-surface-soft: #172033;
    --admin-dark-surface-hover: #1f2937;
    --admin-dark-border: #253044;
    --admin-dark-border-soft: #1f2937;
    --admin-dark-text: #dbe4f0;
    --admin-dark-heading: #f8fafc;
    --admin-dark-muted: #94a3b8;
    --admin-dark-primary-soft: rgba(22,119,255,0.16);
    --admin-dark-success-soft: rgba(20,184,166,0.17);
    background: var(--admin-dark-bg);
    color: var(--admin-dark-text);
}
body.admin-dark .login-wrapper { background: #0f172a; border: 1px solid rgba(148,163,184,0.18); box-shadow: 0 28px 90px rgba(0,0,0,0.58); }
body.admin-dark .login-card { background: linear-gradient(180deg, #111827 0%, #0f172a 100%); color: var(--admin-dark-text); border-left: 1px solid rgba(148,163,184,0.16); }
body.admin-dark .login-card .login-header h2 { color: var(--admin-dark-heading); }
body.admin-dark .login-card .login-header p,
body.admin-dark .login-card .form-label,
body.admin-dark .login-card .login-footer { color: var(--admin-dark-muted); }
body.admin-dark .login-mode-tabs { background: #0b1220; border: 1px solid var(--admin-dark-border); }
body.admin-dark .login-mode-btn { color: #9fb0c7; }
body.admin-dark .login-mode-btn:hover { background: rgba(96,165,250,0.10); color: #dbeafe; }
body.admin-dark .login-mode-btn.active { background: #1d4ed8; color: #fff; box-shadow: 0 10px 22px rgba(29,78,216,0.24); }
body.admin-dark .login-card .input-group-text { background: #111827 !important; border-color: #2b3950 !important; color: #93c5fd !important; }
body.admin-dark .login-card .form-control { background-color: #0b1220 !important; border-color: #2b3950 !important; color: #f8fafc !important; caret-color: #93c5fd; }
body.admin-dark .login-card .form-control:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96,165,250,0.20) !important; }
body.admin-dark .login-card .form-control:-webkit-autofill,
body.admin-dark .login-card .form-control:-webkit-autofill:hover,
body.admin-dark .login-card .form-control:-webkit-autofill:focus { -webkit-text-fill-color: #f8fafc !important; box-shadow: 0 0 0 1000px #0b1220 inset !important; caret-color: #93c5fd; transition: background-color 9999s ease-out 0s; }
body.admin-dark .login-card .btn-login { box-shadow: 0 14px 30px rgba(22,119,255,0.26); }
body.admin-dark .login-card .btn-login:hover { box-shadow: 0 18px 36px rgba(22,119,255,0.34); }
body.admin-dark .login-card .admin-qr-box { background: #0b1220 !important; border-color: #2b3950 !important; }
body.admin-dark .login-card .admin-wechat-one-tap { box-shadow: 0 8px 18px rgba(34,197,94,0.18); }
body.admin-dark .sidebar { background: #111827; border-right-color: #1f2937; box-shadow: none; }
body.admin-dark .sidebar .logo,
body.admin-dark .sidebar-actions { border-color: #1f2937; }
body.admin-dark .sidebar .logo-copy,
body.admin-dark .sidebar .logo-copy strong,
body.admin-dark .tenant-info .tenant-info-name { color: #f8fafc; }
body.admin-dark .tenant-info .tenant-info-role { color: #5eead4; }
body.admin-dark .sidebar .logo-copy span,
body.admin-dark .tenant-info,
body.admin-dark .sidebar .menu-group,
body.admin-dark .menu-group-meta { color: #94a3b8; }
body.admin-dark .tenant-info { background: #172033; border-color: #25334a; }
body.admin-dark .sidebar .menu-item,
body.admin-dark .sidebar-action { color: #cbd5e1; }
body.admin-dark .sidebar .menu-group:hover,
body.admin-dark .menu-section.has-active > .menu-group { background: #1f2937; color: #fff; }
body.admin-dark .menu-group-count { background: #25334a; color: #cbd5e1; }
body.admin-dark .sidebar .menu-item:hover,
body.admin-dark .sidebar-action:hover { background: #1f2937; color: #fff; }
body.admin-dark .sidebar .menu-item.active,
body.admin-dark .sidebar-action.active { background: rgba(20,184,166,0.17); color: #5eead4; box-shadow: none; }
body.admin-dark .sidebar .menu-item.sidebar-logout:hover { background: rgba(220,38,38,0.16); color: #fecaca; }
body.admin-dark .main { background: linear-gradient(180deg, #0f172a 0%, var(--admin-dark-bg) 100%); color: var(--admin-dark-text); }
body.admin-dark .page-content,
body.admin-dark .card-body,
body.admin-dark .modal-body,
body.admin-dark .detail-panel { color: var(--admin-dark-text); }
body.admin-dark .page-header h4,
body.admin-dark .page-header h5,
body.admin-dark .card-title,
body.admin-dark .modal-title,
body.admin-dark h1,
body.admin-dark h2,
body.admin-dark h3,
body.admin-dark h4,
body.admin-dark h5,
body.admin-dark h6 { color: var(--admin-dark-heading); }
body.admin-dark .text-muted,
body.admin-dark .text-secondary,
body.admin-dark small,
body.admin-dark .small { color: var(--admin-dark-muted) !important; }
body.admin-dark a:not(.btn):not(.menu-item):not(.page-link) { color: #60a5fa; }
body.admin-dark hr,
body.admin-dark .border,
body.admin-dark .border-top,
body.admin-dark .border-end,
body.admin-dark .border-bottom,
body.admin-dark .border-start { border-color: var(--admin-dark-border) !important; }

body.admin-dark .card,
body.admin-dark .stat-card,
body.admin-dark .security-mini-card,
body.admin-dark .skeleton-card,
body.admin-dark .tree-card,
body.admin-dark .modal-content,
body.admin-dark .confirm-box,
body.admin-dark .dropdown-menu,
body.admin-dark .list-group-item,
body.admin-dark .accordion-item,
body.admin-dark .popover,
body.admin-dark .offcanvas,
body.admin-dark .bg-white,
body.admin-dark .bg-light { background-color: var(--admin-dark-surface) !important; color: var(--admin-dark-text); border-color: var(--admin-dark-border) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.24); }
body.admin-dark .card-header,
body.admin-dark .card-footer,
body.admin-dark .modal-header,
body.admin-dark .modal-footer,
body.admin-dark .accordion-header,
body.admin-dark .list-group-item.active { background-color: var(--admin-dark-surface-soft) !important; border-color: var(--admin-dark-border) !important; color: var(--admin-dark-heading); }
body.admin-dark .stat-card .label,
body.admin-dark .security-mini-card .label,
body.admin-dark .tree-card .info .meta,
body.admin-dark .tree-card .stats .stat-label,
body.admin-dark .detail-row .label { color: var(--admin-dark-muted); }
body.admin-dark .stat-card .value,
body.admin-dark .security-mini-card .value,
body.admin-dark .tree-card .info .name,
body.admin-dark .tree-card .stats .stat-val,
body.admin-dark .detail-row .value { color: var(--admin-dark-heading); }

body.admin-dark .table { --bs-table-bg: transparent; --bs-table-color: var(--admin-dark-text); --bs-table-border-color: var(--admin-dark-border); --bs-table-striped-bg: rgba(148,163,184,0.06); --bs-table-hover-bg: rgba(96,165,250,0.10); color: var(--admin-dark-text); border-color: var(--admin-dark-border); }
body.admin-dark .table > :not(caption) > * > * { background-color: transparent; color: var(--admin-dark-text); border-color: var(--admin-dark-border); }
body.admin-dark .table thead th,
body.admin-dark .table th { background: var(--admin-dark-surface-soft) !important; color: var(--admin-dark-muted); border-color: var(--admin-dark-border); }
body.admin-dark .table tbody tr { border-color: var(--admin-dark-border); }
body.admin-dark .table tbody tr:hover,
body.admin-dark .table-hover > tbody > tr:hover > * { background: rgba(96,165,250,0.10) !important; color: var(--admin-dark-heading); }
body.admin-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(148,163,184,0.05); }
body.admin-dark .table-responsive { border-color: var(--admin-dark-border); }

body.admin-dark .form-label,
body.admin-dark label { color: var(--admin-dark-text); }
body.admin-dark .form-control,
body.admin-dark .form-select,
body.admin-dark .input-group-text,
body.admin-dark textarea,
body.admin-dark input[type="text"],
body.admin-dark input[type="number"],
body.admin-dark input[type="tel"],
body.admin-dark input[type="password"],
body.admin-dark input[type="search"],
body.admin-dark input[type="date"],
body.admin-dark input[type="datetime-local"] { background-color: #0f172a !important; color: var(--admin-dark-heading) !important; border-color: var(--admin-dark-border) !important; }
body.admin-dark .form-control::placeholder,
body.admin-dark textarea::placeholder,
body.admin-dark input::placeholder { color: #64748b !important; }
body.admin-dark .form-control:focus,
body.admin-dark .form-select:focus,
body.admin-dark textarea:focus,
body.admin-dark input:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96,165,250,0.18) !important; }
body.admin-dark .form-check-input { background-color: #0f172a; border-color: var(--admin-dark-border); }
body.admin-dark .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

body.admin-dark .btn-light,
body.admin-dark .btn-outline-secondary,
body.admin-dark .btn-outline-dark,
body.admin-dark .btn-outline-light { background-color: var(--admin-dark-surface-soft); border-color: var(--admin-dark-border); color: var(--admin-dark-text); }
body.admin-dark .btn-light:hover,
body.admin-dark .btn-outline-secondary:hover,
body.admin-dark .btn-outline-dark:hover,
body.admin-dark .btn-outline-light:hover { background-color: var(--admin-dark-surface-hover); border-color: #3b4a62; color: #fff; }
body.admin-dark .btn-close { filter: invert(1) grayscale(100%) brightness(160%); }

body.admin-dark .nav-tabs { border-color: var(--admin-dark-border); }
body.admin-dark .nav-tabs .nav-link,
body.admin-dark .nav-pills .nav-link { color: var(--admin-dark-muted); }
body.admin-dark .nav-tabs .nav-link:hover,
body.admin-dark .nav-pills .nav-link:hover { color: #fff; background: var(--admin-dark-surface-soft); border-color: var(--admin-dark-border); }
body.admin-dark .nav-tabs .nav-link.active,
body.admin-dark .nav-pills .nav-link.active { color: #5eead4; background: var(--admin-dark-success-soft); border-color: rgba(94,234,212,0.25); }
body.admin-dark .dropdown-item { color: var(--admin-dark-text); }
body.admin-dark .dropdown-item:hover,
body.admin-dark .dropdown-item:focus { background: var(--admin-dark-surface-hover); color: #fff; }
body.admin-dark .dropdown-divider { border-color: var(--admin-dark-border); }
body.admin-dark .pagination .page-link { background: var(--admin-dark-surface); border-color: var(--admin-dark-border); color: var(--admin-dark-text); }
body.admin-dark .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
body.admin-dark .pagination .page-item.disabled .page-link { background: var(--admin-dark-surface); color: #475569; }
body.admin-dark .badge.bg-light,
body.admin-dark .badge.text-bg-light { background-color: var(--admin-dark-surface-hover) !important; color: var(--admin-dark-text) !important; }
body.admin-dark .alert { background-color: var(--admin-dark-surface-soft); border-color: var(--admin-dark-border); color: var(--admin-dark-text); }
body.admin-dark .alert-info { background-color: rgba(14,165,233,0.14); border-color: rgba(56,189,248,0.28); color: #bae6fd; }
body.admin-dark .alert-success { background-color: rgba(22,163,74,0.14); border-color: rgba(74,222,128,0.26); color: #bbf7d0; }
body.admin-dark .alert-warning { background-color: rgba(217,119,6,0.16); border-color: rgba(251,191,36,0.28); color: #fde68a; }
body.admin-dark .alert-danger { background-color: rgba(220,38,38,0.16); border-color: rgba(248,113,113,0.30); color: #fecaca; }
body.admin-dark .progress { background-color: #0f172a; }
body.admin-dark code,
body.admin-dark pre { background: var(--admin-dark-surface-soft); color: #93c5fd; border-color: var(--admin-dark-border); }
body.admin-dark .text-dark { color: var(--admin-dark-heading) !important; }
body.admin-dark .text-body { color: var(--admin-dark-text) !important; }
body.admin-dark .shadow-sm,
body.admin-dark .shadow { box-shadow: 0 12px 32px rgba(0,0,0,0.24) !important; }

body.admin-dark .admin-qr-box,
body.admin-dark .security-qr-inline,
body.admin-dark .wechat-bind-panel,
body.admin-dark .wechat-binding-item,
body.admin-dark .wechat-user-item,
body.admin-dark .rich-article-editor { background: var(--admin-dark-surface) !important; border-color: var(--admin-dark-border) !important; color: var(--admin-dark-text); }
body.admin-dark .ql-toolbar.ql-snow,
body.admin-dark .rich-article-editor .ql-toolbar.ql-snow { background: var(--admin-dark-surface-soft) !important; border-color: var(--admin-dark-border) !important; border-bottom-color: var(--admin-dark-border) !important; color: var(--admin-dark-text); }
body.admin-dark .ql-container.ql-snow,
body.admin-dark .ql-editor { background: #0f172a !important; color: var(--admin-dark-heading) !important; border-color: var(--admin-dark-border) !important; }
body.admin-dark .rich-article-editor .ql-container.ql-snow,
body.admin-dark .rich-article-editor .ql-editor { background: var(--admin-dark-surface); color: var(--admin-dark-heading); }
body.admin-dark .ql-editor p,
body.admin-dark .ql-editor ol,
body.admin-dark .ql-editor ul,
body.admin-dark .ql-editor li,
body.admin-dark .ql-editor blockquote,
body.admin-dark .ql-editor h1,
body.admin-dark .ql-editor h2,
body.admin-dark .ql-editor h3,
body.admin-dark .ql-editor h4,
body.admin-dark .ql-editor h5,
body.admin-dark .ql-editor h6 { color: inherit; }
body.admin-dark .ql-editor [style*="color: rgb(0, 0, 0)"],
body.admin-dark .ql-editor [style*="color:#000"],
body.admin-dark .ql-editor [style*="color: #000"],
body.admin-dark .ql-editor [style*="color: black"] { color: var(--admin-dark-heading) !important; }
body.admin-dark .rich-article-editor .ql-editor.ql-blank::before { color: #64748b; }
body.admin-dark .ql-snow .ql-stroke { stroke: var(--admin-dark-text); }
body.admin-dark .ql-snow .ql-fill,
body.admin-dark .ql-snow .ql-stroke.ql-fill { fill: var(--admin-dark-text); }
body.admin-dark .ql-snow .ql-picker { color: var(--admin-dark-text); }
body.admin-dark .ql-snow .ql-picker-options { background: var(--admin-dark-surface); border-color: var(--admin-dark-border); }

body.admin-dark .tree-node::before,
body.admin-dark .tree-card::before { border-color: var(--admin-dark-border); }
body.admin-dark .tree-card:hover { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.12); }
body.admin-dark .tree-card .avatar { background: var(--admin-dark-primary-soft); color: #93c5fd; }
body.admin-dark .sales-team-workspace,
body.admin-dark .sales-team-mobile-head,
body.admin-dark .sales-team-column,
body.admin-dark .sales-team-detail { background: var(--admin-dark-surface); color: var(--admin-dark-text); }
body.admin-dark .sales-team-board,
body.admin-dark .sales-team-column,
body.admin-dark .sales-team-mobile-head,
body.admin-dark .sales-team-mobile-path,
body.admin-dark .sales-team-mobile-back,
body.admin-dark .sales-team-detail,
body.admin-dark .sales-team-detail-grid > div,
body.admin-dark .sales-team-kpis > div,
body.admin-dark .sales-team-finance-grid button,
body.admin-dark .sales-team-overview-grid > div,
body.admin-dark .sales-team-tab,
body.admin-dark .sales-team-business-button,
body.admin-dark .sales-team-detail-head { border-color: var(--admin-dark-border) !important; }
body.admin-dark .sales-team-columns,
body.admin-dark .sales-team-mobile-explorer,
body.admin-dark .sales-team-column-head,
body.admin-dark .sales-team-path,
body.admin-dark .sales-team-detail-grid > div,
body.admin-dark .sales-team-kpis > div,
body.admin-dark .sales-team-finance-grid button,
body.admin-dark .sales-team-overview-grid > div,
body.admin-dark .sales-team-tab,
body.admin-dark .sales-team-business-button,
body.admin-dark .sales-team-detail-head { background: var(--admin-dark-surface-soft); }
body.admin-dark .sales-team-column-title,
body.admin-dark .sales-team-member-name,
body.admin-dark .sales-team-mobile-title,
body.admin-dark .sales-team-detail-name,
body.admin-dark .sales-team-detail-grid strong,
body.admin-dark .sales-team-kpis strong,
body.admin-dark .sales-team-finance-grid strong,
body.admin-dark .sales-team-overview-grid strong,
body.admin-dark .sales-team-business-button strong,
body.admin-dark .sales-team-section-title { color: var(--admin-dark-heading); }
body.admin-dark .sales-team-column-sub,
body.admin-dark .sales-team-mobile-sub,
body.admin-dark .sales-team-member-meta,
body.admin-dark .sales-team-member-side,
body.admin-dark .sales-team-detail-meta,
body.admin-dark .sales-team-modal-subtitle,
body.admin-dark .sales-team-detail-grid span,
body.admin-dark .sales-team-kpis span,
body.admin-dark .sales-team-finance-grid span,
body.admin-dark .sales-team-overview-grid span,
body.admin-dark .sales-team-modal-summary span,
body.admin-dark .sales-team-business-button small,
body.admin-dark .sales-team-empty,
body.admin-dark .sales-team-detail-empty { color: var(--admin-dark-muted); }
body.admin-dark .sales-team-member:hover { background: var(--admin-dark-surface-hover); border-color: #334155; }
body.admin-dark .sales-team-mobile-list .sales-team-member { background: var(--admin-dark-surface); border-color: var(--admin-dark-border); }
body.admin-dark .sales-team-member.is-in-path { background: rgba(251,146,60,0.13); border-color: rgba(251,146,60,0.30); }
body.admin-dark .sales-team-member.is-active { background: rgba(20,184,166,0.16); border-color: rgba(94,234,212,0.36); box-shadow: inset 3px 0 0 #5eead4; }
body.admin-dark .sales-team-avatar { background: var(--admin-dark-primary-soft); color: #93c5fd; }
body.admin-dark .sales-team-column-head > span,
body.admin-dark .sales-team-mobile-head > span { background: rgba(96,165,250,0.15); color: #93c5fd; }
body.admin-dark .sales-team-path span:last-child { color: #5eead4; }
body.admin-dark .sales-team-mobile-path button { color: var(--admin-dark-muted); }
body.admin-dark .sales-team-mobile-path button:last-of-type { color: #5eead4; }
body.admin-dark .sales-team-mobile-back { color: #93c5fd; }
body.admin-dark .sales-team-business-button:hover,
body.admin-dark .sales-team-finance-grid button:hover { background: var(--admin-dark-surface-hover); border-color: #334155 !important; }
body.admin-dark .sales-team-detail-tabs { border-color: var(--admin-dark-border); }
body.admin-dark .sales-team-tab.is-active { background: var(--admin-dark-surface); border-color: var(--admin-dark-border) !important; color: #60a5fa; }
body.admin-dark .sales-team-manage-modal .modal-content,
body.admin-dark .sales-team-modal-summary > div,
body.admin-dark .sales-team-modal-member-list > button { background: var(--admin-dark-surface); color: var(--admin-dark-text); border-color: var(--admin-dark-border); }
body.admin-dark .sales-team-modal-table { border-color: var(--admin-dark-border); }
body.admin-dark .sales-team-modal-table thead th { background: var(--admin-dark-surface-soft); color: var(--admin-dark-heading); }
body.admin-dark .sales-team-modal-summary strong,
body.admin-dark .sales-team-modal-member-list strong { color: var(--admin-dark-heading); }
body.admin-dark .sales-team-modal-member-list small { color: var(--admin-dark-muted); }
body.admin-dark .detail-section h6 { border-bottom-color: var(--admin-dark-border); }
body.admin-dark .confirm-overlay,
body.admin-dark .modal-backdrop.show { background: rgba(2,6,23,0.72); }
body.admin-dark .confirm-box .confirm-message { color: var(--admin-dark-muted); }
body.admin-dark .card-header.click-feedback-active,
body.admin-dark tr.click-feedback-active { background: rgba(96,165,250,0.12) !important; }

body.admin-dark .skeleton,
body.admin-dark .skeleton-text,
body.admin-dark .skeleton-text-sm,
body.admin-dark .skeleton-title,
body.admin-dark .skeleton-avatar,
body.admin-dark .skeleton-btn { background: linear-gradient(90deg, #111827 25%, #1f2937 50%, #111827 75%); background-size: 200% 100%; }

body.admin-dark .main [style*="background: #fff"],
body.admin-dark .main [style*="background:#fff"],
body.admin-dark .main [style*="background-color: #fff"],
body.admin-dark .main [style*="background-color:#fff"],
body.admin-dark .main [style*="background: white"],
body.admin-dark .main [style*="background-color: white"] { background: var(--admin-dark-surface) !important; }
body.admin-dark .main [style*="background: #f8fafc"],
body.admin-dark .main [style*="background:#f8fafc"],
body.admin-dark .main [style*="background: #f5f5f5"],
body.admin-dark .main [style*="background:#f5f5f5"],
body.admin-dark .main [style*="background: #f3f6fb"],
body.admin-dark .main [style*="background:#f3f6fb"],
body.admin-dark .main [style*="background: #f9fafb"],
body.admin-dark .main [style*="background:#f9fafb"] { background: var(--admin-dark-surface-soft) !important; }
body.admin-dark .main [style*="color: #001529"],
body.admin-dark .main [style*="color:#001529"],
body.admin-dark .main [style*="color: #0f172a"],
body.admin-dark .main [style*="color:#0f172a"],
body.admin-dark .main [style*="color: #111827"],
body.admin-dark .main [style*="color:#111827"] { color: var(--admin-dark-heading) !important; }
body.admin-dark .main [style*="color: #666"],
body.admin-dark .main [style*="color:#666"],
body.admin-dark .main [style*="color: #888"],
body.admin-dark .main [style*="color:#888"],
body.admin-dark .main [style*="color: #64748b"],
body.admin-dark .main [style*="color:#64748b"] { color: var(--admin-dark-muted) !important; }
body.admin-dark .main [style*="border-color: #eee"],
body.admin-dark .main [style*="border-color:#eee"],
body.admin-dark .main [style*="border-color: #e5e7eb"],
body.admin-dark .main [style*="border-color:#e5e7eb"] { border-color: var(--admin-dark-border) !important; }

.main { margin-left: var(--sidebar-width); padding: 1.5rem 2rem; min-height: 100vh; transition: margin-left 0.22s ease; }
.page-header { margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.page-header h4 { font-weight: 700; color: #001529; }

.stat-card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.stat-card .label { font-size: 0.85rem; color: #666; margin-bottom: 0.25rem; }
.stat-card .value { font-size: 1.8rem; font-weight: 700; color: #001529; }

.card { border: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.table th { font-weight: 600; font-size: 0.85rem; color: #666; white-space: nowrap; }
.table tbody tr { transition: background 0.15s; }
.table tbody tr:hover { background: #e6f4ff !important; }

:where(button, .btn, a[href], [role="button"], .menu-item, .nav-link, .tree-card, .tree-toggle, .user-link, .toast-item, .badge[onclick], tr[onclick], .card-header[onclick], .fs-exit-btn) {
    -webkit-tap-highlight-color: rgba(22,119,255,0.12);
    touch-action: manipulation;
}
:where(button, .btn, a[href], [role="button"], .menu-item, .nav-link, .tree-card, .tree-toggle, .user-link, .toast-item, .badge[onclick], tr[onclick], .card-header[onclick], .fs-exit-btn):not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn {
    position: relative;
    transition: transform 0.14s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.14s ease, filter 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}
.btn:hover:not(:disabled):not(.disabled) { filter: brightness(0.99); }
.btn:active:not(:disabled):not(.disabled),
.btn.click-feedback-active:not(:disabled):not(.disabled),
button.click-feedback-active:not(:disabled),
.menu-item.click-feedback-active,
.nav-link.click-feedback-active,
.tree-card.click-feedback-active,
.toast-item.click-feedback-active,
.fs-exit-btn.click-feedback-active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.96);
}
.btn.click-feedback-active:not(:disabled):not(.disabled),
button.click-feedback-active:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(0,0,0,0.04), 0 1px 4px rgba(15,23,42,0.12) !important;
}
tr.click-feedback-active,
.card-header.click-feedback-active { background: #e6f4ff !important; }
.badge.click-feedback-active,
.tree-toggle.click-feedback-active,
.user-link.click-feedback-active { filter: brightness(0.92); }
:where(button, .btn, a[href], [role="button"], .menu-item, .nav-link, .tree-card, .tree-toggle, .user-link, .badge[onclick], tr[onclick], .card-header[onclick], .fs-exit-btn):focus-visible {
    outline: 3px solid rgba(22,119,255,0.24);
    outline-offset: 2px;
}
:where(button, .btn):disabled,
.btn.disabled { cursor: not-allowed; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) {
    .click-feedback-active,
    .btn:active { transform: none !important; }
}

.modal.fade .modal-dialog { transition: transform 0.25s ease-out, opacity 0.25s ease-out; }
.modal-content { border-radius: 12px; border: none; }

.toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; }
.toast-item { padding: 12px 20px; border-radius: 8px; color: #fff; font-size: 0.9rem; box-shadow: 0 4px 16px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 8px; min-width: 280px; animation: slideInRight 0.3s ease-out; cursor: pointer; }
.toast-item.removing { animation: slideOutRight 0.3s ease-out forwards; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }
.toast-item.toast-success { background: #059669; }
.toast-item.toast-error { background: #dc2626; }
.toast-item.toast-info { background: #1677ff; }
.toast-item.toast-warning { background: #d97706; }

.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1056; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s; }
.confirm-box { background: #fff; border-radius: 16px; padding: 2rem; width: 420px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: scaleIn 0.25s ease-out; }
.confirm-box .confirm-icon { font-size: 3rem; text-align: center; margin-bottom: 1rem; }
.confirm-box .confirm-title { font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
.confirm-box .confirm-message { text-align: center; color: #666; margin-bottom: 1.5rem; font-size: 0.95rem; }
.confirm-box .confirm-input { margin-bottom: 1rem; }
.confirm-box .confirm-actions { display: flex; gap: 12px; justify-content: center; }
.confirm-box .confirm-actions .btn { min-width: 100px; }
.confirm-box.confirm-danger .confirm-icon { color: #dc2626; }
.confirm-box.confirm-warning .confirm-icon { color: #d97706; }
.confirm-box.confirm-info .confirm-icon { color: #1677ff; }

.tree-node { position: relative; padding-left: 24px; }
.tree-node::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; border-left: 2px solid #e5e7eb; }
.tree-node:last-child::before { bottom: 50%; }
.tree-card { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 16px; margin: 6px 0; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s; }
.tree-card:hover { border-color: #1677ff; box-shadow: 0 2px 8px rgba(79,70,229,0.1); }
.tree-card::before { content: ''; position: absolute; left: -24px; top: 50%; width: 24px; border-top: 2px solid #e5e7eb; }
.tree-card .avatar { width: 40px; height: 40px; border-radius: 50%; background: #eef2ff; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #1677ff; flex-shrink: 0; }
.tree-card .info { flex: 1; }
.tree-card .info .name { font-weight: 600; font-size: 0.95rem; }
.tree-card .info .meta { font-size: 0.8rem; color: #888; }
.tree-card .stats { display: flex; gap: 16px; font-size: 0.8rem; text-align: center; }
.tree-card .stats .stat-val { font-weight: 700; color: #001529; }
.tree-card .stats .stat-label { color: #999; font-size: 0.7rem; }
.tree-toggle { font-size: 0.8rem; color: #1677ff; cursor: pointer; user-select: none; }
.tree-root > .tree-node::before { display: none; }
.tree-root > .tree-node > .tree-card::before { display: none; }

.sales-team-board { overflow: hidden; max-width: 100%; }
.sales-team-workspace { display: flex; align-items: stretch; min-height: 520px; background: #fff; overflow: hidden; }
.sales-team-mobile-explorer { display: none; }
.sales-team-columns { flex: 0 1 auto; width: max-content; max-width: min(640px, 46vw); min-width: 252px; height: clamp(520px, calc(100vh - 260px), 720px); display: flex; overflow-x: auto; overflow-y: hidden; background: #f8fafc; scroll-behavior: smooth; }
.sales-team-column { flex: 0 0 252px; min-width: 252px; border-right: 1px solid #e5e7eb; background: #fff; display: flex; flex-direction: column; }
.sales-team-column-head { min-height: 68px; padding: 12px 14px; border-bottom: 1px solid #edf2f7; background: #fbfdff; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sales-team-column-head > span { flex: 0 0 auto; min-width: 42px; height: 24px; padding: 0 8px; border-radius: 999px; background: #eef6ff; color: #1677ff; font-size: 0.76rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sales-team-column-title { color: #0f172a; font-weight: 800; font-size: 0.92rem; line-height: 1.25; word-break: break-word; }
.sales-team-column-sub { margin-top: 3px; color: #94a3b8; font-size: 0.74rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 178px; }
.sales-team-member-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 6px; }
.sales-team-member { width: 100%; min-height: 76px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #334155; padding: 9px 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; text-align: left; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; }
.sales-team-member:hover { background: #f8fafc; border-color: #dbeafe; }
.sales-team-member.is-in-path { background: #fff7ed; border-color: #fed7aa; }
.sales-team-member.is-active { background: #eafaf7; border-color: #2dd4bf; box-shadow: inset 3px 0 0 #0f9f92; }
.sales-team-avatar { border-radius: 50%; background: #eef6ff; color: #1677ff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800; overflow: hidden; flex: 0 0 auto; }
.sales-team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sales-team-member-main { min-width: 0; display: grid; gap: 2px; }
.sales-team-member-name { color: #0f172a; font-size: 0.9rem; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-team-member-meta { color: #64748b; font-size: 0.72rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-team-member-side { display: grid; justify-items: end; align-content: center; gap: 4px; color: #94a3b8; font-size: 0.72rem; }
.sales-team-member-side .badge { font-size: 0.66rem; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.sales-team-member-count { white-space: nowrap; }
.sales-team-empty { color: #94a3b8; font-size: 0.84rem; text-align: center; padding: 28px 8px; }
.sales-team-detail { flex: 1 1 auto; min-width: 0; border-left: 1px solid #e5e7eb; background: #fff; padding: 18px; overflow: visible; display: grid; align-content: start; gap: 12px; }
.sales-team-detail-empty { color: #94a3b8; min-height: 240px; display: flex; align-items: center; justify-content: center; text-align: center; }
.sales-team-detail-head { border: 1px solid #edf2f7; border-radius: 8px; background: #fbfdff; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sales-team-profile { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sales-team-detail-title { min-width: 0; flex: 1; }
.sales-team-detail-name { color: #0f172a; font-size: 1.14rem; line-height: 1.25; font-weight: 850; white-space: normal; overflow-wrap: anywhere; }
.sales-team-detail-meta { margin-top: 3px; color: #64748b; font-size: 0.8rem; white-space: normal; overflow-wrap: anywhere; }
.sales-team-primary-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.sales-team-primary-actions .btn { display: inline-flex; align-items: center; gap: 4px; }
.sales-team-path { padding: 9px 10px; border-radius: 8px; background: #f8fafc; color: #64748b; font-size: 0.78rem; display: flex; align-items: center; gap: 6px; overflow-x: auto; white-space: nowrap; }
.sales-team-path span:last-child { color: #0f766e; font-weight: 800; }
.sales-team-detail-tabs { display: flex; align-items: flex-end; flex-wrap: nowrap; gap: 0; border-bottom: 1px solid #e5e7eb; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.sales-team-tab { flex: 0 0 auto; min-width: 92px; height: 38px; margin: 0 2px -1px 0; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: #64748b; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.82rem; font-weight: 800; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
.sales-team-tab:hover { background: #f8fafc; color: #1677ff; }
.sales-team-tab.is-active { background: #fff; border-color: #e5e7eb; color: #1677ff; }
.sales-team-tab-content { min-width: 0; }
.sales-team-tab-panel { display: none; align-content: start; gap: 12px; }
.sales-team-tab-panel.is-active { display: grid; }
.sales-team-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sales-team-detail-grid > div,
.sales-team-kpis > div,
.sales-team-overview-grid > div { min-width: 0; border: 1px solid #edf2f7; border-radius: 8px; background: #fbfdff; padding: 9px 10px; }
.sales-team-detail-grid span,
.sales-team-kpis span,
.sales-team-overview-grid span { display: block; color: #94a3b8; font-size: 0.72rem; margin-bottom: 3px; }
.sales-team-detail-grid strong,
.sales-team-kpis strong,
.sales-team-overview-grid strong { display: block; color: #0f172a; font-size: 0.88rem; line-height: 1.25; word-break: break-word; }
.sales-team-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sales-team-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sales-team-section-title { color: #334155; font-size: 0.8rem; font-weight: 850; }
.sales-team-finance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sales-team-finance-grid button { min-width: 0; border: 1px solid #edf2f7; border-radius: 8px; background: #fff; padding: 9px 10px; text-align: left; transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; }
.sales-team-finance-grid button:hover { background: #f8fafc; border-color: #bfdbfe; transform: translateY(-1px); }
.sales-team-finance-grid span { display: block; color: #94a3b8; font-size: 0.72rem; margin-bottom: 3px; }
.sales-team-finance-grid strong { display: block; color: #0f172a; font-size: 0.98rem; line-height: 1.25; }
.sales-team-permissions { display: flex; flex-wrap: wrap; gap: 6px; }
.sales-team-business-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sales-team-business-button { min-width: 0; min-height: 68px; border: 1px solid #edf2f7; border-radius: 8px; background: #fff; color: #334155; padding: 10px; display: flex; align-items: center; gap: 10px; text-align: left; transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; }
.sales-team-business-button:hover { background: #f8fafc; border-color: #bfdbfe; transform: translateY(-1px); }
.sales-team-business-button i { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; background: #eef6ff; color: #1677ff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.sales-team-business-button span { min-width: 0; display: grid; gap: 2px; }
.sales-team-business-button strong { color: #0f172a; font-size: 0.86rem; line-height: 1.25; }
.sales-team-business-button small { color: #64748b; font-size: 0.72rem; line-height: 1.25; word-break: break-word; }
.sales-team-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sales-team-actions .btn { display: inline-flex; align-items: center; gap: 4px; }
.sales-team-status-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.sales-team-status-controls .btn { display: inline-flex; align-items: center; gap: 4px; }
.sales-team-mobile-path { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #edf2f7; border-radius: 8px; background: #fbfdff; overflow-x: auto; white-space: nowrap; }
.sales-team-mobile-path button { border: 0; background: transparent; color: #64748b; font-size: 0.78rem; font-weight: 800; padding: 0; white-space: nowrap; }
.sales-team-mobile-path button:last-of-type { color: #0f766e; }
.sales-team-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid #edf2f7; border-radius: 8px; background: #fff; }
.sales-team-mobile-title { color: #0f172a; font-size: 1rem; line-height: 1.25; font-weight: 850; }
.sales-team-mobile-sub { margin-top: 3px; color: #94a3b8; font-size: 0.78rem; }
.sales-team-mobile-head > span { flex: 0 0 auto; min-width: 46px; height: 26px; padding: 0 9px; border-radius: 999px; background: #eef6ff; color: #1677ff; font-size: 0.78rem; font-weight: 850; display: inline-flex; align-items: center; justify-content: center; }
.sales-team-mobile-back { width: 100%; height: 36px; border: 1px solid #dbeafe; border-radius: 8px; background: #f8fbff; color: #1677ff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sales-team-mobile-list { display: grid; gap: 8px; }
.sales-team-manage-modal .modal-dialog { max-width: min(1180px, calc(100vw - 32px)); }
.sales-team-manage-modal .modal-header { align-items: flex-start; }
.sales-team-modal-subtitle { margin-top: 2px; color: #64748b; font-size: 0.82rem; }
.sales-team-modal-loading,
.sales-team-modal-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 12px; color: #94a3b8; text-align: center; }
.sales-team-modal-empty i { font-size: 2rem; color: #cbd5e1; }
.sales-team-modal-toolbar { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sales-team-modal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sales-team-modal-summary > div { min-width: 0; border: 1px solid #edf2f7; border-radius: 8px; background: #fbfdff; padding: 9px 10px; }
.sales-team-modal-summary span { display: block; color: #94a3b8; font-size: 0.72rem; margin-bottom: 3px; }
.sales-team-modal-summary strong { display: block; color: #0f172a; font-size: 0.9rem; line-height: 1.25; word-break: break-word; }
.sales-team-modal-table { border: 1px solid #edf2f7; border-radius: 8px; }
.sales-team-modal-table .table { margin-bottom: 0; }
.sales-team-modal-table thead th { background: #f8fafc; color: #475569; font-size: 0.78rem; white-space: nowrap; }
.sales-team-modal-pager { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sales-team-modal-pager > div { display: inline-flex; align-items: center; gap: 8px; }
.sales-team-withdraw-decision { min-width: 180px; }
.sales-team-withdraw-decision label { margin-right: 10px; white-space: nowrap; font-size: 0.8rem; }
.sales-team-modal-member-list { display: grid; gap: 8px; }
.sales-team-modal-member-list > button { width: 100%; min-height: 54px; border: 1px solid #edf2f7; border-radius: 8px; background: #fff; padding: 8px 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; color: #334155; }
.sales-team-modal-member-list > button:hover { background: #f8fafc; border-color: #bfdbfe; }
.sales-team-modal-member-list strong,
.sales-team-modal-member-list small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-team-modal-member-list small { color: #64748b; font-size: 0.74rem; }

.detail-panel { max-height: 70vh; overflow-y: auto; }
.detail-section { margin-bottom: 1.5rem; }
.detail-section h6 { font-weight: 700; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eee; }
.detail-row { display: flex; padding: 4px 0; font-size: 0.9rem; }
.detail-row .label { width: 100px; color: #888; flex-shrink: 0; }
.detail-row .value { flex: 1; font-weight: 500; }
.user-link { cursor: pointer; color: var(--primary); text-decoration: none; }
.user-link:hover { text-decoration: underline; }

/* ===== 手机端顶部栏 ===== */
.mobile-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px; background: #001529; color: #fff; z-index: 101; padding: 0 16px; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.mobile-topbar .hamburger { background: none; border: none; color: #fff; font-size: 1.4rem; padding: 4px; cursor: pointer; line-height: 1; }
.mobile-topbar .topbar-title { font-size: 1rem; font-weight: 600; flex: 1; }
.mobile-topbar .topbar-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; animation: fadeIn 0.2s; }
.rich-article-editor { border: 1px solid #dee2e6; border-radius: 10px; overflow: hidden; background: #fff; }
.rich-article-editor .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.rich-article-editor .ql-container.ql-snow { border: 0; font-size: 15px; }
.rich-article-editor .ql-editor { min-height: 360px; line-height: 1.8; padding: 16px 18px; }
.rich-article-editor .ql-editor.ql-blank::before { color: #94a3b8; font-style: normal; }
.rich-article-editor.is-uploading { box-shadow: 0 0 0 3px rgba(22,119,255,0.08); }
.rich-article-editor-note { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #64748b; font-size: 12px; }

@media (max-width: 1100px) {
    .sales-team-workspace { flex-direction: column; height: auto; min-height: 0; max-height: none; }
    .sales-team-columns { flex-basis: auto; max-width: none; width: 100%; height: 360px; min-height: 360px; border-bottom: 1px solid #e5e7eb; }
    .sales-team-detail { flex-basis: auto; max-width: none; border-left: 0; max-height: none; }
    .sales-team-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sales-team-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sales-team-overview-grid,
    .sales-team-finance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sales-team-business-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .mobile-topbar { display: flex !important; }
    body.sidebar-collapsed { --sidebar-width: 276px; }
    body.sidebar-collapsed .sidebar .logo { justify-content: flex-start; padding: 22px 20px; }
    body.sidebar-collapsed .sidebar .logo-copy { display: flex; }
    body.sidebar-collapsed .tenant-info { display: block; }
    body.sidebar-collapsed .menu-group-main span,
    body.sidebar-collapsed .menu-group-meta { display: inline-flex; }
    body.sidebar-collapsed .sidebar .menu-group { justify-content: space-between; padding-left: 10px; padding-right: 8px; }
    body.sidebar-collapsed .sidebar-action span { display: inline; }
    body.sidebar-collapsed .menu-section.is-collapsed .menu-section-items { display: none; }
    body.sidebar-collapsed .sidebar .menu-item,
    body.sidebar-collapsed .sidebar-action { justify-content: flex-start; padding-left: 10px; padding-right: 10px; gap: 10px; font-size: 0.84rem; }
    body.sidebar-collapsed .sidebar .menu-item span { display: inline; }
    body.sidebar-collapsed .sidebar .menu-item i,
    body.sidebar-collapsed .sidebar-action i { font-size: 1rem; width: 20px; flex: 0 0 20px; }
    .sidebar { transform: translateX(-100%); transition: transform 0.3s ease, width 0.22s ease; width: min(320px, calc(100vw - 36px)); }
    .sidebar.open { transform: translateX(0); }
    .sidebar.open ~ .sidebar-overlay { display: block; }
    .main { margin-left: 0; padding: 72px 12px 16px 12px; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .page-header .d-flex { width: 100%; flex-wrap: wrap; }
    .page-header .btn { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
    .stat-card { padding: 1rem; }
    .stat-card .value { font-size: 1.4rem; }
    .row.g-3 > .col-md-3:not(.col-6):not(.col-12) { flex: 0 0 50%; max-width: 50%; }
    .row.g-3 > .col-md-4:not(.col-6):not(.col-12) { flex: 0 0 100%; max-width: 100%; }
    .row.g-3 > .col-md-8:not(.col-6):not(.col-12) { flex: 0 0 100%; max-width: 100%; }
    .card { border-radius: 10px; }
    .card-body { padding: 0.75rem; }
    .table-responsive { margin: 0 -0.75rem; }
    table.table { font-size: 0.8rem; }
    table.table th, table.table td { padding: 0.4rem 0.5rem; white-space: nowrap; }
    .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
    .modal-content { border-radius: 14px; }
    .modal-body { padding: 1rem; max-height: 70vh; overflow-y: auto; }
    .confirm-box { width: calc(100vw - 32px); padding: 1.5rem; }
    .btn-group .btn, .d-flex.gap-2 .btn { font-size: 0.78rem; }
    .sidebar .menu-item { min-height: 36px; padding: 0 10px 0 18px; font-size: 0.84rem; }
    .filter-row { flex-direction: column; }
    .filter-row .form-control, .filter-row .form-select { font-size: 0.85rem; }
    .detail-panel { max-height: 60vh; }
    .detail-row { flex-direction: column; gap: 2px; }
    .detail-row .label { width: auto; }
    .tree-card { padding: 10px 12px; gap: 8px; }
    .tree-card .stats { gap: 8px; font-size: 0.75rem; }
    .tree-card .avatar { width: 32px; height: 32px; font-size: 0.8rem; }
    .sales-team-column { flex-basis: 236px; min-width: 236px; }
    .sales-team-column-head { min-height: 60px; padding: 10px; }
    .sales-team-column-sub { max-width: 140px; }
    .sales-team-member { min-height: 70px; grid-template-columns: 32px minmax(0, 1fr); }
    .sales-team-member-side { grid-column: 1 / -1; display: flex; justify-content: flex-start; align-items: center; gap: 8px; padding-left: 41px; }
    .sales-team-board,
    .sales-team-workspace { display: block; width: 100%; max-width: 100%; overflow-x: hidden; }
    .sales-team-mobile-explorer { display: grid; gap: 10px; width: 100%; max-width: 100%; padding: 12px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; box-sizing: border-box; }
    .sales-team-columns { display: none; min-width: 0; max-width: 100%; height: auto; min-height: 0; }
    .sales-team-mobile-list .sales-team-member { min-height: 82px; border-color: #edf2f7; background: #fff; grid-template-columns: 36px minmax(0, 1fr) auto; }
    .sales-team-mobile-list .sales-team-member-name,
    .sales-team-mobile-list .sales-team-member-meta { white-space: normal; overflow-wrap: anywhere; }
    .sales-team-mobile-list .sales-team-member-side { grid-column: auto; padding-left: 0; display: grid; justify-items: end; }
    .sales-team-detail { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; padding: 14px; gap: 10px; box-sizing: border-box; }
    .sales-team-detail-head { width: 100%; max-width: 100%; align-items: stretch; flex-direction: column; box-sizing: border-box; }
    .sales-team-profile { width: 100%; min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
    .sales-team-detail-name,
    .sales-team-detail-meta { white-space: normal; overflow-wrap: anywhere; }
    .sales-team-primary-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .sales-team-primary-actions .btn { flex: 1 1 100%; min-width: 0; justify-content: center; white-space: normal; }
    .sales-team-path { flex-wrap: wrap; overflow-x: hidden; white-space: normal; }
    .sales-team-detail-grid,
    .sales-team-kpis,
    .sales-team-overview-grid,
    .sales-team-finance-grid,
    .sales-team-business-grid { grid-template-columns: 1fr; }
    .sales-team-modal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sales-team-detail-tabs { padding-left: 0; }
    .sales-team-tab { min-width: 84px; height: 34px; font-size: 0.78rem; }
    .sales-team-detail-grid > div,
    .sales-team-kpis > div,
    .sales-team-overview-grid > div,
    .sales-team-finance-grid button,
    .sales-team-business-button { width: 100%; }
    .sales-team-business-button { align-items: flex-start; }
    .sales-team-kpis > div:last-child { grid-column: auto; }
    .sales-team-actions .btn { flex: 1 1 100%; justify-content: center; }
    .sales-team-status-controls { display: grid; grid-template-columns: 1fr; }
    .sales-team-status-controls .btn { justify-content: center; }
    .login-wrapper { min-height: auto; border-radius: 16px; }
    .login-brand { padding: 1.5rem; }
    .login-card { padding: 1.5rem; }
}
@media (max-width: 420px) {
    .row.g-3 > .col-md-3:not(.col-6) { flex: 0 0 100%; max-width: 100%; }
    .sales-team-profile { grid-template-columns: 58px minmax(0, 1fr); }
    .sales-team-profile .badge { grid-column: 2; justify-self: start; }
    .sales-team-tab { min-width: 78px; }
    .sales-team-modal-summary { grid-template-columns: 1fr; }
    .sales-team-modal-toolbar { align-items: stretch; }
    .sales-team-modal-toolbar > * { width: 100%; }
    .sales-team-modal-pager { align-items: stretch; flex-direction: column; }
}