:root {

  --modal-bg: #ffffff;
  --modal-overlay: rgba(0, 0, 0, 0.38);
  --input-border: #FF848A;
  --modal-text-primary: #333333;
  --popup-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --accent-gradient: linear-gradient(90deg, #ff9a8b 0%, #ff6b88 52%, #ff98ab 100%);
}

@media (prefers-color-scheme: dark) {
  :root {

    --modal-bg: #1e1e20; 
    --modal-overlay: rgba(0, 0, 0, 0.75);
    --input-border: #da85f3; 
    --modal-text-primary: #e1e1e6;
    --popup-shadow: 0 0 40px rgba(218, 133, 243, 0.15);
    --accent-gradient: linear-gradient(90deg, #da85f3 0%, #da85f3 100%);
  }
}


.modal, .modal-forgot, .modal-mail, .modal-delete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999999;
  background-color: var(--modal-overlay);
  display: grid;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s, visibility 0.4s;
}

.modal.open, .modal-forgot.open, .modal-mail.open, .modal-delete.open {
  visibility: visible;
  opacity: 1;
}

.reg-popup, .forgot-popup, .mail-popup, .delete-popup {
  padding: 20px 40px;
  background: var(--modal-bg);
  border-radius: 30px;
  transform: scale(0);
  transition: transform 0.4s;
  box-shadow: var(--popup-shadow);
  color: var(--modal-text-primary);
}

.modal.open .reg-popup, 
.modal-forgot.open .forgot-popup, 
.modal-mail.open .mail-popup, 
.modal-delete.open .delete-popup {
  transform: scale(1);
}

.reg-popup h1, .forgot-popup h1, .mail-popup h1, .delete-popup h1 {
  text-align: center;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 2rem;
  font-weight: 700;
  padding-bottom: 20px;
}

.reg, .forgot, .mail, .delete {
  display: flex;
  flex-direction: column;
  gap: 15px;
}


.reg-popup .reg input[type=text], 
.forgot-popup .forgot input[type=text], 
.mail-popup .mail input[type=text] {
  width: 100%;
  border: 3px solid var(--input-border);
  background: transparent;
  color: var(--modal-text-primary);
  border-radius: 15px;
  padding: 0.8rem 1rem; 
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s;
}

.reg-popup .reg input[type=text]:focus {
  border-color: #ffffff;
}


.continue, .resetPass, .setMail, .deleteAcc {
  background: var(--accent-gradient) !important;
  border-radius: 15px;
  font-weight: 700;
  color: #fff !important;
  border: none;
  cursor: pointer;
  height: 50px;
  font-size: 1rem;
  transition: transform 0.2s;
}

.reg-popup .reg .forward-btns {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  align-items: center;
}

.reg-popup .reg .forward-btns .vk-continue > img {
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 15px;
  cursor: pointer;

  filter: none !important;
  background: transparent !important;
  transform: translateZ(0); 
}


.delete-popup p {
  text-align: center;
  padding-bottom: 20px;
  max-width: 600px;
  color: var(--modal-text-primary);
}

.forgot-popup .forgot .resetPass,
.mail-popup .mail .setMail,
.delete-popup .delete .deleteAcc {
  width: 100%;
}