/* ========================================
   FIVM.PRO — Login/Register Styles
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#0a0a0f;--card:#12121a;--card2:#161622;
  --accent:#3b82f6;--accent2:#6366f1;--accent-glow:rgba(59,130,246,.15);
  --text:#f0f0f0;--text2:#a0a0b0;--text3:#555;
  --border:rgba(255,255,255,.06);--radius:14px;
  --err:#ef4444;--ok:#22c55e;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;height:100%}
body{
  font-family:'Onest',sans-serif;background:var(--bg);color:var(--text);
  min-height:100vh;overflow-x:hidden;position:relative;
}
.auth-body{
  display:block; min-height:100vh;
}
.auth-main{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:6rem 1rem 4rem 1rem; position:relative; z-index:1;
}

/* BG Effects */
.auth-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.auth-bg__orb{
  position:absolute;border-radius:50%;filter:blur(100px);opacity:.12;
}
.auth-bg__orb--1{width:500px;height:500px;background:#1e40af;top:-10%;left:-10%;animation:orb-float 8s ease-in-out infinite}
.auth-bg__orb--2{width:400px;height:400px;background:#2563eb;bottom:-15%;right:-10%;animation:orb-float 10s ease-in-out infinite reverse}
.auth-bg__orb--3{width:300px;height:300px;background:#3b82f6;top:50%;left:50%;transform:translate(-50%,-50%);animation:orb-float 12s ease-in-out infinite}
@keyframes orb-float{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(30px,-20px)}
  50%{transform:translate(-20px,30px)}
  75%{transform:translate(20px,20px)}
}

/* Auth Card */
.auth-card{
  position:relative;z-index:1;width:100%;max-width:420px;
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:2.5rem 2rem;margin:1rem;
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 40px rgba(59,130,246,.05);
  backdrop-filter:blur(10px);
}

/* Logo */
.auth-logo{
  text-align:center;margin-bottom:2rem;
}
.auth-logo a{
  font-size:1.6rem;font-weight:700;color:var(--text);
  display:inline-flex;align-items:center;gap:.2rem;
}
.auth-logo a span{color:var(--accent)}
.auth-logo p{font-size:.82rem;color:var(--text3);margin-top:.4rem}

/* Steps */
.auth-step{
  display:none;animation:step-in .4s ease both;
}
.auth-step.active{display:block}
@keyframes step-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Title */
.auth-title{font-size:1.15rem;font-weight:600;margin-bottom:.3rem}
.auth-sub{font-size:.82rem;color:var(--text3);margin-bottom:1.5rem}
.auth-sub strong{color:var(--accent);font-weight:500}

/* Form */
.auth-group{margin-bottom:1rem;position:relative}
.auth-label{display:block;font-size:.78rem;color:var(--text2);margin-bottom:.4rem;font-weight:500}
.auth-input{
  width:100%;padding:.75rem 1rem;background:var(--card2);
  border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-family:inherit;font-size:.9rem;
  outline:none;transition:all .25s;
}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.auth-input::placeholder{color:var(--text3)}
.auth-input.error{border-color:var(--err);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.auth-input.ok{border-color:var(--ok)}

/* Input Prefix (Username) */
.auth-input-prefix{
  display:flex;align-items:center;background:var(--card2);
  border:1px solid var(--border);border-radius:10px;overflow:hidden;
  transition:all .25s;
}
.auth-input-prefix:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.auth-input-prefix.error{border-color:var(--err);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.auth-input-prefix .prefix{padding-left:1rem;color:var(--text3);font-size:.9rem;user-select:none}
.auth-input-prefix .auth-input{border:none;background:transparent;padding-left:.2rem;box-shadow:none !important}

/* Password Strength */
.pw-strength{margin-top:.6rem}
.pw-strength-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:.3rem}
.pw-strength-fill{height:100%;width:0%;background:var(--err);transition:all .3s ease}
.pw-strength-text{font-size:.7rem;color:var(--text3);text-align:right}

/* Password toggle */
.auth-pw-toggle{
  position:absolute;right:.8rem;top:2rem;
  background:none;color:var(--text3);padding:4px;cursor:pointer;
}
.auth-pw-toggle:hover{color:var(--text2)}

/* Error */
.auth-error{
  font-size:.75rem;color:var(--err);margin-top:.3rem;
  display:none;align-items:center;gap:.3rem;
}
.auth-error.show{display:flex}
.auth-error svg{width:12px;height:12px;flex-shrink:0}

/* Button */
.auth-btn{
  width:100%;padding:.8rem;border-radius:10px;font-size:.92rem;font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border:none;margin-top:.5rem;
  position:relative;overflow:hidden;transition:all .3s;
}
.auth-btn:hover{box-shadow:0 0 25px var(--accent-glow);transform:translateY(-1px)}
.auth-btn:active{transform:translateY(0)}
.auth-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-btn__loader{
  display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;
  margin:0 auto;
}
.auth-btn.loading .auth-btn__text{display:none}
.auth-btn.loading .auth-btn__loader{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Divider */
.auth-divider{
  display:flex;align-items:center;gap:1rem;
  margin:1.2rem 0;color:var(--text3);font-size:.78rem;
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* Social */
.auth-socials{display:flex;gap:.5rem;margin-bottom:1rem}
.auth-social{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.65rem;background:var(--card2);border:1px solid var(--border);
  border-radius:10px;font-size:.82rem;color:var(--text2);transition:all .25s;
}
.auth-social:hover{border-color:var(--accent);color:var(--text);background:rgba(59,130,246,.04)}
.auth-social svg{width:18px;height:18px}

/* Footer */
.auth-footer{
  text-align:center;margin-top:1.2rem;font-size:.78rem;color:var(--text3);
}
.auth-footer a{color:var(--accent);font-weight:500}
.auth-footer a:hover{text-decoration:underline}

/* Back button */
.auth-back{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.78rem;color:var(--text3);margin-bottom:1rem;
  background:none;padding:0;cursor:pointer;transition:all .2s;
}
.auth-back:hover{color:var(--accent)}
.auth-back svg{width:14px;height:14px}

/* Checkbox */
.auth-check{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.auth-check input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--accent);cursor:pointer;
}
.auth-check label{font-size:.8rem;color:var(--text2);cursor:pointer}

/* Responsive */
@media(max-width:480px){
  .auth-card{padding:2rem 1.5rem;border-radius:16px}
  .auth-socials{flex-direction:column}
}