/*
 * 作者：尖沙咀段坤
 * 修改日期：2026-11-11 02:04:51
 * 修改日志：
 * 2026-11-08 23:03:43：建立 CRM 独立样式入口并增加业务字典布局。
 * 2026-11-09 11:00:00：增加客户详情追踪、会话、消息时间线和交接记录布局。
 * 2026-11-09 14:10:00：增加 CRM 看板指标卡和日期筛选布局。
 * 2026-11-09 16:20:00：增加客户列表分页控件布局。
 * 2026-11-10 00:44:00：增加通讯资源分区、丰富表格次要信息和结构化人工统计指标布局。
 * 2026-11-10 00:11:51：增加旧版宽客户表格的长文本截断和未分配状态样式。
 * 2026-11-10 01:41:45：增加交易宽表和预约风险沟通指引的正式页面样式。
 * 2026-11-10 02:11:47：适配拆分后的资源和考核交易页面，并恢复接粉指标卡交互样式。
 * 2026-11-10 02:14:09：增加机构工作台 CRM 业务中心的入口卡片布局。
 * 2026-11-10 02:39:09：重构客户详情渠道追溯为会话列表、筛选工具栏、消息卡片、附件与分页双栏布局。
 * 2026-11-10 02:50:03：增加客户日常资料维护八项指引的紧凑卡片布局。
 * 2026-11-10 02:56:15：将业务字典恢复为可搜索分类与选项明细并列的主从工作台。
 * 2026-11-10 03:03:54：增加接粉渠道及联系人分区卡片和当前渠道高亮样式。
 * 2026-11-11 02:04:51：统一 CRM 搜索筛选栏、输入组件、主要按钮和表格操作按钮的尺寸、间距、颜色及响应式布局。
 */

/* CRM 筛选栏使用独立组件规范，避免继承全局表单标签间距后出现错位和字段挤压。 */
#content[data-page^="crm"] .toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #dce6f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgb(46 91 136 / 5%);
}

#content[data-page^="crm"] .toolbar > label {
  display: grid;
  flex: 0 1 156px;
  gap: 6px;
  min-width: 128px;
  margin: 0;
  color: #596b80;
  font-size: 12px;
  font-weight: 650;
}

#content[data-page^="crm"] .toolbar > label:has(input[name="keyword"]) {
  flex-basis: 250px;
  min-width: 210px;
}

#content[data-page^="crm"] .toolbar input,
#content[data-page^="crm"] .toolbar select,
#content[data-page="crmDictionaries"] .crm-dictionary-filter input {
  height: 40px;
  min-width: 0;
  padding: 0 12px;
  border-color: #cfdbe8;
  border-radius: 8px;
  color: #1e3047;
  background-color: #fff;
  box-shadow: 0 1px 2px rgb(31 46 64 / 3%);
  outline: none;
}

#content[data-page^="crm"] .toolbar input:focus,
#content[data-page^="crm"] .toolbar select:focus,
#content[data-page="crmDictionaries"] .crm-dictionary-filter input:focus {
  border-color: #2f80ed;
  box-shadow: 0 0 0 3px rgb(47 128 237 / 13%);
}

#content[data-page^="crm"] .toolbar > button,
#content[data-page="crmDictionaries"] .crm-dictionary-filter button {
  flex: 0 0 auto;
  min-width: 72px;
  height: 40px;
  padding: 0 15px;
  border-color: #cfdae7;
  border-radius: 8px;
  color: #40556f;
  background: #f8fafc;
  box-shadow: none;
}

#content[data-page^="crm"] .toolbar > button:hover,
#content[data-page="crmDictionaries"] .crm-dictionary-filter button:hover {
  border-color: #9cb7d4;
  color: #245d9c;
  background: #f0f6fc;
}

#content[data-page^="crm"] .toolbar > button.brand,
#content[data-page^="crm"] .toolbar > button.primary,
#content[data-page="crmDictionaries"] .crm-dictionary-filter button.primary {
  border-color: #2f80ed;
  color: #fff;
  background: #2f80ed;
}

#content[data-page^="crm"] .toolbar > button.brand:hover,
#content[data-page^="crm"] .toolbar > button.primary:hover,
#content[data-page="crmDictionaries"] .crm-dictionary-filter button.primary:hover {
  border-color: #1f70df;
  color: #fff;
  background: #1f70df;
}

