:root {
  color-scheme: light;
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --line: #cfd8e3;
  --line-strong: #9fb0c4;
  --text: #17202a;
  --muted: #607086;
  --brand: #214f82;
  --brand-strong: #163a62;
  --accent: #2d8a6e;
  --warn: #b85b19;
  --danger: #b42318;
  --shadow: 0 12px 36px rgba(31, 45, 61, 0.13);
  --radius: 6px;
  font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* UI-035 compact legacy settings */
.compact-settings-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  color: #13283f;
  font-size: 13px;
}

.product-class-settings-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.product-class-settings-workspace .legacy-customer-table-host {
  align-self: stretch;
}

.compact-settings-tabs {
  min-width: 0;
  display: flex;
  align-items: end;
  gap: 2px;
  padding: 3px 7px 0;
  border-bottom: 1px solid #8eacd0;
  background: #eaf3fc;
  overflow-x: auto;
}

.compact-settings-tabs button,
.compact-option-tabs button {
  min-height: 27px;
  border: 1px solid #9ab5d4;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  padding: 0 12px;
  background: #f6f9fc;
  color: #174e83;
  font-size: 13px;
  white-space: nowrap;
}

.compact-settings-tabs button.active,
.compact-option-tabs button.active {
  position: relative;
  bottom: -1px;
  background: #fff;
  color: #081d35;
  font-weight: 700;
}

.process-flow-shell {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 7px 8px 10px;
  background: #fff;
}

.process-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  border: 1px solid #9fb9d8;
  background: #e9f3ff;
  padding: 7px 9px;
}

.process-flow-head h3 {
  margin: 0 0 3px;
  color: #003f7f;
  font-size: 15px;
}

.process-flow-head p {
  margin: 0;
  color: #3d5873;
  line-height: 1.35;
}

.process-flow-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 10px;
  min-width: 260px;
  color: #31506f;
}

.process-flow-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.flow-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border: 1px solid #6d87a4;
}

.flow-dot.auto { background: #b9daf8; }
.flow-dot.manual { background: #ffe3a6; }
.flow-dot.stored { background: #cce8c6; }
.flow-dot.error { background: #f6beb8; }

.flow-section {
  margin-bottom: 8px;
  border: 1px solid #b3c9e1;
  background: #f8fbff;
}

.flow-section-title {
  min-height: 24px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #b3c9e1;
  background: linear-gradient(#d9ecff, #c7e0f7);
  color: #004f91;
  font-weight: 700;
  padding: 3px 8px;
}

.flow-lane {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 30px minmax(150px, 1fr) 30px minmax(150px, 1.25fr) 30px minmax(180px, 1.35fr);
  align-items: stretch;
  gap: 4px;
  padding: 7px;
}

.flow-lane.secondary {
  border-top: 1px solid #d3e2f2;
  background: #fff;
}

.flow-step {
  min-height: 66px;
  border: 1px solid #9eb6d2;
  border-radius: 4px;
  padding: 6px 7px;
  background: #fff;
  color: #17202a;
  overflow: hidden;
}

.flow-step strong {
  display: block;
  margin-bottom: 4px;
  color: #003f7f;
  font-size: 13px;
}

.flow-step span {
  display: block;
  color: #22384f;
  line-height: 1.35;
}

.flow-step.auto {
  border-color: #76a8d6;
  background: #e8f4ff;
}

.flow-step.manual {
  border-color: #d2a24d;
  background: #fff4d9;
}

.flow-step.stored {
  border-color: #78a56f;
  background: #edf8e9;
}

.flow-step.error {
  border-color: #c26c64;
  background: #fff0ee;
}

.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f5b91;
  font-weight: 700;
  font-size: 19px;
}

.flow-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.compact-rule-section {
  margin-bottom: 0;
}

.process-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 6px;
  padding: 7px;
  background: #fff;
}

.process-rule-grid div {
  min-height: 52px;
  border: 1px solid #c1d2e4;
  border-radius: 4px;
  padding: 6px 7px;
  background: #fbfdff;
}

.process-rule-grid strong {
  display: block;
  margin-bottom: 4px;
  color: #004f91;
}

.process-rule-grid span {
  color: #263d55;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .process-flow-head,
  .flow-lane {
    display: block;
  }

  .process-flow-legend {
    justify-content: flex-start;
    min-width: 0;
    margin-top: 6px;
  }

  .flow-step,
  .flow-split {
    margin-bottom: 5px;
  }

  .flow-arrow {
    min-height: 20px;
    transform: rotate(90deg);
  }

  .process-rule-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 720px) {
  .process-rule-grid {
    grid-template-columns: 1fr;
  }
}

.compact-settings-workspace,
.permission-settings-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  overflow: hidden;
}

.admin-management-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
}

.admin-function-list {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #9eb6d2;
  background: #f4f8fc;
  overflow-y: auto;
}

.admin-function-list button {
  width: 100%;
  min-height: 42px;
  display: grid;
  gap: 2px;
  border: 0;
  border-bottom: 1px solid #d5e1ee;
  border-radius: 0;
  padding: 5px 8px;
  background: transparent;
  color: #183b61;
  text-align: left;
}

.admin-function-list button.active {
  background: #cfe2f6;
  color: #063d73;
}

.admin-function-list button strong {
  font-size: 13px;
}

.admin-function-list button span {
  color: #60758d;
  font-size: 12px;
  line-height: 1.2;
}

.admin-management-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.admin-summary-strip {
  border-width: 0 0 1px;
}

.admin-management-host {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.admin-section-panel {
  min-width: 0;
  min-height: 100%;
  background: #fff;
}

.admin-section-panel > header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 9px;
  border-bottom: 1px solid #a9bfd8;
  background: #dcecff;
}

.admin-section-panel > header h3 {
  margin: 0;
  color: #07477f;
  font-size: 14px;
}

.admin-section-panel > header span {
  color: #536b84;
  font-size: 12px;
}

.admin-section-note,
.admin-result-line {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #d5e1ee;
  color: #344b63;
  font-size: 13px;
}

.admin-section-panel > .quick-actions,
.admin-section-panel > .admin-related-settings {
  padding: 8px 10px;
}

.admin-option-tabs {
  padding: 4px 8px 0;
  border-bottom: 1px solid #9ab5d4;
  background: #edf5fd;
}

.admin-options-table-wrap,
.admin-log-table-wrap {
  min-width: 0;
  overflow: auto;
}

.admin-options-table {
  table-layout: fixed;
}

.admin-options-table th:nth-child(1) { width: 22%; }
.admin-options-table th:nth-child(2) { width: 25%; }
.admin-options-table th:nth-child(3) { width: 35%; }
.admin-options-table th:nth-child(4) { width: 18%; }

.admin-options-table input,
.admin-options-table select {
  width: 100%;
  height: 25px;
  min-width: 0;
  border: 1px solid #91abd0;
  border-radius: 2px;
  padding: 0 6px;
  background: #fff;
  font-size: 13px;
}

.admin-option-readonly {
  color: #445d76;
}

.admin-related-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border-top: 1px solid #d5e1ee;
}

.admin-inline-summary {
  margin: 8px 10px 0;
}

.admin-log-table-wrap table {
  min-width: 980px;
}

.admin-log-table-wrap td {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .admin-management-workspace {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .admin-function-list button {
    min-height: 34px;
  }

  .admin-function-list button span {
    display: none;
  }
}

.compact-settings-sections,
.permission-user-list {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #9eb6d2;
  background: #f4f8fc;
  overflow-y: auto;
}

.compact-settings-sections button,
.permission-user-list button {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border: 0;
  border-bottom: 1px solid #d5e1ee;
  border-radius: 0;
  padding: 5px 8px;
  background: transparent;
  color: #183b61;
  text-align: left;
  font-size: 13px;
}

.compact-settings-sections button.active,
.permission-user-list button.active {
  background: #cfe2f6;
  color: #063d73;
  font-weight: 700;
}

.compact-settings-sections button b {
  min-width: 24px;
  color: #526f8d;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}

.compact-settings-main,
.permission-matrix-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 34px 28px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.compact-settings-main.standalone {
  height: 100%;
}

.compact-settings-toolbar {
  min-width: 0;
  min-height: 34px;
  height: 34px;
  gap: 4px;
  padding: 3px 7px;
  border-bottom: 1px solid #9eb8d5;
  background: #eef6ff;
  overflow-x: auto;
}

.compact-settings-toolbar .legacy-search-box {
  flex: 0 1 440px;
  min-width: 150px;
  height: 25px;
}

.compact-settings-toolbar .legacy-tool-button,
.compact-page-toolbar .legacy-tool-button {
  min-height: 25px;
  height: 25px;
  padding: 0 8px;
  font-size: 13px;
}

.compact-settings-security,
.compact-settings-hint {
  margin-left: auto;
  color: #65778b;
  white-space: nowrap;
}

.compact-radio {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 3px;
  white-space: nowrap;
}

.compact-radio input {
  width: 13px;
  height: 13px;
  margin: 0;
}

.compact-settings-table-host {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.compact-settings-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #0f253d;
  font-size: 13px;
}

.staff-settings-table {
  min-width: 1220px;
}

.staff-login-grid {
  padding-top: 7px;
}

.mail-account-settings-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.mail-settings-accounts-host {
  overflow-x: hidden;
  overflow-y: auto;
}

.mail-account-settings-table th,
.mail-account-settings-table td {
  padding-left: 5px;
  padding-right: 5px;
}

.mail-account-settings-table th:nth-child(1),
.mail-account-settings-table td:nth-child(1) {
  width: 3.2%;
}

.mail-account-settings-table th:nth-child(2),
.mail-account-settings-table td:nth-child(2) {
  width: 9.5%;
}

.mail-account-settings-table th:nth-child(3),
.mail-account-settings-table td:nth-child(3) {
  width: 13%;
}

.mail-account-settings-table th:nth-child(4),
.mail-account-settings-table td:nth-child(4) {
  width: 6%;
}

.mail-account-settings-table th:nth-child(5),
.mail-account-settings-table td:nth-child(5) {
  width: 8.5%;
}

.mail-account-settings-table th:nth-child(6),
.mail-account-settings-table td:nth-child(6) {
  width: 8%;
}

.mail-account-settings-table th:nth-child(7),
.mail-account-settings-table td:nth-child(7),
.mail-account-settings-table th:nth-child(8),
.mail-account-settings-table td:nth-child(8) {
  width: 8.5%;
}

.mail-account-settings-table th:nth-child(9),
.mail-account-settings-table td:nth-child(9) {
  width: 9.5%;
}

.mail-account-settings-table th:nth-child(10),
.mail-account-settings-table td:nth-child(10),
.mail-account-settings-table th:nth-child(11),
.mail-account-settings-table td:nth-child(11) {
  width: 7.2%;
}

.mail-account-settings-table th:nth-child(12),
.mail-account-settings-table td:nth-child(12) {
  width: 5.2%;
}

.mail-account-settings-table th:nth-child(13),
.mail-account-settings-table td:nth-child(13) {
  width: 5.2%;
}

.mail-account-settings-table .check-col,
.mail-account-settings-table .action-col {
  min-width: 0;
}

.mail-setting-test-result {
  flex: 0 1 auto;
  min-width: 180px;
  max-width: 620px;
  overflow: hidden;
  color: #17613f;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-setting-test-result.failed {
  color: #a12820;
}

.legacy-row-edit.success {
  border-color: #2f7d58;
  color: #17613f;
}

.legacy-row-edit.failed {
  border-color: #ba554c;
  color: #a12820;
}

.compact-setting-error.success {
  color: #17613f;
}

.mail-setting-inline-select {
  width: 100%;
  min-width: 0;
  height: 22px;
  border: 1px solid #8eafd2;
  border-radius: 2px;
  background: #fff;
  color: #0f253d;
  font-size: 13px;
}

.compact-settings-table th,
.compact-settings-table td {
  height: 25px;
  border-right: 1px solid #b7cbe1;
  border-bottom: 1px solid #c6d7e9;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-settings-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 29px;
  background: #cfe3f7;
  color: #0a4c83;
  font-weight: 700;
  text-align: left;
}

.compact-settings-table tbody tr:nth-child(even) {
  background: #dceafa;
}

.compact-settings-table tbody tr:hover {
  background: #fff6c9;
}

.compact-settings-table .check-col,
.compact-settings-table .action-col {
  width: 50px;
  text-align: center;
}

.compact-settings-table td:first-child,
.compact-settings-table td:last-child {
  text-align: center;
}

.compact-settings-table input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
}

.compact-page-toolbar {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-bottom: 1px solid #9eb8d5;
  background: #eef6ff;
  overflow-x: auto;
}

.compact-page-toolbar > strong {
  margin-right: 5px;
  color: #103f6d;
  font-size: 14px;
  white-space: nowrap;
}

.compact-page-toolbar > span {
  margin-right: auto;
  color: #66788c;
  white-space: nowrap;
}

.compact-option-tabs {
  min-width: 0;
  display: flex;
  align-self: stretch;
  align-items: end;
  gap: 2px;
  margin-right: auto;
  overflow-x: auto;
}

.compact-option-tabs button {
  min-height: 25px;
  height: 25px;
  padding: 0 9px;
}

.compact-option-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  border: 0;
  border-radius: 0;
}

.compact-option-section {
  min-height: 0;
  overflow: auto;
}

.compact-option-section[hidden] {
  display: none;
}

.compact-option-column-head {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.1fr) 72px 82px 28px;
  gap: 5px;
  padding: 5px 8px 2px;
  background: #cfe3f7;
  color: #0a4c83;
  font-weight: 700;
}

.compact-option-page .legacy-region-column-head {
  grid-template-columns: minmax(190px, .9fr) minmax(100px, .45fr) 56px minmax(110px, .55fr) 58px 70px 28px;
  gap: 5px;
  padding: 5px 8px 2px;
  background: #cfe3f7;
  color: #0a4c83;
}

.compact-option-page .option-list {
  min-height: 0;
  align-content: start;
  padding: 0 8px 8px;
  overflow: visible;
}

.compact-option-page .option-row {
  grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.1fr) 72px 82px 28px;
  gap: 5px;
  min-height: 30px;
  border-bottom: 1px solid #d5e1ee;
}

.compact-option-page.region-settings-form .region-option-row {
  grid-template-columns: minmax(190px, .9fr) minmax(100px, .45fr) 56px minmax(110px, .55fr) 58px 70px 28px;
}

.compact-option-page .option-value,
.compact-option-page .option-label,
.compact-option-page .option-parent {
  height: 25px;
  border-radius: 2px;
  padding: 0 6px;
  font-size: 13px;
}

.compact-option-page .option-active,
.compact-option-page .option-level {
  height: 25px;
  font-size: 13px;
}

.compact-option-page .option-active span,
.compact-option-page .option-source {
  font-size: 12px;
}

.compact-setting-editor .legacy-editor-tabs {
  margin-bottom: 8px;
}

.compact-checkbox-field {
  display: grid;
  grid-template-columns: 1fr 22px;
  align-items: center;
}

.compact-checkbox-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  justify-self: center;
}

.compact-setting-footer {
  align-items: center;
}

.compact-setting-error {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.form-field input.field-invalid {
  border-color: var(--danger);
  background: #fff4f4;
  box-shadow: 0 0 0 1px var(--danger);
}

.permission-side-title {
  min-height: 31px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid #9eb6d2;
  background: #d8e9f9;
  color: #0a4c83;
  font-weight: 700;
}

.permission-user-list button {
  min-height: 48px;
  display: grid;
  justify-content: stretch;
}

.permission-user-list button strong,
.permission-user-list button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-user-list button span {
  color: #64788e;
  font-size: 12px;
  font-weight: 400;
}

.permission-matrix-panel {
  grid-template-rows: minmax(0, 1fr);
}

.permission-matrix-panel form {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  overflow: hidden;
}

.permission-matrix-table {
  width: 100%;
  min-width: 980px;
}

.permission-table-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.permission-matrix-table th:nth-child(n + 3),
.permission-matrix-table td:nth-child(n + 3) {
  width: 78px;
  text-align: center;
}

.permission-matrix-table th:first-child,
.permission-matrix-table td:first-child {
  width: 82px;
}

.permission-matrix-table th:nth-child(2),
.permission-matrix-table td:nth-child(2) {
  width: 150px;
  text-align: left;
}

.permission-matrix-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
}

.permission-not-applicable {
  color: #9aa9b8;
  background: #f7f9fb;
}

.permission-preset-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.permission-preset-label select {
  height: 24px;
  border: 1px solid #8eafd1;
  border-radius: 2px;
  background: #fff;
  color: #163d64;
  font-size: 13px;
}

.detail-overlay[data-form-type="department"],
.detail-overlay[data-form-type="staff"],
.detail-overlay[data-form-type="mailSetting"] {
  grid-template-columns: minmax(0, 1fr) min(760px, 100vw);
}

@media (max-width: 760px) {
  .compact-settings-workspace,
  .permission-settings-workspace {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .compact-settings-tabs button,
  .compact-option-tabs button {
    padding: 0 7px;
  }

  .compact-settings-security,
  .compact-settings-hint {
    display: none;
  }

  .compact-option-column-head,
  .compact-option-page .legacy-region-column-head {
    display: none;
  }

  .compact-option-page .option-row,
  .compact-option-page.region-settings-form .region-option-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px 0;
  }
}

/* UI-034: old CRM product, preference and inventory work areas. */
.legacy-product-page,
.legacy-liked-page,
.legacy-inventory-page {
  --legacy-region-width: 190px;
  --legacy-toolbar-height: 32px;
  --legacy-pager-height: 30px;
}

.legacy-view-switch {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

.legacy-product-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 100%;
  padding: 8px;
  background: #fff;
  overflow: auto;
}

.legacy-product-thumb {
  display: grid;
  grid-template-rows: 96px auto auto auto;
  gap: 3px;
  min-width: 0;
  padding: 5px;
  border: 1px solid #a9c4e2;
  border-radius: 2px;
  background: #f8fbff;
  font-size: 12px;
}

.legacy-product-image-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid #ccdaea;
  background: #fff;
  color: #4e82b7;
}

.legacy-product-image-placeholder svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.legacy-product-thumb .legacy-link-button {
  width: 100%;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-product-thumb > span,
.legacy-product-thumb > small {
  overflow: hidden;
  color: #2f4f6f;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-row-edit,
.legacy-row-delete {
  min-width: 34px;
  height: 18px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: #004c9a;
  font-size: 12px;
  text-decoration: underline;
}

.legacy-row-delete {
  color: #a21b1b;
}

.legacy-action-cell {
  padding: 0 2px !important;
  text-align: center;
}

.legacy-editor-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin: -4px -4px 10px;
  padding: 5px 5px 0;
  border-bottom: 1px solid #8fb5df;
  background: #edf6ff;
}

.legacy-editor-tabs strong,
.legacy-editor-tabs span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid #9dbfe2;
  border-bottom: 0;
  background: #dcecfb;
  color: #24537d;
  font-size: 13px;
}

.legacy-editor-tabs strong {
  position: relative;
  top: 1px;
  background: #fff;
  color: #003f7f;
}

.form-overlay[data-form-type="products"] {
  grid-template-columns: minmax(0, 1fr) min(1120px, 94vw);
}

.form-overlay[data-form-type="products"] .form-panel {
  width: auto;
}

.form-overlay[data-form-type="products"] .form-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.form-overlay[data-form-type="likedProducts"],
.form-overlay[data-form-type="inventoryStock"] {
  grid-template-columns: minmax(0, 1fr) min(760px, 94vw);
}

.form-overlay[data-form-type="likedProducts"] .form-panel,
.form-overlay[data-form-type="inventoryStock"] .form-panel {
  width: auto;
}

.legacy-business-nav .legacy-region-root,
.legacy-business-nav .legacy-region-node {
  margin-bottom: 1px;
}

.legacy-inventory-scroll {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 6px;
  background: #fff;
  overflow: auto;
}

.legacy-inventory-scroll > .settings-panel {
  width: 100%;
  margin: 0;
  border: 1px solid #8fb5df;
  border-radius: 0;
  box-shadow: none;
}

.legacy-inventory-scroll .settings-panel h3,
.legacy-inventory-scroll .section-head h3 {
  color: #034f91;
  font-size: 14px;
}

.legacy-stock-status {
  display: inline-block;
  min-width: 44px;
  text-align: center;
}

.legacy-stock-status.normal {
  color: #19713a;
}

.legacy-stock-status.warning {
  color: #c11717;
  font-weight: 700;
}

@media (max-width: 900px) {
  .legacy-product-page,
  .legacy-liked-page,
  .legacy-inventory-page {
    --legacy-region-width: 152px;
  }

  .legacy-view-switch {
    display: none;
  }

  .form-overlay[data-form-type="products"] .form-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 620px) {
  .form-overlay[data-form-type="products"] .form-grid {
    grid-template-columns: 1fr;
  }

  .legacy-editor-tabs span {
    display: none;
  }
}

/* Classic CRM mode keeps the old system's density and navigation rhythm. */
.app-shell.classic-crm-shell,
.app-shell.classic-crm-shell.legacy-customer-shell {
  --classic-nav-width: 99px;
  --legacy-region-width: 190px;
  --legacy-region-head-height: 24px;
  --legacy-toolbar-height: 32px;
  --legacy-pager-height: 30px;
  --legacy-table-head-height: 28px;
  --legacy-table-row-height: 22px;
  width: 100%;
  grid-template-columns: var(--classic-nav-width) minmax(0, 1fr);
  background: #fff;
  font-size: 13px;
}

.classic-crm-shell .side-nav {
  width: 100%;
  min-width: 0;
  height: 100vh;
  padding: 0;
  border-right: 1px solid #7fa6cf;
  background: #eaf3fc;
  color: #003d79;
}

.classic-crm-shell .side-head {
  min-height: 48px;
  gap: 4px;
  padding: 5px 4px;
  border-bottom: 1px solid #87add4;
  background: linear-gradient(#ffffff, #dcecff);
}

.classic-crm-shell .side-head .brand-mark.small {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: #1c65a3;
  font-size: 13px;
}

.classic-crm-shell .side-head strong {
  color: #003d79;
  font-size: 12px;
  line-height: 1.1;
}

.classic-crm-shell .side-head span {
  color: #587692;
  font-size: 12px;
}

.classic-crm-shell #moduleNav {
  gap: 3px;
  margin-top: 0;
  padding: 5px 2px;
}

.classic-crm-shell .nav-button {
  height: auto;
  min-height: 34px;
  grid-template-columns: 17px minmax(0, 1fr);
  border: 1px solid transparent;
  border-radius: 1px;
  padding: 0 3px;
  color: #003d79;
  font-size: 13px;
}

.classic-crm-shell .nav-button span {
  line-height: 1.22;
}

.classic-crm-shell .nav-button svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

.classic-crm-shell .nav-button:hover {
  border-color: #8db4dd;
  background: #fff;
  color: #003d79;
}

