diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl
index 3c6ea78f78..fab7ffedf3 100644
--- a/templates/user/auth/signin_inner.tmpl
+++ b/templates/user/auth/signin_inner.tmpl
@@ -1,10 +1,16 @@
-<div class="ui container fluid">
-	<div class="tw-text-center tw-mb-4">
-		<img src="{{AssetUrlPrefix}}/img/login-logo.png" style="max-width: 220px; max-height: 80px; object-fit: contain;" onerror="this.style.display='none'">
+<div class="ui container fluid mokogit-auth">
+	{{/* MokoGIT: MokoAi (mokoonyx) login "mold" — branded card wrapper + logo.
+	     login-logo.png is an optional admin-branding upload; fall back to the
+	     always-present logo.svg so the mark never renders broken (#819). */}}
+	<div class="mokogit-auth-brand tw-text-center tw-mb-4">
+		<img class="mokogit-auth-logo" src="{{AssetUrlPrefix}}/img/login-logo.png"
+			onerror="this.onerror=null; this.src='{{AssetUrlPrefix}}/img/logo.svg';"
+			alt="{{ctx.Locale.Tr "logo"}}" style="max-width: 220px; max-height: 80px; object-fit: contain;">
 	</div>
 	{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}}
 	{{template "base/alert" .}}
 	{{end}}
+	<div class="mokogit-auth-card">
 	<h4 class="ui top attached header center">
 		{{if .LinkAccountMode}}
 			{{ctx.Locale.Tr "auth.oauth_signin_title"}}
@@ -58,6 +64,7 @@
 			{{template "user/auth/external_auth_methods" .}}
 		{{end}}
 	</div>
+	</div>{{/* .mokogit-auth-card */}}
 </div>
 
 {{if or .EnablePasskeyAuth .ShowRegistrationButton}}
diff --git a/web_src/css/mokogit-brand.css b/web_src/css/mokogit-brand.css
index cd6bb28247..da85388fc3 100644
--- a/web_src/css/mokogit-brand.css
+++ b/web_src/css/mokogit-brand.css
@@ -112,3 +112,62 @@ body:has(.page-content.user.link-account) {
   border-radius: var(--border-radius);
   box-shadow: var(--mokogit-shadow-lg);
 }
+
+/* ---- Login/auth card: MokoAi (mokoonyx) look ----
+ * This login treatment is the reference "mold" for future page rethemes
+ * (issue #822). It maps the ai.dev mokoonyx surface onto Gitea's Fomantic
+ * auth card using theme variables (so light + dark both follow the active
+ * MokoGIT theme) rather than hardcoded hex. Scope is intentionally limited to
+ * the auth family (.page-content.user.signin / .link-account). The card is
+ * wrapped in .mokogit-auth-card by templates/user/auth/signin_inner.tmpl. */
+.mokogit-auth-card {
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: var(--mokogit-shadow-lg);
+}
+.mokogit-auth-logo {
+  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 35%));
+}
+.page-content.user.signin .ui.attached.header,
+.page-content.user.link-account .ui.attached.header {
+  background: var(--color-box-header);
+  border-color: var(--color-secondary);
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.page-content.user.signin .ui.attached.segment,
+.page-content.user.link-account .ui.attached.segment {
+  background: var(--color-box-body);
+  border-color: var(--color-secondary);
+}
+
+/* Primary action + links use the mokoonyx accent already defined by the theme
+ * (--color-primary = #3f8ff0 in theme-mokogit-dark). */
+.page-content.user.signin .ui.primary.button,
+.page-content.user.link-account .ui.primary.button {
+  background: var(--color-primary);
+  color: var(--color-primary-contrast);
+}
+.page-content.user.signin .ui.primary.button:hover,
+.page-content.user.link-account .ui.primary.button:hover {
+  background: var(--color-primary-hover);
+}
+.page-content.user.signin a,
+.page-content.user.link-account a {
+  color: var(--color-primary);
+}
+
+/* Inputs: mokoonyx field surface + focus ring. */
+.page-content.user.signin .ui.form input:not([type="checkbox"]):not([type="radio"]),
+.page-content.user.link-account .ui.form input:not([type="checkbox"]):not([type="radio"]) {
+  background: var(--color-input-background);
+  border-color: var(--color-input-border);
+  color: var(--color-input-text);
+}
+.page-content.user.signin .ui.form input:focus,
+.page-content.user.link-account .ui.form input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-alpha-30);
+}