.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
  animation: modalFade 0.2s ease;
}

/* The system confirm/alert/prompt modal (#systemModal) must always be the
   topmost interactive layer, even when opened on top of the note pop-out
   (z-index 1100) to confirm discarding unsaved changes. */
#systemModal.modal-overlay {
  z-index: 1300;
}

.modal-overlay.is-open { display: flex; }

.modal-box {
  width: min(100%, 480px);
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(0,0,0,0.18);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}

.modal-box.modal-lg { width: min(100%, 700px); }
.modal-box.modal-sm { width: min(100%, 360px); }
.modal-header, .modal-footer {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.modal-header { border-bottom: 1px solid var(--color-border); }
.modal-body { padding: 1.25rem; overflow: auto; }
.modal-footer { border-top: 1px solid var(--color-border); justify-content: flex-end; }
.modal-close-btn {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
}

@keyframes modalFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .modal-overlay { padding: 0.5rem; }
  .modal-box, .modal-box.modal-lg, .modal-box.modal-sm { width: 100%; border-radius: 14px; }
}