/* ── Modal overlay + dialog ─────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: hsla(240, 12%, 10%, 0.55);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: overlay-in var(--transition-base) ease;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-in var(--transition-base) ease;
  overflow: hidden;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Width variants */
.modal--sm { max-width: 380px; }
.modal--lg { max-width: 680px; }
.modal--xl { max-width: 860px; }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
  gap: var(--sp-4);
}
.modal__title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--clr-text-primary);
}
.modal__close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--clr-text-muted);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.modal__close:hover { background: var(--clr-surface-2); color: var(--clr-text-primary); }
.modal__close svg { width: 16px; height: 16px; stroke: currentColor; }

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--clr-border);
  flex-shrink: 0;
  background: var(--clr-bg);
}
.modal__footer--between { justify-content: space-between; }

/* Confirm / danger modal */
.modal--confirm .modal__body {
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}
.modal__confirm-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
}
.modal__confirm-icon--danger { background: var(--clr-danger-light); }
.modal__confirm-icon--danger svg { width: 24px; height: 24px; stroke: var(--clr-danger); }
.modal__confirm-text {
  font-size: var(--text-sm);
  color: var(--clr-text-secondary);
  max-width: 300px;
}