.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.modal.show{
  display:flex;
  animation:fadeIn .25s ease forwards;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-content{
  background:#121212;
  padding:24px;
  border-radius:18px;
  width:380px;
  max-height:90vh;
  overflow-y:auto;
  transform:scale(.92);
  animation:scaleIn .25s ease forwards;
}
@keyframes scaleIn{to{transform:scale(1)}}
.modal-content h2{
  color:#ff4d4d;
  text-align:center;
  margin-bottom:14px;
}
.modal-content textarea,
.modal-content input{
  width:100%;
  margin-top:8px;
  padding:10px;
  border-radius:10px;
  border:none;
  background:#1f1f1f;
  color:#fff;
}
.modal-content button{
  margin-top:14px;
  width:100%;
  padding:12px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#b40000,#ff4d4d);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.toggle{display:flex;gap:10px;margin-top:10px}
.toggle button{flex:1;background:#1f1f1f}
.toggle .active{background:#b40000}
.loading{
  pointer-events:none;
  opacity:.6;
}
.loading::after{
  content:"";
  width:22px;
  height:22px;
  border:3px solid #fff;
  border-top-color:transparent;
  border-radius:50%;
  display:block;
  margin:10px auto 0;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:600px){
  .modal-content{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
  }
}