/* CRM 公共组件与业务布局。设计变量只在 design-tokens.css 中维护。 */

html { scroll-behavior: smooth; }
body { color: var(--refine-text); font-family: var(--font-ui); text-rendering: optimizeLegibility; }
input, button, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:active:not(:disabled) { filter: brightness(.97); }

.nav-icon { align-items: center; display: inline-flex; height: 20px; justify-content: center; width: 20px; }
.nav-icon svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; }
.main-nav .nav-icon { color: rgba(255, 255, 255, .7); }
.main-nav button.active .nav-icon { color: #8cc6ff; }

.button.secondary:hover { border-color: #9ab8d5; color: #145fae; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--refine-focus); outline: 2px solid var(--primary); outline-offset: 2px; }

.page-heading h3, .workbench-heading h1 { color: var(--refine-text); }
.page-heading p, .workbench-heading p { color: var(--refine-muted); }
.content-card, .filter-card, .table-card { border-color: var(--refine-line); }

.filter-card input::placeholder { color: #a1b0bf; }
.filter-card input, .filter-card select, .modal-form input, .modal-form select, .modal-form textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.filter-card input:focus, .filter-card select:focus, .modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { background: #fff; }

tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: #f4f9ff; }
th { color: #60758d; font-weight: 700; }
td { color: #294660; }
.pagination { border-top: 1px solid #e8eef4; }
.pagination button { border-radius: 7px; min-height: 32px; }

.dashboard-stat { position: relative; overflow: hidden; }
#dashboardSummary.dashboard-summary { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dashboard-stat::before { content: none; }
.dashboard-stat .stat-icon, .dashboard-stat .dashboard-stat-copy { position: relative; z-index: 1; }
.dashboard-action { border-color: #e0eaf3; transition: border-color .18s ease, background-color .18s ease; }
.dashboard-action:hover { background: #f7fbff; border-color: #b8d8f4; transform: none; }

.empty-state, .approval-center-empty, .approval-center-loading { background: var(--color-card); border-color: var(--border); color: var(--refine-muted); }
.empty-state strong { color: #35516d; }

.approval-center-tabs { background: #fff; overflow-x: auto; scrollbar-width: thin; }
.approval-center-tabs button { flex: 0 0 auto; }
.approval-work-item { border-color: #dce7f0; box-shadow: 0 3px 10px rgba(32, 72, 108, .035); transition: border-color .18s ease, background-color .18s ease; }
.approval-work-item:hover { background: #f8fbff; border-color: #afcee9; transform: none; }
.submitted-approval-title { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.submitted-approval-title .badge { margin: 0; }
.approval-work-main > small { color: #7087a0; display: block; line-height: 1.55; margin-top: 4px; }

.import-item-blocked { border-color: #f2c3c0; box-shadow: inset 3px 0 0 #e75d56; }
.import-row-blocked { align-items: center; background: #fff6f5; border: 1px solid #f3cfcc; border-radius: 6px; color: #a43d37; display: flex; font-size: 13px; line-height: 1.5; margin: 10px 0; padding: 8px 11px; }
.import-item-blocked .import-data-card { background: #fdfefe; opacity: .78; }
.review-grid label.field-invalid, .import-data-card .review-grid label.field-invalid { color: #b5433c; }
.review-grid label.field-invalid input, .review-grid label.field-invalid select, .import-data-card .review-grid label.field-invalid input, .import-data-card .review-grid label.field-invalid select { background: #fff8f7; border-color: #e3726b; box-shadow: 0 0 0 2px rgba(220, 83, 75, .12); }
.field-error-message { color: #b5433c; font-size: 11px; font-weight: 500; line-height: 1.4; }

.drop-zone { border: 1.5px dashed #8bb7df; min-height: 178px; padding: 28px; position: relative; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.drop-zone-icon { align-items: center; background: #e8f3ff; border-radius: 50%; color: #1677e8; display: flex; font-size: 28px; font-weight: 700; height: 48px; justify-content: center; line-height: 1; width: 48px; }
.drop-zone-idle, .drop-zone-ready { display: grid; gap: 4px; }
.drop-zone-idle strong, .drop-zone-ready strong { color: #285a83; font-size: 15px; }
.drop-zone-ready { display: none; }
.drop-zone.has-files { background: linear-gradient(135deg, #f2fff8, #fbfffd); border-color: #62c79a; box-shadow: inset 0 0 0 1px rgba(43, 166, 105, .08); }
.drop-zone.has-files .drop-zone-icon { background: #dff8eb; color: #16a365; }
.drop-zone.has-files .drop-zone-icon::before { content: "✓"; }
.drop-zone.has-files .drop-zone-icon { font-size: 0; }
.drop-zone.has-files .drop-zone-icon::before { font-size: 24px; }
.drop-zone.has-files .drop-zone-idle { display: none; }
.drop-zone.has-files .drop-zone-ready { display: grid; }
.selected-files { display: grid; gap: 10px; margin-top: 14px; }
.selected-files-summary { align-items: center; background: #f3fff8; border: 1px solid #c5ecd6; border-radius: 8px; color: #247b53; display: flex; gap: 10px; justify-content: space-between; padding: 10px 12px; }
.selected-files-summary span { color: #5d9275; font-size: 12px; }
.selected-files-list { display: grid; gap: 8px; }
.selected-file-card { align-items: center; background: #fbfdff; border: 1px solid #dbe8f2; border-radius: 8px; display: grid; gap: 10px; grid-template-columns: 40px minmax(0, 1fr) auto; padding: 9px 11px; }
.selected-file-type { align-items: center; background: #e7f2ff; border-radius: 7px; color: #1b75cf; display: flex; font-size: 10px; font-weight: 800; height: 34px; justify-content: center; width: 34px; }
.selected-file-card div { display: grid; min-width: 0; }
.selected-file-card strong { color: #2d536f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-file-card small { color: #7f96a9; font-size: 12px; margin-top: 2px; }
.selected-file-card button { background: transparent; border: 0; color: #b3524e; cursor: pointer; font: inherit; font-size: 12px; padding: 5px; }
.selected-file-card button:hover { color: #8f322f; text-decoration: underline; }
.import-upload-actions { border-top: 1px solid #e5edf4; justify-content: flex-end; margin-top: 16px; padding-top: 14px; }
.upload-queue-note { color: #71899f; font-size: 12px; margin-right: auto; }
.import-upload-actions .button:disabled { box-shadow: none; cursor: not-allowed; opacity: .5; transform: none; }

.audit-log-card { overflow: hidden; }
.audit-log-card .table-summary { align-items: center; background: linear-gradient(90deg, #fbfdff, #f4f9ff); border-bottom: 1px solid #e1ebf3; color: #71879c; display: flex; justify-content: space-between; padding: 14px 16px; }
.audit-log-card .table-summary strong { color: #244967; font-size: 15px; }
.audit-log-card .table-summary span { font-size: 12px; }
.audit-log-filters { align-items: end; grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.audit-log-filters label { min-width: 0; }
.audit-time { color: #55718c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-action-tag { background: #edf5ff; border: 1px solid #d7e9fb; border-radius: 999px; color: #226eb8; display: inline-flex; font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 9px; white-space: nowrap; }
.audit-actor { display: grid; gap: 3px; min-width: 92px; }
.audit-actor strong { color: #294963; font-size: 13px; }
.audit-actor small, .audit-muted { color: #8498aa; font-size: 12px; }
.audit-system-actor { color: #778ea3; font-size: 12px; }
.audit-subject { display: grid; gap: 4px; min-width: 150px; }
.audit-subject span { color: #3d5d76; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-detail { color: #6b8195; font-size: 12px; line-height: 1.5; max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) {
  .audit-log-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 680px) {
  .main-nav .nav-icon { height: 18px; width: 18px; }
  .heading-actions .button { min-width: 0; }
  .dashboard-stat::before { height: 80px; width: 80px; }
  .approval-center-tabs { gap: 10px; }
  .approval-center-tabs button { padding-left: 8px; padding-right: 8px; }
  .selected-files-summary { align-items: flex-start; flex-direction: column; gap: 2px; }
  .import-upload-actions { align-items: stretch; flex-direction: column; }
  .upload-queue-note { margin-right: 0; }
  .audit-log-filters { grid-template-columns: 1fr; }
  .audit-log-card .table-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* 框架：低干扰导航、白色工作区、清晰的信息层级。 */
body, .workspace { background: var(--color-bg); color: var(--text-primary); }
body { font-size: var(--font-size-body); line-height: var(--line-height-body); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.app-shell { grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { background: var(--sidebar); padding: 16px 11px; }
.sidebar-brand { margin: 0 7px 12px; padding: 1px 2px 16px; }
.sidebar-brand { gap: 10px; }
.sidebar-brand .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 8px; }
.sidebar-brand strong { font-size: 14px; white-space: nowrap; }
.main-nav { gap: 3px; }
.main-nav button { border-radius: 7px; min-height: 42px; padding: 9px 12px; font-size: 14px; font-weight: 500; }
.main-nav button.active { background: #254569; box-shadow: inset 3px 0 #72aaff; }
.main-nav button.active .nav-icon { color: #d8edff; }
.topbar { background: #fff; border-bottom: 1px solid var(--refine-line); box-shadow: none; min-height: 64px; padding: 10px 28px; gap: 20px; position: sticky; top: 0; z-index: 40; }
.page-view { margin: 0 auto; max-width: 1680px; padding: 24px 28px 42px; width: 100%; min-width: 0; }
.page-heading h3, .workbench-heading h1 { color: var(--refine-text); font-size: var(--font-size-page); font-weight: 600; letter-spacing: 0; }
.page-heading p, .workbench-heading p { color: var(--refine-muted); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.content-card, .table-card, .filter-card { background: var(--color-card); border: 1px solid var(--refine-line); border-radius: var(--refine-radius); box-shadow: var(--refine-shadow); }
.section-title, .table-summary, .panel-title { min-height: 52px; padding: 13px 18px; }
.button { align-items: center; display: inline-flex; justify-content: center; gap: 6px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; height: 38px; min-height: 38px; padding: 0 16px; letter-spacing: 0; transition: background-color .15s, border-color .15s; }
.button.primary, .heading-actions .button.primary { background: var(--refine-primary); border-color: var(--refine-primary); box-shadow: none; }
.button.primary:hover, .heading-actions .button.primary:hover { background: var(--refine-primary-hover); border-color: var(--refine-primary-hover); box-shadow: none; transform: none; }
.button.secondary { background: #fff; border-color: var(--border-strong); color: #344054; }
.button:disabled { box-shadow: none; cursor: not-allowed; opacity: .55; transform: none; }

/* 表单和数据表共用一套密度，不在单页重复定义控件。 */
.filter-card { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px; margin-bottom: 16px; }
.filter-card label { color: var(--text-secondary); font-size: 13px; font-weight: 500; min-width: 140px; flex: 1 1 160px; }
.filter-card input, .filter-card select, .modal-form input:not([type="checkbox"]):not([type="radio"]), .modal-form select, .modal-form textarea { background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; min-width: 0; width: 100%; }
.filter-card input, .filter-card select, .modal-form input:not([type="checkbox"]):not([type="radio"]), .modal-form select { height: 38px; min-height: 38px; padding: 7px 11px; }
.modal-form textarea { padding: 10px; line-height: 1.6; resize: vertical; }
.modal-form label { color: var(--text-secondary); font-size: 13px; gap: 6px; }
.filter-card > .button { margin: 0; order: 0; }
.table-scroll { overflow: auto; overscroll-behavior-x: contain; }
table { font-size: 14px; }
thead th { background: var(--color-card-subtle); color: var(--text-secondary); font-size: var(--font-size-caption); font-weight: 600; height: 42px; padding: 10px 16px; white-space: nowrap; }
tbody td { color: #344054; font-size: 14px; border-bottom: 1px solid #edf0f5; height: 60px; padding: 13px 16px; line-height: 22px; }
tbody td small { color: var(--text-tertiary); font-size: 12px; }
tbody tr:hover { background: #f7faff; }
.primary-cell { min-width: 200px; max-width: 320px; }
.primary-cell strong { font-weight: 600; overflow-wrap: anywhere; white-space: normal; }
.table-action { white-space: nowrap; }
.text-button { color: var(--primary); font-size: 13px; }
.pagination { padding: 14px 16px; gap: 8px; flex-wrap: wrap; color: var(--text-secondary); }
.section-title, .panel-title, .table-summary { background: #fff; }
.section-title h4, .panel-title h4 { color: var(--text-primary); font-size: var(--font-size-section); font-weight: 600; }
.section-title h4::before { content: none; }
.badge, .status-tag { font-size: 12px; font-weight: 500; line-height: 1.5; padding: 3px 8px; border-radius: 4px; }
.topbar-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 独立消息层：窄屏也可见；弹窗内的错误仍由 modalMessage 呈现。 */
#globalMessage { position: fixed; z-index: 1000; top: 16px; left: 50%; transform: translateX(-50%); display: block; width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 11px 16px; border: 1px solid #bce1cf; border-radius: 8px; background: #f1faf5; box-shadow: 0 6px 24px rgba(16,24,40,.12); color: #176545; font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
#globalMessage:empty { display: none; }
#globalMessage.error { background: #fff5f5; color: #a52c2c; border-color: #efc1c1; }
.table-state { text-align: center; padding: 36px 16px; color: var(--text-secondary); }
.table-state strong, .table-state small { display: block; margin-bottom: 8px; }
.table-state.is-error strong { color: var(--danger); }
.table-state .button { margin-top: 8px; }
.table-state-spinner { display: inline-block; width: 20px; height: 20px; margin-bottom: 8px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: customer-profile-spin .9s linear infinite; }

/* 工作台：数据层级清晰，卡片紧凑，弱化纯装饰。 */
#dashboardView .workbench-heading { align-items: center; margin-bottom: 18px; }
#dashboardView .workbench-heading > div:first-child { align-items: flex-start; display: grid; gap: 3px; }
#dashboardView .workbench-heading p { display: block; margin: 0; }
#dashboardView .heading-actions { gap: 8px; }
#dashboardSummary.dashboard-summary, #dashboardMetrics.dashboard-metrics, #dashboardView .dashboard-content, #dashboardView .dashboard-bottom { gap: 14px; }
#dashboardView .dashboard-content { align-items: stretch; }
#dashboardSummary > .dashboard-stat { background: #fff; border: 1px solid var(--refine-line); border-radius: var(--refine-radius); box-shadow: var(--refine-shadow); height: 124px; min-height: 124px !important; padding: 15px 17px; }
#dashboardSummary > .dashboard-stat::after { content: none; }
#dashboardSummary > .dashboard-stat:hover, #dashboardSummary > .dashboard-stat:focus-visible { border-color: #a9ccee; box-shadow: 0 6px 18px rgba(25, 85, 145, .1); transform: none; }
#dashboardSummary .dashboard-stat strong { color: #163958; font-size: 30px; }
#dashboardSummary .dashboard-stat small { color: var(--refine-muted); }
#dashboardView .dashboard-metric { border-color: var(--refine-line); box-shadow: var(--refine-shadow); min-height: 88px; }
#dashboardView .dashboard-metric-copy strong { font-size: 27px; }
#dashboardView .dashboard-actions-panel, #dashboardView .dashboard-overview, #dashboardView .dashboard-activity, #dashboardView .workbench-alerts { border-color: var(--refine-line); border-radius: var(--refine-radius); box-shadow: var(--refine-shadow); }
#dashboardView .panel-title { background: #fff; min-height: 52px; padding: 12px 17px; }
#dashboardView .dashboard-actions { grid-auto-rows: minmax(90px, 1fr); flex: 1; }
#dashboardView .dashboard-action { min-height: 78px; padding: 11px 14px; }
#dashboardView .dashboard-action:hover { background: #f5faff; box-shadow: none; transform: none; }
#dashboardView .dashboard-action small { color: var(--text-secondary); font-size: var(--font-size-caption); }
.panel-icon svg, .action-icon svg, .customer-detail-tab-nav svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }

/* 客户列表：筛选与结果形成一个稳定的阅读顺序。 */
#customersView .page-heading { align-items: center; }
#customerFilters { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(190px, 1.5fr) repeat(4, minmax(100px, 1fr)) auto; padding: 16px 18px; }
#customerFilters label { min-width: 0; }
#customerFilters > .button { margin: 0; min-width: 76px; order: 0; }
#customersView .table-summary { background: #fff; color: #405b77; }
#customersView th { background: #f6f9fc; height: 42px; }
#customersView td { height: 54px; }
#customersView .primary-cell strong { color: #173b5d; font-size: 14px; }
#customersView .table-action .text-button { min-height: 28px; }

/* 客户详情：保留档案分区，同时把首屏过大的留白收紧。 */
#customerDetailView .customer-detail-hero { min-height: 0; padding: 0 2px 20px; }
#customerDetailView .customer-detail-hero::after { display: none; }
#customerDetailView .customer-detail-hero .back-link { margin-bottom: 14px; }
#customerDetailView .customer-detail-identity { gap: 14px; }
#customerDetailView .customer-detail-identity-icon { border-radius: 11px; box-shadow: none; height: 64px; width: 64px; }
#customerDetailView .customer-detail-identity-icon svg { height: 34px; width: 34px; }
#customerDetailView .customer-detail-identity h3 { font-size: 26px; }
#customerDetailView .customer-detail-identity p { font-size: 14px; margin: 3px 0 8px; }
#customerDetailView .detail-hero-tags .badge { font-size: 12px; padding: 5px 11px; }
#customerDetailView .customer-detail-hero-actions { align-self: flex-end; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 0; }
#customerDetailView .customer-detail-hero-actions .button { box-shadow: none; font-size: 13px; height: 40px; min-width: 106px; padding: 0 14px; }
#customerDetailView .customer-detail-secondary-actions { align-items: center; border-left: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; margin-left: 4px; padding-left: 12px; }
#customerDetail .customer-detail-groups { background: #fff; border: 1px solid var(--refine-line); border-radius: var(--refine-radius); box-shadow: var(--refine-shadow); gap: 0; overflow: hidden; }
#customerDetail .customer-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#customerDetail .customer-detail-field:nth-child(n) { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#customerDetail .customer-detail-field:nth-child(2n) { border-right: 0; }
#customerDetail .customer-detail-field:last-child { border-bottom: 0; }
#customerDetail .customer-detail-field:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
#customerDetail .customer-detail-group { border: 0; border-radius: 0; box-shadow: none; }
#customerDetail .customer-detail-group:nth-child(odd) { border-right: 1px solid var(--border); }
#customerDetail .customer-detail-group:nth-child(n+3) { border-top: 1px solid var(--border); }
#customerDetail .customer-detail-group h4 { background: #f8fafc; color: var(--text-primary); font-size: 15px; font-weight: 600; min-height: 50px; padding: 13px 17px; }
#customerDetail .customer-detail-group h4::before { content: none; }
#customerDetail .customer-detail-field { gap: 3px; min-height: 65px; padding: 11px 16px; }
#customerDetail .customer-detail-field small { color: var(--refine-muted); font-size: var(--font-size-caption); }
#customerDetail .customer-detail-field strong { font-weight: 500; }
#customerDetail .customer-profile-remark { background: #f5faff; box-shadow: none; }
#customerDetailView .customer-detail-tabs { border-color: var(--refine-line); border-radius: var(--refine-radius); box-shadow: var(--refine-shadow); margin-top: 16px; }
#customerDetailView .customer-detail-tab-nav { gap: 6px; min-height: 54px; padding: 0 17px; }
#customerDetailView .customer-detail-tab-nav button { font-size: 14px; gap: 8px; padding: 0 13px; }
#customerDetailView .customer-detail-tab-nav button span { align-items: center; display: inline-flex; }
#customerDetailView .customer-detail-tab-nav button svg { height: 18px; width: 18px; }
#customerDetailView .customer-detail-tab-panel > .section-title { min-height: 68px; padding: 14px 20px; }
#customerDetailView .customer-detail-tab-panel > .section-title h4 { font-size: 17px; }
#customerDetailView .customer-detail-tab-panel > .section-title h4::before { content: none; }
#customerDetailView .customer-detail-tab-panel .section-title span { font-size: 12px; }
#customerDetailView .customer-detail-tab-panel > .section-title .button { height: 38px; min-width: 0; }
#customerDetailView .customer-detail-tab-panel .empty-state { min-height: 190px; padding: 25px 18px; }
#customerDetailView .customer-detail-tab-panel .empty-state-icon { border-radius: 16px; font-size: 28px; height: 64px; margin-bottom: 8px; width: 64px; }
#customerDetailView .customer-detail-tab-panel .empty-state strong { font-size: 15px; }
#customerDetailView .customer-detail-tab-panel .empty-state small { font-size: 12px; }

/* AI 画像统一中文字体与阅读节奏：结论优先，标签和依据退到次级。 */
#customerProfilePanel .customer-profile-hero-copy h4 { font-size: 26px; font-weight: 600; letter-spacing: 0; }
#customerProfilePanel .customer-profile-hero-copy p { color: var(--text-secondary); font-size: 14px; line-height: 1.65; }
#customerProfilePanel .customer-profile-meta { color: var(--text-tertiary); font-size: 12px; font-weight: 500; }
#customerProfilePanel .customer-profile-section h5 { color: var(--text-primary); font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; }
#customerProfilePanel .customer-profile-section-badge { font-size: 12px; font-weight: 600; }
#customerProfilePanel .customer-profile-section p { color: #334155; font-size: 15px; font-weight: 400; line-height: 1.75; }
#customerProfilePanel .customer-profile-section ul { color: #334155; font-size: 14px; font-weight: 400; line-height: 1.75; }
#customerProfilePanel .customer-profile-section li + li { margin-top: 7px; }
#customerProfilePanel .customer-profile-evidence summary strong { font-size: 14px; font-weight: 600; }
#customerProfilePanel .customer-profile-evidence p, #customerProfilePanel .customer-profile-evidence ol { color: var(--text-secondary); font-size: 13px; line-height: 1.7; }

@media (min-width: 961px) {
  .sidebar { height: 100vh; min-height: 0; overflow-y: auto; position: sticky; top: 0; }
}
@media (max-width: 1250px) {
  #customerFilters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { min-height: auto; min-width: 0; }
  .main-nav { min-width: 0; max-width: 100%; overflow-x: auto; }
  #dashboardView .workbench-heading, #customersView .page-heading { align-items: flex-start; }
  #customerFilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #customerDetail .customer-detail-group:nth-child(odd) { border-right: 0; }
  #customerDetail .customer-detail-group:nth-child(n+2) { border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .page-view { padding: 18px 14px 32px; }
  #customerFilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #customerFilters label { min-width: 0; }
  #customerFilters label:first-child { grid-column: 1 / -1; }
  #customerFilters > .button { width: 100%; }
  #customerDetailView .customer-detail-hero { gap: 16px; }
  #customerDetailView .customer-detail-hero-actions { align-self: stretch; width: 100%; }
  #customerDetailView .customer-detail-hero-actions .button { flex: 1; }
  #customerDetailView .customer-detail-secondary-actions { border-left: 0; border-top: 1px solid var(--border); justify-content: stretch; margin: 4px 0 0; padding: 12px 0 0; width: 100%; }
  #customerDetailView .customer-detail-tab-nav { overflow-x: auto; padding: 0 8px; }
  #customerDetailView .customer-detail-tab-nav button { flex: 0 0 auto; }
  #customerDetailView .customer-detail-tab-panel > .section-title { align-items: flex-start; gap: 10px; }
  #customerProfilePanel .customer-profile-hero-copy p { font-size: 13px; }
  #customerProfilePanel .customer-profile-section h5 { font-size: 16px; }
  #customerProfilePanel .customer-profile-section p { font-size: 14px; line-height: 1.7; }
  .topbar { padding: 10px 14px; }
  .filter-card label { flex-basis: 100%; }
  .filter-card > .button { flex: 1; }
  .page-heading { flex-wrap: wrap; gap: 12px; }
  .page-heading h3, .workbench-heading h1 { font-size: 21px; }
  #customerDetail .customer-detail-grid { grid-template-columns: 1fr; }
  #customerDetail .customer-detail-field:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--border); }
  #customerDetail .customer-detail-field:last-child { border-bottom: 0; }
  .pagination { justify-content: flex-end; }
  .pagination > span { flex-basis: 100%; }
  #customersView table, #projectsView table { min-width: 850px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 工作空间公共规格：导航、检索、列表与弹窗共享同一套间距及控件密度。 */
.topbar-location { display: flex; align-items: center; gap: 12px; min-width: 0; }
.workspace-breadcrumb { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px; }
.workspace-breadcrumb button { border: 0; padding: 4px 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.workspace-breadcrumb button:hover { color: var(--primary); }
.workspace-breadcrumb [aria-current] { color: var(--text-primary); font-weight: 600; }
#breadcrumbSeparator { color: #c0c8d2; }
.topbar .global-search { display: flex; align-items: center; flex: 0 1 360px; width: 360px; min-width: 0; max-width: 360px; height: 38px; margin-left: auto; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: #f8fafc; }
.topbar .global-search:focus-within { border-color: #8ab5ee; background: #fff; box-shadow: var(--focus-ring); }
.global-search > span { display: flex; color: var(--text-tertiary); }
.global-search svg, .navigation-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.topbar .global-search input { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--text-primary); font-size: 13px; outline: none; box-shadow: none; }
.topbar .global-search button { display: inline-flex; align-items: center; flex: 0 0 auto; position: static; clip: auto; overflow: visible; width: auto; height: 26px; padding: 0 7px; background: #fff; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 4px; font-size: 12px; cursor: pointer; }
.topbar-context { flex-shrink: 0; }
.main-nav button:not(.active):focus:not(:focus-visible) { background: transparent; box-shadow: none; }
.main-nav button:not(.active):hover { background: #233e5a; }
.nav-section-label { letter-spacing: .06em; font-size: 11px; }
.navigation-toggle, .navigation-close, .navigation-scrim { display: none; }

.page-heading { margin-bottom: 20px; }
.page-heading p, .workbench-heading p { color: #667085; font-size: 13px; margin-top: 6px; }
.heading-actions .button.danger { background: #fff; border-color: #edc4c4; color: var(--danger); }
.heading-actions .button.danger:hover { background: #fff5f5; }
.filter-card .filter-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.filter-actions .button { min-width: 76px; margin: 0; order: 0; }
.filter-card label { display: grid; gap: 6px; }
.filter-card label :is(input, select) { margin: 0; }
.page-view .table-card > .table-scroll { max-height: min(65vh, 720px); }
.page-view .table-scroll table { border-collapse: separate; border-spacing: 0; width: 100%; }
.page-view .table-scroll thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; border-bottom: 1px solid var(--border); height: 44px; }
#customersView .table-scroll table, #projectsView .table-scroll table, #followView .table-scroll table { min-width: 1020px; }
/* 冻结首列只适用于桌面；手机上会占去大半屏并遮挡横向滑出的字段。 */
@media (min-width: 961px) {
  :is(#customersView, #projectsView) tbody td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--border); }
  :is(#customersView, #projectsView) thead th:first-child { left: 0; z-index: 3; }
}
.table-scroll-hint { display: none; }
.page-view tbody tr:hover td { background-color: #f4f8fe; }
.page-view tbody td { color: #344054; font-size: 14px; line-height: 22px; }
.primary-cell strong, #customersView .primary-cell strong { color: #235da5; font-size: 14px; font-weight: 600; }
.primary-cell small, .page-view td small { margin-top: 3px; color: #7a8698; line-height: 20px; }
.table-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.table-summary > strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.table-summary > span { color: var(--text-tertiary); font-size: 12px; }
.table-action { width: 80px; }
.table-action .text-button { border: 1px solid transparent; border-radius: 5px; padding: 4px 8px; min-height: 30px; }
.table-action .text-button:hover { background: #eaf2ff; border-color: #d7e7ff; }
.follow-customer-link { display: grid; gap: 3px; background: transparent; border: 0; padding: 0; color: #235da5; text-align: left; cursor: pointer; max-width: 250px; }
.follow-customer-link strong { font-size: 14px; font-weight: 600; }
.follow-customer-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.pagination button { border: 1px solid var(--border-strong); background: #fff; color: #344054; min-height: 34px; padding: 0 12px; font-size: 13px; }
.pagination button:hover:not(:disabled) { color: var(--primary); border-color: #9cbfec; background: #f6faff; }
.pagination button:disabled { color: #a5adba; background: #f9fafb; border-color: #e9edf2; cursor: not-allowed; }

#dashboardView .dashboard-actions-panel { display: flex; flex-direction: column; }
#dashboardView .overview-list { display: grid; gap: 0; padding: 0 18px; }
#dashboardView .overview-row { min-height: 54px; padding: 8px 0; }
#dashboardView .dashboard-metrics { gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#dashboardView .dashboard-metric { min-height: 96px; border: 0; border-radius: 0; box-shadow: none; padding: 18px 20px; }
#dashboardView .dashboard-metric + .dashboard-metric { border-left: 1px solid var(--border); }
#dashboardView .dashboard-metric-copy strong { font-size: 28px; line-height: 1.2; margin-top: 6px; }
#dashboardView .dashboard-bottom { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); align-items: stretch; }
#dashboardView .dashboard-bottom > section { margin: 0; }
.import-item-blocked .import-data-card { opacity: 1; }
.drop-zone { background: #fbfcfe; border-color: #b6c9e2; border-width: 1px; border-radius: 8px; }
.drop-zone:hover, .drop-zone:focus-within { background: #f3f8ff; border-color: var(--primary); }

#modal { width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 940px); padding: 0; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 24px 80px #10243d33; }
#modal:not(:has(.import-review-shell)) { overflow-y: auto; overflow-x: hidden; }
/* 文件审核保留宽工作区与内部滚动，错误提示出现时也不挤掉决策栏。 */
#modal[open]:has(.import-review-shell) { display: flex; flex-direction: column; width: min(1180px, calc(100vw - 32px)); height: min(88dvh, 940px); overflow: hidden; }
#modal:has(.import-review-shell) :is(.modal-head, #modalMessage) { flex: 0 0 auto; }
#modal:has(.import-review-shell) #modalBody { height: auto; flex: 1 1 auto; min-height: 0; }
.import-review-decision-bar { flex: 0 0 auto; }
#modal::backdrop { background: #172b4d66; backdrop-filter: blur(2px); }
#modal .modal-head { position: sticky; top: 0; z-index: 3; padding: 18px 24px; min-height: 64px; background: #fff; border-bottom: 1px solid var(--border); }
#modal .modal-head h3 { font-size: 18px; font-weight: 600; color: var(--text-primary); }
#modal .modal-head #modalTitle > span:last-child { color: var(--text-primary); font-size: 18px; line-height: 1.5; }
#modal .modal-head #modalTitle small { font-size: 13px; font-weight: 400; }
#modal :is(.project-create-title-icon, .transfer-title-icon) { flex: 0 0 40px; height: 40px; width: 40px; border-radius: 8px; }
#modal .icon-button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: #f3f5f8; color: var(--text-secondary); }
#modal .modal-form { padding: 22px 24px 0; gap: 18px 20px; }
#modal .modal-form label:has(> b) { display: block; }
#modal .modal-form label:has(> b) > :is(input, select, textarea) { display: block; margin-top: 8px; width: 100%; }
#modal .modal-form label:has(> b) > small { display: block; margin-top: 6px; }
#modal .modal-form :is(input:not([type="checkbox"]):not([type="radio"]), select) { height: 40px; min-height: 40px; border-radius: 6px; font-size: 14px; }
#modal .modal-form textarea { min-height: 96px; border-radius: 6px; font-size: 14px; }
#modal .modal-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; margin: 6px -24px 0; padding: 16px 24px; background: #fff; border-top: 1px solid var(--border); }
#modal .modal-actions .button { height: 38px; min-height: 38px; min-width: 88px; font-size: 14px; border-radius: 6px; }
#modal .modal-note { font-size: 13px; font-weight: 400; line-height: 22px; color: var(--text-secondary); }
#modalMessage:not(.hidden) { margin: 16px 24px 0; }
.auth-page { background: #f3f6fb; min-height: 100vh; }
.auth-card { max-width: 440px; padding: 36px; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 50px #1735580a; }
.auth-card .eyebrow { font-size: 12px; letter-spacing: .08em; color: var(--text-tertiary); margin-top: 20px; }
.auth-card h1 { color: var(--text-primary); font-size: 24px; line-height: 1.4; }
.auth-card .form-stack { gap: 18px; margin-top: 24px; }
.auth-card label { font-size: 13px; font-weight: 600; color: #344054; }
.auth-card input { height: 42px; margin-top: 6px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 14px; font-weight: 400; }
.auth-card .form-stack > .button { width: 100%; height: 42px; }

@media (max-width: 1250px) {
  #customerFilters .filter-actions { margin-left: 0; }
  .workspace-breadcrumb { max-width: 220px; overflow: hidden; }
  .topbar .global-search { flex-basis: 300px; }
}
@media (max-width: 960px) {
  .app-shell { display: block; }
  .navigation-open { overflow: hidden; }
  .navigation-toggle, .navigation-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text-secondary); cursor: pointer; }
  .navigation-close { position: absolute; top: 16px; right: 12px; width: 28px; height: 28px; background: #294561; color: #fff; border: 0; font-size: 23px; }
  #mainSidebar { position: fixed; z-index: 101; left: 0; top: 0; width: 280px; max-width: calc(100vw - 48px); height: 100dvh; padding: 18px 14px; overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform .18s ease, visibility .18s; }
  .navigation-open #mainSidebar { transform: translateX(0); visibility: visible; }
  #mainSidebar .sidebar-brand { padding-right: 28px; margin-bottom: 16px; }
  #mainSidebar .main-nav { display: grid; overflow: visible; gap: 4px; }
  #mainSidebar .main-nav button { width: 100%; }
  #mainSidebar .nav-section-label { display: block; }
  #mainSidebar .sidebar-user { display: grid; margin-top: 24px; }
  .navigation-scrim:not([hidden]) { display: block; position: fixed; z-index: 100; inset: 0; border: 0; background: #10243d66; width: 100%; height: 100%; cursor: pointer; }
  .topbar { gap: 12px; padding: 10px 20px; }
  .topbar-user > div { display: none; }
  .topbar-user { border-left: 0; padding-left: 0; }
  .workspace-breadcrumb { font-size: 12px; }
  #dashboardView .dashboard-bottom { grid-template-columns: 1fr; }
  #dashboardView .dashboard-metric:nth-child(3) { border-left: 0; }
  #dashboardView .dashboard-metric:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .topbar-location { flex: 1; }
  .topbar-context { gap: 10px; }
  .topbar .global-search { order: 3; flex: 1 0 100%; max-width: none; width: 100%; }
  .workspace-breadcrumb { max-width: none; }
  .filter-card .filter-actions, #customerFilters .filter-actions { grid-column: 1 / -1; flex-basis: 100%; width: 100%; padding-top: 4px; }
  .filter-actions .button { flex: 1; }
  .page-view .table-card > .table-scroll { max-height: 65vh; }
  #dashboardView .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboardView .dashboard-metric { padding: 16px; }
  #dashboardView .dashboard-actions { grid-auto-rows: auto; }
  #modal { width: calc(100vw - 20px); max-height: 92dvh; border-radius: 10px; }
  #modal .modal-head { padding: 14px 16px; }
  #modal .modal-form { padding: 18px 16px 0; gap: 16px; grid-template-columns: 1fr; }
  #modal .modal-actions { margin: 4px -16px 0; padding: 14px 16px; }
  #modal .modal-actions .button { flex: 1; }
  #modalMessage:not(.hidden) { margin: 12px 16px 0; }
  .auth-card { padding: 28px 22px; }
}

/* 触屏列表：整张表横滑，页面负责纵向滚动，不让窄屏卡在表格内部。 */
@media (max-width: 960px) {
  .page-view .table-card > .table-scroll { max-height: none; -webkit-overflow-scrolling: touch; }
  .page-view .table-scroll thead th { position: static; }
  .table-scroll-hint { display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--border); background: #f8fafc; color: var(--text-secondary); font-size: 12px; }
  .table-scroll-hint > span { color: var(--primary); font-size: 18px; line-height: 1; }
  /* 固定列宽防止长公司名把整张表撑宽；完整名称保留换行，不依赖手机无法悬停的 title。 */
  #customersView .table-scroll table { table-layout: fixed; width: 960px; min-width: 960px; }
  #customersView .table-scroll :is(th, td) { padding: 12px; overflow-wrap: anywhere; }
  #customersView .table-scroll th:nth-child(1) { width: 164px; }
  #customersView .table-scroll th:nth-child(2) { width: 148px; }
  #customersView .table-scroll th:nth-child(3) { width: 132px; }
  #customersView .table-scroll th:nth-child(4) { width: 100px; }
  #customersView .table-scroll th:nth-child(5) { width: 108px; }
  #customersView .table-scroll th:nth-child(6) { width: 96px; }
  #customersView .table-scroll th:nth-child(7) { width: 124px; }
  #customersView .table-scroll th:nth-child(8) { width: 88px; }
  #customersView .primary-cell { min-width: 0; max-width: none; }
  #customersView .primary-cell strong { line-height: 1.6; }
  #customersView .primary-cell small { font-size: 11px; }
  .page-view .table-action .text-button, #customersView .table-action .text-button { min-height: 44px; min-width: 56px; }
  .page-view .pagination button { min-height: 44px; padding: 8px 14px; }
}

@media (max-width: 640px) {
  /* 显式使用 grid，修正此前仅设置列数但仍为 flex、筛选项逐个占满一行的问题。 */
  #customerFilters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
  #customerFilters label { min-width: 0; width: auto; }
  #customerFilters label:first-child, #customerFilters .filter-actions { grid-column: 1 / -1; }
  #customerFilters :is(input, select) { min-height: 44px; height: 44px; font-size: 16px; }
  #customerFilters .filter-actions { margin: 0; padding: 0; gap: 10px; }
  #customerFilters .filter-actions .button { min-height: 44px; min-width: 0; }
  #customersView .page-heading { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; }
  #customersView .page-heading p { display: none; }
  #customersView .page-heading > div { flex: 1 1 auto; min-width: 0; }
  #customersView .page-heading h3 { white-space: nowrap; }
  #refreshCustomers { flex: 0 0 auto; width: auto; min-height: 44px; }
  #customersView .table-summary { flex-wrap: wrap; padding: 10px 14px; gap: 4px 12px; }
  #openDuplicateCheck { min-height: 44px; }
  #customerPagination { justify-content: space-between; gap: 8px; padding: 12px 14px; }
  #customerPagination > span { flex-basis: 100%; font-size: 12px; }
  #customerPagination button { flex: 1; }
}