/* Header Auth (login / logged-in) */
.header-auth{
  pointer-events:auto;
  position:absolute;
  left:81%;
  top:50%;
  transform:translate(-50%,-50%);
  width:280px;
  max-width:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 980px){
  .header-auth{ left:77%; top:60%; width:260px; max-width:260px; }
}

/* Inputs in header should never inherit "big white" global styles */
.header-auth .auth-input{
  width:100%;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.42);
  color:var(--text);
  outline:none;
  font-size:13px;
  line-height:34px;
}
.header-auth .auth-input::placeholder{ color:rgba(230,237,243,.55); }
.header-auth .auth-input:focus{ border-color:rgba(255,106,42,.35); box-shadow:0 0 0 3px rgba(255,106,42,.12); }

.header-auth .auth-form{ width:100%; display:flex; flex-direction:column; gap:10px; }
.header-auth .auth-row{ display:flex; gap:10px; align-items:center; justify-content:center; }
.header-auth .auth-row.top{ gap:8px; }
.header-auth .auth-row.bottom{ gap:12px; }

.header-auth .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.32);
  color:var(--text);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.header-auth .btn:hover{ border-color:rgba(255,106,42,.35); }
.header-auth .btn.ghost{ background:rgba(0,0,0,.18); }
.header-auth .btn.twitch{ border-color:rgba(166,117,255,.35); }
.header-auth .btn.icon{
  width:34px;
  min-width:34px;
  padding:0;
}
.header-auth .btn.icon span{ display:block; transform:translateX(1px); font-size:18px; line-height:1; }

/* logged-in block */
.header-auth .auth-logged{ width:100%; display:flex; flex-direction:column; gap:10px; align-items:center; }
.header-auth .auth-head{ display:flex; gap:10px; align-items:center; justify-content:center;
  width:100%;
}
.header-auth img.avatar{
  width:34px; height:34px; border-radius:999px; object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
}
.header-auth .u .name{ font-weight:800; font-size:14px; line-height:1.1; }
.header-auth .u .sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.header-auth .auth-actions{ display:flex; gap:12px; justify-content:center; width:100%; }