#modal-backdrop {
  position: fixed; z-index: 9999; top:0; left:0; width:100vw; height:100vh;
  display: flex; align-items: center; justify-content: center;
}

#modal-blur {
  position: absolute; width:100vw; height:100vh; top:0; left:0;
  background: rgba(38,50,56,0.19);
  backdrop-filter: blur(5px);
}

#modal-box {
  position: relative;
  z-index: 10;
  background: white;
  padding: 36px 28px 28px 28px;
  border-radius: 18px;
  box-shadow: 0 6px 44px #2329321f;
  min-width: 330px;
  max-width: 90vw;
  text-align: center;
  font-size: 1.14rem;
}
#modal-icon {
  margin-bottom: 10px;
  font-size: 38px;
}
#modal-close {
  margin-top: 22px;
  background: linear-gradient(90deg,#23a6d5 0%,#85efc7 100%);
  color: #232932;
  border: none;
  border-radius: 12px;
  padding: 8px 28px;
  font-size: 1.13rem;
  cursor: pointer;
  box-shadow: 0 2px 12px #23a6d540;
  font-weight: 600;
  transition: background 0.2s;
}
#modal-close:hover { background: linear-gradient(90deg,#2ec8f2 0%,#7afec0 100%);}

@media (max-width: 400px) {
  #modal-box {
    min-width: unset;
    max-width: 98vw;
    padding: 18px 6vw 18px 6vw;
    font-size: 1.03rem;
  }
  #modal-icon { font-size: 26px; }
  #modal-close { font-size: 1.03rem; padding: 7px 20px; }
}