* {box-sizing: border-box; margin:0; padding:0; font-family: 'Vazirmatn', sans-serif;}
body {display:flex; justify-content:center; align-items:center; min-height:100vh; background:#f0f2f5;}
.container {width:100%; max-width:400px; background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.1); overflow:hidden;}
.tabs {display:flex;}
.tab {flex:1; text-align:center; padding:15px; cursor:pointer; background:#e6e8eb; transition:0.3s;}
.tab.active {background:#6ee7ff; color:#000; font-weight:bold;}
.form-container {padding:20px; display:flex; flex-direction:column; gap:15px;}
.form {display:flex; flex-direction:column; gap:15px;}
.form.hidden {display:none;}
input {padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px;}
button {padding:12px; border:none; border-radius:6px; background:#6ee7ff; color:#000; font-weight:bold; cursor:pointer; transition:0.3s;}
button:hover {background:#4fb7db;}
.otp-container {display:none; flex-direction: column; gap:15px; text-align:center; margin-top:10px;}
.otp-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
  direction: ltr;   /* ترتیب ورودی‌ها از چپ به راست */
}

.otp-inputs input {width:40px; height:50px; font-size:20px; text-align:center;}
.otp-actions {display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:10px;}
#resendTimer {font-size:14px; margin-bottom:5px;}
.forgot-password {font-size:14px; color:#007bff; cursor:pointer; text-align:left;}
.back-to-login {font-size:14px; color:#007bff; cursor:pointer; text-align:center; margin-top:10px;}
@media(max-width:480px){.container{width:90%;}}


.notification {
  position: fixed;
  top: -80px; /* ابتدا مخفی */
  left: 50%;
  transform: translateX(-50%);
  background: #6ee7ff;
  color: #000;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 9999;
  width: 300px;
  max-width: 90%;
  text-align: center;
  font-weight: bold;
  transition: top 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.progress {
  position: relative;
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

#progressBar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #000;
  transition: width 0.05s linear;
}