:root {
  --bg: #f4f5f8;
  --surface: #fff;
  --surface2: #f1f3f6;
  --surface3: #e7eaef;
  --border: #dde1e7;
  --border2: #c7cdd6;
  --text: #14171c;
  --muted: #666f7d;
  --faint: #96a0ad;
  --accent: #0d6b76;
  --accent-soft: #e3f1f3;
  --accent-bd: #b0d6db;
  --ok: #0c7146;
  --ok-soft: #e3f3eb;
  --ok-bd: #b9dfcd;
  --warn: #8f5508;
  --warn-soft: #fbf2df;
  --warn-bd: #ecdab2;
  --bad: #a92218;
  --bad-soft: #fde8e6;
  --bad-bd: #f1c2bd;
  --info: #0e5c86;
  --info-soft: #e4f0f8;
  --info-bd: #b6d8e9;
  --pur: #6b3fa0;
  --pur-soft: #f0e9f9;
  --pur-bd: #d5c3ec;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sh: 0 1px 2px rgba(20, 26, 34, .06);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e1015;
  --surface: #161920;
  --surface2: #1c2029;
  --surface3: #242933;
  --border: #292e39;
  --border2: #39404e;
  --text: #e5e8ee;
  --muted: #96a0af;
  --faint: #6a7484;
  --accent: #4fb6c2;
  --accent-soft: #0e2a2e;
  --accent-bd: #215158;
  --ok: #5bc899;
  --ok-soft: #11281e;
  --ok-bd: #23553e;
  --warn: #dfae5f;
  --warn-soft: #292012;
  --warn-bd: #58451f;
  --bad: #ef7f77;
  --bad-soft: #2b1513;
  --bad-bd: #5d2a25;
  --info: #6bb5dd;
  --info-soft: #11232d;
  --info-bd: #244f65;
  --pur: #b494e0;
  --pur-soft: #211a2e;
  --pur-bd: #453257;
  --sh: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

.app {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.brand {
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.blogo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0d6b76, #1397a6);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

.brand b {
  display: block;
  font-size: 14px;
  letter-spacing: -.2px;
  line-height: 1.2;
}

.brand span {
  display: block;
  font-size: 11px;
  color: var(--faint);
  margin-top: 2px;
}

.sidefoot {
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sidefoot form {
  margin: 0;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 11px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
}

.top h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.25px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.top .sub {
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 1px;
}

.spacer {
  flex: 1;
}

.wrap {
  padding: 20px 24px 70px;
  max-width: 1420px;
  width: 100%;
}

.wrap:has(#import-app) {
  max-width: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--sh);
}

.card > h3 {
  margin: 0;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card > h3 .hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--faint);
  font-weight: 400;
  display: flex;
  gap: 6px;
  align-items: center;
}

.pad {
  padding: 15px;
}

.grid {
  display: grid;
  gap: 13px;
}

.g5 { grid-template-columns: repeat(5, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g21 { grid-template-columns: 2fr 1fr; }
.g12 { grid-template-columns: 1fr 2fr; }

@media (max-width: 1180px) {
  .g5,
  .g4 { grid-template-columns: repeat(2, 1fr); }

  .g3,
  .g2,
  .g21,
  .g12 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; }
  .g5,
  .g4 { grid-template-columns: 1fr; }
}

.kpi { padding: 13px 15px; }

.kpi .lbl {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.kpi .val {
  font-size: 22px;
  font-weight: 650;
  margin-top: 5px;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}

.kpi .dlt {
  font-size: 11.5px;
  margin-top: 3px;
  color: var(--faint);
}

.kpi .dlt.is-bad {
  color: var(--bad);
}

.kpi.is-stub .val {
  color: var(--faint);
}

.desk-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.desk-line:last-of-type {
  border-bottom: 0;
}

.desk-line-body {
  flex: 1;
  min-width: 0;
}

.desk-line-title {
  font-size: 12.5px;
  font-weight: 600;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.switch input:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  color: var(--muted);
  background: var(--surface2);
  white-space: nowrap;
}

.tag.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-bd); }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-bd); }
.tag.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-bd); }
.tag.info { background: var(--info-soft); color: var(--info); border-color: var(--info-bd); }
.tag.acc { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-bd); }
.tag.pur { background: var(--pur-soft); color: var(--pur); border-color: var(--pur-bd); }
.tag.xs { font-size: 10px; padding: 1px 6px; }

