Add authenticated login and SSO protection

app/globals.css

@@ -2455,7 +2455,7 @@ button:active:not(:disabled),
   }
 
   .settings-tabs {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
   .asset-view-switch button,
@@ -2513,3 +2513,225 @@ button:active:not(:disabled),
     margin-bottom: 10px;
   }
 }
+
+.topbar-account {
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.account-chip {
+  min-height: 38px;
+  max-width: 190px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 11px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--muted-strong);
+  font-size: 13px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.account-chip span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.account-chip svg,
+.logout-button svg,
+.login-link svg {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+
+.logout-button {
+  width: 38px;
+  min-height: 38px;
+  padding: 0;
+  border-radius: 999px;
+}
+
+.auth-shell {
+  min-height: 100dvh;
+  background:
+    linear-gradient(90deg, rgba(220, 227, 221, 0.55) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(220, 227, 221, 0.45) 1px, transparent 1px),
+    var(--bg);
+  background-size: 44px 44px;
+}
+
+.auth-main {
+  width: 100%;
+  min-height: 100dvh;
+  padding: 0;
+}
+
+.auth-page {
+  min-height: 100dvh;
+  width: min(1120px, 100%);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 440px);
+  align-items: center;
+  gap: clamp(28px, 6vw, 72px);
+  padding: clamp(36px, 8vw, 76px) 24px;
+}
+
+.auth-brand-panel {
+  display: grid;
+  justify-items: start;
+  gap: 16px;
+}
+
+.auth-brand-logo {
+  display: block;
+  width: min(292px, 76vw);
+  height: auto;
+  object-fit: contain;
+}
+
+.auth-brand-panel h1 {
+  margin: 0;
+  max-width: 9em;
+  font-size: clamp(36px, 5vw, 58px);
+  line-height: 1.05;
+  font-weight: 900;
+  color: var(--ink);
+}
+
+.auth-panel {
+  width: 100%;
+  display: grid;
+  justify-items: stretch;
+  gap: 18px;
+  padding: 28px;
+}
+
+.auth-panel h2 {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.2;
+}
+
+.auth-password-form {
+  width: 100%;
+  display: grid;
+  gap: 14px;
+}
+
+.auth-password-form .field {
+  margin-bottom: 0;
+}
+
+.auth-captcha-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 118px;
+  gap: 8px;
+  align-items: center;
+}
+
+.auth-captcha-button {
+  height: 44px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  overflow: hidden;
+}
+
+.auth-captcha-button img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.auth-submit,
+.auth-submit.button {
+  width: 100%;
+  min-height: 46px;
+}
+
+@media (max-width: 920px) {
+  .topbar {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .top-nav {
+    justify-self: center;
+  }
+
+  .account-chip {
+    max-width: 150px;
+  }
+}
+
+@media (max-width: 700px) {
+  .topbar-account {
+    grid-column: 1 / -1;
+    justify-self: stretch;
+    justify-content: flex-end;
+  }
+
+  .account-chip {
+    max-width: min(260px, calc(100vw - 92px));
+  }
+
+  .auth-page {
+    grid-template-columns: 1fr;
+    align-content: center;
+    gap: 24px;
+    padding: 34px 14px;
+  }
+
+  .auth-brand-panel {
+    justify-items: center;
+    text-align: center;
+    gap: 10px;
+  }
+
+  .auth-brand-panel h1 {
+    font-size: 34px;
+  }
+
+  .auth-panel {
+    padding: 20px;
+  }
+}
+
+@media (max-width: 560px) {
+  .topbar {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .topbar-account {
+    padding-top: 0;
+  }
+
+  .account-chip {
+    min-height: 34px;
+    max-width: calc(100vw - 78px);
+    padding: 0 9px;
+    font-size: 12px;
+  }
+
+  .logout-button {
+    width: 34px;
+    min-height: 34px;
+  }
+
+  .auth-captcha-row {
+    grid-template-columns: minmax(0, 1fr) 104px;
+  }
+}