.modal[hidden] { display: none; }

  .modal {
    position: fixed; inset: 0; z-index: 1000;
  }

  .modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.5);
  }

  .modal__dialog {
    position: relative;
    max-width: 720px;
    margin: 6vh auto;
    background: #fff;
    color: #111;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    display: flex; flex-direction: column;
    outline: none; /* focus ring handled below */
  }

  .modal__header, .modal__footer { padding: 1rem 1.25rem; }
  .modal__body { padding: 0 1.25rem 1.25rem; }

  .modal__header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; }
  .modal__footer { border-top: 1px solid #eee; }

  .modal__close {
    font-size: 1.5rem; line-height: 1; border: 0; background: transparent; cursor: pointer;
  }

  /* Visible focus styles */
  .modal__dialog :focus-visible,
  .modal__close:focus-visible {
    outline: 2px solid #0a66ff; outline-offset: 2px;
  }

  /* Reduce motion if preferred */
  @media (prefers-reduced-motion: no-preference) {
    .modal__dialog { transform: translateY(-8px); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
    .modal[aria-hidden="false"] .modal__dialog { transform: translateY(0); opacity: 1; }
  }

  /* Prevent background scroll while modal is open */
  body.modal-open { overflow: hidden; }