a.btn,
button.btn,
span.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

a.btn:hover,
button.btn:hover,
span.btn:hover {
  background: var(--surface2);
}

a.btn.pri,
button.btn.pri {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

a.btn.pri:hover,
button.btn.pri:hover {
  filter: brightness(1.09);
}

a.btn.sm,
button.btn.sm,
span.btn.sm {
  padding: 3px 9px;
  font-size: 11.5px;
}

a.btn.on,
button.btn.on {
  background: var(--accent-soft);
  border-color: var(--accent-bd);
  color: var(--accent-text);
  font-weight: 600;
}

button.btn.thm {
  min-width: 104px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.tblwrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--faint);
  font-weight: 700;
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
}

th .sort-link {
  color: inherit;
  text-decoration: none;
}

th .sort-link:hover,
th .sort-link.on {
  color: var(--text);
}

td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr.clk { cursor: pointer; }
tbody tr.clk:hover { background: var(--surface2); }
tbody tr.clk.on { background: var(--accent-soft); }

.pf-layout {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.pf-layout > .card > h3 .btn {
  margin-left: auto;
  flex: none;
}

.pf-layout .pf-create {
  max-width: 560px;
}

.pf-layout .pf-detail {
  margin-top: 13px;
}

.import-page {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
}

.import-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 22px;
}

.import-field.is-wide,
.import-fio-grid {
  grid-column: 1 / -1;
}

.import-fio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 22px;
}

@media (max-width: 1180px) {
  .import-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .import-fields,
  .import-fio-grid {
    grid-template-columns: 1fr;
  }
}

.import-optional-wrap {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.import-optional {
  margin-top: 14px;
}

.import-toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.import-toggle:hover {
  text-decoration: underline;
}

.import-banner {
  margin: 0 15px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

.import-banner.is-bad {
  background: var(--bad-soft);
  border: 1px solid var(--bad-bd);
  color: var(--bad);
}

.import-banner.is-ok {
  background: var(--ok-soft);
  border: 1px solid var(--ok-bd);
  color: var(--ok);
}

#import-preview > h3 .hint {
  margin-left: 8px;
}

#import-preview > h3 .btn {
  margin-left: auto;
}

#import-preview tr.is-bad td {
  background: var(--bad-soft);
}

.c-sel-empty {
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--faint);
}

.import-layout {
  align-items: start;
}

.import-layout > .card {
  min-width: 0;
}

.import-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.import-field-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.import-field .sel,
.import-field .c-sel {
  width: 100%;
  min-width: 0;
}

#import-mapping.pad {
  padding: 20px 22px 22px;
}

.import-file {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.import-file-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
}

.import-file-pick:hover {
  border-color: var(--muted);
}

.import-file-pick:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.import-file-pick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.import-file-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-file-pick:has(input[type="file"]:valid) .import-file-name {
  color: var(--text);
}

.import-phones {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.import-check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  word-break: break-word;
}

.form-stack .import-file-pick {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 12.5px;
}

.form-stack .import-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 12.5px;
}

.import-check:last-child {
  border-bottom: 0;
}

.import-check:hover {
  background: var(--surface2);
}

.import-check:has(input:checked) {
  background: var(--accent-soft);
}

.import-check input {
  margin-top: 2px;
}

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

.import-errors {
  margin: 0;
  padding: 10px 15px 0 32px;
  color: var(--bad);
  font-size: 12.5px;
}

.import-skip {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 15px 12px;
  font-size: 12.5px;
}

.import-row-error {
  color: var(--bad);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  max-width: 280px;
}

#import-app .tblwrap td {
  vertical-align: top;
}

.pf-layout #portfolio-editor-panel > h3 .btn,
.pf-layout #portfolio-debtors > h3 .btn {
  margin-left: auto;
  flex: none;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Номера телефонов, паспорт, id — тем же шрифтом, табличными цифрами. */
