.auth-main {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.055), transparent 38%),
    #0d0d0d;
}
.auth-shell { width: 100%; max-width: 27rem; }
.auth-brand {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 1.5rem;
  color: #e8e8e8; font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
}
.auth-brand-mark {
  display: grid; place-items: center; width: 1.65rem; height: 1.65rem;
  border: 1px solid #343434; border-radius: .4rem; background: #181818; color: #a3a3a3;
}
.auth-panel {
  padding: 1.25rem; border: 1px solid #2b2b2b; border-radius: .75rem;
  background: rgba(20,20,20,.96); box-shadow: 0 18px 55px rgba(0,0,0,.35);
}
.auth-eyebrow {
  margin-bottom: .55rem; color: #777; font: 500 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase; letter-spacing: .08em;
}
.auth-title { margin: 0; color: #f1f1f1; font-size: 1.35rem; font-weight: 600; letter-spacing: -.025em; }
.auth-subtitle { margin: .45rem 0 0; color: #8d8d8d; font-size: .82rem; line-height: 1.5; }
.auth-identity {
  display: flex; align-items: center; gap: .65rem; margin-top: 1.1rem; padding: .7rem .75rem;
  border: 1px solid #303030; border-radius: .5rem; background: #101010;
}
.auth-identity-icon { color: #a8b1ff; width: 1.1rem; height: 1.1rem; flex: none; }
.auth-identity-copy { min-width: 0; }
.auth-identity-label { color: #777; font-size: .68rem; }
.auth-identity-name { color: #ddd; font: 500 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.auth-alert {
  display: flex; gap: .55rem; margin-top: 1rem; padding: .7rem .75rem;
  border: 1px solid #5b2929; border-radius: .5rem; background: #211313; color: #f0a4a4;
  font-size: .78rem; line-height: 1.45;
}
.auth-alert svg { width: 1rem; height: 1rem; flex: none; margin-top: .08rem; }
.auth-form { display: grid; gap: .9rem; margin-top: 1.25rem; }
.auth-field { display: grid; gap: .4rem; }
.auth-label { color: #b6b6b6; font-size: .75rem; font-weight: 500; }
.auth-hint { color: #666; font-size: .68rem; line-height: 1.4; }
.auth-input-wrap { position: relative; }
.auth-input {
  width: 100%; min-height: 2.75rem; padding: .65rem .75rem;
  border: 1px solid #353535; border-radius: .48rem; outline: none;
  background: #101010; color: #eee; font-size: .84rem; transition: border-color 140ms, box-shadow 140ms;
}
.auth-input.has-toggle { padding-right: 2.75rem; }
.auth-input::placeholder { color: #555; }
.auth-input:hover { border-color: #454545; }
.auth-input:focus { border-color: #737373; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.auth-toggle {
  position: absolute; top: 50%; right: .45rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: .35rem;
  background: transparent; color: #777; cursor: pointer;
}
.auth-toggle:hover { background: #202020; color: #ccc; }
.auth-toggle svg { width: 1rem; height: 1rem; }
.auth-submit {
  display: inline-flex; justify-content: center; align-items: center; gap: .5rem;
  width: 100%; min-height: 2.75rem; margin-top: .15rem; border: 1px solid #d8d8d8;
  border-radius: .48rem; background: #e8e8e8; color: #111; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: background 140ms, transform 80ms;
}
.auth-submit:hover { background: #fff; }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-empty { margin-top: 1.1rem; padding: .85rem; border: 1px dashed #343434; border-radius: .5rem; color: #888; font-size: .78rem; line-height: 1.55; }
.auth-empty code { color: #bbb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.auth-footer { margin-top: 1.1rem; color: #707070; font-size: .76rem; text-align: center; }
.auth-footer a, .auth-inline-link { color: #c8c8c8; text-decoration: none; }
.auth-footer a:hover, .auth-inline-link:hover { color: #fff; text-decoration: underline; }
.auth-divider { height: 1px; margin: 1.15rem 0; background: #292929; }
.auth-link-copy { margin-bottom: 1rem; color: #929292; font-size: .8rem; line-height: 1.5; }
@media (max-width: 420px) {
  .auth-main { display: block; padding: 1.1rem; }
  .auth-shell { max-width: none; }
  .auth-brand { margin: .2rem 0 2.2rem; }
  .auth-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .auth-input, .auth-submit { transition: none; } }