.modal[hidden] { display:none !important; }
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s cubic-bezier(.4,0,.2,1);
  z-index:980;
}
.modal-backdrop[data-open="true"] { opacity:1; pointer-events:auto; }
.modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:560px; width:clamp(300px,90%,560px);
  background:#141414; border:1px solid #2a2a2a; border-radius:12px;
  padding:20px 20px 28px; z-index:990;
  box-shadow:0 8px 28px -4px rgba(0,0,0,.55);
}
.modal h1,.modal h2,.modal h3 { margin-top:0; }
@media (prefers-reduced-motion: reduce){
  .modal-backdrop { transition:none; }
}