.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.mut { color: var(--muted); }
.fnt { color: var(--faint); font-size: 12px; }
.nw { white-space: nowrap; }

.bar {
  height: 5px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.bar > i.ok { background: var(--ok); }
.bar > i.warn { background: var(--warn); }
.bar > i.bad { background: var(--bad); }

.note {
  border: 1px dashed var(--accent-bd);
  background: var(--accent-soft);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 13px;
}

.note > b:first-child {
  color: var(--accent-text);
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 3px;
}

.note code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

body:not(.shownotes) .note {
  display: none;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.switch input {
  appearance: none;
  width: 31px;
  height: 17px;
  border-radius: 20px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  position: relative;
  cursor: pointer;
  transition: .15s;
  flex: none;
}

.switch input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.switch input::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: .15s;
}

.switch input:checked::after {
  left: 15px;
}

/* Обёрнуто в :where — нулевой вес: чипы и тумблеры, прячущие input, перекрывают это правило. */
:where(label:not(.switch) > input[type="checkbox"]) {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  border: 1px solid var(--border2);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background .12s, border-color .12s;
}

:where(label:not(.switch) > input[type="checkbox"]):hover {
  border-color: var(--accent);
}

:where(label:not(.switch) > input[type="checkbox"]):checked {
  background: var(--accent);
  border-color: var(--accent);
}

:where(label:not(.switch) > input[type="checkbox"]):checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

:where(label:not(.switch) > input[type="checkbox"]):disabled {
  opacity: .45;
  cursor: not-allowed;
}

:where(label:not(.switch) > input[type="checkbox"]):focus-visible {
  outline: 2px solid var(--accent-bd);
  outline-offset: 1px;
}

select.sel,
input.inp {
  background-color: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}

select.sel {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a93a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.4L6 8.1l3.5-3.7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
  cursor: pointer;
  text-overflow: ellipsis;
}

select.sel option {
  background-color: var(--surface);
  color: var(--text);
}

input.inp {
  min-width: 200px;
}

select.sel:hover,
input.inp:hover {
  border-color: var(--muted);
}

input.inp:focus,
select.sel:focus,
.c-sel-btn:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.c-sel {
  position: relative;
  width: 100%;
  min-width: 0;
}

.c-sel-btn {
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  text-align: left;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a93a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.4L6 8.1l3.5-3.7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  border: 1px solid var(--border2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 7px 30px 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.c-sel-btn:hover {
  border-color: var(--muted);
}

.c-sel.is-open .c-sel-btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.c-sel-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-sel:has(input[value=""]) .c-sel-label {
  color: var(--muted);
}

.c-sel-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 260px;
  overflow: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.c-sel-opt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-sel-opt:hover {
  background: var(--surface2);
}

.c-sel-opt.is-on,
.c-sel-opt.is-on:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.c-sel-opt.is-empty {
  color: var(--muted);
}

.c-sel-opt.is-empty.is-on {
  color: var(--accent-text);
}

.c-sel-opt.is-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.c-sel-opt.is-check.is-on,
.c-sel-opt.is-check.is-on:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.c-sel-tick {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1px solid var(--border2);
  border-radius: 4px;
  background: var(--surface);
  position: relative;
}

.c-sel-opt.is-on .c-sel-tick {
  background: var(--accent);
  border-color: var(--accent);
}

.c-sel-opt.is-on .c-sel-tick::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tl {
  position: relative;
  padding-left: 20px;
}

.tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}

.ev {
  position: relative;
  padding: 0 0 15px;
}

.ev::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border2);
}

.ev.k-pay::before { border-color: var(--ok); background: var(--ok); }
.ev.k-call::before { border-color: var(--info); }
.ev.k-sys::before { border-color: var(--accent); }
.ev.k-risk::before { border-color: var(--bad); background: var(--bad); }
.ev.is-comment::before { border-color: var(--accent); background: var(--accent-soft); }

