/* Login / register / password reset */
.auth { min-height: calc(100vh - var(--header-h)); display: grid; }
@media (min-width: 1024px) { .auth { grid-template-columns: 1fr 1fr; } }
.auth-side {
  display: none; position: relative; overflow: hidden; padding: 56px; color: #fff;
  background: linear-gradient(150deg, var(--brand-700, #1c3ba8) 0%, var(--brand, #2f5deb) 50%, var(--grad, #6d5cff) 100%);
}
@media (min-width: 1024px) { .auth-side { display: flex; flex-direction: column; justify-content: center; } }
.auth-side::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 30% 30%, #000, transparent 70%);
}
.auth-side::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--accent); filter: blur(90px); opacity: .35; bottom: -160px; inset-inline-end: -120px; }
.auth-side > * { position: relative; z-index: 1; max-width: 460px; }
.auth-side h2 { color: #fff; font-size: 34px; margin-bottom: 28px; }
.auth-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.auth-side li { display: flex; gap: 12px; align-items: center; font-size: 16px; color: rgba(255,255,255,.92); }
.auth-side li span.i { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; }
.auth-side li svg { width: 18px; height: 18px; }
.auth-side .side-icon { width: 84px; height: 84px; margin-bottom: 26px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 16px 56px; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card h1 { font-size: 30px; margin-bottom: 8px; }
.auth-card .sub { color: var(--text-2); margin-bottom: 28px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 20px; flex-wrap: wrap; }
.auth-foot { margin-top: 22px; text-align: center; color: var(--text-2); font-size: 14.5px; }
.auth-foot a { font-weight: 600; }
.grid-2 { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.auth-alert { margin-bottom: 18px; }

.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.strength i { height: 4px; border-radius: 4px; background: var(--border); transition: background .25s; }
.strength[data-s="0"] i:nth-child(-n+1) { background: var(--danger); }
.strength[data-s="1"] i:nth-child(-n+2) { background: var(--warning); }
.strength[data-s="2"] i:nth-child(-n+3) { background: var(--brand); }
.strength[data-s="3"] i { background: var(--success); }
.hint { font-size: 12.5px; color: var(--text-3); display: flex; justify-content: space-between; gap: 8px; }
.code-input { text-align: center; font-size: 22px; letter-spacing: .5em; font-weight: 700; font-family: ui-monospace, Menlo, monospace; direction: ltr; }