.page-crm-ui {
  --crm-ink: #163133;
  --crm-muted: #617477;
  --crm-line: #d9e7e4;
  --crm-soft: #f3faf8;
  --crm-teal: #0f766e;
  --crm-gold: #b7791f;
  background: #f6f9f8;
  color: var(--crm-ink);
}
.page-crm-ui .main-shell { min-width: 0; max-width: 1440px; }
.crm-page-head,
.crm-section-head,
.crm-head-actions,
.crm-status-strip,
.crm-customer-row,
.crm-task-list article,
.crm-contact-list article,
.crm-transition-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.crm-page-head { margin: 0 0 20px; align-items: flex-end; }
.crm-page-head h1 { margin: 3px 0 5px; font-size: clamp(1.75rem, 4vw, 2.6rem); color: #102a2c; }
.crm-page-head p,
.crm-card p,
.crm-customer-row span,
.crm-task-list span,
.crm-card small { color: var(--crm-muted); }
.crm-head-actions { flex-wrap: wrap; justify-content: flex-end; }
.crm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.crm-kpi-grid article,
.crm-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--crm-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 52, 50, .055);
}
.crm-kpi-grid article { display: grid; gap: 5px; min-height: 112px; align-content: center; }
.crm-kpi-grid span,
.crm-kpi-grid small { color: var(--crm-muted); font-size: .82rem; font-weight: 700; }
.crm-kpi-grid strong { font-size: 1.35rem; overflow-wrap: anywhere; }
.crm-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #eaf5f2;
}
.crm-search label,
.crm-form label,
.crm-inline-form label { display: grid; gap: 6px; font-weight: 700; color: #29494a; }
.crm-search input,
.crm-form input,
.crm-form select,
.crm-form textarea,
.crm-inline-form input,
.crm-inline-form select,
.crm-transition-form input,
.crm-transition-form select {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #bcd2ce;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  color: #132f31;
  font: inherit;
}
.crm-form textarea { min-height: 96px; resize: vertical; }
.crm-card { margin-bottom: 16px; }
.crm-section-head { margin-bottom: 14px; align-items: flex-start; }
.crm-section-head h2 { margin: 2px 0; }
.crm-customer-list,
.crm-task-list,
.crm-contact-list,
.crm-duplicate-list,
.crm-timeline { display: grid; gap: 10px; }
.crm-customer-row,
.crm-task-list article,
.crm-duplicate-list article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--crm-line);
  border-radius: 13px;
  background: #fcfefd;
}
.crm-customer-row > div,
.crm-task-list article > div { min-width: 0; display: grid; gap: 3px; }
.crm-customer-row > div:first-child { flex: 1.4; }
.crm-customer-row a,
.crm-task-list a { color: #0d625d; }
.status-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e7f6f2;
  color: #0d625d;
  font-size: .78rem;
  font-weight: 800;
}
.crm-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 28px;
  border: 1px dashed #aac8c2;
  border-radius: 13px;
  background: var(--crm-soft);
}
.crm-form fieldset { margin: 0 0 18px; padding: 16px; border: 1px solid var(--crm-line); border-radius: 14px; }
.crm-form legend { padding: 0 8px; color: #0d625d; font-weight: 850; }
.crm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.crm-contact-row {
  display: grid;
  grid-template-columns: .7fr 1.3fr 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--crm-line);
}
.crm-check { grid-template-columns: 24px minmax(0, 1fr) !important; align-items: center; min-height: 44px; }
.crm-check input { width: 20px; min-height: 20px; }
.crm-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 14px;
  background: #eaf7f3;
}
.crm-status-strip.is-danger { background: #fff0ef; border: 1px solid #efb4ad; }
.crm-status-strip div { display: grid; gap: 3px; }
.crm-status-strip small { color: var(--crm-muted); }
.crm-detail-grid,
.crm-merge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.crm-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.crm-facts div { padding: 11px; border-radius: 10px; background: var(--crm-soft); }
.crm-facts dt { color: var(--crm-muted); font-size: .78rem; font-weight: 750; }
.crm-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: 750; }
.crm-contact-list article { padding: 11px; border: 1px solid var(--crm-line); border-radius: 10px; }
.crm-contact-list article > div { display: grid; gap: 2px; }
.crm-contact-list code { overflow-wrap: anywhere; color: #173f41; }
.crm-inline-form {
  display: grid;
  grid-template-columns: .8fr 1.2fr .8fr auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--crm-line);
}
.crm-timeline article { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 14px; border-left: 4px solid #55aa9e; background: var(--crm-soft); border-radius: 9px; }
.crm-timeline article > div { display: grid; gap: 4px; }
.crm-timeline p { margin: 3px 0 0; }
.crm-follow-form { margin-top: 18px; border-top: 1px solid var(--crm-line); padding-top: 18px; }
.crm-transition-form { width: 100%; flex-wrap: wrap; }
.crm-transition-form input { flex: 1; }
.crm-duplicate-list article { display: grid; gap: 12px; }
.crm-merge-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; text-align: center; }
.crm-warning-card { border-color: #e6bd78; background: #fffaf0; }
.crm-warning-card li { margin: 8px 0; }
.page-crm-ui :is(a, button) { display: inline-flex; align-items: center; justify-content: center; }
.page-crm-ui :is(a, button, input:not([type="hidden"]), select, textarea) { min-height: 44px; }
.page-crm-ui :focus-visible { outline: 3px solid #0f766e; outline-offset: 3px; }

@media (max-width: 1024px) {
  .crm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-customer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .crm-page-head,
  .crm-section-head { align-items: stretch; flex-direction: column; }
  .crm-head-actions { justify-content: stretch; }
  .crm-head-actions > * { flex: 1; }
  .crm-detail-grid,
  .crm-merge-grid { grid-template-columns: 1fr; }
  .crm-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .crm-contact-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-crm-ui .main-shell { padding-inline: 12px; }
  .crm-kpi-grid,
  .crm-form-grid,
  .crm-search,
  .crm-customer-row,
  .crm-inline-form,
  .crm-facts,
  .crm-merge-pair { grid-template-columns: 1fr; }
  .crm-task-list article,
  .crm-contact-list article { align-items: stretch; flex-direction: column; }
  .crm-timeline article { grid-template-columns: 1fr; }
  .crm-card { padding: 14px; }
}


/* Gate 21 · CRM customer data quality */
.customer-quality-panel,
.crm-quality-warning {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #c9d9d5;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4fbf9, #fff);
  color: #173f41;
}
.customer-quality-panel > div:first-child { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crm-quality { display: inline-flex; width: fit-content; margin-top: 5px; padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 850; }
.crm-quality--complete { color: #0b6b54; background: #dff7ee; }
.crm-quality--crm_ready { color: #175b7a; background: #e4f3fb; }
.crm-quality--incomplete { color: #8b5b0b; background: #fff3d5; }
.crm-quality--missing { color: #a23636; background: #ffe6e6; }
.crm-status-strip--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 768px) { .crm-status-strip--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }