/* AUTH LAYOUT */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 20px 60px;position:relative;z-index:1;}
.auth-glow{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);width:700px;height:500px;border-radius:50%;background:radial-gradient(ellipse,rgba(59,130,246,.1) 0%,transparent 65%);pointer-events:none;z-index:0;}
.auth-wrap{width:100%;max-width:460px;position:relative;z-index:2;}
/* BRAND STRIP */
.auth-brand{text-align:center;margin-bottom:28px;}
.auth-brand-logo{display:inline-flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.2rem;}
.auth-brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue-500),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 0 16px rgba(59,130,246,.35);}
.auth-tagline{font-size:.8rem;color:var(--text-muted);margin-top:6px;}
/* CARD */
.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;box-shadow:0 0 60px rgba(6,13,26,.8),0 0 0 1px rgba(59,130,246,.06);}
.auth-card-title{font-family:'Montserrat',sans-serif;font-size:1.3rem !important;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;text-align:center;}
.auth-card-sub{font-size:.85rem;color:var(--text-muted);text-align:center;margin-bottom:28px;line-height:1.5;}
/* FORM ELEMENTS */
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:.8rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px;}
.form-label .req{color:var(--red);margin-left:2px;}
.form-control{width:100%;padding:11px 14px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.9rem;outline:none;transition:.2s;-webkit-appearance:none;}
.form-control:focus{border-color:var(--blue-500);background:rgba(59,130,246,.05);box-shadow:0 0 0 3px rgba(59,130,246,.12);}
.form-control::placeholder{color:var(--text-muted);}
.form-control.error{border-color:var(--red);}
.form-control.success{border-color:var(--green);}
.field-error{font-size:.75rem;color:var(--red);margin-top:5px;display:flex;align-items:center;gap:4px;}
.field-success{font-size:.75rem;color:var(--green);margin-top:5px;display:flex;align-items:center;gap:4px;}
/* INPUT GROUP */
.input-group{position:relative;}
.input-group .form-control{padding-right:46px;}
.input-group-btn{position:absolute;right:0;top:0;bottom:0;width:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:.2s;border-radius:0 var(--radius) var(--radius) 0;}
.input-group-btn:hover{color:var(--blue-400);}
/* CHECKBOX */
.form-check{display:flex;align-items:center;gap:9px;cursor:pointer;}
.form-check input[type=checkbox]{width:17px;height:17px;border-radius:5px;border:1px solid var(--border);background:rgba(255,255,255,.04);accent-color:var(--blue-500);cursor:pointer;flex-shrink:0;}
.form-check-label{font-size:.85rem;color:var(--text-secondary);cursor:pointer;}
/* BUTTONS */
.btn-auth{display:block;width:100%;padding:13px;border-radius:10px;font-size:.95rem;font-weight:700;font-family:'DM Sans',sans-serif;border:none;cursor:pointer;transition:.2s;text-align:center;}
.btn-auth-primary{background:linear-gradient(135deg,var(--blue-600),var(--blue-500));color:#fff;box-shadow:0 0 22px rgba(59,130,246,.35);}
.btn-auth-primary:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(59,130,246,.55);}
.btn-auth-primary:active{transform:none;}
.btn-auth-primary.loading{opacity:.7;pointer-events:none;}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border-radius:10px;font-size:.9rem;font-weight:600;font-family:'DM Sans',sans-serif;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;transition:.2s;}
.btn-google:hover{border-color:var(--border-bright);background:rgba(255,255,255,.07);}
.btn-google svg{flex-shrink:0;}
/* DIVIDER */
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--text-muted);font-size:.78rem;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
/* LINKS ROW */
.auth-links{display:flex;justify-content:space-between;align-items:center;margin-top:22px;flex-wrap:wrap;gap:8px;}
.auth-link{font-size:.82rem;color:var(--text-muted);transition:.2s;}
.auth-link:hover{color:var(--blue-400);}
.auth-link-primary{font-size:.82rem;color:var(--blue-400);font-weight:600;transition:.2s;}
.auth-link-primary:hover{color:var(--cyan);}
/* PASSWORD STRENGTH */
.pw-strength{margin-top:8px;}
.pw-strength-track{height:3px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden;}
.pw-strength-bar{height:100%;border-radius:100px;transition:width .35s ease,background .35s ease;width:0;}
.pw-strength-label{font-size:.7rem;margin-top:5px;font-weight:600;display:flex;justify-content:space-between;}
.pw-strength-label span:first-child{color:var(--text-muted);}
/* STATUS MESSAGES */
.auth-alert{padding:12px 16px;border-radius:var(--radius);font-size:.85rem;margin-bottom:20px;display:flex;align-items:flex-start;gap:10px;line-height:1.5;}
.auth-alert.error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#fca5a5;}
.auth-alert.success{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:#6ee7b7;}
.auth-alert.info{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);color:var(--blue-400);}
/* PROGRESS STEPS */
.step-dots{display:flex;gap:8px;justify-content:center;margin-bottom:24px;}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:.3s;}
.step-dot.active{background:var(--blue-400);box-shadow:0 0 8px rgba(96,165,250,.5);}
.step-dot.done{background:var(--green);}
/* SUCCESS STATE */
.auth-success-icon{width:64px;height:64px;border-radius:50%;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:1.6rem;}
/* TERMS */
.terms-note{font-size:.75rem;color:var(--text-muted);text-align:center;margin-top:16px;line-height:1.55;}
.terms-note a{color:var(--blue-400);}
.terms-note a:hover{color:var(--cyan);}
/* SECURITY BADGE */
.security-badge{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.72rem;color:var(--text-muted);margin-top:20px;}
.security-badge svg{color:var(--green);}
/* BACK LINK */
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-muted);margin-bottom:20px;transition:.2s;}
.back-link:hover{color:var(--blue-400);}
/* RESPONSIVE */
@media(max-width:640px){.auth-card{padding:24px;}.header-nav{display:none;}}