.ev .eh {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.ev .et { font-weight: 600; font-size: 12.5px; }
.ev .ed { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ev .eb { font-size: 12px; color: var(--muted); margin-top: 2px; }

.debtor-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.debtor-comments.has-form {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.comment-item {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
  padding: 10px 12px;
}

.comment-item.mine {
  border-color: var(--accent-bd);
  background: var(--accent-soft);
}

.comment-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.comment-author {
  font-size: 12.5px;
  font-weight: 600;
}

.comment-time {
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.comment-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-feed-body {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.ev .em {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  margin-top: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  overflow-x: auto;
  white-space: pre;
}

.kv {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 7px 13px;
  font-size: 12.5px;
}

.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--faint);
  margin-bottom: 11px;
}

.crumb button,
.crumb a {
  background: none;
  border: 0;
  color: var(--accent-text);
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.empty {
  padding: 34px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}

.hr {
  height: 1px;
  background: var(--border);
  margin: 13px 0;
}

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

.check-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}

.check-toggle[hidden] {
  display: none;
}

.org-nav-toggle {
  padding: 8px 16px 0;
}

.fbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.tabs {
  display: flex;
  gap: 3px;
  border-bottom: 1px solid var(--border);
  padding: 0 15px;
  overflow-x: auto;
  background: var(--surface);
}

.tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
}

.tabs button:hover { color: var(--text); }

.tabs button.on {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tabs button .b {
  font-size: 10.5px;
  background: var(--surface3);
  padding: 1px 6px;
  border-radius: 9px;
  margin-left: 5px;
}

.ep {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.ep:last-child { border-bottom: 0; }

.ep .m {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  flex: none;
  min-width: 50px;
  text-align: center;
}

.ep .m.get { background: var(--info-soft); color: var(--info); }
.ep .m.post { background: var(--ok-soft); color: var(--ok); }
.ep .p { font-family: var(--mono); font-size: 12px; }
.ep .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.mask {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 22, .55);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 18px;
  overflow-y: auto;
}

.mask[hidden] { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 760px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .3);
}

.modal > header {
  padding: 14px 17px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal > header b { font-size: 14px; }

.modal > header .x {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.modal .body {
  padding: 16px 17px;
  max-height: 66vh;
  overflow-y: auto;
}

.msg {
  display: flex;
  gap: 9px;
  margin-bottom: 11px;
  align-items: flex-start;
}

.msg .av {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.msg.r .av { background: var(--accent); }
.msg.h .av { background: #5f6b76; }

.msg .bub {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12.5px;
  max-width: 78%;
}

.msg.r .bub {
  background: var(--accent-soft);
  border-color: var(--accent-bd);
}

.msg .tm {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

mark {
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 3px;
  padding: 0 2px;
}

.spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 38px;
}

.spark i {
  flex: 1;
  background: var(--accent-bd);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.spark i.hi { background: var(--accent); }

.cols {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 150px;
  padding-top: 10px;
}

.cols .c {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  height: 100%;
}

.cols .c .st {
  width: 100%;
  border-radius: 3px 3px 0 0;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}

.cols .c .st i {
  display: block;
  width: 100%;
}

.cols .c .lb {
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}

.lgd {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 11px;
}

.lgd span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lgd i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: block;
}

.own {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.own.crm { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-bd); }
.own.robot { background: var(--info-soft); color: var(--info); border: 1px solid var(--info-bd); }
.own.split { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-bd); }
.own.cloud { background: var(--surface2); color: var(--faint); border: 1px solid var(--border2); }

.gauge {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--surface3);
  border-radius: 4px;
  overflow: hidden;
}

.gauge i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
}

.stars {
  color: var(--warn);
  letter-spacing: 1px;
  font-size: 13px;
}

.pg {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 10px 15px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--faint);
}

body.login-body {
  display: grid;
  place-items: center;
}

.login-card {
  width: min(420px, calc(100vw - 32px));
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 18px;
}

.login-card .sub {
  margin-bottom: 16px;
}

.login-domain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  text-align: center;
}

.login-orgs {
  margin-top: -6px;
  font-size: 12.5px;
}

.login-alt {
  margin: 14px 0 0;
  font-size: 13px;
}

/* Сложность пароля: 4 ячейки, закрашиваются по уровню. */
.pw-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 14px;
}

