.contacts-b {
  margin: 20px 27px 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.contacts-b-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  padding: 27px 30px;
  border: 1px solid #e1eaf1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px #173e620b;
}
.contacts-b-hero > div { max-width: 680px; }
.contacts-b-hero h2 { margin: 7px 0 8px; color: #183047; font-size: 28px; line-height: 1.08; letter-spacing: -.04em; }
.contacts-b-hero p { margin: 0; color: #6d7f90; font-size: 13px; line-height: 1.5; }
.contacts-b-hero .button { padding: 11px 15px; font-size: 12px; }

.contacts-pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 120px)) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 15px;
  background: #173e62;
  color: #fff;
}
.contacts-pulse > div { padding: 8px 10px; border-radius: 10px; background: #ffffff12; text-align: center; }
.contacts-pulse strong { display: block; font-size: 20px; line-height: 1; }
.contacts-pulse span { display: block; margin-top: 5px; color: #c4d5e2; font-size: 8px; }
.contacts-pulse p { margin: 0; padding: 0 12px; color: #d5e2ec; font-size: 10px; line-height: 1.45; text-align: right; }

.contacts-search-wrap {
  margin-top: 14px;
  padding: 15px 18px;
  border: 1px solid #e1eaf1;
  border-radius: 16px;
  background: #fff;
}
.contacts-search-wrap > label { display: block; margin: 0 0 7px; color: #8495a4; font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.contacts-search-wrap > div { position: relative; max-width: 520px; }
.contacts-search-wrap > div > span { position: absolute; left: 12px; top: 50%; color: #7890a3; font-size: 17px; transform: translateY(-52%); }
.contacts-b .contacts-search-wrap input[type="search"] { width: 100%; max-width: none; margin: 0; padding: 10px 12px 10px 37px; border-color: #d9e3eb; border-radius: 11px; background: #f8fafb; font-size: 12px; }

.contacts-b .contact-grid { grid-template-columns: minmax(230px, .72fr) minmax(0, 1.55fr); gap: 14px; margin-top: 14px; }
.contacts-list-panel, .contacts-b .contact-detail {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e1eaf1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 9px 25px #173e620a;
}
.contacts-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.contacts-b-kicker { display: block; margin-bottom: 4px; color: #8495a4; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.contacts-panel-head h3 { margin: 0; color: #183047; font-size: 16px; letter-spacing: -.02em; }
.contacts-panel-head > span { color: #8493a0; font-size: 9px; }
.contacts-panel-head > span strong { color: #315e8f; font-size: 11px; }
.contacts-b .contact-list { gap: 6px; max-height: 68vh; padding-right: 3px; }
.contacts-b .contact-list-item { padding: 11px 12px; border-color: #e2e9ef; border-radius: 11px; }
.contacts-b .contact-list-item:hover { border-color: #c5d7e5; background: #f3f7fa; }
.contacts-b .contact-list-item.active { border-color: #a8c7dd; background: #e8f1f7; box-shadow: inset 3px 0 0 #315e8f; }
.contacts-b .contact-list-item strong { color: #294861; font-size: 12px; }
.contacts-b .contact-list-item small { margin-top: 3px; color: #7a8b99; font-size: 9px; }

.contacts-b .contact-detail { min-height: 330px; background: #fbfcfd; }
.contacts-b .contact-detail > h3 { color: #183047; font-size: 21px; letter-spacing: -.025em; }
.contacts-b .contact-detail > .muted { color: #718391; font-size: 11px; }
.contacts-b .contact-info { gap: 6px; padding: 12px; border-radius: 12px; background: #fff; }
.contacts-b .contact-info-row { grid-template-columns: 68px minmax(0, 1fr); font-size: 11px; }
.contacts-b .contact-info-row strong { color: #728392; font-size: 10px; }
.contacts-b .contact-section { margin-top: 14px; padding-top: 14px; border-color: #e4eaf0; }
.contacts-b .contact-section h4 { margin-bottom: 9px; color: #294861; font-size: 13px; }
.contacts-b .contact-row, .contacts-b .contact-note { margin: 5px 0; padding: 10px 11px; border-color: #e2e9ef; border-radius: 10px; }
.contacts-b .contact-row strong { font-size: 11px; }
.contacts-b .contact-row small, .contacts-b .contact-note small { margin-top: 3px; font-size: 9px; }
.contacts-b .contact-note-preview { color: #526b80; font-size: 11px; }
.contacts-b .contact-note-form textarea { min-height: 70px; margin: 10px 0 7px; padding: 10px; border-color: #d9e3eb; background: #fff; font-size: 11px; }
.contacts-b .contact-note-form .button { padding: 8px 11px; font-size: 10px; }
.contact-note-form-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.contact-activity-row { width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: center; margin: 0; padding: 7px 2px; border: 0; border-bottom: 1px solid #e7ecef; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.contact-activity-row:last-child { border-bottom: 0; }
.contact-activity-row:hover { background: #f1f5f7; }
.contact-activity-row:focus-visible { outline: 3px solid #eaa93b; outline-offset: 2px; }
.contact-activity-status { width: 16px; color: #2d9b62; font: 700 18px/15px system-ui; text-align: center; }
.contact-activity-copy { min-width: 0; }
.contact-activity-copy strong, .contact-activity-copy small { display: inline; font-size: 10px; line-height: 1.35; }
.contact-activity-copy strong { color: #324b60; font-weight: 700; }
.contact-activity-copy small { margin-left: 6px; color: #7b8994; }
.contact-activity-row.done .contact-activity-copy strong, .contact-activity-row.done .contact-activity-copy small { color: #95a0a8; }
.contacts-b .contact-detail > .muted:only-child { padding: 70px 20px; text-align: center; }

@media (max-width: 1100px) {
  .contacts-b { margin: 18px 15px 0; }
  .contacts-pulse { grid-template-columns: repeat(3, minmax(80px, 100px)) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .contacts-pulse { grid-template-columns: repeat(3, 1fr); }
  .contacts-pulse p { grid-column: 1 / -1; padding: 6px 4px 2px; text-align: left; }
  .contacts-b .contact-grid { grid-template-columns: 1fr; }
  .contacts-b .contact-list { max-height: 280px; }
}
@media (max-width: 650px) {
  .contacts-b { margin: 14px 2px 0; }
  .contacts-b-hero { align-items: stretch; flex-direction: column; gap: 18px; padding: 22px 19px; border-radius: 18px; }
  .contacts-b-hero .button { width: 100%; }
  .contacts-search-wrap { padding: 14px; }
  .contacts-list-panel, .contacts-b .contact-detail { padding: 15px; border-radius: 16px; }
}