#content[data-page^="crm"] .toolbar > .muted {
  align-self: center;
  margin-left: auto;
  padding: 0 2px;
  white-space: nowrap;
  font-size: 12px;
}

/* 页面主操作和表格行操作使用一致层级，危险操作仅保留红色语义。 */
#content[data-page^="crm"] .page-head > button,
#content[data-page^="crm"] .page-head-actions > button {
  min-height: 40px;
  padding: 8px 14px;
  border-color: #cfdae7;
  color: #40556f;
  background: #fff;
  box-shadow: none;
}

#content[data-page^="crm"] .page-head > button:hover,
#content[data-page^="crm"] .page-head-actions > button:hover {
  border-color: #9cb7d4;
  color: #245d9c;
  background: #f0f6fc;
}

#content[data-page^="crm"] .page-head button.primary,
#content[data-page^="crm"] .page-head-actions button.primary,
#content[data-page^="crm"] .crm-dictionary-actions button.primary {
  border-color: #2f80ed;
  color: #fff;
  background: #2f80ed;
  box-shadow: 0 3px 10px rgb(47 128 237 / 16%);
}

#content[data-page^="crm"] .table-card td:last-child button,
#content[data-page^="crm"] .crm-dictionary-section > header button,
#content[data-page^="crm"] .crm-dictionary-actions button,
#content[data-page^="crm"] .crm-pagination button {
  min-height: 32px;
  padding: 5px 10px;
  border-color: #d5e2ef;
  border-radius: 7px;
  color: #2f6da9;
  background: #f3f8fd;
  box-shadow: none;
  font-size: 12px;
  white-space: nowrap;
}

#content[data-page^="crm"] .table-card td:last-child button + button {
  margin-left: 4px;
}

#content[data-page^="crm"] .table-card td:last-child button:hover,
#content[data-page^="crm"] .crm-dictionary-section > header button:hover,
#content[data-page^="crm"] .crm-dictionary-actions button:hover,
#content[data-page^="crm"] .crm-pagination button:not(:disabled):hover {
  border-color: #91b6da;
  color: #1d5c99;
  background: #e8f2fc;
}

#content[data-page^="crm"] .table-card td:last-child button.danger,
#content[data-page^="crm"] .crm-dictionary-actions button.danger {
  border-color: #f1c9c9;
  color: #b42318;
  background: #fff6f5;
}

#content[data-page^="crm"] .table-card td:last-child button.danger:hover,
#content[data-page^="crm"] .crm-dictionary-actions button.danger:hover {
  border-color: #e8aaaa;
  color: #9f1f16;
  background: #ffedeb;
}

#content[data-page^="crm"] .crm-pagination button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

#content[data-page="crmDictionaries"] .crm-dictionary-layout {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 16px;
  min-height: 540px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-master,
#content[data-page="crmDictionaries"] .crm-dictionary-detail {
  min-width: 0;
  border: 1px solid #e2e8ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgb(31 46 64 / 5%);
  overflow: hidden;
}

#content[data-page="crmDictionaries"] .crm-dictionary-master {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 14px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-filter {
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e7ecf2;
}

#content[data-page="crmDictionaries"] .crm-dictionary-filter label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: #596b80;
  font-size: 12px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-filter div,
#content[data-page="crmDictionaries"] .crm-dictionary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#content[data-page="crmDictionaries"] .crm-dictionary-master-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px 10px;
  color: #75839a;
  font-size: 12px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-master-meta b {
  color: #315f8e;
}

#content[data-page="crmDictionaries"] .crm-dictionary-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  max-height: 430px;
  overflow: auto;
}

#content[data-page="crmDictionaries"] .crm-dictionary-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 66px;
  padding: 10px;
  border: 1px solid #dfe7ef;
  border-radius: 10px;
  background: #fff;
  color: #27364a;
  text-align: left;
  transition: border-color .18s, background .18s, box-shadow .18s;
}

#content[data-page="crmDictionaries"] .crm-dictionary-type:hover {
  border-color: #8ab8df;
}