.pw-meter-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  flex: 1;
}

.pw-meter-cells i {
  height: 6px;
  border-radius: 2px;
  background: var(--border);
}

.pw-meter-text {
  min-width: 64px;
  font-size: 11.5px;
  text-align: right;
}

.pw-meter[data-level="1"] i:nth-child(-n+1) { background: var(--bad); }
.pw-meter[data-level="2"] i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-level="3"] i:nth-child(-n+3) { background: var(--ok); }
.pw-meter[data-level="4"] i:nth-child(-n+4) { background: var(--ok); }
.pw-meter[data-level="1"] .pw-meter-text { color: var(--bad); }
.pw-meter[data-level="2"] .pw-meter-text { color: var(--warn); }
.pw-meter[data-level="3"] .pw-meter-text,
.pw-meter[data-level="4"] .pw-meter-text { color: var(--ok); }

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-stack > .note {
  margin-bottom: 0;
}

.form-stack label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.form-stack .inp,
.form-stack .sel {
  width: 100%;
  min-width: 0;
}

.form-stack .roles-editor-bar {
  padding: 6px 0 0;
}

.form-stack .kv {
  margin: 0 0 4px;
}

.form-stack > p.fnt {
  margin: 4px 0 0;
}

.robot-layout {
  max-width: 560px;
}

.exchange-page {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.form-error,
.flash-bad {
  color: var(--bad);
  font-size: 12.5px;
}

.flash-ok {
  color: var(--ok);
  font-size: 12.5px;
  margin-bottom: 12px;
}

.flash-warn {
  color: var(--warn);
  font-size: 12.5px;
  margin-bottom: 12px;
}

.perm-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 15px;
}

/* роли и доступы */
#roles-flash,
#org-flash,
#trunks-flash,
#portfolios-flash,
#import-flash,
#robot-flash,
#exchange-flash {
  margin-bottom: 12px;
}

#roles-app.is-busy,
#org-app.is-busy,
#trunks-app.is-busy,
#portfolios-app.is-busy,
#debtors-app.is-busy,
#import-app.is-busy,
#robot-app.is-busy,
#exchange-app.is-busy {
  opacity: .65;
  pointer-events: none;
}

.roles-layout,
.org-layout,
.trunks-layout,
.exchange-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.roles-nav > h3 .hint,
.org-nav > h3 .hint,
.trunks-nav > h3 .hint {
  margin-left: 0;
}

.roles-nav > h3 .btn,
.org-nav > h3 .btn,
.trunks-nav > h3 .btn {
  margin-left: auto;
  flex: none;
}

#exchange-journal > h3 .btn {
  flex: none;
}

.roles-nav-list,
.org-nav-list,
.trunks-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  max-height: calc(100vh - 240px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.roles-nav-list::-webkit-scrollbar,
.org-nav-list::-webkit-scrollbar,
.trunks-nav-list::-webkit-scrollbar {
  width: 8px;
}

.roles-nav-list::-webkit-scrollbar-track,
.org-nav-list::-webkit-scrollbar-track,
.trunks-nav-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}

.roles-nav-list::-webkit-scrollbar-thumb,
.org-nav-list::-webkit-scrollbar-thumb,
.trunks-nav-list::-webkit-scrollbar-thumb {
  background-color: var(--border2);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}

.roles-nav-list::-webkit-scrollbar-thumb:hover,
.org-nav-list::-webkit-scrollbar-thumb:hover,
.trunks-nav-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--faint);
}

.roles-nav-item,
.org-nav-item,
.trunks-nav-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--text);
}

.roles-nav-item:hover,
.org-nav-item:hover,
.trunks-nav-item:hover {
  background: var(--surface2);
}

.roles-nav-item.on,
.org-nav-item.on,
.trunks-nav-item.on {
  background: var(--accent-soft);
  color: var(--text);
}

.roles-nav-title,
.org-nav-title,
.trunks-nav-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
}

