Fix: login/signup scroll-linked positioning

docs/css/custom.css

@@ -1074,3 +1074,252 @@
 .comment__replies {
 	margin-top: 0.5rem;
 }
+/* ── 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 — always reserves space so the form never shifts */
+.auth-message {
+	border-radius: 6px;
+	padding: 0.65rem 0.9rem;
+	font-size: 0.88rem;
+	margin-bottom: 1.2rem;
+	line-height: 1.4;
+	min-height: 3rem;
+	box-sizing: border-box;
+	border: 1px solid transparent;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.15s ease;
+}
+
+.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;
+	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;
+}