.modal-overlay{
  position:fixed;inset:0;z-index:10001;display:grid;place-items:center;padding:20px;
  background:rgba(6,6,8,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s ease;
}
.modal-overlay.show{opacity:1}

.modal-card{
  width:100%;max-width:440px;padding:28px;border-radius:20px;
  transform:translateY(16px) scale(.96);opacity:0;
  transition:transform .28s cubic-bezier(.2,1.1,.3,1),opacity .22s ease;
  position:relative;
}
.modal-overlay.show .modal-card{transform:none;opacity:1}
.modal-card::before{content:"";position:absolute;inset:-1px;border-radius:20px;padding:1px;
  background:linear-gradient(135deg,rgba(253,185,19,.5),transparent 45%,rgba(255,255,255,.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

.modal-title{margin:0 0 8px;font-size:20px;font-weight:800;letter-spacing:-.2px}
.modal-msg{margin:0 0 18px;color:var(--muted);line-height:1.55;font-size:14px}
.modal-input{width:100%;margin:6px 0 4px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.modal-ok.danger{background:linear-gradient(120deg,var(--neg),#c93a4f)}
.modal-ok.danger:hover{box-shadow:0 14px 36px rgba(255,93,115,.4)}

@media (prefers-reduced-motion: reduce){
  .modal-overlay,.modal-card{transition:none}
  .modal-card{transform:none;opacity:1}
}