.roles-nav-meta,
.org-nav-meta,
.trunks-nav-meta {
  font-size: 11.5px;
  color: var(--faint);
}

.roles-nav-item.on .roles-nav-meta,
.org-nav-item.on .org-nav-meta,
.trunks-nav-item.on .trunks-nav-meta {
  color: var(--accent-text);
}

.roles-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}

.roles-scope-actions {
  display: flex;
  gap: 6px;
}

.roles-scope {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}

.roles-scope + .roles-scope {
  margin-top: 8px;
}

.roles-scope input {
  margin-top: 2px;
}

.roles-scope:hover {
  background: var(--surface2);
}

.roles-scope:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent-bd);
}

.roles-scope.is-locked,
.roles-scope.is-locked:hover {
  cursor: not-allowed;
  background: var(--surface2);
  border-color: var(--border);
}

.roles-scope-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.roles-scope-note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--faint);
  font-weight: 400;
}

.roles-editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 15px 15px;
}

.roles-bar-hint {
  flex: 1 1 180px;
  font-size: 12px;
  color: var(--faint);
}

.roles-delete {
  margin: 0 0 0 auto;
  padding: 0;
}

button.btn.danger {
  color: var(--bad);
  border-color: var(--bad-bd);
}

button.btn.danger:hover {
  background: var(--bad-soft);
}

.org-nav-item.is-off {
  opacity: .7;
}

.org-head {
  margin-bottom: 13px;
}

.org-head-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 15px;
}

.org-head-form .form-error {
  flex: 1 1 100%;
}

.org-head-name {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.org-head-name .inp {
  height: 34px;
  min-width: 0;
}

.org-head-form .kv {
  flex: 1 1 220px;
  margin: 0;
}

.org-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.org-head-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
  align-self: center;
}

#org-app .btn {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
  line-height: 1;
}

.org-code-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--accent-bd);
  background: var(--accent-soft);
  flex-shrink: 0;
}

.org-code-top span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.org-code-top code {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--text);
}

.org-code {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}

.org-code-label {
  font-size: 12px;
  color: var(--muted);
}

.org-code-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  height: 34px;
  padding: 0 10px 0 12px;
  border-radius: 8px;
  border: 1px solid var(--accent-bd);
  background: var(--accent-soft);
  color: var(--accent-text);
  cursor: pointer;
  font: inherit;
}

.org-code-text {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--text);
}

.org-code-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
}

.org-code-value:hover {
  border-color: var(--accent);
}

.org-code-value.is-copied {
  border-color: var(--ok-bd);
  background: var(--ok-soft);
}

.org-code-value.is-copied .org-code-hint {
  color: var(--ok);
}

.org-editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.org-flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}

.org-flag input {
  margin-top: 2px;
}

.org-flag:hover {
  background: var(--surface2);
}

.org-flag.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-bd);
}

.org-flag:has(input:disabled) {
  cursor: not-allowed;
}

.org-flag:has(input:disabled):hover {
  background: var(--surface2);
}

.org-flag.is-on:has(input:disabled) {
  background: var(--surface2);
  border-color: var(--border);
}

.org-flag-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.org-flag-note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--faint);
  font-weight: 400;
}

.org-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.org-group > legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.org-group .kv {
  margin: 0;
}

.org-done-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 14, 22, .45);
  animation: org-done-fade .15s ease-out;
}

.org-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  padding: 26px 22px 20px;
  border: 1px solid var(--ok-bd);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .3);
  text-align: center;
  animation: org-done-pop .18s ease-out;
}

.org-done-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 26px;
  font-weight: 700;
}

.org-done > b {
  font-size: 17px;
}

.org-done p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.org-done .org-done-login b {
  color: var(--text);
  font-family: var(--mono);
}

.org-done-warn {
  margin: 4px 0 0;
  padding: 8px 12px 8px 26px;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12.5px;
  text-align: left;
}

.org-done .btn {
  margin-top: 10px;
  min-width: 140px;
}

@keyframes org-done-fade {
  from { opacity: 0; }
}

@keyframes org-done-pop {
  from { opacity: 0; transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .org-done-mask,
  .org-done {
    animation: none;
  }
}

.org-name-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px) {
  .org-name-row {
    grid-template-columns: 1fr;
  }
}