/* ── SOCIAL LOGIN FORM ── */
.social-login-form {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    width:          100%;
}

/* Base social button */
.btn-social {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    padding:         11px 16px;
    border-radius:   var(--radius, 10px);
    font-size:       .88rem;
    font-weight:     600;
    font-family:     'DM Sans', sans-serif;
    cursor:          pointer;
    border:          1px solid var(--border, rgba(59,130,246,.15));
    background:      rgba(255,255,255,.04);
    color:           var(--text-primary, #f0f6ff);
    transition:      .2s;
}
.btn-social:hover {
    background: rgba(255,255,255,.08);
    transform:  translateY(-1px);
}

.social-icon { flex-shrink: 0; }

/* Google — white background on icon area matches brand guidelines */
.btn-social-google {
    border-color: rgba(255,255,255,.12);
}
.btn-social-google:hover {
    border-color: rgba(66,133,244,.4);
    background:   rgba(66,133,244,.07);
}

/* Facebook */
.btn-social-facebook:hover {
    border-color: rgba(24,119,242,.4);
    background:   rgba(24,119,242,.07);
}
.btn-social-facebook .social-icon path { /* colour already in SVG fill */ }

/* X / Twitter */
.btn-social-x .social-icon { color: var(--text-primary); }
.btn-social-x:hover {
    border-color: rgba(255,255,255,.3);
    background:   rgba(255,255,255,.1);
}

/* GitHub */
.btn-social-github .social-icon { color: var(--text-primary); }
.btn-social-github:hover {
    border-color: rgba(255,255,255,.25);
    background:   rgba(255,255,255,.08);
}

/* Discord */
.btn-social-discord .social-icon { color: #5865F2; }
.btn-social-discord:hover {
    border-color: rgba(88,101,242,.4);
    background:   rgba(88,101,242,.08);
}



/* activate.css — or add to your auth shared stylesheet */

/* ── Wrap ───────────────────────────────────────────────── */
.activate-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  max-width:      520px;
  margin:         0 auto;
  padding:        60px 24px 80px;
  text-align:     center;
}

/* ── Icon ──────────────────────────────────────────────── */
.activate-icon {
  position:        relative;
  width:           80px;
  height:          80px;
  border-radius:   22px;
  background:      rgba(59,130,246,.1);
  border:          1px solid rgba(59,130,246,.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2rem;
  color:           #60a5fa;
  margin-bottom:   28px;
  flex-shrink:     0;
}

.activate-icon-ring {
  position:      absolute;
  inset:         -8px;
  border-radius: 28px;
  border:        1px solid rgba(59,130,246,.1);
  animation:     ringPulse 2.5s ease-in-out infinite;
}

@keyframes ringPulse {
  0%,100% { opacity:.5; transform:scale(1);    }
  50%     { opacity:1;   transform:scale(1.04); }
}

/* ── Heading ────────────────────────────────────────────── */
.activate-title {
  font-size:     1.6rem;
  font-weight:   800;
  color:         #f0f6ff;
  margin:        0 0 10px;
  letter-spacing:-.02em;
}

.activate-sub {
  font-size:     .9rem;
  color:         #94a3b8;
  line-height:   1.6;
  margin:        0 0 28px;
}

.activate-email {
  color:       #60a5fa;
  font-weight: 700;
  display:     block;
  margin-top:  4px;
}

/* ── Steps card ─────────────────────────────────────────── */
.activate-card {
  width:         100%;
  background:    #0a1628;
  border:        1px solid rgba(59,130,246,.12);
  border-radius: 16px;
  padding:       22px 24px;
  margin-bottom: 16px;
  text-align:    left;
}

.activate-card-label {
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          #475569;
  margin:         0 0 18px;
}

.activate-steps {
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.activate-step {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
}

.ast-num {
  width:           32px;
  height:          32px;
  border-radius:   8px;
  background:      rgba(59,130,246,.1);
  border:          1px solid rgba(59,130,246,.2);
  color:           #60a5fa;
  font-size:       .68rem;
  font-weight:     800;
  letter-spacing:  .04em;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      1px;
}

.ast-title {
  font-size:   .86rem;
  font-weight: 700;
  color:       #f0f6ff;
  margin-bottom:4px;
}

.ast-sub {
  font-size:  .78rem;
  color:      #475569;
  line-height:1.55;

  strong { color:#94a3b8; }
  em     { color:#94a3b8; font-style:normal; }
}

/* ── Callout ────────────────────────────────────────────── */
.activate-callout {
  width:         100%;
  background:    rgba(245,158,11,.05);
  border:        1px solid rgba(245,158,11,.15);
  border-radius: 12px;
  padding:       18px 20px;
  margin-bottom: 20px;
  text-align:    left;
}

.activate-callout-head {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     .84rem;
  font-weight:   700;
  color:         #f59e0b;
  margin-bottom: 14px;

  i { font-size:1rem; }
}

.activate-callout-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction:column;
  gap:        10px;
}

.activate-callout-list li {
  display:     flex;
  align-items: flex-start;
  gap:         9px;
  font-size:   .8rem;
  color:       #94a3b8;
  line-height: 1.5;
}

.activate-callout-list li i {
  font-size:  .9rem;
  color:      #f59e0b;
  flex-shrink:0;
  margin-top: 1px;
}

.activate-callout-list li strong {
  color: #f0f6ff;
}

/* ── Resend form ────────────────────────────────────────── */
.activate-resend {
  width:         100%;
  background:    #0a1628;
  border:        1px solid rgba(59,130,246,.12);
  border-radius: 14px;
  padding:       22px 24px;
  margin-bottom: 24px;
  text-align:    left;
}

.activate-resend-label {
  font-size:   .8rem;
  color:       #475569;
  margin:      0 0 14px;
}

.activate-resend-form {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.activate-resend-input-wrap {
  position: relative;
}

.activate-resend-input-wrap i {
  position:       absolute;
  left:           13px;
  top:            50%;
  transform:      translateY(-50%);
  color:          #475569;
  pointer-events: none;
  font-size:      .95rem;
}

.activate-resend-input {
  width:         100%;
  background:    rgba(255,255,255,.04);
  border:        1px solid rgba(59,130,246,.15);
  border-radius: 9px;
  color:         #f0f6ff;
  font-family:   'DM Sans', sans-serif;
  font-size:     .86rem;
  padding:       11px 14px 11px 38px;
  outline:       none;
  transition:    .18s ease;
  box-sizing:    border-box;
}

.activate-resend-input:focus {
  border-color: rgba(59,130,246,.4);
  background:   rgba(59,130,246,.04);
  box-shadow:   0 0 0 3px rgba(59,130,246,.08);
}

.activate-resend-input::placeholder { color: #475569; }

.activate-resend-btn {
  display:       inline-flex;
  align-items:   center;
  justify-content:center;
  gap:           7px;
  padding:       11px 20px;
  border-radius: 9px;
  background:    linear-gradient(135deg,#2563eb,#3b82f6);
  color:         #fff;
  font-family:   'DM Sans', sans-serif;
  font-size:     .86rem;
  font-weight:   700;
  border:        none;
  cursor:        pointer;
  transition:    .18s ease;
  box-shadow:    0 0 18px rgba(59,130,246,.2);
}

.activate-resend-btn:hover {
  transform:  translateY(-1px);
  box-shadow: 0 0 28px rgba(59,130,246,.35);
}

/* ── Alerts ─────────────────────────────────────────────── */
.activate-alert {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 14px;
  border-radius: 8px;
  font-size:     .8rem;
  margin-top:    10px;
  border:        1px solid transparent;
}

.activate-alert i { font-size: .95rem; flex-shrink:0; }

.alert-success {
  background:   rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.2);
  color:        #10b981;
}

.alert-error {
  background:   rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.2);
  color:        #ef4444;
}

/* ── Footer links ───────────────────────────────────────── */
.activate-footer {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
  justify-content:center;
}

.activate-footer-link {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-size:       .78rem;
  color:           #475569;
  text-decoration: none;
  transition:      .18s ease;

  i { font-size:.85rem; }
}

.activate-footer-link:hover { color: #60a5fa; }

.activate-footer-sep { color: #2d3748; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .activate-wrap  { padding: 40px 16px 60px; }
  .activate-title { font-size: 1.3rem; }
  .activate-card,
  .activate-resend,
  .activate-callout { padding: 16px; }
}


/* Add to your auth page stylesheet */

.rp-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       13px 16px;
  border-radius: 10px;
  border:        1px solid transparent;
  margin-bottom: 20px;
  text-align:    left;
  animation:     rpAlertIn .2s ease;
}

@keyframes rpAlertIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

.rp-alert i {
  font-size:  1.1rem;
  flex-shrink:0;
  margin-top: 1px;
}

.rp-alert div {
  flex:        1;
  display:     flex;
  flex-direction:column;
  gap:         2px;
}

.rp-alert strong {
  font-size:  .82rem;
  font-weight:700;
  display:    block;
}

.rp-alert span {
  font-size:  .78rem;
  line-height:1.5;
}

.rp-alert .rp-alert-cta {
  flex-shrink:     0;
  font-size:       .76rem;
  font-weight:     700;
  text-decoration: none;
  white-space:     nowrap;
  padding:         4px 10px;
  border-radius:   6px;
  transition:      .15s ease;
  align-self:      center;
}

/* Error */
.alert-error {
  background:   rgba(239,68,68,.07);
  border-color: rgba(239,68,68,.2);

  i        { color:#ef4444; }
  strong   { color:#f87171; }
  span     { color:#94a3b8; }

  .rp-alert-cta {
    background:   rgba(239,68,68,.1);
    border:       1px solid rgba(239,68,68,.2);
    color:        #ef4444;
    &:hover { background:rgba(239,68,68,.18); }
  }
}

/* Success */
.alert-success {
  background:   rgba(16,185,129,.07);
  border-color: rgba(16,185,129,.2);

  i      { color:#10b981; }
  strong { color:#34d399; }
  span   { color:#94a3b8; }
}

/* auth.css — add alongside existing form styles */

.input-error {
  border-color: rgba(239,68,68,.4) !important;
  background:   rgba(239,68,68,.04) !important;

  &:focus {
    border-color: rgba(239,68,68,.6) !important;
    box-shadow:   0 0 0 3px rgba(239,68,68,.1) !important;
  }
}