/* design-kit: окна kit-dialogs.js (подтверждение, сообщение, ввод) — вид .modal кита из app.css.
   Здесь только защита: старые правила панелей для .modal-backdrop/.modal-head/.modal-body
   (скрытие без .open, моноширинные заголовки, свои отступы) не должны менять окно кита.
   Значения — как в app.css (раздел «Окна»), цвета — токенами кита. Слой выше окон и загрузок панелей. */
.modal-backdrop.kd { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; justify-content: normal; align-content: normal;
  padding: 20px; margin: 0; background: var(--backdrop); overflow: hidden; animation: fade .14s ease; }
.kd > .modal { position: relative; inset: auto; width: min(480px, 100%); max-width: none; min-width: 0; max-height: calc(100vh - 40px); margin: 0;
  display: flex; flex-direction: column; padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); outline: none; overflow: hidden; transform: none; opacity: 1; animation: pop .16s ease; }
.kd > .modal.modal-sm { width: min(400px, 100%); }
.kd .modal-head { position: static; padding: 16px 18px 6px; display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px;
  background: none; border: 0; }
.kd .modal-head h2 { margin: 0 auto 0 0; min-width: 0; overflow-wrap: anywhere; word-break: normal; font-family: inherit; font-size: 16px;
  font-weight: 620; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--text); }
.kd .modal-head .modal-x { position: static; flex: 0 0 auto; margin: -4px -6px 0 0; }
.kd .modal-body { flex: 0 1 auto; padding: 8px 18px 16px; margin: 0; max-height: none; min-height: 0; overflow-y: auto;
  background: none; border: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.kd .modal-body p { margin: 0; }
.kd .modal-body p + p { margin-top: 8px; }
.kd .modal-list { margin: 0 0 10px; padding: 0 0 0 18px; max-height: 240px; overflow-y: auto; list-style: disc; }
.kd .modal-list li { margin: 0; padding: 0; color: var(--text-2); }
.kd .modal-list li + li { margin-top: 2px; }
.kd .modal-list li.muted { color: var(--muted); list-style: none; }
.kd .modal-foot { padding: 12px 18px 16px; margin: 0; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  background: none; border: 0; }
.kd .modal-head { flex-wrap: nowrap; }
/* Кнопки окна — как в app.css. У части панелей .btn без уточнения залит акцентом (check-kit.css),
   тогда «Отмена» и красная кнопка окрашивались одинаково. */
.kd .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
  font-size: 13.5px; font-weight: 550; white-space: nowrap; box-shadow: none; text-transform: none; letter-spacing: normal; }
.kd .btn:hover { background: var(--hover); border-color: var(--border-strong); color: var(--text); }
.kd .btn.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.kd .btn.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
.kd .btn.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: var(--danger-solid-fg); }
.kd .btn.btn-danger-solid:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--danger-solid-fg); }
.kd .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.kd .btn.modal-x { width: 28px; height: 28px; padding: 0; background: transparent; border-color: transparent; color: var(--text-2); }
.kd .btn.modal-x:hover { background: var(--hover); border-color: transparent; color: var(--text); }
@media (pointer: coarse) { .kd .btn { height: 40px; } .kd .btn.modal-x { width: 36px; height: 36px; } }
.kd .confirm-type { margin-top: 14px; }
.kd .field > label b { color: var(--text); }
@media (max-width: 640px) { .modal-backdrop.kd { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop.kd, .kd > .modal { animation: none; } }
@media print { .modal-backdrop.kd { display: none !important; } }