.org-signature {
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface2);
  text-align: center;
}

.org-signature img {
  max-width: 100%;
  max-height: 120px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.contact-form textarea.inp {
  width: 100%;
  min-width: 0;
  resize: vertical;
  min-height: 72px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 10px;
}

textarea.inp {
  width: 100%;
  min-width: 0;
  resize: vertical;
  min-height: 72px;
  font: inherit;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 10px;
  transition: border-color .15s, box-shadow .15s;
}

textarea.inp:hover {
  border-color: var(--muted);
}

textarea.inp:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.comment-form .comment-compose {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  padding: 10px 12px;
}

.comment-form .comment-compose label {
  margin: 0;
  gap: 8px;
}

.comment-form .comment-compose textarea.inp {
  min-height: 96px;
}

.comment-form .comment-actions {
  display: flex;
  justify-content: flex-end;
}

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

@media (max-width: 860px) {
  .roles-layout,
  .org-layout,
  .trunks-layout,
  .exchange-layout {
    grid-template-columns: 1fr;
  }

  .roles-nav-list,
  .org-nav-list,
  .trunks-nav-list {
    max-height: 240px;
  }
}

.registry-group-bar,
.registry-add-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.registry-add-group .sel {
  min-width: 220px;
  flex: 1;
}

.exchange-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.exchange-step + .exchange-step,
.exchange-step + .exchange-actions {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.exchange-step > p.fnt,
.exchange-action > p.fnt {
  margin: 0;
}

.exchange-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.exchange-step-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
}

.exchange-step-head .fnt {
  text-align: right;
}

.exchange-step .roles-editor-bar {
  padding: 0;
}

.exchange-save-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.exchange-save-bar label {
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.exchange-save-bar .btn {
  flex: none;
}

.exchange-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.exchange-actions:has(> .exchange-action:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.exchange-action {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exchange-action .roles-editor-bar {
  padding-top: 2px;
  margin-top: auto;
}

.exchange-action .import-check {
  margin: 0;
  padding: 8px 0;
  border: 0;
}

.exchange-action .import-check:hover {
  background: transparent;
}

.registry-map {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.registry-map-head,
.registry-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
}

.registry-map-head {
  padding: 8px 14px;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.registry-map-row {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  align-items: start;
}

.registry-map-row:last-child {
  border-bottom: 0;
}

.registry-map-row.is-required .registry-col-name {
  color: var(--text);
}

.registry-map-row.is-missing {
  background: var(--bad-soft);
}

.registry-map-row.is-added {
  box-shadow: inset 3px 0 0 var(--accent);
}

.registry-col-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
}

.registry-map-source {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.registry-stale {
  margin: 0;
}

@media (max-width: 860px) {
  .exchange-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .registry-map-head,
  .registry-map-row {
    grid-template-columns: 1fr;
  }

  .registry-map-head span:last-child,
  .exchange-step-head .fnt {
    text-align: left;
  }
}

/* Правка должника: строка телефона — номер, тип, чей номер. */
.debtor-phone-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.debtor-phone-fields {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.8fr) minmax(200px, 2fr);
  gap: 8px;
}

.debtor-phone-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 720px) {
  .debtor-phone-fields {
    grid-template-columns: 1fr;
  }
}

/* Карточка должника: телефоны под заголовком — основной крупнее. */
.debtor-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.debtor-phone.is-primary .mono {
  font-size: 17px;
  font-weight: 600;
}

.debtor-phone.is-invalid .mono {
  text-decoration: line-through;
  color: var(--muted);
}

/* Организация: поиск и группы по ролям в списке сотрудников. */
.org-nav-search {
  padding: 8px 16px 0;
}

.org-nav-search .inp {
  width: 100%;
}

.org-nav-group {
  padding: 10px 11px 4px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.org-nav-group:first-child {
  padding-top: 2px;
}

.org-password-row {
  display: flex;
  gap: 8px;
}

.org-password-row .inp {
  flex: 1;
  min-width: 0;
}