#content[data-page="crmDictionaries"] .crm-dictionary-type.active {
  border-color: #4f86bd;
  background: #edf5fd;
  box-shadow: 0 0 0 2px rgb(79 134 189 / 10%);
}

#content[data-page="crmDictionaries"] .crm-dictionary-type > span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#content[data-page="crmDictionaries"] .crm-dictionary-type b,
#content[data-page="crmDictionaries"] .crm-dictionary-type small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#content[data-page="crmDictionaries"] .crm-dictionary-type small {
  color: #75839a;
  font-size: 10px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-type .tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
}

#content[data-page="crmDictionaries"] .crm-dictionary-detail {
  display: flex;
  flex-direction: column;
}

#content[data-page="crmDictionaries"] .crm-dictionary-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px;
  border-bottom: 1px solid #e7ecf2;
  background: #f9fbfd;
}

#content[data-page="crmDictionaries"] .crm-dictionary-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-title h2,
#content[data-page="crmDictionaries"] .crm-dictionary-detail > header p {
  margin: 0;
}

#content[data-page="crmDictionaries"] .crm-dictionary-title h2 {
  color: #1d2939;
  font-size: 18px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-detail > header p {
  margin-top: 6px;
  color: #75839a;
  font-size: 12px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #e7ecf2;
}

#content[data-page="crmDictionaries"] .crm-dictionary-summary span {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid #e5ebf1;
  border-radius: 9px;
  background: #f8fafc;
  color: #75839a;
  font-size: 11px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-summary b {
  color: #27364a;
  font-size: 13px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-detail .table-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#content[data-page="crmDictionaries"] .crm-code-value {
  color: #315f8e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

#content[data-page="crmDictionaries"] .crm-dictionary-empty {
  display: grid;
  place-items: center;
}

#modal:has(#crmCustomerForm) {
  width: min(1120px, calc(100% - 30px));
}

.crm-maintenance-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.crm-maintenance-guide article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce7f5;
  border-radius: 11px;
  background: #f8fbff;
}

.crm-maintenance-guide article > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e7f1fc;
  color: #3974ad;
  font-weight: 700;
}

.crm-maintenance-guide b,
.crm-maintenance-guide p {
  margin: 0;
}

.crm-maintenance-guide p {
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

#modalContent .crm-customer-trace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

#modalContent .crm-customer-trace section {
  border: 1px solid #e2e8ef;
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
}

#modalContent .crm-customer-trace h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

#modalContent .crm-customer-trace ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#modalContent .crm-customer-trace li {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8edf2;
  font-size: 12px;
}

#modalContent .crm-customer-trace time,
#modalContent .crm-customer-trace small {
  color: #64748b;
}

#modalContent .crm-customer-trace .crm-customer-channel-trace {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

#modalContent .crm-customer-channel-trace > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8ef;
}

#modalContent .crm-customer-channel-trace > header h3,
#modalContent .crm-customer-channel-trace > header p {
  margin: 0;
}

#modalContent .crm-customer-channel-trace > header p {
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
}

#modalContent .crm-customer-channel-trace > header strong {
  color: #315f8e;
  font-size: 12px;
  white-space: nowrap;
}

#modalContent .crm-trace-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid #e7ecf2;
  background: #f8fafc;
}

#modalContent .crm-trace-filter select {
  min-width: 140px;
}

#modalContent .crm-trace-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  min-height: 420px;
}

#modalContent .crm-trace-layout > aside {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 520px;
  padding: 12px;
  overflow: auto;
  border-right: 1px solid #e2e8ef;
  background: #f8fafc;
}

#modalContent .crm-trace-conversation {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 11px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
  color: #27364a;
  text-align: left;
}

#modalContent .crm-trace-conversation.active {
  border-color: #4f86bd;
  background: #edf5fd;
  box-shadow: 0 0 0 2px rgb(79 134 189 / 10%);
}

#modalContent .crm-trace-conversation > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#modalContent .crm-trace-conversation time {
  font-size: 10px;
  white-space: nowrap;
}

#modalContent .crm-trace-timeline {
  min-width: 0;
  padding: 14px;
}

#modalContent #crmCustomerTimelineList {
  display: grid;
  gap: 10px;
  max-height: 450px;
  overflow: auto;
}

