/* Модалки: dialog.dialog (+ .wide), окно подтверждения .confirm-dialog (core.js: confirmDialog), шапка окна */
dialog.dialog {
  --dialog-bg: var(--surface-raised); --dialog-fg: var(--fg); --dialog-border: var(--border-raised);
  --dialog-radius: var(--r-lg); --dialog-shadow: var(--shadow-lg); --dialog-pad: var(--s5);
  border: var(--border-w) solid var(--dialog-border); border-radius: var(--dialog-radius); background: var(--dialog-bg);
  color: var(--dialog-fg); padding: var(--dialog-pad); width: min(480px, calc(100vw - 2 * var(--s4)));
  box-shadow: var(--dialog-shadow);
}
dialog.dialog::backdrop { background: var(--overlay); }
dialog.dialog h2 { font-size: var(--fs-xl); margin-bottom: var(--s2); }
dialog.dialog label.check { align-items: flex-start; }
dialog.dialog label.check + label.check { margin-top: var(--s1); }
dialog.dialog.wide { width: min(640px, calc(100vw - 2 * var(--s4))); max-height: calc(100vh - 2 * var(--s5)); overflow-y: auto; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }

dialog.confirm-dialog p { margin: 0; line-height: var(--lh-body); overflow-wrap: anywhere; }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
@media (prefers-reduced-motion: no-preference) {
  dialog.confirm-dialog[open] { animation: confirm-in var(--dur) var(--ease); }
  dialog.confirm-dialog[open]::backdrop { animation: confirm-fade var(--dur) ease-out; }
}
@keyframes confirm-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes confirm-fade { from { opacity: 0; } }
@media (max-width: 480px) {
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }
}