*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  min-height:100vh;
  background:linear-gradient(135deg,#0F172A 0%,#1E293B 50%,#0F172A 100%);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
}

.auth-card{
  background:#fff;border-radius:24px;
  padding:40px 36px 32px;
  width:100%;max-width:420px;
  box-shadow:0 24px 64px rgba(0,0,0,.45);
}

.auth-logo{
  width:110px;height:auto;border-radius:12px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;font-weight:800;
  margin:0 auto 20px;
  padding:8px 12px;
  box-shadow:0 4px 20px rgba(0,0,0,.1);
}
.auth-logo img{width:100%;height:auto;object-fit:contain;display:block}

h1{font-size:24px;font-weight:800;color:#0B0F1A;text-align:center;margin-bottom:6px}
.auth-sub{font-size:14px;color:#6B7A9A;text-align:center;margin-bottom:28px;line-height:1.5}

/* Social buttons */
.btn-social{
  width:100%;height:46px;border-radius:10px;
  border:1.5px solid #E5E7EB;background:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:14.5px;font-weight:600;color:#1A2035;
  font-family:inherit;cursor:pointer;
  transition:background .15s,border-color .15s;
  margin-bottom:6px;
}
.btn-social:hover{background:#F9FAFB;border-color:#D1D5DB}
.btn-social:disabled{opacity:.55;cursor:not-allowed}
.btn-social svg{width:20px;height:20px;flex-shrink:0}

/* Divider */
.auth-divider{
  display:flex;align-items:center;gap:12px;
  margin:18px 0;
  color:#9AA3BC;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#E5E7EB}

/* Form fields */
.af{margin-bottom:16px}
.af label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:#6B7A9A;margin-bottom:7px;
}
.af input{
  width:100%;padding:12px 14px;
  border:1.5px solid #E5E7EB;border-radius:10px;
  font-size:14.5px;font-family:inherit;
  color:#0B0F1A;background:#FAFAFA;
  outline:none;
  transition:border-color .15s,background .15s;
}
.af input:focus{border-color:#0D9E75;background:#fff}
.af input.err{border-color:#EF4444}
.af input::placeholder{color:#C4CADB}
.af .opt{font-weight:400;text-transform:none;letter-spacing:0;font-size:11px}

/* Submit button */
.btn-auth{
  width:100%;height:48px;
  background:linear-gradient(135deg,#0D9E75,#0A8562);
  color:#fff;border:none;border-radius:10px;
  font-size:15px;font-weight:700;font-family:inherit;
  cursor:pointer;margin-top:4px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .15s,transform .1s;
}
.btn-auth:hover{opacity:.92}
.btn-auth:active{transform:scale(.98)}
.btn-auth:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* Spinner */
.spinner{
  width:17px;height:17px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Feedback */
.auth-err{margin-top:10px;font-size:13px;font-weight:600;color:#EF4444;text-align:center;display:none;line-height:1.4}
.auth-err.on{display:block}
.auth-ok{margin-top:10px;font-size:13px;font-weight:600;color:#0D9E75;text-align:center;display:none;line-height:1.4}
.auth-ok.on{display:block}

/* Bottom link */
.auth-switch{margin-top:22px;text-align:center;font-size:13.5px;color:#6B7A9A}
.auth-switch a,.link-a{color:#0D9E75;font-weight:700;text-decoration:none}
.link-a:hover{text-decoration:underline}
.link-forgot{color:#0D9E75;font-weight:600;font-size:11px;text-transform:none;letter-spacing:0;text-decoration:none}

/* Password strength */
.pw-strength{display:flex;gap:4px;margin-top:7px;height:3px}
.pw-bar{flex:1;border-radius:3px;background:#E5E7EB;transition:background .3s}
.pw-bar.weak{background:#EF4444}
.pw-bar.fair{background:#F59E0B}
.pw-bar.good{background:#3B82F6}
.pw-bar.strong{background:#0D9E75}

/* Email verification icon */
.verify-icon{
  width:72px;height:72px;border-radius:50%;
  background:#E8F7F2;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;font-size:36px;
}

/* Back link */
.auth-back{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:600;color:#6B7A9A;
  text-decoration:none;margin-bottom:20px;
}
.auth-back:hover{color:#0B0F1A}

@media(max-width:480px){
  body{padding:16px}
  .auth-card{padding:32px 20px 24px}
}