fix layout for login page with styles css

src/app/pages/auth/login/Login.tsx

@@ -8,6 +8,7 @@ import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
 import { PasswordLoginForm } from './PasswordLoginForm';
 import { getRegisterPath } from '../../pathUtils';
 import { LoginPathSearchParams } from '../../paths';
+import * as css from '../styles.css';
 
 const useLoginSearchParams = (searchParams: URLSearchParams): LoginPathSearchParams =>
   useMemo(
@@ -40,7 +41,7 @@ export function Login() {
           {t('Auth.error_client_unsupported', { server })}
         </Text>
       )}
-      <Text align="Center" size="T300" style={{ color: 'rgba(232, 228, 223, 0.55)' }}>
+      <Text align="Center" className={css.AuthBottomLink} style={{ color: 'rgba(232, 228, 223, 0.55)' }}>
         {t('Auth.new_here')}{' '}
         <Link to={getRegisterPath(server)} style={{ fontWeight: 600 }}>
           {t('Auth.create_account')}

src/app/pages/auth/register/Register.tsx

@@ -8,6 +8,7 @@ import { PasswordRegisterForm, SUPPORTED_REGISTER_STAGES } from '../register/Pas
 import { SupportedUIAFlowsLoader } from '../../../components/SupportedUIAFlowsLoader';
 import { getLoginPath } from '../../pathUtils';
 import { RegisterPathSearchParams } from '../../paths';
+import * as css from '../styles.css';
 
 const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSearchParams =>
   useMemo(
@@ -65,7 +66,7 @@ export function Register() {
           }
         </SupportedUIAFlowsLoader>
       )}
-      <Text align="Center" size="T300" style={{ color: 'rgba(232, 228, 223, 0.55)' }}>
+      <Text align="Center" className={css.AuthBottomLink} style={{ color: 'rgba(232, 228, 223, 0.55)' }}>
         {t('Auth.already_have_account')}{' '}
         <Link to={getLoginPath(server)} style={{ fontWeight: 600 }}>
           {t('Auth.title_login')}

src/app/pages/auth/reset-password/ResetPassword.tsx

@@ -6,6 +6,7 @@ import { getLoginPath } from '../../pathUtils';
 import { useAuthServer } from '../../../hooks/useAuthServer';
 import { PasswordResetForm } from './PasswordResetForm';
 import { ResetPasswordPathSearchParams } from '../../paths';
+import * as css from '../styles.css';
 
 const useResetPasswordSearchParams = (
   searchParams: URLSearchParams
@@ -28,7 +29,7 @@ export function ResetPassword() {
       <PasswordResetForm defaultEmail={resetPasswordSearchParams.email} />
       <span data-spacing-node />
 
-      <Text align="Center" size="T300" style={{ color: 'rgba(232, 228, 223, 0.55)' }}>
+      <Text align="Center" className={css.AuthBottomLink} style={{ color: 'rgba(232, 228, 223, 0.55)' }}>
         {t('Auth.remember_password')}{' '}
         <Link to={getLoginPath(server)} style={{ fontWeight: 600 }}>
           {t('Auth.title_login')}

src/app/pages/auth/styles.css.ts

@@ -22,21 +22,21 @@ export const AuthLayout = style({
   '@media': {
     'only screen and (max-width: 768px)': {
       vars: {
-        '--vojo-mascot-size': 'min(23rem, 43dvh, 88vw)',
+        '--vojo-mascot-size': 'min(14rem, 30dvh, 60vw)',
-        '--vojo-mascot-top': 'clamp(0.75rem, 2.5dvh, 1.5rem)',
+        '--vojo-mascot-top': 'clamp(0.5rem, 1.5dvh, 1rem)',
         '--vojo-stack-pad': '0.75rem',
-        '--vojo-anchor-ratio': '0.66',
+        '--vojo-anchor-ratio': '0.64',
-        '--vojo-modal-min-top': 'clamp(10.5rem, 24dvh, 16rem)',
+        '--vojo-modal-min-top': 'clamp(7rem, 18dvh, 12rem)',
         '--vojo-modal-gap': '0.75rem',
         '--vojo-footer-space': '4.4rem',
       },
     },
     'only screen and (max-height: 760px)': {
       vars: {
-        '--vojo-mascot-size': 'min(21rem, 34dvh, 80vw)',
+        '--vojo-mascot-size': 'min(12rem, 24dvh, 55vw)',
-        '--vojo-mascot-top': '0.75rem',
+        '--vojo-mascot-top': '0.5rem',
-        '--vojo-anchor-ratio': '0.6',
+        '--vojo-anchor-ratio': '0.56',
-        '--vojo-modal-min-top': '9rem',
+        '--vojo-modal-min-top': '6rem',
         '--vojo-modal-gap': '0.4rem',
         '--vojo-footer-space': '4rem',
       },
@@ -104,10 +104,17 @@ export const AuthCardContent = style({
   backdropFilter: 'blur(22px) saturate(150%)',
   WebkitBackdropFilter: 'blur(22px) saturate(150%)',
   border: '1px solid rgba(255, 255, 255, 0.08)',
-  width: `min(${toRem(492)}, calc(100vw - 3rem))`,
+  width: `min(${toRem(492)}, calc(100vw - 2rem))`,
-  padding: `${toRem(42)} ${toRem(50)}`,
+  padding: `${toRem(32)} ${toRem(40)}`,
   boxSizing: 'border-box',
-  gap: toRem(24),
+  gap: toRem(20),
+
+  '@media': {
+    'only screen and (max-width: 480px)': {
+      padding: `${toRem(20)} ${toRem(24)}`,
+      gap: toRem(14),
+    },
+  },
 });
 
 export const AuthCardContentConstrained = style({
@@ -205,6 +212,17 @@ export const AuthLogo = style([
   },
 ]);
 
+/* ── Bottom nav link (e.g. "Впервые здесь? Создать учётную запись") ── */
+export const AuthBottomLink = style({
+  fontSize: toRem(15),
+
+  '@media': {
+    'only screen and (max-width: 480px)': {
+      fontSize: toRem(12),
+    },
+  },
+});
+
 /* ── Footer ── */
 export const AuthFooter = style({
   display: 'flex',