Settle on one visual language

The interface had drifted into two of everything. The calendar and its
popovers were built around a blue accent the rest of the app had long since
replaced with green, five different sizes served the same class of small
label, and page sections were a stack of identical bordered cards that gave
no sense of what mattered most. Sections now separate by space and a hairline,
the overview leads with its headline figure at a size that says so, and the
palette, type scale and spacing live in one place as variables rather than
scattered literals.

Two things were not styled at all. The sign-in screen was an unstyled form in
the top-left corner, and the tip cards had no rules whatsoever despite their
markup already carrying a severity, so every tip rendered identically with a
plain green square for its dismiss control.

The calendar was also unusable on a narrow screen: the preset rail never
collapsed and covered the last three columns of the grid.

frontend/src/pages/Auth.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useAuth } from '@/context/AuthContext'
 import { useWorkspace } from '@/context/WorkspaceContext'
 import { useTranslation } from '@/i18n'
+import './auth.css'
 
 export function Auth() {
   const { login, register, isAuthenticated } = useAuth()
@@ -38,38 +39,45 @@ export function Auth() {
   }
 
   return (
-    <main>
-      <h1>{isRegister ? t('auth.createAccountTitle') : t('auth.loginTitle')}</h1>
-      <form onSubmit={(e) => void handleSubmit(e)}>
-        {isRegister && (
+    <main className="auth-page">
+      <div className="auth-page__card">
+        <p className="auth-page__brand">{t('app.name')}</p>
+        <h1 className="auth-page__title">{isRegister ? t('auth.createAccountTitle') : t('auth.loginTitle')}</h1>
+        <form className="auth-page__form" onSubmit={(e) => void handleSubmit(e)}>
+          {isRegister && (
+            <input
+              placeholder={t('auth.namePlaceholder')}
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+            />
+          )}
           <input
-            placeholder={t('auth.namePlaceholder')}
-            value={displayName}
-            onChange={(e) => setDisplayName(e.target.value)}
+            type="email"
+            data-testid="auth-email"
+            placeholder={t('auth.emailPlaceholder')}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
           />
-        )}
-        <input
-          type="email"
-          data-testid="auth-email"
-          placeholder={t('auth.emailPlaceholder')}
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <input
-          type="password"
-          data-testid="auth-password"
-          placeholder={t('auth.passwordPlaceholder')}
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        {error && <p role="alert">{error}</p>}
-        <button type="submit" data-testid="auth-submit">
-          {isRegister ? t('auth.registerButton') : t('auth.loginButton')}
+          <input
+            type="password"
+            data-testid="auth-password"
+            placeholder={t('auth.passwordPlaceholder')}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          {error && (
+            <p role="alert" className="auth-page__error">
+              {error}
+            </p>
+          )}
+          <button type="submit" data-testid="auth-submit">
+            {isRegister ? t('auth.registerButton') : t('auth.loginButton')}
+          </button>
+        </form>
+        <button type="button" className="auth-page__switch button--ghost" onClick={() => setIsRegister((v) => !v)}>
+          {isRegister ? t('auth.haveAccountButton') : t('auth.createAccountButton')}
         </button>
-      </form>
-      <button type="button" onClick={() => setIsRegister((v) => !v)}>
-        {isRegister ? t('auth.haveAccountButton') : t('auth.createAccountButton')}
-      </button>
+      </div>
     </main>
   )
 }