feat: rewrite all dashboard views with editorial design

Translate page: editorial dropzone (rounded-[40px]), config panel,
progress stepper, download button, Momento promo banner.
Profile page: pill tabs, dark subscription card, usage bars, language grid.
Context page: preset grid (rounded-[32px]), instruction/glossary textareas.
API keys page: editorial-card with production key display.
Glossaries page: editorial-card grid with hover lift.
Pricing page: 5-column grid, colored headers, plan badges.

All pages use editorial design system: accent-pill, editorial-card,
premium-button, brand colors, dark mode support.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/app/dashboard/api-keys/page.tsx

@@ -1,11 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Zap, Plus, AlertCircle } from 'lucide-react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Zap, Plus, AlertCircle, Clock } from 'lucide-react';
 import { useUser } from '@/app/dashboard/useUser';
 import { useApiKeys } from './useApiKeys';
 import { MAX_API_KEYS, type ApiKey } from './types';
@@ -16,6 +12,7 @@ import { RevokeKeyDialog } from './RevokeKeyDialog';
 import { WebhookSnippet } from './WebhookSnippet';
 import { useToast } from '@/components/ui/toast';
 import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
 
 export default function ApiKeysPage() {
   const { t } = useI18n();
@@ -122,8 +119,8 @@ export default function ApiKeysPage() {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center space-y-4">
-          <div className="animate-spin rounded-full h-8 w-8 border-4 border-muted border-t-foreground mx-auto"></div>
-          <p className="text-sm text-muted-foreground">{t('apiKeys.loading')}</p>
+          <div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-muted border-t-brand-accent mx-auto"></div>
+          <p className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-widest">{t('apiKeys.loading')}</p>
         </div>
       </div>
     );
@@ -134,70 +131,94 @@ export default function ApiKeysPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
-      <div>
-        <h1 className="text-2xl font-semibold tracking-tight">{t('apiKeys.title')}</h1>
-        <p className="text-muted-foreground">
-          {t('apiKeys.subtitle')}
-        </p>
+    <div className="max-w-4xl mx-auto w-full p-6 lg:p-8 space-y-8">
+      {/* ── Editorial Header ───────────────────────────────────── */}
+      <div className="mb-4">
+        <span className="accent-pill mb-4 block w-fit">{t('apiKeys.sectionTitle')}</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
+          {t('apiKeys.title')}
+        </h1>
+        <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('apiKeys.subtitle')}</p>
       </div>
 
+      {/* API Error */}
       {apiError && (
-        <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertDescription>{apiError}</AlertDescription>
-        </Alert>
+        <div className="flex items-start gap-3 p-4 rounded-xl border border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 text-sm text-red-600 dark:text-red-400">
+          <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
+          <span className="flex-1">{apiError}</span>
+        </div>
       )}
 
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <div className="flex size-8 items-center justify-center rounded-lg bg-accent/10">
-              <Zap className="size-4 text-accent" />
-            </div>
-            <div>
-              <CardTitle className="text-base">{t('apiKeys.sectionTitle')}</CardTitle>
-              <CardDescription>{t('apiKeys.sectionDesc')}</CardDescription>
-            </div>
+      {/* ── Main Card ──────────────────────────────────────────── */}
+      <div className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
+        {/* Section header */}
+        <div className="flex items-center gap-4 mb-10 text-brand-accent">
+          <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent">
+            <Zap size={24} />
           </div>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium">
-                {t('apiKeys.keysUsed', { total, max: MAX_API_KEYS })}
-              </p>
-              <p className="text-xs text-muted-foreground">
-                {maxKeysReached ? (
-                  <span className="text-amber-600">{t('apiKeys.maxReached')}</span>
-                ) : (
-                  t(MAX_API_KEYS - total !== 1 ? 'apiKeys.canGeneratePlural' : 'apiKeys.canGenerate', { count: MAX_API_KEYS - total })
-                )}
-              </p>
-            </div>
-            <Button
-              onClick={() => setGenerateDialogOpen(true)}
-              disabled={maxKeysReached || isGenerating}
-              className="gap-1.5"
-            >
-              <Plus className="size-3.5" />
-              {t('apiKeys.generateNew')}
-            </Button>
+          <div>
+            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
+              {t('apiKeys.sectionTitle')}
+            </h3>
+            <p className="text-[9px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">
+              {t('apiKeys.sectionDesc')}
+            </p>
           </div>
+        </div>
 
-          <ApiKeyTable
-            keys={keys}
-            onRevoke={handleRevokeClick}
-            isRevoking={isRevoking}
-          />
-        </CardContent>
-      </Card>
+        {/* Key count + generate button */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <p className="text-[11px] font-black uppercase tracking-widest text-brand-dark dark:text-white">
+              {t('apiKeys.keysUsed', { total, max: MAX_API_KEYS })}
+            </p>
+            <p className="text-[9px] text-brand-dark/30 dark:text-white/30 font-black uppercase tracking-widest mt-1">
+              {maxKeysReached ? (
+                <span className="text-amber-600 dark:text-amber-400">{t('apiKeys.maxReached')}</span>
+              ) : (
+                t(MAX_API_KEYS - total !== 1 ? 'apiKeys.canGeneratePlural' : 'apiKeys.canGenerate', { count: MAX_API_KEYS - total })
+              )}
+            </p>
+          </div>
+          <button
+            onClick={() => setGenerateDialogOpen(true)}
+            disabled={maxKeysReached || isGenerating}
+            className="premium-button px-8 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-2 disabled:opacity-50"
+          >
+            <Plus size={14} />
+            {t('apiKeys.generateNew')}
+          </button>
+        </div>
 
-      <Separator />
+        {/* Production key display area */}
+        <div className="flex items-center justify-between p-8 bg-brand-muted dark:bg-white/5 rounded-3xl border border-black/5 dark:border-white/10 mb-8">
+          <div>
+            <p className="text-[9px] text-brand-dark/40 dark:text-white/40 font-black uppercase tracking-[0.3em] mb-2">
+              {t('apiKeys.sectionTitle')}
+            </p>
+            <p className="text-sm font-mono text-brand-dark dark:text-white">
+              {keys.length > 0 ? `${keys[0].key_prefix}************************************` : 'No keys generated'}
+            </p>
+          </div>
+          <div className="flex gap-3">
+            <button className="p-3 bg-white dark:bg-white/10 rounded-xl text-brand-dark/40 dark:text-white/40 hover:text-brand-dark dark:hover:text-white border border-black/5 dark:border-white/10 transition-all">
+              <Clock size={16} />
+            </button>
+          </div>
+        </div>
 
+        {/* Key table */}
+        <ApiKeyTable
+          keys={keys}
+          onRevoke={handleRevokeClick}
+          isRevoking={isRevoking}
+        />
+      </div>
+
+      {/* Webhook snippet */}
       <WebhookSnippet />
 
+      {/* Dialogs */}
       <GenerateKeyDialog
         open={generateDialogOpen}
         onOpenChange={setGenerateDialogOpen}