@layer components {

.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: var(--gray-500);
}

.auth-footer a {
  font: inherit;
  color: var(--blue-ink);
  text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }
.auth-footer a:focus-visible { outline: 2px solid #4a9eff; outline-offset: 2px; border-radius: 4px; }

.auth-aside {
  text-align: center;
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--gray-500);
}
.auth-aside a {
  color: var(--gray-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-aside a:hover { color: var(--white); }
.auth-aside a:focus-visible { outline: 2px solid #4a9eff; outline-offset: 2px; border-radius: 4px; }

.back-link {
  position: fixed;
  top: 24px;
  right: 32px;
  font-size: 13px;
  color: var(--gray-400);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
  z-index: 10;
}
.back-link:hover { color: var(--white); }
.back-link:focus-visible { outline: 2px solid #4a9eff; outline-offset: 3px; border-radius: 4px; }
.back-link svg { display: block; }

.skip {
  position: absolute; left: 12px; top: 12px; z-index: 20;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  background: #16161a; color: var(--white);
  border: 1px solid var(--glass-border);
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
  text-decoration: none;
}
.skip:focus { width: auto; height: auto; clip-path: none; }
}