.classic-crm-shell .nav-button.active {
  border-color: #6b9bc9;
  background: linear-gradient(#ffffff, #cfe5fb);
  color: #002f61;
  font-weight: 700;
}

.classic-crm-shell .nav-group-button {
  grid-template-columns: 17px minmax(0, 1fr) 10px;
}

.classic-crm-shell .nav-submenu {
  gap: 3px;
  padding-left: 7px;
}

.classic-crm-shell .nav-child {
  height: auto;
  min-height: 31px;
  border-left: 1px dotted #89a9ca;
  font-size: 13px;
}

.classic-crm-shell .nav-child span:last-child {
  line-height: 1.22;
}

.classic-crm-shell .workspace {
  min-width: 0;
  background: #fff;
}

.classic-crm-shell .legacy-quickbar {
  border-bottom-color: #5f91c4;
  background: linear-gradient(#1677bb, #075a9c);
}

.classic-crm-shell .legacy-quickbar-row {
  min-height: 21px;
}

.classic-crm-shell .legacy-quickbar-sub {
  min-height: 19px;
}

.classic-crm-shell .topbar {
  min-height: 35px;
  gap: 8px;
  padding: 3px 7px;
  border-bottom: 1px solid #8fb3d8;
  background: linear-gradient(#fafdff, #e2effd);
}

.classic-crm-shell .view-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.classic-crm-shell .view-title h2 {
  color: #003f7f;
  font-size: 15px;
}

.classic-crm-shell .view-title span {
  display: inline;
  margin: 0;
  color: #617589;
  font-size: 12px;
}

.classic-crm-shell .top-actions {
  gap: 3px;
}

.classic-crm-shell .top-actions .legacy-location {
  margin-left: 5px;
  color: #174e83;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.classic-crm-shell .top-actions .icon-button {
  width: 27px;
  height: 27px;
  border-radius: 2px;
  border-color: #8fb2d6;
  background: linear-gradient(#fff, #deedfb);
  color: #074f91;
}

.classic-crm-shell .top-actions .icon-button svg {
  width: 14px;
  height: 14px;
}

.classic-crm-shell .user-chip {
  min-width: 118px;
  padding-left: 6px;
}

.classic-crm-shell .user-chip span {
  color: #003f7f;
  font-size: 13px;
}

.classic-crm-shell .user-chip small {
  font-size: 12px;
}

.classic-crm-shell .notice {
  margin: 4px 6px 0;
  padding: 5px 7px;
  border-radius: 1px;
}

.classic-crm-shell .content {
  padding: 6px;
}

.classic-crm-shell .toolbar {
  gap: 4px;
  min-height: 34px;
  margin-bottom: 4px;
  padding: 3px 5px;
  border: 1px solid #8fb2d6;
  background: #edf6ff;
}

.classic-crm-shell .toolbar input,
.classic-crm-shell .toolbar select,
.classic-crm-shell .toolbar .api-input,
.classic-crm-shell .settings-panel .api-input {
  height: 26px;
  min-width: 140px;
  border-color: #8eaed0;
  border-radius: 1px;
  padding: 0 5px;
  font-size: 13px;
}

.classic-crm-shell .toolbar input:first-child {
  min-width: 260px;
}

.classic-crm-shell .toolbar button,
.classic-crm-shell .small-button {
  min-height: 26px;
  gap: 3px;
  border-color: #6799ca;
  border-radius: 1px;
  padding: 0 8px;
  background: linear-gradient(#ffffff, #dcecfb);
  color: #004480;
  font-size: 13px;
}

.classic-crm-shell .small-button.primary {
  border-color: #356fa7;
  background: linear-gradient(#2d79b8, #155b99);
  color: #fff;
}

.classic-crm-shell .button-icon {
  width: 13px;
  height: 13px;
}

.classic-crm-shell .status-grid,
.classic-crm-shell .split-layout,
.classic-crm-shell .quick-panel,
.classic-crm-shell .legacy-menu,
.classic-crm-shell .legacy-param-table-list,
.classic-crm-shell .legacy-module-page {
  gap: 4px;
}

.classic-crm-shell .settings-panel,
.classic-crm-shell .quick-form {
  min-width: 0;
  padding: 6px;
  border-color: #91b2d3;
  border-radius: 0;
  background: #fff;
}

.classic-crm-shell .settings-panel h3 {
  margin: 7px 0 5px;
  color: #003f7f;
  font-size: 13px;
}

.classic-crm-shell .section-head {
  min-height: 24px;
  gap: 5px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #b6cce3;
}

.classic-crm-shell .section-head h3,
.classic-crm-shell .section-head h4 {
  color: #003f7f;
  font-size: 13px;
}

.classic-crm-shell .quick-form-grid {
  gap: 5px 7px;
}

.classic-crm-shell .quick-form input,
.classic-crm-shell .quick-form select {
  height: 26px;
  border-radius: 1px;
  font-size: 13px;
}

.classic-crm-shell .quick-form textarea {
  border-radius: 1px;
  font-size: 13px;
}

.classic-crm-shell .quick-actions {
  gap: 4px;
}

.classic-crm-shell .quick-actions button,
.classic-crm-shell .quick-result button {
  height: 26px;
  border-radius: 1px;
}

.classic-crm-shell .summary-strip:not(.classic-summary-strip) {
  display: flex;
  gap: 0;
  min-height: 27px;
  margin-bottom: 4px;
  border: 1px solid #9dbbd9;
  background: #edf6ff;
}

.classic-crm-shell .summary-strip:not(.classic-summary-strip) .summary-item {
  flex: 0 1 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 25px;
  padding: 2px 8px;
  border: 0;
  border-right: 1px solid #b6cce3;
  border-radius: 0;
  background: transparent;
}

.classic-crm-shell .summary-strip:not(.classic-summary-strip) .summary-item span,
.classic-crm-shell .summary-strip:not(.classic-summary-strip) .summary-item strong {
  display: inline;
  margin: 0;
  font-size: 13px;
}

.classic-crm-shell .summary-strip:not(.classic-summary-strip) .summary-item strong {
  color: #c61b16;
}

.classic-crm-shell .legacy-group,
.classic-crm-shell .legacy-section {
  border-color: #91b2d3;
  border-radius: 0;
}

.classic-crm-shell .legacy-group-head,
.classic-crm-shell .legacy-section header {
  min-height: 27px;
  padding: 3px 7px;
  background: linear-gradient(#f8fbff, #cee5fa);
}

.classic-crm-shell .legacy-card-grid {
  display: block;
  padding: 0;
}

.classic-crm-shell .legacy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 3px 7px;
  border: 0;
  border-bottom: 1px solid #cfdeed;
  border-radius: 0;
  background: #fff;
}

.classic-crm-shell .legacy-card:nth-child(even) {
  background: #f1f7fd;
}

.classic-crm-shell .legacy-card-main {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(110px, 0.5fr) minmax(220px, 1.4fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.classic-crm-shell .legacy-card-main strong,
.classic-crm-shell .legacy-card-main span,
.classic-crm-shell .legacy-card-main p {
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.classic-crm-shell .legacy-card-main strong {
  color: #003f7f;
  font-size: 13px;
}

.classic-crm-shell .legacy-card-actions {
  gap: 3px;
}

.classic-crm-shell .classic-summary-strip {
  display: flex;
  gap: 0;
  min-height: 27px;
  margin-bottom: 4px;
  border: 1px solid #9dbbd9;
  background: #edf6ff;
}

.classic-crm-shell .classic-summary-strip .summary-item {
  flex: 0 1 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 25px;
  padding: 2px 8px;
  border: 0;
  border-right: 1px solid #b6cce3;
  border-radius: 0;
  background: transparent;
}

.classic-crm-shell .classic-summary-strip .summary-item span,
.classic-crm-shell .classic-summary-strip .summary-item strong {
  display: inline;
  margin: 0;
  font-size: 13px;
}

.classic-crm-shell .classic-summary-strip .summary-item strong {
  color: #c61b16;
}

.classic-crm-shell .dashboard-grid,
.classic-crm-shell .dashboard-column {
  gap: 4px;
}

.classic-crm-shell .widget {
  border-color: #91b2d3;
  border-radius: 0;
  color: #101820;
}

.classic-crm-shell .widget-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 25px;
  gap: 3px;
  padding: 0 5px;
  border-bottom-color: #8db0d2;
  background: linear-gradient(#f9fcff, #cfe5f9);
}

.classic-crm-shell .widget-head h3 {
  color: #002f63;
  font-size: 13px;
  font-weight: 700;
}

.classic-crm-shell .drag-handle {
  width: 18px;
  height: 18px;
  border-radius: 0;
}

.classic-crm-shell .drag-handle svg {
  width: 13px;
  height: 13px;
}

.classic-crm-shell .widget-head-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.classic-crm-shell .widget-head-actions button,
.classic-crm-shell .widget-head-actions select,
.classic-crm-shell .widget-more button {
  min-width: 18px;
  height: 19px;
  border: 0;
  padding: 0 2px;
  background: transparent;
  color: #174f80;
  font-size: 12px;
  font-weight: 700;
}

.classic-crm-shell .widget-head-actions button:hover,
.classic-crm-shell .widget-head-actions select:hover,
.classic-crm-shell .widget-more button:hover {
  color: #003f7f;
  text-decoration: underline;
}

.classic-crm-shell .widget-head-actions select {
  width: 54px;
  border: 1px solid #8db0d2;
  background: #f5fbff;
}

.classic-crm-shell .widget-head-actions svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.classic-crm-shell .widget-more {
  min-height: 20px;
  padding: 0 4px;
  border-top: 1px solid #c0d2e4;
  text-align: right;
}

.classic-crm-shell .workbench-table .workbench-select-cell,
.classic-crm-shell .workbench-table .workbench-select-head {
  width: 44px;
  padding: 0 2px;
  text-align: center;
}

.classic-crm-shell .workbench-mini-head th {
  height: 17px;
  padding: 0 2px;
  background: #e6f2fd;
}

.classic-crm-shell .workbench-table .workbench-action-cell,
.classic-crm-shell .workbench-table .workbench-action-head {
  width: 66px;
  padding: 1px 3px;
}

.classic-crm-shell .workbench-table td:nth-child(2) {
  width: 42%;
}

.classic-crm-shell .workbench-table td:nth-child(3) {
  width: 28%;
}

.classic-crm-shell .workbench-table td:nth-child(4) {
  width: 112px;
}

.classic-crm-shell .workbench-registered-mail td:nth-child(2) {
  width: 26%;
}

.classic-crm-shell .workbench-registered-mail td:nth-child(3) {
  width: auto;
}

.classic-crm-shell .data-table {
  font-size: 12px;
}

.classic-crm-shell .data-table th,
.classic-crm-shell .data-table td,
.classic-crm-shell .widget .data-table th,
.classic-crm-shell .widget .data-table td {
  height: 22px;
  padding: 2px 5px;
  border-right: 1px solid #c0d2e4;
  border-bottom: 1px solid #c0d2e4;
}

.classic-crm-shell .widget .data-table td {
  color: #101820;
}

.classic-crm-shell .widget .data-table td:last-child {
  color: #26384a;
}

.classic-crm-shell .widget .table-link {
  color: #003f87;
  font-weight: 700;
}

.classic-crm-shell .workbench-row-menu {
  width: 58px;
  height: 19px;
  border: 1px solid #8db0d2;
  border-radius: 0;
  background: #f5fbff;
  color: #003f87;
  font-size: 12px;
  font-weight: 700;
}

.classic-crm-shell .widget .empty-state {
  color: #3d4d5d;
  font-weight: 600;
}

.classic-crm-shell .widget .drag-handle {
  color: #315d87;
}

.classic-crm-shell .data-table th {
  background: #d8e9f9;
  color: #00417f;
}

.classic-crm-shell .data-table tbody tr:nth-child(odd) {
  background: #f7fbff;
}

.classic-crm-shell .data-table tbody tr:nth-child(even) {
  background: #e8f2fc;
}

.classic-crm-shell .workbench-config-panel {
  margin: 0 0 4px;
  border-color: #8eafd0;
  border-radius: 0;
}

.classic-crm-shell .classic-panel-title {
  min-height: 25px;
  padding: 4px 7px;
  border-bottom: 1px solid #8eafd0;
  background: #d5e8fa;
  color: #003f7f;
  font-weight: 700;
}

.classic-crm-shell .classic-workbench-settings form {
  padding: 5px 7px 7px;
}

.classic-crm-shell .workbench-settings-head,
.classic-crm-shell .workbench-settings-row {
  grid-template-columns: 58px minmax(170px, 1fr) 62px 80px 46px;
  min-height: 24px;
}

.classic-crm-shell .parameter-settings-page,
.classic-crm-shell .parameter-settings-groups {
  gap: 5px;
}

.classic-crm-shell .parameter-toolbar {
  min-height: 34px;
  padding: 3px 5px;
  border-color: #8fb2d6;
  background: #edf6ff;
}

.classic-crm-shell .parameter-group {
  border-color: #8fb2d6;
}

.classic-crm-shell .parameter-group > header {
  min-height: 27px;
  padding: 3px 7px;
  border-bottom-color: #8fb2d6;
  background: linear-gradient(#f8fbff, #cee5fa);
}

.classic-crm-shell .parameter-group h3 {
  font-size: 13px;
}

.classic-crm-shell .parameter-card-grid {
  display: block;
  padding: 0;
}

.classic-crm-shell .parameter-card {
  position: static;
  width: 100%;
  min-height: 27px;
  display: grid;
  grid-template-columns: minmax(128px, 0.55fr) minmax(280px, 1.8fr) 104px 42px;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 0;
  border-bottom: 1px solid #cfdeed;
  border-radius: 0;
  background: #fff;
}

.classic-crm-shell .parameter-card:nth-child(even) {
  background: #f1f7fd;
}

.classic-crm-shell .parameter-card:hover {
  background: #dcecff;
}

.classic-crm-shell .parameter-card strong {
  padding: 0;
  color: #003f7f;
  font-size: 13px;
}

.classic-crm-shell .parameter-card-note {
  color: #344d64;
  font-size: 12px;
}

.classic-crm-shell .parameter-card-status {
  position: static;
  max-width: none;
  height: 19px;
  padding: 0 4px;
  border-radius: 1px;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}

.classic-crm-shell .parameter-card-action {
  color: #004c91;
  font-size: 12px;
  text-decoration: underline;
  text-align: right;
}

@media (max-width: 1020px) {
  .classic-crm-shell,
  .app-shell.legacy-customer-shell.classic-crm-shell {
    --classic-nav-width: 85px;
    --legacy-region-width: 168px;
    grid-template-columns: var(--classic-nav-width) minmax(0, 1fr);
  }

  .classic-crm-shell .side-head div:not(.brand-mark),
  .classic-crm-shell .nav-button span {
    display: block;
  }

  .classic-crm-shell .nav-button,
  .classic-crm-shell .nav-group-button {
    justify-items: stretch;
    padding: 0 6px;
  }

  .classic-crm-shell .nav-button {
    grid-template-columns: 19px minmax(0, 1fr);
  }

  .classic-crm-shell .nav-group-button {
    grid-template-columns: 19px minmax(0, 1fr) 12px;
  }

}

@media (max-width: 720px) {
  .classic-crm-shell,
  .app-shell.legacy-customer-shell.classic-crm-shell {
    grid-template-columns: 1fr;
  }

  .classic-crm-shell .side-nav {
    height: auto;
    padding: 4px;
    border-right: 0;
    border-bottom: 1px solid #7fa6cf;
  }

  .classic-crm-shell .side-head {
    min-height: 36px;
    padding: 2px 4px;
  }

  .classic-crm-shell #moduleNav {
    display: flex;
    padding: 0;
  }

  .classic-crm-shell .nav-button {
    min-width: max-content;
    grid-template-columns: 18px auto;
    padding: 0 6px;
  }

  .classic-crm-shell .parameter-card {
    grid-template-columns: minmax(110px, 0.7fr) minmax(160px, 1.3fr) 90px 36px;
    min-width: 520px;
  }

  .classic-crm-shell .parameter-card-grid {
    overflow-x: auto;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(360px, 1fr);
  background:
    linear-gradient(90deg, rgba(33, 79, 130, 0.95), rgba(33, 79, 130, 0.82)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Crect width='900' height='600' fill='%23eef2f6'/%3E%3Cg fill='none' stroke='%23c3ceda' stroke-width='2'%3E%3Cpath d='M0 80h900M0 160h900M0 240h900M0 320h900M0 400h900M0 480h900'/%3E%3Cpath d='M90 0v600M180 0v600M270 0v600M360 0v600M450 0v600M540 0v600M630 0v600M720 0v600M810 0v600'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='.6'%3E%3Crect x='90' y='80' width='540' height='80'/%3E%3Crect x='180' y='240' width='630' height='80'/%3E%3Crect x='0' y='400' width='450' height='80'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}

.login-brand {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  min-width: 0;
}

.brand-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--brand);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark.small {
  width: 38px;
  height: 38px;
  font-size: 15px;
}

.login-brand h1 {
  margin: 28px 0 8px;
  font-size: 39px;
  letter-spacing: 0;
}

.login-brand p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.login-panel {
  align-self: center;
  justify-self: center;
  width: min(430px, calc(100vw - 40px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.panel-title h2 {
  margin: 0;
  font-size: 23px;
}

.panel-title span {
  color: var(--muted);
  font-size: 13px;
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

label {
  display: block;
  margin-bottom: 16px;
}

label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 14px;
}

.field {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.field svg {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 8px;
  background: transparent;
}

.primary-action {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--brand-strong);
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

.form-error {
  min-height: 18px;
  margin: 12px 0 0;
  color: var(--danger);
  font-size: 14px;
}

.app-shell {
  width: 100vw;
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 115px minmax(0, 1fr);
}

.side-nav {
  background: #1f3147;
  color: #f4f7fb;
  padding: 12px;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.side-head strong,
.side-head span {
  display: block;
  line-height: 1.25;
}

.side-head span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

#moduleNav {
  display: grid;
  gap: 3px;
  margin-top: 12px;
}

.nav-button {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  text-align: left;
  padding: 0 10px;
}

.nav-button svg,
.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button.active,
.nav-button:hover {
  background: #2c4766;
  color: #fff;
}

.nav-group {
  display: grid;
  gap: 3px;
}

.nav-group-button {
  grid-template-columns: 26px 1fr auto;
}

.nav-caret {
  font-size: 13px;
  line-height: 1;
  opacity: 0.72;
}

.nav-submenu {
  display: grid;
  gap: 3px;
  padding-left: 18px;
}

.nav-submenu[hidden] {
  display: none;
}

.nav-subheading {
  margin: 6px 6px 2px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 18px;
}

.nav-child {
  min-height: 30px;
  grid-template-columns: 22px 1fr;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

.legacy-nav-child {
  grid-template-columns: 14px minmax(0, 1fr);
  min-height: 25px;
  padding: 0 8px;
  font-size: 13px;
}

.legacy-nav-child span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-legacy-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.legacy-nav-child.active .nav-legacy-dot,
.legacy-nav-child:hover .nav-legacy-dot {
  background: #fff;
}

.nav-child svg {
  width: 16px;
  height: 16px;
}

.workspace {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.legacy-quickbar {
  min-width: 0;
  height: 24px;
  overflow: hidden;
  border-bottom: 1px solid #7aa8d8;
  background: linear-gradient(#1677bb, #075a9c);
  font-size: 13px;
  line-height: 22px;
}

.legacy-quickbar-row {
  height: 23px;
  min-height: 23px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
}

.legacy-quickbar-row button {
  flex: 0 0 auto;
  height: 22px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.62);
  padding: 0 5px;
  background: transparent;
  color: #fff;
  text-decoration: underline;
  font: inherit;
  line-height: 22px;
  cursor: pointer;
}

.legacy-quickbar-row button:last-child {
  border-right: 0;
}

.legacy-quickbar-gap {
  flex: 1 1 auto;
  min-width: 22px;
  height: 18px;
}

.legacy-quickbar-sub {
  min-height: 20px;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.78);
}

.legacy-quickbar-sub button {
  order: 1;
  border-right: 0;
  color: #004b91;
  text-decoration: none;
}

.legacy-location {
  margin-left: 0;
  margin-right: 0;
  color: #173b62;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.view-title {
  min-width: 0;
}

.view-title h2 {
  margin: 0;
  font-size: 21px;
}

.view-title span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
}

.icon-button:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.icon-button.inline {
  width: 34px;
  height: 34px;
  margin-right: 3px;
  border: 0;
}

.user-chip {
  min-width: 118px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.user-chip span,
.user-chip small {
  display: inline;
}

.user-chip span {
  font-weight: 700;
}

.user-chip small {
  color: var(--muted);
}

.notice {
  margin: 12px 18px 0;
  padding: 10px 12px;
  border: 1px solid #d7b98f;
  background: #fff8ed;
  color: #6b3d10;
  border-radius: var(--radius);
  font-size: 14px;
}

.notice.notice-success {
  border-color: #32854b;
  background: #eef9f0;
  color: #205d32;
}

.notice.notice-danger {
  border-color: #c9362c;
  background: #fff1f0;
  color: #8b1611;
  font-weight: 700;
}

.notice.notice-warning {
  border-color: #d08a00;
  background: #fff8df;
  color: #7a4700;
  font-weight: 700;
}

.mail-receive-alerts {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}

.mail-receive-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid #d08a00;
  background: #fff8df;
  color: #6f4200;
  font-size: 14px;
}

.mail-receive-alert.danger {
  border-color: #c9362c;
  background: #fff1f0;
  color: #8b1611;
}

.mail-receive-alert strong {
  white-space: nowrap;
}

.mail-receive-alert span {
  min-width: 0;
}

.content {
  min-width: 0;
  padding: 16px 18px 24px;
}

.app-shell.legacy-customer-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  grid-template-columns: 115px minmax(0, 1fr);
  background: #fff;
  overflow: hidden;
}

.app-shell.legacy-customer-shell .side-nav {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.app-shell.legacy-customer-shell .topbar {
  display: none;
}

.app-shell.legacy-customer-shell .legacy-quickbar {
  display: block;
}

.app-shell.legacy-customer-shell .workspace {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #fff;
  overflow: hidden;
}

.app-shell.legacy-customer-shell .notice,
.app-shell.legacy-mail-shell .notice {
  position: absolute;
  top: 44px;
  left: 6px;
  right: 6px;
  z-index: 18;
  margin: 0;
  box-shadow: 0 2px 7px rgba(24, 58, 92, 0.18);
}

.app-shell.legacy-customer-shell .content {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
}

.app-shell.legacy-customer-shell .legacy-customer-page {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  border: 0;
}

.contact-workspace-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  border: 1px solid #8fb5df;
  background: #fff;
  overflow: hidden;
  color: #000;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
}

.contact-workspace-tabs {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: end;
  padding: 3px 4px 0;
  border-right: 0;
  border-bottom: 1px solid #5d8fc2;
  background: linear-gradient(#d5e9fb, #b8d5ee);
  overflow: hidden;
}

.workspace-tabbar[hidden] {
  display: none !important;
}

.workspace-tabbar {
  height: 34px;
  flex: 0 0 auto;
}

.contact-workspace-tab-list {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: end;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.contact-workspace-tab,
.contact-workspace-close {
  height: 29px;
  border: 1px solid #5d8fc2;
  border-top: 2px solid #6f9dcc;
  background: linear-gradient(#f6fbff, #dcecf9);
  color: #002f5e;
  font: inherit;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.contact-workspace-tab-row {
  display: grid;
  grid-template-columns: minmax(104px, 195px) 24px;
  gap: 1px;
  margin-left: 1px;
}

.dashboard-workspace-tab {
  position: sticky;
  left: 0;
  z-index: 3;
  grid-template-columns: minmax(88px, 114px);
  margin-left: 0;
  margin-right: 3px;
}

.dashboard-workspace-tab .contact-workspace-tab {
  border-color: #315f93;
  background: linear-gradient(#fff8d9, #e8d388);
  color: #3d2d00;
}

.dashboard-workspace-tab .contact-workspace-tab b {
  border-color: #8a6d00;
  background: #9a7800;
}

.dashboard-workspace-tab .contact-workspace-tab small {
  color: #4d3a00;
}

.dashboard-workspace-tab.active .contact-workspace-tab {
  border-color: #00559f;
  border-top-color: #004f99;
  background: #fff;
  color: #001f3f;
}

.contact-workspace-tab {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  text-align: left;
}

.contact-workspace-tab b {
  min-width: 30px;
  min-height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid #1e5f9a;
  background: #1f5f9b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
}

.contact-workspace-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-workspace-tab small {
  min-width: 0;
  color: #003968;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-workspace-tab-row.active .contact-workspace-tab {
  border-color: #1b5f9f;
  border-top: 3px solid #004f99;
  border-bottom-color: #fff;
  background: #fff;
  color: #001f3f;
  font-weight: 700;
  box-shadow: 0 -1px 0 #004f99, 0 1px 0 #fff inset;
}

.contact-workspace-tab-row.active .contact-workspace-tab b {
  border-color: #003f7f;
  background: #004f99;
}

.contact-workspace-tab-row.active .contact-workspace-tab small {
  color: #001f3f;
}

.contact-workspace-close {
  width: 25px;
  min-height: 0;
  padding: 0;
  line-height: 24px;
  font-weight: 700;
  color: #8a1c1c;
  background: linear-gradient(#fff8f8, #eadcdc);
}

.contact-workspace-close:hover,
.contact-workspace-tab:hover {
  background: #cfe7ff;
}

.contact-workspace-frame-wrap {
  min-width: 0;
  min-height: 0;
  background: #fff;
  overflow: hidden;
}

.contact-workspace-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #fff;
}

.contact-workspace-mail-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.contact-workspace-mail-head {
  min-width: 0;
  padding: 4px 7px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  border-bottom: 1px solid #9fc1e5;
  background: linear-gradient(#eef7ff, #d4e9fb);
}

.contact-workspace-mail-head > span {
  color: #004987;
  font-weight: 700;
}

.contact-workspace-mail-head > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-workspace-mail-head .detail-meta {
  grid-column: 1 / -1;
}

.contact-workspace-mail-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 6px;
}

.contact-workspace-form-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.contact-workspace-form-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.contact-workspace-record-form {
  max-width: 1260px;
}

.contact-workspace-record-form .form-footer {
  position: sticky;
  bottom: 0;
  padding: 8px 0;
  background: #fff;
  border-top: 1px solid #bdd3ea;
}

.app-shell.legacy-mail-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  grid-template-columns: var(--classic-nav-width) minmax(0, 1fr);
  background: #fff;
  overflow: hidden;
}

.app-shell.legacy-mail-shell .side-nav {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.app-shell.legacy-mail-shell .topbar {
  display: none;
}

.app-shell.legacy-mail-shell .workspace {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #fff;
  overflow: hidden;
}

.app-shell.legacy-mail-shell .content {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
}

.legacy-mail-page {
  --mail-folder-width: 190px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--mail-folder-width) minmax(0, 1fr);
  background: #fff;
  border: 1px solid #8fb5df;
  color: #000;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  overflow: hidden;
}

.legacy-mail-page.folders-collapsed {
  grid-template-columns: 24px minmax(0, 1fr);
}

.legacy-mail-folder-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 24px minmax(0, 1fr);
  border-right: 1px solid #8fb5df;
  background: #f6fbff;
  overflow: hidden;
}

.legacy-mail-folder-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 4px;
  border-bottom: 1px solid #8fb5df;
  background: linear-gradient(#eff8ff, #c7ddf4);
  color: #004f9e;
  font-weight: 700;
}

.legacy-mail-page.folders-collapsed .legacy-mail-folder-head {
  justify-content: center;
  padding: 0 2px;
}

.legacy-mail-page.folders-collapsed .legacy-mail-folder-head > span,
.legacy-mail-page.folders-collapsed .legacy-mail-folder-body {
  display: none;
}

.legacy-mail-folder-body {
  min-height: 0;
  padding: 3px 2px 8px;
  overflow: auto;
}

.legacy-mail-folder-node,
.legacy-mail-user-button {
  width: 100%;
  min-width: 0;
  height: 21px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.legacy-mail-folder-node:hover,
.legacy-mail-user-button:hover {
  background: #cfe3fb;
}

.legacy-mail-folder-node.active,
.legacy-mail-user-button.active {
  background: #316ac5;
  color: #fff;
}

.legacy-mail-folder-node.active .legacy-region-count,
.legacy-mail-user-button.active .legacy-region-count {
  color: #fff;
}

.legacy-mail-folder-node.child {
  padding-left: 17px;
}

.legacy-mail-tree-divider {
  height: 22px;
  display: flex;
  align-items: center;
  margin-top: 3px;
  padding: 0 5px;
  border-top: 1px solid #b8cde3;
  border-bottom: 1px solid #d6e4f2;
  background: #e7f1fb;
  color: #315a82;
  font-weight: 700;
}

.legacy-mail-user-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
}

.legacy-mail-user-row .legacy-tree-toggle {
  width: 12px;
  height: 12px;
  padding: 0;
  line-height: 9px;
}

.legacy-mail-user-button {
  padding-left: 0;
}

.legacy-mail-user-folders[hidden] {
  display: none;
}

.mail-tree-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-mail-main {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 32px 28px auto minmax(180px, 1fr) minmax(190px, 1fr);
  overflow: hidden;
}

.legacy-mail-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-bottom: 1px solid #9dbfe2;
  background: #edf6ff;
  white-space: nowrap;
  overflow: hidden;
}

.legacy-mail-search-label {
  color: #c00;
}

.legacy-mail-all-search {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.legacy-mail-all-search input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.legacy-mail-toolbar > input[type="text"],
.legacy-mail-toolbar > input:not([type]) {
  width: min(360px, 38vw);
  height: 24px;
  border: 1px solid #789fc8;
  border-radius: 1px;
  padding: 0 5px;
  font-size: 13px;
}

.legacy-icon-tool {
  width: 26px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #6799ca;
  border-radius: 2px;
  background: linear-gradient(#fff, #d8ecff);
  color: #064f91;
}

.legacy-icon-tool svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.legacy-mail-selection {
  min-width: 0;
  margin-left: auto;
  color: #315f8d;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-mail-pager {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-bottom: 1px solid #9dbfe2;
  background: #d9eafa;
  white-space: nowrap;
  overflow-x: auto;
}

.legacy-mail-pager select {
  height: 22px;
  border: 1px solid #789fc8;
  background: #fff;
  font-size: 13px;
}

.legacy-mail-pager strong {
  color: #d00;
}

.legacy-mail-routing-toolbar {
  min-width: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-bottom: 1px solid #88acd0;
  background: linear-gradient(#f7fbff, #e0edf9);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.legacy-mail-routing-toolbar[hidden] {
  display: none;
}

.legacy-mail-action-strip {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  flex: 0 0 auto;
}

.legacy-mail-action-tool {
  --mail-action-color: #173d64;
  --mail-action-border: transparent;
  --mail-action-bg: transparent;
  width: auto;
  min-width: 54px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--mail-action-border);
  border-radius: 2px;
  padding: 2px 5px;
  background: var(--mail-action-bg);
  color: var(--mail-action-color);
  font-size: 12px;
  line-height: 13px;
}

.legacy-mail-action-tool span {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-mail-action-tool:hover:not(:disabled),
.legacy-mail-action-tool:focus-visible {
  border-color: var(--mail-action-color);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.legacy-mail-action-tool:disabled {
  color: #9aa9b7;
  opacity: 0.72;
}

.legacy-mail-action-tool svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.legacy-mail-action-tool.tone-route:not(:disabled) {
  --mail-action-color: #075a9b;
  --mail-action-border: #9cc8ef;
  --mail-action-bg: linear-gradient(#f7fbff, #e0f0ff);
}

.legacy-mail-action-tool.tone-reply:not(:disabled) {
  --mail-action-color: #17613f;
  --mail-action-border: #a4d5bd;
  --mail-action-bg: linear-gradient(#f8fff9, #e1f5e9);
}

.legacy-mail-action-tool.tone-follow:not(:disabled) {
  --mail-action-color: #8a5700;
  --mail-action-border: #e4c07b;
  --mail-action-bg: linear-gradient(#fffdf4, #fff0c8);
}

.legacy-mail-action-tool.tone-view:not(:disabled) {
  --mail-action-color: #473a91;
  --mail-action-border: #c2b9ee;
  --mail-action-bg: linear-gradient(#fbf9ff, #eee9ff);
}

.legacy-mail-action-tool.tone-danger:not(:disabled),
.legacy-mail-action-tool.danger:not(:disabled) {
  --mail-action-color: #9a241c;
  --mail-action-border: #dea39d;
  --mail-action-bg: linear-gradient(#fffafa, #f8dfdc);
}

/* Mobile CRM shell: keep the old menus visible, but make them swipeable. */
@media (max-width: 720px) {
  .app-shell.classic-crm-shell,
  .app-shell.classic-crm-shell.legacy-customer-shell,
  .app-shell.classic-crm-shell.legacy-mail-shell {
    --classic-nav-width: 100vw;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .classic-crm-shell .side-nav,
  .app-shell.legacy-customer-shell.classic-crm-shell .side-nav,
  .app-shell.legacy-mail-shell.classic-crm-shell .side-nav {
    position: relative;
    top: auto;
    z-index: 20;
    width: 100%;
    height: auto;
    min-height: 46px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    border-right: 0;
    border-bottom: 1px solid #7fa6cf;
    overflow: hidden;
  }

  .classic-crm-shell .side-head {
    width: 42px;
    min-height: 44px;
    padding: 4px;
    border-bottom: 0;
    justify-content: center;
  }

  .classic-crm-shell .side-head > div:not(.brand-mark) {
    display: none;
  }

  .classic-crm-shell .side-head .brand-mark.small {
    width: 31px;
    height: 31px;
    font-size: 14px;
  }

  .classic-crm-shell #moduleNav {
    min-width: 0;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 4px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .classic-crm-shell .nav-group,
  .classic-crm-shell .nav-submenu {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 0;
  }

  .classic-crm-shell .nav-submenu[hidden] {
    display: none;
  }

  .classic-crm-shell .nav-button,
  .classic-crm-shell .nav-child {
    flex: 0 0 auto;
    min-width: 68px;
    min-height: 36px;
    height: 36px;
    grid-template-columns: 17px auto;
    padding: 0 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  .classic-crm-shell .nav-group-button {
    grid-template-columns: 17px auto 10px;
  }

  .classic-crm-shell .nav-button span,
  .classic-crm-shell .nav-child span:last-child {
    line-height: 1.15;
    white-space: nowrap;
  }

  .classic-crm-shell .workspace,
  .app-shell.legacy-customer-shell.classic-crm-shell .workspace,
  .app-shell.legacy-mail-shell.classic-crm-shell .workspace {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .classic-crm-shell .legacy-quickbar {
    height: 38px;
    min-height: 38px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .classic-crm-shell .legacy-quickbar-row {
    width: max-content;
    min-width: 100%;
    height: 37px;
    min-height: 37px;
    gap: 0;
    padding: 0 8px;
    overflow: visible;
  }

  .classic-crm-shell .legacy-quickbar-row button {
    height: 36px;
    min-width: 58px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 36px;
  }

  .classic-crm-shell .legacy-quickbar-gap {
    flex: 0 0 12px;
    min-width: 12px;
  }

  .classic-crm-shell .workspace-tabbar,
  .classic-crm-shell .contact-workspace-tabs {
    height: 39px;
    min-height: 39px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .classic-crm-shell .contact-workspace-tab-list {
    min-width: max-content;
    overflow: visible;
  }

  .classic-crm-shell .contact-workspace-tab-row {
    grid-template-columns: minmax(82px, 126px) 23px;
  }

  .classic-crm-shell .dashboard-workspace-tab {
    position: sticky;
    left: 0;
    grid-template-columns: minmax(72px, 92px);
  }

  .classic-crm-shell .contact-workspace-tab,
  .classic-crm-shell .contact-workspace-close {
    height: 33px;
    font-size: 15px;
  }

  .classic-crm-shell .topbar {
    min-height: 42px;
    padding: 4px 6px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .classic-crm-shell .view-title h2 {
    font-size: 15px;
  }

  .classic-crm-shell .top-actions {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .classic-crm-shell .top-actions .legacy-location {
    display: none;
  }

  .classic-crm-shell .content,
  .app-shell.legacy-customer-shell.classic-crm-shell .content,
  .app-shell.legacy-mail-shell.classic-crm-shell .content {
    min-height: 0;
    padding: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell.legacy-customer-shell.classic-crm-shell .legacy-customer-page {
    min-width: 760px;
  }

  .legacy-customer-table-wrap,
  .legacy-mail-list-wrap,
  .legacy-mail-table-wrap,
  .compact-settings-table-host {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.legacy-mail-action-separator {
  width: 1px;
  min-width: 1px;
  margin: 3px 3px;
  background: #aabfd5;
}

.legacy-mail-routing-selected {
  min-width: 80px;
  max-width: 220px;
  margin-left: auto;
  color: #556d84;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-tool-button.danger {
  border-color: #b36b64;
  background: linear-gradient(#fff, #f5d9d5);
  color: #8a241b;
}

.legacy-mail-page-links {
  display: inline-flex;
  align-items: center;
}

.legacy-mail-select-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  color: #315f85;
}

.legacy-mail-select-actions button {
  height: 20px;
  padding: 0 6px;
  border: 1px solid #73a3cf;
  border-radius: 2px;
  background: linear-gradient(#fff, #d7eaff);
  color: #004c91;
  font-size: 13px;
}

.legacy-mail-select-actions span {
  min-width: 48px;
}

.legacy-mail-page-links button {
  min-width: 17px;
  height: 20px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #004c9a;
  text-decoration: underline;
  font-size: 13px;
}

.legacy-mail-page-links button.active {
  color: #d00;
  font-weight: 700;
  text-decoration: none;
}

.legacy-mail-page-links button:disabled {
  color: #8493a3;
  cursor: default;
  text-decoration: none;
}

.legacy-mail-list-host {
  min-width: 0;
  min-height: 0;
  border-bottom: 2px solid #7fa7cf;
  overflow: hidden;
}

.legacy-mail-table-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.legacy-mail-table {
  width: 100%;
  min-width: 860px;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  color: #000;
  font-size: 12px;
  line-height: 15px;
}

.legacy-mail-table .mail-col-select { width: 60px; }
.legacy-mail-table .mail-col-attr { width: 54px; }
.legacy-mail-table .mail-col-status { width: 54px; }
.legacy-mail-table .mail-col-party { width: 250px; }
.legacy-mail-table .mail-col-subject { width: auto; }
.legacy-mail-table .mail-col-date { width: 124px; }
.legacy-mail-table .mail-col-size { width: 78px; }

.legacy-mail-table th,
.legacy-mail-table td {
  height: 24px;
  padding: 2px 5px;
  border: 1px solid #c6d7ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-mail-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 27px;
  background: linear-gradient(#eaf6ff, #bdd7ef);
  color: #034f91;
  font-size: 13px;
  text-align: center;
}

.legacy-mail-sort-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.legacy-mail-sort-button:hover,
.legacy-mail-sort-button.active {
  color: #b00000;
  text-decoration: underline;
}

.legacy-mail-table .mail-select-head,
.legacy-mail-table .mail-select-cell {
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  cursor: pointer;
}

.legacy-mail-table .mail-select-head input,
.legacy-mail-table .mail-select-cell input {
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: middle;
}

.legacy-mail-table tbody tr:nth-child(odd) { background: #edf5fc; }
.legacy-mail-table tbody tr:nth-child(even) { background: #d7e7f6; }
.legacy-mail-table tbody tr:hover { background: #fff4b8; }
.legacy-mail-table tbody tr.selected { background: #9fc7ee; }
.legacy-mail-table tbody tr.unread { font-weight: 700; }
.legacy-mail-table tbody tr:focus-visible { outline: 2px solid #1f65aa; outline-offset: -2px; }

.legacy-mail-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.legacy-mail-subject {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #004a96;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-attribute-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #bd2c1b;
}

.mail-attribute-cell svg,
.legacy-mail-attachments svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.mail-status.unread { color: #c00; }
.mail-status.read { color: #315f85; font-weight: 400; }

.mail-direction {
  display: inline-block;
  width: 15px;
  margin-right: 2px;
  font-weight: 700;
  text-align: center;
}

.mail-direction.in { color: #d22; }
.mail-direction.out { color: #0a8c45; }

.legacy-mail-preview {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 30px auto auto minmax(0, 1fr);
  background: #fff;
  overflow: hidden;
}

.legacy-mail-preview-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  border-bottom: 1px solid #9dbfe2;
  background: linear-gradient(#f4f9ff, #d8e9f9);
}

.legacy-mail-preview-head strong {
  min-width: 0;
  flex: 1 1 auto;
  color: #004b91;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-mail-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 12px;
  padding: 4px 7px;
  border-bottom: 1px solid #d1deeb;
  background: #f8fbfe;
  font-size: 12px;
}

.legacy-mail-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: 0 1 min(var(--detail-field-width, 18ch), 100%);
  width: min(var(--detail-field-width, 18ch), 100%);
  max-width: min(var(--detail-field-max, 64ch), 100%);
  min-width: min(6ch, 100%);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.3;
}

.legacy-mail-meta-item b,
.legacy-mail-attachments > b {
  color: #345b7f;
}

.legacy-mail-meta-item b {
  flex: 0 0 auto;
}

.legacy-mail-meta-item span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.legacy-mail-attachments {
  min-width: 0;
  min-height: 27px;
  max-height: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 7px 14px;
  padding: 3px 7px;
  border-bottom: 1px solid #c5d6e7;
  background: #fffbea;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: normal;
}

.legacy-mail-attachments a {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 3px;
  max-width: min(38ch, 42vw);
  overflow: hidden;
  color: #004b91;
}

.legacy-mail-attachments .missing-attachment { color: #9a3d2f; }
.mail-no-attachment { color: #758291; }

.legacy-mail-body {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px 10px 18px;
  background: #fff;
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: auto;
  overflow-wrap: anywhere;
}

.legacy-mail-rich-body {
  white-space: normal;
}

.legacy-mail-rich-body p,
.legacy-mail-rich-body div,
.legacy-mail-rich-body blockquote {
  margin: 0 0 8px;
}

.legacy-mail-rich-body table {
  max-width: 100%;
}

.legacy-mail-rich-body td,
.legacy-mail-rich-body th {
  max-width: 100%;
}

.legacy-mail-rich-body img {
  max-width: 100%;
  object-fit: contain;
}

.legacy-mail-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

body.mail-routing-open {
  overflow: hidden;
}

.mail-routing-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
}

.mail-routing-overlay[hidden] {
  display: none;
}

.mail-routing-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 31, 46, 0.42);
}

.mail-routing-panel {
  position: relative;
  width: min(980px, calc(100vw - 36px));
  max-height: min(760px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: 43px minmax(0, 1fr);
  border: 1px solid #5e8fbe;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
}

.mail-routing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px 4px 10px;
  border-bottom: 1px solid #7da5cc;
  background: linear-gradient(#f4f9ff, #cbdff3);
}

.mail-routing-head > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mail-routing-head span {
  color: #58738e;
  font-size: 12px;
}

.mail-routing-head strong {
  color: #004c91;
  font-size: 16px;
}

.mail-routing-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.mail-routing-source {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #a9bfd4;
  background: #f6f9fc;
}

.mail-routing-source > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  border-right: 1px solid #d4e0eb;
  border-bottom: 1px solid #d4e0eb;
}

.mail-routing-source dt,
.mail-routing-source dd {
  min-width: 0;
  margin: 0;
  padding: 5px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-routing-source dt {
  background: #e8f1fa;
  color: #315b82;
  font-weight: 700;
}

.mail-routing-form {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 38px;
  overflow: hidden;
}

.mail-routing-form-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  align-content: start;
  padding: 12px;
  overflow: auto;
}

.mail-routing-form-grid.one-row {
  grid-template-columns: minmax(260px, 440px);
}

.mail-routing-customer-form {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  overflow: auto;
}

.mail-routing-customer-form .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mail-routing-customer-form .mail-routing-scope {
  margin: 0;
}

.mail-routing-scope {
  margin: 0 12px 8px;
  padding: 7px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid #adc7df;
  background: #f5f9fd;
}

.mail-routing-scope legend {
  padding: 0 4px;
  color: #315b82;
  font-weight: 700;
}

.mail-routing-scope label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1f3347;
  white-space: nowrap;
}

.mail-routing-scope input {
  width: 13px;
  height: 13px;
  margin: 0;
}

.mail-routing-form-grid label {
  min-width: 0;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.mail-routing-form-grid label.wide {
  grid-column: 1 / -1;
}

.mail-routing-form-grid label > span {
  color: #315b82;
  text-align: right;
}

.mail-routing-form input,
.mail-routing-form select,
.mail-routing-form textarea,
.mail-routing-searchbar input,
.mail-routing-searchbar select {
  width: 100%;
  min-width: 0;
  border: 1px solid #87a9ca;
  border-radius: 2px;
  background: #fff;
  color: #111;
  font: inherit;
}

.mail-routing-form-grid label.compact input,
.mail-routing-form-grid label.compact select {
  width: min(100%, 176px);
}

.mail-routing-form-grid label.medium input,
.mail-routing-form-grid label.medium select {
  width: min(100%, 260px);
}

.mail-routing-form input,
.mail-routing-form select,
.mail-routing-searchbar input,
.mail-routing-searchbar select {
  height: 26px;
  padding: 2px 5px;
}

.mail-routing-form textarea {
  min-height: 62px;
  padding: 5px;
  resize: vertical;
}

.mail-routing-searchbar {
  min-width: 0;
  display: grid;
  grid-template-columns: 150px minmax(220px, 1fr) auto;
  gap: 5px;
  padding: 7px;
  border-bottom: 1px solid #abc3dc;
  background: #edf5fd;
}

.mail-routing-merge-fields {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.mail-routing-company-results {
  min-width: 0;
  min-height: 180px;
  overflow: auto;
}

.mail-routing-company-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

.mail-routing-company-table th,
.mail-routing-company-table td {
  height: 25px;
  padding: 2px 5px;
  border: 1px solid #c4d6e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-routing-company-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(#eef8ff, #c9def2);
  color: #064f91;
}

.mail-routing-company-table tbody tr:nth-child(odd) { background: #f3f8fd; }
.mail-routing-company-table tbody tr:nth-child(even) { background: #deebf7; }
.mail-routing-company-table th:first-child,
.mail-routing-company-table td:first-child { width: 48px; text-align: center; }
.mail-routing-company-table th:nth-child(2),
.mail-routing-company-table td:nth-child(2) { width: 66px; }
.mail-routing-company-table th:nth-child(3),
.mail-routing-company-table td:nth-child(3) { width: 88px; }
.mail-routing-company-table th:nth-child(5),
.mail-routing-company-table td:nth-child(5) { width: 105px; }
.mail-routing-company-table th:nth-child(7),
.mail-routing-company-table td:nth-child(7) { width: 90px; }

.mail-routing-confirm {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  padding: 18px;
}

.mail-routing-confirm strong {
  color: #8a241b;
  font-size: 15px;
}

.mail-routing-confirm span {
  color: #4e5f70;
}

.mail-routing-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 5px 8px;
  border-top: 1px solid #8fb2d5;
  background: #e6f0fa;
}

#mailRoutingResult {
  min-width: 0;
  margin-right: auto;
  color: #9b2f23;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .mail-routing-overlay { padding: 6px; }
  .mail-routing-panel { width: calc(100vw - 12px); max-height: calc(100vh - 12px); }
  .mail-routing-source { grid-template-columns: 1fr; }
  .mail-routing-form-grid { grid-template-columns: 1fr; }
  .mail-routing-form-grid label.wide { grid-column: auto; }
  .mail-routing-searchbar { grid-template-columns: 1fr auto; }
  .mail-routing-searchbar select { grid-column: 1 / -1; }
}

.legacy-mail-compose-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 29px 27px minmax(0, 1fr);
  border: 1px solid #8fb5df;
  background: #fff;
  color: #000;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  overflow: hidden;
}

.mail-compose-titlebar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 7px;
  border-bottom: 1px solid #7fa6cf;
  background: linear-gradient(#f7fbff, #cbdff3);
  color: #004b91;
}

.mail-compose-titlebar strong {
  font-size: 15px;
}

.mail-compose-titlebar span {
  min-width: 0;
  color: #526d87;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-compose-tabs {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  padding: 2px 5px 0;
  border-bottom: 1px solid #7fa6cf;
  background: #e9f3fd;
}

.mail-compose-tabs button {
  height: 24px;
  min-width: 72px;
  border: 1px solid #91b1d1;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: #eef5fc;
  color: #315b83;
  font-size: 13px;
}

.mail-compose-tabs button.active {
  position: relative;
  top: 1px;
  background: #fff;
  color: #003f7f;
  font-weight: 700;
}

.mail-compose-form {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 34px;
  overflow: hidden;
}

.mail-compose-pane {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.mail-compose-pane[hidden] {
  display: none;
}

.message-pane {
  min-height: 0;
}

.mail-compose-message-layout {
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  overflow: hidden;
}

.mail-compose-main-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border-right: 1px solid #8fb5df;
  overflow: hidden;
}

.mail-compose-attachment-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f8fbfe;
  overflow: hidden;
}

.mail-compose-header-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background: #f8fbfe;
}

.mail-compose-label-col {
  width: 76px;
}

.mail-compose-header-table th,
.mail-compose-header-table td {
  height: 28px;
  padding: 2px 4px;
  border: 1px solid #c5d7e9;
}

.mail-compose-header-table th {
  width: 76px;
  color: #345d83;
  font-weight: 400;
  text-align: right;
}

.mail-compose-header-table input,
.mail-compose-header-table select,
.mail-compose-header-table textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #7da6d0;
  border-radius: 1px;
  background: #fff;
  color: #000;
  font-size: 13px;
}

.mail-compose-header-table input,
.mail-compose-header-table select {
  height: 23px;
  padding: 0 5px;
}

.mail-compose-header-table textarea {
  min-height: 52px;
  padding: 4px 5px;
  resize: vertical;
}

.mail-compose-address-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mail-compose-address-row input,
.mail-compose-address-row textarea {
  flex: 1 1 auto;
}

.mail-compose-address-row .legacy-tool-button {
  flex: 0 0 auto;
  height: 23px;
  padding: 0 9px;
}

.mail-compose-address-row.textarea-row {
  align-items: stretch;
}

.mail-compose-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-bottom: 1px solid #aac4df;
  background: #eaf4fd;
  white-space: nowrap;
  overflow-x: auto;
}

.mail-compose-tools select {
  width: min(280px, 32vw);
  height: 24px;
  border: 1px solid #7da6d0;
  background: #fff;
  font-size: 13px;
}

.mail-compose-tool-field,
.mail-compose-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  margin: 0;
  color: #315b83;
  font-size: 13px;
  line-height: 24px;
}

.mail-compose-tool-field span {
  white-space: nowrap;
}

.mail-compose-sender-field select {
  width: 310px;
}

.mail-compose-priority-field select {
  width: 78px;
}

.mail-compose-tool-spacer {
  flex: 0 0 18px;
  width: 18px;
  height: 1px;
}

#composeTemplateSelect {
  width: 180px;
}

.mail-compose-toggle input {
  width: 13px;
  height: 13px;
  margin: 0;
}

.mail-compose-schedule-input {
  flex: 0 0 auto;
  width: 158px;
  height: 24px;
  border: 1px solid #7da6d0;
  background: #fff;
  color: #000;
  font-size: 13px;
}

.mail-recipient-picker[hidden] {
  display: none;
}

.mail-recipient-picker {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 88px;
  background: rgba(7, 25, 42, 0.18);
}

.mail-recipient-dialog {
  width: min(860px, calc(100vw - 34px));
  max-height: min(560px, calc(100vh - 120px));
  display: grid;
  grid-template-rows: 30px 32px minmax(0, 1fr);
  border: 1px solid #5d9bd4;
  background: #f6fbff;
  box-shadow: 0 8px 24px rgba(0, 41, 83, 0.24);
}

.mail-recipient-dialog header,
.mail-recipient-search {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-bottom: 1px solid #aac4df;
  background: #dceeff;
}

.mail-recipient-dialog header strong {
  flex: 1 1 auto;
  color: #004b91;
}

.mail-recipient-search input {
  flex: 1 1 auto;
  height: 24px;
  min-width: 0;
  border: 1px solid #7da6d0;
  padding: 0 6px;
  font-size: 13px;
}

.mail-recipient-search span {
  min-width: 84px;
  color: #345d83;
}

.mail-recipient-results {
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.mail-recipient-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.mail-recipient-table th,
.mail-recipient-table td {
  height: 24px;
  padding: 2px 5px;
  border: 1px solid #bfd4e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-recipient-table th {
  background: linear-gradient(#dff0ff, #c3ddf5);
  color: #004b91;
  text-align: center;
}

.mail-recipient-table tbody tr:nth-child(even) {
  background: #dbeaf8;
}

.mail-recipient-table tbody tr:nth-child(odd) {
  background: #f7fbff;
}

.mail-recipient-table .select-col {
  width: 48px;
  text-align: center;
}

.compose-body-source[hidden] {
  display: none;
}

.mail-editor-toolbar {
  min-width: 0;
  height: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-bottom: 1px solid #aac4df;
  background: #f3f8fe;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.mail-editor-toolbar::-webkit-scrollbar {
  display: none;
}

.mail-editor-select,
.mail-editor-color {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 23px;
  margin: 0;
  color: #315b83;
  font-size: 12px;
  line-height: 23px;
}

.mail-editor-select > span,
.mail-editor-color > span {
  display: inline-flex;
  align-items: center;
  height: 23px;
  line-height: 23px;
}

.mail-editor-select select {
  width: 112px;
  height: 23px;
  border: 1px solid #7da6d0;
  border-radius: 2px;
  background: #fff;
  color: #000;
  font-size: 13px;
  line-height: 23px;
  vertical-align: top;
}

.mail-editor-select.small select {
  width: 52px;
}

.mail-editor-select.more select {
  width: 64px;
}

.mail-editor-color input {
  width: 28px;
  height: 23px;
  padding: 1px;
  border: 1px solid #7da6d0;
  border-radius: 2px;
  background: #fff;
  vertical-align: top;
}

.mail-editor-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 23px;
  padding: 0 6px;
  border: 1px solid #79a7d2;
  border-radius: 2px;
  background: linear-gradient(#fff, #dcecfb);
  color: #004b91;
  font-size: 13px;
  line-height: 23px;
  vertical-align: top;
}

.mail-editor-button.wide {
  min-width: 34px;
  padding: 0 5px;
  font-size: 12px;
}

.mail-editor-button:hover,
.mail-editor-button:focus {
  border-color: #2f76b7;
  background: #e8f3ff;
}

.mail-editor-button.active {
  border-color: #1d609d;
  background: #c8e2fb;
  color: #003b75;
  font-weight: 700;
}

.mail-editor-inline-panel {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  border: 1px solid #86aad0;
  border-radius: 2px;
  background: #fff;
  color: #315b83;
  font-size: 12px;
}

.mail-editor-inline-panel[hidden] {
  display: none;
}

.mail-editor-inline-panel strong {
  color: #004b91;
  font-size: 12px;
}

.mail-editor-inline-panel input {
  width: 185px;
  height: 21px;
  min-width: 0;
  border: 1px solid #9bb8d5;
  border-radius: 1px;
  padding: 0 4px;
  font-size: 12px;
}

.mail-editor-inline-panel input[type="number"] {
  width: 42px;
}

.mail-editor-inline-panel button {
  height: 21px;
  padding: 0 6px;
  border: 1px solid #79a7d2;
  border-radius: 2px;
  background: linear-gradient(#fff, #dcecfb);
  color: #004b91;
  font-size: 12px;
}

.mail-compose-body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 9px 10px 20px;
  background: #fff;
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  outline: none;
}

.rich-mail-editor {
  overflow: auto;
  white-space: normal;
  word-break: break-word;
  cursor: text;
}

.mail-compose-source-editor {
  overflow: auto;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.35;
  resize: none;
}

.rich-mail-editor:empty::before {
  content: attr(data-placeholder);
  color: #8a9daf;
}

.rich-mail-editor a {
  color: #004b91;
  text-decoration: underline;
}

.rich-mail-editor ul,
.rich-mail-editor ol {
  margin: 5px 0 5px 22px;
  padding: 0;
}

.rich-mail-editor blockquote {
  margin: 6px 0;
  padding: 4px 8px;
  border-left: 3px solid #98b7d8;
  color: #304e6b;
  background: #f5f9fd;
}

.rich-mail-editor table {
  border-collapse: collapse;
  max-width: 100%;
}

.rich-mail-editor td,
.rich-mail-editor th {
  border: 1px solid #9db7d3;
  padding: 4px;
  min-width: 80px;
}

.rich-mail-editor .annview-original-body table {
  border-collapse: initial;
}

.rich-mail-editor .annview-original-body td,
.rich-mail-editor .annview-original-body th {
  border: initial;
  padding: initial;
  min-width: initial;
}

.rich-mail-editor img {
  max-width: 100%;
  height: auto;
}

.mail-compose-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-top: 1px solid #7fa6cf;
  background: #dcecfb;
  overflow-x: auto;
}

.legacy-tool-button.primary {
  border-color: #397fbd;
  background: linear-gradient(#fefefe, #add2f5);
  color: #003e78;
  font-weight: 700;
}

#mailComposeResult,
#mailTemplateResult {
  color: #22623e;
  font-size: 12px;
}

.mail-send-queue-page {
  display: grid;
  grid-template-rows: auto auto auto minmax(220px, 1fr) minmax(150px, 0.7fr);
  min-height: 0;
  overflow: hidden;
}

.send-queue-account-note {
  padding: 4px 7px;
  border-bottom: 1px solid #a7bfd8;
  background: #fff8da;
  color: #654e00;
  font-size: 12px;
}

.send-queue-table-wrap,
.send-queue-log-panel {
  min-height: 0;
  overflow: auto;
}

.send-queue-table {
  table-layout: fixed;
  min-width: 1250px;
}

.send-queue-table th:nth-child(1) { width: 58px; }
.send-queue-table th:nth-child(2) { width: 150px; }
.send-queue-table th:nth-child(3) { width: 180px; }
.send-queue-table th:nth-child(4) { width: 230px; }
.send-queue-table th:nth-child(5) { width: 50px; }
.send-queue-table th:nth-child(6) { width: 82px; }
.send-queue-table th:nth-child(7) { width: 65px; }
.send-queue-table th:nth-child(8) { width: 145px; }
.send-queue-table th:nth-child(9) { width: 210px; }
.send-queue-table th:nth-child(10) { width: 90px; }

.send-queue-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.send-queue-status {
  font-weight: 700;
}

.send-queue-status.status-sent { color: #08713a; }
.send-queue-status.status-failed { color: #b00020; }
.send-queue-status.status-retry { color: #a45500; }
.send-queue-status.status-sending { color: #005ba8; }

.send-queue-actions {
  display: flex;
  gap: 3px;
}

.send-queue-actions button {
  min-width: 36px;
  height: 21px;
  padding: 0 4px;
  border: 1px solid #6d9dca;
  border-radius: 2px;
  background: #edf7ff;
  color: #064f91;
  font-size: 12px;
}

.send-queue-log-panel {
  border-top: 1px solid #7fa6cf;
  background: #fff;
}

.send-queue-log-meta {
  padding: 4px 7px;
  border-bottom: 1px solid #c5d6e7;
  background: #f3f8fd;
  font-size: 12px;
}

.template-pane {
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(320px, 0.8fr);
}

.mail-template-list-panel,
.mail-template-editor {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.mail-template-list-panel {
  border-right: 1px solid #8fb5df;
}

.mail-compose-section-head {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  border-bottom: 1px solid #a9c2dc;
  background: #eaf4fd;
  color: #345d83;
}

.mail-compose-section-head > span {
  color: #687f94;
  font-size: 12px;
}

.mail-template-table,
.mail-attachment-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.mail-template-table th,
.mail-template-table td,
.mail-attachment-table th,
.mail-attachment-table td {
  height: 25px;
  padding: 2px 5px;
  border: 1px solid #c6d7ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-template-table th,
.mail-attachment-table th {
  background: linear-gradient(#eaf6ff, #bdd7ef);
  color: #034f91;
}

.mail-template-table tbody tr:nth-child(even),
.mail-attachment-table tbody tr:nth-child(even) {
  background: #e6f0fa;
}

.mail-template-table tr.inactive {
  color: #88939e;
}

.mail-template-table button,
.mail-attachment-table button {
  height: 20px;
  margin-right: 3px;
  padding: 0 5px;
  border: 1px solid #77a3cd;
  border-radius: 2px;
  background: #f5faff;
  color: #004b91;
  font-size: 12px;
}

.mail-attachment-table .mail-attachment-open-action {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-right: 4px;
  padding: 0 6px;
  border: 1px solid #3c91cf;
  border-radius: 2px;
  background: #e9f6ff;
  color: #004b91;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
}

.mail-attachment-table .mail-attachment-open-action:hover {
  border-color: #006fbb;
  background: #d5eeff;
  color: #003d78;
}

.mail-template-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 6px;
  padding: 8px;
  background: #f8fbfe;
}

.mail-template-editor label {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mail-template-editor label > span {
  color: #4c6882;
  font-size: 12px;
}

.mail-template-editor label.wide,
.mail-template-editor .mail-template-active,
.mail-template-editor .mail-template-actions {
  grid-column: 1 / -1;
}

.mail-template-editor .body-field {
  min-height: 0;
}

.mail-template-editor input,
.mail-template-editor select,
.mail-template-editor textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #84a9ce;
  border-radius: 1px;
  background: #fff;
  font-size: 13px;
}

.mail-template-editor input,
.mail-template-editor select {
  height: 25px;
  padding: 0 5px;
}

.mail-template-editor textarea {
  height: 100%;
  min-height: 130px;
  padding: 6px;
  resize: none;
}

.mail-template-editor .mail-template-active {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mail-template-active input {
  width: 14px;
  height: 14px;
}

.mail-template-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.file-picker-label {
  cursor: pointer;
}

.file-picker-label input {
  display: none;
}

.mail-attachment-dropzone {
  min-height: 48px;
  display: grid;
  place-items: center;
  margin: 6px;
  border: 1px dashed #6b9bc7;
  background: #f7fbff;
  color: #58738c;
}

.mail-attachment-dropzone.drag-over {
  border-style: solid;
  background: #dceeff;
  color: #004b91;
}

.mail-source-attachments,
.mail-new-attachments {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.mail-source-attachments {
  flex: 0 1 42%;
}

.mail-new-attachments {
  flex: 1 1 150px;
}

.mail-source-attachments > strong,
.mail-new-attachments > strong {
  display: block;
  min-height: 25px;
  padding: 5px 6px;
  border-top: 1px solid #a9c2dc;
  border-bottom: 1px solid #c6d7ea;
  background: #eef6fd;
  color: #345d83;
}

@media (max-width: 900px) {
  .mail-compose-message-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(420px, 1fr) minmax(220px, auto);
    overflow: auto;
  }

  .mail-compose-main-column {
    min-height: 420px;
    border-right: 0;
    border-bottom: 1px solid #8fb5df;
  }

  .mail-compose-attachment-panel {
    min-height: 220px;
  }

  .template-pane {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(160px, 0.8fr) minmax(280px, 1.2fr);
  }

  .mail-template-list-panel {
    border-right: 0;
    border-bottom: 1px solid #8fb5df;
  }

  .legacy-mail-meta {
    gap: 2px 8px;
  }
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.toolbar input,
.toolbar select,
.toolbar .api-input,
.settings-panel .api-input {
  height: 36px;
  min-width: 210px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 10px;
  background: #fff;
}

.toolbar button,
.small-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
}

.table-meta {
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.button-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.small-button.primary {
  background: var(--brand);
  border-color: var(--brand-strong);
  color: #fff;
}

.small-button.danger {
  border-color: #d7a4a0;
  color: var(--danger);
}

.maintenance-page {
  display: grid;
  gap: 10px;
}

.maintenance-search,
.maintenance-list,
.maintenance-form,
.maintenance-related-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.maintenance-search {
  padding: 10px 12px;
}

.maintenance-search-head,
.maintenance-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.maintenance-search-head h3,
.maintenance-form-head h3 {
  margin: 0;
  font-size: 17px;
}

.maintenance-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.maintenance-search-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 8px;
}

.maintenance-search-grid label,
.maintenance-form-grid .form-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.maintenance-search-grid span,
.maintenance-form-grid .form-field span {
  color: var(--muted);
  font-size: 13px;
}

.maintenance-search-grid input,
.maintenance-search-grid select,
.maintenance-form-grid input,
.maintenance-form-grid select,
.maintenance-form-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  padding: 0 8px;
}

.maintenance-search-grid input,
.maintenance-search-grid select,
.maintenance-form-grid input,
.maintenance-form-grid select {
  height: 32px;
}

.maintenance-form-grid textarea {
  min-height: 78px;
  padding-top: 8px;
  resize: vertical;
}

.maintenance-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.98fr) minmax(430px, 1.02fr);
  gap: 10px;
  align-items: start;
}

.maintenance-list {
  min-width: 0;
  overflow: hidden;
}

.section-head.compact {
  min-height: 38px;
  padding: 8px 10px;
}

.maintenance-table-wrap {
  max-height: calc(100vh - 265px);
}

.maintenance-table th,
.maintenance-table td {
  padding: 7px 8px;
}

.data-table tbody tr.selected-row,
.data-table tbody tr.selected-row:hover {
  background: #dfeaf7;
}

.maintenance-form {
  padding: 10px;
}

.maintenance-fieldset {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.maintenance-fieldset:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.maintenance-fieldset h4 {
  margin: 0;
  font-size: 15px;
}

.maintenance-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.maintenance-form-grid .wide {
  grid-column: 1 / -1;
}

.maintenance-related-section {
  margin-top: 10px;
  padding: 10px;
}

.maintenance-related-section h4 {
  margin: 0 0 8px;
}

.empty-state.compact {
  padding: 10px;
}

.legacy-customer-page {
  display: grid;
  grid-template-columns: var(--legacy-region-width, 190px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-height: calc(100vh - 104px);
  background: #fff;
  border: 1px solid #8fb5df;
  color: #000;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  overflow: hidden;
}

.legacy-region-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: var(--legacy-region-head-height, 24px) minmax(0, 1fr);
  background: #f6fbff;
  border-right: 1px solid #8fb5df;
  overflow: hidden;
}

.legacy-customer-page.region-collapsed {
  grid-template-columns: 24px minmax(0, 1fr);
}

.legacy-customer-page.region-collapsed .legacy-region-panel {
  width: 24px;
  max-width: 24px;
}

.legacy-customer-page.region-collapsed .legacy-region-head {
  justify-content: center;
  padding-inline: 2px;
}

.legacy-customer-page.region-collapsed .legacy-region-head > span,
.legacy-customer-page.region-collapsed .legacy-region-body {
  display: none;
}

.legacy-region-head {
  height: var(--legacy-region-head-height, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 4px;
  color: #004f9e;
  font-weight: 700;
  background: linear-gradient(#eff8ff, #c7ddf4);
  border-bottom: 1px solid #8fb5df;
}

.legacy-collapse-button {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #75a6d8;
  border-radius: 3px;
  color: #3571aa;
  background: #eef7ff;
  font-size: 14px;
  line-height: 1;
}

.legacy-region-body {
  min-height: 0;
  padding: 4px 2px 8px;
  overflow: auto;
}

.legacy-region-root,
.legacy-region-node {
  width: 100%;
  min-width: 0;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: #000;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.legacy-region-root:hover,
.legacy-region-node:hover {
  background: #cfe3fb;
}

.legacy-region-root.active,
.legacy-region-node.active {
  color: #fff;
  background: #316ac5;
}

.legacy-region-root:focus-visible,
.legacy-region-node:focus-visible {
  position: relative;
  z-index: 1;
  outline: 1px dotted #000;
  outline-offset: -2px;
}

.legacy-tree-toggle,
.legacy-tree-spacer {
  width: 12px;
  flex: 0 0 12px;
  text-align: center;
}

.legacy-tree-toggle {
  height: 12px;
  border: 1px solid #7895b4;
  color: #174f87;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 9px;
}

.legacy-tree-spacer {
  height: 12px;
}

.legacy-tree-icon {
  width: 13px;
  flex: 0 0 13px;
  color: #2d70ba;
}

.legacy-folder-icon {
  position: relative;
  width: 13px;
  height: 12px;
  flex: 0 0 13px;
  color: transparent;
}

.legacy-folder-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 6px;
  height: 3px;
  border: 1px solid #b68100;
  border-bottom: 0;
  background: #ffe28a;
}

.legacy-folder-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 7px;
  border: 1px solid #b68100;
  background: linear-gradient(#fff0a8, #e0a822);
}

.legacy-region-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-region-count {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 2px;
  color: #48637f;
  font-variant-numeric: tabular-nums;
}

.legacy-region-root.active .legacy-region-count,
.legacy-region-node.active .legacy-region-count {
  color: #fff;
}

.legacy-region-children {
  margin-left: 14px;
}

.legacy-region-children[hidden],
.legacy-region-tree[hidden] {
  display: none;
}

.legacy-customer-main {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.legacy-customer-toolbar {
  width: 100%;
  max-width: 100%;
  height: var(--legacy-toolbar-height, 32px);
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  background: #edf6ff;
  border-bottom: 1px solid #9dbfe2;
  overflow: visible;
}

.legacy-customer-toolbar.advanced-open {
  height: auto;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 2px;
}

.legacy-customer-toolbar input[type="hidden"] {
  display: none;
}

.legacy-owner-filter {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  white-space: nowrap;
}

.legacy-owner-filter select,
.legacy-customer-pager select {
  height: 23px;
  border: 1px solid #8db2db;
  background: #fff;
  color: #000;
  font-size: 13px;
}

.legacy-owner-filter select {
  width: 112px;
}

.legacy-search-box {
  width: auto;
  min-width: 180px;
  max-width: 326px;
  flex: 1 1 260px;
  height: 24px;
  border: 1px solid #7fb0df;
  background: #fff;
  padding: 0 5px;
  color: #000;
  font-size: 13px;
}

.legacy-tool-button {
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid #5d9bd4;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #cae3ff);
  color: #004b91;
  font-size: 13px;
  white-space: nowrap;
}

.legacy-tool-button:hover {
  background: linear-gradient(#ffffff, #b8d9fb);
}

.legacy-tool-button.active {
  border-color: #2d77bb;
  background: linear-gradient(#c8e4ff, #eef8ff);
  color: #003f7f;
  font-weight: 700;
}

.legacy-settings-wrap {
  position: relative;
  display: inline-flex;
  height: 24px;
}

.legacy-settings-menu {
  position: absolute;
  z-index: 12;
  top: 24px;
  left: 0;
  width: 132px;
  padding: 4px 0;
  border: 1px solid #8b9dae;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}

.legacy-settings-menu button {
  width: 100%;
  height: 24px;
  display: block;
  padding: 0 8px;
  border: 0;
  background: #fff;
  color: #003f7f;
  font-size: 13px;
  text-align: left;
  text-decoration: underline;
}

.legacy-settings-menu button:hover {
  background: #dbeeff;
}

.legacy-advanced-row {
  flex-basis: 100%;
  min-width: 0;
  min-height: 27px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
  padding-top: 1px;
}

.legacy-advanced-row label {
  min-width: 120px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 135px;
  margin: 0;
  white-space: nowrap;
  color: #28506f;
}

.legacy-advanced-row label:first-child {
  flex: 1 1 220px;
  max-width: 260px;
}

.legacy-advanced-row label > span {
  flex: 0 0 auto;
}

.legacy-advanced-row input,
.legacy-advanced-row select {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  height: 23px;
  border: 1px solid #8db2db;
  background: #fff;
  padding: 0 4px;
  color: #000;
  font-size: 13px;
}

.legacy-customer-pager {
  width: 100%;
  max-width: 100%;
  height: var(--legacy-pager-height, 30px);
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #dcecfb;
  border-bottom: 1px solid #9dbfe2;
  white-space: nowrap;
}

.legacy-customer-pager b {
  color: #f00;
}

.legacy-page-summary {
  flex: 0 0 auto;
}

.legacy-page-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.legacy-page-links button {
  min-width: 14px;
  height: 20px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #004c9a;
  text-decoration: underline;
  font-size: 13px;
  cursor: pointer;
}

.legacy-page-links button:hover:not(:disabled),
.legacy-page-links button:focus-visible {
  color: #c00;
}

.legacy-page-links button.active {
  color: #f00;
  font-weight: 700;
  text-decoration: none;
}

.legacy-page-links button:disabled {
  color: #7d8fa3;
  cursor: default;
  text-decoration: none;
}

.legacy-customer-table-host {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.legacy-customer-table-wrap {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.legacy-customer-table {
  width: 100%;
  min-width: 1228px;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  color: #000;
  font-size: 12px;
  line-height: 15px;
}

.legacy-customer-table th,
.legacy-customer-table td {
  border: 1px solid #c6d7ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-customer-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: var(--legacy-table-head-height, 28px);
  padding: 1px 5px;
  background: linear-gradient(#eaf6ff 0%, #c7def4 48%, #b4d0eb 100%);
  color: #034f91;
  box-shadow: inset 0 1px #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.legacy-th-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-column-resizer {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
}

.legacy-column-resizer:hover {
  background: rgba(42, 111, 178, 0.28);
}

.legacy-column-resizer.active {
  background: #2d70b5;
}

.legacy-column-resizer:focus-visible {
  background: #2d70b5;
  outline: 1px solid #fff;
  outline-offset: -2px;
}

body.legacy-column-resizing,
body.legacy-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.legacy-customer-table td {
  height: var(--legacy-table-row-height, 24px);
  line-height: 16px;
  padding: 1px 6px;
}

.legacy-customer-table tbody tr:nth-child(odd) {
  background: #f9fcff;
}

.legacy-customer-table tbody tr:nth-child(even) {
  background: #d4e4f5;
}

.legacy-customer-table tbody tr:hover {
  background: #bdd8f2;
}

.legacy-customer-table tbody tr.legacy-row-selected {
  background: #9fc7ed;
}

.legacy-customer-table tbody tr.legacy-row-selected:hover {
  background: #91bce5;
}

.legacy-select-column,
.legacy-select-head,
.legacy-select-cell {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  text-align: center;
}

.legacy-select-cell {
  padding: 0;
  cursor: pointer;
}

.legacy-table-fill-column {
  width: auto;
}

.legacy-table-fill-head,
.legacy-table-fill-cell {
  min-width: 0;
  padding: 0;
}

.legacy-link-button {
  max-width: 100%;
  height: 14px;
  display: inline-block;
  line-height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #003b91;
  font: inherit;
  font-weight: 400;
  text-align: left;
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-name-link {
  width: 100%;
}

.legacy-select-cell input {
  width: 13px;
  height: 13px;
  display: block;
  margin: 0 auto;
  accent-color: #2e70ad;
  cursor: pointer;
}

.legacy-icon-cell button {
  width: 22px;
  height: 16px;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
}

.legacy-icon-cell button::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 12px;
  border: 1px solid #8fb5df;
  background: linear-gradient(#ffffff, #dcecff);
}

.legacy-icon-cell button::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 8px;
  background: #51ad3f;
  clip-path: polygon(0 28%, 55% 28%, 55% 0, 100% 50%, 55% 100%, 55% 72%, 0 72%);
}

.legacy-column-overlay {
  z-index: 30;
}

.legacy-column-panel {
  width: min(520px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 32px));
  margin: 46px auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #7f9db9;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-size: 13px;
}

.legacy-column-head {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color: #004f9e;
  background: linear-gradient(#eff8ff, #c7ddf4);
  border-bottom: 1px solid #8fb5df;
}

.legacy-column-close {
  width: 22px;
  height: 22px;
  border: 1px solid #8fb5df;
  background: #fff;
  color: #004f9e;
}

.legacy-column-form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.legacy-column-rows {
  overflow: auto;
  padding: 8px;
}

.legacy-column-row {
  height: 28px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 72px 58px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #e0ebf7;
}

.legacy-column-row > span:not(.legacy-column-order-buttons) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-column-row > input[type="checkbox"] {
  justify-self: center;
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #2e70ad;
}

.legacy-column-labels {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 24px;
  color: #315b86;
  background: #edf6ff;
  font-weight: 700;
  text-align: center;
}

.legacy-column-row input[type="number"] {
  width: 72px;
  height: 22px;
  border: 1px solid #8db2db;
  padding: 0 4px;
}

.legacy-column-order-buttons {
  display: grid;
  grid-template-columns: 26px 26px;
  gap: 2px;
}

.legacy-column-order-buttons button {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid #8db2db;
  border-radius: 2px;
  color: #064f92;
  background: #f7fbff;
  font-size: 14px;
  line-height: 18px;
}

.legacy-column-order-buttons button:hover:not(:disabled) {
  background: #d7e9fa;
}

.legacy-column-order-buttons button:disabled {
  color: #aab8c7;
  background: #f3f5f7;
  cursor: default;
}

.legacy-column-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid #c6d7ea;
  background: #edf6ff;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-grid-one {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-grid-one [data-dashboard-column="R"] {
  display: none;
}

.dashboard-column {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.workbench-config-panel {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.workbench-config-panel summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.workbench-config-panel form {
  padding: 0 10px 10px;
}

.quick-panel {
  display: grid;
  gap: 12px;
}

.quick-form {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px;
}

.quick-form.compact {
  max-width: 920px;
}

.quick-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.quick-form-grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quick-form-grid label.wide,
.quick-form-grid .wide {
  grid-column: 1 / -1;
}

.quick-form-grid span {
  color: var(--muted);
  font-size: 13px;
}

.quick-form input,
.quick-form select,
.quick-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #9bbce0;
  border-radius: 3px;
  background: #fff;
  color: #000;
  font-size: 14px;
}

.quick-form input,
.quick-form select {
  height: 30px;
  padding: 0 7px;
}

.quick-form textarea {
  padding: 6px 7px;
  resize: vertical;
}

.legacy-module-page {
  display: grid;
  gap: 12px;
}

.legacy-module-setting-rows {
  display: grid;
  gap: 6px;
}

.legacy-module-setting-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 1.2fr) minmax(120px, auto) auto;
  gap: 6px;
  align-items: center;
}

.legacy-module-setting-row span {
  color: var(--muted);
  font-size: 13px;
}

.legacy-param-table-list {
  display: grid;
  gap: 12px;
}

.legacy-param-table {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #f8fbff;
}

.legacy-param-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.legacy-param-head strong,
.legacy-param-head span {
  display: block;
}

.legacy-param-head span {
  color: var(--muted);
  font-size: 13px;
}

.legacy-param-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.legacy-param-search,
.legacy-param-limit {
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 7px;
  font-size: 13px;
}

.legacy-param-search {
  width: 180px;
}

.legacy-param-limit {
  width: 72px;
}

.legacy-param-wrap {
  overflow-x: auto;
}

.legacy-param-grid {
  min-width: 720px;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.legacy-param-grid th,
.legacy-param-grid td {
  border: 1px solid var(--line);
  padding: 3px;
  background: #fff;
}

.legacy-param-grid th {
  background: #e8f2ff;
  color: #064981;
  font-weight: 700;
  white-space: nowrap;
}

.legacy-param-input {
  width: 100%;
  min-width: 96px;
  border: 1px solid #b9cce2;
  border-radius: 3px;
  padding: 4px 5px;
  font: inherit;
}

.legacy-param-input.overridden {
  border-color: #0b72c9;
  background: #edf7ff;
}

.quick-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-actions button,
.quick-result button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #5d9bd4;
  border-radius: 3px;
  background: linear-gradient(#fff, #d8ecff);
  color: #004b91;
  font-size: 13px;
}

.quick-actions span,
.quick-result {
  color: var(--muted);
  font-size: 13px;
}

.mail-folder-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 0 8px;
}

.mail-folder-strip button {
  min-height: 24px;
  border: 1px solid #8db2db;
  border-radius: 3px;
  background: #f4f9ff;
  color: #004b91;
  font-size: 13px;
}

.success-state {
  color: #0b6b38;
  font-weight: 700;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.help-grid div {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.help-grid strong,
.help-grid span {
  display: block;
}

.help-grid span {
  margin-top: 3px;
  color: var(--muted);
}

.widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  overflow: hidden;
}

.widget.drag-over {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.widget-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  background: #f4f7fa;
  border-bottom: 1px solid var(--line);
}

.widget-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-title-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.workbench-widget-menu {
  width: 68px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.workbench-widget-actionbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.workbench-widget-actionbar button {
  flex: 0 0 auto;
  line-height: 1;
}

.workbench-more-actionbar {
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 4px;
  border-bottom: 1px solid #9dbedf;
  background: linear-gradient(#f8fcff, #d6ebfb);
}

.workbench-more-actionbar .workbench-widget-actionbar {
  gap: 4px;
}

.workbench-more-actionbar .workbench-widget-actionbar button {
  height: 20px;
  border: 1px solid #8db0d2;
  border-radius: 2px;
  padding: 0 7px;
  background: #edf7ff;
  color: #004d91;
  font-size: 13px;
  font-weight: 700;
}

.workbench-more-mail-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 28px;
  padding: 2px 6px;
  border-bottom: 1px solid #b7cee5;
  background: #eef7ff;
  color: #002b52;
  font-size: 13px;
  line-height: 22px;
}

.workbench-more-mail-pager label,
.workbench-more-mail-pager > span {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  white-space: nowrap;
}

.workbench-more-mail-pager select {
  height: 22px;
  border: 1px solid #8db0d2;
  background: #fff;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  padding: 0 18px 0 4px;
  vertical-align: middle;
}

.workbench-more-mail-pager button {
  min-width: 22px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1px solid #8db0d2;
  background: #f5fbff;
  color: #004f91;
  font-size: 13px;
  line-height: 19px;
  cursor: pointer;
}

.workbench-more-mail-pager button.active,
.workbench-more-mail-pager button:disabled {
  color: #b00000;
  font-weight: 700;
  cursor: default;
}

.workbench-more-page-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}

.contact-workspace-workbench-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.contact-workspace-workbench-page .workbench-more-actionbar,
.contact-workspace-workbench-page .workbench-more-mail-pager {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.contact-workspace-workbench-page .workbench-more-mail-host {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.contact-workspace-workbench-page .workbench-more-mail-host > .data-table-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

.contact-workspace-workbench-page .workbench-more-mail-host .data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.workbench-inline-mail-pager {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: 0;
  color: #00335f;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.workbench-inline-mail-pager button {
  min-width: 16px;
  height: 18px;
  border: 1px solid #8db0d2;
  border-radius: 2px;
  padding: 0 3px;
  background: #f5fbff;
  color: #004d91;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.workbench-inline-mail-pager button:disabled {
  color: #8aa5bd;
  cursor: default;
  text-decoration: none;
}

.workbench-inline-mail-pager strong {
  color: #b00000;
  font-weight: 700;
}

.classic-crm-shell .widget-head h3 .workbench-inline-mail-pager button {
  min-width: 16px;
  height: 18px;
  border: 1px solid #8db0d2;
  border-radius: 2px;
  padding: 0 3px;
  background: #f5fbff;
  color: #004d91;
  font-size: 12px;
  font-weight: 700;
}

.classic-crm-shell .widget-head h3 .workbench-inline-mail-pager button:disabled {
  color: #8aa5bd;
  text-decoration: none;
}

.workbench-mini-head th {
  height: 20px;
  padding: 0 4px;
}

.drag-handle {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: grab;
}

.drag-handle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
}

.data-table-wrap {
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table th {
  color: var(--muted);
  background: #fbfcfd;
  font-weight: 700;
}

.data-table tbody tr:hover {
  background: #f3f8f6;
}

.data-table tbody tr.clickable-row {
  cursor: pointer;
}

.data-table tbody tr.clickable-row:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.table-link {
  max-width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: #064f9e;
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-link:hover {
  text-decoration: underline;
}

.data-table .num {
  width: 70px;
  text-align: right;
}

.widget .data-table {
  font-size: 13px;
}

.widget .data-table th,
.widget .data-table td {
  padding: 4px 6px;
}

.workbench-select-cell,
.workbench-select-head {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  text-align: center;
  cursor: pointer;
}

.workbench-select-cell input,
.workbench-select-head input {
  width: 13px;
  height: 13px;
  margin: 0;
  vertical-align: middle;
}

.workbench-action-cell,
.workbench-action-head {
  width: 76px;
  min-width: 66px;
}

.workbench-row-menu {
  max-width: 100%;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.workbench-more-sort-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.workbench-more-sort-button:hover,
.workbench-more-sort-button.active {
  color: #b00000;
  text-decoration: underline;
}

.widget .empty-state {
  padding: 10px;
  font-size: 13px;
}

.empty-state,
.loading-state {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.summary-item {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

.summary-item span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-item strong {
  display: block;
  margin-top: 5px;
  font-size: 21px;
}

.status-summary {
  margin-bottom: 14px;
}

.status-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 14px;
}

.legacy-menu-toolbar input {
  min-width: min(420px, 100%);
}

.legacy-summary {
  margin-bottom: 14px;
}

.legacy-menu {
  display: grid;
  gap: 14px;
}

.legacy-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.legacy-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f4f7fa;
  border-bottom: 1px solid var(--line);
}

.legacy-group-head h3,
.legacy-section h4 {
  margin: 0;
}

.legacy-group-head span,
.legacy-section header span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.legacy-section {
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--line);
}

.legacy-section:last-child {
  border-bottom: 0;
}

.legacy-section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.legacy-section h4 {
  font-size: 15px;
  color: var(--brand-strong);
}

.legacy-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 8px;
}

.legacy-card {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: #fff;
  padding: 10px;
}

.legacy-card.mapped {
  border-left-color: var(--accent);
}

.legacy-card.pending {
  border-left-color: var(--line-strong);
}

.legacy-card.no-need {
  border-left-color: #b5bec8;
  background: #fbfcfd;
}

.legacy-card-main {
  min-width: 0;
}

.legacy-card-main strong,
.legacy-card-main span,
.legacy-card-main p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-card-main strong {
  font-size: 14px;
}

.legacy-card-main span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.legacy-card-main p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.legacy-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.legacy-card-actions .small-button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 13px;
}

.legacy-status {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 13px;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}

.settings-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}

.settings-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}

.settings-wide {
  grid-column: 1 / -1;
}

.settings-panel h3 {
  margin: 18px 0 12px;
  font-size: 17px;
}

.settings-panel h3:first-child {
  margin-top: 0;
}

.workbench-settings-head,
.workbench-settings-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 62px 76px 42px;
  align-items: center;
  gap: 6px;
}

.workbench-settings-head {
  color: var(--muted);
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}

.workbench-settings-row {
  min-height: 30px;
  border-bottom: 1px solid #edf1f5;
}

.workbench-settings-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-settings-row .api-input {
  width: 100%;
}

.workbench-settings-row input[type="checkbox"] {
  justify-self: center;
}

.workbench-settings-row .workbench-order-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: visible;
}

.workbench-order-buttons .icon-button {
  width: 26px;
  height: 22px;
  border-radius: 0;
}

.workbench-order-buttons .icon-button svg {
  width: 14px;
  height: 14px;
}

.workbench-order-buttons .icon-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.settings-panel .api-input {
  width: 100%;
  min-width: 0;
}

.permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--text);
  font-size: 14px;
}

.check-row input {
  width: 16px;
  height: 16px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
}

.legacy-admin-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
}

.legacy-admin-card {
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #f7fbff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.legacy-admin-card:hover {
  border-color: #7daee8;
  background: #eef6ff;
}

.legacy-admin-card strong {
  font-size: 14px;
  color: #053f7d;
}

.legacy-admin-card span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.parameter-settings-page {
  display: grid;
  gap: 10px;
}

.parameter-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  background: #edf5ff;
}

.parameter-toolbar .api-input {
  width: min(420px, 100%);
  height: 30px;
}

.parameter-settings-groups {
  display: grid;
  gap: 10px;
}

.parameter-group {
  border: 1px solid var(--line);
  background: var(--surface);
}

.parameter-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: #d9ebff;
}

.parameter-group h3 {
  margin: 0;
  color: #064981;
  font-size: 15px;
}

.parameter-group header span {
  color: var(--muted);
  font-size: 13px;
}

.parameter-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 8px;
  padding: 8px;
}

.parameter-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 74px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.parameter-card:hover {
  border-color: #6aa5e8;
  background: #f4f9ff;
}

.parameter-card strong {
  padding-right: 92px;
  color: var(--text);
  font-size: 14px;
}

.parameter-card > span:last-child {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.parameter-card-status {
  position: absolute;
  top: 8px;
  right: 8px;
  max-width: 90px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #f5f7fa;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parameter-card.effective .parameter-card-status {
  border-color: #7eb697;
  background: #eef9f2;
  color: #16723b;
}

.parameter-card.pending .parameter-card-status {
  border-color: #d4b56a;
  background: #fff8e5;
  color: #8a6100;
}

.inventory-flow-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
}

.warehouse-list,
.parameter-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.warehouse-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(140px, 1fr) minmax(160px, 1.3fr) minmax(100px, 0.8fr) minmax(100px, 0.8fr) auto auto;
  align-items: center;
  gap: 8px;
}

.parameter-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1fr);
  align-items: center;
  gap: 8px;
}

.warehouse-row input,
.parameter-row input,
.parameter-row select {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 9px;
  background: #fff;
}

.parameter-row code {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.parameter-row .option-active {
  justify-self: start;
}

.parameter-row .option-active input {
  width: 16px;
  height: 16px;
  padding: 0;
}

.inventory-parameter-head {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.purchase-inbound-form {
  margin-top: 10px;
}

.inbound-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.inbound-form-grid label {
  margin: 0;
}

.inbound-form-grid .wide {
  grid-column: span 3;
}

.inbound-form-grid input,
.inbound-form-grid select,
.inbound-item-row input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 9px;
  background: #fff;
}

.inbound-item-list {
  display: grid;
  gap: 8px;
}

.inbound-item-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(180px, 1.4fr) minmax(90px, 0.7fr) minmax(70px, 0.5fr) minmax(90px, 0.7fr) minmax(140px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-head h3,
.section-head h4 {
  margin: 0;
}

.option-settings-form {
  max-width: 1120px;
}

.option-category {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.option-list {
  display: grid;
  gap: 6px;
}

.option-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) minmax(180px, 1.3fr) auto 88px auto;
  align-items: center;
  gap: 8px;
}

.option-row input[type="text"],
.option-row .option-value,
.option-row .option-label {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 9px;
  background: #fff;
}

.option-active {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

.option-active span {
  margin: 0;
  color: var(--text);
}

.option-source {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-archive-page {
  width: 100%;
  max-width: none;
  border: 1px solid #c7d5e6;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.legacy-archive-title {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid #c7d5e6;
  background: #fff;
}

.legacy-archive-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.legacy-archive-category {
  margin: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid #c7d5e6;
}

.legacy-archive-category:last-of-type {
  border-bottom: 0;
}

.legacy-archive-section-head {
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border-bottom: 1px solid #d6e0ec;
  background: #fff;
}

.legacy-archive-section-head h4 {
  font-size: 16px;
  font-weight: 700;
}

.legacy-add-button {
  min-height: 28px;
  padding: 0 10px;
  background: #f7f9fb;
}

.legacy-archive-page .option-list {
  min-height: 78px;
  display: grid;
  gap: 0;
  padding: 8px 14px 10px;
  background: #fff;
}

.legacy-region-column-head {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(130px, 0.5fr) 62px minmax(150px, 0.6fr) auto minmax(72px, auto) 32px;
  gap: 8px;
  padding: 8px 14px 0;
  color: #607086;
  font-size: 13px;
  font-weight: 700;
}

.legacy-region-column-head span:nth-child(3),
.legacy-region-column-head span:nth-child(5),
.legacy-region-column-head span:nth-child(6) {
  text-align: center;
}

.legacy-archive-page .option-row {
  grid-template-columns: minmax(220px, 0.92fr) minmax(260px, 1.08fr) auto minmax(72px, auto) 32px;
  gap: 8px;
  min-height: 42px;
}

.region-settings-form .region-option-row {
  grid-template-columns: minmax(220px, 0.9fr) minmax(130px, 0.5fr) 62px minmax(150px, 0.6fr) auto minmax(72px, auto) 32px;
}

.option-level {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
}

.option-level input {
  width: 14px;
  height: 14px;
}

.region-parent.child-region {
  border-color: #7da1cc;
  background: #f8fbff;
}

.region-parent:disabled {
  color: #7a8796;
  background: #f3f6f9;
}

.legacy-archive-page .option-row + .option-row {
  margin-top: 0;
}

.legacy-archive-page .option-value,
.legacy-archive-page .option-label,
.legacy-archive-page .option-parent {
  min-width: 0;
  height: 34px;
  border-color: #9fb4ce;
  border-radius: 5px;
  font-size: 17px;
  padding: 0 9px;
  background: #fff;
}

.legacy-archive-page .option-active {
  height: 34px;
  gap: 5px;
  font-size: 14px;
}

.legacy-archive-page .option-active input {
  width: 14px;
  height: 14px;
}

.legacy-archive-page .option-active span {
  font-size: 14px;
}

.legacy-archive-page .option-source {
  color: #4c6f9f;
  font-size: 13px;
  white-space: nowrap;
}

.legacy-archive-page [data-option-remove] {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-color: transparent;
  color: #6e7d8e;
}

.legacy-archive-actions {
  margin: 0;
  padding: 12px 14px;
  border-top: 1px solid #c7d5e6;
  background: #f7f9fb;
}

.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(760px, 50vw, 1040px);
}

.detail-overlay.mail-detail-wide {
  grid-template-columns: minmax(180px, 1fr) clamp(980px, 72vw, 1480px);
}

.detail-overlay[hidden] {
  display: none;
}

.detail-backdrop {
  background: rgba(12, 20, 30, 0.34);
}

.detail-panel {
  min-width: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  box-shadow: -14px 0 36px rgba(31, 45, 61, 0.18);
}

.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.detail-title-block {
  min-width: 0;
}

.detail-title-block > span {
  color: var(--muted);
  font-size: 12px;
}

.detail-title-block h3 {
  margin: 2px 0 6px;
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-meta span {
  color: var(--muted);
  background: #eef3f8;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 12px;
  max-width: min(var(--detail-field-max, 64ch), 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-meta .detail-meta-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: 0 1 min(var(--detail-field-width, 18ch), 100%);
  width: min(var(--detail-field-width, 18ch), 100%);
  max-width: min(var(--detail-field-max, 64ch), 100%);
  border-radius: 4px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.3;
}

.detail-meta .detail-meta-chip b {
  flex: 0 0 auto;
  color: #003f7f;
}

.detail-meta .detail-meta-chip span {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.workbench-more-detail .detail-title-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
}

.workbench-more-detail .detail-title-block > span {
  grid-column: 1 / -1;
}

.workbench-more-detail .detail-title-block h3 {
  margin: 0;
  white-space: nowrap;
}

.workbench-more-detail .detail-meta {
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.workbench-more-detail .detail-meta span {
  padding: 1px 7px;
  line-height: 16px;
  white-space: nowrap;
}

.detail-body {
  min-width: 0;
  overflow: auto;
  padding: 10px 12px 18px;
  font-size: 13px;
  line-height: 1.32;
}

.detail-section {
  margin-bottom: 10px;
}

.detail-section h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--brand-strong);
}

.detail-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  margin: 0;
}

.detail-fields div {
  flex: 0 1 min(var(--detail-field-width, 18ch), 100%);
  width: min(var(--detail-field-width, 18ch), 100%);
  max-width: min(var(--detail-field-max, 64ch), 100%);
  min-width: min(6ch, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 4px 6px;
}

.detail-fields dt {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 1px;
}

.detail-fields dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-body .data-table-wrap {
  max-height: none;
}

.detail-body .data-table td,
.detail-body .data-table th {
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.detail-text {
  max-height: 48vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
  font-family: Consolas, "Courier New", "Microsoft YaHei", monospace;
  font-size: 14px;
  line-height: 1.55;
}

.mail-detail-wide .detail-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.mail-detail-wide .detail-head {
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
}

.mail-detail-wide .detail-title-block > span {
  font-size: 11px;
  line-height: 1;
}

.mail-detail-wide .detail-title-block h3 {
  margin: 0 0 2px;
  font-size: 16px;
  line-height: 1.15;
}

.mail-detail-wide .detail-meta {
  gap: 3px;
}

.mail-detail-wide .detail-meta span {
  padding: 0 5px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 16px;
}

.mail-detail-wide .detail-head .icon-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
}

.mail-detail-wide .detail-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 4px 8px 6px;
  font-size: 12px;
  line-height: 1.15;
}

.mail-detail-wide .detail-section {
  flex: 0 0 auto;
  margin-bottom: 3px;
}

.mail-detail-wide .detail-section h4 {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 16px;
}

.mail-detail-wide .detail-quick {
  gap: 4px;
}

.mail-detail-wide .mail-detail-action-section {
  display: block;
  margin: 0 0 4px;
  padding: 2px 3px;
  border: 1px solid #9dbfe2;
  background: linear-gradient(#f7fbff, #e0edf9);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.mail-detail-wide .mail-detail-action-section .legacy-mail-action-strip {
  min-width: max-content;
}

.mail-detail-wide .mail-detail-action-section .legacy-mail-action-tool {
  height: 42px;
  min-width: 52px;
  padding: 1px 4px;
  font-size: 11px;
  line-height: 12px;
}

.mail-detail-wide .mail-detail-action-section .legacy-mail-action-tool span {
  max-width: 112px;
}

.mail-detail-wide .mail-detail-action-section .legacy-mail-action-tool svg {
  width: 18px;
  height: 18px;
}

.mail-detail-wide .detail-quick .small-button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.mail-info-section .detail-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 3px;
}

.mail-info-section .detail-fields div {
  flex: 0 1 min(var(--detail-field-width, 14ch), 100%);
  width: min(var(--detail-field-width, 14ch), 100%);
  max-width: min(var(--detail-field-max, 64ch), 100%);
  min-height: 34px;
  padding: 3px 5px;
  border-radius: 3px;
}

.mail-info-section .detail-fields dt {
  margin: 0;
  font-size: 11px;
  line-height: 12px;
}

.mail-info-section .detail-fields dd {
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mail-detail-wide .mail-info-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 2px;
}

.mail-detail-wide .mail-info-heading h4 {
  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
}

.mail-detail-wide .mail-inline-attachments {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mail-detail-wide .mail-inline-attachments > b {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 400;
}

.mail-detail-wide .mail-inline-attachment-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-height: 50px;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: normal;
  scrollbar-width: thin;
}

.mail-detail-wide .mail-inline-attachment-list a,
.mail-detail-wide .mail-inline-attachment-list .missing-attachment {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  max-width: min(36ch, 38vw);
  min-height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-soft);
  color: var(--brand);
  line-height: 18px;
  text-decoration: none;
}

.mail-detail-wide .mail-inline-attachment-list a:hover {
  border-color: var(--brand);
  background: #f3f8f6;
}

.mail-detail-wide .mail-inline-attachment-list span,
.mail-detail-wide .mail-inline-attachment-list small {
  color: var(--muted);
  white-space: nowrap;
}

.mail-detail-wide .mail-body-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 120px;
  margin-bottom: 0;
}

.mail-detail-wide .mail-body-section .detail-text {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.28;
}

.mail-detail-wide .mail-body-section .mail-detail-rich-body {
  white-space: normal;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.attachment-list a,
.missing-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(48ch, 58vw);
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 10px;
  background: var(--surface-soft);
  color: var(--brand);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.attachment-list a:hover {
  border-color: var(--brand);
  background: #f3f8f6;
}

.attachment-list span,
.missing-attachment small {
  color: var(--muted);
  white-space: nowrap;
}

.form-overlay {
  z-index: 24;
  grid-template-columns: minmax(230px, 1fr) clamp(820px, 62vw, 1120px);
}

.form-panel {
  max-width: min(1120px, 98vw);
}

.record-form {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
}

.form-field {
  margin: 0;
  min-width: 0;
}

.form-field.wide {
  grid-column: 1 / -1;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
}

.form-field.short input,
.form-field.short select {
  width: min(100%, 96px);
}

.form-field.compact input,
.form-field.compact select {
  width: min(100%, 176px);
}

.form-field.medium input,
.form-field.medium select {
  width: min(100%, 260px);
}

.form-field input,
.form-field select {
  height: 32px;
  padding: 0 8px;
}

.form-field textarea {
  resize: vertical;
  min-height: 84px;
  padding: 8px;
  line-height: 1.45;
}

.form-field input[readonly] {
  color: var(--muted);
  background: var(--surface-soft);
}

.owner-field {
  padding: 0;
  border: 0;
}

.owner-field legend {
  padding: 0;
  color: var(--muted);
  font-size: 13px;
}

.owner-picker {
  min-height: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
}

.owner-picker label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.owner-picker input[type="checkbox"] {
  width: 15px;
  height: 15px;
  padding: 0;
}

.owner-picker-empty {
  color: var(--muted);
}

.form-multi-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 8px;
}

.form-multi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.form-multi-head h4 {
  margin: 0;
  color: var(--brand-strong);
  font-size: 14px;
}

.form-multi-table-wrap {
  overflow-x: auto;
}

.form-multi-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11.5px;
}

.form-multi-table th,
.form-multi-table td {
  border: 1px solid var(--line);
  padding: 3px;
  background: #fff;
  vertical-align: middle;
}

.form-multi-table th {
  color: var(--muted);
  background: #eef3f8;
  font-weight: 600;
}

.form-multi-table input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 11.5px;
}

.form-multi-table input[type="radio"],
.form-multi-table input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.form-multi-table .small-button {
  min-height: 24px;
  padding: 0 5px;
  font-size: 11.5px;
}

.email-editor-table {
  min-width: 520px;
}

.email-editor-table th:nth-child(1),
.email-editor-table td:nth-child(1) {
  width: 42%;
}

.email-editor-table th:nth-child(2),
.email-editor-table td:nth-child(2) {
  width: 28%;
}

.email-editor-table th:nth-child(3),
.email-editor-table td:nth-child(3),
.email-editor-table th:nth-child(4),
.email-editor-table td:nth-child(4) {
  width: 58px;
  text-align: center;
}

.email-editor-table th:nth-child(5),
.email-editor-table td:nth-child(5) {
  width: 58px;
  text-align: center;
}

.contact-editor-table {
  min-width: 1080px;
}

.contact-editor-table th:nth-child(1),
.contact-editor-table td:nth-child(1) {
  width: 140px;
}

.contact-editor-table th:nth-child(2),
.contact-editor-table td:nth-child(2) {
  width: 120px;
}

.contact-editor-table th:nth-child(3),
.contact-editor-table td:nth-child(3) {
  width: 190px;
}

.contact-editor-table th:nth-child(4),
.contact-editor-table td:nth-child(4),
.contact-editor-table th:nth-child(5),
.contact-editor-table td:nth-child(5) {
  width: 120px;
}

.contact-editor-table th:nth-child(6),
.contact-editor-table td:nth-child(6) {
  width: 180px;
}

.contact-editor-table th:nth-child(7),
.contact-editor-table td:nth-child(7) {
  width: 150px;
}

.contact-editor-table th:nth-child(8),
.contact-editor-table td:nth-child(8) {
  width: 58px;
  text-align: center;
}

.form-footer {
  position: sticky;
  bottom: -22px;
  display: flex;
  gap: 8px;
  padding: 12px 0 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.legacy-contact-body {
  min-height: 100vh;
  background: #fff;
  color: #000;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  overflow: hidden;
}

.legacy-contact-body .legacy-contact-page {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  background: #fff;
}

.legacy-contact-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid #8fb5df;
  background: linear-gradient(#f8fbff 0, #f8fbff 28px, #d9eafa 29px, #c7dff6 58px);
  color: #003f7f;
  font-size: 21px;
}

.legacy-contact-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  overflow: hidden;
}

.legacy-contact-heading strong,
.legacy-contact-heading > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-contact-heading strong {
  flex: 0 0 auto;
}

.legacy-contact-heading > span {
  min-width: 0;
  color: #285d91;
  font-size: 15px;
}

.legacy-title-icon {
  position: relative;
  width: 28px;
  height: 26px;
  flex: 0 0 28px;
  border: 1px solid #9aab66;
  background: linear-gradient(135deg, #fff7a8, #e5b844);
  transform: rotate(-8deg);
}

.legacy-title-icon::before {
  content: "";
  position: absolute;
  right: -5px;
  top: 4px;
  width: 11px;
  height: 17px;
  border: 1px solid #2e65a9;
  background: #b6d6ff;
}

.legacy-title-icon::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5a8ed1;
}

.legacy-contact-content {
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(290px, 18vw, 320px) minmax(0, 1fr);
  border-top: 1px solid #d2ddea;
}

.legacy-contact-left {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, clamp(160px, 30vh, 260px));
  border-right: 1px solid #8fb5df;
  background: #f9fcff;
}

.legacy-contact-side-section {
  min-width: 0;
  min-height: 0;
  border-bottom: 1px solid #8fb5df;
  overflow: auto;
}

.legacy-side-tab {
  display: inline-flex;
  align-items: center;
  min-width: 56px;
  height: 27px;
  margin-top: 4px;
  padding: 0 6px;
  border: 1px solid #8fb5df;
  border-left: 0;
  border-bottom-color: #fff;
  background: #fff;
  color: #003f7f;
  font-weight: 700;
}

.legacy-side-link {
  width: calc(100% - 6px);
  height: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 3px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px dashed #9bbce0;
  background: transparent;
  color: #00469a;
  text-align: left;
  text-decoration: underline;
}

.legacy-side-link::before,
.legacy-contact-person::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  border: 1px solid #7f4f00;
  background: linear-gradient(#ffe79a, #c78417);
}

.legacy-side-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0 6px 8px;
}

.legacy-side-fields div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: start;
  min-height: 21px;
  line-height: 16px;
}

.legacy-side-fields dt {
  color: #000;
  overflow: hidden;
  white-space: nowrap;
}

.legacy-side-fields dd {
  min-width: 0;
  margin: 0;
  color: #000;
  overflow-wrap: anywhere;
}

.company-profile-compact {
  padding: 0 5px 5px;
}

.company-profile-compact div {
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 18px;
  padding: 1px 0;
  border-bottom: 1px dotted #d3dfec;
  line-height: 14px;
}

.company-profile-compact dt,
.company-profile-compact dd {
  font-size: 12px;
}

.company-profile-compact dt {
  color: #385674;
}

.company-profile-compact dd:empty::after {
  content: "-";
  color: #8292a3;
}

.legacy-doc-link {
  display: inline-block;
  margin: 6px 6px 12px 68px;
  color: #00469a;
}

.legacy-contact-list {
  padding: 4px 6px 10px;
}

.legacy-contact-person {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 4px 0 7px 18px;
  border-bottom: 1px dashed #a7c1dd;
  font-size: 14px;
  line-height: 18px;
}

.legacy-contact-person::before {
  position: absolute;
  left: 1px;
  top: 5px;
}

.legacy-contact-person a {
  color: #003f9e;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.legacy-contact-person button {
  border: 0;
  background: transparent;
  color: #003f9e;
  text-decoration: underline;
  font-size: 14px;
}

.legacy-contact-person span {
  grid-column: 1 / -1;
}

.legacy-side-empty {
  padding: 8px;
  color: #607086;
}

.legacy-contact-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 32px 33px 36px minmax(130px, 1fr) 7px var(--legacy-contact-preview-height, 168px);
  background: #fff;
  overflow: hidden;
}

.legacy-contact-tabs {
  display: flex;
  align-items: end;
  gap: 2px;
  padding: 4px 4px 0;
  border-bottom: 1px solid #9dbfe2;
  background: #f6fbff;
}

.legacy-contact-tabs button {
  height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #9dbfe2;
  border-bottom: 0;
  border-radius: 0;
  background: #edf3f9;
  color: #5e6f80;
  font-size: 13px;
  cursor: pointer;
}

.legacy-contact-tabs button.active {
  background: #fff;
  color: #003f7f;
  font-weight: 700;
}

.legacy-contact-tabs button:focus-visible {
  outline: 2px solid #1b72be;
  outline-offset: -2px;
}

.legacy-contact-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-bottom: 1px solid #9dbfe2;
  background: #edf6ff;
  white-space: nowrap;
  overflow: hidden;
}

.legacy-contact-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.legacy-contact-toolbar input[type="radio"] {
  width: 13px;
  height: 13px;
  margin: 0;
}

.legacy-contact-toolbar select,
.legacy-contact-toolbar input[name="q"] {
  height: 23px;
  border: 1px solid #7fb0df;
  background: #fff;
  color: #000;
  font-size: 13px;
}

.legacy-contact-toolbar input[name="q"] {
  width: 132px;
  padding: 0 4px;
}

.legacy-contact-toolbar button,
.legacy-contact-actions button {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #5d9bd4;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #cae3ff);
  color: #004b91;
  font-size: 13px;
}

.legacy-contact-toolbar button:disabled {
  color: #718399;
  cursor: wait;
  opacity: 0.75;
}

.legacy-toolbar-spacer {
  flex: 1 1 auto;
}

.legacy-history-toolbar > span {
  min-width: 64px;
  color: #003f7f;
  font-weight: 700;
}

.legacy-contact-pager {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  border-bottom: 1px solid #9dbfe2;
  background: #e3f0fd;
}

.legacy-contact-pager select {
  height: 24px;
  border: 1px solid #8db2db;
  background: #fff;
  font-size: 13px;
}

.legacy-page-size {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border: 1px solid #8db2db;
  background: #fff;
}

.legacy-contact-pager b {
  color: #f00;
}

.legacy-contact-table-host {
  min-width: 0;
  overflow: auto;
}

.legacy-contact-preview-resizer {
  position: relative;
  min-height: 7px;
  border-top: 1px solid #7daedf;
  border-bottom: 1px solid #b8cce2;
  background: linear-gradient(#eef7ff, #c7def5);
  cursor: row-resize;
  touch-action: none;
}

.legacy-contact-preview-resizer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 54px;
  height: 3px;
  transform: translateX(-50%);
  border-top: 1px solid #6f9aca;
  border-bottom: 1px solid #6f9aca;
}

.legacy-contact-preview-resizer:hover,
.legacy-contact-preview-resizer:focus-visible {
  background: linear-gradient(#e0f1ff, #a9cff4);
  outline: 1px solid #2f78bd;
  outline-offset: -1px;
}

body.legacy-contact-preview-resizing {
  cursor: row-resize !important;
  user-select: none !important;
}

.legacy-contact-record-table {
  width: 100%;
  min-width: 1170px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #000;
  font-size: 13px;
  line-height: 16px;
}

.legacy-contact-record-table th,
.legacy-contact-record-table td {
  height: 24px;
  padding: 1px 4px;
  border: 1px solid #c6d7ea;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-contact-record-table th {
  height: 26px;
  background: linear-gradient(#dff1ff, #b8d4ef);
  color: #034f91;
  font-weight: 700;
  text-align: center;
}

.legacy-contact-record-table tbody tr:nth-child(odd) {
  background: #edf5f7;
}

.legacy-contact-record-table tbody tr:nth-child(even) {
  background: #dceaf8;
}

.legacy-contact-record-table tbody tr:hover,
.legacy-contact-record-table tbody tr.selected {
  background: #c9def5;
}

.legacy-contact-record-table th:nth-child(1),
.legacy-contact-record-table td:nth-child(1) {
  width: 38px;
  text-align: center;
}

.legacy-contact-record-table th:nth-child(2),
.legacy-contact-record-table td:nth-child(2) {
  width: 38px;
  text-align: center;
}

.legacy-contact-record-table th:nth-child(3),
.legacy-contact-record-table td:nth-child(3) {
  width: 124px;
  text-align: center;
}

.legacy-contact-record-table th:nth-child(4),
.legacy-contact-record-table td:nth-child(4) {
  width: 600px;
}

.legacy-contact-record-table th:nth-child(5),
.legacy-contact-record-table td:nth-child(5) {
  width: 48px;
  text-align: center;
}

.legacy-contact-record-table th:nth-child(6),
.legacy-contact-record-table td:nth-child(6) {
  width: 44px;
  text-align: center;
}

.legacy-contact-record-table th:nth-child(7),
.legacy-contact-record-table td:nth-child(7) {
  width: 66px;
  text-align: center;
}

.legacy-contact-record-table th:nth-child(8),
.legacy-contact-record-table td:nth-child(8) {
  width: 80px;
  text-align: center;
}

.legacy-contact-record-table th:nth-child(9),
.legacy-contact-record-table td:nth-child(9) {
  width: 100px;
}

.legacy-contact-record-table th:nth-child(10),
.legacy-contact-record-table td:nth-child(10) {
  width: 96px;
}

.legacy-contact-record-table a,
.legacy-record-subject-link {
  color: #003f9e;
}

.legacy-record-subject-link {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.legacy-contact-record-table input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  vertical-align: middle;
}

.legacy-record-attachment {
  display: inline-flex;
  align-items: flex-start;
  color: #075aa3;
  font-family: "Segoe UI Symbol", Arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
}

.legacy-record-attachment sup {
  margin-left: 1px;
  color: #003f7f;
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 10px;
}

.legacy-history-record-table {
  min-width: 920px;
}

.legacy-history-record-table th:nth-child(1),
.legacy-history-record-table td:nth-child(1) {
  width: 36px;
  text-align: center;
}

.legacy-history-record-table th:nth-child(2),
.legacy-history-record-table td:nth-child(2) {
  width: 128px;
  text-align: center;
}

.legacy-history-record-table th:nth-child(3),
.legacy-history-record-table td:nth-child(3) {
  width: 150px;
}

.legacy-history-record-table th:nth-child(4),
.legacy-history-record-table td:nth-child(4) {
  width: 300px;
}

.legacy-history-record-table th:nth-child(5),
.legacy-history-record-table td:nth-child(5),
.legacy-history-record-table th:nth-child(6),
.legacy-history-record-table td:nth-child(6) {
  width: 80px;
  text-align: center;
}

.legacy-history-record-table th:nth-child(7),
.legacy-history-record-table td:nth-child(7) {
  width: 180px;
}

.legacy-history-record-table th:nth-child(8),
.legacy-history-record-table td:nth-child(8) {
  width: 110px;
}

.legacy-company-modal[hidden] {
  display: none;
}

.legacy-company-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 33, 52, 0.32);
}

.legacy-company-dialog {
  width: min(1200px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  border: 2px solid #7aa8d8;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
  color: #000;
  font-size: 13px;
}

.legacy-company-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-bottom: 1px solid #8fb5df;
  background: linear-gradient(#dff1ff, #b8d4ef);
  color: #034f91;
}

.legacy-company-dialog > header button {
  width: 22px;
  height: 22px;
  border: 1px solid #6e9dcc;
  background: #fff;
  color: #034f91;
}

.legacy-company-dialog form {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto 34px;
  gap: 8px;
  padding: 8px;
  overflow: auto;
}

.legacy-followup-dialog {
  width: min(780px, 96vw);
}

.legacy-followup-dialog form {
  grid-template-rows: minmax(0, 1fr) 34px;
}

.legacy-followup-fields {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 7px 9px;
  overflow: auto;
}

.legacy-followup-fields label {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.legacy-followup-fields label.wide {
  grid-column: 1 / -1;
}

.legacy-followup-fields span {
  color: #003f7f;
  font-weight: 700;
}

.legacy-followup-fields input,
.legacy-followup-fields select,
.legacy-followup-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #9bbce0;
  background: #fff;
  color: #000;
  font: 13px Arial, "Microsoft YaHei", sans-serif;
}

.legacy-followup-fields input,
.legacy-followup-fields select {
  height: 25px;
  padding: 0 5px;
}

.legacy-followup-fields textarea {
  min-height: 190px;
  padding: 6px;
  resize: vertical;
  line-height: 1.45;
}

.legacy-company-fields {
  display: grid;
  grid-template-columns: repeat(8, minmax(84px, 1fr));
  gap: 4px 6px;
}

.legacy-company-fields label {
  display: grid;
  grid-column: span 2;
  gap: 1px;
}

.legacy-company-fields label.wide {
  grid-column: 1 / -1;
}

.legacy-company-fields label.short,
.legacy-company-fields label.compact {
  grid-column: span 1;
}

.legacy-company-fields label.medium {
  grid-column: span 2;
}

.legacy-address-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.2fr) minmax(88px, 0.7fr) minmax(128px, 0.9fr) minmax(220px, 1.5fr);
  gap: 4px 6px;
  align-items: start;
}

.legacy-address-line {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 176px minmax(320px, 1fr);
  gap: 4px 6px;
}

.legacy-company-fields .legacy-address-block label {
  grid-column: auto;
}

.legacy-company-fields .legacy-address-block .address-unit input {
  width: min(100%, 176px);
}

.legacy-company-fields .legacy-address-block .address-street input,
.legacy-company-fields .legacy-address-block .address-city input,
.legacy-company-fields .legacy-address-block .address-state select,
.legacy-company-fields .legacy-address-block .address-keywords input {
  width: 100%;
}

.legacy-owner-field {
  grid-column: span 5;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.legacy-owner-field legend {
  padding: 0;
  color: #003f7f;
  font-weight: 700;
}

.legacy-owner-picker {
  min-height: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 3px 6px;
  border: 1px solid #9bbce0;
  background: #fff;
}

.legacy-company-fields .legacy-owner-picker label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000;
  font-weight: 400;
  white-space: nowrap;
}

.legacy-company-fields .legacy-owner-picker input[type="checkbox"] {
  width: 14px;
  height: 14px;
  padding: 0;
}

.legacy-company-fields span,
.legacy-company-subhead {
  color: #003f7f;
  font-weight: 700;
}

.legacy-company-fields input,
.legacy-company-fields select,
.legacy-company-fields textarea,
.legacy-company-table input {
  width: 100%;
  min-width: 0;
  border: 1px solid #9bbce0;
  background: #fff;
  color: #000;
  font-size: 13px;
}

.legacy-company-fields label.short input,
.legacy-company-fields label.short select {
  width: min(100%, 96px);
}

.legacy-company-fields label.compact input,
.legacy-company-fields label.compact select {
  width: min(100%, 176px);
}

.legacy-company-fields label.medium input,
.legacy-company-fields label.medium select {
  width: min(100%, 260px);
}

.legacy-company-fields input,
.legacy-company-fields select {
  height: 24px;
  padding: 0 5px;
}

.legacy-company-fields textarea {
  padding: 4px 5px;
  resize: vertical;
}

.legacy-company-fields input[readonly],
.legacy-company-fields textarea[readonly] {
  background: #eef4fa;
  color: #4d6178;
}

.legacy-company-subsection {
  border: 1px solid #b8cde4;
}

.legacy-company-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 6px;
  border-bottom: 1px solid #b8cde4;
  background: #edf6ff;
}

.legacy-company-subhead button,
.legacy-company-table button,
.legacy-company-dialog footer button {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #5d9bd4;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #cae3ff);
  color: #004b91;
  font-size: 13px;
}

.legacy-company-table-wrap {
  overflow: auto;
}

.legacy-company-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
}

.legacy-company-contact-table {
  min-width: 1060px;
}

.legacy-company-contact-table input {
  font-size: 14px;
}

.legacy-company-contact-table th:nth-child(1),
.legacy-company-contact-table td:nth-child(1) {
  width: 140px;
}

.legacy-company-contact-table th:nth-child(2),
.legacy-company-contact-table td:nth-child(2) {
  width: 120px;
}

.legacy-company-contact-table th:nth-child(3),
.legacy-company-contact-table td:nth-child(3) {
  width: 190px;
}

.legacy-company-contact-table th:nth-child(4),
.legacy-company-contact-table td:nth-child(4),
.legacy-company-contact-table th:nth-child(5),
.legacy-company-contact-table td:nth-child(5) {
  width: 120px;
}

.legacy-company-contact-table th:nth-child(6),
.legacy-company-contact-table td:nth-child(6) {
  width: 180px;
}

.legacy-company-contact-table th:nth-child(7),
.legacy-company-contact-table td:nth-child(7) {
  width: 150px;
}

.legacy-company-contact-table th:nth-child(8),
.legacy-company-contact-table td:nth-child(8) {
  width: 58px;
  text-align: center;
}

.legacy-company-email-table {
  min-width: 560px;
}

.legacy-company-email-table th:nth-child(1),
.legacy-company-email-table td:nth-child(1) {
  width: 42%;
}

.legacy-company-email-table th:nth-child(2),
.legacy-company-email-table td:nth-child(2) {
  width: 28%;
}

.legacy-company-email-table th:nth-child(3),
.legacy-company-email-table td:nth-child(3),
.legacy-company-email-table th:nth-child(4),
.legacy-company-email-table td:nth-child(4) {
  width: 64px;
  text-align: center;
}

.legacy-company-table th,
.legacy-company-table td {
  height: 28px;
  border: 1px solid #d0dfef;
  padding: 2px;
}

.legacy-company-table th {
  background: #f4f9ff;
  color: #034f91;
  text-align: center;
}

.legacy-company-table input[type="radio"],
.legacy-company-table input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.legacy-company-table td:nth-last-child(1) {
  width: 54px;
  text-align: center;
}

.email-row-inactive td {
  background: #f3f6f9;
}

.email-row-inactive input:not([type="radio"]):not([type="checkbox"]) {
  background: #f7f9fb;
  color: #65778a;
}

.legacy-company-dialog footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #b8cde4;
  padding-top: 6px;
}

.legacy-company-dialog footer span {
  margin-right: auto;
  color: #004b91;
}

.dir-in {
  color: #f00;
  font-weight: 700;
}

.dir-out {
  color: #099336;
  font-weight: 700;
}

.status-open {
  color: #f00;
  font-weight: 700;
}

.status-done {
  color: #003f9e;
}

.status-toggle {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.status-toggle:disabled {
  color: #666;
  cursor: wait;
  text-decoration: none;
}

.legacy-contact-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  border-top: 1px solid #9dbfe2;
  background: #f6fbff;
}

.legacy-contact-actions select {
  height: 23px;
  border: 1px solid #8db2db;
  background: #fff;
  font-size: 13px;
}

.legacy-contact-preview {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border-top: 1px solid #9dbfe2;
  background: #fff;
}

.legacy-contact-preview.legacy-preview-active {
  border-top: 2px solid #2f78bd;
  box-shadow: inset 0 2px 0 #d8eaff;
}

.legacy-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 12px;
  min-height: 29px;
  padding: 2px 4px;
  border-bottom: 1px solid #c6d7ea;
  background: #dce8f5;
}

.legacy-preview-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: 0 1 min(var(--detail-field-width, 18ch), 100%);
  width: min(var(--detail-field-width, 18ch), 100%);
  max-width: min(var(--detail-field-max, 64ch), 100%);
  min-width: min(6ch, 100%);
  overflow: visible;
  white-space: normal;
  line-height: 1.35;
}

.legacy-preview-meta b {
  flex: 0 0 auto;
  color: #003f7f;
}

.legacy-preview-meta span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.legacy-preview-head .legacy-preview-actions {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  overflow: visible;
}

.legacy-preview-actions button {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #6da9e8;
  background: linear-gradient(#fff, #d7ebff);
  color: #003f7f;
  font-weight: 700;
  cursor: pointer;
}

.legacy-preview-actions button:hover {
  border-color: #1f6ebd;
  background: #c8e3ff;
}

.legacy-preview-subject {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-bottom: 1px solid #e2ebf5;
  color: #003f7f;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
}

.legacy-preview-subject-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-preview-attachments {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  scrollbar-width: thin;
}

.legacy-preview-attachments a,
.legacy-preview-attachment-missing {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  max-width: min(34ch, 38vw);
  min-height: 17px;
  padding: 0 4px;
  border: 1px solid #b8cfe6;
  border-radius: 2px;
  background: #f5f9fd;
  color: #004f9f;
  font-size: 12px;
  line-height: 15px;
  text-decoration: none;
}

.legacy-preview-attachments a:hover {
  border-color: #2f78bd;
  background: #eef6ff;
}

.legacy-preview-attachments a,
.legacy-preview-attachment-missing {
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-preview-attachments small {
  color: #667788;
}

.legacy-preview-attachment-missing {
  color: #78889a;
}

.mail-attribute-cell svg,
.legacy-mail-attachments svg,
.legacy-record-attachment {
  color: #d71920;
  stroke: #d71920;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
}

.legacy-record-attachment {
  min-width: 24px;
  justify-content: center;
  color: #d71920;
  font-weight: 700;
}

.legacy-record-attachment sup {
  color: #b00020;
  font-weight: 700;
}

.legacy-mail-attachments a,
.mail-detail-wide .mail-inline-attachment-list a,
.attachment-list a,
.legacy-preview-attachments a,
.mail-attachment-file-name {
  border-color: #f0a000 !important;
  background: #fff2a8 !important;
  color: #b00020 !important;
  font-weight: 700 !important;
}

.legacy-mail-attachments a,
.mail-detail-wide .mail-inline-attachment-list a,
.attachment-list a,
.legacy-preview-attachments a {
  box-shadow: inset 0 -1px 0 rgba(176, 0, 32, 0.22);
}

.legacy-mail-attachments a:hover,
.mail-detail-wide .mail-inline-attachment-list a:hover,
.attachment-list a:hover,
.legacy-preview-attachments a:hover {
  border-color: #d71920 !important;
  background: #ffe06a !important;
  color: #8f001a !important;
}

.legacy-mail-attachments .missing-attachment,
.mail-detail-wide .mail-inline-attachment-list .missing-attachment,
.attachment-list .missing-attachment,
.missing-attachment,
.legacy-preview-attachment-missing {
  border-color: #d71920 !important;
  background: #ffe2e2 !important;
  color: #b00020 !important;
  font-weight: 700 !important;
}

.mail-attachment-file-name {
  display: inline-block;
  max-width: min(42ch, 100%);
  padding: 0 5px;
  border: 1px solid #f0a000;
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
  line-height: 17px;
}

.mail-attachment-name {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit !important;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.legacy-preview-body {
  margin: 0;
  padding: 8px;
  overflow: auto;
  white-space: pre-wrap;
  font: 13px/1.45 Arial, "Microsoft YaHei", sans-serif;
}

@media (max-width: 1020px) {
  .app-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .app-shell.legacy-customer-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .side-head div:not(.brand-mark) {
    display: none;
  }

  .nav-button {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .nav-group-button {
    grid-template-columns: 1fr;
  }

  .nav-button span {
    display: none;
  }

  .nav-caret {
    display: none;
  }

  .nav-submenu {
    padding-left: 0;
  }

  .nav-child {
    grid-template-columns: 1fr;
  }

  .dashboard-grid,
  .split-layout,
  .status-grid,
  .maintenance-layout {
    grid-template-columns: 1fr;
  }

  .maintenance-search-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .maintenance-table-wrap {
    max-height: none;
  }

  .legacy-followup-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-address-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-address-line {
    grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 1.3fr);
  }

  .legacy-customer-page {
    --legacy-region-width: 168px;
    display: grid;
    grid-template-columns: var(--legacy-region-width) minmax(0, 1fr);
  }

  .legacy-region-panel {
    width: 100%;
    max-width: none;
  }

  .legacy-customer-toolbar {
    height: auto;
    min-height: var(--legacy-toolbar-height, 32px);
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .legacy-search-box {
    width: min(260px, 32vw);
    min-width: 160px;
    flex: 1 1 180px;
  }

  .legacy-customer-pager {
    overflow-x: auto;
  }

  .legacy-advanced-row {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .legacy-card-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .summary-strip {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .legacy-archive-page .option-row {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto minmax(72px, auto) 32px;
  }

.region-settings-form .region-option-row,
  .legacy-region-column-head {
    grid-template-columns: minmax(170px, 1fr) minmax(100px, 0.55fr) 58px minmax(120px, 0.7fr) auto minmax(72px, auto) 32px;
  }
}

@media (max-width: 720px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-brand {
    min-height: 220px;
    padding: 28px;
  }

  .login-brand h1 {
    font-size: 31px;
  }

  .login-panel {
    align-self: start;
    margin: -28px auto 24px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell.legacy-customer-shell {
    grid-template-columns: 1fr;
    grid-auto-rows: auto minmax(0, 1fr);
    align-content: start;
  }

  .app-shell.legacy-customer-shell .workspace {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .side-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    height: auto;
    overflow-y: visible;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px;
  }

  .app-shell.legacy-customer-shell .side-nav {
    height: auto;
    min-height: 0;
  }

  .side-head {
    padding: 0;
    border-bottom: 0;
  }

  #moduleNav {
    display: flex;
    overflow-x: auto;
    margin: 0;
  }

  .nav-group {
    display: flex;
    gap: 4px;
  }

  .nav-submenu {
    display: flex;
    gap: 4px;
  }

  .nav-submenu[hidden] {
    display: none;
  }

  .nav-button {
    min-width: 42px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
  }

  .user-chip {
    margin-left: auto;
  }

  .content {
    padding: 12px;
  }

  .app-shell.legacy-customer-shell .content {
    height: auto;
    min-height: calc(100vh - 64px);
    overflow: visible;
  }

  .app-shell.legacy-customer-shell .legacy-customer-page {
    height: auto;
    min-height: calc(100vh - 64px);
  }

  .legacy-customer-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: auto;
  }

  .legacy-region-panel {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 180px;
    border-right: 0;
    border-bottom: 1px solid #8fb5df;
  }

  .legacy-customer-main {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .legacy-customer-page.region-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 24px minmax(0, 1fr);
  }

  .legacy-customer-page.region-collapsed .legacy-region-panel {
    width: 100%;
    max-width: none;
    height: 24px;
    max-height: 24px;
  }

  .legacy-customer-toolbar {
    align-items: flex-start;
    height: auto;
    flex-wrap: wrap;
  }

  .legacy-search-box {
    width: 100%;
    min-width: 0;
    flex: 1 1 220px;
  }

  .legacy-advanced-row {
    grid-template-columns: 1fr;
  }

  .legacy-customer-pager {
    overflow-x: auto;
  }

  .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar input,
  .toolbar select,
  .toolbar .api-input {
    min-width: 0;
    width: 100%;
  }

  .settings-grid,
  .detail-fields,
  .form-grid,
  .inbound-form-grid,
  .maintenance-search-grid,
  .maintenance-form-grid {
    grid-template-columns: 1fr;
  }

  .maintenance-search-head,
  .maintenance-form-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .maintenance-form-grid .wide {
    grid-column: auto;
  }

  .inbound-form-grid .wide {
    grid-column: auto;
  }

  .shortcut-grid,
  .legacy-admin-grid,
  .parameter-card-grid,
  .option-row,
  .warehouse-row,
  .parameter-row,
  .inbound-item-row,
  .legacy-card-grid {
    grid-template-columns: 1fr;
  }

  .option-source {
    white-space: normal;
  }

  .legacy-archive-title,
  .legacy-archive-section-head,
  .legacy-archive-page .option-list,
  .legacy-archive-actions {
    padding-left: 10px;
    padding-right: 10px;
  }

  .legacy-archive-page .option-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 4px 0 8px;
  }

  .region-settings-form .region-option-row {
    grid-template-columns: 1fr;
  }

  .legacy-region-column-head {
    display: none;
  }

  .legacy-archive-page .option-row + .option-row {
    border-top: 1px solid #e2e8f0;
  }

  .legacy-archive-page [data-option-remove] {
    justify-self: start;
  }

  .detail-overlay {
    display: block;
  }

  .detail-backdrop {
    display: none;
  }

  .detail-panel {
    width: 100vw;
    border-left: 0;
  }
}

.compact-settings-page .compact-option-page .option-list {
  min-height: 0;
  align-content: start;
  padding: 0 8px 8px;
  overflow: visible;
}

.compact-settings-page .compact-option-page .option-row {
  grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.1fr) 72px 82px 28px;
  gap: 5px;
  min-height: 30px;
  border-bottom: 1px solid #d5e1ee;
}

.compact-settings-page .compact-option-page.region-settings-form .region-option-row {
  grid-template-columns: minmax(190px, .9fr) minmax(100px, .45fr) 56px minmax(110px, .55fr) 58px 70px 28px;
}

.compact-settings-page .compact-option-page .option-value,
.compact-settings-page .compact-option-page .option-label,
.compact-settings-page .compact-option-page .option-parent {
  height: 25px;
  border-radius: 2px;
  padding: 0 6px;
  font-size: 13px;
}

@media (max-width: 760px) {
  .compact-settings-page .compact-option-page .option-row,
  .compact-settings-page .compact-option-page.region-settings-form .region-option-row {
    grid-template-columns: 1fr;
  }
}

/* UI-036: Edge menu audit fixes. */
.compact-page-toolbar .compact-option-tabs {
  flex: 0 0 auto;
  align-self: center;
  overflow: visible;
}

.compact-page-toolbar .compact-option-tabs button {
  padding-inline: 7px;
}

.classic-crm-shell .viewport-fit-page {
  height: calc(100vh - 88px);
  height: calc(100dvh - 88px);
  min-height: 0;
  overflow: hidden;
}

.classic-crm-shell .settings-layout.viewport-fit-page {
  align-content: start;
  overflow: auto;
}

.classic-crm-shell .legacy-search-page,
.classic-crm-shell .web-docs-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 4px;
}

.classic-crm-shell .legacy-search-page > #tableHost,
.classic-crm-shell .web-docs-page > #webDocsHost {
  min-height: 0;
  overflow: hidden;
}

.classic-crm-shell .legacy-search-page > #tableHost > .data-table-wrap,
.classic-crm-shell .web-docs-page > #webDocsHost > .data-table-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.classic-crm-shell .legacy-search-page .data-table th,
.classic-crm-shell .web-docs-page .data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.classic-crm-shell .mail-receive-page {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 4px;
}

.classic-crm-shell .mail-receive-page > .legacy-summary {
  margin-bottom: 0;
}

.classic-crm-shell .mail-receive-page > .status-grid {
  min-height: 0;
  align-content: start;
  gap: 4px;
  overflow: auto;
}

.classic-crm-shell .mail-receive-page .settings-panel {
  margin: 0;
}

.classic-crm-shell .mail-receive-page .data-table-wrap {
  max-height: 320px;
  overflow: auto;
}

.classic-crm-shell .mail-receive-page .data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (max-width: 1200px) {
  .detail-overlay.form-overlay {
    grid-template-columns: minmax(0, 1fr) min(760px, 100vw);
  }

  .form-overlay .form-panel {
    width: auto;
    max-width: 100vw;
  }
}

@media (max-width: 760px) {
  .detail-overlay.form-overlay {
    display: block;
  }

  .form-overlay .form-panel {
    width: 100vw;
  }
}
/* Authentication */
.auth-change-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 35, 52, 0.58);
}

.auth-change-panel {
  width: min(420px, 100%);
  padding: 22px;
  border: 1px solid #8da8c2;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(18, 39, 61, 0.24);
}

.auth-change-panel h2 {
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: 0;
}

.auth-change-panel > p:not(.form-error) {
  margin: 0 0 16px;
  color: #52697f;
  font-size: 14px;
}

.auth-change-panel label {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  font-size: 14px;
}

.auth-change-panel input {
  min-width: 0;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid #9db2c7;
  border-radius: 3px;
  font: inherit;
}

/* SMS gateway */
.sms-gateway-page,
.sms-gateway-host {
  min-height: 0;
  height: 100%;
}

.sms-gateway-host {
  overflow: auto;
}

.sms-gateway-panel {
  min-height: 100%;
}

.sms-summary-strip {
  grid-template-columns: repeat(5, minmax(88px, 1fr));
}

.sms-gateway-form {
  border-bottom: 1px solid #b8cce2;
}

.sms-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 5px 10px;
  padding: 7px;
  background: #f7fbff;
}

.sms-form-grid label {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 13px;
}

.sms-form-grid label > span {
  color: #425f7c;
  white-space: nowrap;
}

.sms-form-grid input,
.sms-form-grid select,
.sms-form-grid textarea {
  width: 100%;
  min-width: 0;
  height: 27px;
  border: 1px solid #9fb9d3;
  border-radius: 2px;
  padding: 2px 6px;
  background: #fff;
  color: #14293e;
  font: inherit;
}

.sms-form-grid textarea {
  height: 48px;
  resize: vertical;
}

.sms-form-grid input[readonly] {
  background: #edf3f8;
  color: #536b82;
}

.sms-form-grid .sms-enabled-label input {
  width: 16px;
  height: 16px;
  justify-self: start;
}

.sms-form-grid .sms-wide-field {
  grid-column: span 2;
}

.sms-form-grid .sms-schedule-days {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 13px;
  min-width: 0;
  margin: 0;
  padding: 4px 8px 5px;
  border: 1px solid #c3d4e5;
  color: #425f7c;
  font-size: 13px;
}

.sms-form-grid .sms-schedule-days legend {
  padding: 0 4px;
}

.sms-form-grid .sms-schedule-days label {
  display: inline-flex;
  grid-template-columns: none;
  gap: 3px;
  color: #14293e;
}

.sms-form-grid .sms-schedule-days input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.sms-protocol-note {
  padding: 5px 8px;
  border-top: 1px solid #d2e0ee;
  color: #526b83;
  font-size: 12px;
}

.sms-gateway-actions {
  justify-content: flex-end;
  gap: 5px;
}

.sms-gateway-actions > span {
  margin-right: auto;
}

.sms-compose-panel {
  border-bottom: 1px solid #b8cce2;
  background: #f7fbff;
}

.sms-compose-panel > header,
.sms-recent-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 7px;
  border-bottom: 1px solid #a9c2db;
  background: #d9e9f8;
}

.sms-compose-panel h4,
.sms-recent-panel h4 {
  margin: 0;
  font-size: 13px;
}

.sms-compose-panel header span,
.sms-recent-panel header span {
  color: #5c7389;
  font-size: 12px;
}

.sms-send-form {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 2fr) auto;
  align-items: end;
  gap: 7px;
  padding: 7px;
}

.sms-send-form label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #425f7c;
  font-size: 13px;
}

.sms-send-form input,
.sms-send-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #9fb9d3;
  border-radius: 2px;
  padding: 4px 6px;
  background: #fff;
  color: #14293e;
  font: inherit;
  resize: vertical;
}

.sms-send-form input {
  height: 29px;
}

.sms-send-form button {
  height: 29px;
  white-space: nowrap;
}

.classic-crm-shell .data-table th,
.classic-crm-shell .data-table td,
.classic-crm-shell .widget .data-table th,
.classic-crm-shell .widget .data-table td {
  height: 24px;
  line-height: 16px;
}

.classic-crm-shell .workbench-mini-head th {
  height: 19px;
}

.legacy-time-col,
.classic-crm-shell .data-table th.legacy-time-col,
.classic-crm-shell .data-table td.legacy-time-col,
.classic-crm-shell .workbench-table th.legacy-time-col,
.classic-crm-shell .workbench-table td.legacy-time-col {
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
}

.legacy-date-col,
.classic-crm-shell .data-table th.legacy-date-col,
.classic-crm-shell .data-table td.legacy-date-col,
.classic-crm-shell .workbench-table th.legacy-date-col,
.classic-crm-shell .workbench-table td.legacy-date-col {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
}

@media (max-width: 1050px) {
  .sms-form-grid {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }

  .sms-send-form {
    grid-template-columns: 1fr auto;
  }

  .sms-send-form .sms-message-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .sms-summary-strip,
  .sms-form-grid {
    grid-template-columns: 1fr;
  }

  .sms-form-grid .sms-wide-field {
    grid-column: auto;
  }

  .sms-form-grid .sms-schedule-days {
    grid-column: auto;
    flex-wrap: wrap;
  }

  .sms-send-form {
    grid-template-columns: 1fr;
  }

  .sms-send-form .sms-message-field {
    grid-column: auto;
  }
}

/* Responsive hardening for the classic CRM shell. */
html,
body,
#app,
#appView {
  min-width: 0;
}

body {
  overflow-x: hidden;
}

.app-shell.classic-crm-shell,
.app-shell.classic-crm-shell.legacy-mail-shell {
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.classic-crm-shell .workspace,
.app-shell.legacy-mail-shell.classic-crm-shell .workspace {
  width: 100%;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.classic-crm-shell .topbar,
.classic-crm-shell .legacy-quickbar,
.classic-crm-shell .workspace-tabbar,
.classic-crm-shell .contact-workspace-tabs,
.classic-crm-shell .content {
  min-width: 0;
  max-width: 100%;
}

.classic-crm-shell .content,
.app-shell.legacy-mail-shell.classic-crm-shell .content {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.classic-crm-shell #moduleNav {
  overflow-x: hidden;
}

.classic-crm-shell .nav-button span,
.classic-crm-shell .nav-child span:last-child {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.classic-crm-shell .nav-button,
.classic-crm-shell .nav-child {
  margin-bottom: 2px;
}

.classic-crm-shell .data-table-wrap,
.classic-crm-shell .legacy-customer-table-wrap,
.classic-crm-shell .legacy-mail-list-wrap,
.classic-crm-shell .legacy-mail-table-wrap,
.classic-crm-shell .legacy-contact-table-host,
.classic-crm-shell .compact-settings-table-host,
.classic-crm-shell .legacy-company-table-wrap,
.classic-crm-shell .workbench-inline-mail-host,
.classic-crm-shell .workbench-more-mail-host {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.classic-crm-shell .toolbar,
.classic-crm-shell .legacy-customer-toolbar,
.classic-crm-shell .legacy-customer-pager,
.classic-crm-shell .legacy-contact-toolbar,
.classic-crm-shell .legacy-contact-pager,
.classic-crm-shell .mail-compose-tools,
.classic-crm-shell .mail-editor-toolbar,
.classic-crm-shell .workbench-more-actionbar,
.classic-crm-shell .workbench-more-mail-pager {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.classic-crm-shell .legacy-contact-toolbar,
.classic-crm-shell .legacy-contact-pager,
.classic-crm-shell .mail-compose-tools,
.classic-crm-shell .mail-editor-toolbar,
.classic-crm-shell .workbench-more-actionbar {
  flex-wrap: nowrap;
}

@media (max-width: 1180px) {
  .classic-crm-shell .legacy-quickbar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .classic-crm-shell .legacy-quickbar-row {
    width: max-content;
    min-width: 100%;
    overflow: visible;
  }

  .classic-crm-shell .legacy-quickbar-gap {
    flex: 0 0 16px;
    min-width: 16px;
  }

  .classic-crm-shell .top-actions {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .classic-crm-shell .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .detail-overlay,
  .detail-overlay.mail-detail-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-overlay[hidden] {
    display: none;
  }

  .detail-backdrop {
    display: none;
  }

  .detail-panel,
  .mail-detail-wide .detail-panel {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    border-left: 0;
  }

  .mail-detail-wide .detail-head {
    align-items: flex-start;
  }

  .mail-info-section .detail-fields div {
    flex-basis: min(var(--detail-field-width, 14ch), 100%);
    width: min(var(--detail-field-width, 14ch), 100%);
  }

  .legacy-company-modal {
    place-items: stretch;
    padding: 0;
  }

  .legacy-company-dialog,
  .legacy-followup-dialog {
    width: 100vw;
    width: 100dvw;
    max-height: 100vh;
    max-height: 100dvh;
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 720px) {
  .app-shell.classic-crm-shell,
  .app-shell.classic-crm-shell.legacy-customer-shell,
  .app-shell.classic-crm-shell.legacy-mail-shell {
    max-width: 100vw;
    max-width: 100dvw;
  }

  .classic-crm-shell .side-nav,
  .app-shell.legacy-customer-shell.classic-crm-shell .side-nav,
  .app-shell.legacy-mail-shell.classic-crm-shell .side-nav {
    overflow-x: hidden;
  }

  .classic-crm-shell #moduleNav {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .classic-crm-shell .nav-button,
  .classic-crm-shell .nav-child {
    margin-bottom: 0;
  }

  .classic-crm-shell .legacy-quickbar-row button {
    min-width: auto;
    padding-inline: 9px;
  }

  .classic-crm-shell .contact-workspace-tab-row {
    grid-template-columns: minmax(74px, 110px) 22px;
  }

  .classic-crm-shell .dashboard-workspace-tab {
    grid-template-columns: minmax(64px, 82px);
  }

  .classic-crm-shell .legacy-contact-content {
    min-width: 740px;
  }

  .classic-crm-shell .workspace,
  .app-shell.legacy-customer-shell.classic-crm-shell .workspace,
  .app-shell.legacy-mail-shell.classic-crm-shell .workspace {
    height: auto;
    min-height: 0;
    align-self: stretch;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }

  .classic-crm-shell .legacy-contact-main,
  .classic-crm-shell .legacy-mail-page,
  .classic-crm-shell .legacy-mail-content,
  .classic-crm-shell .legacy-mail-main {
    min-width: 0;
  }

  .legacy-company-dialog form {
    gap: 6px;
    padding: 6px;
  }

  .legacy-company-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-company-fields label,
  .legacy-company-fields label.medium,
  .legacy-company-fields label.compact,
  .legacy-company-fields label.short,
  .legacy-owner-field {
    grid-column: 1 / -1;
  }

  .legacy-address-block,
  .legacy-address-line {
    grid-template-columns: 1fr;
  }

  .legacy-company-fields .legacy-address-block .address-unit input,
  .legacy-company-fields label.short input,
  .legacy-company-fields label.short select,
  .legacy-company-fields label.compact input,
  .legacy-company-fields label.compact select,
  .legacy-company-fields label.medium input,
  .legacy-company-fields label.medium select {
    width: 100%;
  }

  .mail-detail-wide .detail-body {
    overflow: auto;
  }

  .mail-detail-wide .mail-detail-action-section .legacy-mail-action-tool {
    min-width: 48px;
  }
}

/* Phone layouts: let each detail level fit the viewport and scroll vertically. */
@media (max-width: 720px) {
  .classic-crm-shell .workspace,
  .app-shell.legacy-customer-shell.classic-crm-shell .workspace,
  .app-shell.legacy-mail-shell.classic-crm-shell .workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .classic-crm-shell .workspace > :not(.content) { flex-shrink: 0; }
  .classic-crm-shell .workspace > .content { flex: 1 1 0; min-height: 0; }
  .classic-crm-shell #moduleNav { display: flex; }
  .classic-crm-shell #moduleNav .nav-button { flex: 0 0 auto; width: auto; min-width: 80px; }
  .classic-crm-shell .legacy-customer-toolbar { flex-wrap: wrap; overflow: visible; }
  .classic-crm-shell .contact-workspace-mail-head > strong { white-space: normal; overflow-wrap: anywhere; }
  .classic-crm-shell .contact-workspace-mail-body { overflow-wrap: anywhere; }
  .classic-crm-shell .mail-detail-action-section { flex-wrap: wrap; }
  .classic-crm-shell .detail-section { max-width: 100%; min-width: 0; }
  .classic-crm-shell .detail-text,
  .classic-crm-shell .mail-body-html { max-width: 100%; overflow: auto; overflow-wrap: anywhere; }
  .classic-crm-shell .mail-body-html img { max-width: 100%; height: auto; }

  .legacy-contact-body { overflow: auto; min-width: 0; }
  .legacy-contact-body .legacy-contact-page {
    display: block; height: auto; min-height: 100vh; overflow: visible; width: 100%; min-width: 0;
  }
  .legacy-contact-title { min-height: 58px; height: auto; font-size: 17px; padding: 8px; }
  .legacy-contact-heading { flex-wrap: wrap; min-width: 0; }
  .legacy-contact-heading strong { flex-shrink: 1; }
  .legacy-contact-heading > span { overflow-wrap: anywhere; }
  .legacy-contact-content,
  .classic-crm-shell .legacy-contact-content { display: block; min-width: 0; width: 100%; }
  .legacy-contact-left { display: block; width: 100%; border-right: 0; }
  .legacy-contact-side-section { overflow: visible; }
  .legacy-contact-main { display: flex; flex-direction: column; overflow: visible; width: 100%; }
  .legacy-contact-tabs { overflow-x: auto; flex-shrink: 0; }
  .legacy-contact-tabs button { flex-shrink: 0; }
  .legacy-contact-toolbar { height: auto; flex-wrap: wrap; gap: 6px; padding: 6px; }
  .legacy-contact-toolbar input { max-width: 100%; min-width: 0; }
  .legacy-contact-pager { height: auto; min-height: 36px; flex-wrap: wrap; }
  .legacy-contact-table-host { height: 300px; flex: 0 0 300px; overflow: auto; width: 100%; }
  .legacy-contact-preview-resizer { display: none; }
  .legacy-contact-preview { display: block; min-width: 0; overflow: hidden; }
  .legacy-preview-head { overflow-wrap: anywhere; }
  .legacy-preview-body { height: auto; max-height: none; min-width: 0; overflow: auto; overflow-wrap: anywhere; }
  .legacy-preview-body img { max-width: 100%; height: auto; }
  .legacy-preview-subject { white-space: normal; overflow-wrap: anywhere; }
  .legacy-preview-actions { flex-wrap: wrap; }
  .legacy-contact-body button, .legacy-contact-body select { min-height: 32px; }
  .legacy-company-dialog { min-width: 0; max-width: 100vw; }
  .legacy-company-dialog form { display: block; }
  .legacy-company-dialog form > * { margin-bottom: 10px; }
  .legacy-company-dialog input, .legacy-company-dialog select { min-height: 32px; }
  .legacy-company-dialog footer { position: sticky; bottom: 0; background: white; padding: 8px; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .classic-crm-shell .mail-detail-action-section .legacy-mail-action-strip,
  .mail-detail-wide .mail-detail-action-section .legacy-mail-action-strip {
    min-width: 0; width: 100%; flex-wrap: wrap; white-space: normal;
  }
  .classic-crm-shell .mail-detail-action-section { overflow: visible; }
  .classic-crm-shell .mail-detail-rich-body { height: auto; max-height: none; white-space: pre-wrap; overflow-wrap: anywhere; }
  .classic-crm-shell .legacy-mail-rich-body img { max-width: 100%; height: auto; }
  .legacy-company-table:has([data-company-contact-row]) { min-width: 0; display: block; }
  .legacy-company-table:has([data-company-contact-row]) thead { display: none; }
  .legacy-company-table:has([data-company-contact-row]) tbody { display: block; }
  [data-company-contact-row] { display: block; border-bottom: 2px solid #8fb5df; padding: 8px 0; }
  [data-company-contact-row] td { display: block; width: 100%; padding: 4px; }
  [data-company-contact-row] td::before { display: block; color: #034f91; margin-bottom: 3px; }
  [data-company-contact-row] td:nth-child(1)::before { content: '姓名'; }
  [data-company-contact-row] td:nth-child(2)::before { content: '职位'; }
  [data-company-contact-row] td:nth-child(3)::before { content: '邮箱'; }
  [data-company-contact-row] td:nth-child(4)::before { content: '电话'; }
  [data-company-contact-row] td:nth-child(5)::before { content: '手机'; }
  [data-company-contact-row] td:nth-child(6)::before { content: 'LinkedIn'; }
  [data-company-contact-row] td:nth-child(7)::before { content: 'Teams/Skype'; }
  [data-company-contact-row] input { width: 100%; min-width: 0; }
}
@media (max-width: 720px) {
  .legacy-company-contact-table [data-company-contact-row] td:nth-child(n) {
    width: 100%; height: auto; min-height: 60px; text-align: left;
  }
  .legacy-company-contact-table [data-company-contact-row] input { width: 100%; }
}
@media (max-width: 720px) {
  .classic-crm-shell .mail-compose-tools,
  .classic-crm-shell .mail-editor-toolbar {
    flex-wrap: wrap; height: auto; overflow: visible; white-space: normal; gap: 6px;
  }
  .classic-crm-shell .mail-compose-tool-field { max-width: 100%; height: auto; flex-wrap: wrap; }
  .classic-crm-shell .mail-compose-sender-field { width: 100%; }
  .classic-crm-shell .mail-compose-sender-field select { width: 100%; max-width: 100%; min-width: 0; }
}

.mobile-compose-controls { display: none; }
@media (max-width: 720px) {
  .classic-crm-shell:has(.legacy-mail-compose-page) .legacy-quickbar { display: none; }
  .classic-crm-shell:has(.legacy-mail-compose-page) .side-nav { max-height: 36px; }
  .classic-crm-shell:has(.legacy-mail-compose-page) .nav-button { min-height: 30px; padding-block: 3px; }
  .classic-crm-shell .legacy-mail-compose-page { grid-template-rows: 24px 25px minmax(0, 1fr); }
  .classic-crm-shell .mobile-compose-controls { display: flex; gap: 6px; padding: 3px 5px; flex: 0 0 auto; }
  .mobile-compose-controls button { border: 1px solid #aac4df; background: #f3f8fe; color: #034f91; min-height: 30px; padding: 3px 10px; }
  .mobile-compose-controls button[aria-expanded="true"] { background: #cde6fc; }
  .classic-crm-shell .legacy-mail-compose-page:not(.mobile-compose-options-open) .mail-compose-tools,
  .classic-crm-shell .legacy-mail-compose-page:not(.mobile-compose-format-open) .mail-editor-toolbar,
  .classic-crm-shell .legacy-mail-compose-page:not(.mobile-compose-attachments-open) .mail-compose-attachment-panel { display: none; }
  .classic-crm-shell .mail-compose-message-layout { display: block; overflow: auto; }
  .classic-crm-shell .mail-compose-main-column { display: flex; flex-direction: column; min-height: 100%; height: 100%; overflow: auto; }
  .classic-crm-shell .mail-compose-main-column > :not(.rich-mail-editor) { flex-shrink: 0; }
  .classic-crm-shell .mail-compose-main-column > .rich-mail-editor { flex: 1 0 240px; min-height: 240px; height: auto; font-size: 16px; line-height: 1.5; }
  .classic-crm-shell .mail-compose-attachment-panel { min-height: 180px; height: auto; max-height: 60vh; }
  .classic-crm-shell .mail-compose-header-table th,
  .classic-crm-shell .mail-compose-header-table td { height: 26px; padding: 1px 3px; }
  .classic-crm-shell .mail-compose-titlebar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.mobile-mail-expand { display: none; }
@media (max-width: 720px) {
  .mobile-mail-expand { display: inline-block; min-height: 30px; border: 1px solid #aac4df; background: #f3f8fe; color: #034f91; padding: 3px 8px; }
  .mail-detail-action-section:not(.mobile-mail-expanded) .legacy-mail-action-tool:not([data-mail-compose-mode="reply"]):not([data-mail-compose-mode="replyAll"]):not([data-mail-compose-mode="forward"]),
  .mail-detail-action-section:not(.mobile-mail-expanded) .legacy-mail-action-separator,
  .mail-info-section:not(.mobile-mail-expanded) .detail-fields { display: none; }
  .classic-crm-shell .mail-info-section h4 { display: none; }
}

/* Compact desktop chrome; retain readable labels and all actions. */
@media (min-width: 721px) {
  .classic-crm-shell .nav-button { min-height: 28px; padding-block: 2px; }
  .classic-crm-shell .nav-child { min-height: 25px; padding-block: 2px; }
  .classic-crm-shell .topbar { min-height: 29px; padding: 2px 6px; gap: 5px; }
  .classic-crm-shell .workspace-tabbar { height: 28px; }
  .classic-crm-shell .contact-workspace-tabs { padding-top: 1px; }
  .classic-crm-shell .contact-workspace-tab,
  .classic-crm-shell .contact-workspace-close { height: 25px; font-size: 13px; }
  .classic-crm-shell .contact-workspace-close { line-height: 21px; }
  .classic-crm-shell .contact-workspace-tab b,
  .classic-crm-shell .contact-workspace-tab small { font-size: 12px; }
  .classic-crm-shell .legacy-mail-action-tool,
  .mail-detail-wide .mail-detail-action-section .legacy-mail-action-tool {
    height: 28px; min-width: 0; flex-direction: row; gap: 4px; padding: 2px 6px; font-size: 12px; line-height: 18px;
  }
  .classic-crm-shell .legacy-mail-action-tool svg,
  .mail-detail-wide .mail-detail-action-section .legacy-mail-action-tool svg { width: 15px; height: 15px; }
  .classic-crm-shell .legacy-mail-action-strip { gap: 3px; }
  .classic-crm-shell .mail-detail-action-section { padding: 2px; }
  .classic-crm-shell .legacy-mail-compose-page { grid-template-rows: 25px 24px minmax(0, 1fr); }
  .classic-crm-shell .mail-compose-titlebar { padding-block: 1px; }
  .classic-crm-shell .mail-compose-tabs { padding-top: 1px; }
  .classic-crm-shell .mail-compose-tabs button { height: 22px; padding-block: 1px; }
  .classic-crm-shell .mail-compose-tools { padding-block: 2px; gap: 3px; }
  .classic-crm-shell .mail-editor-toolbar { height: 26px; min-height: 26px; padding-block: 1px; }
  .legacy-contact-body .legacy-contact-page { grid-template-rows: 44px minmax(0, 1fr); }
  .legacy-contact-title { font-size: 18px; padding-block: 2px; }
  .legacy-contact-title .legacy-title-icon { width: 24px; height: 22px; flex-basis: 24px; }
}
.recipient-step { padding: 10px; color: #345d83; background: #eef6ff; }
.recipient-company-choice { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; padding: 10px; border: 0; border-bottom: 1px solid #bfd4e8; background: white; color: #034f91; white-space: normal; overflow-wrap: anywhere; }
.recipient-company-choice:hover { background: #e5f2ff; }
.recipient-company-choice span { font-size: 12px; }
.recipient-contact-choice { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #bfd4e8; cursor: pointer; }
.recipient-contact-choice > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.recipient-contact-choice input { flex: 0 0 auto; width: 18px; height: 18px; }
.recipient-company-pages { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px; }
.mail-recipient-dialog { grid-template-rows: auto auto minmax(0, 1fr); }
.mail-recipient-search { flex-wrap: wrap; }
.mail-recipient-search input { min-width: 120px; }
@media (max-width: 720px) {
  .mail-recipient-picker { padding: 0; }
  .mail-recipient-dialog { width: 100%; height: 100dvh; max-height: 100dvh; }
  .mail-recipient-dialog header { min-height: 38px; }
  .mail-recipient-search input { flex-basis: 50%; }
  .mail-recipient-dialog button { min-height: 32px; }
}

.mail-essential-info { display: flex; flex-wrap: wrap; gap: 3px 12px; min-width: 0; font-size: 12px; line-height: 20px; }
.mail-essential-info > span { overflow-wrap: anywhere; }
.mail-info-heading:empty { display: none; }
@media (min-width: 721px) {
  .mail-info-section { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding-block: 3px; }
  .mail-info-section > .mobile-mail-expand { display: inline-block; flex: 0 0 auto; border: 1px solid #aac4df; background: #f3f8fe; color: #034f91; padding: 2px 6px; min-height: 24px; font-size: 12px; }
  .mail-essential-info { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 3px 12px; min-width: 0; font-size: 12px; line-height: 20px; }
  .mail-essential-info > span { overflow-wrap: anywhere; }
  .mail-info-section:not(.mobile-mail-expanded) > .detail-fields { display: none; }
  .mail-info-section > .detail-fields { flex-basis: 100%; margin: 2px 0; }
  .mail-info-section .mail-info-heading { margin: 0; min-width: 0; }
  .mail-info-section .mail-info-heading:not(:has(.mail-inline-attachments)) { display: none; }
  .mail-info-section .mail-inline-attachments,
  .mail-info-section .mail-inline-attachment-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12px; }
  .mail-info-section .mail-inline-attachment-list a { overflow-wrap: anywhere; }
  .contact-workspace-mail-head > .detail-meta { display: none; }
  .contact-workspace-mail-body .mail-body-section > h4,
  .mail-detail-wide .mail-body-section > h4 { display: none; }
  .contact-workspace-mail-body .mail-body-section,
  .mail-detail-wide .mail-body-section { margin-top: 0; padding-top: 0; }
  .contact-workspace-mail-body .mail-detail-action-section .legacy-mail-action-strip { flex-wrap: nowrap; min-width: max-content; }
  .contact-workspace-mail-body .mail-detail-action-section { overflow-x: auto; margin-bottom: 2px; }
  .contact-workspace-mail-body { display: flex; flex-direction: column; }
  .contact-workspace-mail-body > .detail-section { flex-shrink: 0; }
  .contact-workspace-mail-body > .mail-body-section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 160px; margin-bottom: 0; }
  .contact-workspace-mail-body .mail-body-section > .detail-text { flex: 1 1 0; min-height: 0; max-height: none; }
}
@media (max-width: 720px) {
  .mail-detail-action-section:not(.mobile-mail-expanded) .legacy-mail-action-tool[data-detail-type] { display: inline-flex; }
  .mail-info-section .mail-info-heading:not(:has(.mail-inline-attachments)) { display: none; }
}
.menu-language-picker { display: flex; flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 11px; color: #315b80; }
.menu-language-picker select { width: 100%; min-height: 28px; border: 1px solid #9fc1e5; background: #fff; color: #034f91; }
@media (max-width: 720px) {
  .menu-language-picker { flex: 0 0 auto; width: 90px; padding: 2px 4px; }
  .menu-language-picker > span { display: none; }
}html[data-menu-language="en"] .classic-crm-shell .nav-button span,
html[data-menu-language="en"] .classic-crm-shell .nav-child span:last-child { white-space: normal; overflow-wrap: anywhere; word-break: normal; text-overflow: clip; font-size: 12px; }
html[data-menu-language="en"] .legacy-mail-action-tool { max-width: none; }
html[data-menu-language="en"] .legacy-mail-action-tool span { max-width: none; }@media (max-width: 720px) {
  .classic-crm-shell .side-nav,
  .app-shell.legacy-customer-shell.classic-crm-shell .side-nav,
  .app-shell.legacy-mail-shell.classic-crm-shell .side-nav { grid-template-columns: 42px minmax(0, 1fr) 80px; }
  .menu-language-picker { width: 80px; grid-column: 3; grid-row: 1; }
}.sms-inbox { padding: 10px; max-width: 1100px; margin: 0 auto; }
.sms-inbox h3 { margin: 0 0 6px; }
.sms-inbox .toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.sms-inbox .toolbar input { min-width: 130px; flex: 1; }
.sms-inbox-message { background: #fff; border: 1px solid #b8d0e7; border-radius: 4px; padding: 10px; margin: 8px 0; }
.sms-inbox-message header { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #315b80; }
.sms-inbox-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.sms-inbox-pages { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px; }.dashboard-sms { margin-bottom: 8px; flex-shrink: 0; }
.dashboard-sms .widget-head h3 { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-sms .widget-head small { font-size: 12px; font-weight: normal; }
.dashboard-sms-items { max-height: 260px; overflow: auto; }
.dashboard-sms-item { padding: 7px 10px; border-bottom: 1px solid #d5e3f0; }
.dashboard-sms-item header { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #315b80; font-size: 12px; }
.dashboard-sms-item p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }.staff-sms-form { display: grid; gap: 12px; max-width: 680px; }
.staff-sms-form label { display: grid; gap: 5px; }
.staff-sms-form input, .staff-sms-form textarea { width: 100%; padding: 8px; font: inherit; box-sizing: border-box; }
.staff-sms-form button { justify-self: start; min-height: 34px; padding: 5px 18px; }.dashboard-sms-item[role="button"] { cursor: pointer; }
.dashboard-sms-item[role="button"]:hover { background: #edf6ff; }
.dashboard-sms-item[role="button"]:focus-visible { outline: 2px solid #1671b7; outline-offset: -2px; }
.received-sms-dialog { box-sizing: border-box; width: min(640px, calc(100vw - 24px)); max-height: 85dvh; overflow: auto; border: 1px solid #8db4dd; border-radius: 6px; padding: 16px; color: #17334e; }
.received-sms-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.received-sms-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.received-sms-dialog h3 { margin: 0; }
.received-sms-dialog button { min-height: 32px; padding: 4px 12px; }
.received-sms-dialog dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 13px; }
.received-sms-dialog dd { margin: 0; overflow-wrap: anywhere; }
.received-sms-content { white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid #d5e3f0; padding-top: 12px; line-height: 1.6; }