Update: login/signup form margin-top

docs/css/auth-additions.css

@@ -1,238 +0,0 @@
-/* ── Auth pages (login / signup) ───────────────────────────────────────── */
-
-.auth-page {
-	max-width: 420px;
-	margin: 0 auto;
-	padding: 1rem 0 3rem;
-}
-
-.auth-page__title {
-	margin-bottom: 1.5rem;
-}
-
-.auth-card {
-	border: 1px solid var(--background-color1, #ccc);
-	border-radius: 10px;
-	padding: 2rem 1.75rem;
-	background: var(--background-color);
-}
-
-/* Message banner */
-.auth-message {
-	border-radius: 6px;
-	padding: 0.65rem 0.9rem;
-	font-size: 0.88rem;
-	margin-bottom: 1.2rem;
-	line-height: 1.4;
-}
-
-.auth-message--error {
-	background: rgba(220, 53, 69, 0.12);
-	border: 1px solid rgba(220, 53, 69, 0.4);
-	color: #c0392b;
-}
-
-[data-theme='dark'] .auth-message--error {
-	color: #ff6b6b;
-	background: rgba(220, 53, 69, 0.18);
-	border-color: rgba(220, 53, 69, 0.5);
-}
-
-.auth-message--success {
-	background: rgba(39, 174, 96, 0.12);
-	border: 1px solid rgba(39, 174, 96, 0.4);
-	color: #1e8449;
-}
-
-[data-theme='dark'] .auth-message--success {
-	color: #58d68d;
-	background: rgba(39, 174, 96, 0.18);
-	border-color: rgba(39, 174, 96, 0.5);
-}
-
-/* Form fields */
-.auth-form {
-	display: flex;
-	flex-direction: column;
-	gap: 1.1rem;
-}
-
-.auth-form__group {
-	display: flex;
-	flex-direction: column;
-	gap: 0.3rem;
-}
-
-.auth-form__label {
-	font-size: 0.85rem;
-	font-weight: 600;
-	color: var(--foreground-color);
-}
-
-.auth-form__input-wrap {
-	position: relative;
-	display: flex;
-	align-items: center;
-}
-
-.auth-form__input-wrap .auth-form__input {
-	padding-right: 2.5rem;
-}
-
-.auth-form__input {
-	width: 100%;
-	box-sizing: border-box;
-	padding: 0.5rem 0.75rem;
-	border: 1px solid var(--background-color1, #ccc);
-	border-radius: 5px;
-	font-size: 0.9rem;
-	background: var(--background-color);
-	color: var(--foreground-color);
-	transition:
-		border-color 0.18s ease,
-		box-shadow 0.18s ease;
-	outline: none;
-	font-family: inherit;
-}
-
-.auth-form__input:focus {
-	border-color: var(--accent-color);
-	box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 17, 51, 233), 0.15);
-}
-
-.auth-form__input::placeholder {
-	color: var(--foreground-color3, #888);
-	opacity: 0.7;
-}
-
-.auth-form__eye {
-	position: absolute;
-	right: 0.6rem;
-	background: none;
-	border: none;
-	cursor: pointer;
-	color: var(--foreground-color3, #888);
-	display: inline-flex;
-	align-items: center;
-	padding: 0.2rem;
-	line-height: 1;
-	transition: color 0.15s ease;
-}
-
-.auth-form__eye:hover {
-	color: var(--foreground-color);
-}
-
-.auth-form__hint {
-	font-size: 0.75rem;
-	color: var(--foreground-color3, #888);
-}
-
-/* Submit button */
-.auth-form__submit {
-	margin-top: 0.5rem;
-	width: 100%;
-	padding: 0.6rem 1rem;
-	border: none;
-	border-radius: 5px;
-	background: var(--accent-color);
-	color: var(--background-color, #fff);
-	font-size: 0.92rem;
-	font-weight: 600;
-	font-family: inherit;
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.4rem;
-	transition: opacity 0.18s ease;
-}
-
-.auth-form__submit:hover:not(:disabled) {
-	opacity: 0.85;
-}
-
-.auth-form__submit:disabled {
-	cursor: not-allowed;
-	opacity: 0.6;
-}
-
-.auth-form__submit-loader {
-	display: inline-flex;
-	align-items: center;
-}
-
-/* Spinner animation */
-@keyframes auth-spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-.spin {
-	animation: auth-spin 0.8s linear infinite;
-}
-
-/* Footer link */
-.auth-card__footer {
-	margin-top: 1.4rem;
-	text-align: center;
-	font-size: 0.85rem;
-	color: var(--foreground-color3, #888);
-}
-
-.auth-card__link {
-	color: var(--accent-color);
-	text-decoration: none;
-	font-weight: 600;
-}
-
-.auth-card__link:hover {
-	text-decoration: underline;
-}
-
-/* Light theme override for submit button text */
-[data-theme='light'] .auth-form__submit {
-	color: #fff;
-}
-
-/* ── OTP panel ───────────────────────────────────────────────────────────── */
-
-.otp-panel__hint {
-	font-size: 0.87rem;
-	line-height: 1.5;
-	color: var(--foreground-color);
-	margin: 0;
-}
-
-.otp-panel__input {
-	letter-spacing: 0.25em;
-	font-size: 1.15rem;
-	text-align: center;
-}
-
-.otp-panel__resend {
-	font-size: 0.82rem;
-	color: var(--foreground-color3, #888);
-	text-align: center;
-	margin: 0;
-}
-
-.otp-panel__resend-btn {
-	background: none;
-	border: none;
-	padding: 0;
-	font: inherit;
-	font-size: 0.82rem;
-	color: var(--accent-color);
-	cursor: pointer;
-	font-weight: 600;
-	text-decoration: underline;
-}
-
-.otp-panel__resend-btn:hover {
-	opacity: 0.8;
-}

docs/css/custom.css

@@ -871,8 +871,8 @@
 /* ── Comments section ─────────────────────────────────────────────────────── */
 
 .comments {
-	margin-top: 3rem;
+	margin-top: 1rem;
-	padding-top: 2rem;
+	padding-top: 1.28rem;
 	border-top: 1px solid var(--background-color1, #ddd);
 }
 
@@ -1074,3 +1074,258 @@
 .comment__replies {
 	margin-top: 0.5rem;
 }
+/* ── Auth pages (login / signup) ───────────────────────────────────────── */
+
+.auth-page {
+	max-width: 420px;
+	margin: 2.5rem auto 0;
+	padding: 0 0 3rem;
+}
+
+.auth-page__title {
+	margin-top: 55.2px;
+	margin-bottom: 1.2rem;
+}
+
+.auth-card {
+	border: 1px solid var(--background-color1, #ccc);
+	border-radius: 10px;
+	padding: 1.25rem 1.75rem 2rem;
+	background: var(--background-color);
+}
+
+/* Message banner — fixed height always reserved so the form never shifts */
+.auth-message {
+	border-radius: 4px;
+	font-size: 0.82rem;
+	line-height: 1.3;
+	height: 1.8rem;
+	margin-bottom: 0.75rem;
+	box-sizing: border-box;
+	border: 1px solid transparent;
+	background: transparent;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.15s ease;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	padding: 0 0.7rem;
+}
+
+.auth-message.is-visible {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.auth-message--error {
+	background: rgba(255, 61, 61, 0.1);
+	border: 1px solid rgba(255, 61, 61, 0.4);
+	color: #ff3d3d;
+}
+
+[data-theme='dark'] .auth-message--error {
+	color: #ff3d3d;
+	background: rgba(255, 61, 61, 0.15);
+	border-color: rgba(255, 61, 61, 0.5);
+}
+
+.auth-message--success {
+	background: rgba(39, 174, 96, 0.12);
+	border: 1px solid rgba(39, 174, 96, 0.4);
+	color: #1e8449;
+}
+
+[data-theme='dark'] .auth-message--success {
+	color: #58d68d;
+	background: rgba(39, 174, 96, 0.18);
+	border-color: rgba(39, 174, 96, 0.5);
+}
+
+/* Form fields */
+.auth-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1.1rem;
+}
+
+.auth-form__group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.3rem;
+}
+
+.auth-form__label {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--foreground-color);
+}
+
+.auth-form__input-wrap {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 1.1rem;
+}
+
+.auth-form__input-wrap .auth-form__input {
+	padding-right: 2.5rem;
+}
+
+.auth-form__input {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0.5rem 0.75rem;
+	border: 1px solid var(--background-color1, #ccc);
+	border-radius: 5px;
+	font-size: 0.9rem;
+	background: var(--background-color);
+	color: var(--foreground-color);
+	transition:
+		border-color 0.18s ease,
+		box-shadow 0.18s ease;
+	outline: none;
+	font-family: inherit;
+}
+
+.auth-form__input:focus {
+	border-color: var(--accent-color);
+	box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 17, 51, 233), 0.15);
+}
+
+.auth-form__input::placeholder {
+	color: var(--foreground-color3, #888);
+	opacity: 0.7;
+}
+
+.auth-form__eye {
+	position: absolute;
+	right: 0.6rem;
+	background: none;
+	border: none;
+	cursor: pointer;
+	color: var(--foreground-color3, #888);
+	display: inline-flex;
+	align-items: center;
+	padding: 0.2rem;
+	line-height: 1;
+	transition: color 0.15s ease;
+}
+
+.auth-form__eye:hover {
+	color: var(--foreground-color);
+}
+
+.auth-form__hint {
+	font-size: 0.75rem;
+	color: var(--foreground-color3, #888);
+}
+
+/* Submit button */
+.auth-form__submit {
+	margin-top: 0.5rem;
+	width: 100%;
+	padding: 0.6rem 1rem;
+	border: none;
+	border-radius: 5px;
+	background: var(--accent-color);
+	color: var(--background-color, #fff);
+	font-size: 0.92rem;
+	font-weight: 600;
+	font-family: inherit;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
+	transition: opacity 0.18s ease;
+}
+
+.auth-form__submit:hover:not(:disabled) {
+	opacity: 0.85;
+}
+
+.auth-form__submit:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.auth-form__submit-loader {
+	display: inline-flex;
+	align-items: center;
+}
+
+/* Spinner animation */
+@keyframes auth-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.spin {
+	animation: auth-spin 0.8s linear infinite;
+}
+
+/* Footer link */
+.auth-card__footer {
+	margin-top: 1.4rem;
+	text-align: center;
+	font-size: 0.85rem;
+	color: var(--foreground-color3, #888);
+}
+
+.auth-card__link {
+	color: var(--accent-color);
+	text-decoration: none;
+	font-weight: 600;
+}
+
+.auth-card__link:hover {
+	text-decoration: underline;
+}
+
+/* Light theme override for submit button text */
+[data-theme='light'] .auth-form__submit {
+	color: #fff;
+}
+
+/* ── OTP panel ───────────────────────────────────────────────────────────── */
+
+.otp-panel__hint {
+	font-size: 0.87rem;
+	line-height: 1.5;
+	color: var(--foreground-color);
+	margin: 0;
+}
+
+.otp-panel__input {
+	letter-spacing: 0.25em;
+	font-size: 1.15rem;
+	text-align: center;
+}
+
+.otp-panel__resend {
+	font-size: 0.82rem;
+	color: var(--foreground-color3, #888);
+	text-align: center;
+	margin: 0;
+}
+
+.otp-panel__resend-btn {
+	background: none;
+	border: none;
+	padding: 0;
+	font: inherit;
+	font-size: 0.82rem;
+	color: var(--accent-color);
+	cursor: pointer;
+	font-weight: 600;
+	text-decoration: underline;
+}
+
+.otp-panel__resend-btn:hover {
+	opacity: 0.8;
+}

layouts/login/single.html

@@ -1,9 +1,8 @@
 {{ define "main" }}
 <div class="auth-page">
-	<h1 class="auth-page__title">{{ .Title }}</h1>
-
 	<div class="auth-card">
-		<div id="auth-message" class="auth-message" aria-live="polite" style="display: none"></div>
+		<h1 class="auth-page__title">{{ .Title }}</h1>
+		<div id="auth-message" class="auth-message" aria-live="polite"></div>
 
 		<form id="login-form" class="auth-form" novalidate>
 			<div class="auth-form__input-wrap">
@@ -83,7 +82,7 @@
 			</button>
 		</form>
 
-		<p class="auth-card__footer">
+		<p class="auth-card__footer" id="login-footer">
 			Don't have an account? <a href="/signup/" class="auth-card__link">Sign up</a>
 		</p>
 	</div>
@@ -97,9 +96,9 @@
 		if (localStorage.getItem('f4_username')) {
 			document.getElementById('auth-message').textContent = 'You are already logged in!';
 			document.getElementById('auth-message').className =
-				'auth-message auth-message--success';
+				'auth-message auth-message--success is-visible';
-			document.getElementById('auth-message').style.display = 'block';
 			document.getElementById('login-form').style.display = 'none';
+			document.getElementById('login-footer').style.display = 'none';
 			return;
 		}
 
@@ -138,13 +137,12 @@
 
 		function showMsg(text, type) {
 			msgBox.textContent = text;
-			msgBox.className = 'auth-message auth-message--' + type;
+			msgBox.className = 'auth-message auth-message--' + type + ' is-visible';
-			msgBox.style.display = 'block';
 		}
 
 		form.addEventListener('submit', function (e) {
 			e.preventDefault();
-			msgBox.style.display = 'none';
+			msgBox.className = 'auth-message';
 
 			var username = document.getElementById('login-username').value.trim();
 			var password = pwdInput.value;

layouts/signup/single.html

@@ -1,12 +1,12 @@
 {{ define "main" }}
 <div class="auth-page">
-	<h1 class="auth-page__title">{{ .Title }}</h1>
-
 	<div class="auth-card">
-		<div id="auth-message" class="auth-message" aria-live="polite" style="display: none"></div>
+		<h1 class="auth-page__title">{{ .Title }}</h1>
+		<div id="auth-message" class="auth-message" aria-live="polite"></div>
 
 		<!-- ── STEP 1 — Account details ───────────────────────────────── -->
 		<form id="signup-form" class="auth-form" novalidate>
+			<div class="auth-form__input-wrap">
 				<div class="auth-form__group">
 					<label class="auth-form__label" for="signup-username">Username</label>
 					<input
@@ -39,7 +39,6 @@
 
 				<div class="auth-form__group">
 					<label class="auth-form__label" for="signup-password">Password</label>
-				<div class="auth-form__input-wrap">
 					<input
 						class="auth-form__input"
 						type="password"
@@ -81,7 +80,6 @@
 							/>
 						</svg>
 					</button>
-				</div>
 					<span class="auth-form__hint">(at least 8 characters)</span>
 				</div>
 
@@ -96,6 +94,7 @@
 						required
 					/>
 				</div>
+			</div>
 
 			<button type="submit" class="auth-form__submit" id="signup-submit">
 				<span class="auth-form__submit-text">Send verification code</span>
@@ -166,7 +165,7 @@
 			</div>
 		</div>
 
-		<p class="auth-card__footer">
+		<p class="auth-card__footer" id="signup-footer">
 			Already have an account? <a href="/login/" class="auth-card__link">Log in</a>
 		</p>
 	</div>
@@ -180,9 +179,9 @@
 		if (localStorage.getItem('f4_username')) {
 			document.getElementById('auth-message').textContent = 'You are already logged in!';
 			document.getElementById('auth-message').className =
-				'auth-message auth-message--success';
+				'auth-message auth-message--success is-visible';
-			document.getElementById('auth-message').style.display = 'block';
 			document.getElementById('signup-form').style.display = 'none';
+			document.getElementById('signup-footer').style.display = 'none';
 			return;
 		}
 
@@ -221,11 +220,10 @@
 
 		function showMsg(text, type) {
 			msgBox.textContent = text;
-			msgBox.className = 'auth-message auth-message--' + type;
+			msgBox.className = 'auth-message auth-message--' + type + ' is-visible';
-			msgBox.style.display = 'block';
 		}
 		function hideMsg() {
-			msgBox.style.display = 'none';
+			msgBox.className = 'auth-message';
 		}
 
 		function setLoading(btn, on) {

static/css/auth-additions.css

@@ -1,238 +0,0 @@
-/* ── Auth pages (login / signup) ───────────────────────────────────────── */
-
-.auth-page {
-	max-width: 420px;
-	margin: 0 auto;
-	padding: 1rem 0 3rem;
-}
-
-.auth-page__title {
-	margin-bottom: 1.5rem;
-}
-
-.auth-card {
-	border: 1px solid var(--background-color1, #ccc);
-	border-radius: 10px;
-	padding: 2rem 1.75rem;
-	background: var(--background-color);
-}
-
-/* Message banner */
-.auth-message {
-	border-radius: 6px;
-	padding: 0.65rem 0.9rem;
-	font-size: 0.88rem;
-	margin-bottom: 1.2rem;
-	line-height: 1.4;
-}
-
-.auth-message--error {
-	background: rgba(220, 53, 69, 0.12);
-	border: 1px solid rgba(220, 53, 69, 0.4);
-	color: #c0392b;
-}
-
-[data-theme='dark'] .auth-message--error {
-	color: #ff6b6b;
-	background: rgba(220, 53, 69, 0.18);
-	border-color: rgba(220, 53, 69, 0.5);
-}
-
-.auth-message--success {
-	background: rgba(39, 174, 96, 0.12);
-	border: 1px solid rgba(39, 174, 96, 0.4);
-	color: #1e8449;
-}
-
-[data-theme='dark'] .auth-message--success {
-	color: #58d68d;
-	background: rgba(39, 174, 96, 0.18);
-	border-color: rgba(39, 174, 96, 0.5);
-}
-
-/* Form fields */
-.auth-form {
-	display: flex;
-	flex-direction: column;
-	gap: 1.1rem;
-}
-
-.auth-form__group {
-	display: flex;
-	flex-direction: column;
-	gap: 0.3rem;
-}
-
-.auth-form__label {
-	font-size: 0.85rem;
-	font-weight: 600;
-	color: var(--foreground-color);
-}
-
-.auth-form__input-wrap {
-	position: relative;
-	display: flex;
-	align-items: center;
-}
-
-.auth-form__input-wrap .auth-form__input {
-	padding-right: 2.5rem;
-}
-
-.auth-form__input {
-	width: 100%;
-	box-sizing: border-box;
-	padding: 0.5rem 0.75rem;
-	border: 1px solid var(--background-color1, #ccc);
-	border-radius: 5px;
-	font-size: 0.9rem;
-	background: var(--background-color);
-	color: var(--foreground-color);
-	transition:
-		border-color 0.18s ease,
-		box-shadow 0.18s ease;
-	outline: none;
-	font-family: inherit;
-}
-
-.auth-form__input:focus {
-	border-color: var(--accent-color);
-	box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 17, 51, 233), 0.15);
-}
-
-.auth-form__input::placeholder {
-	color: var(--foreground-color3, #888);
-	opacity: 0.7;
-}
-
-.auth-form__eye {
-	position: absolute;
-	right: 0.6rem;
-	background: none;
-	border: none;
-	cursor: pointer;
-	color: var(--foreground-color3, #888);
-	display: inline-flex;
-	align-items: center;
-	padding: 0.2rem;
-	line-height: 1;
-	transition: color 0.15s ease;
-}
-
-.auth-form__eye:hover {
-	color: var(--foreground-color);
-}
-
-.auth-form__hint {
-	font-size: 0.75rem;
-	color: var(--foreground-color3, #888);
-}
-
-/* Submit button */
-.auth-form__submit {
-	margin-top: 0.5rem;
-	width: 100%;
-	padding: 0.6rem 1rem;
-	border: none;
-	border-radius: 5px;
-	background: var(--accent-color);
-	color: var(--background-color, #fff);
-	font-size: 0.92rem;
-	font-weight: 600;
-	font-family: inherit;
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.4rem;
-	transition: opacity 0.18s ease;
-}
-
-.auth-form__submit:hover:not(:disabled) {
-	opacity: 0.85;
-}
-
-.auth-form__submit:disabled {
-	cursor: not-allowed;
-	opacity: 0.6;
-}
-
-.auth-form__submit-loader {
-	display: inline-flex;
-	align-items: center;
-}
-
-/* Spinner animation */
-@keyframes auth-spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-.spin {
-	animation: auth-spin 0.8s linear infinite;
-}
-
-/* Footer link */
-.auth-card__footer {
-	margin-top: 1.4rem;
-	text-align: center;
-	font-size: 0.85rem;
-	color: var(--foreground-color3, #888);
-}
-
-.auth-card__link {
-	color: var(--accent-color);
-	text-decoration: none;
-	font-weight: 600;
-}
-
-.auth-card__link:hover {
-	text-decoration: underline;
-}
-
-/* Light theme override for submit button text */
-[data-theme='light'] .auth-form__submit {
-	color: #fff;
-}
-
-/* ── OTP panel ───────────────────────────────────────────────────────────── */
-
-.otp-panel__hint {
-	font-size: 0.87rem;
-	line-height: 1.5;
-	color: var(--foreground-color);
-	margin: 0;
-}
-
-.otp-panel__input {
-	letter-spacing: 0.25em;
-	font-size: 1.15rem;
-	text-align: center;
-}
-
-.otp-panel__resend {
-	font-size: 0.82rem;
-	color: var(--foreground-color3, #888);
-	text-align: center;
-	margin: 0;
-}
-
-.otp-panel__resend-btn {
-	background: none;
-	border: none;
-	padding: 0;
-	font: inherit;
-	font-size: 0.82rem;
-	color: var(--accent-color);
-	cursor: pointer;
-	font-weight: 600;
-	text-decoration: underline;
-}
-
-.otp-panel__resend-btn:hover {
-	opacity: 0.8;
-}

static/css/custom.css

@@ -871,8 +871,8 @@
 /* ── Comments section ─────────────────────────────────────────────────────── */
 
 .comments {
-	margin-top: 3rem;
+	margin-top: 1rem;
-	padding-top: 2rem;
+	padding-top: 1.28rem;
 	border-top: 1px solid var(--background-color1, #ddd);
 }
 
@@ -1074,3 +1074,258 @@
 .comment__replies {
 	margin-top: 0.5rem;
 }
+/* ── Auth pages (login / signup) ───────────────────────────────────────── */
+
+.auth-page {
+	max-width: 420px;
+	margin: 2.5rem auto 0;
+	padding: 0 0 3rem;
+}
+
+.auth-page__title {
+	margin-top: 55.2px;
+	margin-bottom: 1.2rem;
+}
+
+.auth-card {
+	border: 1px solid var(--background-color1, #ccc);
+	border-radius: 10px;
+	padding: 1.25rem 1.75rem 2rem;
+	background: var(--background-color);
+}
+
+/* Message banner — fixed height always reserved so the form never shifts */
+.auth-message {
+	border-radius: 4px;
+	font-size: 0.82rem;
+	line-height: 1.3;
+	height: 1.8rem;
+	margin-bottom: 0.75rem;
+	box-sizing: border-box;
+	border: 1px solid transparent;
+	background: transparent;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.15s ease;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	padding: 0 0.7rem;
+}
+
+.auth-message.is-visible {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.auth-message--error {
+	background: rgba(255, 61, 61, 0.1);
+	border: 1px solid rgba(255, 61, 61, 0.4);
+	color: #ff3d3d;
+}
+
+[data-theme='dark'] .auth-message--error {
+	color: #ff3d3d;
+	background: rgba(255, 61, 61, 0.15);
+	border-color: rgba(255, 61, 61, 0.5);
+}
+
+.auth-message--success {
+	background: rgba(39, 174, 96, 0.12);
+	border: 1px solid rgba(39, 174, 96, 0.4);
+	color: #1e8449;
+}
+
+[data-theme='dark'] .auth-message--success {
+	color: #58d68d;
+	background: rgba(39, 174, 96, 0.18);
+	border-color: rgba(39, 174, 96, 0.5);
+}
+
+/* Form fields */
+.auth-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1.1rem;
+}
+
+.auth-form__group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.3rem;
+}
+
+.auth-form__label {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--foreground-color);
+}
+
+.auth-form__input-wrap {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 1.1rem;
+}
+
+.auth-form__input-wrap .auth-form__input {
+	padding-right: 2.5rem;
+}
+
+.auth-form__input {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0.5rem 0.75rem;
+	border: 1px solid var(--background-color1, #ccc);
+	border-radius: 5px;
+	font-size: 0.9rem;
+	background: var(--background-color);
+	color: var(--foreground-color);
+	transition:
+		border-color 0.18s ease,
+		box-shadow 0.18s ease;
+	outline: none;
+	font-family: inherit;
+}
+
+.auth-form__input:focus {
+	border-color: var(--accent-color);
+	box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 17, 51, 233), 0.15);
+}
+
+.auth-form__input::placeholder {
+	color: var(--foreground-color3, #888);
+	opacity: 0.7;
+}
+
+.auth-form__eye {
+	position: absolute;
+	right: 0.6rem;
+	background: none;
+	border: none;
+	cursor: pointer;
+	color: var(--foreground-color3, #888);
+	display: inline-flex;
+	align-items: center;
+	padding: 0.2rem;
+	line-height: 1;
+	transition: color 0.15s ease;
+}
+
+.auth-form__eye:hover {
+	color: var(--foreground-color);
+}
+
+.auth-form__hint {
+	font-size: 0.75rem;
+	color: var(--foreground-color3, #888);
+}
+
+/* Submit button */
+.auth-form__submit {
+	margin-top: 0.5rem;
+	width: 100%;
+	padding: 0.6rem 1rem;
+	border: none;
+	border-radius: 5px;
+	background: var(--accent-color);
+	color: var(--background-color, #fff);
+	font-size: 0.92rem;
+	font-weight: 600;
+	font-family: inherit;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
+	transition: opacity 0.18s ease;
+}
+
+.auth-form__submit:hover:not(:disabled) {
+	opacity: 0.85;
+}
+
+.auth-form__submit:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.auth-form__submit-loader {
+	display: inline-flex;
+	align-items: center;
+}
+
+/* Spinner animation */
+@keyframes auth-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.spin {
+	animation: auth-spin 0.8s linear infinite;
+}
+
+/* Footer link */
+.auth-card__footer {
+	margin-top: 1.4rem;
+	text-align: center;
+	font-size: 0.85rem;
+	color: var(--foreground-color3, #888);
+}
+
+.auth-card__link {
+	color: var(--accent-color);
+	text-decoration: none;
+	font-weight: 600;
+}
+
+.auth-card__link:hover {
+	text-decoration: underline;
+}
+
+/* Light theme override for submit button text */
+[data-theme='light'] .auth-form__submit {
+	color: #fff;
+}
+
+/* ── OTP panel ───────────────────────────────────────────────────────────── */
+
+.otp-panel__hint {
+	font-size: 0.87rem;
+	line-height: 1.5;
+	color: var(--foreground-color);
+	margin: 0;
+}
+
+.otp-panel__input {
+	letter-spacing: 0.25em;
+	font-size: 1.15rem;
+	text-align: center;
+}
+
+.otp-panel__resend {
+	font-size: 0.82rem;
+	color: var(--foreground-color3, #888);
+	text-align: center;
+	margin: 0;
+}
+
+.otp-panel__resend-btn {
+	background: none;
+	border: none;
+	padding: 0;
+	font: inherit;
+	font-size: 0.82rem;
+	color: var(--accent-color);
+	cursor: pointer;
+	font-weight: 600;
+	text-decoration: underline;
+}
+
+.otp-panel__resend-btn:hover {
+	opacity: 0.8;
+}