@layer views {
/* Sign in, setup, change password */
.login { position: fixed; inset: 0; background: var(--bg-0); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr); overflow: auto; }
.login-art {
  position: relative; overflow: hidden; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px;
  background: radial-gradient(900px 500px at 20% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
              radial-gradient(700px 400px at 80% 80%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%), var(--bg-1);
}
.login-art loop-art { position: absolute; inset: 0; display: block; }
.login-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-art .brand { position: relative; display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-20); letter-spacing: -0.01em; }
/* Centered in the loop's left lobe; loop-art measures it into --lobe-x, --lobe-y and --lobe-w. */
.login-art .claim {
  position: absolute; left: var(--lobe-x, 30%); top: var(--lobe-y, 50%); transform: translate(-50%, -50%); width: max-content; max-width: calc(var(--lobe-w, 360px) * 0.86);
  font-family: var(--f-display); font-weight: 800; font-size: clamp(24px, calc(var(--lobe-w, 360px) * 0.1), 56px); letter-spacing: -0.03em; line-height: 1.05; text-align: center;
}
.login-art .claim span { display: block; background: var(--loop); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-art .foot { position: relative; font-size: var(--fs-12); color: var(--fg-3); display: flex; gap: 16px; flex-wrap: wrap; }
.login-form { display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 6vw, 80px); gap: 18px; max-width: 560px; width: 100%; margin: 0 auto; }
.login-form h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-28); letter-spacing: -0.02em; }
.login-form .sub { color: var(--fg-3); font-size: var(--fs-13); line-height: 1.55; }
.login-form form { display: flex; flex-direction: column; gap: 16px; }
.login-steps { display: flex; gap: 6px; }
.login-steps i { height: 4px; flex: 1; border-radius: var(--r-2); background: var(--bg-4); }
.login-steps i.on { background: var(--loop); }
.strength { display: flex; gap: 4px; margin-top: 4px; }
.strength i { flex: 1; height: 4px; border-radius: var(--r-2); background: var(--bg-4); }
.strength i.on { background: var(--ok); }
.dev-login { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--line-2); padding-top: 14px; }
.dev-login form { display: contents; }

@media (max-width: 1100px) { .login { grid-template-columns: 1fr; } .login-art { display: none; } }

.auth-note { font-size: var(--fs-12); }
.auth-dev-label { font-size: var(--fs-11-5); width: 100%; }
}