:root {
  --brand-900: #163b5c;
  --brand-800: #1f4e79;
  --brand-700: #245f96;
  --brand-600: #2e75b6;
  --brand-100: #eaf2fb;
  --surface: #ffffff;
  --page: #f3f6fa;
  --line: #d8e1eb;
  --text: #172033;
  --muted: #5f6b7a;
  --green-text: #006100;
  --green-bg: #c6efce;
  --yellow-text: #7f5200;
  --yellow-bg: #ffeb9c;
  --red-text: #9c0006;
  --red-bg: #ffc7ce;
  --el-color-primary: #1f4e79;
  --el-color-primary-light-3: #245f96;
  --el-color-primary-light-5: #2e75b6;
  --el-border-color: #c9d5e2;
  --el-text-color-primary: #172033;
  --el-text-color-regular: #374151;
  --el-text-color-secondary: #5f6b7a;
  --el-text-color-placeholder: #6b7280;
  --el-fill-color-blank: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body {
  min-width: 320px;
  background: var(--page);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 15px;
}
[v-cloak] { display: none; }
button, input, textarea { font: inherit; }
.el-message--success .el-message__content { color: #2f681c; }

.login-page {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 44px;
  padding: 48px 32px;
  background: var(--page);
}
.login-layout { width: min(1000px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 410px; align-items: center; gap: 72px; }
.login-identity { min-width: 0; }
.login-brand-image { display: block; width: 260px; max-width: 100%; height: auto; }
.login-company { margin: 18px 0 0; color: var(--muted); font-size: 16px; }
.login-identity h1 { margin: 40px 0 12px; color: var(--brand-900); font-size: 36px; line-height: 1.3; font-weight: 700; letter-spacing: .02em; }
.login-product-note { margin: 0; color: var(--brand-800); font-size: 17px; line-height: 1.7; }
.login-card {
  width: 100%;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(31,78,121,.07);
}
.login-card h2 { margin: 0; color: var(--brand-900); font-size: 24px; }
.login-subtitle { margin: 9px 0 28px; color: var(--muted); }
.login-security { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.login-footer { margin: 0; color: var(--muted); font-size: 13px; }
.login-card .el-input__wrapper, .login-card .el-button { min-height: 44px; }
.full-button { width: 100%; font-weight: 700; }

.crm-shell { width: 100%; min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 228px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 14px 16px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #173d60 0%, #1f4e79 100%);
  box-shadow: 2px 0 12px rgba(23,59,92,.12);
}
.brand-block { display: flex; flex-direction: column; align-items: center; flex: none; gap: 10px; min-width: 0; padding: 18px 16px 15px; margin: -20px -14px 0; background: #fff; border-bottom: 1px solid var(--line); }
.brand-logo-image { display: block; width: 184px; max-width: 100%; height: auto; }
.brand-block h1 { margin: 0; font-size: 15px; color: var(--brand-800); line-height: 1.4; letter-spacing: .04em; }
.main-nav { min-width: 0; min-height: 0; display: grid; align-content: start; gap: 4px; margin: 0; padding: 10px 2px 12px; overflow-y: auto; scrollbar-gutter: stable; }
.nav-group-title { margin: 8px 8px 3px; color: #c9ddef; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.main-nav button {
  width: 100%; min-height: 40px; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 6px 9px; border: 1px solid transparent; border-radius: 7px;
  color: #eaf2fb; background: transparent; font-weight: 700; text-align: left; cursor: pointer;
}
.main-nav button:hover, .main-nav button.active { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; }
.main-nav button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.main-nav button.planned-nav-item { color: #d9e7f4; cursor: default; opacity: .78; }
.main-nav button.planned-nav-item:hover { border-color: transparent; background: transparent; color: #d9e7f4; }
.main-nav button small { padding: 2px 5px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; color: #dceaf7; font-size: 10px; font-weight: 700; }
.nav-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; background: rgba(0,0,0,.22); font-size: 12px; }
.sidebar-foot { flex: none; display: grid; gap: 4px; margin-top: auto; padding: 12px 8px 2px; border-top: 1px solid rgba(255,255,255,.22); }
.sidebar-foot strong { font-size: 13px; }
.sidebar-foot span { color: #c9ddef; font-size: 11px; line-height: 1.45; }

.workspace { width: 100%; min-width: 0; min-height: 100vh; }
.topbar {
  min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: #fff;
}
.topbar-heading { flex: none; }
.crumb { margin: 0 0 3px; color: var(--muted); font-size: 12px; }
.topbar h2 { margin: 0; color: var(--brand-900); font-size: 22px; }
.topbar-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.topbar-nav-button {
  min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid #a9c1d8; border-radius: 7px; background: #f6f9fc; color: var(--brand-900); font: inherit; font-weight: 800; cursor: pointer;
}
.topbar-nav-button:hover, .topbar-nav-button.active { border-color: var(--brand-700); background: var(--brand-100); }
.topbar-nav-button:focus-visible { outline: 3px solid var(--brand-800); outline-offset: 2px; }
.topbar-nav-button .nav-icon { color: #fff; background: var(--brand-800); }
.scope-badge { padding: 7px 10px; border: 1px solid #abc4dc; border-radius: 6px; background: #edf4fb; color: var(--brand-900); font-weight: 700; font-size: 12px; }
.topbar-user-chip { display: grid; gap: 1px; min-width: 86px; padding-left: 11px; border-left: 1px solid var(--line); }
.topbar-user-chip strong { color: #1f2937; font-size: 13px; }
.topbar-user-chip span { color: var(--muted); font-size: 11px; }
.logout-button.el-button { min-height: 40px; color: var(--brand-900); border-color: #9eb7cf; background: #fff; font-weight: 700; }
.logout-button.el-button:hover { color: #fff; border-color: var(--brand-800); background: var(--brand-800); }
.logout-button.el-button:focus-visible { outline: 3px solid var(--brand-800); outline-offset: 2px; }
.password-button.el-button { min-height: 44px; color: var(--brand-900); border-color: #9eb7cf; background: #fff; font-weight: 700; }
.password-button.el-button:hover { color: #fff; border-color: var(--brand-800); background: var(--brand-800); }
.password-button.el-button:focus-visible { outline: 3px solid var(--brand-800); outline-offset: 2px; }
.reset-password-button.el-button.is-disabled,
.reset-password-button.el-button.is-disabled:hover { color: #5c5142; background: #f3f4f6; border-color: #cbd5e1; }
.page-section { width: 100%; margin: 0; padding: 16px 20px 36px; }
.summary-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.summary-card { min-height: 88px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 12px; padding: 12px 15px; border: 1px solid var(--line); border-left: 5px solid var(--brand-600); border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(23,59,92,.04); }
.summary-card span { color: var(--muted); font-weight: 700; }
.summary-card strong { color: var(--brand-900); font-size: 25px; white-space: nowrap; }
.summary-card small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.policy-card { border-left-color: #5b8d5a; }
.intent-summary-card { border-left-color: #c58b00; }
.grade-summary-card { border-left-color: #8055a5; }
.toolbar-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.toolbar-card h3 { margin: 0 0 5px; color: var(--brand-900); font-size: 19px; }
.toolbar-help { margin: 0; color: var(--muted); }
.filter-row { min-width: 0; flex: 1; display: flex; gap: 12px; }
.search-input { max-width: 620px; }
.owner-filter { width: 200px; }
.full-select { width: 100%; }
.customer-form .el-date-editor.el-input { width: 100%; }
.table-card { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 5px 18px rgba(23,59,92,.04); }
.page-section > .table-card.desktop-table { min-height: clamp(420px, calc(100vh - 318px), 720px); }
.table-card .el-table { --el-table-header-bg-color: #eaf2fb; --el-table-header-text-color: #173d60; --el-table-row-hover-bg-color: #f1f6fb; }
.table-card .el-table th.el-table__cell { font-weight: 800; }
.customer-overview-table .el-table__cell { padding: 10px 0; }
.customer-name-button { min-height: 36px; padding: 6px 10px; border: 1px solid #9ebbd5; border-radius: 5px; background: #f8fbfe; color: var(--brand-800); font: inherit; font-size: 15px; font-weight: 800; text-align: left; cursor: pointer; }
.customer-name-button:hover { border-color: var(--brand-700); background: var(--brand-100); }
.customer-name-button:focus-visible { outline: 3px solid var(--brand-800); outline-offset: 2px; }
.editable-mark, .readonly-mark, .active-mark, .inactive-mark, .intent-pill, .profile-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 9px; border-radius: 5px; font-size: 13px; font-weight: 800; }
.editable-mark, .active-mark, .intent-strong { color: var(--green-text); background: var(--green-bg); }
.readonly-mark, .intent-normal { color: var(--brand-900); background: var(--brand-100); }
.inactive-mark, .intent-low { color: var(--red-text); background: var(--red-bg); }
.intent-pending { color: var(--yellow-text); background: var(--yellow-bg); }
.grade-priority { color: #4e236d; background: #eadcf4; }
.grade-standard { color: var(--brand-900); background: var(--brand-100); }
.grade-dormant, .stage-lost { color: var(--red-text); background: var(--red-bg); }
.stage-won { color: var(--green-text); background: var(--green-bg); }
.stage-active { color: #654600; background: #fff1bd; }
.stage-early { color: var(--brand-900); background: var(--brand-100); }
.customer-name-button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-type-cell, .cooperation-status-cell, .intent-level-cell, .permission-cell { min-width: 0; }
.customer-type-cell .profile-pill, .cooperation-status-cell .profile-pill, .intent-level-cell .intent-pill { max-width: 100%; height: auto; line-height: 1.35; white-space: normal; }
.contact-summary-cell { min-width: 0; display: grid; gap: 4px; line-height: 1.35; }
.contact-summary-cell strong, .contact-summary-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-summary-cell strong { color: var(--brand-900); }
.mobile-cards { display: none; }
.customer-card { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 4px 14px rgba(23,59,92,.05); }
.mobile-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mobile-card-title strong { color: var(--brand-900); font-size: 17px; line-height: 1.35; }
.customer-card p { margin: 11px 0; color: #374151; }
.customer-card .mobile-profile-line { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.mobile-card-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.mobile-card-meta span { padding: 4px 8px; border-radius: 5px; background: #edf3f8; color: #374151; font-size: 12px; }
.mobile-open-customer, .mobile-manage-button { width: 100%; min-height: 44px; margin-top: 12px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.customer-form { display: grid; grid-template-columns: minmax(380px, 1.05fr) minmax(220px, .65fr) minmax(570px, 1.75fr); align-items: start; gap: 12px; }
.customer-form > .form-section:nth-child(1) .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.customer-form > .form-section:nth-child(2) .form-grid { grid-template-columns: 1fr; }
.customer-form > .intelligence-form-section .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.customer-form .el-form-item { margin-bottom: 9px; }
.customer-edit-dialog.el-dialog, .customer-detail-dialog.el-dialog {
  max-height: 96vh;
  margin: 2vh auto 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.customer-edit-dialog .el-dialog__header, .customer-detail-dialog .el-dialog__header,
.customer-edit-dialog .el-dialog__footer, .customer-detail-dialog .el-dialog__footer { flex: none; }
.customer-edit-dialog .el-dialog__header, .customer-detail-dialog .el-dialog__header { padding: 13px 18px 9px; }
.customer-edit-dialog .el-dialog__body, .customer-detail-dialog .el-dialog__body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; padding: 8px 12px; }
.customer-edit-dialog .el-dialog__footer, .customer-detail-dialog .el-dialog__footer { padding: 9px 18px 11px; border-top: 1px solid var(--line); background: #fff; }
.form-section { margin: 0; padding: 10px 12px 1px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.form-section:last-child { margin-bottom: 0; }
.intelligence-form-section { border-top: 4px solid var(--brand-600); background: #fbfdff; }
.form-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.form-section-heading > span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 5px; background: var(--brand-800); color: #fff; font-size: 12px; font-weight: 800; }
.form-section-heading h3 { margin: 0; color: var(--brand-900); font-size: 16px; }
.form-section-heading p { display: none; }
.source-field-note { margin: 0 0 8px; padding: 7px 9px; border-left: 4px solid #c58b00; border-radius: 5px; background: #fff7dc; color: #654600; font-size: 12px; font-weight: 700; line-height: 1.4; }
.option-select-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.option-select-row small { padding: 2px 6px; border-radius: 4px; background: var(--yellow-bg); color: #654600; font-size: 11px; font-weight: 800; }
.select-create-option-button {
  width: calc(100% - 16px); min-height: 42px; display: block; margin: 5px 8px 8px; padding: 8px 12px;
  border: 1px dashed var(--brand-600); border-radius: 6px; background: #edf4fb; color: var(--brand-900);
  font: inherit; font-weight: 800; text-align: left; cursor: pointer;
}
.select-create-option-button:hover { border-style: solid; background: #dcebf8; }
.select-create-option-button:focus-visible { outline: 3px solid var(--brand-800); outline-offset: 1px; }
.pending-option-list { width: 100%; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pending-option-list span { padding: 3px 7px; border-radius: 5px; background: var(--yellow-bg); color: #654600; font-size: 11px; font-weight: 800; }
.core-option-create-dialog .dialog-lead { margin-bottom: 16px; line-height: 1.65; }
.core-option-create-dialog .el-input__count-inner,
.rename-option-dialog .el-input__count-inner { color: #5b6573; }
.business-options-dialog.el-dialog { max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.business-options-dialog .el-dialog__body { min-height: 180px; overflow-y: auto; }
.business-options-dialog.el-dialog { margin-top: 4vh; }
.business-options-dialog .el-dialog__header, .business-options-dialog .el-dialog__footer { flex: none; }
.options-overview-lead { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }
.options-load-error { padding: 20px; border: 1px solid #d9a35b; border-radius: 8px; color: #714200; background: #fff8eb; line-height: 1.6; }
.options-load-error p { margin: 8px 0 16px; }
.options-refresh-warning .el-message__content { color: #714200; }
.auth-session-warning .el-message__content { color: #714200; }
.option-category-group + .option-category-group { margin-top: 22px; }
.option-category-group h3 { margin: 0 0 10px; color: var(--brand-900); font-size: 16px; }
.option-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.option-category-card { display: grid; gap: 10px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); text-align: left; cursor: pointer; }
.option-category-card:hover { background: #f1f6fb; border-color: var(--brand-600); }
.option-category-card:focus-visible, .option-category-heading h3:focus-visible { outline: 3px solid var(--brand-800); outline-offset: 2px; }
.option-category-card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.option-category-card-heading strong { color: var(--brand-900); font-size: 16px; }
.option-category-capability { padding: 3px 7px; border-radius: 4px; background: #eef2f6; color: #4b5968; font-size: 12px; }
.option-category-capability.is-manageable { background: var(--green-bg); color: var(--green-text); }
.option-category-description { color: var(--muted); font-size: 13px; line-height: 1.5; }
.option-category-card-foot { display: flex; justify-content: space-between; color: var(--brand-800); font-size: 13px; }
.option-category-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.option-category-heading p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.option-category-heading h3 { margin: 0; color: var(--brand-900); font-size: 22px; }
.readonly-option-values { display: flex; flex-wrap: wrap; gap: 10px; }
.readonly-option-values span { padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--brand-900); background: #f4f8fc; line-height: 1.5; }
.option-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; margin: 14px 0; }
.option-manager-note { display: grid; gap: 5px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #b9cde0; border-left: 5px solid var(--brand-600); border-radius: 7px; background: #f1f6fb; }
.option-manager-note strong { color: var(--brand-900); }
.option-manager-note span { color: #374151; line-height: 1.55; }
.business-option-list { display: grid; gap: 9px; }
.business-option-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.business-option-main { min-width: 0; display: grid; gap: 7px; }
.business-option-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.business-option-title strong { color: var(--brand-900); font-size: 16px; overflow-wrap: anywhere; }
.option-status-mark { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 800; }
.option-status-approved { color: var(--green-text); background: var(--green-bg); }
.option-status-pending { color: #654600; background: var(--yellow-bg); }
.option-status-inactive { color: var(--red-text); background: var(--red-bg); }
.option-status-merged { color: var(--brand-900); background: var(--brand-100); }
.business-option-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.business-option-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.business-option-actions .el-button { margin-left: 0; }
.el-button.option-inactivate-button { color: #861017; border-color: #b85a60; background: #fff7f7; font-weight: 700; }
.el-button.option-inactivate-button:hover, .el-button.option-inactivate-button:focus-visible { color: #fff; border-color: #861017; background: #861017; }
@media (min-width: 761px) {
  .customer-edit-dialog .el-input__wrapper,
  .customer-edit-dialog .el-select__wrapper,
  .customer-edit-dialog .el-date-editor,
  .customer-edit-dialog .el-dialog__footer .el-button { min-height: 36px; }
}
.temporary-box { text-align: center; }
.temporary-box code { display: block; margin: 18px 0; padding: 18px; border: 2px dashed var(--brand-600); border-radius: 8px; background: #edf4fb; color: var(--brand-900); font-size: 20px; font-weight: 800; letter-spacing: .08em; overflow-wrap: anywhere; }
.security-warning { padding: 10px; border-radius: 6px; background: var(--yellow-bg); color: var(--yellow-text); font-weight: 700; }
.account-state-line { display: flex; align-items: center; gap: 10px; }
.account-security-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #d4b56a; border-radius: 8px; background: #fff8df; }
.account-security-box strong { color: #523400; }
.account-security-box p { margin: 4px 0 0; color: #654600; line-height: 1.5; }
.el-button.reset-password-button { --el-button-text-color: #6b4300; --el-button-bg-color: #fff2cc; --el-button-border-color: #9c6500; --el-button-hover-text-color: #ffffff; --el-button-hover-bg-color: #7b4f00; --el-button-hover-border-color: #7b4f00; --el-button-active-text-color: #ffffff; --el-button-active-bg-color: #603d00; --el-button-active-border-color: #603d00; color: #6b4300; background: #fff2cc; border-color: #9c6500; }
.el-button.reset-password-button:hover, .el-button.reset-password-button:focus-visible { color: #ffffff; background: #7b4f00; border-color: #7b4f00; }
.dialog-heading { margin: 0 0 8px; color: var(--brand-900); font-size: 22px; }
.dialog-lead { margin: 0 0 20px; color: var(--muted); }
.detail-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #b9cde0; border-radius: 8px; background: #edf4fb; }
.detail-banner div span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.detail-banner div strong { color: var(--brand-900); font-size: 18px; }
.detail-section-title { margin: 20px 0 10px; color: var(--brand-900); font-size: 18px; }
.profile-descriptions .el-descriptions__content { line-height: 1.65; overflow-wrap: anywhere; }
.derived-field-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid #c9d9e8; border-radius: 7px; background: #f4f8fc; color: #374151; line-height: 1.55; }
.derived-field-note strong { flex: none; color: var(--brand-900); }
.mobile-detail-actions { display: none; }
.contacts-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.contacts-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.contacts-heading h3 { margin: 0 0 5px; color: var(--brand-900); font-size: 19px; }
.contacts-heading p { margin: 0; color: var(--muted); line-height: 1.5; }
.contact-list { display: grid; gap: 10px; }
.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand-600); border-radius: 8px; background: #f8fafc; }
.contact-main { min-width: 0; }
.contact-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.contact-name-row strong { color: var(--brand-900); font-size: 16px; }
.contact-main p { margin: 6px 0 0; color: #374151; overflow-wrap: anywhere; }
.primary-contact-mark { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 8px; border-radius: 5px; color: var(--green-text); background: var(--green-bg); font-size: 12px; font-weight: 800; }
.contact-actions { display: flex; flex: none; gap: 8px; }

.el-button--primary { --el-button-bg-color: var(--brand-800); --el-button-border-color: var(--brand-800); --el-button-hover-bg-color: #163b5c; --el-button-hover-border-color: #163b5c; --el-button-active-bg-color: #112f4a; --el-button-active-border-color: #112f4a; font-weight: 700; }
.el-input__inner, .el-textarea__inner { color: #111827 !important; font-weight: 600; }
.el-input__inner::placeholder, .el-textarea__inner::placeholder { color: #6b7280 !important; font-weight: 400; }
.el-input__prefix-inner { color: #5f6b7a; }
input:-webkit-autofill { -webkit-text-fill-color: #111827 !important; }
.el-form-item__label { color: #374151 !important; font-weight: 700; }
.el-dialog { max-width: calc(100vw - 24px); }
.el-dialog__title { color: var(--brand-900); font-weight: 800; }

@media (max-width: 1259px) and (min-width: 761px) {
  .crm-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { width: 210px; padding-inline: 11px; }
  .main-nav button { padding-inline: 7px; }
  .sidebar-foot { display: none; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-overview-table { display: none; }
  .customer-mobile-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .customer-form { display: block; }
  .customer-form > .form-section { margin-bottom: 12px; }
  .customer-form > .form-section:nth-child(1) .form-grid,
  .customer-form > .form-section:nth-child(2) .form-grid,
  .customer-form > .intelligence-form-section .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .scope-badge { display: none; }
}

@media (max-width: 760px) {
  .login-page { padding: 28px 20px; gap: 24px; }
  .login-layout { max-width: 440px; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .login-identity { text-align: center; }
  .login-brand-image { width: 190px; margin: 0 auto; }
  .login-company { margin-top: 12px; font-size: 14px; }
  .login-identity h1 { margin: 20px 0 8px; font-size: 26px; }
  .login-product-note { font-size: 14px; }
  .login-card { padding: 24px; }
  .login-card h2 { font-size: 22px; }
  .login-subtitle { margin-bottom: 22px; font-size: 14px; }
  button.el-button { min-height: 44px; }
  .el-input__wrapper, .el-select__wrapper { min-height: 44px; }
  .el-date-editor.el-input, .el-date-editor.el-input__wrapper { min-height: 44px; height: 44px; }
  .crm-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; flex-direction: column; align-items: stretch; padding: 10px 14px; }
  .brand-block { flex-direction: row; justify-content: space-between; margin: -10px -14px 0; padding: 10px 14px; gap: 16px; }
  .brand-logo-image { width: 146px; }
  .brand-block h1 { font-size: 15px; }
  .main-nav { display: flex; margin: 0; padding: 8px 0 0; overflow-x: auto; overflow-y: hidden; scrollbar-gutter: auto; }
  .main-nav .nav-group-title, .main-nav .planned-nav-item { display: none; }
  .main-nav button { display: flex; flex: 1 0 auto; width: auto; justify-content: center; gap: 6px; min-height: 44px; padding: 7px; white-space: nowrap; }
  .main-nav .nav-icon { display: none; }
  .sidebar-foot { display: none; }
  .topbar { min-height: auto; align-items: stretch; flex-direction: column; gap: 10px; padding: 12px 14px; }
  .topbar h2 { font-size: 22px; }
  .topbar-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .topbar-nav-button { flex: 1; justify-content: center; min-width: 148px; }
  .scope-badge { display: none; }
  .topbar-user-chip { flex: 1; min-width: 100px; padding-left: 0; border-left: 0; }
  .logout-button.el-button { width: auto; }
  .page-section { padding: 12px 12px 30px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summary-card { min-height: 102px; padding: 12px; }
  .summary-card strong { font-size: 22px; }
  .summary-card small { display: none; }
  .toolbar-card { align-items: stretch; flex-direction: column; padding: 12px; }
  .filter-row { flex-direction: column; }
  .search-input, .owner-filter { width: 100%; max-width: none; }
  .desktop-table { display: none; }
  .mobile-cards { display: grid; gap: 10px; }
  .customer-form { display: block; }
  .form-grid,
  .customer-form > .form-section:nth-child(1) .form-grid,
  .customer-form > .form-section:nth-child(2) .form-grid,
  .customer-form > .intelligence-form-section .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .detail-banner { align-items: flex-start; flex-direction: column; }
  .mobile-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -4px 0 14px; }
  .mobile-detail-actions .el-button { width: 100%; margin-left: 0; }
  .contacts-heading, .contact-card { align-items: stretch; flex-direction: column; }
  .contacts-heading .el-button { width: 100%; min-height: 44px; }
  .contact-actions { width: 100%; }
  .contact-actions .el-button { flex: 1; min-height: 44px; margin-left: 0; }
  .el-dialog__body { padding: 14px 16px; }
  .customer-detail .el-descriptions__body .el-descriptions__table { table-layout: fixed; }
  .customer-detail .el-descriptions__label { width: 92px; }
  .customer-edit-dialog.el-dialog, .customer-detail-dialog.el-dialog { max-height: 96vh; margin-top: 2vh; }
  .customer-edit-dialog .el-dialog__body, .customer-detail-dialog .el-dialog__body { max-height: none; padding: 10px 12px; }
  .form-section { padding: 14px 12px 2px; }
  .form-section-heading { margin-bottom: 13px; }
  .derived-field-note { flex-direction: column; gap: 4px; }
  .select-create-option-button { height: 44px !important; min-height: 44px !important; line-height: 1.35; }
  .business-options-dialog.el-dialog, .core-option-create-dialog.el-dialog, .merge-option-dialog.el-dialog, .rename-option-dialog.el-dialog { width: calc(100vw - 20px) !important; margin-top: 2vh; }
  .business-options-dialog .el-dialog__body { padding: 10px 12px; }
  .option-category-grid { grid-template-columns: 1fr; }
  .option-category-card { padding: 12px 14px; }
  .option-category-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .option-filter-row { grid-template-columns: minmax(0, 1fr) 125px; gap: 8px; }
  .business-option-card { align-items: stretch; flex-direction: column; padding: 12px; }
  .business-option-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-option-actions .el-button { width: 100%; min-height: 44px; }
}

@media (max-width: 420px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}