#modalContent .crm-trace-message {
  display: grid;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #dfe7ef;
  border-left: 4px solid #52a675;
  border-radius: 10px;
  background: #fff;
}

#modalContent .crm-trace-message.is-outbound {
  border-left-color: #4f7fc4;
  background: #f7faff;
}

#modalContent .crm-trace-message > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#modalContent .crm-trace-message p {
  margin: 0;
  color: #314154;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

#modalContent .crm-trace-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #cfdceb;
  border-radius: 9px;
  background: #eef5fc;
  color: #315f8e;
  text-decoration: none;
}

#modalContent .crm-trace-attachment.is-locked {
  color: #64748b;
  background: #f1f3f5;
}

#modalContent .crm-trace-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 900px) {
  .crm-maintenance-guide { grid-template-columns: 1fr; }
  #modalContent .crm-customer-trace { grid-template-columns: 1fr; }
  #modalContent .crm-trace-layout { grid-template-columns: 1fr; }
  #modalContent .crm-trace-layout > aside { max-height: 260px; border-right: 0; border-bottom: 1px solid #e2e8ef; }
  #modalContent .crm-trace-filter select { width: 100%; }
}

@media (max-width: 980px) {
  #content[data-page="crmDictionaries"] .crm-dictionary-layout { grid-template-columns: 1fr; }
  #content[data-page="crmDictionaries"] .crm-dictionary-types { max-height: 270px; }
}

@media (max-width: 760px) {
  #content[data-page="crmDictionaries"] .crm-dictionary-types,
  #content[data-page="crmDictionaries"] .crm-dictionary-summary { grid-template-columns: 1fr; }
  #content[data-page="crmDictionaries"] .crm-dictionary-detail > header { flex-direction: column; }
}
#content[data-page^="crm"] .crm-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

#content[data-page^="crm"] .crm-dashboard-metrics article,
#content[data-page^="crm"] .crm-dashboard-metrics button {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid #e2e8ef;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-align: left;
}

#content[data-page^="crm"] .crm-dashboard-metrics span { color: #75839a; font-size: 12px; }
#content[data-page^="crm"] .crm-dashboard-metrics strong { color: #203553; font-size: 23px; }
#content[data-page^="crm"] .crm-dashboard-metrics button { cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
#content[data-page^="crm"] .crm-dashboard-metrics button:hover { border-color: #8ab8df; box-shadow: 0 8px 20px rgb(41 112 255 / 9%); transform: translateY(-1px); }
#content[data-page^="crm"] .crm-dashboard-metrics button.active { border-color: #3678bf; background: #f2f7fd; box-shadow: 0 0 0 2px rgb(54 120 191 / 10%); }
#content[data-page^="crm"] .crm-dashboard-metrics button small { color: #338062; font-size: 11px; }
#content[data-page^="crm"] .crm-lead-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.crm-dashboard-detail { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:9px 14px; border:1px solid #dce8f3; border-radius:10px; background:#f5f9fd; color:#536a84; font-size:12px; }
.crm-dashboard-detail small { color:#75839a; }
.crm-dashboard-detail button { margin-left:auto; border:0; background:transparent; color:#3678bf; }

.crm-pagination { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 4px; color:#75839a; font-size:12px; }
.crm-pagination label { display:flex; align-items:center; gap:5px; }
.crm-pagination select { min-width:62px; }

:is(#content[data-page="crmLeadChannels"], #content[data-page="crmDevices"], #content[data-page="crmWsNumbers"]) .crm-dictionary-section {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e2e8ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgb(31 46 64 / 5%);
}

:is(#content[data-page="crmLeadChannels"], #content[data-page="crmDevices"], #content[data-page="crmWsNumbers"]) .crm-dictionary-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e7ecf2;
  background: #f9fbfd;
}

:is(#content[data-page="crmLeadChannels"], #content[data-page="crmDevices"], #content[data-page="crmWsNumbers"]) .crm-dictionary-section > header h2 { margin: 0; font-size: 16px; }
:is(#content[data-page="crmLeadChannels"], #content[data-page="crmDevices"], #content[data-page="crmWsNumbers"]) .crm-dictionary-section > header span { color: #75839a; font-size: 12px; }
:is(#content[data-page="crmLeadChannels"], #content[data-page="crmDevices"], #content[data-page="crmWsNumbers"]) .crm-dictionary-section .table-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
#content[data-page="crmLeadChannels"] .crm-row-selected td { background: #edf5fd; }
#content[data-page="crmLeadChannels"] .crm-row-selected td:first-child { box-shadow: inset 3px 0 #4f86bd; }
#content[data-page^="crm"] table td small { display: block; margin-top: 4px; color: #75839a; white-space: nowrap; }

#content[data-page="crmCustomers"] .crm-wide-table { min-width: 2500px; }
:is(#content[data-page="crmTrades"], #content[data-page="crmExamTrades"]) .crm-wide-table { min-width: 2050px; }
#content[data-page="crmCustomers"] .crm-cell-long { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#content[data-page^="crm"] .status-warn { color: #a56314; font-weight: 600; }

.crm-statistic-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 6px;
  min-width: 320px;
}

.crm-statistic-values span {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid #e7ecf2;
  border-radius: 8px;
  background: #f9fbfd;
}

.crm-statistic-values small { color: #75839a; font-size: 10px; }
.crm-statistic-values b { color: #203553; font-size: 14px; }
.crm-number-negative { color: #c84242; }

.crm-compliance-guide {
  display: grid;
  gap: 12px;
  max-height: 68vh;
  overflow-y: auto;
  padding-right: 5px;
}

.crm-compliance-guide section {
  padding: 14px 16px;
  border: 1px solid #e0eaf6;
  border-radius: 12px;
  background: #fff;
}

.crm-compliance-guide .crm-guide-intro { border-color: #cfe2fa; background: #f2f8ff; }
.crm-compliance-guide h3 { margin: 0 0 9px; color: #29496e; font-size: 14px; }
.crm-compliance-guide p,
.crm-compliance-guide li { color: #5f728a; font-size: 12px; line-height: 1.8; }
.crm-compliance-guide ol,
.crm-compliance-guide ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.crm-compliance-guide .crm-guide-note { margin: 0; padding: 12px 14px; border-left: 3px solid #f4aa52; border-radius: 8px; background: #fff8ed; color: #81613b; }

.crm-feature-center { margin-top: 18px; }
.crm-feature-center > header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.crm-feature-center > header h2 { margin:0 0 4px; font-size:18px; }
.crm-feature-center > header p { margin:0; color:#75839a; font-size:12px; }
.crm-feature-center > header strong { color:#3678bf; font-size:14px; }
.crm-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.crm-feature-grid button { position:relative; display:grid; gap:5px; min-height:92px; padding:15px 42px 15px 16px; border:1px solid #e0e8f0; border-radius:12px; background:linear-gradient(145deg,#fff,#f8fbfd); color:inherit; text-align:left; transition:border-color .18s,box-shadow .18s,transform .18s; }
.crm-feature-grid button:hover { border-color:#8ab8df; box-shadow:0 8px 22px rgb(41 112 255 / 9%); transform:translateY(-1px); }
.crm-feature-grid b { color:#203553; font-size:14px; }
.crm-feature-grid span { color:#75839a; font-size:11px; line-height:1.5; }
.crm-feature-grid em { position:absolute; right:14px; top:50%; color:#3678bf; font-size:11px; font-style:normal; transform:translateY(-50%); }

@media (max-width: 760px) {
  #content[data-page^="crm"] .toolbar { align-items: stretch; }
  #content[data-page^="crm"] .toolbar > label { flex: 1 1 calc(50% - 5px); min-width: 150px; }
  #content[data-page^="crm"] .toolbar > label:has(input[name="keyword"]) { flex-basis: 100%; min-width: 100%; }
  #content[data-page^="crm"] .toolbar > button { flex: 1 1 110px; }
  #content[data-page^="crm"] .toolbar > .muted { width: 100%; margin-left: 0; }
  #content[data-page^="crm"] .crm-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-dashboard-detail { align-items:flex-start; flex-direction:column; }
  .crm-dashboard-detail button { margin-left:0; }
  .crm-feature-grid { grid-template-columns:1fr; }
}

@media (max-width: 520px) {
  #content[data-page^="crm"] .toolbar > label { flex-basis: 100%; min-width: 100%; }
}