.axis-auth-shell{
  min-height:100vh;
  padding:20px;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(79,70,229,0.16), transparent 24%),
    linear-gradient(180deg, var(--axis-bg-base), color-mix(in srgb, var(--axis-bg-elevated) 88%, var(--axis-bg-base)));
  color:var(--axis-text-primary);
}

.axis-auth-stage{
  width:min(1040px, 100%);
  margin:0 auto;
  min-height:calc(100vh - 40px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(380px, 0.88fr);
  gap:20px;
  align-items:stretch;
}

.axis-auth-brand,
.axis-auth-card{
  border:1px solid var(--axis-border-light);
  border-radius:24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--axis-bg-elevated) 94%, transparent), color-mix(in srgb, var(--axis-bg-surface) 98%, transparent));
  box-shadow:0 28px 80px rgba(0,0,0,.22);
}

.axis-auth-brand{
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  overflow:hidden;
  position:relative;
}

.axis-auth-brand::after{
  content:"";
  position:absolute;
  inset:auto -60px -80px auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.22), transparent 65%);
  pointer-events:none;
}

.axis-auth-card{
  padding:24px;
  display:grid;
  gap:18px;
  align-content:start;
}

.axis-auth-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.axis-auth-logo{
  position:relative;
  width:136px;
  height:32px;
  display:block;
  overflow:hidden;
}

.axis-auth-logo .axis-logo-dark,
.axis-auth-logo .axis-logo-light{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}

.axis-auth-logo .axis-auth-wordmark{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  color:var(--axis-text-primary);
}

.axis-auth-theme{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  min-width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--axis-border-light);
  background:var(--axis-bg-muted);
  color:var(--axis-text-primary);
  cursor:pointer;
}

.axis-auth-copy{
  display:grid;
  gap:10px;
  max-width:500px;
}

.axis-auth-copy h1{
  font-size:clamp(24px, 2.8vw, 42px);
  line-height:1.05;
  letter-spacing:-0.04em;
}

.axis-auth-copy p{
  max-width:480px;
  color:var(--axis-text-secondary);
  font-size:.94rem;
}

.axis-auth-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--axis-text-muted);
}

.axis-auth-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.axis-auth-metric{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--axis-border-subtle);
  background:color-mix(in srgb, var(--axis-bg-muted) 78%, transparent);
}

.axis-auth-metric span{
  display:block;
  margin-bottom:8px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--axis-text-muted);
}

.axis-auth-metric strong{
  display:block;
  font-size:1.05rem;
}

.axis-auth-list{
  display:grid;
  gap:10px;
}

.axis-auth-list-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:16px;
  background:color-mix(in srgb, var(--axis-bg-muted) 72%, transparent);
  border:1px solid var(--axis-border-subtle);
}

.axis-auth-list-item iconify-icon{
  margin-top:2px;
  font-size:1.1rem;
  color:var(--axis-brand-primary);
}

.axis-auth-list-item strong{
  display:block;
  margin-bottom:4px;
}

.axis-auth-list-item p{
  color:var(--axis-text-secondary);
  font-size:.86rem;
}

.axis-auth-card-head{
  display:grid;
  gap:8px;
}

.axis-auth-card-head h2{
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.06;
  letter-spacing:-0.03em;
}

.axis-auth-card-head p{
  color:var(--axis-text-secondary);
}

.axis-auth-form{
  display:grid;
  gap:14px;
}

.axis-auth-form .axis-field{
  display:grid;
  gap:8px;
}

.axis-auth-form .axis-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--axis-text-primary);
  font-weight:600;
}

.axis-auth-form .axis-input{
  min-height:46px;
  border-radius:14px;
}

.axis-auth-hint{
  min-height:18px;
  color:var(--axis-text-secondary);
  font-size:.84rem;
}

.axis-auth-hint.is-error{
  color:#ef4444;
}

.axis-auth-hint.is-success{
  color:#22c55e;
}

.axis-auth-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.axis-auth-actions .axis-btn{
  min-height:42px;
  border-radius:14px;
}

.axis-auth-actions-main{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.axis-auth-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--axis-text-secondary);
  font-weight:600;
}

.axis-auth-mini{
  font-size:.82rem;
  color:var(--axis-text-secondary);
}

.axis-auth-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding-top:4px;
}

.axis-auth-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--axis-border-subtle);
  background:color-mix(in srgb, var(--axis-bg-muted) 72%, transparent);
  color:var(--axis-text-secondary);
  font-size:.78rem;
}

.axis-auth-profile-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.axis-auth-stat{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--axis-border-subtle);
  background:color-mix(in srgb, var(--axis-bg-muted) 72%, transparent);
}

.axis-auth-stat span{
  display:block;
  margin-bottom:8px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--axis-text-muted);
}

.axis-auth-stat strong{
  display:block;
  font-size:1rem;
}

@media (max-width: 1080px){
  .axis-auth-stage{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .axis-auth-shell{
    padding:14px;
  }

  .axis-auth-stage{
    min-height:auto;
    gap:14px;
  }

  .axis-auth-brand,
  .axis-auth-card{
    padding:18px;
    border-radius:18px;
  }

  .axis-auth-grid,
  .axis-auth-profile-grid{
    grid-template-columns:1fr;
  }

  .axis-auth-top{
    align-items:flex-start;
  }

  .axis-auth-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .axis-auth-actions-main{
    width:100%;
  }

  .axis-auth-actions-main .axis-btn,
  .axis-auth-actions .axis-btn{
    width:100%;
    justify-content:center;
  }
}