:root {
--bg-primary: #f8fafc;
--bg-secondary: #ffffff;
--bg-tertiary: #f9fafb;
--bg-hover: #f3f4f6;
--bg-active: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--border-color: #e5e7eb;
--border-focus: #667eea;
--text-primary: #1f2937;
--text-secondary: #374151;
--text-muted: #6b7280;
--text-subtle: #9ca3af;
--text-inverse: #ffffff;
--accent: #667eea;
--accent-hover: #5a6fd6;
--accent-light: #f0f0ff;
--accent-border: #c4b5fd;
--accent-text: #7c3aed;
--accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--accent-gradient-hover: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
--success: #34d399;
--success-bg: #dcfce7;
--success-text: #16a34a;
--error: #f87171;
--error-bg: #fee2e2;
--error-text: #dc2626;
--warning: #fbbf24;
--info: #0891b2;
--dot-pending: #d1d5db;
--chip-bg: #f3f4f6;
--chip-text: #4b5563;
--scrollbar: #d1d5db;
--modal-overlay: rgba(0,0,0,0.5);
--focus-shadow: rgba(102,126,234,0.12);
}
body.dark {
color-scheme: dark;
--bg-primary: #0a0a0d;
--bg-secondary: #12131a;
--bg-tertiary: #1a1b26;
--bg-hover: #1f2030;
--bg-active: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--border-color: #252636;
--border-focus: #7c6fe0;
--text-primary: #e4e4eb;
--text-secondary: #c1c2d0;
--text-muted: #8a8ba0;
--text-subtle: #5e5f75;
--text-inverse: #ffffff;
--accent: #7c6fe0;
--accent-hover: #8b7ff0;
--accent-light: #1e1a2e;
--accent-border: #453870;
--accent-text: #b4a5f0;
--accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--accent-gradient-hover: linear-gradient(135deg, #7b8ff5 0%, #8a5bc0 100%);
--success: #34d399;
--success-bg: #0d3324;
--success-text: #6ee7b7;
--error: #f87171;
--error-bg: #3d1515;
--error-text: #fca5a5;
--warning: #fbbf24;
--info: #67e8f9;
--dot-pending: #3a3b4d;
--chip-bg: #1a1b26;
--chip-text: #a0a1b5;
--scrollbar: #2a2b3d;
--modal-overlay: rgba(0,0,0,0.75);
--focus-shadow: rgba(124,111,224,0.15);
}
body.dark .stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
body.dark .role-owner { color: #f48fb1; background: linear-gradient(135deg, rgba(240,147,251,0.2), rgba(245,87,108,0.15)); }
body.dark .role-admin { color: #4fc3f7; background: linear-gradient(135deg, rgba(79,172,254,0.2), rgba(0,242,254,0.15)); }
body.dark .role-developer { color: #81c784; background: linear-gradient(135deg, rgba(67,233,123,0.2), rgba(56,249,215,0.15)); }
* { box-sizing: border-box; caret-color: transparent; }
*::before, *::after { box-sizing: border-box; caret-color: transparent; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; min-height: 100%; cursor: default; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; background: var(--bg-primary); color: var(--text-primary); transition: background 0.2s, color 0.2s; caret-color: transparent; user-select: none; -webkit-user-select: none; }
#app { width: 100%; height: 100%; caret-color: transparent; user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable="true"], [contenteditable=""] { cursor: text; caret-color: auto; user-select: text; -webkit-user-select: text; padding: 0; margin: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input:not([type]) { padding: 0; margin: 0; }
select { cursor: pointer; }
button, a, [onclick] { cursor: pointer; user-select: none; }
.layout { display: flex; height: 100vh; }
/* 侧边栏 */
.sidebar { width: 300px; background: var(--bg-secondary); display: flex; flex-direction: column; padding: 16px 12px; flex-shrink: 0; border-right: 1px solid rgba(102,126,234,0.06); }
.brand { padding: 8px 12px 20px; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-primary); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; flex-shrink: 0; user-select: none; cursor: default; }
.nav { padding: 4px 8px; flex: 1; overflow-y: auto; }
.nav-group-title { font-size: 12px; color: var(--text-subtle); padding: 16px 12px 8px; letter-spacing: 0.03em; font-weight: 500; user-select: none; cursor: default; }
.nav-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border-radius: 12px;
cursor: pointer;
color: var(--text-secondary);
font-size: 15px;
margin-bottom: 4px;
font-weight: 500;
position: relative;
transition: all 0.18s ease;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active {
background: var(--accent-gradient);
color: var(--text-inverse);
box-shadow: 0 4px 14px rgba(102,126,234,0.30);
}
.nav-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, rgba(102,126,234,0.12) 0%, rgba(118,75,162,0.12) 100%); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-icon > svg { width: 18px; height: 18px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-icon > svg circle, .nav-icon > svg path, .nav-icon > svg line, .nav-icon > svg rect { transition: all 0.3s ease; }
.nav-item:hover .nav-icon { background: linear-gradient(135deg, rgba(102,126,234,0.22) 0%, rgba(118,75,162,0.22) 100%); transform: scale(1.08); box-shadow: 0 4px 12px rgba(102,126,234,0.15); }
.nav-item:hover .nav-icon > svg { transform: rotate(-5deg) scale(1.05); }
.nav-item.active .nav-icon { background: rgba(255,255,255,0.25); }
.nav-item.active .nav-icon > svg path,
.nav-item.active .nav-icon > svg circle,
.nav-item.active .nav-icon > svg line,
.nav-item.active .nav-icon > svg rect {
filter: brightness(0) invert(1);
}
.nav-item.active .nav-icon > svg { animation: iconPulse 2s ease-in-out infinite; }
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.user-area { padding: 12px; margin-top: auto; font-size: 12px; color: var(--text-muted); }
.user-area-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.user-info {
padding: 6px 8px;
margin-bottom: 0;
cursor: pointer;
transition: all 0.15s ease;
flex: 1;
min-width: 0;
}
.user-info:hover {
background: var(--bg-hover);
border-radius: 10px;
}
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 11px; color: var(--text-subtle); }
.user-area .btn-ghost { background: transparent; color: var(--text-secondary); padding: 6px 10px; font-size: 12px; width: 100%; border: 1px solid var(--border-color); }
.user-area .btn-ghost:hover { background: var(--bg-hover); }
.nav-theme-toggle { background: transparent; border: none; color: var(--text-secondary); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: all 0.15s ease; flex-shrink: 0; }
.nav-theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-theme-toggle:active { transform: scale(0.92); }
/* 主区域：标题栏固定，内容区独立滚动，滚动条不侵入标题栏 */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); border-radius: 20px 0 0 0; }
.page-header { padding: 0 32px; display: flex; align-items: center; justify-content: space-between; background: transparent; height: 68px; box-sizing: border-box; flex-shrink: 0; user-select: none; }
.page-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.main.leads-page .page-header { position: sticky; top: 0; z-index: 50; background: var(--bg-primary); }
.page-title { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.01em; user-select: none; cursor: default; }
.page-sub { display: none; }
.theme-toggle { background: var(--bg-secondary); border: none; color: var(--text-secondary); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: transform 0.1s ease, box-shadow 0.1s ease; box-shadow: 0 1px 3px rgba(102,126,234,0.04); -webkit-tap-highlight-color: transparent; }
.theme-toggle:active { transform: scale(0.92); box-shadow: 0 0px 1px rgba(102,126,234,0.06); }
/* 聊天区 */
.chat-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); position: relative; }
.chat-list { flex: 1; overflow-y: auto; padding: 24px 10%; position: relative; }
.msg-row { display: flex; margin-bottom: 18px; gap: 10px; }
.msg-row.user { justify-content: flex-end; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-inverse); flex-shrink: 0; }
.avatar.user { background: linear-gradient(135deg,var(--success),#06b6d4); }
.bubble { max-width: 760px; padding: 12px 16px; background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06); border-radius: 14px; line-height: 1.6; font-size: 14px; word-break: break-word; color: var(--text-primary); box-shadow: 0 1px 2px rgba(102,126,234,0.03); }
.msg-row.user .bubble { background: var(--accent-gradient); border: none; color: var(--text-inverse); box-shadow: 0 2px 8px rgba(102,126,234,0.25); }
.bubble .reply-text { white-space: pre-wrap; }
.bubble .file-card {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
margin-bottom: 8px;
}
.bubble .file-card:last-child { margin-bottom: 0; }
.bubble .file-icon { font-size: 24px; }
.bubble .file-info { flex: 1; min-width: 0; }
.bubble .file-name {
font-size: 14px; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bubble .file-size {
font-size: 12px; opacity: 0.8; margin-top: 2px;
}
/* AI loading 状态 */
.ai-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); padding: 6px 0; }
.ai-loading .dots { display: inline-flex; gap: 3px; }
.ai-loading .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); animation: blink 1.4s infinite both; }
.ai-loading .dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-loading .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1); }
}
/* 上传环形进度条 */
.circular-progress {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.15);
flex-shrink: 0;
}
.circular-progress svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.circular-progress .bg-circle {
fill: none;
stroke: rgba(255,255,255,0.3);
stroke-width: 3;
}
.circular-progress .progress-circle {
fill: none;
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dashoffset 0.3s ease;
}
.circular-progress .file-icon-inner {
position: absolute;
font-size: 16px;
}
.file-card {
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
.file-card .file-icon {
display: flex;
align-items: center;
justify-content: center;
}
.response-time { font-size: 11px; color: var(--text-subtle); margin-top: 4px; }
/* 名片解析结果样式 */
.bc-results { display: flex; flex-direction: column; gap: 12px; }
.bc-card { background: var(--bg-secondary); border-radius: 14px; padding: 14px; border: 1px solid rgba(102,126,234,0.06); box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02); }
.bc-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.bc-card-icon { font-size: 18px; }
.bc-card-name { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.bc-fields { display: flex; flex-direction: column; gap: 8px; }
.bc-field { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.bc-field-icon { flex-shrink: 0; width: 20px; text-align: center; }
.bc-field-label { flex-shrink: 0; color: var(--text-muted); min-width: 70px; }
.bc-field-value { color: var(--text-primary); word-break: break-all; }
.bc-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; }
.bc-btn-add { font-size: 13px; padding: 6px 16px; border-radius: 6px; }
.bc-error { display: flex; align-items: center; gap: 6px; padding: 10px; background: var(--danger-bg, #fff2f0); border-radius: 8px; color: var(--danger, #ff4d4f); font-size: 13px; }
.bc-error-icon { font-size: 14px; }
/* 简洁上传进度（环形） */
.upload-loading-simple {
display: flex;
align-items: center;
gap: 12px;
}
.circular-progress-sm {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.circular-progress-sm svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.circular-progress-sm .bg-circle-sm {
fill: none;
stroke: var(--bg-tertiary);
stroke-width: 3;
}
.circular-progress-sm .progress-circle-sm {
fill: none;
stroke: #667eea;
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dashoffset 0.3s ease;
}
.upload-loading-text {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
}
/* 解析中卡片 */
.parse-loading-card {
background: var(--bg-secondary);
border: 1px solid rgba(102,126,234,0.06);
border-radius: 14px;
padding: 14px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.parse-loading-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.parse-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(102,126,234,0.2);
border-top-color: #667eea;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.parse-loading-info { flex: 1; min-width: 0; }
.parse-loading-title {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.parse-loading-sub {
font-size: 12px;
color: var(--text-subtle);
margin-top: 3px;
}
.multi-file-loading {
background: var(--bg-secondary);
border: 1px solid rgba(102,126,234,0.06);
border-radius: 14px;
padding: 14px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.multi-file-progress {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
}
.multi-file-progress .progress-ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
display: block;
}
.multi-file-progress .progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 9px;
color: var(--text-muted);
font-weight: 600;
white-space: nowrap;
line-height: 1;
text-align: center;
pointer-events: none;
}
.multi-file-info { flex: 1; min-width: 0; }
.multi-file-name {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.multi-file-status {
font-size: 12px;
color: var(--text-subtle);
margin-top: 3px;
}
/* 名片识别进度 */
.card-recognize-loading {
background: var(--bg-secondary);
border: 1px solid rgba(102,126,234,0.06);
border-radius: 14px;
padding: 14px;
display: flex;
align-items: flex-start;
gap: 14px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.card-progress-info { flex: 1; min-width: 0; }
.card-progress-stats {
display: flex;
gap: 12px;
margin-top: 6px;
font-size: 12px;
}
.card-progress-stats .stat-success { color: #22c55e; font-weight: 500; }
.card-progress-stats .stat-fail { color: #ef4444; font-weight: 500; }
.card-progress-stats .stat-fill { color: var(--accent); font-weight: 500; }
.card-progress-details {
margin-top: 8px;
max-height: 120px;
overflow-y: auto;
font-size: 11px;
color: var(--text-subtle);
line-height: 1.8;
padding: 6px 8px;
background: rgba(0,0,0,0.02);
border-radius: 8px;
}
.card-result-item.success { color: #16a34a; }
.card-result-item.fail { color: #dc2626; }
/* AI 消息：不用对话框，用卡片/日志风格 */
.ai-card { width: 100%; word-break: break-all; }
.ai-status { font-size: 14px; color: var(--text-primary); margin-bottom: 12px; word-break: break-all; }
.msg-row.ai-msg-row { justify-content: flex-start; width: 100%; }
/* 表格文件名头部 */
.table-file-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.table-file-icon {
font-size: 16px;
flex-shrink: 0;
}
.table-file-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 步骤流程时间线 */
.step-timeline { background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06); border-radius: 16px; padding: 16px 20px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02); }
.step-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.step-item:not(:last-child) { border-bottom: 1px solid var(--bg-hover); }
.step-item.fade-in { animation: stepFadeIn 0.4s ease-out; }
@keyframes stepFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.step-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--dot-pending); flex-shrink: 0; margin-top: 6px;
}
.step-dot.done { background: var(--success); }
.step-dot.pending { background: var(--dot-pending); }
.step-dot.error { background: var(--error); }
.step-dot.waiting { background: var(--warning); }
.step-dot.active {
background: var(--accent);
animation: dotPulse 1s ease-in-out infinite;
}
@keyframes dotPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.processing-dot {
color: var(--accent); font-size: 12px;
}
.processing-dot::after {
content: '';
animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
.step-body { flex: 1; word-break: break-all; }
.step-title { font-size: 13px; color: var(--text-secondary); font-weight: 500; word-break: break-all; }
.step-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; word-break: break-all; }
.step-detail .field-list { color: var(--chip-text); }
.step-detail .field-list span { display: inline-block; background: var(--chip-bg); padding: 2px 6px; border-radius: 4px; margin: 2px 3px 2px 0; font-size: 11px; color: var(--chip-text); }
/* Step 6 折叠区域 */
.step6-content { margin-top: 8px; }
.step6-info-card { margin-top: 8px; }
.step6-info-card .step6-fields-wrapper { position: relative; }
.step6-info-card.expanded .step6-fields-preview { display: none; }
.step6-info-card:not(.expanded) .step6-fields-all { display: none; }
.step6-more-hint {
text-align: center;
font-size: 12px;
color: var(--accent-text);
cursor: pointer;
padding-top: 6px;
margin-top: 4px;
border-top: 1px solid var(--bg-hover);
user-select: none;
}
.step6-more-hint:hover { color: var(--accent-hover); }
/* 通用步骤内折叠卡片 */
.step-fold-card { margin-top: 8px; padding: 10px 12px; }
.step-fold-body { position: relative; }
.step-fold-card.expanded .step-fold-preview { display: none; }
.step-fold-card:not(.expanded) .step-fold-all { display: none; }
.step-fold-hint {
text-align: center;
font-size: 12px;
color: var(--accent-text);
cursor: pointer;
padding-top: 6px;
margin-top: 4px;
border-top: 1px solid var(--bg-hover);
user-select: none;
}
.step-fold-hint:hover { color: var(--accent-hover); }
.step6-info-card.expanded .step6-more-hint { border-top: 1px solid var(--bg-hover); }
.extracted { margin-top: 10px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.info-card { background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06); border-radius: 14px; padding: 14px; box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02); }
.info-card-title { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; letter-spacing: 1px; }
.kv-row { display: flex; font-size: 13px; margin-bottom: 6px; line-height: 1.5; }
.kv-row .k { color: var(--text-muted); width: 92px; flex-shrink: 0; }
.kv-row .v { color: var(--text-primary); flex: 1; word-break: break-word; }
.field-chip { display: inline-block; padding: 3px 9px; margin: 2px 4px 2px 0; background: var(--accent-light); color: var(--accent-text); border-radius: 20px; font-size: 12px; border: 1px solid var(--accent-border); }
.save-tag { display: inline-block; padding: 3px 9px; background: var(--success-bg); color: var(--success-text); border-radius: 4px; font-size: 11px; margin-left: 8px; }
.save-tag.warning { background: rgba(251,191,36,0.15); color: #b45309; }
.save-tag.failed { background: var(--error-bg); color: var(--error-text); }
/* 输入框 - 豆包风格布局，主题色沿用蓝色 */
.chat-input-bar { padding: 16px 10% 24px; background: transparent; flex-shrink: 0; }
.composer-card { background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06); border-radius: 22px; padding: 14px 16px 10px; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02); }
.composer-card:focus-within { border-color: var(--accent); box-shadow: 0 2px 12px rgba(102,126,234,0.15), 0 0 0 3px rgba(124,58,237,0.06); }
.file-preview-area { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: var(--text-secondary); max-width: 100%; }
.file-chip-icon { font-size: 16px; flex-shrink: 0; }
.file-chip-info { display: flex; flex-direction: column; min-width: 0; }
.file-chip-name { font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; font-size: 12px; }
.file-chip-meta { font-size: 11px; color: var(--text-subtle); }
.file-chip-remove { width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--bg-hover); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; flex-shrink: 0; padding: 0; line-height: 1; transition: all 0.15s; }
.file-chip-remove:hover { background: var(--error); color: #fff; }
textarea.msg-text { width: 100%; background: transparent; border: none; outline: none; resize: none; color: var(--text-primary); font-size: 14px; line-height: 1.55; font-family: inherit; max-height: 200px; min-height: 24px; padding: 2px 0 10px; caret-color: var(--accent); }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; padding-top: 2px; }
.toolbar-left { display: flex; align-items: center; gap: 2px; }
.toolbar-right { display: flex; align-items: center; gap: 6px; }
.toolbar-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.15s; padding: 0; }
.toolbar-btn:hover { background: var(--accent-light); color: var(--accent-text); }
.toolbar-btn svg { width: 18px; height: 18px; }
.btn { background: var(--accent-gradient); color: var(--text-inverse); border: none; padding: 9px 16px; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all 0.15s; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; box-shadow: 0 2px 8px rgba(102,126,234,0.25); }
.btn:hover:not(:disabled) { background: var(--accent-gradient-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(102,126,234,0.35); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); box-shadow: none; }
.btn.secondary:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-border); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.btn-send { width: 34px; height: 34px; padding: 0; border-radius: 10px; flex-shrink: 0; background: var(--accent-gradient); color: #fff; box-shadow: 0 2px 8px rgba(102,126,234,0.3); transition: all 0.2s; }
.btn-send:hover:not(:disabled) { background: var(--accent-gradient-hover); box-shadow: 0 4px 14px rgba(102,126,234,0.4); transform: translateY(-1px); }
.btn-send:disabled { opacity: 0.4; box-shadow: none; transform: none; background: var(--accent-gradient); }
.btn-send svg { width: 17px; height: 17px; }
.btn-confirm { padding: 10px 22px; border-radius: 10px; font-size: 14px; background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 12px rgba(102,126,234,0.3); }
.btn-confirm:hover:not(:disabled) { background: var(--accent-gradient-hover); box-shadow: 0 6px 18px rgba(102,126,234,0.4); transform: translateY(-1px); }
.hint { font-size: 11px; color: var(--text-subtle); margin-top: 6px; text-align: center; }
/* 列表页通用 */
.list-wrap { flex: 1; overflow-y: auto; padding: 22px 28px; }
table.list { width: 100%; border-collapse: collapse; background: var(--bg-secondary); border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); }
table.list th { text-align: left; padding: 10px 14px; background: var(--bg-tertiary); color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); }
table.list td { padding: 11px 14px; border-top: 1px solid var(--border-color); font-size: 13px; color: var(--text-secondary); }
.empty { text-align: center; color: var(--text-subtle); padding: 40px; font-size: 13px; }
input.tf { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 8px 12px; border-radius: 8px; font-size: 13px; font-family: inherit; }
input.tf:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-shadow); }
/* 预览确认弹窗 */
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-overlay); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.2s; }
.modal-mask.show { opacity: 1; visibility: visible; }
.modal-box { background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06); border-radius: 20px; width: 90%; max-width: 900px; max-height: 85vh; overflow: hidden; transform: scale(0.95); transition: transform 0.2s; box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(102,126,234,0.08); }
.modal-mask.show .modal-box { transform: scale(1); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(102,126,234,0.06); background: var(--bg-secondary); }
.modal-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; }
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { padding: 20px; overflow-y: auto; max-height: calc(85vh - 120px); background: var(--bg-secondary); color: var(--text-secondary); }
.modal-footer { padding: 16px 22px; border-top: 1px solid rgba(102,126,234,0.06); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-tertiary); }
/* 预览表格样式 */
.preview-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.preview-table th, .preview-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-color); }
.preview-table th { background: var(--bg-tertiary); color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.preview-table td { font-size: 13px; color: var(--text-secondary); }
.preview-table input.edit-input { width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 6px 10px; border-radius: 6px; font-size: 13px; font-family: inherit; }
.preview-table input.edit-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-shadow); }
.preview-section { margin-bottom: 24px; }
.preview-section-title { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.action-select { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 4px 8px; border-radius: 4px; font-size: 12px; }
.summary-box { background: var(--bg-tertiary); border: 1px solid rgba(102,126,234,0.06); border-radius: 12px; padding: 14px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.summary-box strong { color: var(--info); }
.add-field-btn-wrap { display: flex; justify-content: center; margin-top: -12px; margin-bottom: 8px; }
.add-field-btn {
width: 36px; height: 36px; border-radius: 50%;
border: 1px dashed var(--border-color);
background: var(--bg-secondary);
color: var(--text-muted);
font-size: 20px; line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.add-field-btn:hover {
border-color: var(--accent);
color: var(--accent-text);
background: var(--accent-light);
}
.del-field-btn {
width: 24px; height: 24px; border-radius: 50%;
border: none; background: transparent;
color: var(--text-subtle);
font-size: 14px; line-height: 24px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
text-align: center;
}
.del-field-btn:hover {
background: var(--error-bg);
color: var(--error-text);
}
.preview-table tr.deleted-field-row td {
color: var(--text-subtle);
text-decoration: line-through;
opacity: 0.5;
}
.preview-table tr.deleted-field-row input.edit-input {
color: var(--text-subtle);
text-decoration: line-through;
opacity: 0.5;
pointer-events: none;
}
.preview-table tr.deleted-field-row .del-field-btn {
color: var(--text-subtle);
border: 1px solid var(--border-color);
font-size: 13px;
}
.preview-table tr.deleted-field-row .del-field-btn:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-light);
}
/* 登录/注册 */
.auth-wrap { min-height: 100vh; min-height: 100dvh; min-height: calc(var(--vh, 1vh) * 100); display: flex; align-items: center; justify-content: center; background: var(--bg-primary); }
.auth-box { background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06); padding: 36px 40px; border-radius: 20px; width: 420px; box-shadow: 0 8px 32px rgba(102,126,234,0.08), 0 2px 8px rgba(0,0,0,0.04); }
.auth-title { font-size: 20px; font-weight: 700; margin-bottom: 18px; color: var(--text-primary); }
.field-row { margin-bottom: 14px; }
.field-row label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; }
.field-row input { width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 10px 12px; border-radius: 8px; font-size: 13px; font-family: inherit; }
.field-row input:focus { outline: none; border-color: var(--border-focus); }
.auth-btn { width: 100%; padding: 11px; font-size: 14px; margin-top: 8px; }
.auth-btn-outline {
flex: 1; padding: 11px; font-size: 14px;
background: var(--bg-primary); color: var(--accent);
border: 1px solid var(--accent); box-shadow: none;
}
.auth-btn-outline:hover:not(:disabled) {
background: rgba(102, 126, 234, 0.08);
border-color: var(--accent-hover); color: var(--accent-hover);
transform: translateY(-1px);
}
.auth-tabs { display: flex; margin-bottom: 18px; border-bottom: 1px solid var(--border-color); }
.auth-tab { padding: 8px 16px; cursor: pointer; font-size: 13px; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 40px; }
.password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted); user-select: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.password-toggle:hover { color: var(--text-primary); }
.password-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-error { color: var(--error); font-size: 11px; margin-top: 4px; min-height: 14px; }
.auth-error-banner { display: none; background: rgba(220, 38, 38, 0.08); border: 1px solid var(--error); color: var(--error); padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; margin-bottom: 14px; word-break: break-word; }
.auth-error-banner.show { display: block; }
.btn.loading { opacity: 0.7; pointer-events: none; }
.btn.loading::after { content: "..."; }
.hint-text { font-size: 11px; color: var(--text-muted); margin-top: -8px; margin-bottom: 12px; }
.toast { position: fixed; top: 20px; right: 20px; padding: 12px 18px; border-radius: 8px; color: var(--text-inverse); font-size: 13px; z-index: 9999; opacity: 0; transform: translateY(-10px); transition: all 0.2s; pointer-events: none; white-space: pre-wrap; line-height: 1.5; max-width: 480px; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast.success { background: var(--success); }
.toast.error { background: var(--error); }
.toast.warning, .toast.warn { background: #F59E0B; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 10px; }
/* ===== 内部数据中心页面样式 ===== */
.analytics-wrap { flex: 1; display: flex; overflow: hidden; background: var(--bg-primary); padding: 0 20px 20px; gap: 16px; }
.analytics-left {
width: 260px;
background: var(--bg-secondary);
border-radius: 18px;
padding: 16px;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
border: 1px solid rgba(102,126,234,0.06);
}
.schema-list { flex: 1; overflow-y: auto; padding-right: 4px; margin: 0 -4px; }
.analytics-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; gap: 14px; }
.analytics-query {
padding: 16px 20px;
background: var(--bg-secondary);
border-radius: 18px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
border: 1px solid rgba(102,126,234,0.06);
flex-shrink: 0;
}
.analytics-results { flex: 1; display: flex; flex-direction: column; padding: 0; overflow-y: auto; gap: 16px; }
.schema-table { margin-bottom: 20px; }
.schema-table-title {
font-size: 12px;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 0.8px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 4px 0;
}
.schema-table-title:hover { color: var(--accent); }
.schema-table-title .arrow { font-size: 10px; transition: transform 0.2s ease; }
.schema-table-title.collapsed .arrow { transform: rotate(-90deg); }
.schema-group-title {
font-size: 11px;
color: var(--text-subtle);
font-weight: 600;
margin: 16px 0 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
.schema-table-body { padding-left: 8px; }
.schema-table-body.collapsed { display: none; }
.field-chip {
padding: 7px 12px;
margin: 4px 0;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 12px;
cursor: grab;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text-secondary);
position: relative;
overflow: hidden;
}
.field-chip::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
opacity: 0;
transition: opacity 0.2s;
}
.field-chip:hover {
background: var(--accent-light);
border-color: var(--accent-border);
transform: translateX(4px);
}
.field-chip:hover::before { opacity: 1; }
.field-chip:active { cursor: grabbing; }
.field-chip .type-tag {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-secondary);
color: var(--text-muted);
margin-left: auto;
font-weight: 500;
}
.field-chip .type-tag.integer { color: #f59e0b; background: rgba(245,158,11,0.1); }
.field-chip .type-tag.real { color: #10b981; background: rgba(16,185,129,0.1); }
.field-chip .type-tag.text { color: #60a5fa; background: rgba(96,165,250,0.1); }
.field-chip.dragging { opacity: 0.5; }
.analytics-stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 8px;
}
.stat-card {
background: var(--bg-secondary);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(102,126,234,0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent-gradient);
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(102,126,234,0.10), 0 2px 8px rgba(0,0,0,0.04);
border-color: rgba(102,126,234,0.12);
}
.stat-card-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
background: var(--accent-light);
}
.stat-card-value {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
margin-bottom: 4px;
}
.stat-card-label {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.leads-container { flex-shrink: 0; display: flex; overflow: visible; padding: 0 20px 20px; gap: 16px; }
.leads-main { flex: 1; display: flex; flex-direction: column; overflow: visible; gap: 14px; }
.leads-header { padding: 0; background: transparent; }
.leads-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.leads-stats { display: flex; gap: 20px; margin-top: 8px; }
.stat-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.stat-item .stat-value { font-weight: 600; color: var(--accent); font-size: 14px; }
.leads-filters {
padding: 16px;
background: var(--bg-secondary);
border-radius: 18px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
border: 1px solid rgba(102,126,234,0.06);
flex-shrink: 0;
}
/* 筛选卡搜索框统一规范（客户跟进/地推名片/展会数据共用） */
.leads-search { min-width: 200px; max-width: 320px; }
.leads-search input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 14px 0 38px; border: 1px solid rgba(102,126,234,0.10); border-radius: 12px; background-color: var(--bg-primary);
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat; background-position:left 12px center; background-size:16px 16px;
color: var(--text-primary); font-size: 13px; transition: border-color 0.15s; -webkit-appearance: none; appearance: none; outline: none; }
.leads-search input:focus,
.leads-search input:focus-visible { outline: none; border-color: var(--accent); }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tag { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 20px; font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.filter-tag:hover { background: var(--bg-hover); border-color: var(--accent); }
.filter-tag.active { background: var(--accent); color: white; border-color: var(--accent); }
.filters-section { margin-top: 4px; }
.filters-section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.filters-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Custom select */
.custom-select-wrap { position: relative; }
/* 筛选触发器统一规范：custom-select（地推）/ exh-filter-select（展会原生select）/ tsel-trigger（客户跟进）高度均为 40 */
.custom-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 40px;
box-sizing: border-box;
padding: 9px 14px;
border: 1px solid rgba(102,126,234,0.10);
border-radius: 10px;
background: var(--bg-primary);
min-width: 130px;
cursor: pointer;
transition: all 0.15s;
}
.custom-select-trigger:hover { border-color: var(--accent); }
.custom-select-wrap.open .custom-select-trigger {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(102,126,234,0.10);
}
.custom-select-label {
font-size: 13px;
color: var(--text-primary);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-select-arrow {
width: 14px; height: 14px;
color: var(--text-muted);
flex-shrink: 0;
transition: transform 0.15s;
}
.custom-select-wrap.open .custom-select-arrow { transform: rotate(180deg); }
.custom-select-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 260px;
width: max-content;
max-width: 320px;
max-height: 340px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.05);
z-index: 300;
}
.custom-select-option {
padding: 8px 12px;
font-size: 13px;
color: var(--text-primary);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
transition: background 0.1s;
}
.custom-select-option:hover { background: var(--bg-hover); }
.custom-select-option.selected {
background: rgba(102,126,234,0.12);
color: var(--accent);
font-weight: 500;
}
.custom-select-option .cs-check {
width: 14px; height: 14px;
color: var(--accent);
flex-shrink: 0;
opacity: 0;
}
.custom-select-option.selected .cs-check { opacity: 1; }
/* 标签两级折叠选择（桌面菜单 + 移动抽屉共用三态框） */
.cs-tri {
width: 16px; height: 16px;
border: 1.5px solid var(--border-color);
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
cursor: pointer;
background: var(--bg-primary);
transition: all 0.12s;
}
.cs-tri svg { width: 11px; height: 11px; color: #fff; }
.cs-tri.all, .cs-tri.part { background: var(--accent); border-color: var(--accent); }
.cs-cat-l1-name {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-align: left;
}
.cs-cat-l1-name em { font-style: normal; color: var(--text-muted); font-size: 11px; font-weight: 400; }
.cs-cat-arrow { width: 14px; height: 14px; color: var(--text-muted); transition: transform 0.15s; flex-shrink: 0; }
.cs-cat-arrow.open { transform: rotate(180deg); }
.cs-cat-children .cs-cat-l2 { padding-left: 34px; font-size: 12.5px; color: var(--text-secondary); }
/* Custom amount range inside dropdown */
.custom-select-range {
margin: 4px;
padding: 10px 12px;
border-radius: 10px;
background: var(--bg-tertiary);
border: 1px solid transparent;
transition: all 0.15s;
max-height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
opacity: 0;
}
.custom-select-range.active {
max-height: 80px;
padding: 10px 12px;
border-width: 1px;
opacity: 1;
margin-top: 8px;
border-color: rgba(102,126,234,0.15);
}
.custom-range-inputs {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
box-sizing: border-box;
}
.custom-range-inputs input[type="number"] {
width: 64px;
flex-shrink: 0;
padding: 7px 8px;
border: 1px solid var(--border-color);
border-radius: 7px;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 12px;
transition: all 0.15s;
}
.custom-range-inputs input[type="number"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(102,126,234,0.12);
}
.custom-range-inputs input::-webkit-outer-spin-button,
.custom-range-inputs input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.custom-range-inputs input[type=number] { -moz-appearance: textfield; }
.custom-range-sep {
color: var(--text-muted);
font-size: 13px;
flex-shrink: 0;
}
.custom-range-unit {
font-size: 12px;
color: var(--text-secondary);
flex-shrink: 0;
margin-left: 2px;
}
.filter-select-wrap select { padding: 8px 14px; border: 1px solid rgba(102,126,234,0.10); border-radius: 10px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; min-width: 130px; cursor: pointer; transition: all 0.15s; }
.filter-select-wrap select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102,126,234,0.10); }
.filter-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s; }
.filter-checkbox:hover { background: var(--bg-hover); }
.filter-checkbox input { width: 16px; height: 16px; cursor: pointer; }
.filter-range-wrap { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 12px; color: var(--text-muted); }
.filter-range-inputs { display: flex; align-items: center; gap: 4px; }
.filter-range-inputs input { width: 80px; padding: 7px 10px; border: 1px solid rgba(102,126,234,0.10); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 12px; transition: all 0.15s; }
.filter-range-inputs input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(102,126,234,0.10); }
.range-separator { color: var(--text-muted); font-size: 12px; }
.filter-custom-range { display: flex; align-items: center; gap: 4px; }
.filter-custom-range input { width: 70px; padding: 7px 10px; border: 1px solid rgba(102,126,234,0.10); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 12px; transition: all 0.15s; }
.filter-custom-range input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(102,126,234,0.10); }
.filters-reset { margin-top: 8px; }
.filters-reset button { padding: 7px 16px; border: 1px solid rgba(102,126,234,0.15); border-radius: 10px; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; transition: all 0.15s; font-weight: 500; }
.filters-reset button:hover { background: rgba(102,126,234,0.06); border-color: var(--accent); }
.leads-tab-bar { display: none; }
.leads-filter-drawer-overlay { display: none; }
.leads-filter-drawer { display: none; }
/* Tab scroll as both flex child and positioning context */
.leads-tab-scroll {
position: relative;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
display: flex;
background: var(--bg-secondary);
border-radius: 22px;
padding: 4px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
border: 1px solid rgba(102,126,234,0.06);
height: 44px;
box-sizing: border-box;
width: 100%;
}
/* Tab items container in normal flow */
.leads-tab-items {
display: flex;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
width: 100%;
}
.leads-tab-items::-webkit-scrollbar { display: none; }
/* Search box absolutely positioned to overlay tab items area (inside padding) */
.leads-search-box {
overflow: hidden;
position: absolute;
left: 4px;
right: 4px;
top: 4px;
bottom: 4px;
display: flex;
align-items: center;
background: var(--bg-secondary);
border-radius: 18px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* Default mode: tab items visible, search box hidden */
.leads-tab-bar:not(.search-mode) .leads-tab-items {
opacity: 1;
pointer-events: auto;
}
/* Search mode: search box visible, tab items hidden */
.leads-tab-bar.search-mode .leads-search-box {
opacity: 1;
pointer-events: auto;
}
.leads-tab-bar.search-mode .leads-tab-items {
opacity: 0;
pointer-events: none;
}
.leads-search-box input {
flex: 1 1 auto;
width: 100% !important;
min-width: 0;
padding: 0 16px !important;
border: none;
border-radius: 16px;
background: transparent;
color: var(--text-primary);
font-size: 13px;
line-height: 32px;
font-family: inherit;
transition: all 0.15s;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
outline-offset: 0;
box-sizing: border-box;
height: 32px;
}
.leads-search-box input:focus,
.leads-search-box input:focus-visible {
outline: none;
outline-offset: 0;
}
.leads-search-toggle {
flex: 0 0 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
cursor: pointer;
background: var(--bg-secondary);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
border: 1px solid rgba(102,126,234,0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
.leads-grid {
flex-shrink: 0;
padding: 0;
overflow-x: auto;
}
.leads-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-secondary); border-radius: 18px; overflow: hidden; table-layout: fixed; box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02); border: 1px solid rgba(102,126,234,0.06); }
.leads-table th { background: var(--bg-tertiary); padding: 14px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.leads-table td { padding: 14px 16px; border-bottom: 1px solid rgba(102,126,234,0.06); font-size: 13px; color: var(--text-primary); }
.leads-table tr { cursor: pointer; transition: background 0.15s; }
.leads-table tr:hover { background: var(--bg-hover); }
.leads-table tr:last-child td { border-bottom: none; }
.leads-table col.lead-col-checkbox { width: 40px; }
.leads-table col.lead-col-info { width: 220px; }
.leads-table col.lead-col-contact { width: 110px; }
.leads-table col.lead-col-annual { width: 125px; }
.leads-table col.lead-col-products { width: 500px; min-width: 500px; }
.lead-checkbox-cell { width: 40px; text-align: center; vertical-align: top; }
.lead-checkbox-cell input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.leads-select-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 12px; }
.leads-select-info { font-size: 13px; color: var(--text-secondary); }
.leads-select-info span { font-weight: 600; color: var(--accent); }
.leads-select-actions { display: flex; gap: 8px; }
.btn-leads-select { padding: 7px 16px; border-radius: 8px; border: none; background: linear-gradient(135deg, var(--accent) 0%, #764ba2 100%); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
.btn-leads-select:hover { opacity: 0.9; }
/* 筛选卡内主动作按钮统一规范（如"新建跟进"），与筛选触发器等高 40 */
.filter-action-btn { height: 40px; box-sizing: border-box; padding: 0 18px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--accent) 0%, #764ba2 100%); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s; }
.filter-action-btn:hover { opacity: 0.9; }
.btn-leads-select-clear { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer; }
.btn-leads-select-clear:hover { background: var(--bg-hover); }
/* Mobile selection - custom checkbox in bottom section */
.lead-mobile-card { position: relative; }
.lead-mobile-bottom {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(102,126,234,0.08);
}
.lead-mobile-select {
flex-shrink: 0;
padding-top: 2px;
}
.lead-mobile-select input[type="checkbox"] { display: none; }
.lead-mobile-select .custom-check {
width: 22px; height: 22px;
border: 2px solid var(--border-color);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s;
background: var(--bg-primary);
}
.lead-mobile-select input:checked + .custom-check {
background: linear-gradient(135deg, var(--accent) 0%, #764ba2 100%);
border-color: var(--accent);
}
.lead-mobile-select input:checked + .custom-check::after {
content: '';
width: 6px; height: 10px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
.lead-mobile-card.selected {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.lead-mobile-card.selected .lead-mobile-name { color: var(--accent); }
.lead-mobile-card.selected .lead-mobile-bottom { border-top-color: var(--accent); }
/* Mobile bottom bar - hidden by default for desktop */
.leads-mobile-select-bar { display: none; }
.leads-table th:first-child, .leads-table td:first-child { padding-left: 16px; }
.leads-table input[type="checkbox"] { cursor: pointer; }
.lead-annual-cell { vertical-align: top; white-space: nowrap; }
.lead-annual-text { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.lead-country { font-size: 12px; padding: 4px 8px; background: var(--chip-bg); border-radius: 4px; color: var(--text-secondary); display: inline-block; }
.lead-phone { font-size: 12px; color: var(--text-muted); }
.lead-shop-name { font-weight: 600; color: var(--text-primary); }
.lead-contact { font-size: 12px; color: var(--text-secondary); }
.lead-products { font-size: 11px; color: var(--text-muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-meta-value { font-size: 12px; color: var(--text-secondary); }
.lead-info-cell { vertical-align: top; overflow: hidden; }
.lead-info-main { font-weight: 600; color: var(--text-primary); font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.lead-info-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-info-main .lead-tag-chip { flex-shrink: 0; }
.lead-info-sub { font-size: 12px; color: var(--text-muted); padding: 3px 8px; background: var(--chip-bg); border-radius: 4px; display: inline-block; margin-bottom: 4px; }
.lead-info-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.lead-tag-chip { font-size: 12px; color: var(--text-muted); padding: 3px 8px; background: var(--chip-bg); border-radius: 4px; white-space: nowrap; display: inline-block; }
.lead-update-date { font-size: 12px; color: var(--text-subtle, #9ca3af); white-space: nowrap; }
.lead-contact-cell { vertical-align: top; overflow: hidden; white-space: nowrap; }
.lead-contact-main { font-weight: 600; color: var(--text-primary); font-size: 14px; margin-bottom: 6px; }
.lead-contact-meta { display: grid; grid-template-columns: repeat(2, min-content); gap: 6px; max-height: calc(3 * 22px + 2 * 6px); overflow: hidden; }
.meta-item { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 18px; color: var(--text-muted); padding: 2px 6px; background: var(--bg-tertiary); border-radius: 4px; white-space: nowrap; }
.meta-icon { font-size: 12px; }
.lead-detail-cell { vertical-align: top; overflow: hidden; }
.lead-detail-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.lead-product-item { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; line-height: 1.5; }
.lead-product-item + .lead-product-item { margin-top: 4px; }
.leads-detail-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 999;
display: flex; justify-content: flex-end;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.25s ease, visibility 0s 0.25s;
}
.leads-detail-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease, visibility 0s 0s; display: flex; }
.leads-detail-panel {
width: 640px; max-width: 90vw; height: 100%; background: var(--bg-primary);
box-shadow: -4px 0 24px rgba(0,0,0,0.12);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: fixed; right: 0; top: 0; bottom: 0; z-index: 1000;
border-radius: 0;
border-left: none;
}
.leads-detail-panel.open { transform: translateX(0); }
.leads-detail-overlay.open .leads-detail-panel { transform: translateX(0); }
.leads-detail-header { padding: 20px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.leads-detail-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); }
.leads-detail-close {
cursor: pointer; width: 32px; height: 32px; border-radius: 8px;
background: var(--bg-secondary); border: none; color: var(--text-muted);
display: flex; align-items: center; justify-content: center; font-size: 16px;
transition: all 0.15s;
}
.leads-detail-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.leads-detail-body { flex: 1; padding: 24px; overflow-y: auto; user-select: text; -webkit-user-select: text; }
/* 详情内容允许选择复制（含电话、社交链接的文本）；按钮仍不可选 */
.leads-detail-body *:not(button) { user-select: text; -webkit-user-select: text; }
.detail-section { margin-bottom: 20px; }
.detail-section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.detail-info-row { display: flex; gap: 12px; margin-bottom: 10px; line-height: 1.7; }
.detail-info-label { font-size: 13px; color: var(--text-muted); min-width: 70px; flex-shrink: 0; }
.detail-info-value { font-size: 14px; color: var(--text-primary); flex: 1; word-break: break-word; overflow-wrap: break-word; }
.detail-products-list { margin: 0; padding: 0; list-style: none; }
.detail-products-list li { padding: 6px 0; font-size: 13px; color: var(--text-primary); }
.detail-social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link { padding: 6px 10px; background: var(--bg-tertiary); border-radius: 6px; font-size: 12px; color: var(--text-secondary); text-decoration: none; }
.social-link:hover { background: var(--accent-light); color: var(--accent); }
.detail-contact-link { color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(102,126,234,0.45); word-break: break-all; }
.detail-contact-link:hover { color: var(--accent-text); border-bottom-style: solid; }
.detail-wa-btn { display: inline-flex; align-items: center; padding: 2px 4px; margin: 0 2px; border-radius: 5px; vertical-align: -2px; line-height: 1; text-decoration: none; }
.detail-wa-btn:hover { background: rgba(37,211,102,0.15); }
.detail-wa-btn svg { display: block; }
/* 统一电话行：地推/地图/客户跟进共用，多条号码每行一条 */
.phone-line { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.phone-line + .phone-line { margin-top: 2px; }
.phone-line-num { color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(102,126,234,0.45); word-break: break-all; line-height: 1.4; }
.phone-line-num:hover { color: var(--accent-text); border-bottom-style: solid; }
.phone-line-wa { display: inline-flex; align-items: center; padding: 3px; border-radius: 6px; line-height: 1; text-decoration: none; flex-shrink: 0; }
.phone-line-wa:hover { background: rgba(37,211,102,0.15); }
.phone-line-wa svg { display: block; }
/* 地图列表底部「加载更多」分块按钮 */
.map-more-row { height: 92px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; }
.map-more-btn { border: none; cursor: pointer; padding: 9px 26px; border-radius: 10px; font-size: 14px; color: #fff; background: linear-gradient(135deg, #667eea, #7c3aed); box-shadow: 0 3px 10px rgba(102,126,234,.28); transition: transform .15s ease, box-shadow .15s ease; }
.map-more-btn:hover { box-shadow: 0 5px 16px rgba(102,126,234,.38); }
.map-more-btn:active { transform: scale(.97); }
.map-more-info { font-size: 12px; color: var(--text-muted); }
.map-more-loading { font-size: 13px; color: var(--text-muted); }
/* 地图列表分类标签（六大类配色，替代原地址） */
.map-cat-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 12px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.map-cat-lighting { color: #d97706; background: rgba(217,119,6,0.11); }
.map-cat-electronics { color: #2563eb; background: rgba(37,99,235,0.10); }
.map-cat-auto { color: #dc2626; background: rgba(220,38,38,0.09); }
.map-cat-bath { color: #0d9488; background: rgba(13,148,136,0.10); }
.map-cat-home { color: #7c3aed; background: rgba(124,58,237,0.10); }
.map-cat-other { color: var(--text-muted); background: var(--bg-hover); }
.leads-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); padding: 60px 20px; }
.leads-empty-icon { font-size: 40px; margin-bottom: 16px; }
.leads-empty-spinner { width: 36px; height: 36px; border: 3px solid var(--border-color); border-top-color: var(--accent, #667eea); border-radius: 50%; animation: leads-spin 0.8s linear infinite; margin-bottom: 16px; }
@keyframes leads-spin { to { transform: rotate(360deg); } }
.leads-empty-text { font-size: 14px; color: var(--text-muted); }
/* 试用版毛玻璃遮罩 */
.trial-list-container {
position: relative;
overflow: hidden;
}
.trial-frosted-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 160px;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 30%,
rgba(255, 255, 255, 0.7) 70%,
rgba(255, 255, 255, 0.85) 100%
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
.trial-overlay-content {
text-align: center;
color: #374151;
}
.trial-lock-icon {
font-size: 28px;
margin-bottom: 8px;
}
.trial-overlay-text {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 4px;
}
.trial-overlay-sub {
font-size: 13px;
color: #6b7280;
}
/* 试用版底部横幅 */
.trial-banner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 10px;
margin-top: 12px;
margin-bottom: 4px;
padding: 12px 16px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
border: 1px solid rgba(245,158,11,.32);
color: #92400e;
font-size: 14px;
font-weight: 600;
text-align: center;
}
.trial-banner .trial-lock-icon { font-size: 16px; line-height: 1; margin-bottom: 0; }
.trial-banner .trial-banner-sub { font-size: 12px; font-weight: 400; color: #b45309; }
/* Pagination */
.leads-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 6px;
gap: 12px;
width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
}
.leads-pagination .pagination-info {
font-size: 13px;
color: var(--text-secondary);
flex-shrink: 0;
}
.leads-pagination .pagination-controls {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
flex-wrap: wrap;
justify-content: flex-end;
}
.leads-pagination .page-btn {
min-width: 34px;
height: 34px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid rgba(102,126,234,0.10);
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
user-select: none;
}
.leads-pagination .page-btn:hover:not(.disabled):not(.active):not(.ellipsis) {
background: var(--bg-hover);
border-color: var(--accent);
color: var(--accent);
}
.leads-pagination .page-btn:active:not(.disabled):not(.active):not(.ellipsis) {
transform: scale(0.94);
}
.leads-pagination .page-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: transparent;
color: white;
box-shadow: 0 2px 8px rgba(102,126,234,0.3);
}
.leads-pagination .page-btn.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.leads-pagination .page-btn.ellipsis {
background: transparent;
border: none;
color: var(--text-muted);
cursor: default;
min-width: 20px;
padding: 0 4px;
}
.leads-pagination .page-btn svg {
width: 16px;
height: 16px;
stroke-width: 2.5;
}
.leads-toggle-bar {
display: none;
align-items: flex-start;
justify-content: center;
width: 100%;
height: 20px;
background: var(--bg-primary);
color: var(--text-muted);
cursor: pointer;
user-select: none;
position: relative;
flex-shrink: 0;
}
.leads-toggle-bar .toggle-arrow {
width: 60px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: none;
border-radius: 0 0 14px 14px;
transition: all 0.15s;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.leads-toggle-bar .toggle-arrow svg {
width: 14px;
height: 14px;
transition: transform 0.3s ease;
}
.leads-toggle-bar .toggle-arrow.up svg { transform: rotate(180deg); }
.leads-toggle-bar .toggle-arrow.down svg { transform: rotate(0deg); }
.leads-toggle-bar:hover .toggle-arrow { color: var(--accent); }
.query-section { margin-bottom: 0; border-bottom: 1px solid var(--border-color); }
.query-section:last-child { border-bottom: none; }
.query-section-header { display: none; }
.query-section-body { display: block; }
.query-section-toggle { display: none; }
.mobile-chips { display: none; }
.mobile-table-select { display: none; }
.query-collapse-toggle { display: none; }
.query-row {
display: flex; align-items: flex-start; gap: 8px;
padding: 7px 10px; border-radius: 0;
border: none;
transition: background 0.15s;
}
.query-row.drag-over {
background: var(--accent-light);
}
.query-row-label {
flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--text-primary);
padding-top: 4px; min-width: 48px;
}
.query-row-chips {
display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0;
}
.query-row-placeholder {
font-size: 11px; color: var(--text-subtle); font-style: italic; padding-top: 4px;
}
.zone-chip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-radius: 5px; padding: 3px 8px; font-size: 12px; color: var(--text-primary);
cursor: pointer; transition: all 0.15s;
}
.zone-chip:hover { border-color: var(--accent); color: var(--accent); }
.zone-chip .chip-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-chip .chip-remove {
color: var(--text-subtle); cursor: pointer; font-size: 13px; padding: 0 1px; line-height: 1;
}
.zone-chip .chip-remove:hover { color: var(--error); }
.zone-chip.data { border-left: 3px solid var(--accent); }
.zone-chip.metric { border-left: 3px solid #f59e0b; }
.zone-chip .metric-func {
font-size: 9px; color: var(--text-subtle); background: var(--bg-tertiary);
padding: 1px 4px; border-radius: 3px; font-weight: 500;
}
.zone-chip.filter { border-left: 3px solid #10b981; }
.zone-chip .filter-op {
font-size: 9px; color: var(--text-subtle); background: var(--bg-tertiary);
padding: 1px 4px; border-radius: 3px; font-weight: 500;
}
.zone-chip .filter-val {
font-size: 10px; color: var(--text-secondary); max-width: 50px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-row {
display: flex; gap: 6px; margin-bottom: 6px; align-items: center;
}
.filter-input, .filter-select {
background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary);
padding: 5px 8px; border-radius: 6px; font-size: 12px; font-family: inherit;
}
.filter-input:focus, .filter-select:focus { outline: none; border-color: var(--border-focus); }
.filter-field { min-width: 120px; }
.filter-op { min-width: 70px; }
.filter-value { flex: 1; min-width: 100px; }
.remove-filter {
background: none; border: none; color: var(--error); cursor: pointer; font-size: 16px; padding: 0 4px;
}
.remove-filter:hover { color: var(--error-text); }
.query-toolbar { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; justify-content: space-between; }
.toolbar-left { display: flex; gap: 10px; align-items: center; }
.toolbar-right { display: flex; align-items: center; }
.limit-input-wrap { display: flex; align-items: center; gap: 4px; }
.limit-label { font-size: 12px; color: var(--text-muted); }
.limit-input { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 9px 10px; border-radius: 6px; font-size: 13px; font-family: inherit; width: 90px; }
.btn.share { background: var(--info); color: var(--text-inverse); }
.btn.share:hover:not(:disabled) { background: var(--accent); }
.total-count { font-size: 12px; color: var(--text-muted); }
.chart-type-group { display: flex; gap: 4px; }
.chart-type-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 16px; }
.chart-type-btn {
background: var(--chip-bg); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 6px 12px;
border-radius: 6px; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.chart-type-btn:hover { background: var(--bg-hover); }
.chart-type-btn.active { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.btn.execute {
background: var(--success);
}
.btn.execute:hover:not(:disabled) { background: var(--success-text); }
.results-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.results-grid.has-chart { grid-template-columns: 1fr; }
.chart-card {
background: var(--bg-secondary);
border: 1px solid rgba(102,126,234,0.06);
border-radius: 18px;
padding: 24px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
transition: all 0.2s ease;
}
.chart-card:hover {
box-shadow: 0 6px 20px rgba(102,126,234,0.08), 0 2px 6px rgba(0,0,0,0.04);
border-color: var(--accent-border);
}
.chart-card-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 20px;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.chart-card-title::before {
content: '';
width: 4px;
height: 16px;
background: var(--accent-gradient);
border-radius: 2px;
}
.chart-container { width: 100%; height: 400px; }
.table-card {
background: var(--bg-secondary);
border: 1px solid rgba(102,126,234,0.06);
border-radius: 18px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
transition: all 0.2s ease;
}
.table-card:hover {
box-shadow: 0 6px 20px rgba(102,126,234,0.08), 0 2px 6px rgba(0,0,0,0.04);
border-color: var(--accent-border);
}
.table-card-header {
padding: 20px 24px;
border-bottom: 1px solid rgba(102,126,234,0.06);
background: var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: space-between;
}
.table-card-header .chart-card-title {
margin: 0;
padding: 0;
}
.table-scroll-container { flex: 1; overflow: auto; min-height: 0; }
.results-table { border-collapse: collapse; font-size: 13px; width: 100%; }
.results-table thead { position: sticky; top: 0; z-index: 1; }
.results-table th {
background: var(--bg-tertiary);
padding: 14px 16px;
text-align: left;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
font-size: 11px;
border-bottom: 2px solid rgba(102,126,234,0.08);
white-space: nowrap;
position: relative;
}
.results-table th::after {
content: '';
position: absolute;
bottom: -2px;
left: 16px;
right: 16px;
height: 2px;
background: var(--accent-gradient);
opacity: 0;
transition: opacity 0.2s;
}
.results-table th:hover::after { opacity: 1; }
.sort-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: 14px; color: var(--text-subtle); flex-shrink: 0; user-select: none; transition: all 0.2s; }
.sort-btn:hover { background: var(--accent-light); color: var(--accent); }
.results-table td {
padding: 12px 16px;
border-bottom: 1px solid rgba(102,126,234,0.05);
color: var(--text-primary);
vertical-align: top;
cursor: pointer;
position: relative;
transition: all 0.15s;
}
.results-table td .cell-content { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; }
.results-table tr:hover td { background: var(--accent-light); }
.results-table tr { cursor: pointer; transition: background 0.15s; }
.results-grid { display: flex; flex-direction: column; gap: 20px; flex: 1; overflow: hidden; }
.pagination-container {
display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 20px;
border-top: 1px solid rgba(102,126,234,0.06); background: var(--bg-tertiary);
}
.pagination-btn {
background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.10); color: var(--text-secondary);
padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; transition: all 0.15s;
display: flex; align-items: center; justify-content: center; min-width: 36px; height: 32px;
}
.pagination-btn:hover:not(.disabled) { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.pagination-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-info { font-size: 12px; color: var(--text-muted); }
/* 单元格悬浮 tooltip */
.cell-tooltip { position: fixed; z-index: 9999; background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.08); border-radius: 12px; padding: 12px 16px; font-size: 12px; color: var(--text-secondary); max-width: 360px; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(102,126,234,0.06); pointer-events: none; opacity: 0; transition: opacity 0.15s; line-height: 1.6; word-break: break-word; }
.cell-tooltip.show { opacity: 1; }
/* 右侧详情侧边栏 */
.detail-panel { width: 0; flex-shrink: 0; background: var(--bg-secondary); border-left: 1px solid rgba(102,126,234,0.06); overflow: hidden; transition: width 0.25s ease; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0,0,0,0.06); }
.detail-panel.open { width: 520px; }
.detail-header { padding: 18px 22px; border-bottom: 1px solid rgba(102,126,234,0.06); display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.detail-close { cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-muted); font-size: 16px; transition: all 0.15s; }
.detail-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.detail-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.detail-kv-row { font-size: 13px; margin-bottom: 14px; line-height: 1.6; }
.detail-kv-row .k { color: var(--text-muted); font-weight: 500; margin-bottom: 4px; font-size: 12px; }
.detail-kv-row .v { color: var(--text-primary); word-break: break-word; white-space: pre-wrap; }
.detail-empty { text-align: center; color: var(--text-subtle); padding: 40px 20px; font-size: 13px; }
.detail-actions { display: flex; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(102,126,234,0.06); margin-top: 16px; }
.detail-actions .btn { flex: 1; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: all 0.2s; }
.btn-edit { background: var(--accent); color: white; }
.btn-edit:hover { background: var(--accent-hover); }
.btn-delete { background: var(--bg-tertiary); color: var(--error); border: 1px solid var(--error); }
.btn-delete:hover { background: var(--error); color: white; }
.btn-save { background: var(--success); color: white; }
.btn-save:hover { background: var(--success-hover); }
.btn-cancel { background: var(--bg-tertiary); color: var(--text-muted); }
.btn-cancel:hover { background: var(--bg-hover); }
.sort-config { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.sort-config.hidden { display: none; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-subtle); }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
/* 查询加载状态 */
.query-loading-state {
text-align: center;
padding: 60px 20px;
color: var(--text-subtle);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.query-loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(102, 126, 234, 0.15);
border-top-color: #667eea;
border-radius: 50%;
animation: querySpin 0.8s linear infinite;
}
@keyframes querySpin {
to { transform: rotate(360deg); }
}
.query-loading-text {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.query-loading-sub {
font-size: 12px;
color: var(--text-subtle);
}
/* 按钮加载状态 */
.btn.execute.loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.btn.execute.loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: btnSpin 0.8s linear infinite;
}
@keyframes btnSpin {
to { transform: rotate(360deg); }
}
.btn.execute:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-card { background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02); }
.stat-value { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.mode-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.mode-tab {
background: var(--chip-bg); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 6px 14px;
border-radius: 6px; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.mode-tab:hover { background: var(--bg-hover); }
.mode-tab.active { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
/* 表头下拉菜单 */
.results-table th { cursor: pointer; user-select: none; }
.results-table th:hover { background: var(--bg-hover); }
.th-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.th-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-sort-indicator { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; color: var(--accent); }
.th-sort-indicator svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.th-sort-indicator .sort-num { font-size: 10px; font-weight: 700; min-width: 14px; text-align: center; }
.header-dropdown { position: relative; display: inline-flex; align-items: center; }
.header-dropdown-menu {
position: fixed;
background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.08); border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(102,126,234,0.06); min-width: 160px; z-index: 9999;
display: none; padding: 6px 0; font-size: 12px;
}
.header-dropdown-menu.show { display: block; }
.dropdown-group-label { padding: 6px 12px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.dropdown-item { padding: 7px 12px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; justify-content: space-between; white-space: nowrap; border-radius: 6px; margin: 0 4px; transition: all 0.12s; }
.dropdown-item:hover { background: var(--accent-light); color: var(--accent-text); }
.dropdown-item .check { font-size: 10px; color: var(--accent); visibility: hidden; }
.dropdown-item.active .check { visibility: visible; }
.dropdown-divider { height: 1px; background: rgba(102,126,234,0.08); margin: 6px 8px; }
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-item::after { content: '›'; margin-left: 8px; color: var(--text-muted); }
.dropdown-submenu .dropdown-menu-l2 {
position: absolute; left: 100%; top: 0; margin-left: 2px;
background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.08); border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(102,126,234,0.06); min-width: 140px;
display: none; padding: 6px 0;
}
.dropdown-submenu:hover > .dropdown-menu-l2 { display: block; }
.dropdown-submenu .dropdown-submenu-l2 { position: relative; }
.dropdown-submenu-l2 > .dropdown-item::after { content: '›'; margin-left: 8px; color: var(--text-muted); }
.dropdown-submenu-l2 .dropdown-menu-l3 {
position: absolute; left: 100%; top: 0; margin-left: 2px;
background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.08); border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(102,126,234,0.06); min-width: 140px;
display: none; padding: 6px 0;
}
.dropdown-submenu-l2:hover > .dropdown-menu-l3 { display: block; }
/* ===== 成员管理页 ===== */
.members-page { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
/* 公司代码卡片 */
.company-code-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px; padding: 24px 28px;
display: flex; align-items: center; justify-content: space-between;
color: #fff; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}
.code-card-left { display: flex; align-items: center; gap: 20px; }
.code-card-icon {
width: 56px; height: 56px; border-radius: 14px;
background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
.code-card-label { font-size: 13px; opacity: 0.85; margin-bottom: 4px; }
.code-card-value { font-size: 22px; font-weight: 700; letter-spacing: 1px; font-family: 'Courier New', monospace; }
.code-card-desc { font-size: 12px; opacity: 0.75; margin-top: 4px; }
.company-code-card .btn-primary {
background: rgba(255,255,255,0.2); color: #fff;
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
font-weight: 600;
}
.company-code-card .btn-primary:hover { background: rgba(255,255,255,0.3); }
/* 统计卡片 */
.member-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card {
background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06);
border-radius: 16px; padding: 20px;
display: flex; align-items: center; gap: 16px;
transition: all 0.2s;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,126,234,0.08), 0 2px 6px rgba(0,0,0,0.04); border-color: rgba(102,126,234,0.10); }
.stat-icon {
width: 48px; height: 48px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
}
.stat-total .stat-icon { background: linear-gradient(135deg, #667eea, #764ba2); }
.stat-owner .stat-icon { background: linear-gradient(135deg, #f093fb, #f5576c); }
.stat-admin .stat-icon { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.stat-dev .stat-icon { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
/* 成员列表卡片 */
.members-list-card {
background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06);
border-radius: 18px; overflow: hidden;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.list-header {
padding: 18px 24px;
display: flex; align-items: center; justify-content: space-between;
}
.list-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
.member-count-text { font-size: 13px; color: var(--text-muted); }
/* 成员表格 */
.members-table { width: 100%; }
.members-thead {
display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr 1fr;
padding: 12px 24px;
background: var(--bg-tertiary);
font-size: 12px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.5px;
}
.members-tbody { display: flex; flex-direction: column; }
.member-row {
display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr 1fr;
padding: 16px 24px; align-items: center;
border-bottom: 1px solid rgba(102,126,234,0.06);
transition: background 0.15s;
}
.member-row:hover { background: var(--bg-hover); }
.member-row:last-child { border-bottom: none; }
.m-col { font-size: 13px; color: var(--text-secondary); }
.m-col-user { display: flex; align-items: center; gap: 12px; }
.user-avatar {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 600; font-size: 16px;
flex-shrink: 0;
}
.member-info { min-width: 0; }
.member-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.member-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* 角色标签 */
.role-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 20px;
font-size: 12px; font-weight: 500;
}
.role-icon { font-size: 12px; }
.role-owner { background: linear-gradient(135deg, rgba(240,147,251,0.15), rgba(245,87,108,0.15)); color: #e91e63; }
.role-admin { background: linear-gradient(135deg, rgba(79,172,254,0.15), rgba(0,242,254,0.15)); color: #0288d1; }
.role-developer { background: linear-gradient(135deg, rgba(67,233,123,0.15), rgba(56,249,215,0.15)); color: #2e7d32; }
.role-external { background: linear-gradient(135deg, rgba(255,193,7,0.15), rgba(255,152,0,0.15)); color: #ef6c00; }
/* 外部用户状态标签 */
.ex-status-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 20px;
font-size: 12px; font-weight: 500;
}
.ex-status-active { background: linear-gradient(135deg, rgba(67,233,123,0.15), rgba(56,249,215,0.15)); color: #2e7d32; }
.ex-status-used { background: linear-gradient(135deg, rgba(79,172,254,0.15), rgba(0,242,254,0.15)); color: #0277bd; }
.ex-status-revoked { background: linear-gradient(135deg, rgba(245,87,108,0.15), rgba(244,67,54,0.15)); color: #c62828; }
/* 外部用户权限标签 */
.ex-perm-group { display: flex; flex-direction: column; gap: 6px; }
.ex-perm-line { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
.ex-perm-line-title { font-size: 11px; color: var(--text-muted); margin-right: 4px; }
.ex-perm-chip {
display: inline-block; padding: 2px 8px; border-radius: 12px;
font-size: 11px; font-weight: 500;
background: var(--bg-tertiary); color: var(--text-secondary);
border: 1px solid var(--border-color);
flex-shrink: 0;
}
.ex-perm-chip.region { background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); color: #5e35b1; border-color: rgba(102,126,234,0.2); }
.ex-perm-chip.category { background: linear-gradient(135deg, rgba(0,150,136,0.08), rgba(76,175,80,0.08)); color: #00695c; border-color: rgba(0,150,136,0.2); }
.ex-perm-empty { color: #c62828; font-size: 11px; font-weight: 500; }
/* 外部用户表格 */
.ext-thead {
display: grid; grid-template-columns: 1.3fr 2.2fr 1fr 1.1fr 1.1fr 0.8fr 0.9fr 1fr;
padding: 12px 24px;
background: var(--bg-tertiary);
font-size: 12px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.5px;
}
.ext-row {
display: grid; grid-template-columns: 1.3fr 2.2fr 1fr 1.1fr 1.1fr 0.8fr 0.9fr 1fr;
padding: 16px 24px; align-items: start;
border-bottom: 1px solid rgba(102,126,234,0.06);
transition: background 0.15s;
}
.ext-row:hover { background: var(--bg-hover); }
.ext-row:last-child { border-bottom: none; }
.ext-col { font-size: 13px; color: var(--text-secondary); }
.ext-col-company { font-weight: 600; color: var(--text-primary); }
.ext-col-user { display: flex; align-items: center; gap: 10px; }
.ext-col-code { font-family: 'Courier New', monospace; font-weight: 600; letter-spacing: 0.5px; color: var(--text-primary); }
.ext-invite-empty {
color: var(--text-muted); font-size: 12px; font-style: italic;
}
/* 列表头操作区 */
.list-header-right { display: flex; align-items: center; gap: 12px; }
.btn-add-small {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 14px; border-radius: 8px;
background: linear-gradient(135deg, #667eea, #764ba2); color: #fff;
border: none; font-size: 13px; font-weight: 500; cursor: pointer;
transition: all 0.15s;
box-shadow: 0 2px 8px rgba(102,126,234,0.25);
}
.btn-add-small:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(102,126,234,0.35); }
.btn-add-small-icon { font-size: 16px; font-weight: 700; line-height: 1; }
.role-select {
padding: 5px 10px; border: 1px solid var(--border-color);
border-radius: 6px; font-size: 12px;
background: var(--bg-secondary); color: var(--text-primary);
cursor: pointer;
}
.role-select:focus { outline: none; border-color: var(--accent); }
/* 操作按钮 */
.action-btns { display: flex; gap: 8px; }
.action-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 12px; border-radius: 6px;
font-size: 12px; border: 1px solid var(--border-color);
background: var(--bg-secondary); color: var(--text-secondary);
cursor: pointer; transition: all 0.15s;
}
.action-btn:hover { background: var(--bg-hover); }
.action-perm:hover { border-color: var(--accent); color: var(--accent-text); }
.action-delete:hover { border-color: #dc3545; color: #dc3545; }
.action-disabled { color: var(--text-muted); }
/* 空状态 */
.empty-state {
padding: 60px 24px; text-align: center;
}
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.empty-desc { font-size: 13px; color: var(--text-muted); }
/* 图片预览 */
.image-viewer {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.9); z-index: 2000;
display: none; align-items: center; justify-content: center;
animation: fadeIn 0.2s;
}
.image-viewer.open { display: flex; }
.image-viewer img {
max-width: 90vw; max-height: 85vh;
object-fit: contain; border-radius: 8px;
}
.image-viewer-close {
position: fixed; top: 16px; right: 16px;
width: 36px; height: 36px;
background: rgba(255,255,255,0.15);
color: #fff; font-size: 18px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 2001;
transition: background 0.2s;
}
.image-viewer-close:hover { background: rgba(255,255,255,0.25); }
/* 弹窗 */
.modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5); z-index: 100;
display: flex; align-items: center; justify-content: center;
animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
background: var(--bg-secondary); border-radius: 20px;
width: 480px; max-width: 90vw; max-height: 80vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(102,126,234,0.08);
border: 1px solid rgba(102,126,234,0.06);
animation: slideUp 0.25s ease-out;
overflow: hidden;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
padding: 20px 24px; border-bottom: 1px solid rgba(102,126,234,0.06);
display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.modal-close {
background: none; border: none; font-size: 18px; cursor: pointer;
color: var(--text-muted); padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { padding: 20px 24px; overflow-y: auto; }
/* 权限弹窗 */
.perm-add-section { margin-bottom: 20px; }
.perm-add-label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.perm-add-row { display: flex; gap: 8px; }
.perm-input {
flex: 1; padding: 8px 12px; border: 1px solid var(--border-color);
border-radius: 8px; font-size: 13px; background: var(--bg-primary); color: var(--text-primary);
}
.perm-input:focus { outline: none; border-color: var(--accent); }
.perm-select {
padding: 8px 36px 8px 12px;
border: 1px solid var(--border-color);
border-radius: 8px; font-size: 13px; background: var(--bg-primary); color: var(--text-primary);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
}
.perm-list-section { border-top: 1px solid rgba(102,126,234,0.06); padding-top: 16px; }
.perm-list-header {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px;
}
.perm-count { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.perm-empty {
text-align: center; padding: 30px 0; color: var(--text-muted);
}
.perm-empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }
.perm-list { display: flex; flex-direction: column; gap: 8px; }
.perm-item {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px; background: var(--bg-primary);
border: 1px solid rgba(102,126,234,0.06); border-radius: 12px;
transition: all 0.15s;
}
.perm-item:hover { border-color: rgba(102,126,234,0.12); background: var(--bg-hover); }
.perm-item-left { display: flex; align-items: center; gap: 12px; }
.perm-table-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.perm-badge {
padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500;
}
.perm-badge.read { background: rgba(33,150,243,0.1); color: #1976d2; }
.perm-badge.readwrite { background: rgba(76,175,80,0.1); color: #388e3c; }
.perm-remove-btn {
background: none; border: 1px solid var(--border-color);
padding: 4px 10px; border-radius: 6px; font-size: 12px;
color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.perm-remove-btn:hover { border-color: #dc3545; color: #dc3545; }
/* ===== 设置页（Web 风格） ===== */
.settings-web {
padding: 28px 32px 40px;
box-sizing: border-box;
display: flex; flex-direction: column; gap: 20px;
}
/* 顶部资料横幅卡 */
.settings-hero {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background: var(--bg-secondary);
border: 1px solid rgba(102,126,234,0.06);
border-radius: 22px; padding: 24px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.settings-hero-avatar {
width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
background: var(--accent-gradient); color: #fff;
font-size: 26px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.settings-hero-info { flex: 1; min-width: 220px; }
.settings-hero-name {
font-size: 20px; font-weight: 700; color: var(--text-primary);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.settings-hero-email {
font-size: 13px; color: var(--text-muted); margin-top: 4px;
word-break: break-all;
}
.settings-hero-meta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.settings-hero-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 999px;
font-size: 11.5px; font-weight: 500;
background: var(--bg-tertiary); color: var(--text-secondary);
border: 1px solid var(--border-color);
}
.settings-hero-action { flex-shrink: 0; align-self: flex-start; }
/* 双列卡片网格 */
.settings-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start;
}
.settings-card {
background: var(--bg-secondary);
border: 1px solid rgba(102,126,234,0.06);
border-radius: 22px; overflow: hidden;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.settings-card-head { padding: 20px 24px 8px; }
.settings-card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.settings-card-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.01em; }
.info-row.info-row-block {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.info-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid rgba(102,126,234,0.06);
transition: background 0.12s;
}
.info-row:hover { background: var(--bg-tertiary); }
.info-row:last-child { border-bottom: none; }
.info-row-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
flex-shrink: 0;
min-width: 60px;
}
.info-icon { font-size: 14px; display: inline-flex; align-items: center; }
.info-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.info-row-value {
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
}
.info-row-action {
display: flex;
align-items: center;
gap: 10px;
}
.settings-input {
padding: 0 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 13px;
background: var(--bg-primary);
color: var(--text-primary);
width: 220px;
height: 32px;
box-sizing: border-box;
transition: border-color 0.15s;
}
.settings-input:focus {
outline: none;
border-color: var(--accent);
}
.btn-sm { padding: 7px 14px !important; font-size: 12px !important; line-height: 1.4; }
.info-row-action .settings-input { height: 32px; box-sizing: border-box; }
.info-row-action .btn-sm { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
/* 退出登录按钮（描边） */
.btn.btn-outline {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
box-shadow: none;
}
.btn.btn-outline:hover {
border-color: rgba(102,126,234,0.35);
color: var(--text-primary);
background: var(--bg-tertiary);
transform: none;
}
.btn-danger {
background: linear-gradient(135deg, #f44336, #e91e63);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 12px;
cursor: pointer;
font-weight: 500;
transition: transform 0.15s, box-shadow 0.15s;
flex-shrink: 0;
}
.btn-danger:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(244,67,54,0.3);
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 12px;
font-size: 13px;
cursor: pointer;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
box-shadow: 0 2px 6px rgba(102,126,234,0.22);
-webkit-tap-highlight-color: transparent;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102,126,234,0.32);
filter: brightness(1.02);
}
.btn-primary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(102,126,234,0.22), 0 2px 6px rgba(102,126,234,0.22);
}
.btn-primary:active {
transform: translateY(0) scale(0.985);
box-shadow: 0 1px 3px rgba(102,126,234,0.26);
filter: brightness(0.96);
}
.btn-primary:disabled {
opacity: 0.55; cursor: not-allowed; pointer-events: none;
transform: none; box-shadow: none;
}
/* 角色标签 */
.role-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.role-owner { background: rgba(251,191,36,0.15); color: #d97706; }
.role-admin { background: rgba(102,126,234,0.15); color: #667eea; }
.role-developer { background: rgba(52,211,153,0.15); color: #10b981; }
.role-icon { font-size: 11px; }
.mobile-menu-btn { display: none; }
.sidebar-overlay { display: none; }
.mobile-only { display: none !important; }
.mobile-sheet-overlay { display: none; }
.mobile-action-sheet { display: none; }
.mobile-table-row { display: none; }
/* ===== 大盘 Dashboard ===== */
.dashboard {
padding: 28px 32px 40px;
overflow-y: auto;
height: 100%;
box-sizing: border-box;
}
.dashboard-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.dashboard .stat-card {
background: var(--bg-secondary);
border-radius: 20px;
padding: 20px 22px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
border: 1px solid rgba(102,126,234,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
display: block;
align-items: initial;
gap: initial;
}
.dashboard .stat-card::before { content: none; }
.dashboard .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,126,234,0.10), 0 2px 6px rgba(0,0,0,0.04); border-color: rgba(102,126,234,0.06); }
.dashboard .stat-card-label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 10px; letter-spacing: 0.01em; margin-top: 0; }
.dashboard .stat-card-value { font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; line-height: 1.1; margin-top: 0; }
.dashboard .stat-card-sub { font-size: 12px; color: var(--text-subtle); margin-top: 6px; }
.dashboard .stat-card.accent-blue .stat-card-value { color: #5b6ee8; }
.dashboard .stat-card.accent-green .stat-card-value { color: #059669; }
.dashboard .stat-card.accent-orange .stat-card-value { color: #d97706; }
.dashboard .stat-card.accent-purple .stat-card-value { color: #7c3aed; }
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.dashboard-card {
background: var(--bg-secondary);
border-radius: 22px;
padding: 24px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
border: 1px solid rgba(102,126,234,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
.dashboard-card:hover { box-shadow: 0 6px 20px rgba(102,126,234,0.08), 0 2px 6px rgba(0,0,0,0.04); }
.dashboard-card.wide { grid-column: 1 / -1; }
.dashboard-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.dashboard-card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.dashboard-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.01em; }
.dashboard-card-action {
font-size: 12px; color: var(--accent); background: rgba(102,126,234,0.06);
border: none; cursor: pointer; font-weight: 500; padding: 6px 12px; border-radius: 10px;
white-space: nowrap; transition: background 0.15s ease;
}
.dashboard-card-action:hover { background: rgba(102,126,234,0.12); }
.dashboard-chart { width: 100%; height: 260px; min-height: 260px; }
.dashboard-map { width: 100%; height: auto; min-height: 0; max-height: 520px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.dashboard-map .map-loading-text,
.dashboard-map .map-error-text {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: var(--text-subtle); font-size: 13px; text-align: center; padding: 0 20px;
}
.globe-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.globe-canvas:active { cursor: grabbing; }
.globe-tip {
position: absolute; z-index: 6; display: none; pointer-events: none;
max-width: 60%; padding: 5px 10px; border-radius: 8px;
font-size: 12px; line-height: 1.5; white-space: nowrap;
color: var(--text-primary); background: var(--bg-secondary);
border: 1px solid var(--border-color);
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.globe-tip b { color: var(--accent-text); }
/* 中宽屏：两卡片并排时饼图与图例空间不足，改为饼图占满整行、更新周期换行 */
@media (max-width: 1200px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
.recommend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.recommend-item {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: var(--bg-tertiary);
border: 1px solid transparent;
border-radius: 16px;
cursor: pointer;
transition: all 0.2s ease;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
text-align: left;
width: 100%;
}
.recommend-item:hover {
background: rgba(102,126,234,0.05);
border-color: rgba(102,126,234,0.10);
transform: translateY(-1px);
}
.recommend-item .recommend-icon { font-size: 20px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(102,126,234,0.08); border-radius: 12px; }
.recommend-item .recommend-text { flex: 1; min-width: 0; }
.recommend-item .recommend-text .recommend-title { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.recommend-item .recommend-text .recommend-desc { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recommend-item .recommend-arrow { color: var(--text-subtle); font-size: 14px; flex-shrink: 0; transition: transform 0.2s ease, color 0.2s ease; }
.recommend-item:hover .recommend-arrow { color: var(--accent); transform: translateX(2px); }
.dashboard-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.dashboard-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.dashboard-empty-text { font-size: 14px; }
.followup-banner {
position: relative;
overflow: hidden;
border-radius: 22px;
padding: 20px 24px;
margin-bottom: 24px;
border: 1px solid rgba(102,126,234,0.10);
background: var(--bg-secondary);
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.followup-banner.state-urgent {
background: linear-gradient(135deg, rgba(248,113,113,0.12) 0%, var(--bg-secondary) 55%);
border-color: rgba(248,113,113,0.35);
box-shadow: 0 4px 18px rgba(248,113,113,0.10);
}
.followup-banner.state-warn {
background: linear-gradient(135deg, rgba(251,191,36,0.12) 0%, var(--bg-secondary) 55%);
border-color: rgba(251,191,36,0.35);
}
.followup-banner.state-ok {
background: linear-gradient(135deg, rgba(52,211,153,0.10) 0%, var(--bg-secondary) 55%);
border-color: rgba(52,211,153,0.28);
}
.followup-banner-header { display: flex; align-items: center; gap: 14px; }
.followup-banner-title { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.followup-banner-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.followup-counts { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.followup-count {
display: flex; flex-direction: column; align-items: center; gap: 2px;
min-width: 86px; padding: 8px 14px; border-radius: 14px; cursor: pointer;
background: var(--bg-tertiary); border: 1px solid transparent;
transition: all 0.15s ease; font-family: inherit;
}
.followup-count:hover { transform: translateY(-1px); border-color: rgba(102,126,234,0.18); }
.followup-count-value { font-size: 21px; font-weight: 700; line-height: 1.15; }
.followup-count-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.followup-count.danger .followup-count-value { color: #dc2626; }
.followup-count.warning .followup-count-value { color: #d97706; }
.followup-count.info .followup-count-value { color: #5b6ee8; }
.followup-count.zero .followup-count-value { color: var(--text-subtle); }
.followup-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.followup-item {
display: flex; align-items: center; gap: 12px; padding: 11px 14px;
background: var(--bg-tertiary); border: 1px solid transparent; border-radius: 14px;
cursor: pointer; transition: all 0.15s ease; font-size: 13px;
color: var(--text-primary); text-align: left; width: 100%; font-family: inherit;
}
.followup-item:hover { border-color: rgba(102,126,234,0.18); transform: translateY(-1px); }
.followup-item-name { font-weight: 600; font-size: 14px; flex-shrink: 1; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.followup-item-company { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.followup-item-tag { font-size: 11px; padding: 3px 10px; border-radius: 999px; flex-shrink: 0; font-weight: 500; white-space: nowrap; }
.followup-item-time { font-size: 12px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.followup-item-time.overdue { color: #dc2626; font-weight: 600; }
.followup-more { text-align: center; margin-top: 10px; }
.followup-more button {
font-size: 12px; color: var(--accent); background: none; border: none; cursor: pointer;
font-weight: 500; padding: 4px 10px; border-radius: 8px; font-family: inherit;
}
.followup-more button:hover { background: rgba(102,126,234,0.08); }
@media (max-width: 768px) {
.followup-banner { padding: 16px 16px 16px 21px; border-radius: 18px; margin-bottom: 16px; }
.followup-banner-header { flex-wrap: wrap; gap: 10px; }
.followup-counts { width: 100%; margin-left: 0; }
.followup-count { flex: 1; min-width: 0; padding: 7px 8px; }
.followup-count-value { font-size: 18px; }
.followup-item { padding: 10px 12px; gap: 10px; }
.followup-item-name { max-width: 44vw; }
.followup-item-company { display: none; }
}
@media (max-width: 768px) {
.dashboard { padding: 16px 14px 28px; }
.dashboard-stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.dashboard .stat-card { padding: 16px 16px 16px 20px; border-radius: 18px; display: block; align-items: initial; gap: initial; }
.dashboard .stat-card-label { font-size: 11px; margin-bottom: 8px; }
.dashboard .stat-card-value { font-size: 24px; }
.dashboard .stat-card-sub { font-size: 11px; margin-top: 4px; }
.dashboard-grid { grid-template-columns: 1fr; gap: 14px; }
.dashboard-card { padding: 18px; border-radius: 18px; }
.dashboard-card-header { margin-bottom: 14px; }
.dashboard-card-title { font-size: 15px; }
.dashboard-chart { height: 220px; min-height: 220px; }
/* 手机端饼图改为上图下横向图例，需要更高画布避免重叠 */
#category-pie-chart { height: 248px; min-height: 248px; }
.recommend-list { grid-template-columns: 1fr; gap: 10px; }
.recommend-item { padding: 14px 16px; border-radius: 14px; min-height: 60px; }
.recommend-item .recommend-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
}
/* 响应式 */
@media (max-width: 768px) {
.settings-cards {
grid-template-columns: 1fr; gap: 14px;
}
}
@media (max-width: 768px) {
.layout { position: relative; }
.mobile-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: transparent;
border: none;
border-radius: 10px;
color: var(--text-secondary);
cursor: pointer;
margin-right: 10px;
flex-shrink: 0;
transition: transform 0.1s ease, color 0.15s;
-webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:hover { color: var(--accent-text); }
.mobile-menu-btn:active {
transform: scale(0.92);
}
.mobile-menu-btn svg { width: 22px; height: 22px; }
.mobile-only { display: inline-flex !important; }
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.25s ease;
box-shadow: 4px 0 20px rgba(0,0,0,0.25);
width: 280px;
flex: none;
display: none;
}
.sidebar.open {
display: flex;
transform: translateX(0);
}
.sidebar-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sidebar-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.layout { width: 100vw; max-width: 100vw; height: 100vh; overflow-x: hidden; }
.main { flex: 1 1 auto; min-width: 0; max-width: 100vw; overflow: hidden; border-radius: 0 !important; }
.page-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.leads-container { width: 100%; max-width: 100%; padding: 0 12px 12px; box-sizing: border-box; overflow: visible; }
.exh-wrap { padding: 0 12px 12px; }
.exh-grid { padding: 0 6px 8px; }
.leads-main { width: 100%; max-width: 100%; min-width: 0; overflow: visible; gap: 0; }
.leads-tab-bar { width: 100%; max-width: 100%; box-sizing: border-box; }
.page-header {
padding: 0 14px;
min-height: 56px;
height: 56px;
}
.page-header > div:first-child {
min-width: 0;
}
.page-title { font-size: 14px; }
.page-sub { display: none; }
.theme-toggle { width: 30px; height: 30px; }
.chat-input-bar { padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.composer-card { padding: 12px 12px 8px; border-radius: 18px; }
.toolbar-btn { width: 32px; height: 32px; border-radius: 8px; }
.toolbar-btn svg { width: 18px; height: 18px; }
textarea.msg-text { min-height: 24px; font-size: 15px; padding: 2px 0 8px; line-height: 1.5; }
.btn-send { width: 34px; height: 34px; border-radius: 10px; }
.btn-send svg { width: 17px; height: 17px; }
.chat-list { padding: 14px 12px; }
.msg-row { gap: 8px; margin-bottom: 14px; }
.avatar { width: 28px; height: 28px; font-size: 12px; }
.modal-box { width: 94%; max-width: none; max-height: 90vh; border-radius: 12px; }
.modal-body { padding: 14px; max-height: calc(90vh - 110px); }
.modal-footer { padding: 12px 14px; }
.preview-table th, .preview-table td { padding: 8px; font-size: 12px; }
.list-wrap { padding: 14px 12px; }
table.list { display: block; overflow-x: auto; white-space: nowrap; }
.members-page { padding: 14px 12px; gap: 14px; }
.company-code-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; }
.code-card-left { gap: 14px; width: 100%; }
.code-card-icon { width: 48px; height: 48px; font-size: 24px; border-radius: 12px; }
.code-card-value { font-size: 18px; word-break: break-all; }
.company-code-card .btn-primary { width: 100%; justify-content: center; }
.member-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card { padding: 14px; gap: 12px; }
.stat-icon { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }
.stat-value { font-size: 22px; }
.stat-label { font-size: 12px; }
.list-header { padding: 14px 16px; }
.list-title { font-size: 15px; }
.members-table { display: block; overflow-x: auto; }
.members-thead, .member-row { min-width: 600px; grid-template-columns: 1.5fr 0.8fr 1.2fr 0.9fr 1.2fr; padding: 12px 16px; gap: 8px; }
.m-col { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-col-user { white-space: normal; }
.m-col-action { white-space: normal; overflow: visible; }
.m-col-action .action-btns { flex-wrap: wrap; }
.member-sub { display: none; }
.member-name { font-size: 13px; }
.settings-web { padding: 16px 14px 32px; gap: 14px; }
.list-wrap > div[style*="display:flex"] { flex-direction: column; }
.list-wrap > div[style*="display:flex"] .tf { width: 100%; }
.analytics-wrap { flex-direction: column; overflow: hidden; }
.analytics-left {
position: fixed; left: 0; top: 0; bottom: 0; width: 280px;
z-index: 1002; transform: translateX(-100%);
transition: transform 0.25s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.25);
}
.analytics-left.open { transform: translateX(0); }
.analytics-left-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001;
opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.analytics-left-overlay.open { opacity: 1; visibility: visible; }
.analytics-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.mobile-schema-toggle { display: none !important; }
.mobile-table-select { display: none !important; }
.mobile-table-row { display: flex; cursor: default; }
.mobile-table-row .query-row-chips { padding-top: 4px; }
.table-select-mobile {
width: 100%; background: transparent; border: none;
color: var(--text-secondary); padding: 0;
font-size: 12px; font-family: inherit; cursor: pointer;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
padding-right: 18px;
text-align: left;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-select-mobile:focus { outline: none; }
.analytics-query { padding: 12px 12px 12px; background: var(--bg-secondary); border-bottom: none; }
.analytics-results { padding: 12px; }
.chart-type-bar { grid-template-columns: repeat(4, 1fr); margin-top: 10px; margin-bottom: 10px; display: grid !important; }
.chart-type-btn { padding: 6px 4px; font-size: 11px; }
.schema-table-title { font-size: 12px; }
.field-chip { padding: 6px 9px; font-size: 12px; }
.field-chip .type-tag { font-size: 10px; padding: 1px 5px; }
.query-row { padding: 10px 10px; gap: 8px; }
.query-row-label { font-size: 14px; min-width: 42px; padding-top: 4px; }
.query-row-chips { gap: 5px; }
.zone-chip { padding: 4px 8px; font-size: 12px; }
.zone-chip .chip-name { max-width: 80px; }
.zone-chip .filter-val { max-width: 50px; font-size: 10px; }
.filter-row { flex-wrap: wrap; }
.filter-field { min-width: 100px; flex: 1; }
.filter-op { min-width: 60px; }
.filter-value { flex: 1; min-width: 80px; }
.query-toolbar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 0; }
.toolbar-left { flex-wrap: wrap; }
.limit-input { width: 72px; padding: 8px 10px; font-size: 13px; }
.chart-container { height: 280px; }
.analytics-stat-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat-card { padding: 14px; }
.stat-card-icon { width: 32px; height: 32px; font-size: 16px; margin-bottom: 8px; }
.stat-card-value { font-size: 22px; }
.stat-card-label { font-size: 12px; }
.results-table { font-size: 11px; }
.results-table th { text-align: center; padding: 8px 10px; font-size: 10px; }
.results-table th .th-inner { justify-content: center; }
.results-table th .th-sort-indicator { display: none; }
.results-table td { text-align: center; padding: 6px 10px; vertical-align: middle; }
.results-table td .cell-content { -webkit-line-clamp: 2; }
.table-card { padding: 0; }
.table-card-header { padding: 14px 12px; }
.table-card-header .chart-card-title { padding: 0; font-size: 13px; }
.pagination-container { padding: 10px 12px; gap: 2px; }
.pagination-btn { min-width: 28px; height: 28px; padding: 4px 8px; font-size: 11px; }
.pagination-info { margin-left: 8px; font-size: 11px; }
/* 移动端加载状态 */
.query-loading-state { padding: 40px 20px; gap: 10px; }
.query-loading-spinner { width: 36px; height: 36px; border-width: 3px; }
.query-loading-text { font-size: 13px; }
.query-loading-sub { font-size: 11px; }
.empty-state { padding: 40px 20px; }
.empty-state-icon { font-size: 40px; }
/* 移动端底部操作面板 */
.mobile-action-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1003;
background: var(--bg-secondary); border-radius: 20px 20px 0 0;
transform: translateY(100%); transition: transform 0.25s ease;
max-height: 70vh; display: none; flex-direction: column;
box-shadow: 0 -8px 32px rgba(0,0,0,0.12), 0 -2px 8px rgba(102,126,234,0.06);
pointer-events: none;
border: 1px solid rgba(102,126,234,0.06);
border-bottom: none;
}
.mobile-action-sheet.open { transform: translateY(0); display: flex !important; pointer-events: auto; }
.mobile-sheet-header {
padding: 18px 20px; border-bottom: 1px solid rgba(102,126,234,0.06);
display: flex; align-items: center; justify-content: space-between;
}
.mobile-sheet-title { font-size: 15px; font-weight: 600; }
.mobile-sheet-close {
width: 32px; height: 32px; border-radius: 8px;
background: var(--bg-tertiary); border: none; color: var(--text-secondary);
font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.mobile-sheet-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.mobile-sheet-body { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.mobile-sheet-item {
padding: 14px 16px; display: flex; align-items: center; gap: 12px;
cursor: pointer; transition: all 0.15s; border-radius: 10px; margin: 2px 0;
}
.mobile-sheet-item:hover { background: var(--accent-light); color: var(--accent-text); }
.mobile-sheet-item .icon { font-size: 18px; width: 28px; text-align: center; }
.mobile-sheet-item .label { flex: 1; font-size: 14px; }
.mobile-sheet-item .hint { font-size: 12px; color: var(--text-muted); }
.mobile-sheet-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1002;
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-sheet-overlay.open { opacity: 1; visibility: visible; display: block !important; pointer-events: auto; }
.query-row-add {
margin-left: auto; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color);
width: 24px; height: 24px; border-radius: 50%; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0; line-height: 1;
transition: all 0.15s;
}
.query-row-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.query-toggle-bar {
display: flex !important; align-items: flex-start; justify-content: center;
width: 100%; height: 20px; background: var(--bg-primary);
color: var(--text-muted); cursor: pointer; user-select: none;
position: relative; flex-shrink: 0;
}
.query-toggle-bar .toggle-arrow {
width: 60px; height: 24px; display: flex; align-items: center; justify-content: center;
background: var(--bg-secondary); border: none;
border-radius: 0 0 14px 14px;
transition: all 0.15s;
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
.query-toggle-bar .toggle-arrow svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.query-toggle-bar .toggle-arrow.up svg { transform: rotate(180deg); }
.query-toggle-bar .toggle-arrow.down svg { transform: rotate(0deg); }
.query-toggle-bar:hover .toggle-arrow { color: var(--accent); }
.detail-panel { display: none !important; }
.detail-panel.open { display: flex !important; width: 90vw; position: fixed; right: 0; top: 0; bottom: 0; z-index: 1001; }
.leads-toggle-bar { display: none !important; }
.leads-filters { display: none !important; }
.leads-tab-bar {
display: flex !important;
align-items: center;
padding: 8px 6px;
gap: 8px;
background: transparent;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.main.leads-page .page-header { z-index: 150; }
.leads-tab-items::-webkit-scrollbar { display: none; }
.leads-tab-item {
padding: 0 14px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: all 0.2s;
border-radius: 16px;
font-weight: 500;
line-height: 32px;
height: 32px;
display: flex;
align-items: center;
-webkit-tap-highlight-color: transparent;
}
.leads-tab-item:active {
transform: scale(0.96);
}
.leads-tab-item.active {
color: var(--text-inverse);
font-weight: 600;
background: var(--accent-gradient);
box-shadow: 0 2px 8px rgba(102,126,234,0.30);
}
.leads-tab-item.has-filter::before {
content: '';
position: absolute;
top: 6px;
right: 8px;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
}
.leads-tab-item.active.has-filter::before {
background: #fff;
}
.leads-search-box {
/* Styles inherited from global */
}
.leads-search-box input {
/* Styles inherited from global */
}
.leads-search-box input:focus,
.leads-search-box input:focus-visible {
outline: none;
outline-offset: 0;
}
.leads-search-toggle {
/* Styles inherited from global */
}
.leads-search-toggle:active {
transform: scale(0.92);
}
.leads-search-toggle:hover {
background: var(--bg-hover);
}
.leads-search-toggle svg { width: 16px; height: 16px; color: var(--text-secondary); position: absolute; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.leads-search-toggle .icon-close { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.leads-search-toggle.has-value::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
border: 2px solid var(--bg-secondary);
}
.leads-tab-bar.search-mode .leads-search-toggle {
background: var(--accent-gradient);
box-shadow: 0 2px 8px rgba(102,126,234,0.30);
}
.leads-tab-bar.search-mode .leads-search-toggle .icon-search {
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
.leads-tab-bar.search-mode .leads-search-toggle .icon-close {
opacity: 1;
transform: rotate(0deg) scale(1);
color: #fff;
}
.leads-filter-drawer-overlay {
display: block !important;
position: fixed;
inset: 0;
background: rgba(0,0,0,0);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.leads-filter-drawer-overlay.open {
opacity: 1;
visibility: visible;
background: rgba(0,0,0,0.5);
}
.leads-filter-drawer {
display: flex !important;
flex-direction: column;
position: fixed;
bottom: -100%;
left: 0;
right: 0;
background: var(--bg-secondary);
border-radius: 20px 20px 0 0;
z-index: 1000;
max-height: 70vh;
transition: bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 -8px 32px rgba(0,0,0,0.12), 0 -2px 8px rgba(102,126,234,0.06);
border: 1px solid rgba(102,126,234,0.06);
border-bottom: none;
}
.leads-filter-drawer.open { bottom: 0; }
.leads-drawer-header {
padding: 18px 22px;
border-bottom: 1px solid rgba(102,126,234,0.06);
display: flex;
align-items: center;
justify-content: space-between;
}
.leads-drawer-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.leads-drawer-close { font-size: 20px; color: var(--text-muted); cursor: pointer; }
.leads-drawer-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.leads-drawer-body .filters-section { margin-bottom: 20px; }
.leads-drawer-body .filters-section:last-child { margin-bottom: 0; }
.leads-drawer-body .filters-section-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid var(--accent);
}
.leads-drawer-body .filters-row { gap: 16px; }
.leads-drawer-body .filter-select-wrap { flex: 1; min-width: 140px; }
.leads-drawer-body .filter-select-wrap select {
width: 100%;
padding: 10px 14px;
font-size: 14px;
}
.leads-drawer-body .filter-checkbox {
padding: 10px 12px;
font-size: 14px;
border-radius: 10px;
border: 1px solid var(--border-color);
}
.leads-drawer-body .filter-checkbox input { width: 18px; height: 18px; }
.leads-drawer-body .cs-tri { width: 20px; height: 20px; }
.leads-drawer-body .cs-tri svg { width: 13px; height: 13px; }
.drawer-cat-group {
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--bg-secondary);
overflow: hidden;
transition: border-color 0.2s;
}
.drawer-cat-group.open { border-color: var(--accent-border); }
.drawer-cat-l1-row {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
}
.drawer-cat-l1-name {
flex: 1; min-width: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-align: left;
}
.drawer-cat-l1-name em { font-style: normal; color: var(--text-muted); font-size: 11.5px; font-weight: 400; }
.drawer-cat-arrow { padding: 4px; color: var(--text-muted); display: flex; align-items: center; margin-left: auto; }
.drawer-cat-arrow svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.drawer-cat-arrow.open svg { transform: rotate(180deg); }
.drawer-cat-children {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.28s ease;
}
.drawer-cat-group.open .drawer-cat-children { grid-template-rows: 1fr; }
.drawer-cat-chips {
overflow: hidden;
min-height: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 12px;
opacity: 0;
transition: opacity 0.2s ease 0.05s, padding 0.28s ease;
}
.drawer-cat-group.open .drawer-cat-chips { opacity: 1; padding: 0 12px 12px; }
.drawer-chip {
border: 1px solid var(--border-color);
background: var(--bg-primary);
color: var(--text-secondary);
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
line-height: 1;
font-family: inherit;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
}
.drawer-chip:active { transform: scale(0.96); }
.drawer-chip.on {
background: var(--accent-gradient);
border-color: transparent;
color: #fff;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}
.leads-drawer-body .filter-range-wrap { width: 100%; }
.leads-drawer-body .filter-range-inputs { flex: 1; }
.leads-drawer-body .filter-range-inputs input {
width: 100%;
padding: 10px 14px;
font-size: 14px;
}
.leads-drawer-footer {
padding: 12px 20px;
border-top: 1px solid var(--border-color);
display: flex;
gap: 12px;
background: var(--bg-secondary);
}
.leads-drawer-footer button {
flex: 1;
padding: 12px;
font-size: 14px;
font-weight: 500;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.leads-drawer-footer .btn-reset {
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-secondary);
}
.leads-drawer-footer .btn-reset:hover { background: var(--bg-hover); }
.leads-drawer-footer .btn-confirm {
background: var(--accent-gradient);
border: none;
color: white;
}
.leads-drawer-footer .btn-confirm:hover { opacity: 0.9; }
.leads-detail-overlay { display: flex; }
.info-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.info-row-action { width: 100%; }
.settings-input { flex: 1; width: auto; }
.btn-danger { width: 100%; }
.settings-hero { padding: 18px 20px; gap: 14px; }
.settings-hero-avatar { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
.settings-hero-name { font-size: 18px; }
.settings-hero-action { align-self: stretch; }
.settings-hero-action .btn { width: 100%; }
.settings-card-head { padding: 16px 18px 8px; }
.settings-card .info-row { padding: 14px 18px; }
.leads-grid { padding: 0 6px 8px; flex-shrink: 0; }
.leads-pagination { padding: 16px 6px; gap: 12px; justify-content: center; }
.leads-pagination .pagination-info { font-size: 12px; width: 100%; text-align: center; }
.leads-pagination .pagination-controls { margin-left: 0; justify-content: center; gap: 8px; }
.leads-pagination .page-btn { min-width: 38px; height: 38px; padding: 0 12px; font-size: 14px; border-radius: 20px; }
.leads-pagination .page-btn svg { width: 18px; height: 18px; }
.leads-table { display: none; }
.leads-mobile-cards { display: flex; flex-direction: column; gap: 10px; }
/* Hide desktop toolbar on mobile, show mobile bottom bar */
.leads-select-toolbar { display: none !important; }
.leads-mobile-select-bar.active {
display: flex !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 14px 16px;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
align-items: center;
gap: 12px;
z-index: 100;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.leads-mobile-select-all {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
flex-shrink: 0;
}
.leads-mobile-select-all input[type="checkbox"] { display: none; }
.leads-mobile-select-all .custom-check {
width: 20px; height: 20px;
border: 2px solid var(--border-color);
border-radius: 5px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-primary);
transition: all 0.2s;
}
.leads-mobile-select-all input:checked + .custom-check {
background: linear-gradient(135deg, var(--accent) 0%, #764ba2 100%);
border-color: var(--accent);
}
.leads-mobile-select-all input:checked + .custom-check::after {
content: '';
width: 5px; height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
.leads-mobile-select-all .select-all-text {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
}
.leads-mobile-select-count {
font-size: 14px;
color: var(--text-secondary);
flex: 1;
min-width: 0;
}
.leads-mobile-select-count span {
font-weight: 600;
color: var(--accent);
}
.leads-mobile-select-bar .btn-leads-select {
padding: 10px 20px;
font-size: 14px;
border-radius: 10px;
white-space: nowrap;
}
body.leads-select-mode .leads-container {
padding-bottom: 80px;
}
.lead-mobile-card {
background: var(--bg-secondary);
border-radius: 16px;
padding: 16px 18px;
box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02);
border: 1px solid rgba(102,126,234,0.06);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lead-mobile-card:active { transform: scale(0.98); }
.lead-mobile-card:hover { box-shadow: 0 4px 14px rgba(102,126,234,0.08), 0 2px 4px rgba(0,0,0,0.03); }
.lead-mobile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.lead-mobile-name {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lead-mobile-contact-count {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
margin-left: 8px;
}
.lead-mobile-tags-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.lead-mobile-tags {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.lead-mobile-tag {
font-size: 11px;
padding: 2px 8px;
background: var(--chip-bg);
border-radius: 6px;
color: var(--text-muted);
}
.lead-mobile-meta {
display: flex;
gap: 10px;
font-size: 11px;
color: var(--text-subtle);
}
.lead-mobile-meta-item { display: inline-flex; align-items: center; gap: 2px; }
.lead-mobile-meta-item svg { width: 12px; height: 12px; }
.lead-mobile-sub-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
margin-bottom: 6px;
}
.lead-mobile-annual {
color: var(--text-muted);
font-weight: 400;
}
.lead-mobile-update-date {
color: var(--text-muted);
}
.lead-mobile-section {
flex: 1;
min-width: 0;
}
.lead-mobile-section-content {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
.lead-mobile-product-item {
display: inline-block;
font-size: 11px;
padding: 3px 8px;
background: var(--bg-tertiary);
border-radius: 6px;
color: var(--text-secondary);
margin: 0 4px 4px 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lead-mobile-product-item:only-child {
display: block;
margin: 0;
background: transparent;
padding: 0;
color: var(--text-secondary);
font-size: 12px;
}
}
/* ===== Customer Tracking ===== */
.tracking-container { padding: 0 20px 20px; max-width: 100%; width: 100%; margin: 0 auto; box-sizing: border-box; overflow-x: clip; }
/* 顶部筛选卡统一复用 .leads-filters / .leads-search / .filters-row 规范，不再单独定义 */
/* tracking 自定义下拉：触发器外观与 .custom-select-trigger 统一，菜单主题对齐 .custom-select-menu */
.tsel { position: relative; }
.tsel-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; height: 40px; box-sizing: border-box; padding: 9px 14px; border: 1px solid rgba(102,126,234,0.10); border-radius: 10px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; cursor: pointer; outline: none; text-align: left; white-space: nowrap; overflow: hidden; transition: all 0.15s; }
.tsel-trigger:hover { border-color: var(--accent); }
.tsel.open .tsel-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102,126,234,0.10); }
.tsel-arrow { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; }
.tsel.open .tsel-arrow { transform: rotate(180deg); }
.tsel-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; max-width: 280px; z-index: 10010; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05); padding: 6px; max-height: 260px; overflow-y: auto; box-sizing: border-box; }
.tsel-menu.open { display: block; }
.tsel-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text-primary); white-space: nowrap; transition: background 0.1s; }
.tsel-option:hover { background: var(--bg-hover); }
.tsel-option.selected { background: rgba(102,126,234,0.12); color: var(--accent); font-weight: 500; }
.tsel-option[data-value="__add__"] { color: var(--accent); font-weight: 500; }
.tsel-filter { min-width: 130px; flex: 0 0 auto; }
.tracking-list { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; box-sizing: border-box; }
.tracking-desktop-view { width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; }
.tracking-mobile-view { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; box-sizing: border-box; }
@media (min-width: 769px) { .tracking-mobile-view { display: none; } }
.tracking-fab {
position: fixed; right: 20px; bottom: 24px; z-index: 900;
width: 54px; height: 54px; border-radius: 50%;
background: var(--accent-gradient); color: #fff; border: none; cursor: pointer;
align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(102,126,234,0.35);
transition: transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.tracking-fab:active { transform: scale(0.92); }
.tracking-fab svg { width: 24px; height: 24px; }
.tracking-table col.col-tracking-customer { width: 230px; }
.tracking-table col.col-tracking-country { width: 110px; }
.tracking-table col.col-tracking-product { width: 500px; min-width: 500px; }
.tracking-table col.col-tracking-level { width: 80px; }
.tracking-table col.col-tracking-status { width: 100px; }
.tracking-table col.col-tracking-last { width: 110px; }
.tracking-table col.col-tracking-next { width: 130px; }
.tracking-table td { vertical-align: middle; }
.tracking-card { padding: 16px; border-radius: 16px; background: var(--bg-secondary); border: 1px solid rgba(102,126,234,0.06); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.2s; overflow: hidden; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; box-shadow: 0 1px 3px rgba(102,126,234,0.04), 0 1px 2px rgba(0,0,0,0.02); }
.tracking-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(102,126,234,0.08), 0 2px 4px rgba(0,0,0,0.03); }
.tracking-card:active { transform: scale(0.98); }
.tracking-card-header { display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 8px; gap: 10px; width: 100%; min-width: 0; box-sizing: border-box; }
.tracking-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, rgba(102,126,234,0.12) 0%, rgba(118,75,162,0.12) 100%); color: var(--accent-text); font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tracking-card-customer { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.tracking-country-pill { display: inline-block; font-size: 11px; padding: 2px 8px; background: var(--chip-bg); border-radius: 6px; color: var(--text-muted); line-height: 1.6; margin-bottom: 6px; }
.tracking-card-actions { display: flex; gap: 8px; flex-shrink: 0; }
.tracking-card-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: none;
white-space: nowrap;
transition: all 0.15s;
min-height: 32px;
}
.tracking-card-btn-primary {
background: #007aff;
color: #fff;
}
.tracking-card-btn-primary:hover { background: #0066d6; }
.tracking-card-btn-secondary {
background: #f2f2f7;
color: #000;
border: 0.5px solid #d1d1d6;
}
.tracking-card-btn-secondary:hover { background: #e5e5ea; }
.tracking-card-btn-icon {
width: 14px;
height: 14px;
}
.tracking-card-body { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; }
.tracking-card-field { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; overflow: hidden; }
.tracking-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid rgba(120,120,128,0.18); gap: 8px; width: 100%; min-width: 0; box-sizing: border-box; }
.tracking-card-arrow { color: #c7c7cc; display: flex; align-items: center; transition: color 0.15s; flex-shrink: 0; }
.tracking-card:hover .tracking-card-arrow { color: #007aff; }
.tracking-status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.tracking-status-待跟进 { background: rgba(245,158,11,0.14); color: #b45309; }
.tracking-status-已联系 { background: rgba(59,130,246,0.12); color: #1d4ed8; }
.tracking-status-已回复 { background: rgba(139,92,246,0.12); color: #7c3aed; }
.tracking-status-已结束 { background: rgba(16,185,129,0.12); color: #047857; }
.tracking-status-暂停中 { background: rgba(107,114,128,0.12); color: #4b5563; }
.tracking-level-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; background: rgba(139,92,246,0.12); color: #7c3aed; }
.tracking-overdue { border-color: rgba(239,68,68,0.4); }
.tracking-paused { opacity: 0.7; }
.tracking-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.tracking-empty-icon { font-size: 48px; margin-bottom: 12px; }
.tracking-empty-text { font-size: 14px; }
/* Tracking Form - Apple Style */
.tracking-detail-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.tracking-detail-modal { width: 100%; max-width: 480px; max-height: 92vh; overflow: hidden; background: #fff; border-radius: 22px; display: flex; flex-direction: column; }
.tracking-detail-header { position: sticky; top: 0; flex-shrink: 0; background: #fff; padding: 20px 20px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid #d1d1d6; z-index: 1; }
.tracking-detail-title { font-size: 17px; font-weight: 600; color: #000; letter-spacing: -0.02em; }
.tracking-detail-close { width: 32px; height: 32px; border-radius: 50%; background: transparent; border: none; color: #8e8e93; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; transition: color 0.15s; }
.tracking-detail-close:hover { background: transparent; color: #000; }
.tracking-form-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.tracking-form-section { margin-top: 24px; }
.tracking-form-section-title { font-size: 14px; font-weight: 600; color: #6e6e73; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 8px; padding: 0; border: none; display: block; }
.tracking-form-group { margin-bottom: 12px; }
.tracking-form-label { display: block; font-size: 13px; color: #3c3c43; margin-bottom: 6px; font-weight: 400; }
input.tracking-form-input, select.tracking-form-select {
width: 100%; height: 40px;
padding: 0 14px;
border-radius: 10px;
border: 0.5px solid #d1d1d6;
background: #f2f2f7;
color: #000;
font-size: 14px;
outline: none;
font-family: inherit;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.tracking-form-input:focus, .tracking-form-select:focus {
border-color: #007aff;
background: #fff;
box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}
select.tracking-form-select {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
textarea.tracking-form-textarea {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 0.5px solid #d1d1d6;
background: #f2f2f7;
color: #000;
font-size: 14px;
outline: none;
font-family: inherit;
transition: all 0.15s;
min-height: 80px;
resize: vertical;
box-sizing: border-box;
}
.tracking-form-textarea:focus { border-color: #007aff; background: #fff; box-shadow: 0 0 0 3px rgba(0,122,255,0.15); }
.tracking-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Dynamic category list */
.tracking-category-list { display: flex; flex-direction: column; gap: 8px; }
.tracking-category-item { display: flex; gap: 8px; align-items: center; }
.tracking-category-item .tracking-form-input { flex: 1; }
.tracking-category-remove { width: 32px; height: 32px; border-radius: 50%; background: #ffe5e5; border: none; color: #ff3b30; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; transition: all 0.15s; }
.tracking-category-remove:hover { background: #ffd7d7; }
.tracking-category-add { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; border: 0.5px dashed #d1d1d6; background: transparent; color: #007aff; font-size: 15px; cursor: pointer; transition: all 0.15s; margin-top: 8px; }
.tracking-category-add:hover { background: #f2f2f7; border-color: #007aff; }
/* Timeline */
.tracking-timeline { position: relative; padding-left: 20px; }
.tracking-timeline::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: #e5e5ea; }
.tracking-timeline-item { position: relative; padding: 0 0 16px 16px; }
.tracking-timeline-item::before { content: ''; position: absolute; left: -19px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #007aff; }
.tracking-timeline-action { font-size: 14px; font-weight: 500; color: #000; }
.tracking-timeline-note { font-size: 13px; color: #3c3c43; margin-top: 2px; }
.tracking-timeline-time { font-size: 12px; color: #8e8e93; margin-top: 2px; }
/* Actions */
.tracking-detail-actions { display: flex; gap: 10px; margin-top: 0; padding: 16px 20px; border-top: 0.5px solid #d1d1d6; flex-shrink: 0; background: inherit; }
.tracking-detail-actions .btn-primary { flex: 1; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.15s; box-shadow: 0 4px 12px rgba(102,126,234,0.35); }
.tracking-detail-actions .btn-primary:hover { filter: brightness(1.05); }
.tracking-detail-actions .btn-secondary { height: 44px; padding: 0 18px; border-radius: 12px; background: #f2f2f7; color: #000; border: none; font-size: 16px; font-weight: 400; cursor: pointer; transition: all 0.15s; }
.tracking-detail-actions .btn-secondary:hover { background: #e5e5ea; }
.tracking-detail-actions .btn-danger { flex: 1; height: 44px; padding: 0 18px; border-radius: 12px; background: transparent; color: #ff3b30; border: none; font-size: 16px; font-weight: 400; cursor: pointer; transition: all 0.15s; }
.tracking-detail-actions .btn-danger:hover { background: #ffe5e5; }
@media (max-width: 768px) {
.tracking-form-row { grid-template-columns: 1fr; }
.tracking-detail-modal { max-height: 95vh; border-radius: 16px; }
}
/* 跟进详情弹窗夜间模式 */
body.dark .tracking-detail-overlay { background: var(--modal-overlay); }
body.dark .tracking-detail-modal { background: var(--bg-secondary); }
body.dark .tracking-detail-header { background: var(--bg-secondary); border-bottom-color: var(--border-color); }
body.dark .tracking-detail-title { color: var(--text-primary); }
body.dark .tracking-detail-close:hover { color: var(--text-primary); }
body.dark .tracking-form-section-title { color: var(--text-muted); }
body.dark .tracking-form-label { color: var(--text-secondary); }
body.dark input.tracking-form-input, body.dark select.tracking-form-select {
background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary);
}
body.dark input.tracking-form-input::placeholder, body.dark select.tracking-form-select::placeholder { color: var(--text-subtle); }
body.dark .tracking-form-input:focus, body.dark .tracking-form-select:focus { background: var(--bg-primary); border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-shadow); }
body.dark select.tracking-form-select {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238a8ba0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.dark textarea.tracking-form-textarea { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); }
body.dark textarea.tracking-form-textarea::placeholder { color: var(--text-subtle); }
body.dark .tracking-form-textarea:focus { background: var(--bg-primary); border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-shadow); }
body.dark .tracking-timeline::before { background: var(--border-color); }
body.dark .tracking-timeline-item::before { background: var(--bg-secondary); border-color: var(--accent); }
body.dark .tracking-timeline-action { color: var(--text-primary); }
body.dark .tracking-timeline-note { color: var(--text-secondary); }
body.dark .tracking-timeline-time { color: var(--text-muted); }
body.dark .tracking-detail-actions { border-top-color: var(--border-color); }
body.dark .tracking-detail-actions .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark .tracking-detail-actions .btn-secondary:hover { background: var(--bg-hover); }
body.dark .tracking-detail-actions .btn-danger:hover { background: var(--error-bg); }
body.dark .tsel-menu { background: var(--bg-secondary); border-color: var(--border-color); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
body.dark .tsel-option:hover { background: var(--bg-hover); }
body.dark .tsel-option.selected { color: #fff; }
body.dark .tsel-option[data-value="__add__"] { color: var(--accent-text); }
body.dark .tsel-arrow { color: var(--text-muted); }
.tracking-import-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.tracking-import-modal { width: 90%; max-width: 700px; max-height: 80vh; background: var(--bg-primary); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.tracking-import-list { overflow-y: auto; flex: 1; margin: 12px 0; border: 1px solid var(--border-color); border-radius: 8px; }
.tracking-import-item { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.15s; }
.tracking-import-item:hover { background: var(--bg-hover); }
.tracking-import-item:last-child { border-bottom: none; }
.tracking-import-checkbox { margin-right: 10px; width: 16px; height: 16px; }
.tracking-import-info { flex: 1; }
.tracking-import-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.tracking-import-meta { font-size: 12px; color: var(--text-muted); }
.tracking-import-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 768px) {
.tracking-form-row { grid-template-columns: 1fr; }
.tracking-desktop-view { display: none; }
.tracking-container { padding: 0 12px 12px !important; width: 100%; box-sizing: border-box; }
.tracking-card { padding: 14px !important; }
.tracking-avatar { width: 40px !important; height: 40px !important; font-size: 16px !important; flex-shrink: 0; }
}
/* Tracking Detail Drawer */
.tracking-drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 999; display: flex; justify-content: flex-end; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s 0.25s; }
.tracking-drawer-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease, visibility 0s 0s; }
.tracking-drawer { width: 640px; max-width: 90vw; height: 100%; background: var(--bg-primary); box-shadow: -4px 0 24px rgba(0,0,0,0.12); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.tracking-drawer-overlay.active .tracking-drawer { transform: translateX(0); }
.tracking-drawer-header { padding: 20px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.tracking-drawer-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.tracking-drawer-close { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-secondary); border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.15s; }
.tracking-drawer-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.tracking-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.tracking-drawer-section { margin-bottom: 20px; }
.tracking-drawer-section-title { font-size: 13px; font-weight: 600; color: #6e6e73; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 10px; padding: 0; border: none; display: block; }
.tracking-drawer-field { display: flex; padding: 8px 0; font-size: 13px; }
.tracking-drawer-field-label { width: 90px; color: var(--text-muted); flex-shrink: 0; }
.tracking-drawer-field-value { flex: 1; color: var(--text-primary); word-break: break-word; }
.tracking-drawer-footer { padding: 16px 20px; border-top: 0.5px solid #d1d1d6; display: flex; align-items: center; gap: 12px; flex-shrink: 0; background: #fff; }
.tracking-drawer-actions { display: flex; gap: 8px; flex: 1; overflow: hidden; border-radius: 8px; }
.tracking-drawer-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 9px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
flex: 1;
}
.tracking-drawer-action-btn svg { width: 16px; height: 16px; }
.tracking-drawer-action-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.tracking-drawer-action-primary:hover {
background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.tracking-drawer-action-secondary {
background: #f2f2f7;
color: #3c3c43;
border: none;
}
.tracking-drawer-action-secondary:hover {
background: #e5e5ea;
}
/* 按钮切换动画 */
.tracking-drawer-actions .tracking-drawer-action-btn {
animation: btn-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tracking-drawer-actions.switching {
animation: container-pulse 0.3s ease;
}
@keyframes btn-fade-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes container-pulse {
0% { transform: scale(1); }
50% { transform: scale(0.98); }
100% { transform: scale(1); }
}
.tracking-drawer-secondary-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tracking-drawer-icon-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: #f2f2f7;
color: #3c3c43;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.tracking-drawer-icon-btn svg { width: 16px; height: 16px; }
.tracking-drawer-icon-btn:hover { background: #e5e5ea; }
.tracking-drawer-icon-btn-danger { color: #ef4444; }
.tracking-drawer-icon-btn-danger:hover { background: #ffe5e5; }
/* 跟进抽屉夜间模式 */
body.dark .tracking-drawer-footer { background: var(--bg-secondary); border-top-color: var(--border-color); }
body.dark .tracking-drawer-action-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark .tracking-drawer-action-secondary:hover { background: var(--bg-hover); }
body.dark .tracking-drawer-icon-btn { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark .tracking-drawer-icon-btn:hover { background: var(--bg-hover); }
body.dark .tracking-drawer-icon-btn-danger:hover { background: var(--error-bg); }
@media (max-width: 768px) {
.tracking-detail-overlay { padding: 0 !important; }
.tracking-detail-modal { width: 100% !important; max-width: 100% !important; max-height: 100vh !important; max-height: 100dvh !important; height: 100vh !important; height: 100dvh !important; border-radius: 0 !important; }
.tracking-detail-actions { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
.tracking-drawer { width: 100% !important; max-width: 100vw !important; border-radius: 0 !important; }
.leads-detail-panel { width: 100% !important; max-width: 100vw !important; border-radius: 0 !important; }
.tracking-import-modal { width: 100% !important; max-width: 100% !important; max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important; }
/* 外部用户：小屏表格允许横向滚动，页面边距对齐客户跟进页 */
.ext-page .members-table { overflow-x: auto; }
.ext-thead, .ext-row { min-width: 1300px; }
.ext-page.members-page { padding: 0 12px 12px !important; gap: 12px !important; }
.ext-page .members-list-card { padding: 10px !important; }
/* 外部用户多选下拉：小屏菜单改为相对定位贴下拉下方，避免溢出屏幕 */
.multi-dropdown-menu { max-height: 46vh; }
.md-chip-label { max-width: 48vw; }
}
/* ===== 外部用户管理页 - 简洁版 ===== */
/* 对齐客户跟进页风格：页面级 padding 16px，工具栏在卡片外，表格在卡片内 */
.ext-page.members-page {
padding: 16px;
gap: 16px;
}
.ext-page .members-list-card {
padding: 12px;
border-radius: 12px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
box-shadow: none;
}
/* 工具栏：搜索框 + 圆形加号按钮一行 */
.ext-toolbar {
display: flex; flex-direction: column;
gap: 12px;
}
.ext-search-row {
display: flex; align-items: center; gap: 10px;
width: 100%;
}
.ext-search-wrap {
position: relative; display: flex; align-items: center;
flex: 1 1 auto; min-width: 0;
}
.ext-search-icon {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--text-subtle);
flex-shrink: 0;
}
.ext-search {
background: var(--bg-secondary); color: var(--text-primary);
border: 1px solid var(--border-color); border-radius: 12px;
padding: 12px 14px 12px 60px !important; font-size: 15px; outline: none;
height: 48px; line-height: 1.4;
transition: border-color .15s;
width: 100%;
font-family: inherit;
box-sizing: border-box;
}
.ext-search::placeholder { color: var(--text-subtle); }
.ext-search:focus {
border-color: #667eea;
}
.ext-select {
background: var(--bg-secondary); color: var(--text-primary);
border: 1px solid var(--border-color); border-radius: 12px;
padding: 0 36px 0 14px; font-size: 15px; outline: none;
height: 44px; line-height: 44px;
cursor: pointer;
flex: 1 1 auto; min-width: 0;
appearance: none; -webkit-appearance: none;
font-family: inherit;
box-sizing: border-box;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
transition: border-color .15s;
}
.ext-select:focus { border-color: #667eea; }
/* 成员类型筛选行 */
.ext-filter-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.ext-filter-row .ext-select { flex: 0 0 auto; width: 200px; }
/* 内部成员标记（外部用户列表中区分展示） */
.ext-internal-tag {
display: inline-block; font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: 6px; margin-left: 6px; vertical-align: middle;
background: linear-gradient(135deg, rgba(102,126,234,.12), rgba(118,75,162,.12));
color: #5b6bd6; border: 1px solid rgba(102,126,234,.28);
white-space: nowrap;
}
/* 圆形新增按钮：蓝紫色渐变 */
.ext-add-btn {
flex: 0 0 auto;
width: 44px; height: 44px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(102,126,234,0.3);
transition: all .15s;
padding: 0;
}
.ext-add-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(102,126,234,0.4); }
.ext-add-btn:active { transform: translateY(0); }
/* 内部成员表：5列，表格宽度撑满容器，各列按比例分配 */
.int-members-table .ext-thead {
display: grid;
grid-template-columns: 1.2fr 100px 90px 140px 110px;
padding: 8px 12px; border-radius: 8px;
background: var(--bg-tertiary);
font-size: 12px; font-weight: 600; color: var(--text-secondary);
margin-bottom: 2px;
white-space: nowrap;
min-width: 620px;
}
.int-members-table .ext-row {
display: grid;
grid-template-columns: 1.2fr 100px 90px 140px 110px;
align-items: center;
padding: 10px 12px; border-radius: 8px;
border: 1px solid transparent;
transition: background .12s;
min-width: 620px;
}
.int-members-table .ext-row:hover { background: var(--bg-tertiary); }
.int-members-table .ext-row + .ext-row { border-top: 1px solid rgba(102,126,234,.05); }
.int-members-table .ext-col,
.int-members-table .ext-thead .m-col {
padding: 0 10px; font-size: 13px; color: var(--text-primary); min-width: 0; line-height: 1.4;
}
.int-members-table .ext-col:first-child,
.int-members-table .ext-thead .m-col:first-child { padding-left: 8px; }
.int-members-table .ext-col:last-child,
.int-members-table .ext-thead .m-col:last-child { padding-right: 8px; }
/* 成员信息列 */
.int-members-table .ext-col-member .member-name {
font-weight: 600; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.int-members-table .ext-col-member .ext-row-sub {
margin-top: 4px; font-size: 11px; color: var(--text-muted); line-height: 1.5;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.int-members-table .ext-user-block { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* 邀请码列：等宽字体，不换行 */
.int-members-table .ext-col-code .ext-code {
font-family: 'Courier New', monospace;
font-weight: 600; letter-spacing: 0.5px;
white-space: nowrap;
color: var(--text-primary);
}
.int-members-table .ext-col-code .ext-code-line {
display: inline-flex; align-items: center; gap: 4px;
}
/* 邮箱列：超出省略 */
.int-members-table .ext-col-email {
max-width: 160px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 操作按钮：不换行，紧凑尺寸 */
.int-members-table .ext-col-actions .action-btns { flex-wrap: nowrap; white-space: nowrap; gap: 4px; }
.int-members-table .ext-col-actions .action-btn {
padding: 3px 8px; font-size: 12px;
}
/* 表格：固定列宽确保表头和行严格对齐，数据权限列占剩余空间 */
.members-table { width: 100%; }
.ext-thead {
display: grid; grid-template-columns: 140px minmax(200px, 1fr) 120px 260px 150px 100px 130px 120px 130px;
padding: 8px 12px; border-radius: 8px;
background: var(--bg-tertiary);
font-size: 12px; font-weight: 600; color: var(--text-secondary);
margin-bottom: 2px;
white-space: nowrap;
}
.ext-row {
display: grid; grid-template-columns: 140px minmax(200px, 1fr) 120px 260px 150px 100px 130px 120px 130px;
align-items: center;
padding: 10px 12px; border-radius: 8px;
border: 1px solid transparent;
transition: background .12s;
}
.ext-row:hover { background: var(--bg-tertiary); }
.ext-row + .ext-row { border-top: 1px solid rgba(102,126,234,.05); }
.ext-col, .ext-thead .m-col { padding: 0 10px; font-size: 13px; color: var(--text-primary); min-width: 0; line-height: 1.4; }
.ext-col:first-child, .ext-thead .m-col:first-child { padding-left: 8px; }
.ext-col:last-child, .ext-thead .m-col:last-child { padding-right: 8px; }
/* 公司名：最大宽度限制，超出省略 */
.ext-col-company .ext-company-name {
max-width: 120px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: block;
}
.ext-company-name { font-weight: 600; color: var(--text-primary); }
.ext-col-company .ext-row-sub { max-width: 120px; }
.ext-row-sub { margin-top: 4px; font-size: 11px; color: var(--text-muted); line-height: 1.5;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-user-block { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ext-meta-muted { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
/* 邮箱列：超出省略 */
.ext-col-email {
max-width: 160px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 邀请码：等宽字体，不换行 */
.ext-col-code .ext-code { white-space: nowrap; }
/* 操作按钮：不换行 */
.ext-col-actions .action-btns { flex-wrap: nowrap; white-space: nowrap; }
/* 到期时间列 */
.ext-col-expires { white-space: nowrap; }
.ext-expires-date { font-size: 13px; color: var(--text-primary); }
.ext-expires-expired { color: #dc2626 !important; font-weight: 600; }
/* 内部成员标识徽章 */
.ext-int-badge {
display: inline-block;
font-size: 10px;
padding: 1px 5px;
border-radius: 4px;
background: #dbeafe;
color: #1d4ed8;
font-weight: 600;
margin-left: 4px;
vertical-align: middle;
line-height: 1.4;
}
/* 统一标签样式：所有 chip/badge 统一 6px 圆角、12px 字、2px 上/下内边距 */
.ex-status-badge,
.ex-perm-chip,
.ext-count {
display: inline-flex; align-items: center;
font-size: 12px; padding: 2px 8px; border-radius: 6px;
border: 1px solid var(--border-color);
line-height: 1.5; font-weight: 500;
}
/* 邀请码：等宽字体，纯文本 */
.ext-code {
font-family: 'Courier New', monospace;
color: var(--text-primary);
letter-spacing: .5px;
font-weight: 600;
font-size: 13px;
}
.ex-status-badge { gap: 6px; }
.ex-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ex-status-active { color: #166534; border-color: rgba(22,163,74,.22); background: rgba(22,163,74,.07); }
.ex-status-used { color: #1e40af; border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.08); }
.ex-status-revoked { color: #991b1b; border-color: rgba(220,38,38,.22); background: rgba(220,38,38,.08); }
/* 版本标签 */
.ex-plan-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; padding: 2px 10px; border-radius: 6px;
border: 1px solid var(--border-color);
line-height: 1.5; font-weight: 500;
}
.ex-plan-pro { color: #1e40af; border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.08); }
.ex-plan-trial { color: #92400e; border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.1); }
.ext-col-plan { display: flex; align-items: center; }
.ext-code-line { position: relative; display: inline-flex; align-items: center; }
.ext-code { padding-right: 4px; }
.ext-copy-btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 4px;
border: none;
background: transparent; color: var(--text-muted);
padding: 0; transition: all .15s;
cursor: pointer;
margin-left: 2px;
}
.ext-copy-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
/* 权限 chips：与统一标签一致 */
.ex-perm-group { display: flex; flex-direction: column; gap: 4px; }
.ex-perm-line { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ex-perm-line-title { font-size: 11px; color: var(--text-muted); width: auto; flex-shrink: 0; line-height: 20px; white-space: nowrap; }
.ex-perm-chip { padding: 2px 8px; flex-shrink: 0; }
.ex-perm-chip.region { color: #4338ca; background: rgba(79,70,229,.07); border-color: rgba(79,70,229,.18); }
.ex-perm-chip.category { color: #7c3aed; background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.2); }
.ex-perm-chip.ex-perm-more { font-weight: 600; border-style: dashed; cursor: default; }
.ex-perm-empty { font-size: 12px; color: var(--text-muted); }
/* 操作按钮：统一尺寸和圆角，横向排列 */
.ext-page .action-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ext-page .action-btn {
padding: 4px 10px; font-size: 12px; border-radius: 6px;
background: var(--bg-tertiary); border: 1px solid var(--border-color);
color: var(--text-secondary); font-weight: 500;
transition: all .12s;
line-height: 1.5;
}
.ext-page .action-btn:hover { color: var(--text-primary); border-color: rgba(102,126,234,.25); }
.ext-page .action-perm:hover { color: #2563eb; border-color: rgba(37,99,235,.3); }
.ext-page .action-delete:hover { color: #dc2626; border-color: rgba(220,38,38,.25); }
/* 空状态 */
.ext-page .empty-illus { opacity: .5; filter: saturate(.2); }
.ext-page .empty-state { padding: 24px 0; }
.ext-page .ext-empty-illus { opacity: 1; filter: none; }
.ext-page .ext-empty-illus svg { width: 80px; height: 80px; display: block; }
.ext-page .ext-empty-text-only { padding: 32px 0; text-align: center; }
.ext-page .ext-empty-text-only .empty-title { font-size: 15px; margin-bottom: 6px; }
.ext-page .ext-empty-text-only .empty-desc { font-size: 13px; color: var(--text-muted); }
/* 翻页区域收紧 */
.ext-page .pagination-wrap { margin-top: 12px; }
/* 弹窗通用 */
.modal-medium { width: 540px; max-width: calc(100vw - 32px); }
.field-row { margin-bottom: 16px; }
.field-label {
display: block; margin-bottom: 6px;
font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.field-required { color: #dc2626; font-weight: 500; }
.field-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 2px; }
.ext-field-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.perm-input {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border-color); border-radius: 8px;
background: var(--bg-secondary); color: var(--text-primary); font-size: 13px;
outline: none; transition: border-color .15s, box-shadow .15s;
font-family: inherit;
}
.perm-input:focus {
border-color: rgba(102,126,234,.45);
box-shadow: 0 0 0 3px rgba(102,126,234,.08);
}
.perm-select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
padding-right: 36px !important;
}
.perm-select:focus {
border-color: rgba(102,126,234,.45);
box-shadow: 0 0 0 3px rgba(102,126,234,.08);
outline: none;
}
/* date 输入框美化 */
input[type="date"].perm-input {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
input[type="date"].perm-input::-webkit-calendar-picker-indicator {
opacity: 0.6;
cursor: pointer;
padding: 2px;
margin-right: -4px;
}
input[type="date"].perm-input::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
.perm-textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.chip-box {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 10px 12px;
border: 1px solid var(--border-color); border-radius: 8px;
background: var(--bg-tertiary);
}
.chip-box-scroll { max-height: 220px; overflow-y: auto; }
.chip-box label {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 11px; border-radius: 999px;
border: 1px solid var(--border-color);
background: var(--bg-secondary);
font-size: 12px; cursor: pointer; color: var(--text-secondary);
transition: all .15s; user-select: none;
}
.chip-box label:hover { color: var(--text-primary); border-color: rgba(102,126,234,.2); }
.chip-box label input { margin: 0; cursor: pointer; accent-color: #667eea; }
.chip-box label:has(input:checked) {
color: #5b21b6;
background: rgba(102,126,234,.09);
border-color: rgba(102,126,234,.3);
}
/* ===== 多选下拉框（大区 / 一级品类）：已选 chip 显示在选择框内部，展开后逐项勾选 ===== */
.multi-dropdown {
position: relative;
width: 100%;
}
.multi-dropdown-trigger {
display: flex; align-items: center; gap: 8px;
min-height: 40px;
padding: 6px 36px 6px 10px;
border: 1px solid var(--border-color); border-radius: 8px;
background: var(--bg-secondary);
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
position: relative;
flex-wrap: wrap;
}
.multi-dropdown-trigger:hover { border-color: rgba(102,126,234,.25); }
.multi-dropdown.is-open .multi-dropdown-trigger {
border-color: rgba(102,126,234,.55);
box-shadow: 0 0 0 3px rgba(102,126,234,.10);
}
.multi-dropdown-chevron {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
color: var(--text-subtle); pointer-events: none;
transition: transform .2s ease;
}
.multi-dropdown.is-open .multi-dropdown-chevron { transform: translateY(-50%) rotate(180deg); }
.multi-dropdown-placeholder {
font-size: 13px; color: var(--text-subtle);
padding: 2px 2px;
}
.multi-dropdown-empty-hint {
font-size: 12px; color: var(--text-muted);
padding: 2px 2px; line-height: 1.55;
}
.md-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 4px 2px 10px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(102,126,234,.10), rgba(118,75,162,.10));
color: #5b21b6;
border: 1px solid rgba(102,126,234,.28);
font-size: 12px; font-weight: 500;
line-height: 1.4;
max-width: 100%;
}
.md-chip-label {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 180px;
}
.md-chip-remove {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border: none; background: transparent;
color: #5b21b6; cursor: pointer; border-radius: 50%;
padding: 0;
}
.md-chip-remove:hover { background: rgba(118,75,162,.18); color: #3b0764; }
.md-chip-count {
padding: 2px 9px;
border-radius: 999px;
background: rgba(102,126,234,.10);
color: #5b21b6;
border: 1px solid rgba(102,126,234,.2);
font-size: 12px; font-weight: 600;
}
.multi-dropdown-menu {
position: absolute; z-index: 60;
left: 0; right: 0; top: calc(100% + 6px);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(102,126,234,.06);
overflow: hidden;
display: none;
flex-direction: column;
max-height: 300px;
}
.multi-dropdown.is-open .multi-dropdown-menu { display: flex; }
.md-menu-search {
padding: 10px 12px 8px;
border-bottom: 1px solid rgba(102,126,234,.06);
}
.md-menu-search input {
width: 100%; padding: 7px 10px;
border: 1px solid var(--border-color); border-radius: 10px;
background: var(--bg-primary);
font-size: 13px; outline: none; color: var(--text-primary);
font-family: inherit;
}
.md-menu-search input:focus {
border-color: rgba(102,126,234,.4);
box-shadow: 0 0 0 3px rgba(102,126,234,.08);
}
.md-menu-list {
flex: 1 1 auto;
overflow-y: auto;
padding: 4px 4px 8px;
}
.md-menu-item {
display: flex; align-items: center; justify-content: flex-start; gap: 10px;
padding: 9px 12px;
border-radius: 10px;
cursor: pointer;
font-size: 14px; color: var(--text-primary);
user-select: none;
transition: background .12s;
min-height: 40px;
}
.md-menu-item + .md-menu-item { margin-top: 2px; }
.md-menu-item:hover { background: var(--bg-tertiary); }
.md-menu-item.is-checked {
background: linear-gradient(135deg, rgba(102,126,234,.10), rgba(118,75,162,.08));
color: #5b21b6; font-weight: 500;
}
/* checkbox 外层固定宽高的容器：强制左对齐 + 垂直居中，避免 checkbox 在行内飘移 */
.md-menu-item-checkwrap {
flex: 0 0 22px;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
margin-right: 2px;
}
.md-menu-item input { margin: 0; padding: 0; cursor: pointer; accent-color: #667eea; width: 18px; height: 18px; }
/* 文字区：占剩余空间，单行省略号（避免文字超长把 checkbox 顶到右边） */
.md-menu-item-label {
flex: 1 1 auto;
min-width: 0;
display: inline-block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.4;
}
.md-menu-empty {
padding: 22px 12px; text-align: center;
font-size: 12px; color: var(--text-muted); line-height: 1.6;
}
.md-menu-footer {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 12px;
border-top: 1px solid rgba(102,126,234,.06);
background: var(--bg-tertiary);
}
.md-menu-footer-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.md-link-btn {
background: transparent; border: none; cursor: pointer;
color: var(--accent-text);
font-size: 12px; font-weight: 600;
padding: 4px 8px; border-radius: 8px;
}
.md-link-btn:hover { background: rgba(102,126,234,.10); }
.md-menu-footer-count { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.modal-footer {
padding: 14px 22px; border-top: 1px solid rgba(102,126,234,.06);
display: flex; justify-content: flex-end; gap: 10px;
}
.modal-close {
background: transparent; border: none; color: var(--text-secondary);
width: 30px; height: 30px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s; padding: 0;
}
.modal-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
/* ===== 通知管理 ===== */
.notice-form-card {
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-radius: 14px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.notice-form-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; }
.notice-field { margin-bottom: 12px; }
.notice-field-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.notice-form-card .notice-input, .notice-form-card .notice-textarea {
width: 100%; box-sizing: border-box; padding: 10px 12px;
border: 1px solid var(--border-color); border-radius: 10px;
background: var(--bg-tertiary); color: var(--text-primary);
font-size: 13px; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.notice-form-card .notice-input:focus, .notice-form-card .notice-textarea:focus {
outline: none; border-color: var(--accent-border);
box-shadow: 0 0 0 3px rgba(102,126,234,.12);
}
.notice-textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.notice-level-row { display: flex; gap: 10px; }
.notice-level-opt {
flex: 1; padding: 9px 12px; border-radius: 10px; cursor: pointer;
border: 1px solid var(--border-color); background: var(--bg-tertiary);
font-size: 13px; color: var(--text-secondary); text-align: center;
transition: all .15s; user-select: none;
}
.notice-level-opt:hover { border-color: var(--accent-border); }
.notice-level-opt.selected {
border-color: var(--accent-border); color: var(--accent-text); font-weight: 500;
background: linear-gradient(135deg, rgba(102,126,234,.10), rgba(118,75,162,.08));
}
.notice-level-opt.selected.notice-level-urgent {
border-color: #ef4444; color: #ef4444;
background: rgba(239,68,68,.08);
}
.notice-form-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.notice-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.notice-history-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.notice-history-count { font-size: 12px; color: var(--text-muted); }
.notice-list { display: flex; flex-direction: column; gap: 10px; }
.notice-item {
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-radius: 12px; padding: 14px 16px;
display: flex; align-items: flex-start; gap: 12px;
transition: box-shadow .15s, border-color .15s;
}
.notice-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.notice-item-main { flex: 1; min-width: 0; }
.notice-item-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.notice-item-title { font-size: 14px; font-weight: 600; color: var(--text-primary); word-break: break-all; }
.notice-level-badge {
display: inline-flex; align-items: center; padding: 2px 8px;
border-radius: 6px; font-size: 11px; font-weight: 500; flex-shrink: 0;
}
.notice-level-badge.normal { background: rgba(102,126,234,.10); color: var(--accent-text); }
.notice-level-badge.urgent { background: rgba(239,68,68,.10); color: #ef4444; }
.notice-item-content {
font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
white-space: pre-wrap; word-break: break-word;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notice-item-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.notice-item-side {
display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0;
}
.notice-del-btn {
background: transparent; border: 1px solid var(--border-color); color: var(--text-muted);
width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all .15s; padding: 0;
}
.notice-del-btn:hover { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); color: #ef4444; }
/* ===== 通知中心（铃铛 + 未读角标 + 下拉面板 + 紧急弹窗） ===== */
.notify-bell-wrap { position: relative; flex-shrink: 0; }
.notify-bell-btn {
position: relative; width: 36px; height: 36px; border-radius: 10px;
border: none; background: var(--bg-secondary); color: var(--text-secondary);
cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(102,126,234,.04); transition: transform .1s ease, color .15s;
-webkit-tap-highlight-color: transparent;
}
.notify-bell-btn:active { transform: scale(.92); }
.notify-bell-btn svg { width: 19px; height: 19px; }
.notify-bell-btn.has-unread { color: var(--accent-text); }
.notify-badge {
position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff;
font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
box-sizing: border-box; box-shadow: 0 1px 4px rgba(239,68,68,.4);
pointer-events: none;
}
.notify-panel {
display: none; position: absolute; top: calc(100% + 10px); right: 0;
width: 330px; max-width: calc(100vw - 24px);
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.14);
overflow: hidden; z-index: 1000;
}
.notify-panel.open { display: block; animation: notify-panel-in .16s ease; }
@keyframes notify-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.notify-panel-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px; border-bottom: 1px solid var(--border-color);
}
.notify-panel-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.notify-readall-btn {
border: none; background: transparent; color: var(--accent-text);
font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 8px; font-family: inherit;
}
.notify-readall-btn:hover { background: var(--accent-light); }
.notify-panel-body { max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; }
.notify-empty { padding: 32px 0; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.notify-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.notify-item:hover { background: var(--bg-hover); }
.notify-item.unread { background: var(--accent-light); }
.notify-item.unread:hover { background: var(--accent-light); }
.notify-item-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.notify-level-tag {
flex-shrink: 0; display: inline-flex; align-items: center; padding: 1px 7px;
border-radius: 6px; font-size: 10.5px; font-weight: 600;
}
.notify-level-tag.normal { background: rgba(102,126,234,.10); color: var(--accent-text); }
.notify-level-tag.urgent { background: rgba(239,68,68,.10); color: #ef4444; }
.notify-item-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notify-item.read .notify-item-title { font-weight: 500; color: var(--text-secondary); }
.notify-item-time { font-size: 11px; color: var(--text-subtle); margin-bottom: 4px; }
.notify-item-content {
font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
white-space: pre-wrap; word-break: break-word;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notify-item.expanded .notify-item-content { display: block; -webkit-line-clamp: unset; overflow: visible; }
.notify-urgent-overlay {
position: fixed; inset: 0; background: var(--modal-overlay);
z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.notify-urgent-modal {
width: 100%; max-width: 380px; background: var(--bg-secondary);
border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3);
animation: notify-urgent-in .2s ease;
}
@keyframes notify-urgent-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.notify-urgent-head {
display: flex; align-items: center; gap: 8px; padding: 14px 18px;
background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.05));
border-bottom: 1px solid var(--border-color); color: #ef4444;
}
.notify-urgent-head svg { width: 20px; height: 20px; flex-shrink: 0; }
.notify-urgent-head-title { font-size: 14px; font-weight: 700; }
.notify-urgent-body { padding: 18px; }
.notify-urgent-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; word-break: break-all; }
.notify-urgent-content { font-size: 13px; color: var(--text-secondary); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.notify-urgent-footer { padding: 0 18px 18px; }
.notify-urgent-btn {
width: 100%; border: none; border-radius: 12px; padding: 11px 0;
background: var(--accent-gradient); color: var(--text-inverse);
font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
transition: filter .15s, transform .1s;
}
.notify-urgent-btn:hover { filter: brightness(1.05); }
.notify-urgent-btn:active { transform: scale(.98); }
/* ===== 地图数据板块 ===== */
.page-body.map-mode{overflow:hidden;display:flex;flex-direction:column}
.map-page{position:relative;display:flex;flex:1;min-height:0;height:auto;background:var(--bg-primary);transition:height .3s ease-out}
.map-left{position:relative;width:38%;min-width:260px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-color);z-index:2}
/* ===== 统一筛选栏控件：sticky 置顶，所有页面共用 ===== */
.filter-bar{position:sticky;top:0;z-index:100;background:var(--bg-primary);-webkit-tap-highlight-color:transparent}
.filter-bar .filter-tabs{display:flex;align-items:center;padding:8px 6px;gap:8px;overflow:hidden}
.filter-bar .filter-tab-items{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.filter-bar .filter-tab-items::-webkit-scrollbar{display:none}
.filter-bar .filter-tab-item{flex-shrink:0;padding:6px 14px;font-size:13px;color:var(--text-secondary);background:var(--bg-tertiary);border-radius:16px;cursor:pointer;white-space:nowrap;transition:all .15s}
.filter-bar .filter-tab-item.active{background:var(--accent);color:#fff;font-weight:600}
.filter-bar .filter-search{flex:1;min-width:0}
.filter-bar .filter-search input{width:100%;box-sizing:border-box;padding:7px 12px;border-radius:16px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;outline:none}
.filter-bar .filter-search input:focus{border-color:var(--accent)}
/* 地图数据搜索栏复用 filter-bar */
.map-search-bar.filter-bar{padding:10px 12px;border-bottom:1px solid var(--border-color)}
.map-cat-bar{display:flex;flex-wrap:nowrap;gap:8px;margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.map-cat-bar::-webkit-scrollbar{display:none}
.map-cat-chip{flex:0 0 auto;padding:5px 14px;border-radius:20px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary);font-size:13px;line-height:1.4;cursor:pointer;transition:all .2s}
.map-cat-chip.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#667eea,#764ba2)}
.map-cat-chip:active{transform:scale(.96)}
.map-search-bar.filter-bar .map-search-input{width:100%;box-sizing:border-box;padding:9px 32px 9px 12px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);font-size:14px;outline:none}
.map-search-input{width:100%;box-sizing:border-box;padding:9px 32px 9px 12px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);font-size:14px;outline:none;transition:border-color .2s}
.map-search-input:focus{border-color:var(--accent)}
.map-search-clear{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:var(--bg-tertiary);color:var(--text-secondary);border-radius:50%;cursor:pointer;font-size:11px;line-height:1}
/* 地图左侧面板内筛选区：融入面板做行内工具条，不做悬浮卡片 */
.map-left .map-filters-inline{
background:transparent;border:none;border-radius:0;box-shadow:none;
padding:10px 12px;gap:10px;border-bottom:1px solid var(--border-color);
}
.map-left .map-filters-inline .leads-search{min-width:0;max-width:none;width:100%;flex:1;}
.map-left .map-filters-inline .filters-row{gap:8px;}
.map-left .map-filters-inline .exh-filter-select{flex:1 1 0;min-width:0;}
/* 移动端筛选 tab 条与下方列表分隔 */
.map-left .map-tab-bar{flex-shrink:0;border-bottom:1px solid var(--border-color);}
/* 翻译状态条：有未翻译商户时出现在搜索栏下方 */
.map-translate-bar{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border-color);background:rgba(102,126,234,.06)}
.map-translate-tip{flex:1;min-width:0;font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-translate-btn{flex-shrink:0;padding:5px 12px;border-radius:7px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:12px;cursor:pointer;transition:all .2s}
.map-translate-btn:hover:not(:disabled){opacity:.88}
.map-translate-btn:disabled{opacity:.55;cursor:not-allowed}
.map-list-wrap{flex:1;overflow-y:auto;position:relative;scrollbar-width:none;-ms-overflow-style:none}
.map-list-wrap::-webkit-scrollbar{display:none}
.map-list-viewport{position:relative;min-height:100%}
.map-list-spacer{position:relative;width:1px}
.map-list-window{position:absolute;top:0;left:0;right:0;will-change:transform}
.map-list-row{height:82px;box-sizing:border-box;margin:5px 10px;padding:12px 14px;background:var(--bg-secondary);border:1px solid rgba(102,126,234,.08);border-radius:14px;box-shadow:0 1px 3px rgba(102,126,234,.05),0 1px 2px rgba(0,0,0,.03);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}
.map-list-row:hover{background:var(--bg-secondary);box-shadow:0 4px 14px rgba(102,126,234,.10),0 2px 4px rgba(0,0,0,.04)}
.map-list-row:active{transform:scale(.985)}
.map-list-row.selected{background:rgba(102,126,234,.07);border-color:var(--accent);box-shadow:0 2px 8px rgba(102,126,234,.12)}
.map-row-name{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-row-meta{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:12px;min-width:0}
.map-row-country{flex-shrink:0;padding:2px 8px;border-radius:6px;background:var(--chip-bg);color:var(--accent)}
/* 联系方式计数图标组靠右，对齐地推名片卡片 */
.map-row-meta .lead-mobile-meta{margin-left:auto;flex-shrink:0;gap:10px}
.map-row-meta .map-cat-tag{flex-shrink:0}
.map-row-addr{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-list-state{padding:48px 16px;text-align:center;color:var(--text-secondary);font-size:14px}
.map-list-state-icon{font-size:40px;line-height:1;margin-bottom:10px}
.map-error-text{color:var(--error-bg);margin-bottom:12px;font-size:14px}
body.dark .map-error-text{color:#f87171}
.map-right{position:relative;flex:1;min-width:0}
#map-container{position:absolute;inset:0}
.map-loading-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);z-index:1}
.map-loading-text{color:var(--text-secondary);font-size:14px}
.map-error-box{display:flex;flex-direction:column;align-items:center;gap:12px}
/* 详情卡片：PC 从左滑入覆盖列表区 */
.map-detail-card{position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--bg-secondary);z-index:101;display:flex;flex-direction:column;transition:left .3s ease-out;box-shadow:2px 0 12px rgba(0,0,0,.08)}
.map-detail-card.open{left:0}
.map-detail-head{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--border-color)}
.map-detail-title{font-size:16px;font-weight:700;color:var(--text-primary);line-height:1.4;word-break:break-all}
.map-detail-close{flex-shrink:0;width:28px;height:28px;border:none;border-radius:6px;background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;font-size:13px;transition:background .2s}
.map-detail-close:hover{background:var(--border-color)}
.map-detail-body{flex:1;overflow-y:auto;padding:8px 16px 20px;scrollbar-width:none;-ms-overflow-style:none}
.map-detail-body::-webkit-scrollbar{display:none}
.map-detail-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-color);font-size:13px}
.map-detail-row:last-child{border-bottom:none}
.map-detail-key{flex-shrink:0;width:64px;color:var(--text-secondary)}
.map-detail-val{flex:1;color:var(--text-primary);word-break:break-all;line-height:1.5}
/* 多平台地图跳转链接 */
.map-link-btn{display:inline-flex;align-items:center;padding:3px 10px;margin:2px 6px 2px 0;border-radius:8px;background:var(--accent-light);color:var(--accent-text);font-size:12px;font-weight:500;text-decoration:none;transition:background .15s,color .15s}
.map-link-btn:hover{background:var(--accent-gradient);color:#fff}
/* 详情卡片底部操作栏 */
.map-detail-footer{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--border-color)}
.map-detail-footer .btn-leads-select{width:100%}
.map-detail-footer .btn-leads-select:disabled{opacity:.5;cursor:not-allowed}
/* 地推名片/展会数据详情底部主操作栏，规范对齐 map-detail-footer；默认可见，不依赖 JS 加 .show，避免缓存错配时按钮消失 */
.leads-detail-footer{flex-shrink:0;display:block;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border-color)}
.leads-detail-footer.show{display:block}
.leads-detail-footer .btn-leads-select{width:100%;height:46px;padding:0 16px;border-radius:12px;font-size:15px;font-weight:600}
.leads-detail-footer .btn-leads-select:disabled{opacity:.6;cursor:not-allowed}
.leads-detail-footer .btn-leads-select.added{background:var(--bg-tertiary);color:var(--text-secondary);cursor:default}
/* 批量选择工具栏（PC） */
.map-select-toolbar{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}
.map-select-info{font-size:13px;color:var(--text-secondary)}
.map-select-actions{display:flex;gap:8px}
/* 列表行：复选框 + 内容 */
.map-list-row{display:flex;align-items:center;gap:10px}
.map-row-check{flex-shrink:0;width:20px;height:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.map-row-check input{display:none}
.map-row-check .custom-check{width:18px;height:18px;border:2px solid var(--border-color);border-radius:5px;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;transition:all .2s}
.map-row-check input:checked + .custom-check{background:linear-gradient(135deg,var(--accent) 0%,#764ba2 100%);border-color:transparent}
.map-row-check input:checked + .custom-check::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.map-row-content{flex:1;min-width:0}
.map-list-row.checked{background:rgba(102,126,234,.06);border-color:rgba(102,126,234,.45)}
/* 已跟进标签：浅蓝 chip，与地推名片一致 */
.map-row-tracked{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:6px;font-size:11px;font-weight:500;color:#1d4ed8;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.24);vertical-align:middle}
/* 移动端底部选择栏 */
.map-mobile-select-bar{display:none}
/* 选中点位 DOM Marker：放大 1.3 + 脉冲呼吸（仅选中项，降低 GPU 消耗） */
.map-pin-active{width:34px;height:44px;transform:scale(1.3);transform-origin:bottom center;animation:mapPinPulse 2s ease-in-out infinite;cursor:pointer;pointer-events:none}
.map-pin-active svg{width:100%;height:100%;display:block}
@keyframes mapPinPulse{0%,100%{transform:scale(1.3)}50%{transform:scale(1.15)}}
/* 地图常驻中文标注（DOM Marker，zoom≥12 显示）：纯 HTML 渲染中文无需 glyphs */
.map-label-marker{font-size:11.5px;font-weight:600;color:#1f2937;background:rgba(255,255,255,.92);padding:2px 7px;border-radius:6px;border:1px solid rgba(31,41,55,.25);box-shadow:0 1px 4px rgba(0,0,0,.18);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;user-select:none;cursor:pointer}
.maplibregl-map.dark-mode .map-label-marker{color:#e5e7eb;background:rgba(17,24,39,.88);border-color:rgba(229,231,235,.3)}
/* zoom < 12 时容器级隐藏全部标注（比遍历 Marker 高效） */
.map-labels-hidden .map-label-marker{display:none}
/* 移动端抽屉手柄（仅 <768px 可见） */
.map-mobile-drawer-handle{display:none}
/* ===== 移动端 <768px：上地图 42dvh + 下抽屉 ===== */
@media (max-width:767px){
.map-page{flex-direction:column;flex:1;min-height:0;height:auto}
.page-body.map-mode{overflow:hidden;display:flex;flex-direction:column}
.map-left{position:relative;width:100%;min-width:0;flex:1;min-height:0;border-right:none;border-top:1px solid var(--border-color);border-radius:14px 14px 0 0;box-shadow:0 -4px 14px rgba(0,0,0,.06);transition:flex .3s ease-out}
.map-right{order:-1;flex:none;height:calc(42dvh - 100px);min-height:0}
.map-mobile-drawer-handle{display:flex;align-items:center;justify-content:center;position:absolute;top:-14px;left:0;right:0;height:24px;z-index:5;cursor:grab}
.map-drawer-grip{width:40px;height:4px;border-radius:2px;background:var(--border-color)}
.map-page.drawer-expanded .map-right{height:30dvh}
.map-page.drawer-expanded .map-left{flex:1}
/* 档位B：详情抽屉仅覆盖列表区，地图保持可见 */
.map-page.detail-mode .map-right{height:calc(42dvh - 100px)}
.map-page.detail-mode .map-left{flex:1}
.map-detail-card{position:absolute;inset:auto 0 0 0;width:100%;height:100%;left:0;transform:translateY(100%);transition:transform .3s ease-out;top:auto}
.map-detail-card.open{transform:translateY(0);left:0}
/* 移动端：隐藏PC工具栏，显示底部选择栏 */
.map-select-toolbar{display:none !important}
.map-mobile-select-bar.active{
display:flex !important;position:fixed;bottom:0;left:0;right:0;
padding:12px 16px;background:var(--bg-secondary);border-top:1px solid var(--border-color);
align-items:center;gap:12px;z-index:101;box-shadow:0 -4px 20px rgba(0,0,0,.1);
}
.map-mobile-select-all{display:flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;font-size:13px}
.map-mobile-select-all input{display:none}
.map-mobile-select-all .custom-check{width:20px;height:20px;border:2px solid var(--border-color);border-radius:5px;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;transition:all .2s}
.map-mobile-select-all input:checked + .custom-check{background:linear-gradient(135deg,var(--accent) 0%,#764ba2 100%);border-color:transparent}
.map-mobile-select-all input:checked + .custom-check::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.map-mobile-select-count{flex:1;font-size:13px;color:var(--text-secondary)}
.map-mobile-select-bar .btn-leads-select{flex-shrink:0}
}
/* ===== 数据录入板块 ===== */
.data-entry-page{padding:20px;max-width:1200px;margin:0 auto}
.data-entry-header{margin-bottom:20px}
.data-entry-tabs{display:flex;gap:4px;background:var(--bg-tertiary);padding:4px;border-radius:10px;width:fit-content;margin-bottom:12px}
.de-tab{padding:8px 20px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text-secondary);transition:all .2s}
.de-tab.active{background:var(--accent);color:#fff;font-weight:600}
.de-hint{font-size:13px;color:var(--text-secondary)}
.data-entry-body{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;min-height:400px}
.de-upload-area{padding:60px 20px;text-align:center;cursor:pointer;border:2px dashed var(--border-color);border-radius:12px;margin:20px;transition:border-color .2s}
.de-upload-area:hover,.de-upload-area.drag-over{border-color:var(--accent)}
.de-upload-icon{font-size:40px;color:var(--text-secondary);margin-bottom:12px}
.de-upload-text{font-size:15px;color:var(--text-primary);font-weight:600}
.de-upload-sub{font-size:12px;color:var(--text-secondary);margin-top:6px}
.de-result{padding:20px}
.de-result-title{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:16px}
.de-mapping-area{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:20px}
.de-map-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-tertiary);border-radius:8px}
.de-map-header{flex:1;min-width:0;font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.de-map-arrow{color:var(--text-secondary);font-size:12px}
.de-map-select{flex-shrink:0;max-width:140px;padding:5px 8px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-size:12px}
.de-preview-wrap{border:1px solid var(--border-color);border-radius:8px;overflow:hidden}
.de-preview-title{padding:10px 14px;font-size:13px;color:var(--text-secondary);background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}
.de-preview-scroll{max-height:320px;overflow:auto}
.de-preview-table{width:100%;border-collapse:collapse;font-size:12px}
.de-preview-table th{position:sticky;top:0;background:var(--bg-tertiary);padding:8px;text-align:left;color:var(--text-primary);border-bottom:1px solid var(--border-color);white-space:nowrap}
.de-map-badge{display:block;font-size:11px;color:var(--accent);font-weight:500;margin-top:2px}
.de-preview-table td{padding:7px 8px;border-bottom:1px solid var(--border-color);color:var(--text-primary);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.de-preview-table tr:hover td{background:var(--bg-tertiary)}
.de-empty{padding:30px;text-align:center;color:var(--text-secondary)}
.de-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.de-loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--text-secondary);font-size:14px}
.de-result-box{padding:30px;text-align:center}
.de-result-box.de-success .de-success-title{font-size:18px;font-weight:700;color:#10b981;margin-bottom:16px}
.de-result-box.de-error .de-error-text{font-size:14px;color:var(--error-bg);margin-bottom:16px}
body.dark .de-result-box.de-error .de-error-text{color:#f87171}
.de-success-item{font-size:14px;color:var(--text-primary);margin:6px 0}
.de-errors{margin:16px auto;max-width:500px;text-align:left;background:var(--bg-tertiary);padding:12px;border-radius:8px;font-size:12px;color:var(--text-secondary);max-height:160px;overflow:auto}
.de-errors div{padding:3px 0}
@media(max-width:767px){
.data-entry-page{padding:12px}
.de-mapping-area{grid-template-columns:1fr}
.de-upload-area{padding:40px 16px;margin:12px}
}
/* ===== 展会数据模块（复用地推名片表格/卡片样式） ===== */
/* 外边距对齐 .leads-container / .us-page（桌面 0 20 20，移动 0 12 12） */
.exh-wrap{min-height:0;padding:0 20px 20px}
/* 筛选卡→表格 14px 对齐 .leads-main 的 gap:14px；底部 8px 保留给分页 */
.exh-grid{padding:14px 0 8px}
.exh-filter-select{appearance:none;-webkit-appearance:none;height:40px;box-sizing:border-box;border:1px solid rgba(102,126,234,0.10);background-color:var(--bg-primary);color:var(--text-primary);border-radius:10px;padding:9px 32px 9px 14px;font-size:13px;outline:none;min-width:130px;cursor:pointer;transition:border-color .15s;
background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 12px center}
.exh-filter-select:hover{border-color:var(--accent)}
.exh-filter-select:focus{border-color:var(--accent)}
.exh-table .exh-addr{color:var(--text-secondary);font-size:13px}
.exh-cat-chip{background:rgba(139,92,246,0.12)!important;color:#7c3aed!important;border:1px solid rgba(139,92,246,0.24)!important}
.exh-pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 0 14px}
.exh-page-btn{padding:6px 16px;border-radius:16px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-size:13px;cursor:pointer}
.exh-page-btn:disabled{opacity:.45;cursor:default}
.exh-page-info{font-size:13px;color:var(--text-secondary)}
/* 展会卡片底部：跟进勾选 + 届数 */
.exh-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color)}
.exh-card-check{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--text-secondary);user-select:none}
.exh-card-check input{position:absolute;opacity:0;width:0;height:0}
.exh-card-check .custom-check{width:18px;height:18px;border:2px solid var(--border-color);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-primary);transition:all .2s;flex-shrink:0}
.exh-card-check input:checked + .custom-check{background:linear-gradient(135deg,var(--accent) 0%,#764ba2 100%);border-color:var(--accent)}
.exh-card-check input:checked + .custom-check::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.exh-card-session .lead-mobile-annual{font-size:12px;color:var(--text-muted);white-space:nowrap}
.exh-tracked-tag{background:rgba(16,185,129,.12)!important;color:#059669!important;border:1px solid rgba(16,185,129,.25)!important}
.lead-tracked-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:500;padding:1px 7px;border-radius:10px;background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.25);vertical-align:middle}
/* ===== 聚合搜索 Unified Search ===== */
/* .us-page 默认盒模型服务结果页（表格/卡片视图） */
.us-page{display:flex;flex-direction:column;gap:14px;padding:0 20px 20px}
.us-retry{margin-top:12px;padding:6px 18px;border:1px solid rgba(102,126,234,.1);border-radius:10px;background:var(--bg-secondary);color:var(--text-secondary);font-size:13px;cursor:pointer}
.us-retry:hover{border-color:var(--accent);color:var(--accent)}
/* 搜索首页：标准标题栏常驻（与其他页面一致），hero 仅承载搜索卡片与检索范围 */
.us-hero{margin:0;padding:22px 0 2px;display:flex;flex-direction:column;align-items:center}
.us-hero-box{width:100%;max-width:1080px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;background:var(--bg-secondary);border:1px solid rgba(102,126,234,.12);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.10);transition:border-color .2s,box-shadow .2s}
.us-hero-box:focus-within{border-color:rgba(102,126,234,.45);box-shadow:0 8px 28px rgba(102,126,234,.14)}
.us-hero-icon{display:inline-flex;color:var(--text-muted)}
.us-hero-input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text-primary);font-size:15px;padding:11px 0}
.us-hero-input::placeholder{color:var(--text-subtle,var(--text-muted))}
.us-hero-btn{flex-shrink:0;padding:12px 28px;border:none;border-radius:11px;background:linear-gradient(135deg,var(--accent) 0%,#764ba2 100%);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .2s}
.us-hero-btn:hover{opacity:.92}
.us-hero-scope{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.us-scope-label{font-size:12px;color:var(--text-subtle)}
.us-scope-chip{font-size:12px;color:var(--text-muted);background:var(--bg-secondary);border:1px solid rgba(102,126,234,.10);border-radius:999px;padding:3px 12px;white-space:nowrap}
/* 浏览区：居中限宽 */
.us-browse{width:100%;max-width:1080px;margin:0 auto}
.us-browse .us-section{margin-top:32px}
/* 结果页仍在使用的紧凑搜索栏：对齐 .leads-search input */
.us-searchbar{display:flex;align-items:center;gap:10px}
.us-input{flex:1;min-width:0;padding:10px 14px;border:1px solid rgba(102,126,234,.10);border-radius:12px;background:var(--bg-primary);color:var(--text-primary);font-size:13px;transition:border-color .15s;outline:none}
.us-input:focus{border-color:rgba(102,126,234,.35)}
.us-input::placeholder{color:var(--text-subtle,var(--text-muted))}
.us-search-btn{flex-shrink:0;padding:10px 24px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--accent) 0%,#764ba2 100%);color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .2s}
.us-search-btn:hover{opacity:.9}
.us-section{margin:0}
.us-section-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:12px}
.us-section-hint{font-size:12px;font-weight:400;color:var(--text-muted)}
.us-card-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.us-facet-card{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;background:var(--bg-secondary);border:1px solid rgba(102,126,234,.06);border-radius:16px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s}
.us-facet-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(102,126,234,.08)}
.us-facet-card.selected{border-color:var(--accent);background:var(--accent-light)}
.us-facet-name{font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.us-facet-count{flex-shrink:0;font-size:12px;color:var(--text-muted);font-weight:600}
.us-facet-card.selected .us-facet-count{color:var(--accent)}
/* 国家：按地区分组，卡片与品类 .us-facet-card 同款（网格 + gap 10） */
.us-region{padding:15px 0;border-bottom:1px solid var(--border-color)}
.us-region:first-child{padding-top:4px}
.us-region:last-child{border-bottom:none}
.us-region-name{font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:12px}
.us-country-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.us-facet-name-flag{display:inline-flex;align-items:center;gap:7px}
.us-flag{width:20px;height:auto;border-radius:2px;flex-shrink:0;display:block;box-shadow:0 0 0 1px rgba(127,127,127,.3)}
.us-flag-none{width:20px;height:14px;border-radius:2px;background:var(--bg-tertiary);box-shadow:none}
/* 结果页标题栏：返回 + 标题/计数/筛选 chips + 搜索，合并为一张卡片 */
.us-result-bar{display:flex;align-items:center;gap:12px;background:var(--bg-secondary);border:1px solid rgba(102,126,234,.08);border-radius:14px;padding:10px 14px}
.us-back-btn{width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-primary);border:1px solid rgba(102,126,234,.10);border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .15s}
.us-back-btn:hover{border-color:var(--accent);color:var(--accent)}
.us-back-btn:active{transform:scale(.94)}
.us-result-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0;flex:1}
.us-result-title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap}
.us-result-total{font-size:13px;color:var(--text-muted);white-space:nowrap}
.us-chips{display:inline-flex;gap:8px;flex-wrap:wrap}
.us-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 11px;border-radius:14px;background:var(--chip-bg);color:var(--text-primary);font-size:12px}
.us-chip-x{display:inline-flex;align-items:center;border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:0}
.us-chip-x:hover{color:var(--error)}
/* 标题栏内联搜索框 */
.us-result-search{width:320px;flex-shrink:0}
.us-result-search .us-input{padding:9px 14px;border-radius:10px;background:var(--bg-primary)}
.us-result-search .us-search-btn{padding:9px 20px;border-radius:10px}
/* 桌面表格：列宽与单元格 */
.us-col-name{width:300px}
.us-col-country{width:120px}
.us-col-cats{width:auto}
.us-col-contact{width:180px}
.us-results-table{min-width:760px}
.us-cell-name,.us-cell-country,.us-cell-cats,.us-cell-contact{vertical-align:top}
.us-cell-country .lead-info-sub{margin-bottom:0}
.us-cats-cell{display:flex;flex-wrap:wrap;gap:6px}
.us-contact-meta{display:flex;flex-wrap:wrap;gap:6px}
.us-muted{color:var(--text-muted)}
/* 来源标签 */
.us-source{font-size:11px;font-weight:500;padding:2px 10px;border-radius:10px;border:1px solid;white-space:nowrap;flex-shrink:0}
.source-leads{background:rgba(102,126,234,.1);color:#667eea;border-color:rgba(102,126,234,.25)}
.source-exhibition{background:rgba(124,58,237,.1);color:#7c3aed;border-color:rgba(124,58,234,.25)}
.source-merchants{background:rgba(8,145,178,.1);color:#0891b2;border-color:rgba(8,145,178,.25)}
/* 分页：对齐 .leads-pagination（padding 16px 6px、无 margin） */
.us-pagination{margin:0;padding:16px 6px}
/* 详情抽屉：对齐 leads-detail-panel */
.us-drawer-wrap{position:fixed;inset:0;z-index:1000}
.us-drawer-overlay{position:absolute;inset:0;background:var(--modal-overlay)}
.us-drawer{position:absolute;top:0;right:0;bottom:0;width:min(460px,92vw);background:var(--bg-primary);box-shadow:-8px 0 30px rgba(0,0,0,.12);display:flex;flex-direction:column;animation:us-drawer-in .22s ease}
@keyframes us-drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.us-drawer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--border-color)}
.us-drawer-title{font-size:16px;font-weight:600;color:var(--text-primary);line-height:1.4}
.us-drawer-sub{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--text-muted)}
.us-drawer-close{border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:4px;display:inline-flex;border-radius:7px}
.us-drawer-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.us-drawer-body{flex:1;overflow-y:auto;padding:20px 20px 24px;user-select:text;-webkit-user-select:text}
/* 详情正文复用地推名片 .detail-section / .detail-info-row；图片与产品块样式 */
.us-detail-images{display:flex;flex-wrap:wrap;gap:10px}
.us-detail-img{max-width:100%;max-height:220px;border-radius:10px;border:1px solid rgba(102,126,234,.12);cursor:zoom-in;display:block;object-fit:cover}
.us-product-block{line-height:1.7}
@media (max-width:900px){
.us-card-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
/* 对齐移动 .leads-container（padding 0 12 12、gap 0） */
.us-page{padding:0 12px 12px;gap:0}
/* Hero 移动版更紧凑 */
.us-hero{padding:16px 0 2px}
.us-hero-scope{margin-top:12px}
.us-browse .us-section{margin-top:24px}
/* 结果标题栏：搜索框换行占满整行 */
.us-result-bar{flex-wrap:wrap;margin:12px 6px;gap:10px}
.us-result-search{width:100%;flex-basis:100%}
/* 对齐移动 .leads-grid 的 padding 0 6 8（限定作用域） */
.us-page .leads-mobile-cards{padding:0 6px 8px}
}
@media (max-width:560px){
.us-card-grid{grid-template-columns:repeat(2,1fr)}
.us-search-btn{padding:10px 16px}
.us-hero-btn{padding:11px 18px}
}