* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', sans-serif; background:#f0f2f5; color:#333; min-height:100vh; line-height:1.6; }
a { color:#07c; text-decoration:none; }
a:hover { text-decoration:underline; }

/* ==================== 左侧边栏布局 ==================== */
.sidebar-layout { display:flex; min-height:100vh; }
.sidebar { width:220px; background:#1a1a2e; color:#fff; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; }
.main-content { margin-left:220px; flex:1; padding:24px; min-height:100vh; max-width:1200px; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:18px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand .brand-icon { width:32px; height:32px; background:linear-gradient(135deg,#07c,#0af); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; }
.sidebar-brand .brand-text { font-size:15px; font-weight:600; letter-spacing:.5px; }
.sidebar-nav { flex:1; padding:10px 0; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 20px; color:#8899bb; font-size:14px; transition:all .2s; border-left:3px solid transparent; }
.nav-item:hover { background:rgba(255,255,255,.06); color:#dde; text-decoration:none; }
.nav-item.active { background:rgba(255,255,255,.1); color:#fff; border-left-color:#0af; }
.nav-icon { width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.07); border-radius:6px; font-size:11px; font-weight:700; flex-shrink:0; }
.nav-item.active .nav-icon { background:linear-gradient(135deg,#07c,#0af); }
.nav-label { font-weight:500; }
.sidebar-footer { padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-user { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.user-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#07c,#0af); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; flex-shrink:0; }
.user-name { font-size:13px; color:#99aac0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logout-btn { display:block; text-align:center; padding:6px; border-radius:6px; font-size:12px; color:#8899bb; border:1px solid rgba(255,255,255,.1); transition:all .2s; }
.logout-btn:hover { color:#fff; border-color:#e25555; background:rgba(226,85,85,.12); text-decoration:none; }

/* ==================== 主区域样式 ==================== */
.page-title { font-size:20px; font-weight:600; margin-bottom:20px; color:#1a1a2e; }
.card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04); padding:20px; margin-bottom:16px; transition:box-shadow .2s; }
.card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.04); }
.card h2 { font-size:16px; font-weight:600; margin-bottom:14px; color:#1a1a2e; }
.card h3 { font-size:14px; font-weight:600; margin-bottom:8px; color:#333; }

/* ==================== 统计卡片（仪表盘） ==================== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; margin-bottom:20px; }
.stat-item { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04); padding:20px 16px; text-align:center; transition:transform .2s,box-shadow .2s; }
.stat-item:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.stat-item .num { font-size:30px; font-weight:700; color:#1a1a2e; }
.stat-item .label { font-size:12px; color:#888; margin-top:6px; letter-spacing:.3px; }

/* ==================== 表格 ==================== */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:11px 14px; text-align:left; border-bottom:1px solid #eee; }
th { background:#f8f9fa; font-weight:600; color:#555; font-size:12px; letter-spacing:.3px; text-transform:uppercase; }
tr:hover td { background:#f5f8ff; }
tr:last-child td { border-bottom:none; }

/* ==================== 表单 ==================== */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:#444; margin-bottom:5px; }
.form-group .hint { font-size:12px; color:#999; margin-top:3px; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:9px 13px; border:1.5px solid #e0e0e0; border-radius:8px; font-size:14px; outline:none; transition:border .25s,box-shadow .25s; background:#fafafa;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color:#07c; background:#fff; box-shadow:0 0 0 3px rgba(0,119,204,.1);
}
.form-group textarea { min-height:80px; resize:vertical; }
.form-group input::placeholder { color:#bbb; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group select { cursor:pointer; }

/* ==================== 按钮 ==================== */
.btn { display:inline-flex; align-items:center; gap:5px; padding:9px 18px; border:none; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; transition:all .25s; line-height:1.4; }
.btn-primary { background:#07c; color:#fff; }
.btn-primary:hover { background:#069; transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,119,204,.3); }
.btn-success { background:#07c160; color:#fff; }
.btn-success:hover { background:#06a850; transform:translateY(-1px); box-shadow:0 2px 8px rgba(7,193,96,.3); }
.btn-danger { background:#e25555; color:#fff; }
.btn-danger:hover { background:#cc3f3f; transform:translateY(-1px); box-shadow:0 2px 8px rgba(226,85,85,.3); }
.btn-warning { background:#f0ad4e; color:#fff; }
.btn-warning:hover { background:#e09e3e; transform:translateY(-1px); }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:6px; }
.btn-outline { background:transparent; border:1.5px solid #ddd; color:#555; }
.btn-outline:hover { border-color:#07c; color:#07c; background:rgba(0,119,204,.04); }
.btn-ghost { background:transparent; border:none; color:#07c; padding:6px 10px; }

/* ==================== Tab 切换 ==================== */
.tabs-bar { display:flex; gap:0; border-bottom:2px solid #e8e8e8; margin-bottom:0; background:#fff; border-radius:10px 10px 0 0; padding:0 4px; }
.tabs-bar .tab-btn { padding:11px 22px; font-size:13px; color:#666; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; transition:all .25s; position:relative; }
.tabs-bar .tab-btn:hover { color:#07c; background:rgba(0,119,204,.04); }
.tabs-bar .tab-btn.active { color:#07c; border-bottom-color:#07c; font-weight:600; }
.tab-panel { display:none; padding:20px; background:#fff; border-radius:0 0 10px 10px; }
.tab-panel.active { display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ==================== 徽标 ==================== */
.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:500; line-height:1.5; }
.badge-success { background:#d4f0dd; color:#0a6b2f; }
.badge-danger { background:#fad5d7; color:#b02a37; }
.badge-warning { background:#fff3cd; color:#856404; }
.badge-info { background:#d1e7ff; color:#0654a0; }

/* ==================== 弹窗 ==================== */
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.modal-overlay.active { display:flex; }
.modal-box { background:#fff; border-radius:14px; padding:28px; padding-bottom:12px; width:540px; max-width:92vw; max-height:82vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); animation:modalIn .25s ease; }
.modal-box.modal-lg { width:780px; max-width:95vw; }
@keyframes modalIn { from { opacity:0; transform:scale(.96) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-box h2 { font-size:18px; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid #eee; }
.modal-box > form { display:flex; flex-direction:column; }
.modal-box > form .modal-actions { position:sticky; bottom:0; background:#fff; z-index:2; margin-top:14px; padding:10px 28px; border-top:1px solid #eee; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid #eee; }

/* ==================== 搜索栏 ==================== */
.search-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.search-bar input { flex:1; min-width:180px; padding:10px 14px; border:1.5px solid #e0e0e0; border-radius:8px; font-size:13px; outline:none; transition:border .2s; }
.search-bar input:focus { border-color:#07c; }
.search-bar select { padding:10px 12px; border:1.5px solid #e0e0e0; border-radius:8px; font-size:13px; background:#fff; outline:none; cursor:pointer; }
.search-bar button { padding:10px 20px; }

/* ==================== 消息卡片 ==================== */
.msg-card { padding:12px 16px; border-radius:8px; margin-bottom:8px; border:1px solid #eee; transition:border-color .2s; }
.msg-card:hover { border-color:#ccc; }
.msg-meta { font-size:11px; color:#999; display:flex; gap:8px; align-items:center; margin-bottom:4px; }
.msg-meta .tag { display:inline-block; padding:1px 7px; border-radius:3px; background:#e8f4fd; color:#07c; font-size:10px; font-weight:500; }
.msg-meta .tag-img { background:#fce4ec; color:#c62828; }
.msg-meta .tag-voice { background:#f3e5f5; color:#7b1fa2; }
.msg-meta .tag-system { background:#e8f5e9; color:#2e7d32; }
.msg-content { font-size:14px; line-height:1.6; word-break:break-all; }

/* ==================== 分页 ==================== */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:16px; }
.pagination a, .pagination span { padding:6px 13px; border-radius:6px; font-size:13px; transition:all .2s; }
.pagination a { background:#fff; border:1px solid #ddd; color:#333; }
.pagination a:hover { border-color:#07c; color:#07c; text-decoration:none; }
.pagination .current { background:#07c; color:#fff; border:none; }

/* ==================== 登录页 ==================== */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 40%,#0f3460 100%); }
.login-box { background:#fff; border-radius:14px; padding:44px 40px; width:380px; box-shadow:0 15px 50px rgba(0,0,0,.25); }
.login-box h1 { text-align:center; font-size:22px; margin-bottom:28px; color:#1a1a2e; font-weight:700; }
.login-box .subtitle { text-align:center; color:#999; font-size:13px; margin-top:-20px; margin-bottom:24px; }
.login-box .error { background:#fef2f2; color:#b91c1c; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; text-align:center; border:1px solid #fecaca; }
.login-box .hint { background:#fff8e1; color:#8d6e00; padding:8px 14px; border-radius:8px; font-size:12px; margin-bottom:12px; text-align:center; border:1px solid #ffe082; }
.login-box .form-group { margin-bottom:18px; }
.login-box .form-group label { color:#555; font-weight:500; }
.login-box .form-group input { padding:10px 14px; background:#f7f7f7; border-color:#e5e5e5; transition:all .25s; }
.login-box .form-group input:focus { background:#fff; border-color:#07c; box-shadow:0 0 0 3px rgba(0,119,204,.12); }

/* ==================== Toast ==================== */
.toast { position:fixed; top:24px; right:24px; padding:14px 24px; border-radius:10px; font-size:14px; z-index:2000; opacity:0; transform:translateY(-12px); transition:all .35s; box-shadow:0 4px 16px rgba(0,0,0,.15); pointer-events:none; }
.toast.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.toast.success { background:#07c160; color:#fff; }
.toast.error { background:#e25555; color:#fff; }
.toast.info { background:#07c; color:#fff; }

/* ==================== Toggle 开关 ==================== */
.toggle-wrap { display:flex; align-items:center; gap:8px; }
.toggle { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .slider { position:absolute; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:24px; cursor:pointer; transition:.3s; }
.toggle .slider::before { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.3s; }
.toggle input:checked+.slider { background:#07c160; }
.toggle input:checked+.slider::before { transform:translateX(18px); }
.toggle input:disabled+.slider { opacity:.4; cursor:not-allowed; }
.toggle-sm { position:relative; display:inline-block; width:34px; height:19px; flex-shrink:0; }
.toggle-sm input { opacity:0; width:0; height:0; }
.toggle-sm .slider { position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:19px; transition:.25s; }
.toggle-sm .slider::before { content:''; position:absolute; height:15px; width:15px; left:2px; bottom:2px; background:#fff; border-radius:50%; transition:.25s; }
.toggle-sm input:checked+.slider { background:#07c160; }
.toggle-sm input:checked+.slider::before { transform:translateX(15px); }

/* ==================== 权限组（员工管理） ==================== */
.perm-groups { margin:12px 0; }
.perm-group { border:1px solid #e5e5e5; border-radius:8px; margin-bottom:10px; overflow:hidden; }
.perm-group-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#f5f6f8; border-bottom:1px solid #e5e5e5; cursor:pointer; user-select:none; font-size:13px; font-weight:600; transition:background .2s; }
.perm-group-header:hover { background:#eef0f3; }
.perm-group-body { padding:10px 14px; display:block; }
.perm-group.collapsed .perm-group-body { display:none; }
.perm-group.collapsed .perm-group-header span:last-child { transform:rotate(-90deg); display:inline-block; }
.perm-item { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.perm-item + .perm-item { border-top:1px solid #f3f3f3; }
.perm-item .lbl { font-size:13px; color:#333; }
.perm-item .lbl small { color:#999; font-weight:400; font-size:11px; margin-left:4px; }

/* ==================== 联系人/群选择器 ==================== */
.selector-wrap { border:1.5px solid #e0e0e0; border-radius:8px; overflow:hidden; }
.selector-tabs { display:flex; border-bottom:1px solid #e0e0e0; background:#f8f9fa; }
.selector-tabs button { flex:1; padding:9px 12px; border:none; background:none; font-size:13px; color:#555; cursor:pointer; transition:all .2s; font-weight:500; }
.selector-tabs button.active { background:#fff; color:#07c; box-shadow:inset 0 -2px 0 #07c; }
.selector-search { padding:8px; border-bottom:1px solid #eee; }
.selector-search input { width:100%; padding:7px 10px; border:1px solid #ddd; border-radius:6px; font-size:12px; outline:none; }

/* ====== 弹出式选择器 ====== */
.contact-picker-box { width:90vw !important; max-width:1100px !important; max-height:85vh; padding:20px 24px !important; }
#contactPickerOverlay { z-index:2000; }
.picker-tabs { display:flex; flex-shrink:0; }
.picker-tabs button { padding:8px 20px; border:1px solid #ddd; border-right:none; background:#f5f5f5; font-size:13px; color:#555; cursor:pointer; transition:all .2s; }
.picker-tabs button:first-child { border-radius:6px 0 0 6px; }
.picker-tabs button.active { background:#07c; color:#fff; border-color:#07c; }
.picker-item { display:flex; align-items:center; gap:4px; padding:3px 6px; cursor:pointer; border-radius:4px; font-size:12px; white-space:nowrap; overflow:hidden; }
.picker-item:hover { background:#e8f4fd; }
.picker-item input[type=checkbox] { accent-color:#07c; flex-shrink:0; margin:0; width:14px; height:14px; }
.picker-item span { overflow:hidden; text-overflow:ellipsis; }

/* ==================== 功能配置样式 ==================== */
:root { --green: #07c160; --border: #e5e5e5; }
.feature-group { border:1px solid var(--border); border-radius:8px; margin-bottom:12px; background:#fff; overflow:hidden; }
.feature-group-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#f8f9fa; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; }
.feature-group-header:hover { background:#f0f1f3; }
.feature-group-header h3 { margin:0; font-size:14px; }
.feature-group-body { padding:12px 16px; display:none; }
.feature-group.active .feature-group-body { display:block; animation:fadeIn .2s ease; }
.feature-item { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid #f3f3f3; }
.feature-item:last-child { border-bottom:none; }
.feature-item .label { font-size:13px; color:#333; }
.feature-item .label small { color:#999; font-weight:400; }
.param-select { font-size:12px; padding:3px 8px; border:1px solid #ddd; border-radius:5px; }

/* ==================== JSON 展示 ==================== */
pre.code { background:#f5f5f5; padding:14px; border-radius:8px; font-size:12px; overflow-x:auto; max-height:300px; line-height:1.5; }

/* ==================== 加载动画 ==================== */
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(0,119,204,.2); border-top-color:#07c; border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { color:#888; font-size:13px; display:flex; align-items:center; gap:8px; padding:20px; justify-content:center; }

/* ==================== 提示块 ==================== */
.alert { padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:12px; }
.alert-success { background:#d4f0dd; color:#0a6b2f; border:1px solid #b8e4c6; }
.alert-danger { background:#fad5d7; color:#b02a37; border:1px solid #f5b5b8; }
.alert-info { background:#d1e7ff; color:#0654a0; border:1px solid #b8d6f5; }

/* ==================== 设备状态卡片 ==================== */
.device-item { display:flex; align-items:center; gap:14px; padding:10px 0; }
.device-item + .device-item { border-top:1px solid #f0f0f0; }
.device-item .status-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.device-item .status-dot.online { background:#07c160; box-shadow:0 0 6px rgba(7,193,96,.4); }
.device-item .status-dot.offline { background:#e0e0e0; }
.device-info { flex:1; }
.device-info .wxid { font-size:14px; font-weight:500; }
.device-info .meta { font-size:12px; color:#888; margin-top:1px; }

/* ==================== 旧布局兼容 ==================== */
.app-header { display:none; }
.app-main { display:none; }

/* ==================== 响应式 ==================== */
@media(max-width:768px) {
    .sidebar { width:56px; }
    .sidebar-brand .brand-text,
    .sidebar-nav .nav-label,
    .sidebar-user .user-name { display:none; }
    .sidebar-brand { justify-content:center; padding:14px 0; }
    .nav-item { justify-content:center; padding:10px 0; }
    .sidebar-footer { text-align:center; }
    .logout-btn { padding:4px 8px; font-size:10px; }
    .main-content { margin-left:56px; padding:14px; }
    .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .form-row { grid-template-columns:1fr; }
    .search-bar { flex-wrap:wrap; }
    .modal-box { width:95vw; padding:20px; max-height:90vh; }
}