@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body { background: linear-gradient(145deg,#1c1f2b,#0e111a); margin:0; display:flex; justify-content:center; align-items:flex-start; min-height:100vh; font-family:'Poppins',sans-serif; color:#fff; padding-top:40px; }
.signup-wrapper { width:100%; max-width:500px; padding:0 20px; }
.logo-container { text-align:center; margin-bottom:20px; }
.signup-logo { width:80px;height:80px;border-radius:50%;box-shadow:0 4px 15px rgba(0,0,0,0.2); background:#fff; }
.signup-card { 
    background:rgba(255,255,255,0.05); overflow: hidden;
    backdrop-filter:blur(20px); border-radius:16px; padding:30px 25px; box-shadow:0 8px 32px rgba(0,0,0,0.2); position:relative; }
.progress-visual { display:flex; justify-content:space-between; position:relative; margin-bottom:25px; }
.progress-fill { position:absolute; top:18px; left:10%; width:0%; height:4px; background:#00d1b2; transition:width 0.4s ease; z-index:0; border-radius:2px; }
.step-icon { width:36px;height:36px;background:#2c2f3e;border-radius:50%;display:flex;justify-content:center;align-items:center;z-index:1;transition:background 0.3s,transform 0.3s; color:#bbb; }
.step-icon.active { background:#00d1b2; color:#fff; transform:scale(1.1); }
.form-step { display:none; animation:fadeIn 0.4s ease-in-out; }
.form-step.active { display:block; }
.input-wrap { margin-bottom:15px; }
.input-wrap label { font-weight:500; margin-bottom:5px; display:block; color:#ccc; }
.input-wrap input { width:90%; padding:12px 15px; border:none; border-radius:8px; background:#1c1f2b; color:#fff; outline:none; font-size:14px; }
button { background:#00d1b2; border:none; color:#fff; padding:12px 20px; margin-top:15px; border-radius:6px; cursor:pointer; font-size:15px; transition:transform 0.2s ease; display:inline-flex; align-items:center; justify-content:center; }
button:hover { transform:scale(1.05); }
.step-buttons { display:flex; justify-content:space-between; }
.divider { text-align:center; margin:20px 0; position:relative; }
.divider span { background:#0e111a; padding:0 10px; }
.divider::before, .divider::after { content:""; position:absolute; top:50%; width:45%; height:1px; background:rgba(255,255,255,0.2); }
.divider::before { left:0; }
.divider::after { right:0; }
.google-btn {transition: background-color 0.3s ease; transition: transform 0.7s ease, box-shadow 0.2s ease; width:100%; padding:12px; display:flex; gap:8px; justify-content:center; align-items:center; background:#fff; border-radius:10px; color:#333; font-weight:600; border:1px solid #ddd;  }
.google-btn img { height:18px; }
.google-btn:hover { background:#f5f5f5; transform: scale(1.05);}
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
@media screen and (max-width:500px){ .signup-card { padding:25px 20px; } .step-icon { width:30px;height:30px; } }
body {
  transition: opacity 0.3s ease-in-out;
}
#loadingOverlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 10, 10, 0.8);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: #fff;
}


.loading-bar {
  width: 60%;
  height: 8px;
  background: #333;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
}

.loading-bar::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #f7931a, #ffcc00);
  animation: loadingAnim 1.5s infinite ease-in-out;
  border-radius: 5px;
}

@keyframes loadingAnim {
  0% { left: -50%; }
  50% { left: 100%; }
  100% { left: 100%; }
}
.signin-prompt {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #ccc;
}

.signin-prompt a {
  color: #f7931a;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.signin-prompt a:hover {
  color: #ffcc00;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.4s ease;
}

.popup.hidden {
  opacity: 0;
  pointer-events: none;
}

.popup-content {
  background: #1c1f2b;
  border: 1px solid #00d1b2;
  padding: 30px 25px;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  text-align: center;
  color: #fff;
  max-width: 400px;
  animation: scaleIn 0.4s ease;
}

.popup-content h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #00d1b2;
}

.popup-content p {
  font-size: 15px;
  margin-bottom: 20px;
  color: #ccc;
}

.popup-content button {
  background: #00d1b2;
  border: none;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.popup-content button:hover {
  background: #00b29c;
}

@keyframes scaleIn {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}