.auth-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }

.auth-aside {
  position: relative;
  overflow: hidden;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  border-right: 1px solid var(--border-subtle);
}
@media (max-width: 900px) { .auth-aside { display: none; } }
.auth-aside__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 10%, transparent 70%);
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 48px 48px;
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside__body { margin-top: auto; max-width: 30ch; }
.auth-aside__body h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-display); line-height: 1.14; }
.auth-aside__body p { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); }
.auth-aside__points { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.auth-aside__point { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.auth-aside__point svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }

.auth-main {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}
.auth-main__top { display: flex; align-items: center; justify-content: space-between; }
.auth-main__top .brand { display: none; }
@media (max-width: 900px) { .auth-main__top .brand { display: inline-flex; } }

.auth-card {
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding-block: var(--space-8);
}
.auth-card__head { margin-bottom: var(--space-7); }
.auth-card__head h1 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.auth-card__head p { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }

.auth-form { display: flex; flex-direction: column; gap: var(--space-5); }
.auth-form .btn--primary { margin-top: var(--space-1); }

.auth-alt { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.auth-meta { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-subtle); }
.auth-meta svg { width: 14px; height: 14px; }

.pw-meter { display: flex; gap: 5px; margin-top: var(--space-2); }
.pw-meter span { height: 3px; flex: 1; border-radius: var(--radius-full); background: var(--border); transition: background var(--dur) var(--ease-out); }
.pw-meter[data-score="1"] span:nth-child(-n+1),
.pw-meter[data-score="2"] span:nth-child(-n+2),
.pw-meter[data-score="3"] span:nth-child(-n+3),
.pw-meter[data-score="4"] span:nth-child(-n+4) { background: var(--text); }
.pw-hint { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); min-height: 1.2em; }

.form-status {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: var(--text-sm);
  color: var(--text);
}
.form-status.show { display: flex; }
.form-status svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }