/* ================================================================
   modals.css
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(18,36,64,.55);
  display: none; align-items: center; justify-content: center; z-index: 1000;
  padding: var(--sp-lg); backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  padding: var(--sp-xl); position: relative; animation: modal-in .18s ease;
}
.modal-box.wide { max-width: 720px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; right: 14px; top: 14px; background: none; border: none;
  color: var(--muted); cursor: pointer; font-size: 1.3rem; line-height: 1;
}
.modal-close:hover { color: var(--ink); }
.modal-box h2 { margin-bottom: var(--sp-md); display: flex; align-items: center; gap: .5rem; }
.modal-actions { display: flex; gap: var(--sp-sm); justify-content: flex-end; margin-top: var(--sp-lg); }

/* Mobile: slide-up bottom sheet */
@media (max-width: 768px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box {
    max-width: 100%; width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 88vh;
    animation: modal-in-sheet .2s ease;
  }
  .modal-box.wide { max-width: 100%; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 100px; }

  @keyframes modal-in-sheet {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 480px) {
  .modal-box { padding: var(--sp-md); max-height: 92vh; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}