/* ============================================================
   CyberSec Arsenal — auth / login page
   ============================================================ */
.auth-wrap{
  position:relative; z-index:1; min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-card{
  width:100%; max-width:420px; background:linear-gradient(160deg,#081408,#050d05);
  border:1px solid var(--green); border-radius:16px; padding:36px 32px;
  box-shadow:0 0 60px rgba(0,255,65,.12), inset 0 0 40px rgba(0,255,65,.03);
  position:relative; overflow:hidden;
}
.auth-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  animation:scanline 3s linear infinite;
}
@keyframes scanline{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}

.auth-logo{
  text-align:center; font-size:26px; font-weight:bold; letter-spacing:3px;
  color:var(--green); text-shadow:0 0 24px var(--green); margin-bottom:4px;
}
.auth-logo span{color:var(--cyan)}
.auth-sub{
  text-align:center; color:var(--dim); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:26px;
}
.auth-sub::before{content:'// '}
.auth-sub::after{content:' _'; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Tabs */
.tabs{display:flex;gap:6px;margin-bottom:24px;background:#020802;padding:5px;border-radius:8px;border:1px solid var(--border)}
.tab{
  flex:1; text-align:center; padding:10px; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; color:var(--dim); cursor:pointer; border-radius:6px;
  transition:all .2s; font-family:var(--font); background:none; border:none;
}
.tab:hover{color:var(--green)}
.tab.active{background:rgba(0,255,65,.12);color:var(--green);box-shadow:inset 0 0 0 1px var(--border)}

.auth-form{display:none}
.auth-form.active{display:block;animation:slideIn .25s ease}

.auth-actions{margin-top:22px}
.auth-actions .btn{width:100%;font-size:15px;padding:13px}

.auth-error{
  display:none; margin-bottom:16px; padding:10px 14px; border-radius:6px;
  background:rgba(255,0,64,.08); border:1px solid rgba(255,0,64,.4);
  color:#ff6688; font-size:12px; line-height:1.5;
}
.auth-error.show{display:block;animation:slideIn .2s ease}

.auth-foot{margin-top:22px;text-align:center;color:var(--dim);font-size:11px;line-height:1.7}
.auth-foot code{color:var(--cyan)}

.strength{height:4px;border-radius:3px;background:#1a2a1a;margin-top:8px;overflow:hidden}
.strength > i{display:block;height:100%;width:0;transition:all .3s;border-radius:3px}

/* forgot password */
.forgot-row{text-align:center;margin-top:12px}
.forgot-link,.back-login{color:var(--dim);font-size:12px;letter-spacing:.5px;cursor:pointer}
.forgot-link:hover,.back-login:hover{color:var(--cyan);text-decoration:underline}
.forgot-hint{color:var(--dim);font-size:12px;line-height:1.6;margin-bottom:16px;text-align:center}

/* security question select */
.sec-select{width:100%;background:#020802;border:1px solid var(--border);border-radius:6px;
  padding:12px 14px;color:var(--green);font-family:var(--font);font-size:14px;outline:none;transition:all .25s;cursor:pointer}
.sec-select:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.25)}
.sec-select option{background:#0a1a0a;color:var(--green)}
.hint-inline{font-size:9px;color:var(--dim);letter-spacing:0;text-transform:none;font-weight:normal}

/* ---- Google bilan kirish ---- */
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;color:#1f2937;border:1px solid #dadce0;border-radius:9px;
  padding:11px 14px;font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:all .18s;margin-bottom:6px}
.google-btn:hover{box-shadow:0 2px 12px rgba(0,0,0,.35);transform:translateY(-1px)}
.google-btn .g-ico{display:flex;align-items:center;justify-content:center}
.auth-divider{display:flex;align-items:center;text-align:center;color:var(--dim);
  font-size:11px;letter-spacing:1px;margin:14px 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-divider span{padding:0 12px}