Locales in frontend, why not

.sqlx/query-17da8b6f6b46eae067bd8842a369a406699888f689122d2bae8bef13b532bcd2.json .sqlx/query-7fea217210a7a97f02d981692ba1cdda4f8037c7feba39610e3dd4d4d2f7ee8c.json

···
 {
   "db_name": "PostgreSQL",
-  "query": "SELECT\n            handle, email, email_verified, is_admin, deactivated_at,\n            preferred_comms_channel as \"preferred_channel: crate::comms::CommsChannel\",\n            discord_verified, telegram_verified, signal_verified\n        FROM users WHERE did = $1",
+  "query": "SELECT\n            handle, email, email_verified, is_admin, preferred_locale,\n            preferred_comms_channel as \"preferred_channel: crate::comms::CommsChannel\",\n            discord_verified, telegram_verified, signal_verified\n        FROM users WHERE did = $1",
   "describe": {
     "columns": [
       {
···
       },
       {
         "ordinal": 4,
-        "name": "deactivated_at",
-        "type_info": "Timestamptz"
+        "name": "preferred_locale",
+        "type_info": "Varchar"
       },
       {
         "ordinal": 5,
···
       false
     ]
   },
-  "hash": "17da8b6f6b46eae067bd8842a369a406699888f689122d2bae8bef13b532bcd2"
+  "hash": "7fea217210a7a97f02d981692ba1cdda4f8037c7feba39610e3dd4d4d2f7ee8c"
 }

.sqlx/query-50fef1f4f739c42622f2d23c8057861fea2e0e757c40b4d43bafa1beb156c2f1.json

···
+{
+  "db_name": "PostgreSQL",
+  "query": "UPDATE users SET preferred_locale = $1 WHERE did = $2 RETURNING did",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "did",
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Varchar",
+        "Text"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "50fef1f4f739c42622f2d23c8057861fea2e0e757c40b4d43bafa1beb156c2f1"
+}

.sqlx/query-8c69c5f98e3ee59b50346094ff39eed73bb602f0b5ab48c11e53c82839a66721.json .sqlx/query-b554241c510dae200a0de3050da30d1236b5f8c876de016eb358bdcfc383671d.json

···
 {
   "db_name": "PostgreSQL",
-  "query": "\n        SELECT\n            email,\n            handle,\n            preferred_comms_channel as \"channel: CommsChannel\"\n        FROM users\n        WHERE id = $1\n        ",
+  "query": "\n        SELECT\n            email,\n            handle,\n            preferred_comms_channel as \"channel: CommsChannel\",\n            preferred_locale\n        FROM users\n        WHERE id = $1\n        ",
   "describe": {
     "columns": [
       {
···
             }
           }
         }
+      },
+      {
+        "ordinal": 3,
+        "name": "preferred_locale",
+        "type_info": "Varchar"
       }
     ],
     "parameters": {
···
     "nullable": [
       true,
       false,
-      false
+      false,
+      true
     ]
   },
-  "hash": "8c69c5f98e3ee59b50346094ff39eed73bb602f0b5ab48c11e53c82839a66721"
+  "hash": "b554241c510dae200a0de3050da30d1236b5f8c876de016eb358bdcfc383671d"
 }

.sqlx/query-de72338f80b4f7b5bc7c9fc44100b6eb9e75f442b5b37a5a1cd761cd3b6950d9.json .sqlx/query-0fe621daeeb56e4be363ce96df73278467cba319b1fbe312d9220253610c4fcd.json

···
 {
   "db_name": "PostgreSQL",
-  "query": "SELECT\n            handle, email, email_verified, is_admin,\n            preferred_comms_channel as \"preferred_channel: crate::comms::CommsChannel\",\n            discord_verified, telegram_verified, signal_verified\n        FROM users WHERE did = $1",
+  "query": "SELECT\n            handle, email, email_verified, is_admin, deactivated_at, preferred_locale,\n            preferred_comms_channel as \"preferred_channel: crate::comms::CommsChannel\",\n            discord_verified, telegram_verified, signal_verified\n        FROM users WHERE did = $1",
   "describe": {
     "columns": [
       {
···
       },
       {
         "ordinal": 4,
+        "name": "deactivated_at",
+        "type_info": "Timestamptz"
+      },
+      {
+        "ordinal": 5,
+        "name": "preferred_locale",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 6,
         "name": "preferred_channel: crate::comms::CommsChannel",
         "type_info": {
           "Custom": {
···
         }
       },
       {
-        "ordinal": 5,
+        "ordinal": 7,
         "name": "discord_verified",
         "type_info": "Bool"
       },
       {
-        "ordinal": 6,
+        "ordinal": 8,
         "name": "telegram_verified",
         "type_info": "Bool"
       },
       {
-        "ordinal": 7,
+        "ordinal": 9,
         "name": "signal_verified",
         "type_info": "Bool"
       }
···
       true,
       false,
       false,
+      true,
+      true,
       false,
       false,
       false,
       false
     ]
   },
-  "hash": "de72338f80b4f7b5bc7c9fc44100b6eb9e75f442b5b37a5a1cd761cd3b6950d9"
+  "hash": "0fe621daeeb56e4be363ce96df73278467cba319b1fbe312d9220253610c4fcd"
 }

README.md

···
 
 This software isn't an afterthought by a company with limited resources.
 
-It is a superset of the reference PDS, including: multi-channel communication (email, discord, telegram, signal) for verification and alerts. Built-in web UI for account management, OAuth consent, repo browsing, and admin. Granular OAuth scopes with UI support such that users choose exactly what apps can access.
+It is a superset of the reference PDS, including: passkeys and 2FA (WebAuthn/FIDO2, TOTP, backup codes, trusted devices), did:web support (PDS-hosted subdomains or bring-your-own), multi-channel communication (email, discord, telegram, signal) for verification and alerts, granular OAuth scopes with a consent UI showing human-readable descriptions, and a built-in web UI for account management, OAuth consent, repo browsing, and admin.
 
 The PDS itself is a single small binary with no node/npm runtime. It does require postgres, valkey, and s3-compatible storage, which makes setup heavier than the reference PDS's sqlite. The tradeoff is that these are battle-tested pieces of infra that we already know how to scale, back up, and monitor. 
 

frontend/deno.lock

···
     "npm:@testing-library/svelte@^5.2.6": "5.2.9_svelte@5.45.10__acorn@8.15.0_vite@6.4.1__picomatch@4.0.3_vitest@2.1.9__jsdom@25.0.1__vite@5.4.21_jsdom@25.0.1",
     "npm:@testing-library/user-event@^14.5.2": "14.6.1_@testing-library+dom@10.4.1",
     "npm:jsdom@^25.0.1": "25.0.1",
+    "npm:svelte-i18n@^4.0.1": "4.0.1_svelte@5.45.10__acorn@8.15.0",
     "npm:svelte@5": "5.45.10_acorn@8.15.0",
     "npm:vite@*": "6.4.1_picomatch@4.0.3",
     "npm:vite@6": "6.4.1_picomatch@4.0.3",
···
     "@csstools/css-tokenizer@3.0.4": {
       "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw=="
     },
+    "@esbuild/aix-ppc64@0.19.12": {
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "os": ["aix"],
+      "cpu": ["ppc64"]
+    },
     "@esbuild/aix-ppc64@0.21.5": {
       "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
       "os": ["aix"],
···
       "os": ["aix"],
       "cpu": ["ppc64"]
     },
+    "@esbuild/android-arm64@0.19.12": {
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
     "@esbuild/android-arm64@0.21.5": {
       "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
       "os": ["android"],
···
       "os": ["android"],
       "cpu": ["arm64"]
     },
+    "@esbuild/android-arm@0.19.12": {
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "os": ["android"],
+      "cpu": ["arm"]
+    },
     "@esbuild/android-arm@0.21.5": {
       "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
       "os": ["android"],
···
       "os": ["android"],
       "cpu": ["arm"]
     },
+    "@esbuild/android-x64@0.19.12": {
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "os": ["android"],
+      "cpu": ["x64"]
+    },
     "@esbuild/android-x64@0.21.5": {
       "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
       "os": ["android"],
···
       "os": ["android"],
       "cpu": ["x64"]
     },
+    "@esbuild/darwin-arm64@0.19.12": {
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
     "@esbuild/darwin-arm64@0.21.5": {
       "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
       "os": ["darwin"],
···
       "os": ["darwin"],
       "cpu": ["arm64"]
     },
+    "@esbuild/darwin-x64@0.19.12": {
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
     "@esbuild/darwin-x64@0.21.5": {
       "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
       "os": ["darwin"],
···
       "os": ["darwin"],
       "cpu": ["x64"]
     },
+    "@esbuild/freebsd-arm64@0.19.12": {
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "os": ["freebsd"],
+      "cpu": ["arm64"]
+    },
     "@esbuild/freebsd-arm64@0.21.5": {
       "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
       "os": ["freebsd"],
···
       "os": ["freebsd"],
       "cpu": ["arm64"]
     },
+    "@esbuild/freebsd-x64@0.19.12": {
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
     "@esbuild/freebsd-x64@0.21.5": {
       "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
       "os": ["freebsd"],
···
       "os": ["freebsd"],
       "cpu": ["x64"]
     },
+    "@esbuild/linux-arm64@0.19.12": {
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
     "@esbuild/linux-arm64@0.21.5": {
       "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
       "os": ["linux"],
···
       "os": ["linux"],
       "cpu": ["arm64"]
     },
+    "@esbuild/linux-arm@0.19.12": {
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
     "@esbuild/linux-arm@0.21.5": {
       "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
       "os": ["linux"],
···
       "os": ["linux"],
       "cpu": ["arm"]
     },
+    "@esbuild/linux-ia32@0.19.12": {
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "os": ["linux"],
+      "cpu": ["ia32"]
+    },
     "@esbuild/linux-ia32@0.21.5": {
       "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
       "os": ["linux"],
···
       "os": ["linux"],
       "cpu": ["ia32"]
     },
+    "@esbuild/linux-loong64@0.19.12": {
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "os": ["linux"],
+      "cpu": ["loong64"]
+    },
     "@esbuild/linux-loong64@0.21.5": {
       "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
       "os": ["linux"],
···
       "os": ["linux"],
       "cpu": ["loong64"]
     },
+    "@esbuild/linux-mips64el@0.19.12": {
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "os": ["linux"],
+      "cpu": ["mips64el"]
+    },
     "@esbuild/linux-mips64el@0.21.5": {
       "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
       "os": ["linux"],
···
       "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
       "os": ["linux"],
       "cpu": ["mips64el"]
+    },
+    "@esbuild/linux-ppc64@0.19.12": {
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
     },
     "@esbuild/linux-ppc64@0.21.5": {
       "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
···
       "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
       "os": ["linux"],
       "cpu": ["ppc64"]
+    },
+    "@esbuild/linux-riscv64@0.19.12": {
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
     },
     "@esbuild/linux-riscv64@0.21.5": {
       "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
···
       "os": ["linux"],
       "cpu": ["riscv64"]
     },
+    "@esbuild/linux-s390x@0.19.12": {
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
     "@esbuild/linux-s390x@0.21.5": {
       "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
       "os": ["linux"],
···
       "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
       "os": ["linux"],
       "cpu": ["s390x"]
+    },
+    "@esbuild/linux-x64@0.19.12": {
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
     },
     "@esbuild/linux-x64@0.21.5": {
       "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
···
       "os": ["netbsd"],
       "cpu": ["arm64"]
     },
+    "@esbuild/netbsd-x64@0.19.12": {
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "os": ["netbsd"],
+      "cpu": ["x64"]
+    },
     "@esbuild/netbsd-x64@0.21.5": {
       "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
       "os": ["netbsd"],
···
       "os": ["openbsd"],
       "cpu": ["arm64"]
     },
+    "@esbuild/openbsd-x64@0.19.12": {
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "os": ["openbsd"],
+      "cpu": ["x64"]
+    },
     "@esbuild/openbsd-x64@0.21.5": {
       "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
       "os": ["openbsd"],
···
       "os": ["openharmony"],
       "cpu": ["arm64"]
     },
+    "@esbuild/sunos-x64@0.19.12": {
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "os": ["sunos"],
+      "cpu": ["x64"]
+    },
     "@esbuild/sunos-x64@0.21.5": {
       "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
       "os": ["sunos"],
···
       "os": ["sunos"],
       "cpu": ["x64"]
     },
+    "@esbuild/win32-arm64@0.19.12": {
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
     "@esbuild/win32-arm64@0.21.5": {
       "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
       "os": ["win32"],
···
       "os": ["win32"],
       "cpu": ["arm64"]
     },
+    "@esbuild/win32-ia32@0.19.12": {
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "os": ["win32"],
+      "cpu": ["ia32"]
+    },
     "@esbuild/win32-ia32@0.21.5": {
       "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
       "os": ["win32"],
···
       "os": ["win32"],
       "cpu": ["ia32"]
     },
+    "@esbuild/win32-x64@0.19.12": {
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
     "@esbuild/win32-x64@0.21.5": {
       "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "os": ["win32"],
···
       "os": ["win32"],
       "cpu": ["x64"]
     },
+    "@formatjs/ecma402-abstract@2.3.6": {
+      "integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+      "dependencies": [
+        "@formatjs/fast-memoize",
+        "@formatjs/intl-localematcher",
+        "decimal.js",
+        "tslib"
+      ]
+    },
+    "@formatjs/fast-memoize@2.2.7": {
+      "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
+    "@formatjs/icu-messageformat-parser@2.11.4": {
+      "integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+      "dependencies": [
+        "@formatjs/ecma402-abstract",
+        "@formatjs/icu-skeleton-parser",
+        "tslib"
+      ]
+    },
+    "@formatjs/icu-skeleton-parser@1.8.16": {
+      "integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+      "dependencies": [
+        "@formatjs/ecma402-abstract",
+        "tslib"
+      ]
+    },
+    "@formatjs/intl-localematcher@0.6.2": {
+      "integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
     "@jridgewell/gen-mapping@0.3.13": {
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "dependencies": [
···
       "integrity": "sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==",
       "dependencies": [
         "@vitest/spy",
-        "estree-walker",
+        "estree-walker@3.0.3",
         "magic-string",
         "vite@5.4.21"
       ],
···
     "check-error@2.1.1": {
       "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw=="
     },
+    "cli-color@2.0.4": {
+      "integrity": "sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==",
+      "dependencies": [
+        "d",
+        "es5-ext",
+        "es6-iterator",
+        "memoizee",
+        "timers-ext"
+      ]
+    },
     "clsx@2.1.1": {
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
     },
···
       "dependencies": [
         "@asamuzakjp/css-color",
         "rrweb-cssom@0.8.0"
+      ]
+    },
+    "d@1.0.2": {
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "dependencies": [
+        "es5-ext",
+        "type"
       ]
     },
     "data-urls@5.0.0": {
···
         "hasown"
       ]
     },
+    "es5-ext@0.10.64": {
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "dependencies": [
+        "es6-iterator",
+        "es6-symbol",
+        "esniff",
+        "next-tick"
+      ],
+      "scripts": true
+    },
+    "es6-iterator@2.0.3": {
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dependencies": [
+        "d",
+        "es5-ext",
+        "es6-symbol"
+      ]
+    },
+    "es6-symbol@3.1.4": {
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "dependencies": [
+        "d",
+        "ext"
+      ]
+    },
+    "es6-weak-map@2.0.3": {
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "dependencies": [
+        "d",
+        "es5-ext",
+        "es6-iterator",
+        "es6-symbol"
+      ]
+    },
+    "esbuild@0.19.12": {
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "optionalDependencies": [
+        "@esbuild/aix-ppc64@0.19.12",
+        "@esbuild/android-arm@0.19.12",
+        "@esbuild/android-arm64@0.19.12",
+        "@esbuild/android-x64@0.19.12",
+        "@esbuild/darwin-arm64@0.19.12",
+        "@esbuild/darwin-x64@0.19.12",
+        "@esbuild/freebsd-arm64@0.19.12",
+        "@esbuild/freebsd-x64@0.19.12",
+        "@esbuild/linux-arm@0.19.12",
+        "@esbuild/linux-arm64@0.19.12",
+        "@esbuild/linux-ia32@0.19.12",
+        "@esbuild/linux-loong64@0.19.12",
+        "@esbuild/linux-mips64el@0.19.12",
+        "@esbuild/linux-ppc64@0.19.12",
+        "@esbuild/linux-riscv64@0.19.12",
+        "@esbuild/linux-s390x@0.19.12",
+        "@esbuild/linux-x64@0.19.12",
+        "@esbuild/netbsd-x64@0.19.12",
+        "@esbuild/openbsd-x64@0.19.12",
+        "@esbuild/sunos-x64@0.19.12",
+        "@esbuild/win32-arm64@0.19.12",
+        "@esbuild/win32-ia32@0.19.12",
+        "@esbuild/win32-x64@0.19.12"
+      ],
+      "scripts": true,
+      "bin": true
+    },
     "esbuild@0.21.5": {
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "optionalDependencies": [
···
     "esm-env@1.2.2": {
       "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="
     },
+    "esniff@2.0.1": {
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "dependencies": [
+        "d",
+        "es5-ext",
+        "event-emitter",
+        "type"
+      ]
+    },
     "esrap@2.2.1": {
       "integrity": "sha512-GiYWG34AN/4CUyaWAgunGt0Rxvr1PTMlGC0vvEov/uOQYWne2bpN03Um+k8jT+q3op33mKouP2zeJ6OlM+qeUg==",
       "dependencies": [
         "@jridgewell/sourcemap-codec"
       ]
+    },
+    "estree-walker@2.0.2": {
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "estree-walker@3.0.3": {
       "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
···
         "@types/estree"
       ]
     },
+    "event-emitter@0.3.5": {
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "dependencies": [
+        "d",
+        "es5-ext"
+      ]
+    },
     "expect-type@1.3.0": {
       "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA=="
     },
+    "ext@1.7.0": {
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dependencies": [
+        "type"
+      ]
+    },
     "fdir@6.5.0_picomatch@4.0.3": {
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dependencies": [
···
         "es-object-atoms"
       ]
     },
+    "globalyzer@0.1.0": {
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
+    "globrex@0.1.2": {
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
     "gopd@1.2.0": {
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
     },
···
     "indent-string@4.0.0": {
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="
     },
+    "intl-messageformat@10.7.18": {
+      "integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+      "dependencies": [
+        "@formatjs/ecma402-abstract",
+        "@formatjs/fast-memoize",
+        "@formatjs/icu-messageformat-parser",
+        "tslib"
+      ]
+    },
     "is-potential-custom-element-name@1.0.1": {
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+    },
+    "is-promise@2.2.2": {
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
     },
     "is-reference@3.0.3": {
       "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
···
     "lru-cache@10.4.3": {
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
     },
+    "lru-queue@0.1.0": {
+      "integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
+      "dependencies": [
+        "es5-ext"
+      ]
+    },
     "lz-string@1.5.0": {
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "bin": true
···
     "math-intrinsics@1.1.0": {
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="
     },
+    "memoizee@0.4.17": {
+      "integrity": "sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==",
+      "dependencies": [
+        "d",
+        "es5-ext",
+        "es6-weak-map",
+        "event-emitter",
+        "is-promise",
+        "lru-queue",
+        "next-tick",
+        "timers-ext"
+      ]
+    },
     "mime-db@1.52.0": {
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
···
     "min-indent@1.0.1": {
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
+    "mri@1.2.0": {
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="
+    },
     "ms@2.1.3": {
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
···
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "bin": true
     },
+    "next-tick@1.1.0": {
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
     "nwsapi@2.2.23": {
       "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ=="
     },
···
     "rrweb-cssom@0.8.0": {
       "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw=="
     },
+    "sade@1.8.1": {
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": [
+        "mri"
+      ]
+    },
     "safer-buffer@2.1.2": {
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
···
       "dependencies": [
         "min-indent"
       ]
+    },
+    "svelte-i18n@4.0.1_svelte@5.45.10__acorn@8.15.0": {
+      "integrity": "sha512-jaykGlGT5PUaaq04JWbJREvivlCnALtT+m87Kbm0fxyYHynkQaxQMnIKHLm2WeIuBRoljzwgyvz0Z6/CMwfdmQ==",
+      "dependencies": [
+        "cli-color",
+        "deepmerge",
+        "esbuild@0.19.12",
+        "estree-walker@2.0.2",
+        "intl-messageformat",
+        "sade",
+        "svelte",
+        "tiny-glob"
+      ],
+      "bin": true
     },
     "svelte@5.45.10_acorn@8.15.0": {
       "integrity": "sha512-GiWXq6akkEN3zVDMQ1BVlRolmks5JkEdzD/67mvXOz6drRfuddT5JwsGZjMGSnsTRv/PjAXX8fqBcOr2g2qc/Q==",
···
     "symbol-tree@3.2.4": {
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "timers-ext@0.1.8": {
+      "integrity": "sha512-wFH7+SEAcKfJpfLPkrgMPvvwnEtj8W4IurvEyrKsDleXnKLCDw71w8jltvfLa8Rm4qQxxT4jmDBYbJG/z7qoww==",
+      "dependencies": [
+        "es5-ext",
+        "next-tick"
+      ]
+    },
+    "tiny-glob@0.2.9": {
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dependencies": [
+        "globalyzer",
+        "globrex"
+      ]
+    },
     "tinybench@2.9.0": {
       "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="
     },
···
       "dependencies": [
         "punycode"
       ]
+    },
+    "tslib@2.8.1": {
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "type@2.7.3": {
+      "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ=="
     },
     "vite-node@2.1.9": {
       "integrity": "sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==",
···
         "npm:@testing-library/svelte@^5.2.6",
         "npm:@testing-library/user-event@^14.5.2",
         "npm:jsdom@^25.0.1",
+        "npm:svelte-i18n@^4.0.1",
         "npm:svelte@5",
         "npm:vite@6",
         "npm:vitest@^2.1.8"

frontend/package.json

···
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage"
   },
+  "dependencies": {
+    "svelte-i18n": "^4.0.1"
+  },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@testing-library/jest-dom": "^6.6.3",

frontend/src/App.svelte

···
 <script lang="ts">
   import { getCurrentPath } from './lib/router.svelte'
   import { initAuth, getAuthState } from './lib/auth.svelte'
+  import { initI18n, _ } from './lib/i18n'
+  import { isLoading as i18nLoading } from 'svelte-i18n'
   import Login from './routes/Login.svelte'
   import Register from './routes/Register.svelte'
   import RegisterPasskey from './routes/RegisterPasskey.svelte'
···
   import InviteCodes from './routes/InviteCodes.svelte'
   import Settings from './routes/Settings.svelte'
   import Sessions from './routes/Sessions.svelte'
-  import Notifications from './routes/Notifications.svelte'
+  import Comms from './routes/Comms.svelte'
   import RepoExplorer from './routes/RepoExplorer.svelte'
   import Admin from './routes/Admin.svelte'
   import OAuthConsent from './routes/OAuthConsent.svelte'
···
   import OAuthError from './routes/OAuthError.svelte'
   import Security from './routes/Security.svelte'
   import TrustedDevices from './routes/TrustedDevices.svelte'
+  import Home from './routes/Home.svelte'
+
+  initI18n()
 
   const auth = getAuthState()
 
···
         return Settings
       case '/sessions':
         return Sessions
-      case '/notifications':
-        return Notifications
+      case '/comms':
+        return Comms
       case '/repo':
         return RepoExplorer
       case '/admin':
···
       case '/trusted-devices':
         return TrustedDevices
       default:
-        return auth.session ? Dashboard : Login
+        return Home
     }
   }
 
···
 </script>
 
 <main>
-  {#if auth.loading}
+  {#if auth.loading || $i18nLoading}
     <div class="loading">
       <p>Loading...</p>
     </div>
···
 </main>
 
 <style>
-  :global(:root) {
-    --bg-primary: #fafafa;
-    --bg-secondary: #f9f9f9;
-    --bg-card: #ffffff;
-    --bg-input: #ffffff;
-    --bg-input-disabled: #f5f5f5;
-    --text-primary: #333333;
-    --text-secondary: #666666;
-    --text-muted: #999999;
-    --border-color: #dddddd;
-    --border-color-light: #cccccc;
-    --accent: #0066cc;
-    --accent-hover: #0052a3;
-    --success-bg: #dfd;
-    --success-border: #8c8;
-    --success-text: #060;
-    --error-bg: #fee;
-    --error-border: #fcc;
-    --error-text: #c00;
-    --warning-bg: #ffd;
-    --warning-text: #660;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :global(:root) {
-      --bg-primary: #1a1a1a;
-      --bg-secondary: #242424;
-      --bg-card: #2a2a2a;
-      --bg-input: #333333;
-      --bg-input-disabled: #2a2a2a;
-      --text-primary: #e0e0e0;
-      --text-secondary: #a0a0a0;
-      --text-muted: #707070;
-      --border-color: #404040;
-      --border-color-light: #505050;
-      --accent: #4da6ff;
-      --accent-hover: #7abbff;
-      --success-bg: #1a3d1a;
-      --success-border: #2d5a2d;
-      --success-text: #7bc67b;
-      --error-bg: #3d1a1a;
-      --error-border: #5a2d2d;
-      --error-text: #ff7b7b;
-      --warning-bg: #3d3d1a;
-      --warning-text: #c6c67b;
-    }
-  }
-
-  :global(body) {
-    margin: 0;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.5;
-    color: var(--text-primary);
-    background: var(--bg-primary);
-  }
-
-  :global(*) {
-    box-sizing: border-box;
-  }
-
   main {
     min-height: 100vh;
-    background: var(--bg-primary);
   }
 
   .loading {

frontend/src/components/ReauthModal.svelte

···
 <script lang="ts">
   import { getAuthState } from '../lib/auth.svelte'
   import { api, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
 
   interface Props {
     show: boolean

frontend/src/components/ui/Button.svelte

···
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  interface Props extends HTMLButtonAttributes {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost'
+    size?: 'sm' | 'md' | 'lg'
+    loading?: boolean
+    fullWidth?: boolean
+    children: Snippet
+  }
+
+  let {
+    variant = 'primary',
+    size = 'md',
+    loading = false,
+    fullWidth = false,
+    disabled,
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<button
+  class="btn btn-{variant} btn-{size}"
+  class:full-width={fullWidth}
+  disabled={disabled || loading}
+  {...rest}
+>
+  {#if loading}
+    <span class="spinner"></span>
+  {/if}
+  {@render children()}
+</button>
+
+<style>
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+  }
+
+  .btn-sm {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-sm);
+  }
+
+  .btn-md {
+    padding: var(--space-4) var(--space-6);
+    font-size: var(--text-base);
+  }
+
+  .btn-lg {
+    padding: var(--space-5) var(--space-7);
+    font-size: var(--text-lg);
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  .spinner {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+</style>

frontend/src/components/ui/Card.svelte

···
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'interactive' | 'danger'
+    padding?: 'none' | 'sm' | 'md' | 'lg'
+    children: Snippet
+  }
+
+  let {
+    variant = 'default',
+    padding = 'md',
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div class="card card-{variant} padding-{padding}" {...rest}>
+  {@render children()}
+</div>
+
+<style>
+  .card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-xl);
+  }
+
+  .card-interactive {
+    cursor: pointer;
+    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
+  }
+
+  .card-interactive:hover {
+    border-color: var(--accent);
+    box-shadow: 0 2px 8px var(--accent-muted);
+  }
+
+  .card-danger {
+    background: var(--error-bg);
+    border-color: var(--error-border);
+  }
+
+  .padding-none { padding: 0; }
+  .padding-sm { padding: var(--space-4); }
+  .padding-md { padding: var(--space-6); }
+  .padding-lg { padding: var(--space-7); }
+</style>

frontend/src/components/ui/Input.svelte

···
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  interface Props extends HTMLInputAttributes {
+    label?: string
+    hint?: string
+    error?: string
+  }
+
+  let {
+    label,
+    hint,
+    error,
+    id,
+    ...rest
+  }: Props = $props()
+
+  let inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`
+</script>
+
+<div class="field">
+  {#if label}
+    <label for={inputId}>{label}</label>
+  {/if}
+  <input id={inputId} class:has-error={!!error} {...rest} />
+  {#if error}
+    <span class="hint error">{error}</span>
+  {:else if hint}
+    <span class="hint">{hint}</span>
+  {/if}
+</div>
+
+<style>
+  .has-error {
+    border-color: var(--error-text);
+  }
+
+  .has-error:focus {
+    border-color: var(--error-text);
+    box-shadow: 0 0 0 2px var(--error-bg);
+  }
+</style>

frontend/src/components/ui/Message.svelte

···
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    variant: 'success' | 'error' | 'warning' | 'info'
+    children: Snippet
+  }
+
+  let { variant, children }: Props = $props()
+</script>
+
+<div class="message message-{variant}">
+  {@render children()}
+</div>
+
+<style>
+  .message {
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+  }
+
+  .message-success {
+    background: var(--success-bg);
+    border: 1px solid var(--success-border);
+    color: var(--success-text);
+  }
+
+  .message-error {
+    background: var(--error-bg);
+    border: 1px solid var(--error-border);
+    color: var(--error-text);
+  }
+
+  .message-warning {
+    background: var(--warning-bg);
+    border: 1px solid var(--warning-border);
+    color: var(--warning-text);
+  }
+
+  .message-info {
+    background: var(--accent-muted);
+    border: 1px solid var(--accent);
+    color: var(--text-primary);
+  }
+</style>

frontend/src/components/ui/Page.svelte

···
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { _ } from '../../lib/i18n'
+
+  interface Props {
+    title: string
+    size?: 'sm' | 'md' | 'lg'
+    backHref?: string
+    backLabel?: string
+    children: Snippet
+    actions?: Snippet
+  }
+
+  let {
+    title,
+    size = 'md',
+    backHref,
+    backLabel,
+    children,
+    actions
+  }: Props = $props()
+</script>
+
+<div class="page page-{size}">
+  <header>
+    {#if backHref}
+      <a href={backHref} class="back-link">&larr; {backLabel || $_('common.backToDashboard')}</a>
+    {/if}
+    <div class="header-row">
+      <h1>{title}</h1>
+      {#if actions}
+        <div class="actions">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+  </header>
+  {@render children()}
+</div>
+
+<style>
+  .page {
+    margin: 0 auto;
+    padding: var(--space-7);
+  }
+
+  .page-sm { max-width: var(--width-sm); }
+  .page-md { max-width: var(--width-md); }
+  .page-lg { max-width: var(--width-lg); }
+
+  header {
+    margin-bottom: var(--space-7);
+  }
+
+  .back-link {
+    display: inline-block;
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    text-decoration: none;
+    margin-bottom: var(--space-3);
+  }
+
+  .back-link:hover {
+    color: var(--accent);
+  }
+
+  .header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--space-3);
+  }
+</style>

frontend/src/components/ui/Section.svelte

···
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    title?: string
+    description?: string
+    variant?: 'default' | 'danger'
+    children: Snippet
+  }
+
+  let {
+    title,
+    description,
+    variant = 'default',
+    children
+  }: Props = $props()
+</script>
+
+<section class="section section-{variant}">
+  {#if title}
+    <h2>{title}</h2>
+  {/if}
+  {#if description}
+    <p class="description">{description}</p>
+  {/if}
+  {@render children()}
+</section>
+
+<style>
+  .section {
+    background: var(--bg-secondary);
+    border-radius: var(--radius-xl);
+    padding: var(--space-6);
+  }
+
+  .section + .section {
+    margin-top: var(--space-6);
+  }
+
+  .section-danger {
+    background: var(--error-bg);
+    border: 1px solid var(--error-border);
+  }
+
+  .section-danger h2 {
+    color: var(--error-text);
+  }
+
+  h2 {
+    margin: 0 0 var(--space-3) 0;
+    font-size: var(--text-lg);
+  }
+
+  .description {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-5);
+  }
+</style>

frontend/src/components/ui/index.ts

···
+export { default as Button } from './Button.svelte'
+export { default as Card } from './Card.svelte'
+export { default as Input } from './Input.svelte'
+export { default as Message } from './Message.svelte'
+export { default as Page } from './Page.svelte'
+export { default as Section } from './Section.svelte'

frontend/src/lib/api.ts

···
     })
   },
 
+  async updateLocale(token: string, preferredLocale: string): Promise<{ preferredLocale: string }> {
+    return xrpc('com.tranquil.account.updateLocale', {
+      method: 'POST',
+      token,
+      body: { preferredLocale },
+    })
+  },
+
   async listSessions(token: string): Promise<{
     sessions: Array<{
       id: string

frontend/src/lib/auth.svelte.ts

···
 import { api, type Session, type CreateAccountParams, type CreateAccountResult, ApiError } from './api'
 import { startOAuthLogin, handleOAuthCallback, checkForOAuthCallback, clearOAuthCallbackParams, refreshOAuthToken } from './oauth'
+import { setLocale, type SupportedLocale } from './i18n'
+
+function applyLocaleFromSession(sessionInfo: { preferredLocale?: string | null }) {
+  if (sessionInfo.preferredLocale) {
+    setLocale(sessionInfo.preferredLocale as SupportedLocale)
+  }
+}
 
 const STORAGE_KEY = 'tranquil_pds_session'
 const ACCOUNTS_KEY = 'tranquil_pds_accounts'
···
       state.session = session
       saveSession(session)
       addOrUpdateSavedAccount(session)
+      applyLocaleFromSession(sessionInfo)
       state.loading = false
       return
     } catch (e) {
···
   const stored = loadSession()
   if (stored) {
     try {
-      const session = await api.getSession(stored.accessJwt)
-      state.session = { ...session, accessJwt: stored.accessJwt, refreshJwt: stored.refreshJwt }
+      const sessionInfo = await api.getSession(stored.accessJwt)
+      state.session = { ...sessionInfo, accessJwt: stored.accessJwt, refreshJwt: stored.refreshJwt }
       addOrUpdateSavedAccount(state.session)
+      applyLocaleFromSession(sessionInfo)
     } catch (e) {
       if (e instanceof ApiError && e.status === 401) {
         try {
···
           state.session = session
           saveSession(session)
           addOrUpdateSavedAccount(session)
+          applyLocaleFromSession(sessionInfo)
         } catch {
           saveSession(null)
           state.session = null
···
 
 export function getAuthState() {
   return state
+}
+
+export async function refreshSession(): Promise<void> {
+  if (!state.session) return
+  try {
+    const sessionInfo = await api.getSession(state.session.accessJwt)
+    state.session = {
+      ...sessionInfo,
+      accessJwt: state.session.accessJwt,
+      refreshJwt: state.session.refreshJwt,
+    }
+    saveSession(state.session)
+    addOrUpdateSavedAccount(state.session)
+  } catch (e) {
+    console.error('Failed to refresh session:', e)
+  }
 }
 
 export function getToken(): string | null {

frontend/src/lib/date.ts

···
+export function formatDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+export function formatDateTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+}

frontend/src/lib/i18n.ts

···
+import { register, init, getLocaleFromNavigator, locale, _ } from 'svelte-i18n'
+
+const LOCALE_STORAGE_KEY = 'tranquil-pds-locale'
+
+const SUPPORTED_LOCALES = ['en', 'zh', 'ja', 'ko'] as const
+export type SupportedLocale = typeof SUPPORTED_LOCALES[number]
+
+export const localeNames: Record<SupportedLocale, string> = {
+  en: 'English',
+  zh: '中文',
+  ja: '日本語',
+  ko: '한국어'
+}
+
+register('en', () => import('../locales/en.json'))
+register('zh', () => import('../locales/zh.json'))
+register('ja', () => import('../locales/ja.json'))
+register('ko', () => import('../locales/ko.json'))
+
+function getInitialLocale(): string {
+  const stored = localStorage.getItem(LOCALE_STORAGE_KEY)
+  if (stored && SUPPORTED_LOCALES.includes(stored as SupportedLocale)) {
+    return stored
+  }
+
+  const browserLocale = getLocaleFromNavigator()
+  if (browserLocale) {
+    const lang = browserLocale.split('-')[0]
+    if (SUPPORTED_LOCALES.includes(lang as SupportedLocale)) {
+      return lang
+    }
+  }
+
+  return 'en'
+}
+
+export function initI18n() {
+  init({
+    fallbackLocale: 'en',
+    initialLocale: getInitialLocale()
+  })
+}
+
+export function setLocale(newLocale: SupportedLocale) {
+  locale.set(newLocale)
+  localStorage.setItem(LOCALE_STORAGE_KEY, newLocale)
+  document.documentElement.lang = newLocale
+}
+
+export function getSupportedLocales(): SupportedLocale[] {
+  return [...SUPPORTED_LOCALES]
+}
+
+export { locale, _ }

frontend/src/locales/en.json

···
+{
+  "common": {
+    "loading": "Loading...",
+    "error": "Error",
+    "save": "Save",
+    "cancel": "Cancel",
+    "back": "Back",
+    "done": "Done",
+    "refresh": "Refresh",
+    "create": "Create",
+    "delete": "Delete",
+    "confirm": "Confirm",
+    "created": "Created",
+    "expires": "Expires",
+    "name": "Name",
+    "dashboard": "Dashboard",
+    "backToDashboard": "← Dashboard"
+  },
+  "login": {
+    "title": "Sign In",
+    "subtitle": "Sign in to manage your PDS account",
+    "button": "Sign In",
+    "redirecting": "Redirecting...",
+    "chooseAccount": "Choose an account",
+    "signInToAnother": "Sign in to another account",
+    "backToSaved": "← Back to saved accounts",
+    "forgotPassword": "Forgot password?",
+    "lostPasskey": "Lost passkey?",
+    "noAccount": "Don't have an account?",
+    "createAccount": "Create account",
+    "removeAccount": "Remove from saved accounts"
+  },
+  "verification": {
+    "title": "Verify Your Account",
+    "subtitle": "Your account needs verification. Enter the code sent to your verification method.",
+    "codeLabel": "Verification Code",
+    "codePlaceholder": "Enter 6-digit code",
+    "verifyButton": "Verify Account",
+    "verifying": "Verifying...",
+    "resendButton": "Resend Code",
+    "resending": "Resending...",
+    "resent": "Verification code resent!",
+    "backToLogin": "Back to Login"
+  },
+  "register": {
+    "title": "Create Account",
+    "subtitle": "Create a new account on this PDS",
+    "handle": "Handle",
+    "handlePlaceholder": "yourname",
+    "handleHint": "Your full handle will be: @{handle}",
+    "handleDotWarning": "Custom domain handles can be set up after account creation in Settings.",
+    "password": "Password",
+    "passwordPlaceholder": "At least 8 characters",
+    "confirmPassword": "Confirm Password",
+    "confirmPasswordPlaceholder": "Confirm your password",
+    "identityType": "Identity Type",
+    "identityHint": "Choose how your decentralized identity will be managed.",
+    "didPlc": "did:plc",
+    "didPlcRecommended": "(Recommended)",
+    "didPlcHint": "Portable identity managed by PLC Directory",
+    "didWeb": "did:web",
+    "didWebHint": "Identity hosted on this PDS (read warning below)",
+    "didWebBYOD": "did:web (BYOD)",
+    "didWebBYODHint": "Bring your own domain",
+    "didWebWarningTitle": "Important: Understand the trade-offs",
+    "didWebWarning1": "Permanent tie to this PDS:",
+    "didWebWarning1Detail": "Your identity will be {did}. Even if you migrate to another PDS later, this server must continue hosting your DID document.",
+    "didWebWarning2": "No recovery mechanism:",
+    "didWebWarning2Detail": "Unlike did:plc, did:web has no rotation keys. If this PDS goes offline permanently, your identity cannot be recovered.",
+    "didWebWarning3": "We commit to you:",
+    "didWebWarning3Detail": "If you migrate away, we will continue serving a minimal DID document pointing to your new PDS. Your identity will remain functional.",
+    "didWebWarning4": "Recommendation:",
+    "didWebWarning4Detail": "Choose did:plc unless you have a specific reason to prefer did:web.",
+    "externalDid": "Your did:web",
+    "externalDidPlaceholder": "did:web:yourdomain.com",
+    "externalDidHint": "Your domain must serve a valid DID document at /.well-known/did.json pointing to this PDS",
+    "contactMethod": "Contact Method",
+    "contactMethodHint": "Choose how you'd like to verify your account and receive notifications. You only need one.",
+    "verificationMethod": "Verification Method",
+    "email": "Email",
+    "emailAddress": "Email Address",
+    "emailPlaceholder": "[e-mail]",
+    "discord": "Discord",
+    "discordId": "Discord User ID",
+    "discordIdPlaceholder": "Your Discord user ID",
+    "discordIdHint": "Your numeric Discord user ID (enable Developer Mode to find it)",
+    "telegram": "Telegram",
+    "telegramUsername": "Telegram Username",
+    "telegramUsernamePlaceholder": "@yourusername",
+    "signal": "Signal",
+    "signalNumber": "Signal Phone Number",
+    "signalNumberPlaceholder": "[phone]",
+    "signalNumberHint": "Include country code (e.g., +1 for US)",
+    "inviteCode": "Invite Code",
+    "inviteCodePlaceholder": "Enter your invite code",
+    "inviteCodeRequired": "required",
+    "createButton": "Create Account",
+    "creating": "Creating account...",
+    "alreadyHaveAccount": "Already have an account?",
+    "signIn": "Sign in",
+    "wantPasswordless": "Want passwordless security?",
+    "createPasskeyAccount": "Create a passkey account",
+    "validation": {
+      "handleRequired": "Handle is required",
+      "handleNoDots": "Handle cannot contain dots. You can set up a custom domain handle after creating your account.",
+      "passwordRequired": "Password is required",
+      "passwordLength": "Password must be at least 8 characters",
+      "passwordsMismatch": "Passwords do not match",
+      "inviteCodeRequired": "Invite code is required",
+      "externalDidRequired": "External did:web is required",
+      "externalDidFormat": "External DID must start with did:web:",
+      "emailRequired": "Email is required for email verification",
+      "discordIdRequired": "Discord ID is required for Discord verification",
+      "telegramRequired": "Telegram username is required for Telegram verification",
+      "signalRequired": "Phone number is required for Signal verification"
+    }
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "switchAccount": "Switch Account",
+    "addAnotherAccount": "Add another account",
+    "signOut": "Sign out @{handle}",
+    "deactivatedTitle": "Account Deactivated",
+    "deactivatedMessage": "Your account is currently deactivated. This typically happens during account migration. Some features may be limited until your account is reactivated.",
+    "accountOverview": "Account Overview",
+    "handle": "Handle",
+    "did": "DID",
+    "primaryContact": "Primary Contact",
+    "admin": "Admin",
+    "deactivated": "Deactivated",
+    "verified": "Verified",
+    "unverified": "Unverified",
+    "navAppPasswords": "App Passwords",
+    "navAppPasswordsDesc": "Manage passwords for third-party apps",
+    "navSessions": "Active Sessions",
+    "navSessionsDesc": "View and manage your login sessions",
+    "navInviteCodes": "Invite Codes",
+    "navInviteCodesDesc": "View and create invite codes",
+    "navSettings": "Account Settings",
+    "navSettingsDesc": "Email, password, handle, and more",
+    "navSecurity": "Security",
+    "navSecurityDesc": "Two-factor authentication",
+    "navComms": "Communication Preferences",
+    "navCommsDesc": "Discord, Telegram, Signal channels",
+    "navRepo": "Repository Explorer",
+    "navRepoDesc": "Browse and manage raw AT Protocol records",
+    "navAdmin": "Admin Panel",
+    "navAdminDesc": "Server stats and admin operations"
+  },
+  "settings": {
+    "title": "Account Settings",
+    "language": "Language",
+    "languageDescription": "Choose your preferred language",
+    "changeEmail": "Change Email",
+    "currentEmail": "Current: {email}",
+    "newEmail": "New Email",
+    "newEmailPlaceholder": "[e-mail]",
+    "changeEmailButton": "Change Email",
+    "requesting": "Requesting...",
+    "verificationCode": "Verification Code",
+    "verificationCodePlaceholder": "Enter code from email",
+    "confirmEmailChange": "Confirm Email Change",
+    "updating": "Updating...",
+    "changeHandle": "Change Handle",
+    "currentHandle": "Current: @{handle}",
+    "pdsHandle": "PDS Handle",
+    "customDomain": "Custom Domain",
+    "customDomainDescription": "Use your own domain as your handle. You need to verify domain ownership first.",
+    "setupInstructions": "Setup Instructions",
+    "setupMethodsIntro": "Choose one of these verification methods:",
+    "dnsMethod": "Option 1: DNS TXT Record (Recommended)",
+    "dnsMethodDesc": "Add this TXT record to your domain:",
+    "httpMethod": "Option 2: HTTP Well-Known File",
+    "httpMethodDesc": "Serve your DID at this URL:",
+    "httpMethodContent": "The file should contain only:",
+    "yourDomain": "Your Domain",
+    "yourDomainPlaceholder": "example.com",
+    "verifyAndUpdate": "Verify & Update Handle",
+    "verifying": "Verifying...",
+    "newHandle": "New Handle",
+    "newHandlePlaceholder": "yourhandle",
+    "changeHandleButton": "Change Handle",
+    "changePassword": "Change Password",
+    "currentPassword": "Current Password",
+    "currentPasswordPlaceholder": "Enter current password",
+    "newPassword": "New Password",
+    "newPasswordPlaceholder": "At least 8 characters",
+    "confirmNewPassword": "Confirm New Password",
+    "confirmNewPasswordPlaceholder": "Confirm new password",
+    "changePasswordButton": "Change Password",
+    "changing": "Changing...",
+    "exportData": "Export Data",
+    "exportDataDescription": "Download your entire repository as a CAR (Content Addressable Archive) file. This includes all your posts, likes, follows, and other data.",
+    "downloadRepo": "Download Repository",
+    "exporting": "Exporting...",
+    "deleteAccount": "Delete Account",
+    "deleteWarning": "This action is irreversible. All your data will be permanently deleted.",
+    "requestDeletion": "Request Account Deletion",
+    "confirmationCode": "Confirmation Code (from email)",
+    "confirmationCodePlaceholder": "Enter confirmation code",
+    "yourPassword": "Your Password",
+    "yourPasswordPlaceholder": "Enter your password",
+    "permanentlyDelete": "Permanently Delete Account",
+    "deleting": "Deleting...",
+    "messages": {
+      "emailCodeSent": "Verification code sent to your current email",
+      "emailUpdated": "Email updated successfully",
+      "handleUpdated": "Handle updated successfully",
+      "passwordChanged": "Password changed successfully",
+      "passwordsMismatch": "Passwords do not match",
+      "passwordLength": "Password must be at least 8 characters",
+      "deletionCodeSent": "Deletion confirmation sent to your email",
+      "repoExported": "Repository exported successfully",
+      "confirmDelete": "Are you absolutely sure you want to delete your account? This cannot be undone."
+    }
+  },
+  "appPasswords": {
+    "title": "App Passwords",
+    "description": "App passwords let you sign in to third-party apps without giving them your main password. Each app password can be revoked individually.",
+    "createNew": "Create New App Password",
+    "appNamePlaceholder": "App name (e.g., Graysky, Skeets)",
+    "created": "App Password Created",
+    "createdMessage": "Copy this password now. You won't be able to see it again.",
+    "yourPasswords": "Your App Passwords",
+    "noPasswords": "No app passwords yet",
+    "revoke": "Revoke",
+    "revoking": "Revoking...",
+    "creating": "Creating...",
+    "revokeConfirm": "Revoke app password \"{name}\"? Apps using this password will no longer be able to access your account."
+  },
+  "sessions": {
+    "title": "Active Sessions",
+    "loadingSessions": "Loading sessions...",
+    "noSessions": "No active sessions found.",
+    "current": "Current",
+    "oauth": "OAuth",
+    "session": "Session",
+    "signOut": "Sign Out",
+    "revoke": "Revoke",
+    "revokeAll": "Revoke All Other Sessions",
+    "revokeCurrentConfirm": "This will log you out of this session. Continue?",
+    "revokeConfirm": "Revoke this session?",
+    "revokeAllConfirm": "This will revoke {count} other session(s). Continue?",
+    "noOtherSessions": "No other sessions to revoke",
+    "failedToLoad": "Failed to load sessions",
+    "failedToRevoke": "Failed to revoke session",
+    "failedToRevokeAll": "Failed to revoke sessions",
+    "created": "Created:",
+    "expires": "Expires:",
+    "daysAgo": "{count} day(s) ago",
+    "hoursAgo": "{count} hour(s) ago",
+    "minutesAgo": "{count} minute(s) ago",
+    "justNow": "Just now"
+  },
+  "inviteCodes": {
+    "title": "Invite Codes",
+    "description": "Invite codes let you invite friends to join. Each code can be used once.",
+    "createNew": "Create New Invite Code",
+    "uses": "Uses",
+    "usesPlaceholder": "Number of uses (1-100)",
+    "yourCodes": "Your Invite Codes",
+    "noCodes": "No invite codes yet",
+    "available": "Available",
+    "used": "Used by @{handle}",
+    "disabled": "Disabled",
+    "usedBy": "Used by",
+    "creating": "Creating...",
+    "disableConfirm": "Disable this invite code? It can no longer be used.",
+    "created": "Invite Code Created",
+    "copy": "Copy",
+    "createdOn": "Created {date}"
+  },
+  "security": {
+    "title": "Security",
+    "passkeys": "Passkeys",
+    "passkeysDescription": "Passkeys provide secure, passwordless authentication using your device's built-in security (fingerprint, face, or PIN).",
+    "addPasskey": "Add Passkey",
+    "adding": "Adding...",
+    "noPasskeys": "No passkeys registered",
+    "passkeyName": "Passkey name",
+    "passkeyNamePlaceholder": "e.g., MacBook Pro, iPhone",
+    "register": "Register",
+    "registering": "Registering...",
+    "rename": "Rename",
+    "renaming": "Renaming...",
+    "deletePasskey": "Delete",
+    "deletePasskeyConfirm": "Delete passkey \"{name}\"? You won't be able to use it to sign in anymore.",
+    "totp": "Authenticator App (TOTP)",
+    "totpDescription": "Use an authenticator app like Google Authenticator, Authy, or 1Password for two-factor authentication.",
+    "totpEnabled": "TOTP is enabled",
+    "totpDisabled": "TOTP is not enabled",
+    "enableTotp": "Enable TOTP",
+    "disableTotp": "Disable TOTP",
+    "disabling": "Disabling...",
+    "totpSetup": "Set up Authenticator App",
+    "totpSetupInstructions": "Scan this QR code with your authenticator app, then enter the 6-digit code to verify.",
+    "totpCode": "Verification Code",
+    "totpCodePlaceholder": "Enter 6-digit code",
+    "verifyAndEnable": "Verify & Enable",
+    "backupCodes": "Backup Codes",
+    "backupCodesDescription": "Use these codes to sign in if you lose access to your authenticator app. Each code can only be used once.",
+    "regenerateBackupCodes": "Regenerate Backup Codes",
+    "regenerating": "Regenerating...",
+    "regenerateConfirm": "Regenerate backup codes? Your current codes will no longer work.",
+    "legacyLogin": "Legacy Login",
+    "legacyLoginDescription": "Allow signing in with username/password directly (legacy mode). When disabled, you must use OAuth with MFA.",
+    "legacyLoginOn": "Legacy login is enabled",
+    "legacyLoginOff": "Legacy login is disabled",
+    "legacyLoginWarning": "Warning: Enabling legacy login bypasses MFA for direct password logins. Only enable if needed for app compatibility.",
+    "totpPasswordWarning": "With TOTP enabled, changing your password from the Bluesky app (or other legacy apps) will be blocked. To change your password, you have two options:",
+    "totpPasswordOption1Label": "Change it here:",
+    "totpPasswordOption1Text": "Use this website's",
+    "totpPasswordOption1Link": "Settings page",
+    "totpPasswordOption1Suffix": "where you can verify with your authenticator app.",
+    "totpPasswordOption2Label": "Verify your session first:",
+    "totpPasswordOption2Text": "Use the",
+    "totpPasswordOption2Link": "re-authenticate option",
+    "totpPasswordOption2Suffix": "to verify your Bluesky session with TOTP, then password changes will work temporarily.",
+    "legacyAppsTitle": "What are legacy apps?",
+    "legacyAppsDescription": "Some apps (like the official Bluesky app) use older authentication that only requires your password. When you have MFA enabled, these apps bypass your second factor. Disabling legacy login forces all apps to use OAuth, which properly enforces MFA.",
+    "password": "Password",
+    "passwordStatus": "You have a password set",
+    "noPassword": "No password set (passkey-only account)",
+    "setPassword": "Set Password",
+    "removePassword": "Remove Password",
+    "removePasswordConfirm": "Remove your password? You'll need to use passkeys to sign in.",
+    "removing": "Removing...",
+    "loading": "Loading...",
+    "loadingPasskeys": "Loading passkeys...",
+    "cancel": "Cancel",
+    "save": "Save",
+    "back": "Back",
+    "next": "Next: Verify Code",
+    "copyToClipboard": "Copy to Clipboard",
+    "savedMyCodes": "I've Saved My Codes",
+    "cantScan": "Can't scan? Enter manually",
+    "unnamedPasskey": "Unnamed passkey",
+    "added": "Added",
+    "lastUsed": "Last used",
+    "passwordDescription": "Manage your account password. If you have passkeys set up, you can optionally remove your password for a fully passwordless experience.",
+    "disableTotpWarning": "This will make your account less secure.",
+    "removePasswordWarning": "This will make your account passkey-only. You'll only be able to sign in using your registered passkeys. If you lose access to all your passkeys, you can recover your account using your notification channel.",
+    "beforeProceeding": "Before proceeding:",
+    "beforeProceedingItem1": "Make sure you have at least one reliable passkey registered",
+    "beforeProceedingItem2": "Consider registering passkeys on multiple devices",
+    "beforeProceedingItem3": "Ensure your recovery notification channel is up to date",
+    "addPasskeyFirst": "Add at least one passkey before you can remove your password.",
+    "passkeyOnlyHint": "You sign in using passkeys only. If you ever lose access to your passkeys, you can recover your account using the \"Lost passkey?\" link on the login page.",
+    "trustedDevices": "Trusted Devices",
+    "trustedDevicesDescription": "Manage devices that can skip two-factor authentication when signing in. Trust is granted for 30 days and automatically extends when you use the device.",
+    "manageTrustedDevices": "Manage Trusted Devices",
+    "appCompatibility": "App Compatibility",
+    "enterPassword": "Enter your password",
+    "legacyLoginEnabled": "Legacy app login enabled",
+    "legacyLoginDisabled": "Legacy app login disabled - only OAuth apps can sign in",
+    "failedToUpdatePreference": "Failed to update preference",
+    "passwordRemoved": "Password removed. Your account is now passkey-only.",
+    "failedToRemovePassword": "Failed to remove password",
+    "failedToLoadTotpStatus": "Failed to load TOTP status",
+    "totpEnabledSuccess": "Two-factor authentication enabled successfully",
+    "totpDisabledSuccess": "Two-factor authentication disabled",
+    "backupCodesCopied": "Backup codes copied to clipboard",
+    "failedToLoadPasskeys": "Failed to load passkeys",
+    "passkeysNotSupported": "Passkeys are not supported in this browser",
+    "passkeyCreationCancelled": "Passkey creation was cancelled",
+    "passkeyAddedSuccess": "Passkey added successfully",
+    "passkeyDeleted": "Passkey deleted",
+    "passkeyRenamed": "Passkey renamed"
+  },
+  "comms": {
+    "title": "Communication Preferences",
+    "description": "Choose how you want to receive important messages like password resets, security alerts, and account updates.",
+    "preferredChannel": "Preferred Channel",
+    "preferredChannelDescription": "Select your preferred way to receive messages. You must configure a channel before you can select it.",
+    "channelConfiguration": "Channel Configuration",
+    "emailVia": "Receive messages via email",
+    "discordVia": "Receive messages via Discord DM",
+    "telegramVia": "Receive messages via Telegram",
+    "signalVia": "Receive messages via Signal",
+    "configureToEnable": "Configure below to enable",
+    "emailManagedInSettings": "Your email is managed in Account Settings",
+    "discordIdHint": "Your Discord user ID (not username). Enable Developer Mode in Discord to copy it.",
+    "telegramHint": "Your Telegram username without the @ symbol",
+    "signalHint": "Your Signal phone number with country code",
+    "primary": "Primary",
+    "verified": "Verified",
+    "notVerified": "Not verified",
+    "verifyButton": "Verify",
+    "verifyCodePlaceholder": "Enter verification code",
+    "submit": "Submit",
+    "saving": "Saving...",
+    "savePreferences": "Save Preferences",
+    "preferencesSaved": "Communication preferences saved",
+    "verifiedSuccess": "{channel} verified successfully",
+    "messageHistory": "Message History",
+    "historyDescription": "View recent messages sent to your account.",
+    "loadHistory": "Load History",
+    "hideHistory": "Hide History",
+    "noMessages": "No messages found.",
+    "sent": "sent",
+    "failed": "failed"
+  },
+  "repoExplorer": {
+    "title": "Repository Explorer",
+    "description": "Browse and manage your raw AT Protocol records.",
+    "collections": "Collections",
+    "noCollections": "No collections found",
+    "records": "Records",
+    "noRecords": "No records in this collection",
+    "recordDetails": "Record Details",
+    "rkey": "Record Key",
+    "cid": "CID",
+    "value": "Value",
+    "deleteRecord": "Delete Record",
+    "deleteConfirm": "Delete record {rkey}? This cannot be undone.",
+    "unknownError": "An unknown error occurred",
+    "invalidJson": "Invalid JSON",
+    "collectionRequired": "Collection is required",
+    "recordCreated": "Record created: {uri}",
+    "recordUpdated": "Record updated",
+    "recordDeleted": "Record deleted",
+    "newRecord": "New Record",
+    "createRecord": "Create Record",
+    "filterCollections": "Filter collections...",
+    "filterRecords": "Filter records...",
+    "noCollectionsYet": "No collections yet. Create your first record to get started.",
+    "loadMore": "Load More",
+    "recordJson": "Record JSON",
+    "saving": "Saving...",
+    "updateRecord": "Update Record",
+    "collectionNsid": "Collection (NSID)",
+    "recordKeyOptional": "Record Key (optional)",
+    "autoGenerated": "Auto-generated if empty (TID)",
+    "autoGeneratedHint": "Leave empty to auto-generate a TID-based key",
+    "creating": "Creating...",
+    "demoPostText": "Hello from my PDS! This is my first post.",
+    "demoDisplayName": "Your Display Name",
+    "demoBio": "A short bio about yourself."
+  },
+  "admin": {
+    "title": "Admin Panel",
+    "serverStats": "Server Statistics",
+    "users": "Users",
+    "repos": "Repositories",
+    "records": "Records",
+    "blobStorage": "Blob Storage",
+    "refreshStats": "Refresh Stats",
+    "userManagement": "User Management",
+    "searchPlaceholder": "Search by handle (optional)",
+    "searchUsers": "Search Users",
+    "noUsers": "No users found",
+    "handle": "Handle",
+    "email": "Email",
+    "status": "Status",
+    "created": "Created",
+    "loadMore": "Load More",
+    "inviteCodes": "Invite Codes",
+    "loadInviteCodes": "Load Invite Codes",
+    "refresh": "Refresh",
+    "noInvites": "No invite codes found",
+    "code": "Code",
+    "available": "Available",
+    "uses": "Uses",
+    "actions": "Actions",
+    "disable": "Disable",
+    "disableInviteConfirm": "Disable invite code {code}?",
+    "active": "Active",
+    "exhausted": "Exhausted",
+    "disabled": "Disabled",
+    "userDetails": "User Details",
+    "did": "DID",
+    "invites": "Invites",
+    "enabled": "Enabled",
+    "enableInvites": "Enable Invites",
+    "disableInvites": "Disable Invites",
+    "deleteAccount": "Delete Account",
+    "deleteConfirm": "Delete account @{handle}? This cannot be undone.",
+    "verified": "Verified",
+    "unverified": "Unverified",
+    "deactivated": "Deactivated"
+  },
+  "oauth": {
+    "login": {
+      "title": "Sign In",
+      "subtitle": "Sign in to continue to the application",
+      "signingIn": "Signing in...",
+      "authenticating": "Authenticating...",
+      "checkingPasskey": "Checking passkey...",
+      "signInWithPasskey": "Sign in with passkey",
+      "passkeyNotSetUp": "Passkey not set up",
+      "orUsePassword": "or use password",
+      "password": "Password",
+      "rememberDevice": "Remember this device",
+      "passkeyHintChecking": "Checking passkey status...",
+      "passkeyHintAvailable": "Sign in with your passkey",
+      "passkeyHintNotAvailable": "No passkeys registered for this account"
+    },
+    "consent": {
+      "title": "Authorize Application",
+      "appWantsAccess": "{app} wants to access your account",
+      "permissions": "This application will be able to:",
+      "readProfile": "Read your profile information",
+      "readPosts": "Read your posts and content",
+      "writePosts": "Create and delete posts on your behalf",
+      "readNotifications": "Read your notifications",
+      "fullAccess": "Full access to your account",
+      "authorize": "Authorize",
+      "deny": "Deny",
+      "authorizing": "Authorizing...",
+      "rememberChoice": "Remember this choice",
+      "signingInAs": "Signing in as:",
+      "permissionsRequested": "Permissions Requested",
+      "required": "Required",
+      "rememberChoiceLabel": "Remember my choice for this application"
+    },
+    "accounts": {
+      "title": "Choose Account",
+      "subtitle": "Select an account to continue",
+      "useAnother": "Use a different account"
+    },
+    "twoFactor": {
+      "title": "Two-Factor Authentication",
+      "subtitle": "Additional verification is required",
+      "usePasskey": "Use Passkey",
+      "useTotp": "Use Authenticator App",
+      "verifying": "Verifying..."
+    },
+    "twoFactorCode": {
+      "title": "Two-Factor Authentication",
+      "subtitle": "A verification code has been sent to your {channel}. Enter the code below to continue.",
+      "codeLabel": "Verification Code",
+      "codePlaceholder": "Enter 6-digit code",
+      "verify": "Verify",
+      "verifying": "Verifying...",
+      "errors": {
+        "missingRequestUri": "Missing request_uri parameter",
+        "verificationFailed": "Verification failed",
+        "connectionFailed": "Failed to connect to server",
+        "unexpectedResponse": "Unexpected response from server"
+      }
+    },
+    "totp": {
+      "title": "Enter Authenticator Code",
+      "subtitle": "Enter the 6-digit code from your authenticator app",
+      "codePlaceholder": "Enter 6-digit code",
+      "verify": "Verify",
+      "verifying": "Verifying...",
+      "useBackupCode": "Use backup code instead",
+      "backupCodePlaceholder": "Enter backup code",
+      "trustDevice": "Trust this device for 30 days",
+      "hintBackupCode": "Using backup code",
+      "hintTotpCode": "Using authenticator code",
+      "hintDefault": "6 digits for authenticator, 8 characters for backup code"
+    },
+    "passkey": {
+      "title": "Passkey Verification",
+      "subtitle": "Use your passkey to verify your identity",
+      "waiting": "Waiting for passkey...",
+      "useTotp": "Use authenticator app instead"
+    },
+    "error": {
+      "title": "Authorization Error",
+      "genericError": "An error occurred during authorization.",
+      "tryAgain": "Try Again",
+      "backToApp": "Back to Application"
+    }
+  },
+  "verify": {
+    "title": "Verify Your Account",
+    "subtitle": "We've sent a verification code to your {channel}. Enter it below to complete registration.",
+    "codePlaceholder": "Enter 6-digit code",
+    "codeLabel": "Verification Code",
+    "verifyButton": "Verify Account",
+    "verifying": "Verifying...",
+    "resendCode": "Resend Code",
+    "resending": "Resending...",
+    "codeResent": "Verification code resent!",
+    "backToLogin": "Back to Login",
+    "verifyingAccount": "Verifying account: @{handle}",
+    "startOver": "Start over with a different account",
+    "noPending": "No pending verification found.",
+    "noPendingInfo": "If you recently created an account and need to verify it, you may need to create a new account. If you already verified your account, you can sign in.",
+    "createAccount": "Create Account",
+    "signIn": "Sign In"
+  },
+  "resetPassword": {
+    "title": "Reset Password",
+    "forgotTitle": "Forgot Password",
+    "subtitle": "Enter the code you received and choose a new password.",
+    "forgotSubtitle": "Enter your handle or email and we'll send you a code to reset your password.",
+    "handleOrEmail": "Handle or Email",
+    "emailPlaceholder": "handle or [e-mail]",
+    "sendCode": "Send Reset Code",
+    "sending": "Sending...",
+    "codeSent": "Password reset code sent! Check your preferred notification channel.",
+    "enterCode": "Enter the code from your email and your new password.",
+    "code": "Reset Code",
+    "codePlaceholder": "Enter reset code",
+    "newPassword": "New Password",
+    "newPasswordPlaceholder": "At least 8 characters",
+    "confirmPassword": "Confirm Password",
+    "confirmPasswordPlaceholder": "Confirm new password",
+    "resetButton": "Reset Password",
+    "resetting": "Resetting...",
+    "success": "Password reset successfully!",
+    "backToLogin": "Back to Sign In",
+    "requestNewCode": "Request New Code",
+    "passwordsMismatch": "Passwords do not match",
+    "passwordLength": "Password must be at least 8 characters"
+  },
+  "recoverPasskey": {
+    "title": "Recover Your Account",
+    "invalidLinkTitle": "Invalid Recovery Link",
+    "invalidLinkMessage": "This recovery link is invalid or has been corrupted. Please request a new recovery email.",
+    "goToLogin": "Go to Login",
+    "successTitle": "Password Set!",
+    "successMessage": "Your temporary password has been set. You can now sign in with this password.",
+    "successNextSteps": "After signing in, we recommend adding a new passkey in your security settings to restore passkey-only authentication.",
+    "signIn": "Sign In",
+    "subtitle": "Set a temporary password to regain access to your passkey-only account.",
+    "newPassword": "New Password",
+    "newPasswordPlaceholder": "At least 8 characters",
+    "confirmPassword": "Confirm Password",
+    "confirmPasswordPlaceholder": "Confirm your password",
+    "whatHappensNext": "What happens next?",
+    "whatHappensNextDetail": "After setting this password, you can sign in and add a new passkey in your security settings. Once you have a new passkey, you can optionally remove the temporary password.",
+    "setPassword": "Set Password",
+    "settingPassword": "Setting password...",
+    "validation": {
+      "passwordRequired": "New password is required",
+      "passwordLength": "Password must be at least 8 characters",
+      "passwordsMismatch": "Passwords do not match"
+    },
+    "errors": {
+      "invalidLink": "Invalid recovery link. Please request a new one.",
+      "expired": "This recovery link has expired. Please request a new one."
+    }
+  },
+  "requestPasskeyRecovery": {
+    "title": "Recover Passkey Account",
+    "subtitle": "Lost access to your passkey? Enter your handle or email and we'll send you a recovery link.",
+    "successTitle": "Recovery Link Sent",
+    "successMessage": "If your account exists and is a passkey-only account, you'll receive a recovery link at your preferred notification channel.",
+    "successInfo": "The link will expire in 1 hour. Check your email, Discord, Telegram, or Signal depending on your account settings.",
+    "handleOrEmail": "Handle or Email",
+    "emailPlaceholder": "handle or [e-mail]",
+    "howItWorks": "How it works",
+    "howItWorksDetail": "We'll send a secure link to your registered notification channel. Click the link to set a temporary password. Then you can sign in and add a new passkey.",
+    "sendRecoveryLink": "Send Recovery Link",
+    "sending": "Sending...",
+    "backToLogin": "Back to Sign In"
+  },
+  "registerPasskey": {
+    "title": "Create Passkey Account",
+    "subtitle": "Create a passwordless account using a passkey.",
+    "handle": "Handle",
+    "handlePlaceholder": "yourname",
+    "handleHint": "Your full handle will be: @{handle}",
+    "email": "Email Address",
+    "emailPlaceholder": "[e-mail]",
+    "inviteCode": "Invite Code",
+    "inviteCodePlaceholder": "Enter your invite code",
+    "createButton": "Create Account",
+    "creating": "Creating...",
+    "alreadyHaveAccount": "Already have an account?",
+    "signIn": "Sign in",
+    "wantPassword": "Want to use a password?",
+    "createPasswordAccount": "Create a password account"
+  },
+  "trustedDevices": {
+    "title": "Trusted Devices",
+    "backToSecurity": "← Security Settings",
+    "description": "Trusted devices can skip two-factor authentication when logging in. Trust is granted for 30 days and automatically extends when you use the device.",
+    "noDevices": "No trusted devices yet.",
+    "noDevicesHint": "When you log in with two-factor authentication enabled, you can choose to trust the device for 30 days.",
+    "lastSeen": "Last seen:",
+    "trustedSince": "Trusted since:",
+    "trustExpires": "Trust expires:",
+    "expired": "Expired",
+    "tomorrow": "Tomorrow",
+    "inDays": "In {days} days",
+    "revoke": "Revoke Trust",
+    "revokeConfirm": "Are you sure you want to revoke trust for this device? You will need to enter your 2FA code next time you log in from this device.",
+    "deviceRevoked": "Device trust revoked",
+    "deviceRenamed": "Device renamed",
+    "deviceNamePlaceholder": "Device name",
+    "browser": "Browser:",
+    "unknownDevice": "Unknown device"
+  },
+  "reauth": {
+    "title": "Re-authentication Required",
+    "subtitle": "Please verify your identity to continue.",
+    "usePassword": "Use Password",
+    "usePasskey": "Use Passkey",
+    "useTotp": "Use Authenticator",
+    "passwordPlaceholder": "Enter your password",
+    "totpPlaceholder": "Enter 6-digit code",
+    "verify": "Verify",
+    "verifying": "Verifying...",
+    "cancel": "Cancel"
+  }
+}

frontend/src/locales/ja.json

···
+{
+  "common": {
+    "loading": "読み込み中...",
+    "error": "エラー",
+    "save": "保存",
+    "cancel": "キャンセル",
+    "back": "戻る",
+    "done": "完了",
+    "refresh": "更新",
+    "create": "作成",
+    "delete": "削除",
+    "confirm": "確認",
+    "created": "作成日時",
+    "expires": "有効期限",
+    "name": "名前",
+    "dashboard": "ダッシュボード",
+    "backToDashboard": "← ダッシュボード"
+  },
+  "login": {
+    "title": "サインイン",
+    "subtitle": "PDS アカウントを管理するにはサインインしてください",
+    "button": "サインイン",
+    "redirecting": "リダイレクト中...",
+    "chooseAccount": "アカウントを選択",
+    "signInToAnother": "別のアカウントでサインイン",
+    "backToSaved": "← 保存済みアカウントに戻る",
+    "forgotPassword": "パスワードをお忘れですか？",
+    "lostPasskey": "パスキーを紛失しましたか？",
+    "noAccount": "アカウントをお持ちでないですか？",
+    "createAccount": "アカウントを作成",
+    "removeAccount": "保存済みアカウントから削除"
+  },
+  "verification": {
+    "title": "アカウント確認",
+    "subtitle": "アカウントの確認が必要です。確認方法に送信されたコードを入力してください。",
+    "codeLabel": "確認コード",
+    "codePlaceholder": "6桁のコードを入力",
+    "verifyButton": "確認する",
+    "verifying": "確認中...",
+    "resendButton": "コードを再送信",
+    "resending": "送信中...",
+    "resent": "確認コードを再送信しました！",
+    "backToLogin": "ログインに戻る"
+  },
+  "register": {
+    "title": "アカウント作成",
+    "subtitle": "この PDS で新規アカウントを作成",
+    "handle": "ハンドル",
+    "handlePlaceholder": "あなたの名前",
+    "handleHint": "完全なハンドル: @{handle}",
+    "handleDotWarning": "カスタムドメインハンドルはアカウント作成後に設定で構成できます。",
+    "password": "パスワード",
+    "passwordPlaceholder": "8文字以上",
+    "confirmPassword": "パスワード確認",
+    "confirmPasswordPlaceholder": "パスワードを再入力",
+    "identityType": "アイデンティティタイプ",
+    "identityHint": "分散型アイデンティティの管理方法を選択してください。",
+    "didPlc": "did:plc",
+    "didPlcRecommended": "（推奨）",
+    "didPlcHint": "PLC ディレクトリで管理されるポータブルアイデンティティ",
+    "didWeb": "did:web",
+    "didWebHint": "この PDS でホストされるアイデンティティ（下記の警告をお読みください）",
+    "didWebBYOD": "did:web (BYOD)",
+    "didWebBYODHint": "独自ドメインを持ち込む",
+    "didWebWarningTitle": "重要: トレードオフをご理解ください",
+    "didWebWarning1": "この PDS への永続的な紐付け:",
+    "didWebWarning1Detail": "あなたのアイデンティティは {did} になります。後で別の PDS に移行しても、このサーバーは DID ドキュメントをホストし続ける必要があります。",
+    "didWebWarning2": "復旧手段がありません:",
+    "didWebWarning2Detail": "did:plc と異なり、did:web にはローテーションキーがありません。この PDS が永久にオフラインになると、アイデンティティは復旧できません。",
+    "didWebWarning3": "私たちの約束:",
+    "didWebWarning3Detail": "移行する場合、新しい PDS を指す最小限の DID ドキュメントを引き続き提供します。アイデンティティは機能し続けます。",
+    "didWebWarning4": "推奨:",
+    "didWebWarning4Detail": "did:web を希望する特定の理由がない限り、did:plc を選択してください。",
+    "externalDid": "あなたの did:web",
+    "externalDidPlaceholder": "did:web:yourdomain.com",
+    "externalDidHint": "ドメインは /.well-known/did.json でこの PDS を指す有効な DID ドキュメントを提供する必要があります",
+    "contactMethod": "連絡方法",
+    "contactMethodHint": "アカウントの確認と通知の受信方法を選択してください。1つだけ必要です。",
+    "verificationMethod": "確認方法",
+    "email": "メール",
+    "emailAddress": "メールアドレス",
+    "emailPlaceholder": "[e-mail]",
+    "discord": "Discord",
+    "discordId": "Discord ユーザー ID",
+    "discordIdPlaceholder": "Discord ユーザー ID",
+    "discordIdHint": "数値の Discord ユーザー ID（開発者モードを有効にして確認）",
+    "telegram": "Telegram",
+    "telegramUsername": "Telegram ユーザー名",
+    "telegramUsernamePlaceholder": "@yourusername",
+    "signal": "Signal",
+    "signalNumber": "Signal 電話番号",
+    "signalNumberPlaceholder": "+81XXXXXXXXXX",
+    "signalNumberHint": "国番号を含めてください（例: 日本は +81）",
+    "inviteCode": "招待コード",
+    "inviteCodePlaceholder": "招待コードを入力",
+    "inviteCodeRequired": "必須",
+    "createButton": "アカウントを作成",
+    "creating": "作成中...",
+    "alreadyHaveAccount": "すでにアカウントをお持ちですか？",
+    "signIn": "サインイン",
+    "wantPasswordless": "パスワードレスをご希望ですか？",
+    "createPasskeyAccount": "パスキーアカウントを作成",
+    "validation": {
+      "handleRequired": "ハンドルは必須です",
+      "handleNoDots": "ハンドルにドットは使用できません。アカウント作成後にカスタムドメインを設定できます。",
+      "passwordRequired": "パスワードは必須です",
+      "passwordLength": "パスワードは8文字以上である必要があります",
+      "passwordsMismatch": "パスワードが一致しません",
+      "inviteCodeRequired": "招待コードは必須です",
+      "externalDidRequired": "外部 did:web は必須です",
+      "externalDidFormat": "外部 DID は did:web: で始まる必要があります",
+      "emailRequired": "メール認証にはメールアドレスが必要です",
+      "discordIdRequired": "Discord 認証には Discord ID が必要です",
+      "telegramRequired": "Telegram 認証には Telegram ユーザー名が必要です",
+      "signalRequired": "Signal 認証には電話番号が必要です"
+    }
+  },
+  "dashboard": {
+    "title": "ダッシュボード",
+    "switchAccount": "アカウント切替",
+    "addAnotherAccount": "別のアカウントを追加",
+    "signOut": "@{handle} からサインアウト",
+    "deactivatedTitle": "アカウント無効化",
+    "deactivatedMessage": "アカウントは現在無効化されています。これは通常、アカウント移行中に発生します。アカウントが再有効化されるまで、一部の機能が制限される場合があります。",
+    "accountOverview": "アカウント概要",
+    "handle": "ハンドル",
+    "did": "DID",
+    "primaryContact": "主要連絡先",
+    "admin": "管理者",
+    "deactivated": "無効化",
+    "verified": "認証済み",
+    "unverified": "未認証",
+    "navAppPasswords": "アプリパスワード",
+    "navAppPasswordsDesc": "サードパーティアプリのパスワードを管理",
+    "navSessions": "アクティブセッション",
+    "navSessionsDesc": "ログインセッションを表示・管理",
+    "navInviteCodes": "招待コード",
+    "navInviteCodesDesc": "招待コードを表示・作成",
+    "navSettings": "アカウント設定",
+    "navSettingsDesc": "メール、パスワード、ハンドルなど",
+    "navSecurity": "セキュリティ",
+    "navSecurityDesc": "二要素認証",
+    "navComms": "連絡設定",
+    "navCommsDesc": "Discord、Telegram、Signal チャンネル",
+    "navRepo": "リポジトリエクスプローラー",
+    "navRepoDesc": "AT Protocol レコードを閲覧・管理",
+    "navAdmin": "管理パネル",
+    "navAdminDesc": "サーバー統計と管理操作"
+  },
+  "settings": {
+    "title": "アカウント設定",
+    "language": "言語",
+    "languageDescription": "お好みの言語を選択",
+    "changeEmail": "メール変更",
+    "currentEmail": "現在: {email}",
+    "newEmail": "新しいメール",
+    "newEmailPlaceholder": "[e-mail]",
+    "changeEmailButton": "メールを変更",
+    "requesting": "リクエスト中...",
+    "verificationCode": "確認コード",
+    "verificationCodePlaceholder": "メールから受け取ったコードを入力",
+    "confirmEmailChange": "メール変更を確認",
+    "updating": "更新中...",
+    "changeHandle": "ハンドル変更",
+    "currentHandle": "現在: @{handle}",
+    "pdsHandle": "PDS ハンドル",
+    "customDomain": "カスタムドメイン",
+    "customDomainDescription": "独自のドメインをハンドルとして使用します。まずドメインの所有権を確認する必要があります。",
+    "setupInstructions": "設定手順",
+    "setupMethodsIntro": "以下の確認方法のいずれかを選択してください:",
+    "dnsMethod": "方法 1: DNS TXT レコード（推奨）",
+    "dnsMethodDesc": "ドメインにこの TXT レコードを追加:",
+    "httpMethod": "方法 2: HTTP Well-Known ファイル",
+    "httpMethodDesc": "この URL で DID を提供:",
+    "httpMethodContent": "ファイルには以下の内容のみを含める:",
+    "yourDomain": "ドメイン",
+    "yourDomainPlaceholder": "example.com",
+    "verifyAndUpdate": "確認してハンドルを更新",
+    "verifying": "確認中...",
+    "newHandle": "新しいハンドル",
+    "newHandlePlaceholder": "yourhandle",
+    "changeHandleButton": "ハンドルを変更",
+    "changePassword": "パスワード変更",
+    "currentPassword": "現在のパスワード",
+    "currentPasswordPlaceholder": "現在のパスワードを入力",
+    "newPassword": "新しいパスワード",
+    "newPasswordPlaceholder": "8文字以上",
+    "confirmNewPassword": "新しいパスワードの確認",
+    "confirmNewPasswordPlaceholder": "新しいパスワードを再入力",
+    "changePasswordButton": "パスワードを変更",
+    "changing": "変更中...",
+    "exportData": "データエクスポート",
+    "exportDataDescription": "リポジトリ全体を CAR（Content Addressable Archive）ファイルとしてダウンロードします。投稿、いいね、フォローなどすべてのデータが含まれます。",
+    "downloadRepo": "リポジトリをダウンロード",
+    "exporting": "エクスポート中...",
+    "deleteAccount": "アカウント削除",
+    "deleteWarning": "この操作は取り消せません。すべてのデータが完全に削除されます。",
+    "requestDeletion": "アカウント削除をリクエスト",
+    "confirmationCode": "確認コード（メールから）",
+    "confirmationCodePlaceholder": "確認コードを入力",
+    "yourPassword": "パスワード",
+    "yourPasswordPlaceholder": "パスワードを入力",
+    "permanentlyDelete": "アカウントを完全に削除",
+    "deleting": "削除中...",
+    "messages": {
+      "emailCodeSent": "現在のメールに確認コードを送信しました",
+      "emailUpdated": "メールを更新しました",
+      "handleUpdated": "ハンドルを更新しました",
+      "passwordChanged": "パスワードを変更しました",
+      "passwordsMismatch": "パスワードが一致しません",
+      "passwordLength": "パスワードは8文字以上である必要があります",
+      "deletionCodeSent": "削除確認をメールに送信しました",
+      "repoExported": "リポジトリをエクスポートしました",
+      "confirmDelete": "本当にアカウントを削除しますか？この操作は取り消せません。"
+    }
+  },
+  "appPasswords": {
+    "title": "アプリパスワード",
+    "description": "アプリパスワードを使用すると、メインパスワードを提供せずにサードパーティアプリにサインインできます。各アプリパスワードは個別に取り消すことができます。",
+    "createNew": "新しいアプリパスワードを作成",
+    "appNamePlaceholder": "アプリ名（例: Graysky、Skeets）",
+    "created": "アプリパスワードを作成しました",
+    "createdMessage": "このパスワードを今すぐコピーしてください。再度表示することはできません。",
+    "yourPasswords": "アプリパスワード一覧",
+    "noPasswords": "アプリパスワードはまだありません",
+    "revoke": "取り消す",
+    "revoking": "取り消し中...",
+    "creating": "作成中...",
+    "revokeConfirm": "アプリパスワード「{name}」を取り消しますか？このパスワードを使用しているアプリはアカウントにアクセスできなくなります。"
+  },
+  "sessions": {
+    "title": "アクティブセッション",
+    "loadingSessions": "セッションを読み込み中...",
+    "noSessions": "アクティブなセッションが見つかりません。",
+    "current": "現在",
+    "oauth": "OAuth",
+    "session": "セッション",
+    "signOut": "サインアウト",
+    "revoke": "取り消す",
+    "revokeAll": "他のすべてのセッションを取り消す",
+    "revokeCurrentConfirm": "このセッションからサインアウトされます。続行しますか？",
+    "revokeConfirm": "このセッションを取り消しますか？",
+    "revokeAllConfirm": "他の {count} 件のセッションを取り消します。続行しますか？",
+    "noOtherSessions": "取り消す他のセッションはありません",
+    "failedToLoad": "セッションの読み込みに失敗しました",
+    "failedToRevoke": "セッションの取り消しに失敗しました",
+    "failedToRevokeAll": "セッションの取り消しに失敗しました",
+    "created": "作成日時：",
+    "expires": "有効期限：",
+    "daysAgo": "{count}日前",
+    "hoursAgo": "{count}時間前",
+    "minutesAgo": "{count}分前",
+    "justNow": "たった今"
+  },
+  "inviteCodes": {
+    "title": "招待コード",
+    "description": "招待コードで友人をこの PDS に招待できます。各コードは1回のみ使用可能です。",
+    "createNew": "新しい招待コードを作成",
+    "uses": "使用回数",
+    "usesPlaceholder": "使用回数（1-100）",
+    "yourCodes": "招待コード一覧",
+    "noCodes": "招待コードはまだありません",
+    "available": "利用可能",
+    "used": "@{handle} が使用済み",
+    "disabled": "無効",
+    "usedBy": "使用者",
+    "creating": "作成中...",
+    "disableConfirm": "この招待コードを無効にしますか？使用できなくなります。",
+    "created": "招待コードを作成しました",
+    "copy": "コピー",
+    "createdOn": "{date} に作成"
+  },
+  "security": {
+    "title": "セキュリティ",
+    "passkeys": "パスキー",
+    "passkeysDescription": "パスキーは、デバイスの内蔵セキュリティ（指紋、顔、または PIN）を使用して、安全なパスワードレス認証を提供します。",
+    "addPasskey": "パスキーを追加",
+    "adding": "追加中...",
+    "noPasskeys": "登録されたパスキーはありません",
+    "passkeyName": "パスキー名",
+    "passkeyNamePlaceholder": "例: MacBook Pro、iPhone",
+    "register": "登録",
+    "registering": "登録中...",
+    "rename": "名前変更",
+    "renaming": "名前変更中...",
+    "deletePasskey": "削除",
+    "deletePasskeyConfirm": "パスキー「{name}」を削除しますか？サインインに使用できなくなります。",
+    "totp": "認証アプリ (TOTP)",
+    "totpDescription": "Google Authenticator、Authy、1Password などの認証アプリを二要素認証に使用します。",
+    "totpEnabled": "TOTP は有効です",
+    "totpDisabled": "TOTP は無効です",
+    "enableTotp": "TOTP を有効化",
+    "disableTotp": "TOTP を無効化",
+    "disabling": "無効化中...",
+    "totpSetup": "認証アプリの設定",
+    "totpSetupInstructions": "認証アプリでこの QR コードをスキャンし、6桁のコードを入力して確認してください。",
+    "totpCode": "確認コード",
+    "totpCodePlaceholder": "6桁のコードを入力",
+    "verifyAndEnable": "確認して有効化",
+    "backupCodes": "バックアップコード",
+    "backupCodesDescription": "認証アプリにアクセスできなくなった場合、これらのコードを使用してサインインします。各コードは1回のみ使用可能です。",
+    "regenerateBackupCodes": "バックアップコードを再生成",
+    "regenerating": "再生成中...",
+    "regenerateConfirm": "バックアップコードを再生成しますか？現在のコードは使用できなくなります。",
+    "legacyLogin": "レガシーログイン",
+    "legacyLoginDescription": "ユーザー名/パスワードでの直接ログイン（レガシーモード）を許可します。無効にすると、MFA 付きの OAuth を使用する必要があります。",
+    "legacyLoginOn": "レガシーログインは有効です",
+    "legacyLoginOff": "レガシーログインは無効です",
+    "legacyLoginWarning": "警告: レガシーログインを有効にすると、直接パスワードログインの MFA がバイパスされます。アプリの互換性が必要な場合にのみ有効にしてください。",
+    "totpPasswordWarning": "TOTP が有効な場合、Bluesky アプリ（または他のレガシーアプリ）からパスワードを変更することはできません。パスワードを変更するには、2つの方法があります：",
+    "totpPasswordOption1Label": "ここで変更する：",
+    "totpPasswordOption1Text": "このウェブサイトの",
+    "totpPasswordOption1Link": "設定ページ",
+    "totpPasswordOption1Suffix": "を使用して、認証アプリで確認できます。",
+    "totpPasswordOption2Label": "まずセッションを確認する：",
+    "totpPasswordOption2Text": "",
+    "totpPasswordOption2Link": "再認証オプション",
+    "totpPasswordOption2Suffix": "を使用して Bluesky セッションを TOTP で確認すると、一時的にパスワード変更が可能になります。",
+    "legacyAppsTitle": "レガシーアプリとは？",
+    "legacyAppsDescription": "一部のアプリ（公式 Bluesky アプリなど）は、パスワードのみを必要とする古い認証を使用します。MFA を有効にしている場合、これらのアプリは二要素認証をバイパスします。レガシーログインを無効にすると、すべてのアプリが OAuth を使用するよう強制され、MFA が適切に適用されます。",
+    "password": "パスワード",
+    "passwordStatus": "パスワードが設定されています",
+    "noPassword": "パスワードは設定されていません（パスキーのみのアカウント）",
+    "setPassword": "パスワードを設定",
+    "removePassword": "パスワードを削除",
+    "removePasswordConfirm": "パスワードを削除しますか？サインインにパスキーが必要になります。",
+    "removing": "削除中...",
+    "loading": "読み込み中...",
+    "loadingPasskeys": "パスキーを読み込み中...",
+    "cancel": "キャンセル",
+    "save": "保存",
+    "back": "戻る",
+    "next": "次へ: コードを確認",
+    "copyToClipboard": "クリップボードにコピー",
+    "savedMyCodes": "コードを保存しました",
+    "cantScan": "スキャンできませんか？手動で入力",
+    "unnamedPasskey": "名前のないパスキー",
+    "added": "追加日",
+    "lastUsed": "最終使用日",
+    "passwordDescription": "アカウントパスワードを管理します。パスキーを設定している場合、完全にパスワードレスな体験のためにパスワードを削除することもできます。",
+    "disableTotpWarning": "これによりアカウントのセキュリティが低下します。",
+    "removePasswordWarning": "これによりアカウントはパスキーのみになります。登録済みのパスキーでのみサインインできます。すべてのパスキーにアクセスできなくなった場合、通知チャンネルを使用してアカウントを復旧できます。",
+    "beforeProceeding": "続行する前に：",
+    "beforeProceedingItem1": "少なくとも1つの信頼できるパスキーが登録されていることを確認",
+    "beforeProceedingItem2": "複数のデバイスにパスキーを登録することを検討",
+    "beforeProceedingItem3": "復旧用の通知チャンネルが最新であることを確認",
+    "addPasskeyFirst": "パスワードを削除する前に、少なくとも1つのパスキーを追加してください。",
+    "passkeyOnlyHint": "パスキーのみでサインインしています。パスキーにアクセスできなくなった場合、ログインページの「パスキーを紛失しましたか？」リンクからアカウントを復旧できます。",
+    "trustedDevices": "信頼済みデバイス",
+    "trustedDevicesDescription": "サインイン時に二要素認証をスキップできるデバイスを管理します。信頼は30日間有効で、デバイスを使用すると自動的に延長されます。",
+    "manageTrustedDevices": "信頼済みデバイスを管理",
+    "appCompatibility": "アプリ互換性",
+    "enterPassword": "パスワードを入力",
+    "legacyLoginEnabled": "レガシーアプリログインが有効",
+    "legacyLoginDisabled": "レガシーアプリログインが無効 - OAuth アプリのみサインイン可能",
+    "failedToUpdatePreference": "設定の更新に失敗しました",
+    "passwordRemoved": "パスワードが削除されました。アカウントはパスキーのみになりました。",
+    "failedToRemovePassword": "パスワードの削除に失敗しました",
+    "failedToLoadTotpStatus": "TOTP ステータスの読み込みに失敗しました",
+    "totpEnabledSuccess": "二要素認証が正常に有効化されました",
+    "totpDisabledSuccess": "二要素認証が無効化されました",
+    "backupCodesCopied": "バックアップコードをクリップボードにコピーしました",
+    "failedToLoadPasskeys": "パスキーの読み込みに失敗しました",
+    "passkeysNotSupported": "このブラウザではパスキーがサポートされていません",
+    "passkeyCreationCancelled": "パスキーの作成がキャンセルされました",
+    "passkeyAddedSuccess": "パスキーが追加されました",
+    "passkeyDeleted": "パスキーが削除されました",
+    "passkeyRenamed": "パスキーの名前が変更されました"
+  },
+  "comms": {
+    "title": "連絡設定",
+    "description": "パスワードリセット、セキュリティアラート、アカウント更新などの重要なメッセージの受信方法を選択してください。",
+    "preferredChannel": "優先チャンネル",
+    "preferredChannelDescription": "メッセージの優先受信方法を選択してください。選択する前にチャンネルを設定する必要があります。",
+    "channelConfiguration": "チャンネル設定",
+    "emailVia": "メールでメッセージを受信",
+    "discordVia": "Discord DM でメッセージを受信",
+    "telegramVia": "Telegram でメッセージを受信",
+    "signalVia": "Signal でメッセージを受信",
+    "configureToEnable": "有効にするには下記で設定",
+    "emailManagedInSettings": "メールはアカウント設定で管理されています",
+    "discordIdHint": "Discord ユーザー ID（ユーザー名ではありません）。Discord で開発者モードを有効にしてコピーしてください。",
+    "telegramHint": "@ 記号なしの Telegram ユーザー名",
+    "signalHint": "国番号付きの Signal 電話番号",
+    "primary": "優先",
+    "verified": "確認済み",
+    "notVerified": "未確認",
+    "verifyButton": "確認",
+    "verifyCodePlaceholder": "確認コードを入力",
+    "submit": "送信",
+    "saving": "保存中...",
+    "savePreferences": "設定を保存",
+    "preferencesSaved": "連絡設定を保存しました",
+    "verifiedSuccess": "{channel} を確認しました",
+    "messageHistory": "メッセージ履歴",
+    "historyDescription": "アカウントに送信された最近のメッセージを表示します。",
+    "loadHistory": "履歴を読み込む",
+    "hideHistory": "履歴を隠す",
+    "noMessages": "メッセージが見つかりません。",
+    "sent": "送信済み",
+    "failed": "失敗"
+  },
+  "repoExplorer": {
+    "title": "リポジトリエクスプローラー",
+    "description": "AT Protocol レコードを閲覧・管理します。",
+    "collections": "コレクション",
+    "noCollections": "コレクションが見つかりません",
+    "records": "レコード",
+    "noRecords": "このコレクションにレコードはありません",
+    "recordDetails": "レコード詳細",
+    "rkey": "レコードキー",
+    "cid": "CID",
+    "value": "値",
+    "deleteRecord": "レコードを削除",
+    "deleteConfirm": "レコード {rkey} を削除しますか？この操作は取り消せません。",
+    "unknownError": "不明なエラーが発生しました",
+    "invalidJson": "無効な JSON",
+    "collectionRequired": "コレクションは必須です",
+    "recordCreated": "レコードを作成しました: {uri}",
+    "recordUpdated": "レコードを更新しました",
+    "recordDeleted": "レコードを削除しました",
+    "newRecord": "新規レコード",
+    "createRecord": "レコードを作成",
+    "filterCollections": "コレクションを検索...",
+    "filterRecords": "レコードを検索...",
+    "noCollectionsYet": "コレクションがまだありません。最初のレコードを作成して開始しましょう。",
+    "loadMore": "さらに読み込む",
+    "recordJson": "レコード JSON",
+    "saving": "保存中...",
+    "updateRecord": "レコードを更新",
+    "collectionNsid": "コレクション (NSID)",
+    "recordKeyOptional": "レコードキー（任意）",
+    "autoGenerated": "空白で自動生成 (TID)",
+    "autoGeneratedHint": "空白にすると TID ベースのキーが自動生成されます",
+    "creating": "作成中...",
+    "demoPostText": "こんにちは、私の PDS からの初投稿です！",
+    "demoDisplayName": "表示名",
+    "demoBio": "自己紹介を書いてください。"
+  },
+  "admin": {
+    "title": "管理パネル",
+    "serverStats": "サーバー統計",
+    "users": "ユーザー",
+    "repos": "リポジトリ",
+    "records": "レコード",
+    "blobStorage": "Blob ストレージ",
+    "refreshStats": "統計を更新",
+    "userManagement": "ユーザー管理",
+    "searchPlaceholder": "ハンドルで検索（任意）",
+    "searchUsers": "ユーザーを検索",
+    "noUsers": "ユーザーが見つかりません",
+    "handle": "ハンドル",
+    "email": "メール",
+    "status": "ステータス",
+    "created": "作成日時",
+    "loadMore": "さらに読み込む",
+    "inviteCodes": "招待コード",
+    "loadInviteCodes": "招待コードを読み込む",
+    "refresh": "更新",
+    "noInvites": "招待コードが見つかりません",
+    "code": "コード",
+    "available": "利用可能",
+    "uses": "使用回数",
+    "actions": "アクション",
+    "disable": "無効化",
+    "disableInviteConfirm": "招待コード {code} を無効にしますか？",
+    "active": "アクティブ",
+    "exhausted": "使用済み",
+    "disabled": "無効",
+    "userDetails": "ユーザー詳細",
+    "did": "DID",
+    "invites": "招待",
+    "enabled": "有効",
+    "enableInvites": "招待を有効化",
+    "disableInvites": "招待を無効化",
+    "deleteAccount": "アカウント削除",
+    "deleteConfirm": "アカウント @{handle} を削除しますか？この操作は取り消せません。",
+    "verified": "確認済み",
+    "unverified": "未確認",
+    "deactivated": "無効化"
+  },
+  "oauth": {
+    "login": {
+      "title": "サインイン",
+      "subtitle": "アプリを続行するにはサインインしてください",
+      "signingIn": "サインイン中...",
+      "authenticating": "認証中...",
+      "checkingPasskey": "パスキーを確認中...",
+      "signInWithPasskey": "パスキーでサインイン",
+      "passkeyNotSetUp": "パスキーは設定されていません",
+      "orUsePassword": "またはパスワードを使用",
+      "password": "パスワード",
+      "rememberDevice": "このデバイスを記憶する",
+      "passkeyHintChecking": "パスキーの状態を確認中...",
+      "passkeyHintAvailable": "パスキーでサインイン",
+      "passkeyHintNotAvailable": "このアカウントにはパスキーが登録されていません"
+    },
+    "consent": {
+      "title": "アプリを承認",
+      "appWantsAccess": "{app} があなたのアカウントにアクセスしようとしています",
+      "permissions": "このアプリは以下のことができるようになります:",
+      "readProfile": "プロフィール情報を読み取る",
+      "readPosts": "投稿とコンテンツを読み取る",
+      "writePosts": "あなたに代わって投稿を作成・削除する",
+      "readNotifications": "通知を読み取る",
+      "fullAccess": "アカウントへのフルアクセス",
+      "authorize": "承認",
+      "deny": "拒否",
+      "authorizing": "承認中...",
+      "rememberChoice": "この選択を記憶",
+      "signingInAs": "サインイン中のアカウント:",
+      "permissionsRequested": "リクエストされた権限",
+      "required": "必須",
+      "rememberChoiceLabel": "このアプリに対する選択を記憶する"
+    },
+    "accounts": {
+      "title": "アカウントを選択",
+      "subtitle": "続行するアカウントを選択",
+      "useAnother": "別のアカウントを使用"
+    },
+    "twoFactor": {
+      "title": "二要素認証",
+      "subtitle": "追加の確認が必要です",
+      "usePasskey": "パスキーを使用",
+      "useTotp": "認証アプリを使用",
+      "verifying": "確認中..."
+    },
+    "twoFactorCode": {
+      "title": "二要素認証",
+      "subtitle": "{channel} に確認コードを送信しました。以下にコードを入力して続行してください。",
+      "codeLabel": "確認コード",
+      "codePlaceholder": "6桁のコードを入力",
+      "verify": "確認",
+      "verifying": "確認中...",
+      "errors": {
+        "missingRequestUri": "request_uri パラメータがありません",
+        "verificationFailed": "確認に失敗しました",
+        "connectionFailed": "サーバーへの接続に失敗しました",
+        "unexpectedResponse": "サーバーからの予期しない応答"
+      }
+    },
+    "totp": {
+      "title": "認証コードを入力",
+      "subtitle": "認証アプリの6桁のコードを入力",
+      "codePlaceholder": "6桁のコードを入力",
+      "verify": "確認",
+      "verifying": "確認中...",
+      "useBackupCode": "バックアップコードを使用",
+      "backupCodePlaceholder": "バックアップコードを入力",
+      "trustDevice": "このデバイスを30日間信頼する",
+      "hintBackupCode": "バックアップコードを使用中",
+      "hintTotpCode": "認証コードを使用中",
+      "hintDefault": "認証アプリは6桁、バックアップコードは8文字"
+    },
+    "passkey": {
+      "title": "パスキー確認",
+      "subtitle": "パスキーで本人確認を行います",
+      "waiting": "パスキーを待機中...",
+      "useTotp": "認証アプリを使用"
+    },
+    "error": {
+      "title": "承認エラー",
+      "genericError": "承認中にエラーが発生しました。",
+      "tryAgain": "再試行",
+      "backToApp": "アプリに戻る"
+    }
+  },
+  "verify": {
+    "title": "アカウント確認",
+    "subtitle": "{channel} に確認コードを送信しました。以下に入力して登録を完了してください。",
+    "codePlaceholder": "6桁のコードを入力",
+    "codeLabel": "確認コード",
+    "verifyButton": "アカウントを確認",
+    "verifying": "確認中...",
+    "resendCode": "コードを再送信",
+    "resending": "送信中...",
+    "codeResent": "確認コードを再送信しました！",
+    "backToLogin": "ログインに戻る",
+    "verifyingAccount": "確認中のアカウント: @{handle}",
+    "startOver": "別のアカウントでやり直す",
+    "noPending": "保留中の確認が見つかりません。",
+    "noPendingInfo": "最近アカウントを作成して確認が必要な場合は、新しいアカウントを作成する必要があります。すでにアカウントを確認した場合は、サインインできます。",
+    "createAccount": "アカウントを作成",
+    "signIn": "サインイン"
+  },
+  "resetPassword": {
+    "title": "パスワードリセット",
+    "forgotTitle": "パスワードをお忘れですか",
+    "subtitle": "受け取ったコードを入力して、新しいパスワードを選択してください。",
+    "forgotSubtitle": "ハンドルまたはメールアドレスを入力すると、パスワードリセットコードを送信します。",
+    "handleOrEmail": "ハンドルまたはメール",
+    "emailPlaceholder": "ハンドルまたは [e-mail]",
+    "sendCode": "リセットコードを送信",
+    "sending": "送信中...",
+    "codeSent": "パスワードリセットコードを送信しました！優先通知チャンネルを確認してください。",
+    "enterCode": "メールからのコードと新しいパスワードを入力してください。",
+    "code": "リセットコード",
+    "codePlaceholder": "リセットコードを入力",
+    "newPassword": "新しいパスワード",
+    "newPasswordPlaceholder": "8文字以上",
+    "confirmPassword": "パスワード確認",
+    "confirmPasswordPlaceholder": "新しいパスワードを再入力",
+    "resetButton": "パスワードをリセット",
+    "resetting": "リセット中...",
+    "success": "パスワードをリセットしました！",
+    "backToLogin": "サインインに戻る",
+    "requestNewCode": "新しいコードをリクエスト",
+    "passwordsMismatch": "パスワードが一致しません",
+    "passwordLength": "パスワードは8文字以上である必要があります"
+  },
+  "recoverPasskey": {
+    "title": "アカウントを復旧",
+    "invalidLinkTitle": "無効な復旧リンク",
+    "invalidLinkMessage": "この復旧リンクは無効または破損しています。新しい復旧メールをリクエストしてください。",
+    "goToLogin": "ログインへ",
+    "successTitle": "パスワードを設定しました！",
+    "successMessage": "一時パスワードを設定しました。このパスワードでサインインできます。",
+    "successNextSteps": "サインイン後、セキュリティ設定で新しいパスキーを追加して、パスキーのみの認証を復元することをお勧めします。",
+    "signIn": "サインイン",
+    "subtitle": "パスキーのみのアカウントへのアクセスを回復するために一時パスワードを設定します。",
+    "newPassword": "新しいパスワード",
+    "newPasswordPlaceholder": "8文字以上",
+    "confirmPassword": "パスワード確認",
+    "confirmPasswordPlaceholder": "パスワードを再入力",
+    "whatHappensNext": "次のステップ",
+    "whatHappensNextDetail": "このパスワードを設定後、サインインしてセキュリティ設定で新しいパスキーを追加できます。新しいパスキーを追加したら、一時パスワードを削除することもできます。",
+    "setPassword": "パスワードを設定",
+    "settingPassword": "パスワードを設定中...",
+    "validation": {
+      "passwordRequired": "新しいパスワードは必須です",
+      "passwordLength": "パスワードは8文字以上である必要があります",
+      "passwordsMismatch": "パスワードが一致しません"
+    },
+    "errors": {
+      "invalidLink": "無効な復旧リンクです。新しいリンクをリクエストしてください。",
+      "expired": "この復旧リンクは期限切れです。新しいリンクをリクエストしてください。"
+    }
+  },
+  "requestPasskeyRecovery": {
+    "title": "パスキーアカウントを復旧",
+    "subtitle": "パスキーにアクセスできなくなりましたか？ハンドルまたはメールを入力すると、復旧リンクを送信します。",
+    "successTitle": "復旧リンクを送信しました",
+    "successMessage": "アカウントが存在し、パスキーのみのアカウントの場合、優先通知チャンネルに復旧リンクが届きます。",
+    "successInfo": "リンクは1時間で期限切れになります。アカウント設定に応じて、メール、Discord、Telegram、または Signal を確認してください。",
+    "handleOrEmail": "ハンドルまたはメール",
+    "emailPlaceholder": "ハンドルまたは [e-mail]",
+    "howItWorks": "仕組み",
+    "howItWorksDetail": "登録された通知チャンネルに安全なリンクを送信します。リンクをクリックして一時パスワードを設定します。その後サインインして新しいパスキーを追加できます。",
+    "sendRecoveryLink": "復旧リンクを送信",
+    "sending": "送信中...",
+    "backToLogin": "サインインに戻る"
+  },
+  "registerPasskey": {
+    "title": "パスキーアカウントを作成",
+    "subtitle": "パスキーを使用してパスワードレスアカウントを作成します。",
+    "handle": "ハンドル",
+    "handlePlaceholder": "あなたの名前",
+    "handleHint": "完全なハンドル: @{handle}",
+    "email": "メールアドレス",
+    "emailPlaceholder": "[e-mail]",
+    "inviteCode": "招待コード",
+    "inviteCodePlaceholder": "招待コードを入力",
+    "createButton": "アカウントを作成",
+    "creating": "作成中...",
+    "alreadyHaveAccount": "すでにアカウントをお持ちですか？",
+    "signIn": "サインイン",
+    "wantPassword": "パスワードを使用しますか？",
+    "createPasswordAccount": "パスワードアカウントを作成"
+  },
+  "trustedDevices": {
+    "title": "信頼済みデバイス",
+    "backToSecurity": "← セキュリティ設定",
+    "description": "信頼済みデバイスはログイン時に二要素認証をスキップできます。信頼は30日間有効で、デバイスを使用すると自動的に延長されます。",
+    "noDevices": "信頼済みデバイスはまだありません。",
+    "noDevicesHint": "二要素認証を有効にしてログインする際に、デバイスを30日間信頼することを選択できます。",
+    "lastSeen": "最終使用:",
+    "trustedSince": "信頼開始:",
+    "trustExpires": "信頼期限:",
+    "expired": "期限切れ",
+    "tomorrow": "明日",
+    "inDays": "あと{days}日",
+    "revoke": "信頼を取り消す",
+    "revokeConfirm": "このデバイスへの信頼を取り消しますか？次回このデバイスからログインする際に2FAコードの入力が必要になります。",
+    "deviceRevoked": "デバイスの信頼を取り消しました",
+    "deviceRenamed": "デバイス名を変更しました",
+    "deviceNamePlaceholder": "デバイス名",
+    "browser": "ブラウザ:",
+    "unknownDevice": "不明なデバイス"
+  },
+  "reauth": {
+    "title": "再認証が必要です",
+    "subtitle": "続行するには本人確認を行ってください。",
+    "usePassword": "パスワードを使用",
+    "usePasskey": "パスキーを使用",
+    "useTotp": "認証アプリを使用",
+    "passwordPlaceholder": "パスワードを入力",
+    "totpPlaceholder": "6桁のコードを入力",
+    "verify": "確認",
+    "verifying": "確認中...",
+    "cancel": "キャンセル"
+  }
+}

frontend/src/locales/ko.json

···
+{
+  "common": {
+    "loading": "로딩 중...",
+    "error": "오류",
+    "save": "저장",
+    "cancel": "취소",
+    "back": "뒤로",
+    "done": "완료",
+    "refresh": "새로고침",
+    "create": "생성",
+    "delete": "삭제",
+    "confirm": "확인",
+    "created": "생성일",
+    "expires": "만료일",
+    "name": "이름",
+    "dashboard": "대시보드",
+    "backToDashboard": "← 대시보드"
+  },
+  "login": {
+    "title": "로그인",
+    "subtitle": "PDS 계정을 관리하려면 로그인하세요",
+    "button": "로그인",
+    "redirecting": "리디렉션 중...",
+    "chooseAccount": "계정 선택",
+    "signInToAnother": "다른 계정으로 로그인",
+    "backToSaved": "← 저장된 계정으로 돌아가기",
+    "forgotPassword": "비밀번호를 잊으셨나요?",
+    "lostPasskey": "패스키를 분실하셨나요?",
+    "noAccount": "계정이 없으신가요?",
+    "createAccount": "계정 만들기",
+    "removeAccount": "저장된 계정에서 삭제"
+  },
+  "verification": {
+    "title": "계정 인증",
+    "subtitle": "계정 인증이 필요합니다. 인증 방법으로 전송된 코드를 입력하세요.",
+    "codeLabel": "인증 코드",
+    "codePlaceholder": "6자리 코드 입력",
+    "verifyButton": "계정 인증",
+    "verifying": "인증 중...",
+    "resendButton": "코드 다시 보내기",
+    "resending": "전송 중...",
+    "resent": "인증 코드를 다시 보냈습니다!",
+    "backToLogin": "로그인으로 돌아가기"
+  },
+  "register": {
+    "title": "계정 만들기",
+    "subtitle": "이 PDS에 새 계정을 만듭니다",
+    "handle": "핸들",
+    "handlePlaceholder": "사용자 이름",
+    "handleHint": "전체 핸들: @{handle}",
+    "handleDotWarning": "사용자 정의 도메인 핸들은 계정 생성 후 설정에서 구성할 수 있습니다.",
+    "password": "비밀번호",
+    "passwordPlaceholder": "8자 이상",
+    "confirmPassword": "비밀번호 확인",
+    "confirmPasswordPlaceholder": "비밀번호 재입력",
+    "identityType": "ID 유형",
+    "identityHint": "분산 ID를 관리하는 방법을 선택하세요.",
+    "didPlc": "did:plc",
+    "didPlcRecommended": "(권장)",
+    "didPlcHint": "PLC 디렉토리에서 관리하는 이동 가능한 ID",
+    "didWeb": "did:web",
+    "didWebHint": "이 PDS에서 호스팅되는 ID (아래 경고 참조)",
+    "didWebBYOD": "did:web (BYOD)",
+    "didWebBYODHint": "자체 도메인 사용",
+    "didWebWarningTitle": "중요: 장단점을 이해하세요",
+    "didWebWarning1": "이 PDS에 영구 연결:",
+    "didWebWarning1Detail": "ID는 {did}가 됩니다. 나중에 다른 PDS로 마이그레이션하더라도 이 서버는 계속 DID 문서를 호스팅해야 합니다.",
+    "didWebWarning2": "복구 메커니즘 없음:",
+    "didWebWarning2Detail": "did:plc와 달리 did:web에는 순환 키가 없습니다. 이 PDS가 영구적으로 오프라인이 되면 ID를 복구할 수 없습니다.",
+    "didWebWarning3": "우리의 약속:",
+    "didWebWarning3Detail": "마이그레이션하면 새 PDS를 가리키는 최소한의 DID 문서를 계속 제공합니다. ID는 계속 작동합니다.",
+    "didWebWarning4": "권장:",
+    "didWebWarning4Detail": "did:web을 선호하는 특별한 이유가 없다면 did:plc를 선택하세요.",
+    "externalDid": "귀하의 did:web",
+    "externalDidPlaceholder": "did:web:yourdomain.com",
+    "externalDidHint": "도메인은 /.well-known/did.json에서 이 PDS를 가리키는 유효한 DID 문서를 제공해야 합니다",
+    "contactMethod": "연락 방법",
+    "contactMethodHint": "계정 인증 및 알림 수신 방법을 선택하세요. 하나만 필요합니다.",
+    "verificationMethod": "인증 방법",
+    "email": "이메일",
+    "emailAddress": "이메일 주소",
+    "emailPlaceholder": "[e-mail]",
+    "discord": "Discord",
+    "discordId": "Discord 사용자 ID",
+    "discordIdPlaceholder": "Discord 사용자 ID",
+    "discordIdHint": "숫자 Discord 사용자 ID (개발자 모드를 활성화하여 찾기)",
+    "telegram": "Telegram",
+    "telegramUsername": "Telegram 사용자 이름",
+    "telegramUsernamePlaceholder": "@yourusername",
+    "signal": "Signal",
+    "signalNumber": "Signal 전화번호",
+    "signalNumberPlaceholder": "[phone]",
+    "signalNumberHint": "국가 코드 포함 (예: 한국 +82)",
+    "inviteCode": "초대 코드",
+    "inviteCodePlaceholder": "초대 코드 입력",
+    "inviteCodeRequired": "필수",
+    "createButton": "계정 만들기",
+    "creating": "계정 생성 중...",
+    "alreadyHaveAccount": "이미 계정이 있으신가요?",
+    "signIn": "로그인",
+    "wantPasswordless": "비밀번호 없는 보안을 원하시나요?",
+    "createPasskeyAccount": "패스키 계정 만들기",
+    "validation": {
+      "handleRequired": "핸들은 필수입니다",
+      "handleNoDots": "핸들에 점을 포함할 수 없습니다. 계정 생성 후 사용자 정의 도메인을 설정할 수 있습니다.",
+      "passwordRequired": "비밀번호는 필수입니다",
+      "passwordLength": "비밀번호는 8자 이상이어야 합니다",
+      "passwordsMismatch": "비밀번호가 일치하지 않습니다",
+      "inviteCodeRequired": "초대 코드는 필수입니다",
+      "externalDidRequired": "외부 did:web은 필수입니다",
+      "externalDidFormat": "외부 DID는 did:web:으로 시작해야 합니다",
+      "emailRequired": "이메일 인증에는 이메일이 필요합니다",
+      "discordIdRequired": "Discord 인증에는 Discord ID가 필요합니다",
+      "telegramRequired": "Telegram 인증에는 Telegram 사용자 이름이 필요합니다",
+      "signalRequired": "Signal 인증에는 전화번호가 필요합니다"
+    }
+  },
+  "dashboard": {
+    "title": "대시보드",
+    "switchAccount": "계정 전환",
+    "addAnotherAccount": "다른 계정 추가",
+    "signOut": "@{handle} 로그아웃",
+    "deactivatedTitle": "계정 비활성화됨",
+    "deactivatedMessage": "계정이 현재 비활성화되어 있습니다. 이는 일반적으로 계정 마이그레이션 중에 발생합니다. 계정이 다시 활성화될 때까지 일부 기능이 제한될 수 있습니다.",
+    "accountOverview": "계정 개요",
+    "handle": "핸들",
+    "did": "DID",
+    "primaryContact": "주요 연락처",
+    "admin": "관리자",
+    "deactivated": "비활성화됨",
+    "verified": "인증됨",
+    "unverified": "미인증",
+    "navAppPasswords": "앱 비밀번호",
+    "navAppPasswordsDesc": "타사 앱의 비밀번호 관리",
+    "navSessions": "활성 세션",
+    "navSessionsDesc": "로그인 세션 보기 및 관리",
+    "navInviteCodes": "초대 코드",
+    "navInviteCodesDesc": "초대 코드 보기 및 생성",
+    "navSettings": "계정 설정",
+    "navSettingsDesc": "이메일, 비밀번호, 핸들 등",
+    "navSecurity": "보안",
+    "navSecurityDesc": "2단계 인증",
+    "navComms": "통신 설정",
+    "navCommsDesc": "Discord, Telegram, Signal 채널",
+    "navRepo": "저장소 탐색기",
+    "navRepoDesc": "AT Protocol 레코드 탐색 및 관리",
+    "navAdmin": "관리 패널",
+    "navAdminDesc": "서버 통계 및 관리 작업"
+  },
+  "settings": {
+    "title": "계정 설정",
+    "language": "언어",
+    "languageDescription": "선호하는 언어를 선택하세요",
+    "changeEmail": "이메일 변경",
+    "currentEmail": "현재: {email}",
+    "newEmail": "새 이메일",
+    "newEmailPlaceholder": "[e-mail]",
+    "changeEmailButton": "이메일 변경",
+    "requesting": "요청 중...",
+    "verificationCode": "인증 코드",
+    "verificationCodePlaceholder": "이메일의 코드 입력",
+    "confirmEmailChange": "이메일 변경 확인",
+    "updating": "업데이트 중...",
+    "changeHandle": "핸들 변경",
+    "currentHandle": "현재: @{handle}",
+    "pdsHandle": "PDS 핸들",
+    "customDomain": "사용자 정의 도메인",
+    "customDomainDescription": "자체 도메인을 핸들로 사용합니다. 먼저 도메인 소유권을 확인해야 합니다.",
+    "setupInstructions": "설정 지침",
+    "setupMethodsIntro": "다음 인증 방법 중 하나를 선택하세요:",
+    "dnsMethod": "방법 1: DNS TXT 레코드 (권장)",
+    "dnsMethodDesc": "도메인에 이 TXT 레코드 추가:",
+    "httpMethod": "방법 2: HTTP Well-Known 파일",
+    "httpMethodDesc": "이 URL에서 DID 제공:",
+    "httpMethodContent": "파일에는 다음만 포함:",
+    "yourDomain": "도메인",
+    "yourDomainPlaceholder": "example.com",
+    "verifyAndUpdate": "확인 후 핸들 업데이트",
+    "verifying": "확인 중...",
+    "newHandle": "새 핸들",
+    "newHandlePlaceholder": "yourhandle",
+    "changeHandleButton": "핸들 변경",
+    "changePassword": "비밀번호 변경",
+    "currentPassword": "현재 비밀번호",
+    "currentPasswordPlaceholder": "현재 비밀번호 입력",
+    "newPassword": "새 비밀번호",
+    "newPasswordPlaceholder": "8자 이상",
+    "confirmNewPassword": "새 비밀번호 확인",
+    "confirmNewPasswordPlaceholder": "새 비밀번호 재입력",
+    "changePasswordButton": "비밀번호 변경",
+    "changing": "변경 중...",
+    "exportData": "데이터 내보내기",
+    "exportDataDescription": "전체 저장소를 CAR (Content Addressable Archive) 파일로 다운로드합니다. 모든 게시물, 좋아요, 팔로우 및 기타 데이터가 포함됩니다.",
+    "downloadRepo": "저장소 다운로드",
+    "exporting": "내보내기 중...",
+    "deleteAccount": "계정 삭제",
+    "deleteWarning": "이 작업은 되돌릴 수 없습니다. 모든 데이터가 영구적으로 삭제됩니다.",
+    "requestDeletion": "계정 삭제 요청",
+    "confirmationCode": "확인 코드 (이메일에서)",
+    "confirmationCodePlaceholder": "확인 코드 입력",
+    "yourPassword": "비밀번호",
+    "yourPasswordPlaceholder": "비밀번호 입력",
+    "permanentlyDelete": "계정 영구 삭제",
+    "deleting": "삭제 중...",
+    "messages": {
+      "emailCodeSent": "현재 이메일로 인증 코드를 보냈습니다",
+      "emailUpdated": "이메일이 업데이트되었습니다",
+      "handleUpdated": "핸들이 업데이트되었습니다",
+      "passwordChanged": "비밀번호가 변경되었습니다",
+      "passwordsMismatch": "비밀번호가 일치하지 않습니다",
+      "passwordLength": "비밀번호는 8자 이상이어야 합니다",
+      "deletionCodeSent": "이메일로 삭제 확인을 보냈습니다",
+      "repoExported": "저장소를 내보냈습니다",
+      "confirmDelete": "정말로 계정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
+    }
+  },
+  "appPasswords": {
+    "title": "앱 비밀번호",
+    "description": "앱 비밀번호를 사용하면 기본 비밀번호를 제공하지 않고 타사 앱에 로그인할 수 있습니다. 각 앱 비밀번호는 개별적으로 취소할 수 있습니다.",
+    "createNew": "새 앱 비밀번호 만들기",
+    "appNamePlaceholder": "앱 이름 (예: Graysky, Skeets)",
+    "created": "앱 비밀번호가 생성되었습니다",
+    "createdMessage": "지금 이 비밀번호를 복사하세요. 다시 볼 수 없습니다.",
+    "yourPasswords": "앱 비밀번호 목록",
+    "noPasswords": "앱 비밀번호가 아직 없습니다",
+    "revoke": "취소",
+    "revoking": "취소 중...",
+    "creating": "생성 중...",
+    "revokeConfirm": "앱 비밀번호 \"{name}\"을(를) 취소하시겠습니까? 이 비밀번호를 사용하는 앱은 더 이상 계정에 액세스할 수 없습니다."
+  },
+  "sessions": {
+    "title": "활성 세션",
+    "loadingSessions": "세션 로딩 중...",
+    "noSessions": "활성 세션이 없습니다.",
+    "current": "현재",
+    "oauth": "OAuth",
+    "session": "세션",
+    "signOut": "로그아웃",
+    "revoke": "취소",
+    "revokeAll": "다른 모든 세션 취소",
+    "revokeCurrentConfirm": "이 세션에서 로그아웃됩니다. 계속하시겠습니까?",
+    "revokeConfirm": "이 세션을 취소하시겠습니까?",
+    "revokeAllConfirm": "{count}개의 다른 세션을 취소합니다. 계속하시겠습니까?",
+    "noOtherSessions": "취소할 다른 세션이 없습니다",
+    "failedToLoad": "세션 로딩에 실패했습니다",
+    "failedToRevoke": "세션 취소에 실패했습니다",
+    "failedToRevokeAll": "세션 취소에 실패했습니다",
+    "created": "생성일:",
+    "expires": "만료일:",
+    "daysAgo": "{count}일 전",
+    "hoursAgo": "{count}시간 전",
+    "minutesAgo": "{count}분 전",
+    "justNow": "방금"
+  },
+  "inviteCodes": {
+    "title": "초대 코드",
+    "description": "초대 코드로 친구를 이 PDS에 초대할 수 있습니다. 각 코드는 한 번만 사용할 수 있습니다.",
+    "createNew": "새 초대 코드 만들기",
+    "uses": "사용 횟수",
+    "usesPlaceholder": "사용 횟수 (1-100)",
+    "yourCodes": "초대 코드 목록",
+    "noCodes": "초대 코드가 아직 없습니다",
+    "available": "사용 가능",
+    "used": "@{handle}이(가) 사용함",
+    "disabled": "비활성화됨",
+    "usedBy": "사용자",
+    "creating": "생성 중...",
+    "disableConfirm": "이 초대 코드를 비활성화하시겠습니까? 더 이상 사용할 수 없습니다.",
+    "created": "초대 코드가 생성되었습니다",
+    "copy": "복사",
+    "createdOn": "{date}에 생성됨"
+  },
+  "security": {
+    "title": "보안",
+    "passkeys": "패스키",
+    "passkeysDescription": "패스키는 기기의 내장 보안(지문, 얼굴 또는 PIN)을 사용하여 안전한 비밀번호 없는 인증을 제공합니다.",
+    "addPasskey": "패스키 추가",
+    "adding": "추가 중...",
+    "noPasskeys": "등록된 패스키가 없습니다",
+    "passkeyName": "패스키 이름",
+    "passkeyNamePlaceholder": "예: MacBook Pro, iPhone",
+    "register": "등록",
+    "registering": "등록 중...",
+    "rename": "이름 변경",
+    "renaming": "이름 변경 중...",
+    "deletePasskey": "삭제",
+    "deletePasskeyConfirm": "패스키 \"{name}\"을(를) 삭제하시겠습니까? 더 이상 로그인에 사용할 수 없습니다.",
+    "totp": "인증 앱 (TOTP)",
+    "totpDescription": "Google Authenticator, Authy 또는 1Password와 같은 인증 앱을 2단계 인증에 사용합니다.",
+    "totpEnabled": "TOTP가 활성화되었습니다",
+    "totpDisabled": "TOTP가 비활성화되었습니다",
+    "enableTotp": "TOTP 활성화",
+    "disableTotp": "TOTP 비활성화",
+    "disabling": "비활성화 중...",
+    "totpSetup": "인증 앱 설정",
+    "totpSetupInstructions": "인증 앱으로 이 QR 코드를 스캔한 다음 6자리 코드를 입력하여 확인합니다.",
+    "totpCode": "인증 코드",
+    "totpCodePlaceholder": "6자리 코드 입력",
+    "verifyAndEnable": "확인 후 활성화",
+    "backupCodes": "백업 코드",
+    "backupCodesDescription": "인증 앱에 액세스할 수 없는 경우 이 코드를 사용하여 로그인합니다. 각 코드는 한 번만 사용할 수 있습니다.",
+    "regenerateBackupCodes": "백업 코드 재생성",
+    "regenerating": "재생성 중...",
+    "regenerateConfirm": "백업 코드를 재생성하시겠습니까? 현재 코드는 더 이상 작동하지 않습니다.",
+    "legacyLogin": "레거시 로그인",
+    "legacyLoginDescription": "사용자 이름/비밀번호로 직접 로그인(레거시 모드)을 허용합니다. 비활성화하면 MFA가 있는 OAuth를 사용해야 합니다.",
+    "legacyLoginOn": "레거시 로그인이 활성화되었습니다",
+    "legacyLoginOff": "레거시 로그인이 비활성화되었습니다",
+    "legacyLoginWarning": "경고: 레거시 로그인을 활성화하면 직접 비밀번호 로그인에 대한 MFA가 우회됩니다. 앱 호환성이 필요한 경우에만 활성화하세요.",
+    "totpPasswordWarning": "TOTP가 활성화되면 Bluesky 앱(또는 기타 레거시 앱)에서 비밀번호를 변경할 수 없습니다. 비밀번호를 변경하려면 두 가지 방법이 있습니다:",
+    "totpPasswordOption1Label": "여기에서 변경:",
+    "totpPasswordOption1Text": "이 웹사이트의",
+    "totpPasswordOption1Link": "설정 페이지",
+    "totpPasswordOption1Suffix": "에서 인증 앱으로 확인할 수 있습니다.",
+    "totpPasswordOption2Label": "먼저 세션 확인:",
+    "totpPasswordOption2Text": "",
+    "totpPasswordOption2Link": "재인증 옵션",
+    "totpPasswordOption2Suffix": "을 사용하여 TOTP로 Bluesky 세션을 확인하면 일시적으로 비밀번호 변경이 가능합니다.",
+    "legacyAppsTitle": "레거시 앱이란?",
+    "legacyAppsDescription": "일부 앱(공식 Bluesky 앱 등)은 비밀번호만 필요한 이전 인증을 사용합니다. MFA가 활성화되어 있으면 이러한 앱은 두 번째 인증 요소를 우회합니다. 레거시 로그인을 비활성화하면 모든 앱이 OAuth를 사용하도록 강제되어 MFA가 적절히 적용됩니다.",
+    "password": "비밀번호",
+    "passwordStatus": "비밀번호가 설정되었습니다",
+    "noPassword": "비밀번호가 설정되지 않음 (패스키 전용 계정)",
+    "setPassword": "비밀번호 설정",
+    "removePassword": "비밀번호 제거",
+    "removePasswordConfirm": "비밀번호를 제거하시겠습니까? 로그인에 패스키가 필요합니다.",
+    "removing": "제거 중...",
+    "loading": "로딩 중...",
+    "loadingPasskeys": "패스키 로딩 중...",
+    "cancel": "취소",
+    "save": "저장",
+    "back": "뒤로",
+    "next": "다음: 코드 확인",
+    "copyToClipboard": "클립보드에 복사",
+    "savedMyCodes": "코드를 저장했습니다",
+    "cantScan": "스캔할 수 없나요? 수동 입력",
+    "unnamedPasskey": "이름 없는 패스키",
+    "added": "추가됨",
+    "lastUsed": "마지막 사용",
+    "passwordDescription": "계정 비밀번호를 관리합니다. 패스키를 설정한 경우 완전한 비밀번호 없는 경험을 위해 비밀번호를 제거할 수 있습니다.",
+    "disableTotpWarning": "이렇게 하면 계정 보안이 약해집니다.",
+    "removePasswordWarning": "이렇게 하면 계정이 패스키 전용이 됩니다. 등록된 패스키로만 로그인할 수 있습니다. 모든 패스키에 액세스할 수 없게 되면 알림 채널을 사용하여 계정을 복구할 수 있습니다.",
+    "beforeProceeding": "계속하기 전에:",
+    "beforeProceedingItem1": "최소 하나의 신뢰할 수 있는 패스키가 등록되어 있는지 확인",
+    "beforeProceedingItem2": "여러 기기에 패스키 등록을 고려",
+    "beforeProceedingItem3": "복구 알림 채널이 최신인지 확인",
+    "addPasskeyFirst": "비밀번호를 제거하려면 먼저 최소 하나의 패스키를 추가하세요.",
+    "passkeyOnlyHint": "패스키로만 로그인합니다. 패스키에 액세스할 수 없게 되면 로그인 페이지의 '패스키를 분실하셨나요?' 링크를 사용하여 계정을 복구할 수 있습니다.",
+    "trustedDevices": "신뢰할 수 있는 기기",
+    "trustedDevicesDescription": "로그인 시 2단계 인증을 건너뛸 수 있는 기기를 관리합니다. 신뢰는 30일간 유효하며 기기를 사용하면 자동으로 연장됩니다.",
+    "manageTrustedDevices": "신뢰할 수 있는 기기 관리",
+    "appCompatibility": "앱 호환성",
+    "enterPassword": "비밀번호를 입력하세요",
+    "legacyLoginEnabled": "레거시 앱 로그인 활성화됨",
+    "legacyLoginDisabled": "레거시 앱 로그인 비활성화됨 - OAuth 앱만 로그인 가능",
+    "failedToUpdatePreference": "설정 업데이트에 실패했습니다",
+    "passwordRemoved": "비밀번호가 제거되었습니다. 이제 계정은 패스키 전용입니다.",
+    "failedToRemovePassword": "비밀번호 제거에 실패했습니다",
+    "failedToLoadTotpStatus": "TOTP 상태 로딩에 실패했습니다",
+    "totpEnabledSuccess": "2단계 인증이 활성화되었습니다",
+    "totpDisabledSuccess": "2단계 인증이 비활성화되었습니다",
+    "backupCodesCopied": "백업 코드가 클립보드에 복사되었습니다",
+    "failedToLoadPasskeys": "패스키 로딩에 실패했습니다",
+    "passkeysNotSupported": "이 브라우저에서 패스키가 지원되지 않습니다",
+    "passkeyCreationCancelled": "패스키 생성이 취소되었습니다",
+    "passkeyAddedSuccess": "패스키가 추가되었습니다",
+    "passkeyDeleted": "패스키가 삭제되었습니다",
+    "passkeyRenamed": "패스키 이름이 변경되었습니다"
+  },
+  "comms": {
+    "title": "통신 설정",
+    "description": "비밀번호 재설정, 보안 알림, 계정 업데이트 등 중요한 메시지를 받는 방법을 선택하세요.",
+    "preferredChannel": "선호 채널",
+    "preferredChannelDescription": "메시지 수신 방법을 선택하세요. 선택하기 전에 채널을 설정해야 합니다.",
+    "channelConfiguration": "채널 설정",
+    "emailVia": "이메일로 메시지 받기",
+    "discordVia": "Discord DM으로 메시지 받기",
+    "telegramVia": "Telegram으로 메시지 받기",
+    "signalVia": "Signal로 메시지 받기",
+    "configureToEnable": "활성화하려면 아래에서 설정",
+    "emailManagedInSettings": "이메일은 계정 설정에서 관리됩니다",
+    "discordIdHint": "Discord 사용자 ID (사용자 이름 아님). Discord에서 개발자 모드를 활성화하여 복사하세요.",
+    "telegramHint": "@ 기호 없이 Telegram 사용자 이름",
+    "signalHint": "국가 코드가 포함된 Signal 전화번호",
+    "primary": "기본",
+    "verified": "인증됨",
+    "notVerified": "미인증",
+    "verifyButton": "인증",
+    "verifyCodePlaceholder": "인증 코드 입력",
+    "submit": "제출",
+    "saving": "저장 중...",
+    "savePreferences": "설정 저장",
+    "preferencesSaved": "통신 설정이 저장되었습니다",
+    "verifiedSuccess": "{channel} 인증 완료",
+    "messageHistory": "메시지 기록",
+    "historyDescription": "계정에 전송된 최근 메시지를 확인합니다.",
+    "loadHistory": "기록 불러오기",
+    "hideHistory": "기록 숨기기",
+    "noMessages": "메시지가 없습니다.",
+    "sent": "전송됨",
+    "failed": "실패"
+  },
+  "repoExplorer": {
+    "title": "저장소 탐색기",
+    "description": "AT Protocol 레코드를 탐색하고 관리합니다.",
+    "collections": "컬렉션",
+    "noCollections": "컬렉션을 찾을 수 없습니다",
+    "records": "레코드",
+    "noRecords": "이 컬렉션에 레코드가 없습니다",
+    "recordDetails": "레코드 세부 정보",
+    "rkey": "레코드 키",
+    "cid": "CID",
+    "value": "값",
+    "deleteRecord": "레코드 삭제",
+    "deleteConfirm": "레코드 {rkey}을(를) 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
+    "unknownError": "알 수 없는 오류가 발생했습니다",
+    "invalidJson": "잘못된 JSON",
+    "collectionRequired": "컬렉션은 필수입니다",
+    "recordCreated": "레코드 생성됨: {uri}",
+    "recordUpdated": "레코드가 업데이트되었습니다",
+    "recordDeleted": "레코드가 삭제되었습니다",
+    "newRecord": "새 레코드",
+    "createRecord": "레코드 생성",
+    "filterCollections": "컬렉션 검색...",
+    "filterRecords": "레코드 검색...",
+    "noCollectionsYet": "컬렉션이 아직 없습니다. 첫 번째 레코드를 만들어 시작하세요.",
+    "loadMore": "더 불러오기",
+    "recordJson": "레코드 JSON",
+    "saving": "저장 중...",
+    "updateRecord": "레코드 업데이트",
+    "collectionNsid": "컬렉션 (NSID)",
+    "recordKeyOptional": "레코드 키 (선택사항)",
+    "autoGenerated": "비워두면 자동 생성 (TID)",
+    "autoGeneratedHint": "비워두면 TID 기반 키가 자동 생성됩니다",
+    "creating": "생성 중...",
+    "demoPostText": "안녕하세요, 제 PDS에서 보내는 첫 번째 게시물입니다!",
+    "demoDisplayName": "표시 이름",
+    "demoBio": "간단한 자기소개를 작성하세요."
+  },
+  "admin": {
+    "title": "관리 패널",
+    "serverStats": "서버 통계",
+    "users": "사용자",
+    "repos": "저장소",
+    "records": "레코드",
+    "blobStorage": "Blob 저장소",
+    "refreshStats": "통계 새로고침",
+    "userManagement": "사용자 관리",
+    "searchPlaceholder": "핸들로 검색 (선택사항)",
+    "searchUsers": "사용자 검색",
+    "noUsers": "사용자를 찾을 수 없습니다",
+    "handle": "핸들",
+    "email": "이메일",
+    "status": "상태",
+    "created": "생성일",
+    "loadMore": "더 불러오기",
+    "inviteCodes": "초대 코드",
+    "loadInviteCodes": "초대 코드 불러오기",
+    "refresh": "새로고침",
+    "noInvites": "초대 코드가 없습니다",
+    "code": "코드",
+    "available": "사용 가능",
+    "uses": "사용 횟수",
+    "actions": "작업",
+    "disable": "비활성화",
+    "disableInviteConfirm": "초대 코드 {code}을(를) 비활성화하시겠습니까?",
+    "active": "활성",
+    "exhausted": "소진됨",
+    "disabled": "비활성화됨",
+    "userDetails": "사용자 세부 정보",
+    "did": "DID",
+    "invites": "초대",
+    "enabled": "활성화됨",
+    "enableInvites": "초대 활성화",
+    "disableInvites": "초대 비활성화",
+    "deleteAccount": "계정 삭제",
+    "deleteConfirm": "계정 @{handle}을(를) 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
+    "verified": "인증됨",
+    "unverified": "미인증",
+    "deactivated": "비활성화됨"
+  },
+  "oauth": {
+    "login": {
+      "title": "로그인",
+      "subtitle": "앱을 계속하려면 로그인하세요",
+      "signingIn": "로그인 중...",
+      "authenticating": "인증 중...",
+      "checkingPasskey": "패스키 확인 중...",
+      "signInWithPasskey": "패스키로 로그인",
+      "passkeyNotSetUp": "패스키가 설정되지 않음",
+      "orUsePassword": "또는 비밀번호 사용",
+      "password": "비밀번호",
+      "rememberDevice": "이 기기 기억하기",
+      "passkeyHintChecking": "패스키 상태 확인 중...",
+      "passkeyHintAvailable": "패스키로 로그인",
+      "passkeyHintNotAvailable": "이 계정에 등록된 패스키가 없습니다"
+    },
+    "consent": {
+      "title": "앱 승인",
+      "appWantsAccess": "{app}이(가) 계정에 액세스하려고 합니다",
+      "permissions": "이 앱은 다음을 수행할 수 있습니다:",
+      "readProfile": "프로필 정보 읽기",
+      "readPosts": "게시물 및 콘텐츠 읽기",
+      "writePosts": "대신 게시물 작성 및 삭제",
+      "readNotifications": "알림 읽기",
+      "fullAccess": "계정에 대한 전체 액세스",
+      "authorize": "승인",
+      "deny": "거부",
+      "authorizing": "승인 중...",
+      "rememberChoice": "이 선택 기억",
+      "signingInAs": "로그인 계정:",
+      "permissionsRequested": "요청된 권한",
+      "required": "필수",
+      "rememberChoiceLabel": "이 앱에 대한 선택 기억하기"
+    },
+    "accounts": {
+      "title": "계정 선택",
+      "subtitle": "계속할 계정 선택",
+      "useAnother": "다른 계정 사용"
+    },
+    "twoFactor": {
+      "title": "2단계 인증",
+      "subtitle": "추가 확인이 필요합니다",
+      "usePasskey": "패스키 사용",
+      "useTotp": "인증 앱 사용",
+      "verifying": "확인 중..."
+    },
+    "twoFactorCode": {
+      "title": "2단계 인증",
+      "subtitle": "{channel}(으)로 인증 코드를 보냈습니다. 아래에 코드를 입력하여 계속하세요.",
+      "codeLabel": "인증 코드",
+      "codePlaceholder": "6자리 코드 입력",
+      "verify": "확인",
+      "verifying": "확인 중...",
+      "errors": {
+        "missingRequestUri": "request_uri 매개변수가 없습니다",
+        "verificationFailed": "인증에 실패했습니다",
+        "connectionFailed": "서버에 연결하지 못했습니다",
+        "unexpectedResponse": "서버로부터 예기치 않은 응답"
+      }
+    },
+    "totp": {
+      "title": "인증 코드 입력",
+      "subtitle": "인증 앱의 6자리 코드를 입력하세요",
+      "codePlaceholder": "6자리 코드 입력",
+      "verify": "확인",
+      "verifying": "확인 중...",
+      "useBackupCode": "백업 코드 사용",
+      "backupCodePlaceholder": "백업 코드 입력",
+      "trustDevice": "이 기기를 30일간 신뢰",
+      "hintBackupCode": "백업 코드 사용 중",
+      "hintTotpCode": "인증 코드 사용 중",
+      "hintDefault": "인증 앱은 6자리, 백업 코드는 8자"
+    },
+    "passkey": {
+      "title": "패스키 확인",
+      "subtitle": "패스키를 사용하여 본인 확인",
+      "waiting": "패스키 대기 중...",
+      "useTotp": "인증 앱 사용"
+    },
+    "error": {
+      "title": "승인 오류",
+      "genericError": "승인 중 오류가 발생했습니다.",
+      "tryAgain": "다시 시도",
+      "backToApp": "앱으로 돌아가기"
+    }
+  },
+  "verify": {
+    "title": "계정 인증",
+    "subtitle": "{channel}(으)로 인증 코드를 보냈습니다. 아래에 입력하여 등록을 완료하세요.",
+    "codePlaceholder": "6자리 코드 입력",
+    "codeLabel": "인증 코드",
+    "verifyButton": "계정 인증",
+    "verifying": "인증 중...",
+    "resendCode": "코드 다시 보내기",
+    "resending": "전송 중...",
+    "codeResent": "인증 코드를 다시 보냈습니다!",
+    "backToLogin": "로그인으로 돌아가기",
+    "verifyingAccount": "인증 중인 계정: @{handle}",
+    "startOver": "다른 계정으로 다시 시작",
+    "noPending": "보류 중인 인증이 없습니다.",
+    "noPendingInfo": "최근에 계정을 만들고 인증이 필요한 경우 새 계정을 만들어야 합니다. 이미 계정을 인증한 경우 로그인할 수 있습니다.",
+    "createAccount": "계정 만들기",
+    "signIn": "로그인"
+  },
+  "resetPassword": {
+    "title": "비밀번호 재설정",
+    "forgotTitle": "비밀번호를 잊으셨나요",
+    "subtitle": "받은 코드를 입력하고 새 비밀번호를 선택하세요.",
+    "forgotSubtitle": "핸들 또는 이메일을 입력하면 비밀번호 재설정 코드를 보내드립니다.",
+    "handleOrEmail": "핸들 또는 이메일",
+    "emailPlaceholder": "핸들 또는 [e-mail]",
+    "sendCode": "재설정 코드 보내기",
+    "sending": "전송 중...",
+    "codeSent": "비밀번호 재설정 코드를 보냈습니다! 선호하는 알림 채널을 확인하세요.",
+    "enterCode": "이메일의 코드와 새 비밀번호를 입력하세요.",
+    "code": "재설정 코드",
+    "codePlaceholder": "재설정 코드 입력",
+    "newPassword": "새 비밀번호",
+    "newPasswordPlaceholder": "8자 이상",
+    "confirmPassword": "비밀번호 확인",
+    "confirmPasswordPlaceholder": "새 비밀번호 재입력",
+    "resetButton": "비밀번호 재설정",
+    "resetting": "재설정 중...",
+    "success": "비밀번호가 재설정되었습니다!",
+    "backToLogin": "로그인으로 돌아가기",
+    "requestNewCode": "새 코드 요청",
+    "passwordsMismatch": "비밀번호가 일치하지 않습니다",
+    "passwordLength": "비밀번호는 8자 이상이어야 합니다"
+  },
+  "recoverPasskey": {
+    "title": "계정 복구",
+    "invalidLinkTitle": "잘못된 복구 링크",
+    "invalidLinkMessage": "이 복구 링크가 잘못되었거나 손상되었습니다. 새 복구 이메일을 요청하세요.",
+    "goToLogin": "로그인으로 이동",
+    "successTitle": "비밀번호가 설정되었습니다!",
+    "successMessage": "임시 비밀번호가 설정되었습니다. 이 비밀번호로 로그인할 수 있습니다.",
+    "successNextSteps": "로그인 후 보안 설정에서 새 패스키를 추가하여 패스키 전용 인증을 복원하는 것이 좋습니다.",
+    "signIn": "로그인",
+    "subtitle": "패스키 전용 계정에 대한 액세스를 복구하기 위해 임시 비밀번호를 설정합니다.",
+    "newPassword": "새 비밀번호",
+    "newPasswordPlaceholder": "8자 이상",
+    "confirmPassword": "비밀번호 확인",
+    "confirmPasswordPlaceholder": "비밀번호 재입력",
+    "whatHappensNext": "다음 단계",
+    "whatHappensNextDetail": "이 비밀번호를 설정한 후 로그인하여 보안 설정에서 새 패스키를 추가할 수 있습니다. 새 패스키를 추가한 후 임시 비밀번호를 제거할 수 있습니다.",
+    "setPassword": "비밀번호 설정",
+    "settingPassword": "비밀번호 설정 중...",
+    "validation": {
+      "passwordRequired": "새 비밀번호는 필수입니다",
+      "passwordLength": "비밀번호는 8자 이상이어야 합니다",
+      "passwordsMismatch": "비밀번호가 일치하지 않습니다"
+    },
+    "errors": {
+      "invalidLink": "잘못된 복구 링크입니다. 새 링크를 요청하세요.",
+      "expired": "이 복구 링크가 만료되었습니다. 새 링크를 요청하세요."
+    }
+  },
+  "requestPasskeyRecovery": {
+    "title": "패스키 계정 복구",
+    "subtitle": "패스키에 액세스할 수 없나요? 핸들 또는 이메일을 입력하면 복구 링크를 보내드립니다.",
+    "successTitle": "복구 링크 전송됨",
+    "successMessage": "계정이 존재하고 패스키 전용 계정인 경우 선호하는 알림 채널로 복구 링크를 받게 됩니다.",
+    "successInfo": "링크는 1시간 후 만료됩니다. 계정 설정에 따라 이메일, Discord, Telegram 또는 Signal을 확인하세요.",
+    "handleOrEmail": "핸들 또는 이메일",
+    "emailPlaceholder": "핸들 또는 [e-mail]",
+    "howItWorks": "작동 방식",
+    "howItWorksDetail": "등록된 알림 채널로 보안 링크를 보냅니다. 링크를 클릭하여 임시 비밀번호를 설정합니다. 그런 다음 로그인하여 새 패스키를 추가할 수 있습니다.",
+    "sendRecoveryLink": "복구 링크 보내기",
+    "sending": "전송 중...",
+    "backToLogin": "로그인으로 돌아가기"
+  },
+  "registerPasskey": {
+    "title": "패스키 계정 만들기",
+    "subtitle": "패스키를 사용하여 비밀번호 없는 계정을 만듭니다.",
+    "handle": "핸들",
+    "handlePlaceholder": "사용자 이름",
+    "handleHint": "전체 핸들: @{handle}",
+    "email": "이메일 주소",
+    "emailPlaceholder": "[e-mail]",
+    "inviteCode": "초대 코드",
+    "inviteCodePlaceholder": "초대 코드 입력",
+    "createButton": "계정 만들기",
+    "creating": "생성 중...",
+    "alreadyHaveAccount": "이미 계정이 있으신가요?",
+    "signIn": "로그인",
+    "wantPassword": "비밀번호를 사용하시겠습니까?",
+    "createPasswordAccount": "비밀번호 계정 만들기"
+  },
+  "trustedDevices": {
+    "title": "신뢰할 수 있는 기기",
+    "backToSecurity": "← 보안 설정",
+    "description": "신뢰할 수 있는 기기는 로그인 시 2단계 인증을 건너뛸 수 있습니다. 신뢰는 30일간 유효하며 기기를 사용할 때 자동으로 연장됩니다.",
+    "noDevices": "신뢰할 수 있는 기기가 아직 없습니다.",
+    "noDevicesHint": "2단계 인증이 활성화된 상태로 로그인할 때 기기를 30일간 신뢰하도록 선택할 수 있습니다.",
+    "lastSeen": "마지막 접속:",
+    "trustedSince": "신뢰 시작:",
+    "trustExpires": "신뢰 만료:",
+    "expired": "만료됨",
+    "tomorrow": "내일",
+    "inDays": "{days}일 후",
+    "revoke": "신뢰 취소",
+    "revokeConfirm": "이 기기에 대한 신뢰를 취소하시겠습니까? 다음에 이 기기에서 로그인할 때 2FA 코드를 입력해야 합니다.",
+    "deviceRevoked": "기기 신뢰가 취소되었습니다",
+    "deviceRenamed": "기기 이름이 변경되었습니다",
+    "deviceNamePlaceholder": "기기 이름",
+    "browser": "브라우저:",
+    "unknownDevice": "알 수 없는 기기"
+  },
+  "reauth": {
+    "title": "재인증 필요",
+    "subtitle": "계속하려면 본인 확인을 해주세요.",
+    "usePassword": "비밀번호 사용",
+    "usePasskey": "패스키 사용",
+    "useTotp": "인증 앱 사용",
+    "passwordPlaceholder": "비밀번호 입력",
+    "totpPlaceholder": "6자리 코드 입력",
+    "verify": "확인",
+    "verifying": "확인 중...",
+    "cancel": "취소"
+  }
+}

frontend/src/locales/zh.json

···
+{
+  "common": {
+    "loading": "加载中...",
+    "error": "错误",
+    "save": "保存",
+    "cancel": "取消",
+    "back": "返回",
+    "done": "完成",
+    "refresh": "刷新",
+    "create": "创建",
+    "delete": "删除",
+    "confirm": "确认",
+    "created": "创建时间",
+    "expires": "过期时间",
+    "name": "名称",
+    "dashboard": "控制台",
+    "backToDashboard": "← 返回控制台"
+  },
+  "login": {
+    "title": "登录",
+    "subtitle": "登录以管理您的 PDS 账户",
+    "button": "登录",
+    "redirecting": "跳转中...",
+    "chooseAccount": "选择账户",
+    "signInToAnother": "登录其他账户",
+    "backToSaved": "← 返回已保存账户",
+    "forgotPassword": "忘记密码？",
+    "lostPasskey": "丢失通行密钥？",
+    "noAccount": "还没有账户？",
+    "createAccount": "立即注册",
+    "removeAccount": "从已保存账户中移除"
+  },
+  "verification": {
+    "title": "验证账户",
+    "subtitle": "您的账户需要验证。请输入发送到您验证方式的验证码。",
+    "codeLabel": "验证码",
+    "codePlaceholder": "输入6位验证码",
+    "verifyButton": "验证账户",
+    "verifying": "验证中...",
+    "resendButton": "重新发送验证码",
+    "resending": "发送中...",
+    "resent": "验证码已重新发送！",
+    "backToLogin": "返回登录"
+  },
+  "register": {
+    "title": "创建账户",
+    "subtitle": "在此 PDS 上创建新账户",
+    "handle": "用户名",
+    "handlePlaceholder": "您的用户名",
+    "handleHint": "您的完整用户名将是：@{handle}",
+    "handleDotWarning": "自定义域名可以在创建账户后在设置中配置。",
+    "password": "密码",
+    "passwordPlaceholder": "至少8位字符",
+    "confirmPassword": "确认密码",
+    "confirmPasswordPlaceholder": "再次输入密码",
+    "identityType": "身份类型",
+    "identityHint": "选择如何管理您的去中心化身份。",
+    "didPlc": "did:plc",
+    "didPlcRecommended": "（推荐）",
+    "didPlcHint": "由 PLC 目录管理的可迁移身份",
+    "didWeb": "did:web",
+    "didWebHint": "托管在此 PDS 上的身份（请阅读下方警告）",
+    "didWebBYOD": "did:web（自带域名）",
+    "didWebBYODHint": "使用您自己的域名",
+    "didWebWarningTitle": "重要提示：了解利弊",
+    "didWebWarning1": "永久绑定此 PDS：",
+    "didWebWarning1Detail": "您的身份将是 {did}。即使您以后迁移到另一个 PDS，此服务器也必须继续托管您的 DID 文档。",
+    "didWebWarning2": "无法恢复：",
+    "didWebWarning2Detail": "与 did:plc 不同，did:web 没有密钥轮换机制。如果此 PDS 永久下线，您的身份将无法恢复。",
+    "didWebWarning3": "我们的承诺：",
+    "didWebWarning3Detail": "如果您迁移到其他 PDS，我们将继续提供指向您新 PDS 的最小 DID 文档。您的身份将保持可用。",
+    "didWebWarning4": "建议：",
+    "didWebWarning4Detail": "除非您有特定原因需要 did:web，否则请选择 did:plc。",
+    "externalDid": "您的 did:web",
+    "externalDidPlaceholder": "did:web:yourdomain.com",
+    "externalDidHint": "您的域名必须在 /.well-known/did.json 提供指向此 PDS 的有效 DID 文档",
+    "contactMethod": "联系方式",
+    "contactMethodHint": "选择您希望如何验证账户和接收通知。您只需选择一种。",
+    "verificationMethod": "验证方式",
+    "email": "电子邮件",
+    "emailAddress": "电子邮件地址",
+    "emailPlaceholder": "[e-mail]",
+    "discord": "Discord",
+    "discordId": "Discord 用户 ID",
+    "discordIdPlaceholder": "您的 Discord 用户 ID",
+    "discordIdHint": "您的 Discord 数字用户 ID（开启开发者模式后可以复制）",
+    "telegram": "Telegram",
+    "telegramUsername": "Telegram 用户名",
+    "telegramUsernamePlaceholder": "@yourusername",
+    "signal": "Signal",
+    "signalNumber": "Signal 电话号码",
+    "signalNumberPlaceholder": "[phone]",
+    "signalNumberHint": "包含国家代码（例如中国为 +86）",
+    "inviteCode": "邀请码",
+    "inviteCodePlaceholder": "输入您的邀请码",
+    "inviteCodeRequired": "必填",
+    "createButton": "创建账户",
+    "creating": "正在创建...",
+    "alreadyHaveAccount": "已有账户？",
+    "signIn": "立即登录",
+    "wantPasswordless": "想要无密码登录？",
+    "createPasskeyAccount": "创建通行密钥账户",
+    "validation": {
+      "handleRequired": "请输入用户名",
+      "handleNoDots": "用户名不能包含点号。您可以在创建账户后设置自定义域名。",
+      "passwordRequired": "请输入密码",
+      "passwordLength": "密码至少需要8位字符",
+      "passwordsMismatch": "两次输入的密码不一致",
+      "inviteCodeRequired": "请输入邀请码",
+      "externalDidRequired": "请输入您的 did:web",
+      "externalDidFormat": "DID 必须以 did:web: 开头",
+      "emailRequired": "使用邮箱验证需要填写邮箱地址",
+      "discordIdRequired": "使用 Discord 验证需要填写 Discord ID",
+      "telegramRequired": "使用 Telegram 验证需要填写用户名",
+      "signalRequired": "使用 Signal 验证需要填写电话号码"
+    }
+  },
+  "dashboard": {
+    "title": "控制台",
+    "switchAccount": "切换账户",
+    "addAnotherAccount": "添加其他账户",
+    "signOut": "退出 @{handle}",
+    "deactivatedTitle": "账户已停用",
+    "deactivatedMessage": "您的账户目前已停用。这通常发生在账户迁移期间。在账户重新激活之前，部分功能可能受限。",
+    "accountOverview": "账户概览",
+    "handle": "用户名",
+    "did": "DID",
+    "primaryContact": "主要联系方式",
+    "admin": "管理员",
+    "deactivated": "已停用",
+    "verified": "已验证",
+    "unverified": "未验证",
+    "navAppPasswords": "应用专用密码",
+    "navAppPasswordsDesc": "管理第三方应用的专用密码",
+    "navSessions": "登录会话",
+    "navSessionsDesc": "查看和管理您的登录会话",
+    "navInviteCodes": "邀请码",
+    "navInviteCodesDesc": "查看和创建邀请码",
+    "navSettings": "账户设置",
+    "navSettingsDesc": "邮箱、密码、用户名等",
+    "navSecurity": "安全设置",
+    "navSecurityDesc": "双重身份验证",
+    "navComms": "通讯偏好",
+    "navCommsDesc": "Discord、Telegram、Signal 渠道设置",
+    "navRepo": "数据浏览器",
+    "navRepoDesc": "浏览和管理原始 AT Protocol 记录",
+    "navAdmin": "管理后台",
+    "navAdminDesc": "服务器统计和管理操作"
+  },
+  "settings": {
+    "title": "账户设置",
+    "language": "语言",
+    "languageDescription": "选择您的首选语言",
+    "changeEmail": "更改邮箱",
+    "currentEmail": "当前：{email}",
+    "newEmail": "新邮箱",
+    "newEmailPlaceholder": "[e-mail]",
+    "changeEmailButton": "更改邮箱",
+    "requesting": "请求中...",
+    "verificationCode": "验证码",
+    "verificationCodePlaceholder": "输入邮件中的验证码",
+    "confirmEmailChange": "确认更改邮箱",
+    "updating": "更新中...",
+    "changeHandle": "更改用户名",
+    "currentHandle": "当前：@{handle}",
+    "pdsHandle": "PDS 用户名",
+    "customDomain": "自定义域名",
+    "customDomainDescription": "使用您自己的域名作为用户名。需要先验证域名所有权。",
+    "setupInstructions": "设置说明",
+    "setupMethodsIntro": "选择以下验证方式之一：",
+    "dnsMethod": "方式一：DNS TXT 记录（推荐）",
+    "dnsMethodDesc": "在您的域名中添加此 TXT 记录：",
+    "httpMethod": "方式二：HTTP Well-Known 文件",
+    "httpMethodDesc": "在此 URL 提供您的 DID：",
+    "httpMethodContent": "文件内容应为：",
+    "yourDomain": "您的域名",
+    "yourDomainPlaceholder": "example.com",
+    "verifyAndUpdate": "验证并更新用户名",
+    "verifying": "验证中...",
+    "newHandle": "新用户名",
+    "newHandlePlaceholder": "yourhandle",
+    "changeHandleButton": "更改用户名",
+    "changePassword": "更改密码",
+    "currentPassword": "当前密码",
+    "currentPasswordPlaceholder": "输入当前密码",
+    "newPassword": "新密码",
+    "newPasswordPlaceholder": "至少8位字符",
+    "confirmNewPassword": "确认新密码",
+    "confirmNewPasswordPlaceholder": "再次输入新密码",
+    "changePasswordButton": "更改密码",
+    "changing": "更改中...",
+    "exportData": "导出数据",
+    "exportDataDescription": "将您的所有数据下载为 CAR 文件。包括您的所有帖子、点赞、关注等数据。",
+    "downloadRepo": "下载数据",
+    "exporting": "导出中...",
+    "deleteAccount": "删除账户",
+    "deleteWarning": "此操作不可逆。您的所有数据将被永久删除。",
+    "requestDeletion": "请求删除账户",
+    "confirmationCode": "确认码（来自邮件）",
+    "confirmationCodePlaceholder": "输入确认码",
+    "yourPassword": "您的密码",
+    "yourPasswordPlaceholder": "输入您的密码",
+    "permanentlyDelete": "永久删除账户",
+    "deleting": "删除中...",
+    "messages": {
+      "emailCodeSent": "验证码已发送到您当前的邮箱",
+      "emailUpdated": "邮箱更新成功",
+      "handleUpdated": "用户名更新成功",
+      "passwordChanged": "密码更改成功",
+      "passwordsMismatch": "两次输入的密码不一致",
+      "passwordLength": "密码至少需要8位字符",
+      "deletionCodeSent": "删除确认码已发送到您的邮箱",
+      "repoExported": "数据导出成功",
+      "confirmDelete": "您确定要删除账户吗？此操作无法撤销。"
+    }
+  },
+  "appPasswords": {
+    "title": "应用专用密码",
+    "description": "应用专用密码可让您登录第三方应用而无需提供主密码。每个密码都可以单独撤销。",
+    "createNew": "创建新密码",
+    "appNamePlaceholder": "应用名称（如 Graysky、Skeets）",
+    "created": "应用专用密码已创建",
+    "createdMessage": "请立即复制此密码，您将无法再次查看。",
+    "yourPasswords": "您的应用专用密码",
+    "noPasswords": "暂无应用专用密码",
+    "revoke": "撤销",
+    "revoking": "撤销中...",
+    "creating": "创建中...",
+    "revokeConfirm": "撤销「{name}」的密码？使用此密码的应用将无法再访问您的账户。"
+  },
+  "sessions": {
+    "title": "登录会话",
+    "loadingSessions": "加载会话中...",
+    "noSessions": "没有活跃的登录会话",
+    "current": "当前",
+    "oauth": "OAuth",
+    "session": "会话",
+    "signOut": "退出",
+    "revoke": "撤销",
+    "revokeAll": "撤销所有其他会话",
+    "revokeCurrentConfirm": "这将使您退出当前会话，确定继续？",
+    "revokeConfirm": "确定撤销此会话？",
+    "revokeAllConfirm": "这将撤销 {count} 个其他会话，确定继续？",
+    "noOtherSessions": "没有其他可撤销的会话",
+    "failedToLoad": "加载会话失败",
+    "failedToRevoke": "撤销会话失败",
+    "failedToRevokeAll": "撤销会话失败",
+    "created": "创建时间：",
+    "expires": "过期时间：",
+    "daysAgo": "{count} 天前",
+    "hoursAgo": "{count} 小时前",
+    "minutesAgo": "{count} 分钟前",
+    "justNow": "刚刚"
+  },
+  "inviteCodes": {
+    "title": "邀请码",
+    "description": "邀请码可让您邀请朋友加入。每个邀请码只能使用一次。",
+    "createNew": "创建新邀请码",
+    "uses": "使用次数",
+    "usesPlaceholder": "使用次数（1-100）",
+    "yourCodes": "您的邀请码",
+    "noCodes": "暂无邀请码",
+    "available": "可用",
+    "used": "已被 @{handle} 使用",
+    "disabled": "已禁用",
+    "usedBy": "使用者",
+    "creating": "创建中...",
+    "disableConfirm": "禁用此邀请码？它将无法再被使用。",
+    "created": "邀请码已创建",
+    "copy": "复制",
+    "createdOn": "创建于 {date}"
+  },
+  "security": {
+    "title": "安全设置",
+    "passkeys": "通行密钥",
+    "passkeysDescription": "通行密钥使用您设备的安全功能（指纹、面容或 PIN）提供安全的无密码登录。",
+    "addPasskey": "添加通行密钥",
+    "adding": "添加中...",
+    "noPasskeys": "未注册通行密钥",
+    "passkeyName": "通行密钥名称",
+    "passkeyNamePlaceholder": "如 MacBook Pro、iPhone",
+    "register": "注册",
+    "registering": "注册中...",
+    "rename": "重命名",
+    "renaming": "重命名中...",
+    "deletePasskey": "删除",
+    "deletePasskeyConfirm": "删除通行密钥「{name}」？您将无法再使用它登录。",
+    "totp": "身份验证器（TOTP）",
+    "totpDescription": "使用 Google Authenticator、Authy 或 1Password 等应用进行双重身份验证。",
+    "totpEnabled": "已启用身份验证器",
+    "totpDisabled": "未启用身份验证器",
+    "enableTotp": "启用身份验证器",
+    "disableTotp": "禁用身份验证器",
+    "disabling": "禁用中...",
+    "totpSetup": "设置身份验证器",
+    "totpSetupInstructions": "使用身份验证器应用扫描此二维码，然后输入6位验证码完成验证。",
+    "totpCode": "验证码",
+    "totpCodePlaceholder": "输入6位验证码",
+    "verifyAndEnable": "验证并启用",
+    "backupCodes": "备用验证码",
+    "backupCodesDescription": "如果无法使用身份验证器，可以使用这些备用码登录。每个验证码只能使用一次。",
+    "regenerateBackupCodes": "重新生成备用码",
+    "regenerating": "生成中...",
+    "regenerateConfirm": "重新生成备用码？当前的验证码将失效。",
+    "legacyLogin": "传统登录",
+    "legacyLoginDescription": "允许使用用户名/密码直接登录（传统模式）。禁用后必须使用 OAuth + 双重验证。",
+    "legacyLoginOn": "传统登录已启用",
+    "legacyLoginOff": "传统登录已禁用",
+    "legacyLoginWarning": "警告：启用传统登录会绕过双重身份验证。仅在需要兼容旧版应用时启用。",
+    "totpPasswordWarning": "启用 TOTP 后，将无法从 Bluesky 应用（或其他旧版应用）更改密码。要更改密码，您有两个选择：",
+    "totpPasswordOption1Label": "在这里更改：",
+    "totpPasswordOption1Text": "使用本网站的",
+    "totpPasswordOption1Link": "设置页面",
+    "totpPasswordOption1Suffix": "，您可以使用身份验证器应用进行验证。",
+    "totpPasswordOption2Label": "先验证您的会话：",
+    "totpPasswordOption2Text": "使用",
+    "totpPasswordOption2Link": "重新验证选项",
+    "totpPasswordOption2Suffix": "用 TOTP 验证您的 Bluesky 会话，然后密码更改将暂时有效。",
+    "legacyAppsTitle": "什么是旧版应用？",
+    "legacyAppsDescription": "某些应用（如官方 Bluesky 应用）使用仅需密码的旧版身份验证。启用双重验证后，这些应用会绕过您的第二重验证。禁用传统登录会强制所有应用使用 OAuth，从而正确执行双重验证。",
+    "password": "密码",
+    "passwordStatus": "已设置密码",
+    "noPassword": "未设置密码（仅通行密钥账户）",
+    "setPassword": "设置密码",
+    "removePassword": "移除密码",
+    "removePasswordConfirm": "移除密码后需要使用通行密钥登录，确定继续？",
+    "removing": "移除中...",
+    "loading": "加载中...",
+    "loadingPasskeys": "加载通行密钥中...",
+    "cancel": "取消",
+    "save": "保存",
+    "back": "返回",
+    "next": "下一步：验证代码",
+    "copyToClipboard": "复制到剪贴板",
+    "savedMyCodes": "我已保存备用码",
+    "cantScan": "无法扫描？手动输入",
+    "unnamedPasskey": "未命名的通行密钥",
+    "added": "添加于",
+    "lastUsed": "上次使用",
+    "passwordDescription": "管理您的账户密码。如果您已设置通行密钥，可以选择移除密码以获得完全无密码的体验。",
+    "disableTotpWarning": "这将降低您的账户安全性。",
+    "removePasswordWarning": "这将使您的账户变为仅通行密钥模式。您只能使用已注册的通行密钥登录。如果您丢失了所有通行密钥，可以通过通知渠道恢复账户。",
+    "beforeProceeding": "继续之前：",
+    "beforeProceedingItem1": "确保您至少注册了一个可靠的通行密钥",
+    "beforeProceedingItem2": "考虑在多个设备上注册通行密钥",
+    "beforeProceedingItem3": "确保您的恢复通知渠道是最新的",
+    "addPasskeyFirst": "请先添加至少一个通行密钥才能移除密码。",
+    "passkeyOnlyHint": "您使用通行密钥登录。如果您丢失了通行密钥，可以使用登录页面上的「丢失通行密钥？」链接恢复账户。",
+    "trustedDevices": "受信任设备",
+    "trustedDevicesDescription": "管理可以跳过双重身份验证的设备。信任有效期为30天，使用设备时自动延长。",
+    "manageTrustedDevices": "管理受信任设备",
+    "appCompatibility": "应用兼容性",
+    "enterPassword": "输入您的密码",
+    "legacyLoginEnabled": "已启用传统应用登录",
+    "legacyLoginDisabled": "已禁用传统应用登录 - 仅 OAuth 应用可登录",
+    "failedToUpdatePreference": "更新偏好设置失败",
+    "passwordRemoved": "密码已移除。您的账户现在仅支持通行密钥。",
+    "failedToRemovePassword": "移除密码失败",
+    "failedToLoadTotpStatus": "加载 TOTP 状态失败",
+    "totpEnabledSuccess": "双重身份验证已成功启用",
+    "totpDisabledSuccess": "双重身份验证已禁用",
+    "backupCodesCopied": "备用码已复制到剪贴板",
+    "failedToLoadPasskeys": "加载通行密钥失败",
+    "passkeysNotSupported": "此浏览器不支持通行密钥",
+    "passkeyCreationCancelled": "通行密钥创建已取消",
+    "passkeyAddedSuccess": "通行密钥添加成功",
+    "passkeyDeleted": "通行密钥已删除",
+    "passkeyRenamed": "通行密钥已重命名"
+  },
+  "comms": {
+    "title": "通讯偏好",
+    "description": "选择您希望如何接收重要消息，如密码重置、安全提醒和账户更新。",
+    "preferredChannel": "首选渠道",
+    "preferredChannelDescription": "选择您首选的消息接收方式。必须先配置好渠道才能选择。",
+    "channelConfiguration": "渠道配置",
+    "emailVia": "通过邮件接收消息",
+    "discordVia": "通过 Discord 私信接收消息",
+    "telegramVia": "通过 Telegram 接收消息",
+    "signalVia": "通过 Signal 接收消息",
+    "configureToEnable": "请先在下方配置",
+    "emailManagedInSettings": "邮箱在账户设置中管理",
+    "discordIdHint": "您的 Discord 数字用户 ID（非用户名）。在 Discord 中开启开发者模式即可复制。",
+    "telegramHint": "您的 Telegram 用户名，不含 @ 符号",
+    "signalHint": "您的 Signal 电话号码，需包含国家代码",
+    "primary": "主要",
+    "verified": "已验证",
+    "notVerified": "未验证",
+    "verifyButton": "验证",
+    "verifyCodePlaceholder": "输入验证码",
+    "submit": "提交",
+    "saving": "保存中...",
+    "savePreferences": "保存偏好设置",
+    "preferencesSaved": "通讯偏好已保存",
+    "verifiedSuccess": "{channel} 验证成功",
+    "messageHistory": "消息历史",
+    "historyDescription": "查看发送到您账户的最近消息。",
+    "loadHistory": "加载历史",
+    "hideHistory": "隐藏历史",
+    "noMessages": "暂无消息记录",
+    "sent": "已发送",
+    "failed": "发送失败"
+  },
+  "repoExplorer": {
+    "title": "数据浏览器",
+    "description": "浏览和管理您的原始 AT Protocol 记录。",
+    "collections": "集合",
+    "noCollections": "暂无集合",
+    "records": "记录",
+    "noRecords": "此集合中暂无记录",
+    "recordDetails": "记录详情",
+    "rkey": "记录键",
+    "cid": "CID",
+    "value": "值",
+    "deleteRecord": "删除记录",
+    "deleteConfirm": "删除记录 {rkey}？此操作无法撤销。",
+    "unknownError": "发生未知错误",
+    "invalidJson": "无效的 JSON",
+    "collectionRequired": "集合是必填项",
+    "recordCreated": "记录已创建：{uri}",
+    "recordUpdated": "记录已更新",
+    "recordDeleted": "记录已删除",
+    "newRecord": "新建记录",
+    "createRecord": "创建记录",
+    "filterCollections": "筛选集合...",
+    "filterRecords": "筛选记录...",
+    "noCollectionsYet": "暂无集合。创建您的第一条记录开始使用。",
+    "loadMore": "加载更多",
+    "recordJson": "记录 JSON",
+    "saving": "保存中...",
+    "updateRecord": "更新记录",
+    "collectionNsid": "集合 (NSID)",
+    "recordKeyOptional": "记录键（可选）",
+    "autoGenerated": "留空自动生成 (TID)",
+    "autoGeneratedHint": "留空将自动生成基于 TID 的键",
+    "creating": "创建中...",
+    "demoPostText": "你好，这是我的第一条帖子！来自我的 PDS。",
+    "demoDisplayName": "你的显示名称",
+    "demoBio": "写一段简短的自我介绍。"
+  },
+  "admin": {
+    "title": "管理后台",
+    "serverStats": "服务器统计",
+    "users": "用户",
+    "repos": "仓库",
+    "records": "记录",
+    "blobStorage": "文件存储",
+    "refreshStats": "刷新统计",
+    "userManagement": "用户管理",
+    "searchPlaceholder": "按用户名搜索（可选）",
+    "searchUsers": "搜索用户",
+    "noUsers": "未找到用户",
+    "handle": "用户名",
+    "email": "邮箱",
+    "status": "状态",
+    "created": "创建时间",
+    "loadMore": "加载更多",
+    "inviteCodes": "邀请码",
+    "loadInviteCodes": "加载邀请码",
+    "refresh": "刷新",
+    "noInvites": "暂无邀请码",
+    "code": "邀请码",
+    "available": "可用",
+    "uses": "使用次数",
+    "actions": "操作",
+    "disable": "禁用",
+    "disableInviteConfirm": "禁用邀请码 {code}？",
+    "active": "活跃",
+    "exhausted": "已用完",
+    "disabled": "已禁用",
+    "userDetails": "用户详情",
+    "did": "DID",
+    "invites": "邀请",
+    "enabled": "已启用",
+    "enableInvites": "启用邀请",
+    "disableInvites": "禁用邀请",
+    "deleteAccount": "删除账户",
+    "deleteConfirm": "删除账户 @{handle}？此操作无法撤销。",
+    "verified": "已验证",
+    "unverified": "未验证",
+    "deactivated": "已停用"
+  },
+  "oauth": {
+    "login": {
+      "title": "登录",
+      "subtitle": "登录以继续使用应用",
+      "signingIn": "登录中...",
+      "authenticating": "验证中...",
+      "checkingPasskey": "检查通行密钥...",
+      "signInWithPasskey": "使用通行密钥登录",
+      "passkeyNotSetUp": "未设置通行密钥",
+      "orUsePassword": "或使用密码",
+      "password": "密码",
+      "rememberDevice": "记住此设备",
+      "passkeyHintChecking": "正在检查通行密钥状态...",
+      "passkeyHintAvailable": "使用您的通行密钥登录",
+      "passkeyHintNotAvailable": "此账户未注册通行密钥"
+    },
+    "consent": {
+      "title": "授权应用",
+      "appWantsAccess": "{app} 想要访问您的账户",
+      "permissions": "此应用将能够：",
+      "readProfile": "读取您的个人资料",
+      "readPosts": "读取您的帖子和内容",
+      "writePosts": "代表您发布和删除帖子",
+      "readNotifications": "读取您的通知",
+      "fullAccess": "完全访问您的账户",
+      "authorize": "授权",
+      "deny": "拒绝",
+      "authorizing": "授权中...",
+      "rememberChoice": "记住此选择",
+      "signingInAs": "登录账户：",
+      "permissionsRequested": "请求的权限",
+      "required": "必需",
+      "rememberChoiceLabel": "记住对此应用的授权选择"
+    },
+    "accounts": {
+      "title": "选择账户",
+      "subtitle": "选择一个账户继续",
+      "useAnother": "使用其他账户"
+    },
+    "twoFactor": {
+      "title": "双重身份验证",
+      "subtitle": "需要额外验证",
+      "usePasskey": "使用通行密钥",
+      "useTotp": "使用身份验证器",
+      "verifying": "验证中..."
+    },
+    "twoFactorCode": {
+      "title": "双重身份验证",
+      "subtitle": "验证码已发送到您的 {channel}。请在下方输入验证码继续。",
+      "codeLabel": "验证码",
+      "codePlaceholder": "输入6位验证码",
+      "verify": "验证",
+      "verifying": "验证中...",
+      "errors": {
+        "missingRequestUri": "缺少 request_uri 参数",
+        "verificationFailed": "验证失败",
+        "connectionFailed": "无法连接到服务器",
+        "unexpectedResponse": "服务器返回意外响应"
+      }
+    },
+    "totp": {
+      "title": "输入验证码",
+      "subtitle": "请输入身份验证器应用中的6位验证码",
+      "codePlaceholder": "输入6位验证码",
+      "verify": "验证",
+      "verifying": "验证中...",
+      "useBackupCode": "使用备用验证码",
+      "backupCodePlaceholder": "输入备用验证码",
+      "trustDevice": "信任此设备30天",
+      "hintBackupCode": "正在使用备用验证码",
+      "hintTotpCode": "正在使用身份验证器验证码",
+      "hintDefault": "身份验证器为6位数字，备用码为8位字符"
+    },
+    "passkey": {
+      "title": "通行密钥验证",
+      "subtitle": "使用您的通行密钥验证身份",
+      "waiting": "等待通行密钥...",
+      "useTotp": "改用身份验证器"
+    },
+    "error": {
+      "title": "授权错误",
+      "genericError": "授权过程中发生错误。",
+      "tryAgain": "重试",
+      "backToApp": "返回应用"
+    }
+  },
+  "verify": {
+    "title": "验证账户",
+    "subtitle": "我们已将验证码发送到您的{channel}。请在下方输入以完成注册。",
+    "codePlaceholder": "输入6位验证码",
+    "codeLabel": "验证码",
+    "verifyButton": "验证账户",
+    "verifying": "验证中...",
+    "resendCode": "重新发送验证码",
+    "resending": "发送中...",
+    "codeResent": "验证码已重新发送！",
+    "backToLogin": "返回登录",
+    "verifyingAccount": "正在验证账户：@{handle}",
+    "startOver": "使用其他账户重新开始",
+    "noPending": "未找到待验证的账户",
+    "noPendingInfo": "如果您最近创建了账户需要验证，可能需要重新创建账户。如果您已完成验证，可以直接登录。",
+    "createAccount": "创建账户",
+    "signIn": "登录"
+  },
+  "resetPassword": {
+    "title": "重置密码",
+    "forgotTitle": "忘记密码",
+    "subtitle": "输入您收到的验证码和新密码。",
+    "forgotSubtitle": "输入您的用户名或邮箱，我们将发送重置密码的验证码。",
+    "handleOrEmail": "用户名或邮箱",
+    "emailPlaceholder": "用户名或 [e-mail]",
+    "sendCode": "发送重置验证码",
+    "sending": "发送中...",
+    "codeSent": "重置验证码已发送！请检查您的首选通知渠道。",
+    "enterCode": "输入邮件中的验证码和新密码。",
+    "code": "重置验证码",
+    "codePlaceholder": "输入重置验证码",
+    "newPassword": "新密码",
+    "newPasswordPlaceholder": "至少8位字符",
+    "confirmPassword": "确认密码",
+    "confirmPasswordPlaceholder": "再次输入新密码",
+    "resetButton": "重置密码",
+    "resetting": "重置中...",
+    "success": "密码重置成功！",
+    "backToLogin": "返回登录",
+    "requestNewCode": "重新获取验证码",
+    "passwordsMismatch": "两次输入的密码不一致",
+    "passwordLength": "密码至少需要8位字符"
+  },
+  "recoverPasskey": {
+    "title": "恢复账户",
+    "invalidLinkTitle": "无效的恢复链接",
+    "invalidLinkMessage": "此恢复链接无效或已损坏。请重新申请恢复邮件。",
+    "goToLogin": "前往登录",
+    "successTitle": "密码设置成功！",
+    "successMessage": "您的临时密码已设置成功。您现在可以使用此密码登录。",
+    "successNextSteps": "登录后，建议您在安全设置中添加新的通行密钥以恢复无密码登录。",
+    "signIn": "登录",
+    "subtitle": "设置临时密码以恢复您的通行密钥账户访问权限。",
+    "newPassword": "新密码",
+    "newPasswordPlaceholder": "至少8位字符",
+    "confirmPassword": "确认密码",
+    "confirmPasswordPlaceholder": "再次输入密码",
+    "whatHappensNext": "接下来会发生什么？",
+    "whatHappensNextDetail": "设置密码后，您可以登录并在安全设置中添加新的通行密钥。添加通行密钥后，您可以选择移除临时密码。",
+    "setPassword": "设置密码",
+    "settingPassword": "设置中...",
+    "validation": {
+      "passwordRequired": "请输入新密码",
+      "passwordLength": "密码至少需要8位字符",
+      "passwordsMismatch": "两次输入的密码不一致"
+    },
+    "errors": {
+      "invalidLink": "恢复链接无效，请重新申请。",
+      "expired": "恢复链接已过期，请重新申请。"
+    }
+  },
+  "requestPasskeyRecovery": {
+    "title": "恢复通行密钥账户",
+    "subtitle": "丢失了通行密钥？输入您的用户名或邮箱，我们将发送恢复链接。",
+    "successTitle": "恢复链接已发送",
+    "successMessage": "如果账户存在且为通行密钥账户，您将在首选通知渠道收到恢复链接。",
+    "successInfo": "链接将在1小时后过期。请根据您的账户设置检查邮箱、Discord、Telegram 或 Signal。",
+    "handleOrEmail": "用户名或邮箱",
+    "emailPlaceholder": "用户名或 [e-mail]",
+    "howItWorks": "如何恢复",
+    "howItWorksDetail": "我们将向您注册的通知渠道发送安全链接。点击链接设置临时密码，然后您就可以登录并添加新的通行密钥。",
+    "sendRecoveryLink": "发送恢复链接",
+    "sending": "发送中...",
+    "backToLogin": "返回登录"
+  },
+  "registerPasskey": {
+    "title": "创建通行密钥账户",
+    "subtitle": "使用通行密钥创建无密码账户。",
+    "handle": "用户名",
+    "handlePlaceholder": "您的用户名",
+    "handleHint": "您的完整用户名将是：@{handle}",
+    "email": "邮箱地址",
+    "emailPlaceholder": "[e-mail]",
+    "inviteCode": "邀请码",
+    "inviteCodePlaceholder": "输入您的邀请码",
+    "createButton": "创建账户",
+    "creating": "创建中...",
+    "alreadyHaveAccount": "已有账户？",
+    "signIn": "立即登录",
+    "wantPassword": "想使用密码？",
+    "createPasswordAccount": "创建密码账户"
+  },
+  "trustedDevices": {
+    "title": "受信任设备",
+    "backToSecurity": "← 安全设置",
+    "description": "受信任设备可以跳过双重身份验证。信任有效期为30天，使用设备时自动延长。",
+    "noDevices": "暂无受信任设备",
+    "noDevicesHint": "开启双重身份验证后登录时，可以选择信任设备30天。",
+    "lastSeen": "最后使用：",
+    "trustedSince": "信任时间：",
+    "trustExpires": "信任过期：",
+    "expired": "已过期",
+    "tomorrow": "明天",
+    "inDays": "{days}天后",
+    "revoke": "撤销信任",
+    "revokeConfirm": "确定撤销对此设备的信任？下次从此设备登录时需要输入双重验证码。",
+    "deviceRevoked": "设备信任已撤销",
+    "deviceRenamed": "设备已重命名",
+    "deviceNamePlaceholder": "设备名称",
+    "browser": "浏览器：",
+    "unknownDevice": "未知设备"
+  },
+  "reauth": {
+    "title": "需要重新验证",
+    "subtitle": "请验证您的身份以继续。",
+    "usePassword": "使用密码",
+    "usePasskey": "使用通行密钥",
+    "useTotp": "使用身份验证器",
+    "passwordPlaceholder": "输入您的密码",
+    "totpPlaceholder": "输入6位验证码",
+    "verify": "验证",
+    "verifying": "验证中...",
+    "cancel": "取消"
+  }
+}

frontend/src/main.ts

···
+import './styles/base.css'
 import App from './App.svelte'
 import { mount } from 'svelte'
 

frontend/src/routes/Admin.svelte

···
   import { getAuthState } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
+  import { formatDate, formatDateTime } from '../lib/date'
   const auth = getAuthState()
   let loading = $state(true)
   let error = $state<string | null>(null)
···
   }
   async function disableInvite(code: string) {
     if (!auth.session) return
-    if (!confirm(`Disable invite code ${code}?`)) return
+    if (!confirm($_('admin.disableInviteConfirm', { values: { code } }))) return
     try {
       await api.disableInviteCodes(auth.session.accessJwt, [code])
       invites = invites.map(inv => inv.code === code ? { ...inv, disabled: true } : inv)
···
   }
   async function deleteUser() {
     if (!auth.session || !selectedUser) return
-    if (!confirm(`Delete account @${selectedUser.handle}? This cannot be undone.`)) return
+    if (!confirm($_('admin.deleteConfirm', { values: { handle: selectedUser.handle } }))) return
     userActionLoading = true
     try {
       await api.adminDeleteAccount(auth.session.accessJwt, selectedUser.did)
···
                           <span class="badge unverified">Unverified</span>
                         {/if}
                       </td>
-                      <td class="date">{new Date(user.indexedAt).toLocaleDateString()}</td>
+                      <td class="date">{formatDate(user.indexedAt)}</td>
                     </tr>
                   {/each}
                 </tbody>
···
                           <span class="badge verified">Active</span>
                         {/if}
                       </td>
-                      <td class="date">{new Date(invite.createdAt).toLocaleDateString()}</td>
+                      <td class="date">{formatDate(invite.createdAt)}</td>
                       <td>
                         {#if !invite.disabled}
                           <button class="action-btn danger" onclick={() => disableInvite(invite.code)}>
···
                 {/if}
               </dd>
               <dt>Created</dt>
-              <dd>{new Date(selectedUser.indexedAt).toLocaleString()}</dd>
+              <dd>{formatDateTime(selectedUser.indexedAt)}</dd>
               <dt>Invites</dt>
               <dd>
                 {#if selectedUser.invitesDisabled}
···
 {/if}
 <style>
   .page {
-    max-width: 800px;
+    max-width: var(--width-lg);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   header {
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
+
   .back {
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .back:hover {
     color: var(--accent);
   }
+
   h1 {
-    margin: 0.5rem 0 0 0;
+    margin: var(--space-2) 0 0 0;
   }
+
   .loading {
     text-align: center;
     color: var(--text-secondary);
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   .message {
-    padding: 0.75rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
+    padding: var(--space-3);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-4);
   }
+
   .message.error {
     background: var(--error-bg);
     border: 1px solid var(--error-border);
     color: var(--error-text);
   }
+
   section {
     background: var(--bg-secondary);
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
+    padding: var(--space-6);
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-6);
   }
+
   section h2 {
-    margin: 0 0 1rem 0;
-    font-size: 1.25rem;
+    margin: 0 0 var(--space-4) 0;
+    font-size: var(--text-lg);
   }
+
   .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1rem;
-    margin-bottom: 1rem;
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
   }
+
   .stat-card {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
+    border-radius: var(--radius-xl);
+    padding: var(--space-4);
     text-align: center;
   }
+
   .stat-value {
-    font-size: 1.5rem;
-    font-weight: 600;
+    font-size: var(--text-xl);
+    font-weight: var(--font-semibold);
     color: var(--accent);
   }
+
   .stat-label {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
-    margin-top: 0.25rem;
+    margin-top: var(--space-1);
   }
+
   .refresh-btn {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: transparent;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     color: var(--text-primary);
   }
+
   .refresh-btn:hover {
     background: var(--bg-card);
     border-color: var(--accent);
   }
+
   .search-form {
     display: flex;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
   }
+
   .search-form input {
     flex: 1;
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-2) var(--space-3);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 0.875rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
     background: var(--bg-input);
     color: var(--text-primary);
   }
+
   .search-form input:focus {
     outline: none;
     border-color: var(--accent);
   }
+
   .search-form button {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .search-form button:hover:not(:disabled) {
     background: var(--accent-hover);
   }
+
   .search-form button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
   .user-list {
-    margin-top: 1rem;
+    margin-top: var(--space-4);
   }
+
   .no-results {
     color: var(--text-secondary);
     text-align: center;
-    padding: 1rem;
+    padding: var(--space-4);
   }
+
   table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   th, td {
-    padding: 0.75rem 0.5rem;
+    padding: var(--space-3) var(--space-2);
     text-align: left;
     border-bottom: 1px solid var(--border-color);
   }
+
   th {
-    font-weight: 600;
+    font-weight: var(--font-semibold);
     color: var(--text-secondary);
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
+
   .handle {
-    font-weight: 500;
+    font-weight: var(--font-medium);
   }
+
   .email {
     color: var(--text-secondary);
   }
+
   .date {
     color: var(--text-secondary);
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
   }
+
   .badge {
     display: inline-block;
-    padding: 0.125rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
+    padding: 2px var(--space-2);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
   }
+
   .badge.verified {
     background: var(--success-bg);
     color: var(--success-text);
   }
+
   .badge.unverified {
     background: var(--warning-bg);
     color: var(--warning-text);
   }
+
   .badge.deactivated {
     background: var(--error-bg);
     color: var(--error-text);
   }
+
   .load-more {
     display: block;
     width: 100%;
-    padding: 0.75rem;
-    margin-top: 1rem;
+    padding: var(--space-3);
+    margin-top: var(--space-4);
     background: transparent;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     color: var(--text-primary);
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .load-more:hover:not(:disabled) {
     background: var(--bg-card);
     border-color: var(--accent);
   }
+
   .load-more:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
   .section-actions {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .section-actions button {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .section-actions button:hover:not(:disabled) {
     background: var(--accent-hover);
   }
+
   .section-actions button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
   .invite-list {
-    margin-top: 1rem;
+    margin-top: var(--space-4);
   }
+
   .code {
     font-family: monospace;
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
   }
+
   .disabled-row {
     opacity: 0.5;
   }
+
   .action-btn {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
   }
+
   .action-btn.danger {
     background: var(--error-text);
-    color: white;
+    color: var(--text-inverse);
   }
+
   .action-btn.danger:hover {
     background: #900;
   }
+
   .muted {
     color: var(--text-muted);
   }
+
   .clickable {
     cursor: pointer;
   }
+
   .clickable:hover {
     background: var(--bg-card);
   }
+
   .modal-overlay {
     position: fixed;
     top: 0;
···
     justify-content: center;
     z-index: 1000;
   }
+
   .modal {
     background: var(--bg-card);
-    border-radius: 8px;
+    border-radius: var(--radius-xl);
     max-width: 500px;
     width: 90%;
     max-height: 90vh;
     overflow-y: auto;
   }
+
   .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 1.5rem;
+    padding: var(--space-4) var(--space-6);
     border-bottom: 1px solid var(--border-color);
   }
+
   .modal-header h2 {
     margin: 0;
-    font-size: 1.25rem;
+    font-size: var(--text-lg);
   }
+
   .close-btn {
     background: none;
     border: none;
-    font-size: 1.5rem;
+    font-size: var(--text-xl);
     cursor: pointer;
     color: var(--text-secondary);
     padding: 0;
     line-height: 1;
   }
+
   .close-btn:hover {
     color: var(--text-primary);
   }
+
   .modal-body {
-    padding: 1.5rem;
+    padding: var(--space-6);
   }
+
   .user-details {
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: 0.5rem 1rem;
-    margin: 0 0 1.5rem 0;
+    gap: var(--space-2) var(--space-4);
+    margin: 0 0 var(--space-6) 0;
   }
+
   .user-details dt {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--text-secondary);
   }
+
   .user-details dd {
     margin: 0;
   }
+
   .mono {
     font-family: monospace;
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     word-break: break-all;
   }
+
   .modal-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
     flex-wrap: wrap;
   }
+
   .modal-actions .action-btn {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     background: transparent;
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-primary);
   }
+
   .modal-actions .action-btn:hover:not(:disabled) {
     background: var(--bg-secondary);
   }
+
   .modal-actions .action-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
   .modal-actions .action-btn.danger {
     border-color: var(--error-text);
     color: var(--error-text);
   }
+
   .modal-actions .action-btn.danger:hover:not(:disabled) {
     background: var(--error-bg);
   }

frontend/src/routes/AppPasswords.svelte

···
   import { getAuthState } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, type AppPassword, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
+  import { formatDate } from '../lib/date'
   const auth = getAuthState()
   let passwords = $state<AppPassword[]>([])
   let loading = $state(true)
···
   }
   async function handleRevoke(name: string) {
     if (!auth.session) return
-    if (!confirm(`Revoke app password "${name}"? Apps using this password will no longer be able to access your account.`)) {
+    if (!confirm($_('appPasswords.revokeConfirm', { values: { name } }))) {
       return
     }
     revoking = name
···
 </script>
 <div class="page">
   <header>
-    <a href="#/dashboard" class="back">&larr; Dashboard</a>
-    <h1>App Passwords</h1>
+    <a href="#/dashboard" class="back">{$_('common.backToDashboard')}</a>
+    <h1>{$_('appPasswords.title')}</h1>
   </header>
   <p class="description">
-    App passwords let you sign in to third-party apps without giving them your main password.
-    Each app password can be revoked individually.
+    {$_('appPasswords.description')}
   </p>
   {#if error}
     <div class="error">{error}</div>
   {/if}
   {#if createdPassword}
     <div class="created-password">
-      <h3>App Password Created</h3>
-      <p>Copy this password now. You won't be able to see it again.</p>
+      <h3>{$_('appPasswords.created')}</h3>
+      <p>{$_('appPasswords.createdMessage')}</p>
       <div class="password-display">
         <code>{createdPassword.password}</code>
       </div>
-      <p class="password-name">Name: {createdPassword.name}</p>
-      <button onclick={dismissCreated}>Done</button>
+      <p class="password-name">{$_('common.name')}: {createdPassword.name}</p>
+      <button onclick={dismissCreated}>{$_('common.done')}</button>
     </div>
   {/if}
   <section class="create-section">
-    <h2>Create New App Password</h2>
+    <h2>{$_('appPasswords.createNew')}</h2>
     <form onsubmit={handleCreate}>
       <input
         type="text"
         bind:value={newPasswordName}
-        placeholder="App name (e.g., Graysky, Skeets)"
+        placeholder={$_('appPasswords.appNamePlaceholder')}
         disabled={creating}
         required
       />
       <button type="submit" disabled={creating || !newPasswordName.trim()}>
-        {creating ? 'Creating...' : 'Create'}
+        {creating ? $_('appPasswords.creating') : $_('common.create')}
       </button>
     </form>
   </section>
   <section class="list-section">
-    <h2>Your App Passwords</h2>
+    <h2>{$_('appPasswords.yourPasswords')}</h2>
     {#if loading}
-      <p class="empty">Loading...</p>
+      <p class="empty">{$_('common.loading')}</p>
     {:else if passwords.length === 0}
-      <p class="empty">No app passwords yet</p>
+      <p class="empty">{$_('appPasswords.noPasswords')}</p>
     {:else}
       <ul class="password-list">
         {#each passwords as pw}
           <li>
             <div class="password-info">
               <span class="name">{pw.name}</span>
-              <span class="date">Created {new Date(pw.createdAt).toLocaleDateString()}</span>
+              <span class="date">{$_('common.created')} {formatDate(pw.createdAt)}</span>
             </div>
             <button
               class="revoke"
               onclick={() => handleRevoke(pw.name)}
               disabled={revoking === pw.name}
             >
-              {revoking === pw.name ? 'Revoking...' : 'Revoke'}
+              {revoking === pw.name ? $_('appPasswords.revoking') : $_('appPasswords.revoke')}
             </button>
           </li>
         {/each}
···
 </div>
 <style>
   .page {
-    max-width: 600px;
+    max-width: var(--width-md);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   header {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .back {
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .back:hover {
     color: var(--accent);
   }
+
   h1 {
-    margin: 0.5rem 0 0 0;
+    margin: var(--space-2) 0 0 0;
   }
+
   .description {
     color: var(--text-secondary);
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
+
   .error {
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--error-bg);
     border: 1px solid var(--error-border);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--error-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .created-password {
-    padding: 1.5rem;
+    padding: var(--space-6);
     background: var(--success-bg);
     border: 1px solid var(--success-border);
-    border-radius: 8px;
-    margin-bottom: 2rem;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-7);
   }
+
   .created-password h3 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-2) 0;
     color: var(--success-text);
   }
+
   .password-display {
     background: var(--bg-card);
-    padding: 1rem;
-    border-radius: 4px;
-    margin: 1rem 0;
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    margin: var(--space-4) 0;
   }
+
   .password-display code {
-    font-size: 1.25rem;
-    font-family: monospace;
+    font-size: var(--text-xl);
+    font-family: ui-monospace, monospace;
     word-break: break-all;
   }
+
   .password-name {
     color: var(--text-secondary);
-    font-size: 0.875rem;
-    margin-bottom: 1rem;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-4);
   }
+
   section {
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
+
   section h2 {
-    font-size: 1.125rem;
-    margin: 0 0 1rem 0;
+    font-size: var(--text-lg);
+    margin: 0 0 var(--space-4) 0;
   }
+
   .create-section form {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
+
   .create-section input {
     flex: 1;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
   }
-  .create-section input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-  .create-section button {
-    padding: 0.75rem 1.5rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .create-section button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-  .create-section button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
+
   .password-list {
     list-style: none;
     padding: 0;
     margin: 0;
   }
+
   .password-list li {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem;
+    padding: var(--space-4);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    margin-bottom: 0.5rem;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-2);
     background: var(--bg-card);
   }
+
   .password-info {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
+
   .name {
-    font-weight: 500;
+    font-weight: var(--font-medium);
   }
+
   .date {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
   }
+
   .revoke {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: transparent;
     border: 1px solid var(--error-text);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--error-text);
     cursor: pointer;
   }
+
   .revoke:hover:not(:disabled) {
     background: var(--error-bg);
   }
+
   .revoke:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
   .empty {
     color: var(--text-secondary);
     text-align: center;
-    padding: 2rem;
+    padding: var(--space-7);
   }
 </style>

frontend/src/routes/Dashboard.svelte

···
 <script lang="ts">
   import { getAuthState, logout, switchAccount } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
+
   const auth = getAuthState()
   let dropdownOpen = $state(false)
   let switching = $state(false)
+
   $effect(() => {
     if (!auth.loading && !auth.session) {
       navigate('/login')
     }
   })
+
   async function handleLogout() {
     await logout()
     navigate('/login')
   }
+
   async function handleSwitchAccount(did: string) {
     switching = true
     dropdownOpen = false
···
       switching = false
     }
   }
+
   function toggleDropdown() {
     dropdownOpen = !dropdownOpen
   }
+
   function closeDropdown(e: MouseEvent) {
     const target = e.target as HTMLElement
     if (!target.closest('.account-dropdown')) {
       dropdownOpen = false
     }
   }
+
   $effect(() => {
     if (dropdownOpen) {
       document.addEventListener('click', closeDropdown)
       return () => document.removeEventListener('click', closeDropdown)
     }
   })
+
   let otherAccounts = $derived(
     auth.savedAccounts.filter(a => a.did !== auth.session?.did)
   )
 </script>
+
 {#if auth.session}
   <div class="dashboard">
     <header>
-      <h1>Dashboard</h1>
+      <h1>{$_('dashboard.title')}</h1>
       <div class="account-dropdown">
         <button class="account-trigger" onclick={toggleDropdown} disabled={switching}>
           <span class="account-handle">@{auth.session.handle}</span>
···
           <div class="dropdown-menu">
             {#if otherAccounts.length > 0}
               <div class="dropdown-section">
-                <span class="dropdown-label">Switch Account</span>
+                <span class="dropdown-label">{$_('dashboard.switchAccount')}</span>
                 {#each otherAccounts as account}
-                  <button
-                    type="button"
-                    class="dropdown-item"
-                    onclick={() => handleSwitchAccount(account.did)}
-                  >
+                  <button type="button" class="dropdown-item" onclick={() => handleSwitchAccount(account.did)}>
                     @{account.handle}
                   </button>
                 {/each}
               </div>
               <div class="dropdown-divider"></div>
             {/if}
-            <button
-              type="button"
-              class="dropdown-item"
-              onclick={() => { dropdownOpen = false; navigate('/login') }}
-            >
-              Add another account
+            <button type="button" class="dropdown-item" onclick={() => { dropdownOpen = false; navigate('/login') }}>
+              {$_('dashboard.addAnotherAccount')}
             </button>
             <div class="dropdown-divider"></div>
             <button type="button" class="dropdown-item logout-item" onclick={handleLogout}>
-              Sign out @{auth.session.handle}
+              {$_('dashboard.signOut', { values: { handle: auth.session.handle } })}
             </button>
           </div>
         {/if}
       </div>
     </header>
+
     {#if auth.session.status === 'deactivated' || auth.session.active === false}
       <div class="deactivated-banner">
-        <strong>Account Deactivated</strong>
-        <p>Your account is currently deactivated. This typically happens during account migration. Some features may be limited until your account is reactivated.</p>
+        <strong>{$_('dashboard.deactivatedTitle')}</strong>
+        <p>{$_('dashboard.deactivatedMessage')}</p>
       </div>
     {/if}
+
     <section class="account-overview">
-      <h2>Account Overview</h2>
+      <h2>{$_('dashboard.accountOverview')}</h2>
       <dl>
-        <dt>Handle</dt>
+        <dt>{$_('dashboard.handle')}</dt>
         <dd>
           @{auth.session.handle}
           {#if auth.session.isAdmin}
-            <span class="badge admin">Admin</span>
+            <span class="badge admin">{$_('dashboard.admin')}</span>
           {/if}
           {#if auth.session.status === 'deactivated' || auth.session.active === false}
-            <span class="badge deactivated">Deactivated</span>
+            <span class="badge deactivated">{$_('dashboard.deactivated')}</span>
           {/if}
         </dd>
-        <dt>DID</dt>
+        <dt>{$_('dashboard.did')}</dt>
         <dd class="mono">{auth.session.did}</dd>
         {#if auth.session.preferredChannel}
-          <dt>Primary Contact</dt>
+          <dt>{$_('dashboard.primaryContact')}</dt>
           <dd>
             {#if auth.session.preferredChannel === 'email'}
-              {auth.session.email || 'Email'}
+              {auth.session.email || $_('register.email')}
             {:else if auth.session.preferredChannel === 'discord'}
-              Discord
+              {$_('register.discord')}
             {:else if auth.session.preferredChannel === 'telegram'}
-              Telegram
+              {$_('register.telegram')}
             {:else if auth.session.preferredChannel === 'signal'}
-              Signal
+              {$_('register.signal')}
             {:else}
               {auth.session.preferredChannel}
             {/if}
             {#if auth.session.preferredChannelVerified}
-              <span class="badge success">Verified</span>
+              <span class="badge success">{$_('dashboard.verified')}</span>
             {:else}
-              <span class="badge warning">Unverified</span>
+              <span class="badge warning">{$_('dashboard.unverified')}</span>
             {/if}
           </dd>
         {:else if auth.session.email}
-          <dt>Email</dt>
+          <dt>{$_('register.email')}</dt>
           <dd>
             {auth.session.email}
             {#if auth.session.emailConfirmed}
-              <span class="badge success">Verified</span>
+              <span class="badge success">{$_('dashboard.verified')}</span>
             {:else}
-              <span class="badge warning">Unverified</span>
+              <span class="badge warning">{$_('dashboard.unverified')}</span>
             {/if}
           </dd>
         {/if}
       </dl>
     </section>
+
     <nav class="nav-grid">
       <a href="#/app-passwords" class="nav-card">
-        <h3>App Passwords</h3>
-        <p>Manage passwords for third-party apps</p>
+        <h3>{$_('dashboard.navAppPasswords')}</h3>
+        <p>{$_('dashboard.navAppPasswordsDesc')}</p>
       </a>
       <a href="#/sessions" class="nav-card">
-        <h3>Active Sessions</h3>
-        <p>View and manage your login sessions</p>
+        <h3>{$_('dashboard.navSessions')}</h3>
+        <p>{$_('dashboard.navSessionsDesc')}</p>
       </a>
       <a href="#/invite-codes" class="nav-card">
-        <h3>Invite Codes</h3>
-        <p>View and create invite codes</p>
+        <h3>{$_('dashboard.navInviteCodes')}</h3>
+        <p>{$_('dashboard.navInviteCodesDesc')}</p>
       </a>
       <a href="#/settings" class="nav-card">
-        <h3>Account Settings</h3>
-        <p>Email, password, handle, and more</p>
+        <h3>{$_('dashboard.navSettings')}</h3>
+        <p>{$_('dashboard.navSettingsDesc')}</p>
       </a>
       <a href="#/security" class="nav-card">
-        <h3>Security</h3>
-        <p>Two-factor authentication</p>
+        <h3>{$_('dashboard.navSecurity')}</h3>
+        <p>{$_('dashboard.navSecurityDesc')}</p>
       </a>
-      <a href="#/notifications" class="nav-card">
-        <h3>Notification Preferences</h3>
-        <p>Discord, Telegram, Signal channels</p>
+      <a href="#/comms" class="nav-card">
+        <h3>{$_('dashboard.navComms')}</h3>
+        <p>{$_('dashboard.navCommsDesc')}</p>
       </a>
       <a href="#/repo" class="nav-card">
-        <h3>Repository Explorer</h3>
-        <p>Browse and manage raw AT Protocol records</p>
+        <h3>{$_('dashboard.navRepo')}</h3>
+        <p>{$_('dashboard.navRepoDesc')}</p>
       </a>
       {#if auth.session.isAdmin}
         <a href="#/admin" class="nav-card admin-card">
-          <h3>Admin Panel</h3>
-          <p>Server stats and admin operations</p>
+          <h3>{$_('dashboard.navAdmin')}</h3>
+          <p>{$_('dashboard.navAdminDesc')}</p>
         </a>
       {/if}
     </nav>
   </div>
 {:else if auth.loading}
-  <div class="loading">Loading...</div>
+  <div class="loading">{$_('common.loading')}</div>
 {/if}
+
 <style>
   .dashboard {
-    max-width: 800px;
+    max-width: var(--width-lg);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
+
   header h1 {
     margin: 0;
   }
+
   .account-dropdown {
     position: relative;
   }
+
   .account-trigger {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-5);
     background: transparent;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
     cursor: pointer;
     color: var(--text-primary);
   }
+
   .account-trigger:hover:not(:disabled) {
     background: var(--bg-secondary);
   }
+
   .account-trigger:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
   .account-trigger .account-handle {
-    font-weight: 500;
+    font-weight: var(--font-medium);
   }
+
   .dropdown-arrow {
     font-size: 0.625rem;
     color: var(--text-secondary);
   }
+
   .dropdown-menu {
     position: absolute;
     top: 100%;
     right: 0;
-    margin-top: 0.25rem;
+    margin-top: var(--space-2);
     min-width: 200px;
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
     z-index: 100;
     overflow: hidden;
   }
+
   .dropdown-section {
-    padding: 0.5rem 0;
+    padding: var(--space-3) 0;
   }
+
   .dropdown-label {
     display: block;
-    padding: 0.25rem 1rem;
-    font-size: 0.75rem;
+    padding: var(--space-2) var(--space-5);
+    font-size: var(--text-xs);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
+
   .dropdown-item {
     display: block;
     width: 100%;
-    padding: 0.75rem 1rem;
+    padding: var(--space-4) var(--space-5);
     background: transparent;
     border: none;
     text-align: left;
     cursor: pointer;
     color: var(--text-primary);
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .dropdown-item:hover {
     background: var(--bg-secondary);
   }
+
   .dropdown-item.logout-item {
     color: var(--error-text);
   }
+
   .dropdown-divider {
     height: 1px;
     background: var(--border-color);
     margin: 0;
   }
+
   section {
     background: var(--bg-secondary);
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-bottom: 2rem;
+    padding: var(--space-6);
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-7);
   }
+
   section h2 {
-    margin: 0 0 1rem 0;
-    font-size: 1.25rem;
+    margin: 0 0 var(--space-4) 0;
+    font-size: var(--text-xl);
   }
+
   dl {
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: 0.5rem 1rem;
+    gap: var(--space-3) var(--space-5);
     margin: 0;
   }
+
   dt {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--text-secondary);
   }
+
   dd {
     margin: 0;
   }
+
   .mono {
-    font-family: monospace;
-    font-size: 0.875rem;
+    font-family: ui-monospace, monospace;
+    font-size: var(--text-sm);
     word-break: break-all;
   }
+
   .badge {
     display: inline-block;
-    padding: 0.125rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    margin-left: 0.5rem;
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
+    margin-left: var(--space-3);
   }
+
   .badge.success {
     background: var(--success-bg);
     color: var(--success-text);
   }
+
   .badge.warning {
     background: var(--warning-bg);
     color: var(--warning-text);
   }
+
   .badge.admin {
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
   }
+
   .badge.deactivated {
     background: var(--warning-bg);
     color: var(--warning-text);
-    border: 1px solid #d4a03c;
+    border: 1px solid var(--warning-border);
   }
+
   .nav-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
+    gap: var(--space-4);
   }
+
   .nav-card {
     display: block;
-    padding: 1.5rem;
+    padding: var(--space-6);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: var(--radius-xl);
     text-decoration: none;
     color: inherit;
-    transition: border-color 0.15s, box-shadow 0.15s;
+    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
   }
+
   .nav-card:hover {
     border-color: var(--accent);
-    box-shadow: 0 2px 8px rgba(77, 166, 255, 0.15);
+    box-shadow: 0 2px 8px var(--accent-muted);
   }
+
   .nav-card h3 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-3) 0;
     color: var(--accent);
   }
+
   .nav-card p {
     margin: 0;
     color: var(--text-secondary);
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .nav-card.admin-card {
     border-color: var(--accent);
-    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(77, 166, 255, 0.05) 100%);
+    background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent-muted) 100%);
   }
+
   .nav-card.admin-card:hover {
-    box-shadow: 0 2px 12px rgba(77, 166, 255, 0.25);
+    box-shadow: 0 2px 12px var(--accent-muted);
   }
+
   .loading {
     text-align: center;
-    padding: 4rem;
+    padding: var(--space-9);
     color: var(--text-secondary);
   }
+
   .deactivated-banner {
     background: var(--warning-bg);
-    border: 1px solid #d4a03c;
-    border-radius: 8px;
-    padding: 1rem 1.5rem;
-    margin-bottom: 2rem;
+    border: 1px solid var(--warning-border);
+    border-radius: var(--radius-xl);
+    padding: var(--space-5) var(--space-6);
+    margin-bottom: var(--space-7);
   }
+
   .deactivated-banner strong {
     color: var(--warning-text);
-    font-size: 1rem;
+    font-size: var(--text-base);
   }
+
   .deactivated-banner p {
-    margin: 0.5rem 0 0 0;
+    margin: var(--space-3) 0 0 0;
     color: var(--warning-text);
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
 </style>

frontend/src/routes/Home.svelte

···
+<script lang="ts">
+  import { _ } from '../lib/i18n'
+  import { getAuthState } from '../lib/auth.svelte'
+  const auth = getAuthState()
+</script>
+<div class="home">
+  <header class="hero">
+    <h1>Tranquil PDS</h1>
+    <p class="tagline">A Personal Data Server for the AT Protocol</p>
+  </header>
+  <section>
+    <h2>What is a PDS?</h2>
+    <p>
+      Bluesky runs on a federated protocol called AT Protocol. Your account lives on a PDS,
+      a server that stores your posts, profile, follows, and cryptographic keys. Bluesky hosts
+      one for you at bsky.social, but you can run your own. Self-hosting means you control your
+      data; you're not dependent on any company's servers, and your account + data is actually yours.
+    </p>
+  </section>
+  <section>
+    <h2>What's different about Tranquil?</h2>
+    <p>
+      This software isn't an afterthought by a company with limited resources.
+      It is a superset of the reference PDS, including:
+    </p>
+    <ul>
+      <li>Passkeys and 2FA (WebAuthn/FIDO2, TOTP, backup codes, trusted devices)</li>
+      <li>did:web support (PDS-hosted subdomains or bring-your-own)</li>
+      <li>Multi-channel notifications (email, discord, telegram, signal)</li>
+      <li>Granular OAuth scopes with a consent UI</li>
+      <li>Built-in web UI for account management, repo browsing, and admin</li>
+    </ul>
+    <p>
+      Full compatibility with Bluesky's reference PDS: same endpoints, same behavior,
+      same client compatibility. Everything works.
+    </p>
+  </section>
+  <div class="cta">
+    {#if auth.session}
+      <a href="#/dashboard" class="btn">@{auth.session.handle}</a>
+    {:else}
+      <a href="#/login" class="btn">{$_('login.button')}</a>
+      <a href="#/register" class="btn secondary">{$_('login.createAccount')}</a>
+    {/if}
+  </div>
+  <footer>
+    <a href="https://tangled.org/lewis.moe/bspds-sandbox" target="_blank" rel="noopener">Source code</a>
+  </footer>
+</div>
+<style>
+  .home {
+    max-width: var(--width-md);
+    margin: 0 auto;
+    padding: var(--space-7);
+  }
+
+  .hero {
+    text-align: center;
+    margin-bottom: var(--space-8);
+    padding-top: var(--space-7);
+  }
+
+  .hero h1 {
+    font-size: var(--text-4xl);
+    margin-bottom: var(--space-3);
+  }
+
+  .tagline {
+    color: var(--text-secondary);
+    font-size: var(--text-xl);
+  }
+
+  section {
+    margin-bottom: var(--space-7);
+  }
+
+  h2 {
+    margin-bottom: var(--space-4);
+  }
+
+  p {
+    color: var(--text-secondary);
+    margin-bottom: var(--space-4);
+  }
+
+  ul {
+    color: var(--text-secondary);
+    margin: 0 0 var(--space-4) 0;
+    padding-left: var(--space-6);
+    line-height: var(--leading-relaxed);
+  }
+
+  li {
+    margin-bottom: var(--space-2);
+  }
+
+  .cta {
+    display: flex;
+    gap: var(--space-4);
+    justify-content: center;
+    margin: var(--space-8) 0;
+  }
+
+  .btn {
+    display: inline-block;
+    padding: var(--space-4) var(--space-7);
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
+    font-weight: var(--font-medium);
+    text-decoration: none;
+    transition: background var(--transition-normal), border-color var(--transition-normal);
+    background: var(--accent);
+    color: var(--text-inverse);
+  }
+
+  .btn:hover {
+    background: var(--accent-hover);
+    text-decoration: none;
+  }
+
+  .btn.secondary {
+    background: transparent;
+    color: var(--accent);
+    border: 1px solid var(--accent);
+  }
+
+  .btn.secondary:hover {
+    background: var(--accent);
+    color: var(--text-inverse);
+  }
+
+  footer {
+    text-align: center;
+    padding-top: var(--space-7);
+    border-top: 1px solid var(--border-color);
+  }
+
+  footer a {
+    color: var(--text-muted);
+    font-size: var(--text-sm);
+  }
+
+  footer a:hover {
+    color: var(--accent);
+  }
+</style>

frontend/src/routes/InviteCodes.svelte

···
   import { getAuthState } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, type InviteCode, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
+  import { formatDate } from '../lib/date'
   const auth = getAuthState()
   let codes = $state<InviteCode[]>([])
   let loading = $state(true)
···
 </script>
 <div class="page">
   <header>
-    <a href="#/dashboard" class="back">&larr; Dashboard</a>
-    <h1>Invite Codes</h1>
+    <a href="#/dashboard" class="back">{$_('common.backToDashboard')}</a>
+    <h1>{$_('inviteCodes.title')}</h1>
   </header>
   <p class="description">
-    Invite codes let you invite friends to join. Each code can be used once.
+    {$_('inviteCodes.description')}
   </p>
   {#if error}
     <div class="error">{error}</div>
   {/if}
   {#if createdCode}
     <div class="created-code">
-      <h3>Invite Code Created</h3>
+      <h3>{$_('inviteCodes.created')}</h3>
       <div class="code-display">
         <code>{createdCode}</code>
-        <button class="copy" onclick={() => copyCode(createdCode!)}>Copy</button>
+        <button class="copy" onclick={() => copyCode(createdCode!)}>{$_('inviteCodes.copy')}</button>
       </div>
-      <button onclick={dismissCreated}>Done</button>
+      <button onclick={dismissCreated}>{$_('common.done')}</button>
     </div>
   {/if}
   <section class="create-section">
     <button onclick={handleCreate} disabled={creating}>
-      {creating ? 'Creating...' : 'Create New Invite Code'}
+      {creating ? $_('inviteCodes.creating') : $_('inviteCodes.createNew')}
     </button>
   </section>
   <section class="list-section">
-    <h2>Your Invite Codes</h2>
+    <h2>{$_('inviteCodes.yourCodes')}</h2>
     {#if loading}
-      <p class="empty">Loading...</p>
+      <p class="empty">{$_('common.loading')}</p>
     {:else if codes.length === 0}
-      <p class="empty">No invite codes yet</p>
+      <p class="empty">{$_('inviteCodes.noCodes')}</p>
     {:else}
       <ul class="code-list">
         {#each codes as code}
           <li class:disabled={code.disabled} class:used={code.uses.length > 0 && code.available === 0}>
             <div class="code-main">
               <code>{code.code}</code>
-              <button class="copy-small" onclick={() => copyCode(code.code)} title="Copy">
-                Copy
+              <button class="copy-small" onclick={() => copyCode(code.code)} title={$_('inviteCodes.copy')}>
+                {$_('inviteCodes.copy')}
               </button>
             </div>
             <div class="code-meta">
-              <span class="date">Created {new Date(code.createdAt).toLocaleDateString()}</span>
+              <span class="date">{$_('inviteCodes.createdOn', { values: { date: formatDate(code.createdAt) } })}</span>
               {#if code.disabled}
-                <span class="status disabled">Disabled</span>
+                <span class="status disabled">{$_('inviteCodes.disabled')}</span>
               {:else if code.uses.length > 0}
-                <span class="status used">Used by @{code.uses[0].usedBy.split(':').pop()}</span>
+                <span class="status used">{$_('inviteCodes.used', { values: { handle: code.uses[0].usedBy.split(':').pop() } })}</span>
               {:else}
-                <span class="status available">Available</span>
+                <span class="status available">{$_('inviteCodes.available')}</span>
               {/if}
             </div>
           </li>
···
 </div>
 <style>
   .page {
-    max-width: 600px;
+    max-width: var(--width-md);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   header {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .back {
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .back:hover {
     color: var(--accent);
   }
+
   h1 {
-    margin: 0.5rem 0 0 0;
+    margin: var(--space-2) 0 0 0;
   }
+
   .description {
     color: var(--text-secondary);
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
+
   .error {
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--error-bg);
     border: 1px solid var(--error-border);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--error-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .created-code {
-    padding: 1.5rem;
+    padding: var(--space-6);
     background: var(--success-bg);
     border: 1px solid var(--success-border);
-    border-radius: 8px;
-    margin-bottom: 2rem;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-7);
   }
+
   .created-code h3 {
-    margin: 0 0 1rem 0;
+    margin: 0 0 var(--space-4) 0;
     color: var(--success-text);
   }
+
   .code-display {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: var(--space-4);
     background: var(--bg-card);
-    padding: 1rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-4);
   }
+
   .code-display code {
-    font-size: 1.125rem;
-    font-family: monospace;
+    font-size: var(--text-lg);
+    font-family: ui-monospace, monospace;
     flex: 1;
   }
+
   .copy {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
   }
+
   .copy:hover {
     background: var(--accent-hover);
   }
+
   .create-section {
-    margin-bottom: 2rem;
-  }
-  .create-section button {
-    padding: 0.75rem 1.5rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 1rem;
-  }
-  .create-section button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-  .create-section button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+    margin-bottom: var(--space-7);
   }
+
   section h2 {
-    font-size: 1.125rem;
-    margin: 0 0 1rem 0;
+    font-size: var(--text-lg);
+    margin: 0 0 var(--space-4) 0;
   }
+
   .code-list {
     list-style: none;
     padding: 0;
     margin: 0;
   }
+
   .code-list li {
-    padding: 1rem;
+    padding: var(--space-4);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    margin-bottom: 0.5rem;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-2);
     background: var(--bg-card);
   }
+
   .code-list li.disabled {
     opacity: 0.6;
   }
+
   .code-list li.used {
     background: var(--bg-secondary);
   }
+
   .code-main {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
+    gap: var(--space-2);
+    margin-bottom: var(--space-2);
   }
+
   .code-main code {
-    font-family: monospace;
-    font-size: 0.9rem;
+    font-family: ui-monospace, monospace;
+    font-size: var(--text-sm);
   }
+
   .copy-small {
-    padding: 0.25rem 0.5rem;
+    padding: var(--space-1) var(--space-2);
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 0.75rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
     cursor: pointer;
     color: var(--text-primary);
   }
+
   .copy-small:hover {
     background: var(--bg-input-disabled);
   }
+
   .code-meta {
     display: flex;
-    gap: 1rem;
-    font-size: 0.875rem;
+    gap: var(--space-4);
+    font-size: var(--text-sm);
   }
+
   .date {
     color: var(--text-secondary);
   }
+
   .status {
-    padding: 0.125rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
   }
+
   .status.available {
     background: var(--success-bg);
     color: var(--success-text);
   }
+
   .status.used {
     background: var(--bg-secondary);
     color: var(--text-secondary);
   }
+
   .status.disabled {
     background: var(--error-bg);
     color: var(--error-text);
   }
+
   .empty {
     color: var(--text-secondary);
     text-align: center;
-    padding: 2rem;
+    padding: var(--space-7);
   }
 </style>

frontend/src/routes/Login.svelte

···
 <script lang="ts">
   import { loginWithOAuth, confirmSignup, resendVerification, getAuthState, switchAccount, forgetAccount } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
+
   let submitting = $state(false)
   let pendingVerification = $state<{ did: string } | null>(null)
   let verificationCode = $state('')
···
   let resendMessage = $state<string | null>(null)
   let showNewLogin = $state(false)
   const auth = getAuthState()
+
   async function handleSwitchAccount(did: string) {
     submitting = true
     try {
···
       submitting = false
     }
   }
+
   function handleForgetAccount(did: string, e: Event) {
     e.stopPropagation()
     forgetAccount(did)
   }
+
   async function handleOAuthLogin() {
     submitting = true
     try {
···
       submitting = false
     }
   }
+
   async function handleVerification(e: Event) {
     e.preventDefault()
     if (!pendingVerification || !verificationCode.trim()) return
···
       submitting = false
     }
   }
+
   async function handleResendCode() {
     if (!pendingVerification || resendingCode) return
     resendingCode = true
     resendMessage = null
     try {
       await resendVerification(pendingVerification.did)
-      resendMessage = 'Verification code resent!'
+      resendMessage = $_('verification.resent')
     } catch {
       resendMessage = null
     } finally {
       resendingCode = false
     }
   }
+
   function backToLogin() {
     pendingVerification = null
     verificationCode = ''
     resendMessage = null
   }
 </script>
-<div class="login-container">
+
+<div class="login-page">
   {#if auth.error}
-    <div class="error">{auth.error}</div>
+    <div class="message error">{auth.error}</div>
   {/if}
+
   {#if pendingVerification}
-    <h1>Verify Your Account</h1>
-    <p class="subtitle">
-      Your account needs verification. Enter the code sent to your verification method.
-    </p>
+    <h1>{$_('verification.title')}</h1>
+    <p class="subtitle">{$_('verification.subtitle')}</p>
+
     {#if resendMessage}
-      <div class="success">{resendMessage}</div>
+      <div class="message success">{resendMessage}</div>
     {/if}
+
     <form onsubmit={(e) => { e.preventDefault(); handleVerification(e); }}>
       <div class="field">
-        <label for="verification-code">Verification Code</label>
+        <label for="verification-code">{$_('verification.codeLabel')}</label>
         <input
           id="verification-code"
           type="text"
           bind:value={verificationCode}
-          placeholder="Enter 6-digit code"
+          placeholder={$_('verification.codePlaceholder')}
           disabled={submitting}
           required
           maxlength="6"
···
           autocomplete="one-time-code"
         />
       </div>
-      <button type="submit" disabled={submitting || !verificationCode.trim()}>
-        {submitting ? 'Verifying...' : 'Verify Account'}
-      </button>
-      <button type="button" class="secondary" onclick={handleResendCode} disabled={resendingCode}>
-        {resendingCode ? 'Resending...' : 'Resend Code'}
-      </button>
-      <button type="button" class="tertiary" onclick={backToLogin}>
-        Back to Login
-      </button>
+      <div class="actions">
+        <button type="submit" disabled={submitting || !verificationCode.trim()}>
+          {submitting ? $_('verification.verifying') : $_('verification.verifyButton')}
+        </button>
+        <button type="button" class="secondary" onclick={handleResendCode} disabled={resendingCode}>
+          {resendingCode ? $_('verification.resending') : $_('verification.resendButton')}
+        </button>
+        <button type="button" class="tertiary" onclick={backToLogin}>
+          {$_('verification.backToLogin')}
+        </button>
+      </div>
     </form>
+
   {:else if auth.savedAccounts.length > 0 && !showNewLogin}
-    <h1>Sign In</h1>
-    <p class="subtitle">Choose an account</p>
+    <h1>{$_('login.title')}</h1>
+    <p class="subtitle">{$_('login.chooseAccount')}</p>
+
     <div class="saved-accounts">
       {#each auth.savedAccounts as account}
         <div
···
             type="button"
             class="forget-btn"
             onclick={(e) => handleForgetAccount(account.did, e)}
-            title="Remove from saved accounts"
+            title={$_('login.removeAccount')}
           >
-            ×
+            &times;
           </button>
         </div>
       {/each}
     </div>
-    <button type="button" class="secondary add-account" onclick={() => showNewLogin = true}>
-      Sign in to another account
+
+    <button type="button" class="secondary full-width" onclick={() => showNewLogin = true}>
+      {$_('login.signInToAnother')}
     </button>
-    <p class="register-link">
-      Don't have an account? <a href="#/register">Create one</a>
+
+    <p class="link-text">
+      {$_('login.noAccount')} <a href="#/register">{$_('login.createAcount')}</a>
     </p>
+
   {:else}
-    <h1>Sign In</h1>
-    <p class="subtitle">Sign in to manage your PDS account</p>
+    <h1>{$_('login.title')}</h1>
+    <p class="subtitle">{$_('login.subtitle')}</p>
+
     {#if auth.savedAccounts.length > 0}
       <button type="button" class="tertiary back-btn" onclick={() => showNewLogin = false}>
-        ← Back to saved accounts
+        {$_('login.backToSaved')}
       </button>
     {/if}
+
     <button type="button" class="oauth-btn" onclick={handleOAuthLogin} disabled={submitting || auth.loading}>
-      {submitting ? 'Redirecting...' : 'Sign In'}
+      {submitting ? $_('login.redirecting') : $_('login.button')}
     </button>
-    <p class="forgot-link">
-      <a href="#/reset-password">Forgot password?</a> &middot; <a href="#/request-passkey-recovery">Lost passkey?</a>
+
+    <p class="forgot-links">
+      <a href="#/reset-password">{$_('login.forgotPassword')}</a>
+      <span class="separator">&middot;</span>
+      <a href="#/request-passkey-recovery">{$_('login.lostPasskey')}</a>
     </p>
-    <p class="register-link">
-      Don't have an account? <a href="#/register">Create one</a>
+
+    <p class="link-text">
+      {$_('login.noAccount')} <a href="#/register">{$_('login.createAccount')}</a>
     </p>
   {/if}
 </div>
+
 <style>
-  .login-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+  .login-page {
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
+
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-3) 0;
   }
+
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
+
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
   }
-  .field {
+
+  .actions {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-3);
+    margin-top: var(--space-3);
   }
-  label {
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-  input {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
-  }
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-  button {
-    padding: 0.75rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    margin-top: 0.5rem;
-  }
-  button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  button.secondary {
-    background: transparent;
-    color: var(--accent);
-    border: 1px solid var(--accent);
-  }
-  button.secondary:hover:not(:disabled) {
-    background: var(--accent);
-    color: white;
-  }
-  button.tertiary {
-    background: transparent;
-    color: var(--text-secondary);
-    border: none;
-  }
-  button.tertiary:hover:not(:disabled) {
-    color: var(--text-primary);
-  }
+
   .oauth-btn {
     width: 100%;
-    padding: 1rem;
-    font-size: 1.125rem;
-    font-weight: 500;
+    padding: var(--space-5);
+    font-size: var(--text-lg);
   }
-  .error {
-    padding: 0.75rem;
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: 4px;
-    color: var(--error-text);
-  }
-  .success {
-    padding: 0.75rem;
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    border-radius: 4px;
-    color: var(--success-text);
-  }
-  .forgot-link {
+
+  .forgot-links {
     text-align: center;
-    margin-top: 1rem;
-    margin-bottom: 0;
+    margin-top: var(--space-5);
     color: var(--text-secondary);
   }
-  .forgot-link a {
+
+  .forgot-links a {
     color: var(--accent);
   }
-  .register-link {
+
+  .separator {
+    margin: 0 var(--space-2);
+  }
+
+  .link-text {
     text-align: center;
-    margin-top: 0.5rem;
+    margin-top: var(--space-4);
     color: var(--text-secondary);
   }
-  .register-link a {
+
+  .link-text a {
     color: var(--accent);
   }
+
   .saved-accounts {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
+    gap: var(--space-3);
+    margin-bottom: var(--space-5);
   }
+
   .account-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1rem;
+    padding: var(--space-5);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: var(--radius-xl);
     cursor: pointer;
-    text-align: left;
-    width: 100%;
-    transition: border-color 0.15s, box-shadow 0.15s;
+    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
   }
+
   .account-item:hover:not(.disabled) {
     border-color: var(--accent);
-    box-shadow: 0 2px 8px rgba(77, 166, 255, 0.15);
+    box-shadow: var(--shadow-md);
   }
+
   .account-item.disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
   .account-info {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
+
   .account-handle {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--text-primary);
   }
+
   .account-did {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-muted);
-    font-family: monospace;
+    font-family: ui-monospace, monospace;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 250px;
   }
+
   .forget-btn {
-    padding: 0.25rem 0.5rem;
+    padding: var(--space-2) var(--space-3);
     background: transparent;
     border: none;
     color: var(--text-muted);
     cursor: pointer;
-    font-size: 1.25rem;
+    font-size: var(--text-xl);
     line-height: 1;
-    border-radius: 4px;
-    margin: 0;
+    border-radius: var(--radius-md);
   }
+
   .forget-btn:hover {
     background: var(--error-bg);
     color: var(--error-text);
   }
-  .add-account {
+
+  .full-width {
     width: 100%;
-    margin-bottom: 1rem;
   }
+
   .back-btn {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-5);
     padding: 0;
   }
 </style>

frontend/src/routes/Notifications.svelte frontend/src/routes/Comms.svelte

···
 <script lang="ts">
-  import { getAuthState } from '../lib/auth.svelte'
+  import { getAuthState, refreshSession } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
+  import { formatDateTime } from '../lib/date'
   const auth = getAuthState()
   let loading = $state(true)
   let saving = $state(false)
···
   let verificationSuccess = $state<string | null>(null)
   let historyLoading = $state(false)
   let historyError = $state<string | null>(null)
-  let notifications = $state<Array<{
+  let messages = $state<Array<{
     createdAt: string
     channel: string
     notificationType: string
···
         telegramUsername: telegramUsername || undefined,
         signalNumber: signalNumber || undefined,
       })
-      success = 'Notification preferences saved'
+      await refreshSession()
+      success = $_('comms.preferencesSaved')
       await loadPrefs()
     } catch (e) {
       error = e instanceof ApiError ? e.message : 'Failed to save preferences'
···
     verificationSuccess = null
     try {
       await api.confirmChannelVerification(auth.session.accessJwt, channel, verificationCode)
-      verificationSuccess = `${channel} verified successfully`
+      await refreshSession()
+      verificationSuccess = $_('comms.verifiedSuccess', { values: { channel } })
       verificationCode = ''
       verifyingChannel = null
       await loadPrefs()
···
     historyError = null
     try {
       const result = await api.getNotificationHistory(auth.session.accessJwt)
-      notifications = result.notifications
+      messages = result.notifications
       showHistory = true
     } catch (e) {
       historyError = e instanceof ApiError ? e.message : 'Failed to load notification history'
···
     }
   }
   function formatDate(dateStr: string): string {
-    return new Date(dateStr).toLocaleString()
+    return formatDateTime(dateStr)
   }
-  const channels = [
-    { id: 'email', name: 'Email', description: 'Receive notifications via email' },
-    { id: 'discord', name: 'Discord', description: 'Receive notifications via Discord DM' },
-    { id: 'telegram', name: 'Telegram', description: 'Receive notifications via Telegram' },
-    { id: 'signal', name: 'Signal', description: 'Receive notifications via Signal' },
-  ]
+  const channels = ['email', 'discord', 'telegram', 'signal']
+  function getChannelName(id: string): string {
+    switch (id) {
+      case 'email': return $_('register.email')
+      case 'discord': return $_('register.discord')
+      case 'telegram': return $_('register.telegram')
+      case 'signal': return $_('register.signal')
+      default: return id
+    }
+  }
+  function getChannelDescription(id: string): string {
+    switch (id) {
+      case 'email': return $_('comms.emailVia')
+      case 'discord': return $_('comms.discordVia')
+      case 'telegram': return $_('comms.telegramVia')
+      case 'signal': return $_('comms.signalVia')
+      default: return ''
+    }
+  }
   function canSelectChannel(channelId: string): boolean {
     if (channelId === 'email') return true
     if (channelId === 'discord') return !!discordId
···
 </script>
 <div class="page">
   <header>
-    <a href="#/dashboard" class="back">&larr; Dashboard</a>
-    <h1>Notification Preferences</h1>
+    <a href="#/dashboard" class="back">{$_('common.backToDashboard')}</a>
+    <h1>{$_('comms.title')}</h1>
   </header>
   <p class="description">
-    Choose how you want to receive important notifications like password resets,
-    security alerts, and account updates.
+    {$_('comms.description')}
   </p>
   {#if loading}
-    <p class="loading">Loading...</p>
+    <p class="loading">{$_('common.loading')}</p>
   {:else}
     {#if error}
       <div class="message error">{error}</div>
···
     {/if}
     <form onsubmit={handleSave}>
       <section>
-        <h2>Preferred Channel</h2>
+        <h2>{$_('comms.preferredChannel')}</h2>
         <p class="section-description">
-          Select your preferred way to receive notifications. You must configure a channel before you can select it.
+          {$_('comms.preferredChannelDescription')}
         </p>
         <div class="channel-options">
-          {#each channels as channel}
-            <label class="channel-option" class:disabled={!canSelectChannel(channel.id)}>
+          {#each channels as channelId}
+            <label class="channel-option" class:disabled={!canSelectChannel(channelId)}>
               <input
                 type="radio"
                 name="preferredChannel"
-                value={channel.id}
+                value={channelId}
                 bind:group={preferredChannel}
-                disabled={!canSelectChannel(channel.id) || saving}
+                disabled={!canSelectChannel(channelId) || saving}
               />
               <div class="channel-info">
-                <span class="channel-name">{channel.name}</span>
-                <span class="channel-description">{channel.description}</span>
-                {#if channel.id !== 'email' && !canSelectChannel(channel.id)}
-                  <span class="channel-hint">Configure below to enable</span>
+                <span class="channel-name">{getChannelName(channelId)}</span>
+                <span class="channel-description">{getChannelDescription(channelId)}</span>
+                {#if channelId !== 'email' && !canSelectChannel(channelId)}
+                  <span class="channel-hint">{$_('comms.configureToEnable')}</span>
                 {/if}
               </div>
             </label>
···
         </div>
       </section>
       <section>
-        <h2>Channel Configuration</h2>
+        <h2>{$_('comms.channelConfiguration')}</h2>
         <div class="channel-config">
           <div class="config-item">
-            <label for="email">Email</label>
+            <label for="email">{$_('register.email')}</label>
             <div class="config-input">
               <input
                 id="email"
···
                 disabled
                 class="readonly"
               />
-              <span class="status verified">Primary</span>
+              <span class="status verified">{$_('comms.primary')}</span>
             </div>
-            <p class="config-hint">Your email is managed in Account Settings</p>
+            <p class="config-hint">{$_('comms.emailManagedInSettings')}</p>
           </div>
           <div class="config-item">
-            <label for="discord">Discord User ID</label>
+            <label for="discord">{$_('register.discordId')}</label>
             <div class="config-input">
               <input
                 id="discord"
                 type="text"
                 bind:value={discordId}
-                placeholder="e.g., 123456789012345678"
+                placeholder={$_('register.discordIdPlaceholder')}
                 disabled={saving}
               />
               {#if discordId}
                 {#if discordVerified}
-                  <span class="status verified">Verified</span>
+                  <span class="status verified">{$_('comms.verified')}</span>
                 {:else}
-                  <span class="status unverified">Not verified</span>
-                  <button type="button" class="verify-btn" onclick={() => verifyingChannel = 'discord'}>Verify</button>
+                  <span class="status unverified">{$_('comms.notVerified')}</span>
+                  <button type="button" class="verify-btn" onclick={() => verifyingChannel = 'discord'}>{$_('comms.verifyButton')}</button>
                 {/if}
               {/if}
             </div>
-            <p class="config-hint">Your Discord user ID (not username). Enable Developer Mode in Discord to copy it.</p>
+            <p class="config-hint">{$_('comms.discordIdHint')}</p>
             {#if verifyingChannel === 'discord'}
               <div class="verify-form">
                 <input
                   type="text"
                   bind:value={verificationCode}
-                  placeholder="Enter verification code"
+                  placeholder={$_('comms.verifyCodePlaceholder')}
                   maxlength="6"
                 />
-                <button type="button" onclick={() => handleVerify('discord')}>Submit</button>
-                <button type="button" class="cancel" onclick={() => { verifyingChannel = null; verificationCode = '' }}>Cancel</button>
+                <button type="button" onclick={() => handleVerify('discord')}>{$_('comms.submit')}</button>
+                <button type="button" class="cancel" onclick={() => { verifyingChannel = null; verificationCode = '' }}>{$_('common.cancel')}</button>
               </div>
             {/if}
           </div>
           <div class="config-item">
-            <label for="telegram">Telegram Username</label>
+            <label for="telegram">{$_('register.telegramUsername')}</label>
             <div class="config-input">
               <input
                 id="telegram"
                 type="text"
                 bind:value={telegramUsername}
-                placeholder="e.g., username"
+                placeholder={$_('register.telegramUsernamePlaceholder')}
                 disabled={saving}
               />
               {#if telegramUsername}
                 {#if telegramVerified}
-                  <span class="status verified">Verified</span>
+                  <span class="status verified">{$_('comms.verified')}</span>
                 {:else}
-                  <span class="status unverified">Not verified</span>
-                  <button type="button" class="verify-btn" onclick={() => verifyingChannel = 'telegram'}>Verify</button>
+                  <span class="status unverified">{$_('comms.notVerified')}</span>
+                  <button type="button" class="verify-btn" onclick={() => verifyingChannel = 'telegram'}>{$_('comms.verifyButton')}</button>
                 {/if}
               {/if}
             </div>
-            <p class="config-hint">Your Telegram username without the @ symbol</p>
+            <p class="config-hint">{$_('comms.telegramHint')}</p>
             {#if verifyingChannel === 'telegram'}
               <div class="verify-form">
                 <input
                   type="text"
                   bind:value={verificationCode}
-                  placeholder="Enter verification code"
+                  placeholder={$_('comms.verifyCodePlaceholder')}
                   maxlength="6"
                 />
-                <button type="button" onclick={() => handleVerify('telegram')}>Submit</button>
-                <button type="button" class="cancel" onclick={() => { verifyingChannel = null; verificationCode = '' }}>Cancel</button>
+                <button type="button" onclick={() => handleVerify('telegram')}>{$_('comms.submit')}</button>
+                <button type="button" class="cancel" onclick={() => { verifyingChannel = null; verificationCode = '' }}>{$_('common.cancel')}</button>
               </div>
             {/if}
           </div>
           <div class="config-item">
-            <label for="signal">Signal Phone Number</label>
+            <label for="signal">{$_('register.signalNumber')}</label>
             <div class="config-input">
               <input
                 id="signal"
                 type="tel"
                 bind:value={signalNumber}
-                placeholder="e.g., [phone]"
+                placeholder={$_('register.signalNumberPlaceholder')}
                 disabled={saving}
               />
               {#if signalNumber}
                 {#if signalVerified}
-                  <span class="status verified">Verified</span>
+                  <span class="status verified">{$_('comms.verified')}</span>
                 {:else}
-                  <span class="status unverified">Not verified</span>
-                  <button type="button" class="verify-btn" onclick={() => verifyingChannel = 'signal'}>Verify</button>
+                  <span class="status unverified">{$_('comms.notVerified')}</span>
+                  <button type="button" class="verify-btn" onclick={() => verifyingChannel = 'signal'}>{$_('comms.verifyButton')}</button>
                 {/if}
               {/if}
             </div>
-            <p class="config-hint">Your Signal phone number with country code</p>
+            <p class="config-hint">{$_('comms.signalHint')}</p>
             {#if verifyingChannel === 'signal'}
               <div class="verify-form">
                 <input
                   type="text"
                   bind:value={verificationCode}
-                  placeholder="Enter verification code"
+                  placeholder={$_('comms.verifyCodePlaceholder')}
                   maxlength="6"
                 />
-                <button type="button" onclick={() => handleVerify('signal')}>Submit</button>
-                <button type="button" class="cancel" onclick={() => { verifyingChannel = null; verificationCode = '' }}>Cancel</button>
+                <button type="button" onclick={() => handleVerify('signal')}>{$_('comms.submit')}</button>
+                <button type="button" class="cancel" onclick={() => { verifyingChannel = null; verificationCode = '' }}>{$_('common.cancel')}</button>
               </div>
             {/if}
           </div>
···
       </section>
       <div class="actions">
         <button type="submit" disabled={saving}>
-          {saving ? 'Saving...' : 'Save Preferences'}
+          {saving ? $_('comms.saving') : $_('comms.savePreferences')}
         </button>
       </div>
     </form>
     <section class="history-section">
-      <h2>Notification History</h2>
-      <p class="section-description">View recent notifications sent to your account.</p>
+      <h2>{$_('comms.messageHistory')}</h2>
+      <p class="section-description">{$_('comms.historyDescription')}</p>
       {#if !showHistory}
         <button class="load-history" onclick={loadHistory} disabled={historyLoading}>
-          {historyLoading ? 'Loading...' : 'Load History'}
+          {historyLoading ? $_('common.loading') : $_('comms.loadHistory')}
         </button>
       {:else}
-        <button class="load-history" onclick={() => showHistory = false}>Hide History</button>
+        <button class="load-history" onclick={() => showHistory = false}>{$_('comms.hideHistory')}</button>
         {#if historyError}
           <div class="message error">{historyError}</div>
-        {:else if notifications.length === 0}
-          <p class="no-notifications">No notifications found.</p>
+        {:else if messages.length === 0}
+          <p class="no-messages">{$_('comms.noMessages')}</p>
         {:else}
-          <div class="notification-list">
-            {#each notifications as notification}
-              <div class="notification-item">
-                <div class="notification-header">
-                  <span class="notification-type">{notification.notificationType}</span>
-                  <span class="notification-channel">{notification.channel}</span>
-                  <span class="notification-status" class:sent={notification.status === 'sent'} class:failed={notification.status === 'failed'}>{notification.status}</span>
+          <div class="message-list">
+            {#each messages as msg}
+              <div class="message-item">
+                <div class="message-header">
+                  <span class="message-type">{msg.notificationType}</span>
+                  <span class="message-channel">{msg.channel}</span>
+                  <span class="message-status" class:sent={msg.status === 'sent'} class:failed={msg.status === 'failed'}>{msg.status}</span>
                 </div>
-                {#if notification.subject}
-                  <div class="notification-subject">{notification.subject}</div>
+                {#if msg.subject}
+                  <div class="message-subject">{msg.subject}</div>
                 {/if}
-                <div class="notification-body">{notification.body}</div>
-                <div class="notification-date">{formatDate(notification.createdAt)}</div>
+                <div class="message-body">{msg.body}</div>
+                <div class="message-date">{formatDate(msg.createdAt)}</div>
               </div>
             {/each}
           </div>
···
 </div>
 <style>
   .page {
-    max-width: 600px;
+    max-width: var(--width-md);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   header {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .back {
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .back:hover {
     color: var(--accent);
   }
+
   h1 {
-    margin: 0.5rem 0 0 0;
+    margin: var(--space-2) 0 0 0;
   }
+
   .description {
     color: var(--text-secondary);
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
+
   .loading {
     text-align: center;
     color: var(--text-secondary);
-    padding: 2rem;
-  }
-  .message {
-    padding: 0.75rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
+    padding: var(--space-7);
   }
-  .message.error {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
-  }
-  .message.success {
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    color: var(--success-text);
-  }
+
   section {
     background: var(--bg-secondary);
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
+    padding: var(--space-6);
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-6);
   }
+
   section h2 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1.125rem;
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-lg);
   }
+
   .section-description {
     color: var(--text-secondary);
-    font-size: 0.875rem;
-    margin: 0 0 1rem 0;
+    font-size: var(--text-sm);
+    margin: 0 0 var(--space-4) 0;
   }
+
   .channel-options {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
+
   .channel-option {
     display: flex;
     align-items: flex-start;
-    gap: 0.75rem;
-    padding: 0.75rem;
+    gap: var(--space-3);
+    padding: var(--space-3);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    transition: border-color 0.15s;
+    transition: border-color var(--transition-fast);
   }
+
   .channel-option:hover:not(.disabled) {
     border-color: var(--accent);
   }
+
   .channel-option.disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
-  .channel-option input {
-    margin-top: 0.25rem;
+
+  .channel-option input[type="radio"] {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 2px;
   }
+
   .channel-info {
+    flex: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.125rem;
+    gap: 2px;
   }
+
   .channel-name {
-    font-weight: 500;
+    font-weight: var(--font-medium);
   }
+
   .channel-description {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
   }
+
   .channel-hint {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-muted);
     font-style: italic;
   }
+
   .channel-config {
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: var(--space-5);
   }
+
   .config-item {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
+
   .config-item label {
-    font-size: 0.875rem;
-    font-weight: 500;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
   }
+
   .config-input {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
+
   .config-input input {
     flex: 1;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
   }
-  .config-input input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
+
   .config-input input.readonly {
     background: var(--bg-input-disabled);
     color: var(--text-secondary);
   }
+
   .status {
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
     white-space: nowrap;
   }
+
   .status.verified {
     background: var(--success-bg);
     color: var(--success-text);
   }
+
   .status.unverified {
     background: var(--warning-bg);
     color: var(--warning-text);
   }
+
   .config-hint {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-secondary);
     margin: 0;
   }
+
   .actions {
     display: flex;
     justify-content: flex-end;
   }
-  .actions button {
-    padding: 0.75rem 2rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-  }
-  .actions button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-  .actions button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
+
   .verify-btn {
-    padding: 0.25rem 0.5rem;
+    padding: var(--space-1) var(--space-2);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
-    font-size: 0.75rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
     cursor: pointer;
   }
+
   .verify-btn:hover {
     background: var(--accent-hover);
   }
+
   .verify-form {
     display: flex;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
     align-items: center;
   }
+
   .verify-form input {
-    padding: 0.5rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 0.875rem;
+    padding: var(--space-2);
+    font-size: var(--text-sm);
     width: 150px;
-    background: var(--bg-input);
-    color: var(--text-primary);
   }
+
   .verify-form button {
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-2) var(--space-3);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
-    font-size: 0.875rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
     cursor: pointer;
   }
+
   .verify-form button:hover {
     background: var(--accent-hover);
   }
+
   .verify-form button.cancel {
     background: transparent;
     border: 1px solid var(--border-color);
     color: var(--text-secondary);
   }
+
   .verify-form button.cancel:hover {
     background: var(--bg-secondary);
   }
+
   .history-section {
     background: var(--bg-secondary);
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-top: 1.5rem;
+    padding: var(--space-6);
+    border-radius: var(--radius-xl);
+    margin-top: var(--space-6);
   }
+
   .history-section h2 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1.125rem;
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-lg);
   }
+
   .load-history {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: transparent;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     color: var(--text-primary);
-    margin-top: 0.5rem;
+    margin-top: var(--space-2);
   }
+
   .load-history:hover:not(:disabled) {
     background: var(--bg-card);
     border-color: var(--accent);
   }
+
   .load-history:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
-  .no-notifications {
+
+  .no-messages {
     color: var(--text-secondary);
     font-style: italic;
-    margin-top: 1rem;
+    margin-top: var(--space-4);
   }
-  .notification-list {
+
+  .message-list {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
-    margin-top: 1rem;
+    gap: var(--space-3);
+    margin-top: var(--space-4);
   }
-  .notification-item {
+
+  .message-item {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 0.75rem;
+    border-radius: var(--radius-md);
+    padding: var(--space-3);
   }
-  .notification-header {
+
+  .message-header {
     display: flex;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
+    gap: var(--space-2);
+    margin-bottom: var(--space-2);
     flex-wrap: wrap;
     align-items: center;
   }
-  .notification-type {
-    font-weight: 500;
-    font-size: 0.875rem;
+
+  .message-type {
+    font-weight: var(--font-medium);
+    font-size: var(--text-sm);
   }
-  .notification-channel {
-    font-size: 0.75rem;
-    padding: 0.125rem 0.375rem;
+
+  .message-channel {
+    font-size: var(--text-xs);
+    padding: var(--space-1) var(--space-2);
     background: var(--bg-secondary);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--text-secondary);
   }
-  .notification-status {
-    font-size: 0.75rem;
-    padding: 0.125rem 0.375rem;
-    border-radius: 4px;
+
+  .message-status {
+    font-size: var(--text-xs);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-md);
     margin-left: auto;
   }
-  .notification-status.sent {
+
+  .message-status.sent {
     background: var(--success-bg);
     color: var(--success-text);
   }
-  .notification-status.failed {
+
+  .message-status.failed {
     background: var(--error-bg);
     color: var(--error-text);
   }
-  .notification-subject {
-    font-weight: 500;
-    font-size: 0.875rem;
-    margin-bottom: 0.25rem;
+
+  .message-subject {
+    font-weight: var(--font-medium);
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-1);
   }
-  .notification-body {
-    font-size: 0.875rem;
+
+  .message-body {
+    font-size: var(--text-sm);
     color: var(--text-secondary);
     white-space: pre-wrap;
     word-break: break-word;
   }
-  .notification-date {
-    font-size: 0.75rem;
+
+  .message-date {
+    font-size: var(--text-xs);
     color: var(--text-muted);
-    margin-top: 0.5rem;
+    margin-top: var(--space-2);
   }
 </style>

frontend/src/routes/OAuth2FA.svelte

···
 <script lang="ts">
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
 
   let code = $state('')
   let submitting = $state(false)
···
     e.preventDefault()
     const requestUri = getRequestUri()
     if (!requestUri) {
-      error = 'Missing request_uri parameter'
+      error = $_('oauth.twoFactorCode.errors.missingRequestUri')
       return
     }
 
···
       const data = await response.json()
 
       if (!response.ok) {
-        error = data.error_description || data.error || 'Verification failed'
+        error = data.error_description || data.error || $_('oauth.twoFactorCode.errors.verificationFailed')
         submitting = false
         return
       }
···
         return
       }
 
-      error = 'Unexpected response from server'
+      error = $_('oauth.twoFactorCode.errors.unexpectedResponse')
       submitting = false
     } catch {
-      error = 'Failed to connect to server'
+      error = $_('oauth.twoFactorCode.errors.connectionFailed')
       submitting = false
     }
   }
···
 </script>
 
 <div class="oauth-2fa-container">
-  <h1>Two-Factor Authentication</h1>
+  <h1>{$_('oauth.twoFactorCode.title')}</h1>
   <p class="subtitle">
-    A verification code has been sent to your {channel}.
-    Enter the code below to continue.
+    {$_('oauth.twoFactorCode.subtitle', { values: { channel } })}
   </p>
 
   {#if error}
···
 
   <form onsubmit={handleSubmit}>
     <div class="field">
-      <label for="code">Verification Code</label>
+      <label for="code">{$_('oauth.twoFactorCode.codeLabel')}</label>
       <input
         id="code"
         type="text"
         bind:value={code}
-        placeholder="Enter 6-digit code"
+        placeholder={$_('oauth.twoFactorCode.codePlaceholder')}
         disabled={submitting}
         required
         maxlength="6"
···
 
     <div class="actions">
       <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}>
-        Cancel
+        {$_('common.cancel')}
       </button>
       <button type="submit" class="submit-btn" disabled={submitting || code.trim().length !== 6}>
-        {submitting ? 'Verifying...' : 'Verify'}
+        {submitting ? $_('oauth.twoFactorCode.verifying') : $_('oauth.twoFactorCode.verify')}
       </button>
     </div>
   </form>
···
 
 <style>
   .oauth-2fa-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
 
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-2) 0;
   }
 
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
 
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
   }
 
   .field {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
 
   label {
-    font-size: 0.875rem;
-    font-weight: 500;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
   }
 
   input {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1.5rem;
+    padding: var(--space-3);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xl);
     letter-spacing: 0.5em;
     text-align: center;
     background: var(--bg-input);
···
   }
 
   .error {
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--error-bg);
     border: 1px solid var(--error-border);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--error-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
 
   .actions {
     display: flex;
-    gap: 1rem;
-    margin-top: 0.5rem;
+    gap: var(--space-4);
+    margin-top: var(--space-2);
   }
 
   .actions button {
     flex: 1;
-    padding: 0.75rem;
+    padding: var(--space-3);
     border: none;
-    border-radius: 4px;
-    font-size: 1rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: background-color var(--transition-fast);
   }
 
   .actions button:disabled {
···
 
   .submit-btn {
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
   }
 
   .submit-btn:hover:not(:disabled) {

frontend/src/routes/OAuthAccounts.svelte

···
 <script lang="ts">
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
 
   interface AccountInfo {
     did: string
···
 <div class="oauth-accounts-container">
   {#if loading}
     <div class="loading">
-      <p>Loading accounts...</p>
+      <p>{$_('common.loading')}</p>
     </div>
   {:else if error}
     <div class="error-container">
       <h1>Error</h1>
       <div class="error">{error}</div>
       <button type="button" onclick={handleDifferentAccount}>
-        Sign in with different account
+        {$_('oauth.accounts.useAnother')}
       </button>
     </div>
   {:else}
-    <h1>Choose an Account</h1>
-    <p class="subtitle">Select an account to continue</p>
+    <h1>{$_('oauth.accounts.title')}</h1>
+    <p class="subtitle">{$_('oauth.accounts.subtitle')}</p>
 
     <div class="accounts-list">
       {#each accounts as account}
···
     </div>
 
     <button type="button" class="secondary different-account" onclick={handleDifferentAccount}>
-      Sign in to different account
+      {$_('oauth.accounts.useAnother')}
     </button>
   {/if}
 </div>
 
 <style>
   .oauth-accounts-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
 
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-2) 0;
   }
 
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
 
   .loading {
···
   }
 
   .error {
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--error-bg);
     border: 1px solid var(--error-border);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--error-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
 
   .accounts-list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
   }
 
   .account-item {
     display: flex;
     align-items: center;
-    padding: 1rem;
+    padding: var(--space-4);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: var(--radius-xl);
     cursor: pointer;
     text-align: left;
     width: 100%;
-    transition: border-color 0.15s, box-shadow 0.15s;
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   }
 
   .account-item:hover:not(.disabled) {
     border-color: var(--accent);
-    box-shadow: 0 2px 8px rgba(77, 166, 255, 0.15);
+    box-shadow: var(--shadow-sm);
   }
 
   .account-item.disabled {
···
   .account-info {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
 
   .account-handle {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--text-primary);
   }
 
   .account-email {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
   }
 
   button {
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
-    font-size: 1rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
     cursor: pointer;
   }
 
···
 
   button.secondary:hover:not(:disabled) {
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
   }
 
   .different-account {
-    margin-top: 1rem;
+    margin-top: var(--space-4);
   }
 </style>

frontend/src/routes/OAuthConsent.svelte

···
 <script lang="ts">
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
 
   interface ScopeInfo {
     scope: string
···
   async function fetchConsentData() {
     const requestUri = getRequestUri()
     if (!requestUri) {
-      error = 'Missing request_uri parameter'
+      error = $_('oauth.error.genericError')
       loading = false
       return
     }
···
       const response = await fetch(`/oauth/authorize/consent?request_uri=${encodeURIComponent(requestUri)}`)
       if (!response.ok) {
         const data = await response.json()
-        error = data.error_description || data.error || 'Failed to load consent data'
+        error = data.error_description || data.error || $_('oauth.error.genericError')
         loading = false
         return
       }
···
         await submitConsent()
       }
     } catch {
-      error = 'Failed to connect to server'
+      error = $_('oauth.error.genericError')
     } finally {
       loading = false
     }
···
 
       if (!response.ok) {
         const data = await response.json()
-        error = data.error_description || data.error || 'Authorization failed'
+        error = data.error_description || data.error || $_('oauth.error.genericError')
         submitting = false
         return
       }
···
         window.location.href = data.redirect_uri
       }
     } catch {
-      error = 'Failed to complete authorization'
+      error = $_('oauth.error.genericError')
       submitting = false
     }
   }
···
         window.location.href = response.url
       }
     } catch {
-      error = 'Failed to deny authorization'
+      error = $_('oauth.error.genericError')
       submitting = false
     }
   }
···
 <div class="consent-container">
   {#if loading}
     <div class="loading">
-      <p>Loading...</p>
+      <p>{$_('common.loading')}</p>
     </div>
   {:else if error}
     <div class="error-container">
-      <h1>Authorization Error</h1>
+      <h1>{$_('oauth.error.title')}</h1>
       <div class="error">{error}</div>
       <button type="button" onclick={() => navigate('/login')}>
-        Return to Login
+        {$_('verify.backToLogin')}
       </button>
     </div>
   {:else if consentData}
···
       {#if consentData.logo_uri}
         <img src={consentData.logo_uri} alt="" class="client-logo" />
       {/if}
-      <h1>{consentData.client_name || 'Application'}</h1>
-      <p class="subtitle">wants to access your account</p>
+      <h1>{consentData.client_name || $_('oauth.consent.title')}</h1>
+      <p class="subtitle">{$_('oauth.consent.appWantsAccess', { values: { app: '' } })}</p>
       {#if consentData.client_uri}
         <a href={consentData.client_uri} target="_blank" rel="noopener noreferrer" class="client-link">
           {consentData.client_uri}
···
     </div>
 
     <div class="account-info">
-      <span class="label">Signing in as:</span>
+      <span class="label">{$_('oauth.consent.signingInAs')}</span>
       <span class="did">{consentData.did}</span>
     </div>
 
     <div class="scopes-section">
-      <h2>Permissions Requested</h2>
+      <h2>{$_('oauth.consent.permissionsRequested')}</h2>
       {#each Object.entries(scopeGroups) as [category, scopes]}
         <div class="scope-group">
           <h3 class="category-title">{category}</h3>
···
                 <span class="scope-name">{scope.display_name}</span>
                 <span class="scope-description">{scope.description}</span>
                 {#if scope.required}
-                  <span class="required-badge">Required</span>
+                  <span class="required-badge">{$_('oauth.consent.required')}</span>
                 {/if}
               </div>
             </label>
···
 
     <label class="remember-choice">
       <input type="checkbox" bind:checked={rememberChoice} disabled={submitting} />
-      <span>Remember my choice for this application</span>
+      <span>{$_('oauth.consent.rememberChoiceLabel')}</span>
     </label>
 
     <div class="actions">
       <button type="button" class="deny-btn" onclick={handleDeny} disabled={submitting}>
-        Deny
+        {$_('oauth.consent.deny')}
       </button>
       <button type="button" class="approve-btn" onclick={submitConsent} disabled={submitting}>
-        {submitting ? 'Authorizing...' : 'Authorize'}
+        {submitting ? $_('oauth.consent.authorizing') : $_('oauth.consent.authorize')}
       </button>
     </div>
   {/if}
···
 <style>
   .consent-container {
     max-width: 480px;
-    margin: 2rem auto;
-    padding: 2rem;
+    margin: var(--space-7) auto;
+    padding: var(--space-7);
   }
 
   .loading {
···
   }
 
   .error {
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--error-bg);
     border: 1px solid var(--error-border);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--error-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
 
   .client-info {
     text-align: center;
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--space-6);
   }
 
   .client-logo {
     width: 64px;
     height: 64px;
-    border-radius: 12px;
-    margin-bottom: 1rem;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-4);
   }
 
   .client-info h1 {
-    margin: 0 0 0.25rem 0;
-    font-size: 1.5rem;
+    margin: 0 0 var(--space-1) 0;
+    font-size: var(--text-xl);
   }
 
   .subtitle {
···
 
   .client-link {
     display: inline-block;
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
+    margin-top: var(--space-2);
+    font-size: var(--text-sm);
     color: var(--accent);
     text-decoration: none;
   }
···
   .account-info {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
-    padding: 1rem;
+    gap: var(--space-1);
+    padding: var(--space-4);
     background: var(--bg-secondary);
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-6);
   }
 
   .account-info .label {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
···
 
   .account-info .did {
     font-family: monospace;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-primary);
     word-break: break-all;
   }
 
   .scopes-section {
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--space-6);
   }
 
   .scopes-section h2 {
-    font-size: 1rem;
-    margin: 0 0 1rem 0;
+    font-size: var(--text-base);
+    margin: 0 0 var(--space-4) 0;
     color: var(--text-secondary);
   }
 
   .scope-group {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
 
   .category-title {
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
     color: var(--text-primary);
-    margin: 0 0 0.5rem 0;
-    padding-bottom: 0.25rem;
+    margin: 0 0 var(--space-2) 0;
+    padding-bottom: var(--space-1);
     border-bottom: 1px solid var(--border-color);
   }
 
   .scope-item {
     display: flex;
-    gap: 0.75rem;
-    padding: 0.75rem;
+    gap: var(--space-3);
+    padding: var(--space-3);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 6px;
-    margin-bottom: 0.5rem;
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-2);
     cursor: pointer;
-    transition: border-color 0.15s;
+    transition: border-color var(--transition-fast);
   }
 
   .scope-item:hover:not(.required) {
···
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 0.125rem;
+    gap: 2px;
   }
 
   .scope-name {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--text-primary);
   }
 
   .scope-description {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
   }
 
   .required-badge {
     display: inline-block;
     font-size: 0.625rem;
-    padding: 0.125rem 0.375rem;
+    padding: 2px var(--space-2);
     background: var(--warning-bg);
     color: var(--warning-text);
-    border-radius: 3px;
+    border-radius: var(--radius-sm);
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    margin-top: 0.25rem;
+    margin-top: var(--space-1);
     width: fit-content;
   }
 
   .remember-choice {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 1.5rem;
+    gap: var(--space-2);
+    margin-bottom: var(--space-6);
     cursor: pointer;
     color: var(--text-secondary);
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
 
   .remember-choice input {
···
 
   .actions {
     display: flex;
-    gap: 1rem;
+    gap: var(--space-4);
   }
 
   .actions button {
     flex: 1;
-    padding: 0.875rem;
+    padding: var(--space-3);
     border: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    font-weight: 500;
+    border-radius: var(--radius-lg);
+    font-size: var(--text-base);
+    font-weight: var(--font-medium);
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: background-color var(--transition-fast);
   }
 
   .actions button:disabled {
···
 
   .approve-btn {
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
   }
 
   .approve-btn:hover:not(:disabled) {

frontend/src/routes/OAuthError.svelte

···
 <script lang="ts">
+  import { _ } from '../lib/i18n'
+
   function getError(): string {
     const params = new URLSearchParams(window.location.hash.split('?')[1] || '')
     return params.get('error') || 'Unknown error'
···
 </script>
 
 <div class="oauth-error-container">
-  <h1>Authorization Error</h1>
+  <h1>{$_('oauth.error.title')}</h1>
 
   <div class="error-box">
     <div class="error-code">{error}</div>
···
   </div>
 
   <button type="button" onclick={handleBack}>
-    Go Back
+    {$_('oauth.error.tryAgain')}
   </button>
 </div>
 
 <style>
   .oauth-error-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
     text-align: center;
   }
 
   h1 {
-    margin: 0 0 1.5rem 0;
+    margin: 0 0 var(--space-6) 0;
     color: var(--error-text);
   }
 
   .error-box {
-    padding: 1.5rem;
+    padding: var(--space-6);
     background: var(--error-bg);
     border: 1px solid var(--error-border);
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-6);
   }
 
   .error-code {
     font-family: monospace;
-    font-size: 1rem;
+    font-size: var(--text-base);
     color: var(--error-text);
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-2);
   }
 
   .error-description {
     color: var(--text-secondary);
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
 
   button {
-    padding: 0.75rem 1.5rem;
+    padding: var(--space-3) var(--space-6);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
-    font-size: 1rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
     cursor: pointer;
   }
 

frontend/src/routes/OAuthLogin.svelte

···
 <script lang="ts">
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
 
   let username = $state('')
   let password = $state('')
···
   async function handlePasskeyLogin() {
     const requestUri = getRequestUri()
     if (!requestUri || !username) {
-      error = 'Missing required parameters'
+      error = $_('common.error')
       return
     }
 
···
       }) as PublicKeyCredential | null
 
       if (!credential) {
-        error = 'Passkey authentication was cancelled'
+        error = $_('common.error')
         submitting = false
         return
       }
···
         return
       }
 
-      error = 'Unexpected response from server'
+      error = $_('common.error')
       submitting = false
     } catch (e) {
       console.error('Passkey login error:', e)
       if (e instanceof DOMException && e.name === 'NotAllowedError') {
-        error = 'Passkey authentication was cancelled'
+        error = $_('common.error')
       } else {
-        error = `Failed to authenticate with passkey: ${e instanceof Error ? e.message : String(e)}`
+        error = `${$_('common.error')}: ${e instanceof Error ? e.message : String(e)}`
       }
       submitting = false
     }
···
     e.preventDefault()
     const requestUri = getRequestUri()
     if (!requestUri) {
-      error = 'Missing request_uri parameter'
+      error = $_('common.error')
       return
     }
 
···
         return
       }
 
-      error = 'Unexpected response from server'
+      error = $_('common.error')
       submitting = false
     } catch {
-      error = 'Failed to connect to server'
+      error = $_('common.error')
       submitting = false
     }
   }
···
 </script>
 
 <div class="oauth-login-container">
-  <h1>Sign In</h1>
+  <h1>{$_('oauth.login.title')}</h1>
   <p class="subtitle">
     {#if clientName}
-      Sign in to continue to <strong>{clientName}</strong>
+      {$_('oauth.login.subtitle')} <strong>{clientName}</strong>
     {:else}
-      Sign in to continue to the application
+      {$_('oauth.login.subtitle')}
     {/if}
   </p>
 
···
 
   <form onsubmit={handleSubmit}>
     <div class="field">
-      <label for="username">Handle or Email</label>
+      <label for="username">{$_('register.handle')}</label>
       <input
         id="username"
         type="text"
         bind:value={username}
-        placeholder="[e-mail] or handle"
+        placeholder={$_('register.emailPlaceholder')}
         disabled={submitting}
         required
         autocomplete="username"
···
         class:passkey-unavailable={!hasPasskeys || checkingSecurityStatus || !securityStatusChecked}
         onclick={handlePasskeyLogin}
         disabled={submitting || !hasPasskeys || !username || checkingSecurityStatus || !securityStatusChecked}
-        title={checkingSecurityStatus ? 'Checking passkey status...' : hasPasskeys ? 'Sign in with your passkey' : 'No passkeys registered for this account'}
+        title={checkingSecurityStatus ? $_('oauth.login.passkeyHintChecking') : hasPasskeys ? $_('oauth.login.passkeyHintAvailable') : $_('oauth.login.passkeyHintNotAvailable')}
       >
         <svg class="passkey-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M15 7a4 4 0 1 0-8 0 4 4 0 0 0 8 0z" />
···
         </svg>
         <span class="passkey-text">
           {#if submitting}
-            Authenticating...
+            {$_('oauth.login.authenticating')}
           {:else if checkingSecurityStatus || !securityStatusChecked}
-            Checking passkey...
+            {$_('oauth.login.checkingPasskey')}
           {:else if hasPasskeys}
-            Sign in with passkey
+            {$_('oauth.login.signInWithPasskey')}
           {:else}
-            Passkey not set up
+            {$_('oauth.login.passkeyNotSetUp')}
           {/if}
         </span>
       </button>
 
       <div class="auth-divider">
-        <span>or use password</span>
+        <span>{$_('oauth.login.orUsePassword')}</span>
       </div>
     {/if}
 
     <div class="field">
-      <label for="password">Password</label>
+      <label for="password">{$_('oauth.login.password')}</label>
       <input
         id="password"
         type="password"
···
 
     <label class="remember-device">
       <input type="checkbox" bind:checked={rememberDevice} disabled={submitting} />
-      <span>Remember this device</span>
+      <span>{$_('oauth.login.rememberDevice')}</span>
     </label>
 
     <div class="actions">
       <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}>
-        Cancel
+        {$_('common.cancel')}
       </button>
       <button type="submit" class="submit-btn" disabled={submitting || !username || !password}>
-        {submitting ? 'Signing in...' : 'Sign In'}
+        {submitting ? $_('oauth.login.signingIn') : $_('oauth.login.title')}
       </button>
     </div>
   </form>
 
   <p class="help-links">
-    <a href="#/reset-password">Forgot password?</a> &middot; <a href="#/request-passkey-recovery">Lost passkey?</a>
+    <a href="#/reset-password">{$_('login.forgotPassword')}</a> &middot; <a href="#/request-passkey-recovery">{$_('login.lostPasskey')}</a>
   </p>
 </div>
 
 <style>
   .help-links {
     text-align: center;
-    margin-top: 1rem;
-    font-size: 0.875rem;
+    margin-top: var(--space-4);
+    font-size: var(--text-sm);
   }
 
   .help-links a {
···
   }
 
   .oauth-login-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
 
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-2) 0;
   }
 
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
 
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
   }
 
   .field {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
 
   label {
-    font-size: 0.875rem;
-    font-weight: 500;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
   }
 
   input[type="text"],
   input[type="password"] {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
+    padding: var(--space-3);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
     background: var(--bg-input);
     color: var(--text-primary);
   }
···
   .remember-device {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
     cursor: pointer;
     color: var(--text-secondary);
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
 
   .remember-device input {
···
   }
 
   .error {
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--error-bg);
     border: 1px solid var(--error-border);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--error-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
 
   .actions {
     display: flex;
-    gap: 1rem;
-    margin-top: 0.5rem;
+    gap: var(--space-4);
+    margin-top: var(--space-2);
   }
 
   .actions button {
     flex: 1;
-    padding: 0.75rem;
+    padding: var(--space-3);
     border: none;
-    border-radius: 4px;
-    font-size: 1rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: background-color var(--transition-fast);
   }
 
   .actions button:disabled {
···
 
   .submit-btn {
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
   }
 
   .submit-btn:hover:not(:disabled) {
···
   .auth-divider {
     display: flex;
     align-items: center;
-    gap: 1rem;
-    margin: 0.5rem 0;
+    gap: var(--space-4);
+    margin: var(--space-2) 0;
   }
 
   .auth-divider::before,
···
     content: '';
     flex: 1;
     height: 1px;
-    background: var(--border-color-light);
+    background: var(--border-color);
   }
 
   .auth-divider span {
     color: var(--text-secondary);
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
 
   .passkey-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
     width: 100%;
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: 1px solid var(--accent);
-    border-radius: 4px;
-    font-size: 1rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
     cursor: pointer;
-    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
+    transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
   }
 
   .passkey-btn:hover:not(:disabled) {

frontend/src/routes/OAuthPasskey.svelte

···
 <script lang="ts">
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
 
   let loading = $state(false)
   let error = $state<string | null>(null)
···
     const params = new URLSearchParams(window.location.hash.split('?')[1] || '')
     return params.get('request_uri')
   }
+
+  const t = $_
 
   function arrayBufferToBase64Url(buffer: ArrayBuffer): string {
     const bytes = new Uint8Array(buffer)
···
   async function startPasskeyAuth() {
     const requestUri = getRequestUri()
     if (!requestUri) {
-      error = 'Missing request_uri parameter'
+      error = t('common.error')
       return
     }
 
     if (!window.PublicKeyCredential) {
-      error = 'Passkeys are not supported in this browser'
+      error = t('common.error')
       return
     }
 
···
 
       if (!startResponse.ok) {
         const data = await startResponse.json()
-        error = data.error_description || data.error || 'Failed to start passkey authentication'
+        error = data.error_description || data.error || t('common.error')
         loading = false
         return
       }
···
       })
 
       if (!credential) {
-        error = 'Passkey authentication was cancelled'
+        error = t('common.error')
         loading = false
         return
       }
···
       const finishData = await finishResponse.json()
 
       if (!finishResponse.ok) {
-        error = finishData.error_description || finishData.error || 'Passkey verification failed'
+        error = finishData.error_description || finishData.error || t('common.error')
         loading = false
         return
       }
···
         return
       }
 
-      error = 'Unexpected response from server'
+      error = t('common.error')
       loading = false
     } catch (e) {
       if (e instanceof DOMException && e.name === 'NotAllowedError') {
-        error = 'Passkey authentication was cancelled'
+        error = t('common.error')
       } else {
-        error = 'Failed to authenticate with passkey'
+        error = t('common.error')
       }
       loading = false
     }
···
 </script>
 
 <div class="oauth-passkey-container">
-  <h1>Sign In with Passkey</h1>
+  <h1>{t('oauth.passkey.title')}</h1>
   <p class="subtitle">
-    Your account uses a passkey for authentication. Use your fingerprint, face, or security key to sign in.
+    {t('oauth.passkey.subtitle')}
   </p>
 
   {#if error}
···
     {#if loading}
       <div class="loading-indicator">
         <div class="spinner"></div>
-        <p>Waiting for passkey...</p>
+        <p>{t('oauth.passkey.waiting')}</p>
       </div>
     {:else}
       <button type="button" class="passkey-btn" onclick={startPasskeyAuth} disabled={loading}>
-        Use Passkey
+        {t('oauth.passkey.title')}
       </button>
     {/if}
   </div>
 
   <div class="actions">
     <button type="button" class="cancel-btn" onclick={handleCancel} disabled={loading}>
-      Cancel
+      {t('common.cancel')}
     </button>
   </div>
-
-  <p class="help-text">
-    If you've lost access to your passkey, you can recover your account using email.
-  </p>
 </div>
 
 <style>

frontend/src/routes/OAuthTotp.svelte

···
 <script lang="ts">
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
 
   let code = $state('')
   let trustDevice = $state(false)
···
     e.preventDefault()
     const requestUri = getRequestUri()
     if (!requestUri) {
-      error = 'Missing request_uri parameter'
+      error = $_('common.error')
       return
     }
 
···
       const data = await response.json()
 
       if (!response.ok) {
-        error = data.error_description || data.error || 'Verification failed'
+        error = data.error_description || data.error || $_('common.error')
         submitting = false
         return
       }
···
         return
       }
 
-      error = 'Unexpected response from server'
+      error = $_('common.error')
       submitting = false
     } catch {
-      error = 'Failed to connect to server'
+      error = $_('common.error')
       submitting = false
     }
   }
···
 </script>
 
 <div class="oauth-totp-container">
-  <h1>Two-Factor Authentication</h1>
+  <h1>{$_('oauth.totp.title')}</h1>
   <p class="subtitle">
-    Enter the 6-digit code from your authenticator app, or use a backup code.
+    {$_('oauth.totp.subtitle')}
   </p>
 
   {#if error}
···
 
   <form onsubmit={handleSubmit}>
     <div class="field">
-      <label for="code">Verification Code</label>
+      <label for="code">{$_('oauth.totp.codePlaceholder')}</label>
       <input
         id="code"
         type="text"
         bind:value={code}
-        placeholder="Enter code"
+        placeholder={isBackupCode ? $_('oauth.totp.backupCodePlaceholder') : $_('oauth.totp.codePlaceholder')}
         disabled={submitting}
         required
         maxlength="8"
···
       />
       <p class="hint">
         {#if isBackupCode}
-          Using backup code
+          {$_('oauth.totp.hintBackupCode')}
         {:else if isTotpCode}
-          Using authenticator code
+          {$_('oauth.totp.hintTotpCode')}
         {:else}
-          6 digits for authenticator, 8 characters for backup code
+          {$_('oauth.totp.hintDefault')}
         {/if}
       </p>
     </div>
···
         bind:checked={trustDevice}
         disabled={submitting}
       />
-      <span>Trust this device for 30 days</span>
+      <span>{$_('oauth.totp.trustDevice')}</span>
     </label>
 
     <div class="actions">
       <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}>
-        Cancel
+        {$_('common.cancel')}
       </button>
       <button type="submit" class="submit-btn" disabled={submitting || !canSubmit}>
-        {submitting ? 'Verifying...' : 'Verify'}
+        {submitting ? $_('oauth.totp.verifying') : $_('oauth.totp.verify')}
       </button>
     </div>
   </form>
···
 
 <style>
   .oauth-totp-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
 
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-2) 0;
   }
 
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
 
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
   }
 
   .field {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
 
   label {
-    font-size: 0.875rem;
-    font-weight: 500;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
   }
 
   input {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1.5rem;
+    padding: var(--space-3);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xl);
     letter-spacing: 0.25em;
     text-align: center;
     background: var(--bg-input);
···
   }
 
   .hint {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-muted);
-    margin: 0.25rem 0 0 0;
+    margin: var(--space-1) 0 0 0;
     text-align: center;
   }
 
   .error {
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--error-bg);
     border: 1px solid var(--error-border);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     color: var(--error-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
 
   .actions {
     display: flex;
-    gap: 1rem;
-    margin-top: 0.5rem;
+    gap: var(--space-4);
+    margin-top: var(--space-2);
   }
 
   .actions button {
     flex: 1;
-    padding: 0.75rem;
+    padding: var(--space-3);
     border: none;
-    border-radius: 4px;
-    font-size: 1rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: background-color var(--transition-fast);
   }
 
   .actions button:disabled {
···
 
   .submit-btn {
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
   }
 
   .submit-btn:hover:not(:disabled) {
···
   .trust-device-label {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
-    margin-top: 0.5rem;
+    margin-top: var(--space-2);
   }
 
   .trust-device-label input[type="checkbox"] {

frontend/src/routes/RecoverPasskey.svelte

···
 <script lang="ts">
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
 
   let newPassword = $state('')
   let confirmPassword = $state('')
···
   let { did, token } = getUrlParams()
 
   function validateForm(): string | null {
-    if (!newPassword) return 'New password is required'
-    if (newPassword.length < 8) return 'Password must be at least 8 characters'
-    if (newPassword !== confirmPassword) return 'Passwords do not match'
+    if (!newPassword) return $_('recoverPasskey.validation.passwordRequired')
+    if (newPassword.length < 8) return $_('recoverPasskey.validation.passwordLength')
+    if (newPassword !== confirmPassword) return $_('recoverPasskey.validation.passwordsMismatch')
     return null
   }
 
···
     e.preventDefault()
 
     if (!did || !token) {
-      error = 'Invalid recovery link. Please request a new one.'
+      error = $_('recoverPasskey.errors.invalidLink')
       return
     }
 
···
     } catch (err) {
       if (err instanceof ApiError) {
         if (err.error === 'RecoveryLinkExpired') {
-          error = 'This recovery link has expired. Please request a new one.'
+          error = $_('recoverPasskey.errors.expired')
         } else if (err.error === 'InvalidRecoveryLink') {
-          error = 'Invalid recovery link. Please request a new one.'
+          error = $_('recoverPasskey.errors.invalidLink')
         } else {
-          error = err.message || 'Recovery failed'
+          error = err.message || $_('common.error')
         }
       } else if (err instanceof Error) {
-        error = err.message || 'Recovery failed'
+        error = err.message || $_('common.error')
       } else {
-        error = 'Recovery failed'
+        error = $_('common.error')
       }
     } finally {
       submitting = false
···
   }
 </script>
 
-<div class="recover-container">
+<div class="recover-page">
   {#if !did || !token}
-    <h1>Invalid Recovery Link</h1>
-    <p class="error-message">
-      This recovery link is invalid or has been corrupted. Please request a new recovery email.
-    </p>
-    <button onclick={requestNewLink}>Go to Login</button>
+    <h1>{$_('recoverPasskey.invalidLinkTitle')}</h1>
+    <p class="error-message">{$_('recoverPasskey.invalidLinkMessage')}</p>
+    <button onclick={requestNewLink}>{$_('recoverPasskey.goToLogin')}</button>
   {:else if success}
     <div class="success-content">
       <div class="success-icon">&#x2714;</div>
-      <h1>Password Set!</h1>
-      <p class="success-message">
-        Your temporary password has been set. You can now sign in with this password.
-      </p>
-      <p class="next-steps">
-        After signing in, we recommend adding a new passkey in your security settings
-        to restore passkey-only authentication.
-      </p>
-      <button onclick={goToLogin}>Sign In</button>
+      <h1>{$_('recoverPasskey.successTitle')}</h1>
+      <p class="success-message">{$_('recoverPasskey.successMessage')}</p>
+      <p class="next-steps">{$_('recoverPasskey.successNextSteps')}</p>
+      <button onclick={goToLogin}>{$_('recoverPasskey.signIn')}</button>
     </div>
   {:else}
-    <h1>Recover Your Account</h1>
-    <p class="subtitle">
-      Set a temporary password to regain access to your passkey-only account.
-    </p>
+    <h1>{$_('recoverPasskey.title')}</h1>
+    <p class="subtitle">{$_('recoverPasskey.subtitle')}</p>
 
     {#if error}
-      <div class="error">{error}</div>
+      <div class="message error">{error}</div>
     {/if}
 
     <form onsubmit={handleSubmit}>
       <div class="field">
-        <label for="new-password">New Password</label>
+        <label for="new-password">{$_('recoverPasskey.newPassword')}</label>
         <input
           id="new-password"
           type="password"
           bind:value={newPassword}
-          placeholder="At least 8 characters"
+          placeholder={$_('recoverPasskey.newPasswordPlaceholder')}
           disabled={submitting}
           required
           minlength="8"
···
       </div>
 
       <div class="field">
-        <label for="confirm-password">Confirm Password</label>
+        <label for="confirm-password">{$_('recoverPasskey.confirmPassword')}</label>
         <input
           id="confirm-password"
           type="password"
           bind:value={confirmPassword}
-          placeholder="Confirm your password"
+          placeholder={$_('recoverPasskey.confirmPasswordPlaceholder')}
           disabled={submitting}
           required
         />
       </div>
 
       <div class="info-box">
-        <strong>What happens next?</strong>
-        <p>
-          After setting this password, you can sign in and add a new passkey in your security settings.
-          Once you have a new passkey, you can optionally remove the temporary password.
-        </p>
+        <strong>{$_('recoverPasskey.whatHappensNext')}</strong>
+        <p>{$_('recoverPasskey.whatHappensNextDetail')}</p>
       </div>
 
       <button type="submit" disabled={submitting}>
-        {submitting ? 'Setting password...' : 'Set Password'}
+        {submitting ? $_('recoverPasskey.settingPassword') : $_('recoverPasskey.setPassword')}
       </button>
     </form>
   {/if}
 </div>
 
 <style>
-  .recover-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+  .recover-page {
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
 
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-3) 0;
   }
 
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
 
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-  }
-
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  label {
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
-  input {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
-  }
-
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
+    gap: var(--space-4);
   }
 
   .info-box {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 1rem;
-    font-size: 0.875rem;
+    border-radius: var(--radius-lg);
+    padding: var(--space-5);
+    font-size: var(--text-sm);
   }
 
   .info-box strong {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-3);
   }
 
   .info-box p {
···
     color: var(--text-secondary);
   }
 
-  button {
-    padding: 0.75rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    margin-top: 0.5rem;
-  }
-
-  button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .error {
-    padding: 0.75rem;
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: 4px;
-    color: var(--error-text);
-    margin-bottom: 1rem;
-  }
-
   .error-message {
     color: var(--text-secondary);
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--space-6);
   }
 
   .success-content {
···
   }
 
   .success-icon {
-    font-size: 4rem;
+    font-size: var(--text-4xl);
     color: var(--success-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
 
   .success-message {
     color: var(--text-secondary);
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-3);
   }
 
   .next-steps {
     color: var(--text-muted);
-    font-size: 0.875rem;
-    margin-bottom: 1.5rem;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-6);
   }
 </style>

frontend/src/routes/Register.svelte

···
   import { register, getAuthState } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError, type VerificationChannel, type DidType } from '../lib/api'
+  import { _ } from '../lib/i18n'
 
   const STORAGE_KEY = 'tranquil_pds_pending_verification'
 
···
   let handleHasDot = $derived(handle.includes('.'))
 
   function validateForm(): string | null {
-    if (!handle.trim()) return 'Handle is required'
-    if (handle.includes('.')) return 'Handle cannot contain dots. You can set up a custom domain handle after creating your account.'
-    if (!password) return 'Password is required'
-    if (password.length < 8) return 'Password must be at least 8 characters'
-    if (password !== confirmPassword) return 'Passwords do not match'
+    if (!handle.trim()) return $_('register.validation.handleRequired')
+    if (handle.includes('.')) return $_('register.validation.handleNoDots')
+    if (!password) return $_('register.validation.passwordRequired')
+    if (password.length < 8) return $_('register.validation.passwordLength')
+    if (password !== confirmPassword) return $_('register.validation.passwordsMismatch')
     if (serverInfo?.inviteCodeRequired && !inviteCode.trim()) {
-      return 'Invite code is required'
+      return $_('register.validation.inviteCodeRequired')
     }
     if (didType === 'web-external') {
-      if (!externalDid.trim()) return 'External did:web is required'
-      if (!externalDid.trim().startsWith('did:web:')) return 'External DID must start with did:web:'
+      if (!externalDid.trim()) return $_('register.validation.externalDidRequired')
+      if (!externalDid.trim().startsWith('did:web:')) return $_('register.validation.externalDidFormat')
     }
     switch (verificationChannel) {
       case 'email':
-        if (!email.trim()) return 'Email is required for email verification'
+        if (!email.trim()) return $_('register.validation.emailRequired')
         break
       case 'discord':
-        if (!discordId.trim()) return 'Discord ID is required for Discord verification'
+        if (!discordId.trim()) return $_('register.validation.discordIdRequired')
         break
       case 'telegram':
-        if (!telegramUsername.trim()) return 'Telegram username is required for Telegram verification'
+        if (!telegramUsername.trim()) return $_('register.validation.telegramRequired')
         break
       case 'signal':
-        if (!signalNumber.trim()) return 'Phone number is required for Signal verification'
+        if (!signalNumber.trim()) return $_('register.validation.signalRequired')
         break
     }
     return null
···
     return handle.trim()
   })
 </script>
-<div class="register-container">
+
+<div class="register-page">
   {#if error}
-    <div class="error">{error}</div>
+    <div class="message error">{error}</div>
   {/if}
-  <h1>Create Account</h1>
-    <p class="subtitle">Create a new account on this PDS</p>
-    {#if loadingServerInfo}
-      <p class="loading">Loading...</p>
-    {:else}
-      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(e); }}>
-        <div class="field">
-          <label for="handle">Handle</label>
-          <input
-            id="handle"
-            type="text"
-            bind:value={handle}
-            placeholder="yourname"
-            disabled={submitting}
-            required
-          />
-          {#if handleHasDot}
-            <p class="hint warning">Custom domain handles can be set up after account creation in Settings.</p>
-          {:else if fullHandle()}
-            <p class="hint">Your full handle will be: @{fullHandle()}</p>
-          {/if}
+
+  <h1>{$_('register.title')}</h1>
+  <p class="subtitle">{$_('register.subtitle')}</p>
+
+  {#if loadingServerInfo}
+    <p class="loading">{$_('common.loading')}</p>
+  {:else}
+    <form onsubmit={(e) => { e.preventDefault(); handleSubmit(e); }}>
+      <div class="field">
+        <label for="handle">{$_('register.handle')}</label>
+        <input
+          id="handle"
+          type="text"
+          bind:value={handle}
+          placeholder={$_('register.handlePlaceholder')}
+          disabled={submitting}
+          required
+        />
+        {#if handleHasDot}
+          <p class="hint warning">{$_('register.handleDotWarning')}</p>
+        {:else if fullHandle()}
+          <p class="hint">{$_('register.handleHint', { values: { handle: fullHandle() } })}</p>
+        {/if}
+      </div>
+
+      <div class="field">
+        <label for="password">{$_('register.password')}</label>
+        <input
+          id="password"
+          type="password"
+          bind:value={password}
+          placeholder={$_('register.passwordPlaceholder')}
+          disabled={submitting}
+          required
+          minlength="8"
+        />
+      </div>
+
+      <div class="field">
+        <label for="confirm-password">{$_('register.confirmPassword')}</label>
+        <input
+          id="confirm-password"
+          type="password"
+          bind:value={confirmPassword}
+          placeholder={$_('register.confirmPasswordPlaceholder')}
+          disabled={submitting}
+          required
+        />
+      </div>
+
+      <fieldset class="section-fieldset">
+        <legend>{$_('register.identityType')}</legend>
+        <p class="section-hint">{$_('register.identityHint')}</p>
+
+        <div class="radio-group">
+          <label class="radio-label">
+            <input type="radio" name="didType" value="plc" bind:group={didType} disabled={submitting} />
+            <span class="radio-content">
+              <strong>{$_('register.didPlc')}</strong> {$_('register.didPlcRecommended')}
+              <span class="radio-hint">{$_('register.didPlcHint')}</span>
+            </span>
+          </label>
+
+          <label class="radio-label">
+            <input type="radio" name="didType" value="web" bind:group={didType} disabled={submitting} />
+            <span class="radio-content">
+              <strong>{$_('register.didWeb')}</strong>
+              <span class="radio-hint">{$_('register.didWebHint')}</span>
+            </span>
+          </label>
+
+          <label class="radio-label">
+            <input type="radio" name="didType" value="web-external" bind:group={didType} disabled={submitting} />
+            <span class="radio-content">
+              <strong>{$_('register.didWebBYOD')}</strong>
+              <span class="radio-hint">{$_('register.didWebBYODHint')}</span>
+            </span>
+          </label>
         </div>
+
+        {#if didType === 'web'}
+          <div class="warning-box">
+            <strong>{$_('register.didWebWarningTitle')}</strong>
+            <ul>
+              <li><strong>{$_('register.didWebWarning1')}</strong> {$_('register.didWebWarning1Detail', { values: { did: `did:web:yourhandle.${serverInfo?.availableUserDomains?.[0] || 'this-pds.com'}` } })}</li>
+              <li><strong>{$_('register.didWebWarning2')}</strong> {$_('register.didWebWarning2Detail')}</li>
+              <li><strong>{$_('register.didWebWarning3')}</strong> {$_('register.didWebWarning3Detail')}</li>
+              <li><strong>{$_('register.didWebWarning4')}</strong> {$_('register.didWebWarning4Detail')}</li>
+            </ul>
+          </div>
+        {/if}
+
+        {#if didType === 'web-external'}
+          <div class="field">
+            <label for="external-did">{$_('register.externalDid')}</label>
+            <input
+              id="external-did"
+              type="text"
+              bind:value={externalDid}
+              placeholder={$_('register.externalDidPlaceholder')}
+              disabled={submitting}
+              required
+            />
+            <p class="hint">{$_('register.externalDidHint')}</p>
+          </div>
+        {/if}
+      </fieldset>
+
+      <fieldset class="section-fieldset">
+        <legend>{$_('register.contactMethod')}</legend>
+        <p class="section-hint">{$_('register.contactMethodHint')}</p>
+
         <div class="field">
-          <label for="password">Password</label>
-          <input
-            id="password"
-            type="password"
-            bind:value={password}
-            placeholder="At least 8 characters"
-            disabled={submitting}
-            required
-            minlength="8"
-          />
-        </div>
-        <div class="field">
-          <label for="confirm-password">Confirm Password</label>
-          <input
-            id="confirm-password"
-            type="password"
-            bind:value={confirmPassword}
-            placeholder="Confirm your password"
-            disabled={submitting}
-            required
-          />
+          <label for="verification-channel">{$_('register.verificationMethod')}</label>
+          <select id="verification-channel" bind:value={verificationChannel} disabled={submitting}>
+            <option value="email">{$_('register.email')}</option>
+            <option value="discord">{$_('register.discord')}</option>
+            <option value="telegram">{$_('register.telegram')}</option>
+            <option value="signal">{$_('register.signal')}</option>
+          </select>
         </div>
-        <fieldset class="identity-section">
-          <legend>Identity Type</legend>
-          <p class="section-hint">Choose how your decentralized identity will be managed.</p>
-          <div class="radio-group">
-            <label class="radio-label">
-              <input
-                type="radio"
-                name="didType"
-                value="plc"
-                bind:group={didType}
-                disabled={submitting}
-              />
-              <span class="radio-content">
-                <strong>did:plc</strong> (Recommended)
-                <span class="radio-hint">Portable identity managed by PLC Directory</span>
-              </span>
-            </label>
-            <label class="radio-label">
-              <input
-                type="radio"
-                name="didType"
-                value="web"
-                bind:group={didType}
-                disabled={submitting}
-              />
-              <span class="radio-content">
-                <strong>did:web</strong>
-                <span class="radio-hint">Identity hosted on this PDS (read warning below)</span>
-              </span>
-            </label>
-            <label class="radio-label">
-              <input
-                type="radio"
-                name="didType"
-                value="web-external"
-                bind:group={didType}
-                disabled={submitting}
-              />
-              <span class="radio-content">
-                <strong>did:web (BYOD)</strong>
-                <span class="radio-hint">Bring your own domain</span>
-              </span>
-            </label>
+
+        {#if verificationChannel === 'email'}
+          <div class="field">
+            <label for="email">{$_('register.emailAddress')}</label>
+            <input
+              id="email"
+              type="email"
+              bind:value={email}
+              placeholder={$_('register.emailPlaceholder')}
+              disabled={submitting}
+              required
+            />
           </div>
-          {#if didType === 'web'}
-            <div class="did-web-warning">
-              <strong>Important: Understand the trade-offs</strong>
-              <ul>
-                <li><strong>Permanent tie to this PDS:</strong> Your identity will be <code>did:web:yourhandle.{serverInfo?.availableUserDomains?.[0] || 'this-pds.com'}</code>. Even if you migrate to another PDS later, this server must continue hosting your DID document.</li>
-                <li><strong>No recovery mechanism:</strong> Unlike did:plc, did:web has no rotation keys. If this PDS goes offline permanently, your identity cannot be recovered.</li>
-                <li><strong>We commit to you:</strong> If you migrate away, we will continue serving a minimal DID document pointing to your new PDS. Your identity will remain functional.</li>
-                <li><strong>Recommendation:</strong> Choose did:plc unless you have a specific reason to prefer did:web.</li>
-              </ul>
-            </div>
-          {/if}
-          {#if didType === 'web-external'}
-            <div class="field">
-              <label for="external-did">Your did:web</label>
-              <input
-                id="external-did"
-                type="text"
-                bind:value={externalDid}
-                placeholder="did:web:yourdomain.com"
-                disabled={submitting}
-                required
-              />
-              <p class="hint">Your domain must serve a valid DID document at /.well-known/did.json pointing to this PDS</p>
-            </div>
-          {/if}
-        </fieldset>
-        <fieldset class="verification-section">
-          <legend>Contact Method</legend>
-          <p class="section-hint">Choose how you'd like to verify your account and receive notifications. You only need one.</p>
+        {:else if verificationChannel === 'discord'}
           <div class="field">
-            <label for="verification-channel">Verification Method</label>
-            <select
-              id="verification-channel"
-              bind:value={verificationChannel}
+            <label for="discord-id">{$_('register.discordId')}</label>
+            <input
+              id="discord-id"
+              type="text"
+              bind:value={discordId}
+              placeholder={$_('register.discordIdPlaceholder')}
               disabled={submitting}
-            >
-              <option value="email">Email</option>
-              <option value="discord">Discord</option>
-              <option value="telegram">Telegram</option>
-              <option value="signal">Signal</option>
-            </select>
+              required
+            />
+            <p class="hint">{$_('register.discordIdHint')}</p>
           </div>
-          {#if verificationChannel === 'email'}
-            <div class="field">
-              <label for="email">Email Address</label>
-              <input
-                id="email"
-                type="email"
-                bind:value={email}
-                placeholder="[e-mail]"
-                disabled={submitting}
-                required
-              />
-            </div>
-          {:else if verificationChannel === 'discord'}
-            <div class="field">
-              <label for="discord-id">Discord User ID</label>
-              <input
-                id="discord-id"
-                type="text"
-                bind:value={discordId}
-                placeholder="Your Discord user ID"
-                disabled={submitting}
-                required
-              />
-              <p class="hint">Your numeric Discord user ID (enable Developer Mode to find it)</p>
-            </div>
-          {:else if verificationChannel === 'telegram'}
-            <div class="field">
-              <label for="telegram-username">Telegram Username</label>
-              <input
-                id="telegram-username"
-                type="text"
-                bind:value={telegramUsername}
-                placeholder="@yourusername"
-                disabled={submitting}
-                required
-              />
-            </div>
-          {:else if verificationChannel === 'signal'}
-            <div class="field">
-              <label for="signal-number">Signal Phone Number</label>
-              <input
-                id="signal-number"
-                type="tel"
-                bind:value={signalNumber}
-                placeholder="[phone]"
-                disabled={submitting}
-                required
-              />
-              <p class="hint">Include country code (e.g., +1 for US)</p>
-            </div>
-          {/if}
-        </fieldset>
-        {#if serverInfo?.inviteCodeRequired}
+        {:else if verificationChannel === 'telegram'}
           <div class="field">
-            <label for="invite-code">Invite Code <span class="required">*</span></label>
+            <label for="telegram-username">{$_('register.telegramUsername')}</label>
             <input
-              id="invite-code"
+              id="telegram-username"
               type="text"
-              bind:value={inviteCode}
-              placeholder="Enter your invite code"
+              bind:value={telegramUsername}
+              placeholder={$_('register.telegramUsernamePlaceholder')}
               disabled={submitting}
               required
             />
+          </div>
+        {:else if verificationChannel === 'signal'}
+          <div class="field">
+            <label for="signal-number">{$_('register.signalNumber')}</label>
+            <input
+              id="signal-number"
+              type="tel"
+              bind:value={signalNumber}
+              placeholder={$_('register.signalNumberPlaceholder')}
+              disabled={submitting}
+              required
+            />
+            <p class="hint">{$_('register.signalNumberHint')}</p>
           </div>
         {/if}
-        <button type="submit" disabled={submitting}>
-          {submitting ? 'Creating account...' : 'Create Account'}
-        </button>
-      </form>
-      <p class="login-link">
-        Already have an account? <a href="#/login">Sign in</a>
-      </p>
-      <p class="login-link">
-        Want passwordless security? <a href="#/register-passkey">Create a passkey account</a>
-      </p>
-    {/if}
+      </fieldset>
+
+      {#if serverInfo?.inviteCodeRequired}
+        <div class="field">
+          <label for="invite-code">{$_('register.inviteCode')} <span class="required">{$_('register.inviteCodeRequired')}</span></label>
+          <input
+            id="invite-code"
+            type="text"
+            bind:value={inviteCode}
+            placeholder={$_('register.inviteCodePlaceholder')}
+            disabled={submitting}
+            required
+          />
+        </div>
+      {/if}
+
+      <button type="submit" disabled={submitting}>
+        {submitting ? $_('register.creating') : $_('register.createButton')}
+      </button>
+    </form>
+
+    <p class="link-text">
+      {$_('register.alreadyHaveAccount')} <a href="#/login">{$_('register.signIn')}</a>
+    </p>
+    <p class="link-text">
+      {$_('register.wantPasswordless')} <a href="#/register-passkey">{$_('register.createPasskeyAccount')}</a>
+    </p>
+  {/if}
 </div>
+
 <style>
-  .register-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+  .register-page {
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
+
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-3) 0;
   }
+
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
+
   .loading {
     text-align: center;
     color: var(--text-secondary);
   }
+
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-  }
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-  label {
-    font-size: 0.875rem;
-    font-weight: 500;
+    gap: var(--space-5);
   }
+
   .required {
     color: var(--error-text);
   }
-  input, select {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
+
+  .section-fieldset {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: var(--space-5);
   }
-  input:focus, select:focus {
-    outline: none;
-    border-color: var(--accent);
+
+  .section-fieldset legend {
+    font-weight: var(--font-semibold);
+    padding: 0 var(--space-3);
   }
-  .hint {
-    font-size: 0.75rem;
+
+  .section-hint {
+    font-size: var(--text-sm);
     color: var(--text-secondary);
-    margin: 0.25rem 0 0 0;
-  }
-  .hint.warning {
-    color: var(--warning-text, #856404);
-  }
-  .verification-section {
-    border: 1px solid var(--border-color-light);
-    border-radius: 6px;
-    padding: 1rem;
-    margin: 0.5rem 0;
-  }
-  .verification-section legend {
-    font-weight: 600;
-    padding: 0 0.5rem;
-    color: var(--text-primary);
-  }
-  .identity-section {
-    border: 1px solid var(--border-color-light);
-    border-radius: 6px;
-    padding: 1rem;
-    margin: 0.5rem 0;
-  }
-  .identity-section legend {
-    font-weight: 600;
-    padding: 0 0.5rem;
-    color: var(--text-primary);
+    margin: 0 0 var(--space-5) 0;
   }
+
   .radio-group {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--space-4);
   }
+
   .radio-label {
     display: flex;
     align-items: flex-start;
-    gap: 0.5rem;
+    gap: var(--space-3);
     cursor: pointer;
+    font-size: var(--text-base);
+    font-weight: var(--font-normal);
+    margin-bottom: 0;
   }
+
   .radio-label input[type="radio"] {
-    margin-top: 0.25rem;
+    margin-top: var(--space-1);
+    width: auto;
   }
+
   .radio-content {
     display: flex;
     flex-direction: column;
-    gap: 0.125rem;
+    gap: var(--space-1);
   }
+
   .radio-hint {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-secondary);
   }
-  .section-hint {
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    margin: 0 0 1rem 0;
+
+  .warning-box {
+    margin-top: var(--space-5);
+    padding: var(--space-5);
+    background: var(--warning-bg);
+    border: 1px solid var(--warning-border);
+    border-radius: var(--radius-lg);
+    font-size: var(--text-sm);
   }
-  .did-web-warning {
-    margin-top: 1rem;
-    padding: 1rem;
-    background: var(--warning-bg, #fff3cd);
-    border: 1px solid var(--warning-border, #ffc107);
-    border-radius: 6px;
-    font-size: 0.875rem;
+
+  .warning-box strong {
+    color: var(--warning-text);
   }
-  .did-web-warning strong {
-    color: var(--warning-text, #856404);
+
+  .warning-box ul {
+    margin: var(--space-4) 0 0 0;
+    padding-left: var(--space-5);
   }
-  .did-web-warning ul {
-    margin: 0.75rem 0 0 0;
-    padding-left: 1.25rem;
-  }
-  .did-web-warning li {
-    margin-bottom: 0.5rem;
-    line-height: 1.4;
+
+  .warning-box li {
+    margin-bottom: var(--space-3);
+    line-height: var(--leading-normal);
   }
-  .did-web-warning li:last-child {
+
+  .warning-box li:last-child {
     margin-bottom: 0;
   }
-  .did-web-warning code {
-    background: rgba(0, 0, 0, 0.1);
-    padding: 0.125rem 0.25rem;
-    border-radius: 3px;
-    font-size: 0.8rem;
+
+  button[type="submit"] {
+    margin-top: var(--space-3);
   }
-  button {
-    padding: 0.75rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    margin-top: 0.5rem;
-  }
-  button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  .error {
-    padding: 0.75rem;
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: 4px;
-    color: var(--error-text);
-  }
-  .login-link {
+
+  .link-text {
     text-align: center;
-    margin-top: 1.5rem;
+    margin-top: var(--space-6);
     color: var(--text-secondary);
   }
-  .login-link a {
+
+  .link-text a {
     color: var(--accent);
   }
 </style>

frontend/src/routes/RegisterPasskey.svelte

···
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError, type VerificationChannel, type DidType } from '../lib/api'
   import { getAuthState, confirmSignup, resendVerification } from '../lib/auth.svelte'
+  import { _ } from '../lib/i18n'
 
   const auth = getAuthState()
 
···
   })
 </script>
 
-<div class="register-passkey-container">
+<div class="register-page">
   <h1>Create Passkey Account</h1>
   <p class="subtitle">
     {#if step === 'info'}
···
   </p>
 
   {#if error}
-    <div class="error">{error}</div>
+    <div class="message error">{error}</div>
   {/if}
 
   {#if loadingServerInfo}
···
         {/if}
       </div>
 
-      <fieldset class="section">
+      <fieldset class="section-fieldset">
         <legend>Contact Method</legend>
         <p class="section-hint">Choose how you'd like to verify your account and receive notifications.</p>
         <div class="field">
           <label for="verification-channel">Verification Method</label>
-          <select
-            id="verification-channel"
-            bind:value={verificationChannel}
-            disabled={submitting}
-          >
+          <select id="verification-channel" bind:value={verificationChannel} disabled={submitting}>
             <option value="email">Email</option>
             <option value="discord">Discord</option>
             <option value="telegram">Telegram</option>
···
         {#if verificationChannel === 'email'}
           <div class="field">
             <label for="email">Email Address</label>
-            <input
-              id="email"
-              type="email"
-              bind:value={email}
-              placeholder="[e-mail]"
-              disabled={submitting}
-              required
-            />
+            <input id="email" type="email" bind:value={email} placeholder="[e-mail]" disabled={submitting} required />
           </div>
         {:else if verificationChannel === 'discord'}
           <div class="field">
             <label for="discord-id">Discord User ID</label>
-            <input
-              id="discord-id"
-              type="text"
-              bind:value={discordId}
-              placeholder="Your Discord user ID"
-              disabled={submitting}
-              required
-            />
+            <input id="discord-id" type="text" bind:value={discordId} placeholder="Your Discord user ID" disabled={submitting} required />
             <p class="hint">Your numeric Discord user ID (enable Developer Mode to find it)</p>
           </div>
         {:else if verificationChannel === 'telegram'}
           <div class="field">
             <label for="telegram-username">Telegram Username</label>
-            <input
-              id="telegram-username"
-              type="text"
-              bind:value={telegramUsername}
-              placeholder="@yourusername"
-              disabled={submitting}
-              required
-            />
+            <input id="telegram-username" type="text" bind:value={telegramUsername} placeholder="@yourusername" disabled={submitting} required />
           </div>
         {:else if verificationChannel === 'signal'}
           <div class="field">
             <label for="signal-number">Signal Phone Number</label>
-            <input
-              id="signal-number"
-              type="tel"
-              bind:value={signalNumber}
-              placeholder="[phone]"
-              disabled={submitting}
-              required
-            />
+            <input id="signal-number" type="tel" bind:value={signalNumber} placeholder="[phone]" disabled={submitting} required />
             <p class="hint">Include country code (e.g., +1 for US)</p>
           </div>
         {/if}
       </fieldset>
 
-      <fieldset class="section">
+      <fieldset class="section-fieldset">
         <legend>Identity Type</legend>
         <p class="section-hint">Choose how your decentralized identity will be managed.</p>
         <div class="radio-group">
           <label class="radio-label">
-            <input
-              type="radio"
-              name="didType"
-              value="plc"
-              bind:group={didType}
-              disabled={submitting}
-            />
+            <input type="radio" name="didType" value="plc" bind:group={didType} disabled={submitting} />
             <span class="radio-content">
               <strong>did:plc</strong> (Recommended)
               <span class="radio-hint">Portable identity managed by PLC Directory</span>
             </span>
           </label>
           <label class="radio-label">
-            <input
-              type="radio"
-              name="didType"
-              value="web"
-              bind:group={didType}
-              disabled={submitting}
-            />
+            <input type="radio" name="didType" value="web" bind:group={didType} disabled={submitting} />
             <span class="radio-content">
               <strong>did:web</strong>
               <span class="radio-hint">Identity hosted on this PDS (read warning below)</span>
             </span>
           </label>
           <label class="radio-label">
-            <input
-              type="radio"
-              name="didType"
-              value="web-external"
-              bind:group={didType}
-              disabled={submitting}
-            />
+            <input type="radio" name="didType" value="web-external" bind:group={didType} disabled={submitting} />
             <span class="radio-content">
               <strong>did:web (BYOD)</strong>
               <span class="radio-hint">Bring your own domain</span>
···
           </label>
         </div>
         {#if didType === 'web'}
-          <div class="did-web-warning">
+          <div class="warning-box">
             <strong>Important: Understand the trade-offs</strong>
             <ul>
-              <li><strong>Permanent tie to this PDS:</strong> Your identity will be <code>did:web:yourhandle.{serverInfo?.availableUserDomains?.[0] || 'this-pds.com'}</code>. Even if you migrate to another PDS later, this server must continue hosting your DID document.</li>
-              <li><strong>No recovery mechanism:</strong> Unlike did:plc, did:web has no rotation keys. If this PDS goes offline permanently, your identity cannot be recovered.</li>
-              <li><strong>We commit to you:</strong> If you migrate away, we will continue serving a minimal DID document pointing to your new PDS. Your identity will remain functional.</li>
+              <li><strong>Permanent tie to this PDS:</strong> Your identity will be <code>did:web:yourhandle.{serverInfo?.availableUserDomains?.[0] || 'this-pds.com'}</code>.</li>
+              <li><strong>No recovery mechanism:</strong> Unlike did:plc, did:web has no rotation keys.</li>
+              <li><strong>We commit to you:</strong> If you migrate away, we will continue serving a minimal DID document.</li>
               <li><strong>Recommendation:</strong> Choose did:plc unless you have a specific reason to prefer did:web.</li>
             </ul>
           </div>
···
         {#if didType === 'web-external'}
           <div class="field">
             <label for="external-did">Your did:web</label>
-            <input
-              id="external-did"
-              type="text"
-              bind:value={externalDid}
-              placeholder="did:web:yourdomain.com"
-              disabled={submitting}
-              required
-            />
+            <input id="external-did" type="text" bind:value={externalDid} placeholder="did:web:yourdomain.com" disabled={submitting} required />
             <p class="hint">Your domain must serve a valid DID document at /.well-known/did.json pointing to this PDS</p>
           </div>
         {/if}
···
       {#if serverInfo?.inviteCodeRequired}
         <div class="field">
           <label for="invite-code">Invite Code <span class="required">*</span></label>
-          <input
-            id="invite-code"
-            type="text"
-            bind:value={inviteCode}
-            placeholder="Enter your invite code"
-            disabled={submitting}
-            required
-          />
+          <input id="invite-code" type="text" bind:value={inviteCode} placeholder="Enter your invite code" disabled={submitting} required />
         </div>
       {/if}
 
       <div class="info-box">
         <strong>Why passkey-only?</strong>
-        <p>
-          Passkey accounts are more secure than password-based accounts because they:
-        </p>
+        <p>Passkey accounts are more secure than password-based accounts because they:</p>
         <ul>
           <li>Cannot be phished or stolen in data breaches</li>
           <li>Use hardware-backed cryptographic keys</li>
···
       </button>
     </form>
 
-    <p class="alt-link">
+    <p class="link-text">
       Want a traditional password? <a href="#/register">Register with password</a>
     </p>
   {:else if step === 'passkey'}
-    <div class="passkey-step">
+    <div class="step-content">
       <div class="field">
         <label for="passkey-name">Passkey Name (optional)</label>
-        <input
-          id="passkey-name"
-          type="text"
-          bind:value={passkeyName}
-          placeholder="e.g., MacBook Touch ID"
-          disabled={submitting}
-        />
+        <input id="passkey-name" type="text" bind:value={passkeyName} placeholder="e.g., MacBook Touch ID" disabled={submitting} />
         <p class="hint">A friendly name to identify this passkey</p>
       </div>
 
-      <div class="passkey-instructions">
+      <div class="info-box">
         <p>Click the button below to create your passkey. You'll be prompted to use:</p>
         <ul>
           <li>Touch ID or Face ID</li>
···
       </button>
     </div>
   {:else if step === 'app-password'}
-    <div class="app-password-step">
+    <div class="step-content">
       <div class="warning-box">
         <strong>Important: Save this app password!</strong>
-        <p>
-          This app password is required to sign into apps that don't support passkeys yet (like bsky.app).
-          You will only see this password once.
-        </p>
+        <p>This app password is required to sign into apps that don't support passkeys yet (like bsky.app). You will only see this password once.</p>
       </div>
 
       <div class="app-password-display">
-        <div class="app-password-label">
-          App Password for: <strong>{appPasswordResult?.appPasswordName}</strong>
-        </div>
+        <div class="app-password-label">App Password for: <strong>{appPasswordResult?.appPasswordName}</strong></div>
         <code class="app-password-code">{appPasswordResult?.appPassword}</code>
         <button type="button" class="copy-btn" onclick={copyAppPassword}>
           {appPasswordCopied ? 'Copied!' : 'Copy to Clipboard'}
         </button>
       </div>
 
-      <div class="field acknowledge-field">
+      <div class="field">
         <label class="checkbox-label">
-          <input
-            type="checkbox"
-            bind:checked={appPasswordAcknowledged}
-          />
+          <input type="checkbox" bind:checked={appPasswordAcknowledged} />
           <span>I have saved my app password in a secure location</span>
         </label>
       </div>
 
-      <button onclick={handleFinish} disabled={!appPasswordAcknowledged}>
-        Continue
-      </button>
+      <button onclick={handleFinish} disabled={!appPasswordAcknowledged}>Continue</button>
     </div>
   {:else if step === 'verify'}
-    <div class="verify-step">
-      <p class="verify-info">
-        We've sent a verification code to your {channelLabel(verificationChannel)}.
-        Enter it below to complete your account setup.
-      </p>
+    <div class="step-content">
+      <p class="info-text">We've sent a verification code to your {channelLabel(verificationChannel)}. Enter it below to complete your account setup.</p>
 
       {#if resendMessage}
-        <div class="success">{resendMessage}</div>
+        <div class="message success">{resendMessage}</div>
       {/if}
 
       <form onsubmit={(e) => { e.preventDefault(); handleVerification(); }}>
         <div class="field">
           <label for="verification-code">Verification Code</label>
-          <input
-            id="verification-code"
-            type="text"
-            bind:value={verificationCode}
-            placeholder="Enter 6-digit code"
-            disabled={submitting}
-            required
-            maxlength="6"
-            inputmode="numeric"
-            autocomplete="one-time-code"
-          />
+          <input id="verification-code" type="text" bind:value={verificationCode} placeholder="Enter 6-digit code" disabled={submitting} required maxlength="6" inputmode="numeric" autocomplete="one-time-code" />
         </div>
 
         <button type="submit" disabled={submitting || !verificationCode.trim()}>
···
       </form>
     </div>
   {:else if step === 'success'}
-    <div class="success-step">
+    <div class="success-content">
       <div class="success-icon">&#x2714;</div>
       <h2>Account Created!</h2>
       <p>Your passkey-only account has been created successfully.</p>
       <p class="handle-display">@{setupData?.handle}</p>
-
-      <button onclick={goToLogin}>
-        Sign In
-      </button>
+      <button onclick={goToLogin}>Sign In</button>
     </div>
   {/if}
 </div>
 
 <style>
-  .register-passkey-container {
-    max-width: 450px;
-    margin: 4rem auto;
-    padding: 2rem;
+  .register-page {
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
 
-  h1 {
-    margin: 0 0 0.5rem 0;
-  }
-
-  h2 {
-    margin: 0 0 0.5rem 0;
+  h1, h2 {
+    margin: 0 0 var(--space-3) 0;
   }
 
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
 
   .loading {
···
     color: var(--text-secondary);
   }
 
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .field {
+  form, .step-content {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  label {
-    font-size: 0.875rem;
-    font-weight: 500;
+    gap: var(--space-4);
   }
 
   .required {
     color: var(--error-text);
   }
 
-  input, select {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
+  .section-fieldset {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: var(--space-5);
   }
 
-  input:focus, select:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
-  .hint {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
-    margin: 0.25rem 0 0 0;
-  }
-
-  .hint.warning {
-    color: var(--warning-text);
-  }
-
-  .section {
-    border: 1px solid var(--border-color-light);
-    border-radius: 6px;
-    padding: 1rem;
-    margin: 0.5rem 0;
-  }
-
-  .section legend {
-    font-weight: 600;
-    padding: 0 0.5rem;
-    color: var(--text-primary);
+  .section-fieldset legend {
+    font-weight: var(--font-semibold);
+    padding: 0 var(--space-3);
   }
 
   .section-hint {
-    font-size: 0.8rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
-    margin: 0 0 1rem 0;
+    margin: 0 0 var(--space-5) 0;
   }
 
   .radio-group {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--space-4);
   }
 
   .radio-label {
     display: flex;
     align-items: flex-start;
-    gap: 0.5rem;
+    gap: var(--space-3);
     cursor: pointer;
+    font-size: var(--text-base);
+    font-weight: var(--font-normal);
+    margin-bottom: 0;
   }
 
   .radio-label input[type="radio"] {
-    margin-top: 0.25rem;
+    margin-top: var(--space-1);
+    width: auto;
   }
 
   .radio-content {
     display: flex;
     flex-direction: column;
-    gap: 0.125rem;
+    gap: var(--space-1);
   }
 
   .radio-hint {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-secondary);
   }
 
-  .did-web-warning {
-    margin-top: 1rem;
-    padding: 1rem;
-    background: var(--warning-bg, #fff3cd);
-    border: 1px solid var(--warning-border, #ffc107);
-    border-radius: 6px;
-    font-size: 0.875rem;
+  .warning-box {
+    margin-top: var(--space-5);
+    padding: var(--space-5);
+    background: var(--warning-bg);
+    border: 1px solid var(--warning-border);
+    border-radius: var(--radius-lg);
+    font-size: var(--text-sm);
   }
 
-  .did-web-warning strong {
-    color: var(--warning-text, #856404);
+  .warning-box strong {
+    display: block;
+    margin-bottom: var(--space-3);
+    color: var(--warning-text);
   }
 
-  .did-web-warning ul {
-    margin: 0.75rem 0 0 0;
-    padding-left: 1.25rem;
+  .warning-box p {
+    margin: 0;
+    color: var(--warning-text);
   }
 
-  .did-web-warning li {
-    margin-bottom: 0.5rem;
-    line-height: 1.4;
+  .warning-box ul {
+    margin: var(--space-4) 0 0 0;
+    padding-left: var(--space-5);
   }
 
-  .did-web-warning li:last-child {
-    margin-bottom: 0;
+  .warning-box li {
+    margin-bottom: var(--space-3);
+    line-height: var(--leading-normal);
   }
 
-  .did-web-warning code {
-    background: rgba(0, 0, 0, 0.1);
-    padding: 0.125rem 0.25rem;
-    border-radius: 3px;
-    font-size: 0.8rem;
+  .warning-box li:last-child {
+    margin-bottom: 0;
   }
 
   .info-box {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 1rem;
-    font-size: 0.875rem;
+    border-radius: var(--radius-lg);
+    padding: var(--space-5);
+    font-size: var(--text-sm);
   }
 
   .info-box strong {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-3);
   }
 
   .info-box p {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-3) 0;
     color: var(--text-secondary);
   }
 
   .info-box ul {
     margin: 0;
-    padding-left: 1.25rem;
+    padding-left: var(--space-5);
     color: var(--text-secondary);
   }
 
   .info-box li {
-    margin-bottom: 0.25rem;
-  }
-
-  button {
-    padding: 0.75rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    margin-top: 0.5rem;
-  }
-
-  button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  button.secondary {
-    background: transparent;
-    color: var(--text-secondary);
-    border: 1px solid var(--border-color-light);
-  }
-
-  button.secondary:hover:not(:disabled) {
-    background: var(--bg-secondary);
-  }
-
-  .error {
-    padding: 0.75rem;
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: 4px;
-    color: var(--error-text);
-    margin-bottom: 1rem;
-  }
-
-  .alt-link {
-    text-align: center;
-    margin-top: 1.5rem;
-    color: var(--text-secondary);
-  }
-
-  .alt-link a {
-    color: var(--accent);
-  }
-
-  .passkey-step {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .passkey-instructions {
-    background: var(--bg-secondary);
-    border-radius: 6px;
-    padding: 1rem;
-  }
-
-  .passkey-instructions p {
-    margin: 0 0 0.5rem 0;
-    color: var(--text-secondary);
-    font-size: 0.875rem;
-  }
-
-  .passkey-instructions ul {
-    margin: 0;
-    padding-left: 1.25rem;
-    color: var(--text-secondary);
-    font-size: 0.875rem;
+    margin-bottom: var(--space-2);
   }
 
   .passkey-btn {
-    padding: 1rem;
-    font-size: 1.125rem;
-  }
-
-  .app-password-step {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .warning-box {
-    background: var(--warning-bg);
-    border: 1px solid var(--warning-border, #ffc107);
-    border-radius: 6px;
-    padding: 1rem;
-  }
-
-  .warning-box strong {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: var(--warning-text);
-  }
-
-  .warning-box p {
-    margin: 0;
-    font-size: 0.875rem;
-    color: var(--warning-text);
+    padding: var(--space-5);
+    font-size: var(--text-lg);
   }
 
   .app-password-display {
     background: var(--bg-card);
     border: 2px solid var(--accent);
-    border-radius: 8px;
-    padding: 1.5rem;
+    border-radius: var(--radius-xl);
+    padding: var(--space-6);
     text-align: center;
   }
 
   .app-password-label {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
-    margin-bottom: 0.75rem;
+    margin-bottom: var(--space-4);
   }
 
   .app-password-code {
     display: block;
-    font-size: 1.5rem;
-    font-family: monospace;
+    font-size: var(--text-xl);
+    font-family: ui-monospace, monospace;
     letter-spacing: 0.1em;
-    padding: 1rem;
+    padding: var(--space-5);
     background: var(--bg-input);
-    border-radius: 4px;
-    margin-bottom: 1rem;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-4);
     user-select: all;
   }
 
   .copy-btn {
     margin-top: 0;
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-  }
-
-  .acknowledge-field {
-    margin-top: 0;
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--text-sm);
   }
 
   .checkbox-label {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-3);
     cursor: pointer;
-    font-weight: normal;
+    font-weight: var(--font-normal);
   }
 
   .checkbox-label input[type="checkbox"] {
···
     padding: 0;
   }
 
-  .success-step {
+  .success-content {
     text-align: center;
   }
 
   .success-icon {
-    font-size: 4rem;
+    font-size: var(--text-4xl);
     color: var(--success-text);
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
 
-  .success-step p {
+  .success-content p {
     color: var(--text-secondary);
   }
 
   .handle-display {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--text-primary) !important;
-    margin: 1rem 0;
+    font-size: var(--text-xl);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    margin: var(--space-4) 0;
   }
 
-  .verify-step {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+  .info-text {
+    color: var(--text-secondary);
+    margin: 0;
   }
 
-  .verify-info {
+  .link-text {
+    text-align: center;
+    margin-top: var(--space-6);
     color: var(--text-secondary);
-    margin: 0;
   }
 
-  .success {
-    padding: 0.75rem;
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    border-radius: 4px;
-    color: var(--success-text);
+  .link-text a {
+    color: var(--accent);
   }
 </style>

frontend/src/routes/RepoExplorer.svelte

···
   import { getAuthState } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
+  import { _, locale } from '../lib/i18n'
   const auth = getAuthState()
   type View = 'collections' | 'records' | 'record' | 'create'
   let view = $state<View>('collections')
···
     } else if (e instanceof Error) {
       error = { message: e.message }
     } else {
-      error = { message: 'An unknown error occurred' }
+      error = { message: $_('repoExplorer.unknownError') }
     }
   }
   let newCollection = $state('')
···
   function startCreate(collection?: string) {
     newCollection = collection || 'app.bsky.feed.post'
     newRkey = ''
+    const currentLocale = $locale?.split('-')[0] || 'en'
     const exampleRecords: Record<string, unknown> = {
       'app.bsky.feed.post': {
         $type: 'app.bsky.feed.post',
-        text: 'Hello from my PDS! This is my first post.',
+        text: $_('repoExplorer.demoPostText'),
+        langs: [currentLocale],
         createdAt: new Date().toISOString(),
       },
       'app.bsky.actor.profile': {
         $type: 'app.bsky.actor.profile',
-        displayName: 'Your Display Name',
-        description: 'A short bio about yourself.',
+        displayName: $_('repoExplorer.demoDisplayName'),
+        description: $_('repoExplorer.demoBio'),
       },
       'app.bsky.graph.follow': {
         $type: 'app.bsky.graph.follow',
···
       jsonError = null
       return parsed
     } catch (e) {
-      jsonError = e instanceof Error ? e.message : 'Invalid JSON'
+      jsonError = e instanceof Error ? e.message : $_('repoExplorer.invalidJson')
       return null
     }
   }
···
     const record = validateJson()
     if (!record) return
     if (!newCollection.trim()) {
-      error = { message: 'Collection is required' }
+      error = { message: $_('repoExplorer.collectionRequired') }
       return
     }
     saving = true
···
         record,
         newRkey.trim() || undefined
       )
-      success = `Record created: ${result.uri}`
+      success = $_('repoExplorer.recordCreated', { values: { uri: result.uri } })
       await loadCollections()
       await selectCollection(newCollection.trim())
     } catch (e) {
···
         selectedRecord.rkey,
         record
       )
-      success = 'Record updated'
+      success = $_('repoExplorer.recordUpdated')
       const updated = await api.getRecord(
         auth.session.accessJwt,
         auth.session.did,
···
   }
   async function handleDelete() {
     if (!auth.session || !selectedRecord || !selectedCollection) return
-    if (!confirm(`Delete record ${selectedRecord.rkey}? This cannot be undone.`)) return
+    if (!confirm($_('repoExplorer.deleteConfirm', { values: { rkey: selectedRecord.rkey } }))) return
     saving = true
     error = null
     try {
···
         selectedCollection,
         selectedRecord.rkey
       )
-      success = 'Record deleted'
+      success = $_('repoExplorer.recordDeleted')
       selectedRecord = null
       await selectCollection(selectedCollection)
     } catch (e) {
···
 <div class="page">
   <header>
     <div class="breadcrumb">
-      <a href="#/dashboard" class="back">&larr; Dashboard</a>
+      <a href="#/dashboard" class="back">{$_('common.backToDashboard')}</a>
       {#if view !== 'collections'}
         <span class="sep">/</span>
         <button class="breadcrumb-link" onclick={goBack}>
-          {view === 'records' || view === 'create' ? 'Collections' : selectedCollection}
+          {view === 'records' || view === 'create' ? $_('repoExplorer.collections') : selectedCollection}
         </button>
       {/if}
       {#if view === 'record' && selectedRecord}
···
       {/if}
       {#if view === 'create'}
         <span class="sep">/</span>
-        <span class="current">New Record</span>
+        <span class="current">{$_('repoExplorer.newRecord')}</span>
       {/if}
     </div>
     <h1>
       {#if view === 'collections'}
-        Repository Explorer
+        {$_('repoExplorer.title')}
       {:else if view === 'records'}
         {selectedCollection}
       {:else if view === 'record'}
-        Record Detail
+        {$_('repoExplorer.recordDetails')}
       {:else}
-        Create Record
+        {$_('repoExplorer.createRecord')}
       {/if}
     </h1>
     {#if auth.session}
···
     <div class="message success">{success}</div>
   {/if}
   {#if loading}
-    <p class="loading-text">Loading...</p>
+    <p class="loading-text">{$_('common.loading')}</p>
   {:else if view === 'collections'}
     <div class="toolbar">
       <input
         type="text"
-        placeholder="Filter collections..."
+        placeholder={$_('repoExplorer.filterCollections')}
         bind:value={filter}
         class="filter-input"
       />
-      <button class="primary" onclick={() => startCreate()}>Create Record</button>
+      <button class="primary" onclick={() => startCreate()}>{$_('repoExplorer.createRecord')}</button>
     </div>
     {#if collections.length === 0}
-      <p class="empty">No collections yet. Create your first record to get started.</p>
+      <p class="empty">{$_('repoExplorer.noCollectionsYet')}</p>
     {:else}
       <div class="collections">
         {#each [...groupedCollections.entries()] as [authority, nsids]}
···
     <div class="toolbar">
       <input
         type="text"
-        placeholder="Filter records..."
+        placeholder={$_('repoExplorer.filterRecords')}
         bind:value={filter}
         class="filter-input"
       />
-      <button class="primary" onclick={() => startCreate(selectedCollection!)}>Create Record</button>
+      <button class="primary" onclick={() => startCreate(selectedCollection!)}>{$_('repoExplorer.createRecord')}</button>
     </div>
     {#if records.length === 0}
-      <p class="empty">No records in this collection.</p>
+      <p class="empty">{$_('repoExplorer.noRecords')}</p>
     {:else}
       <ul class="record-list">
         {#each filteredRecords as record}
···
       {#if recordsCursor}
         <div class="load-more">
           <button onclick={loadMoreRecords} disabled={loadingMore}>
-            {loadingMore ? 'Loading...' : 'Load More'}
+            {loadingMore ? $_('common.loading') : $_('repoExplorer.loadMore')}
           </button>
         </div>
       {/if}
···
       </div>
       <form onsubmit={handleUpdate}>
         <div class="editor-container">
-          <label for="record-json">Record JSON</label>
+          <label for="record-json">{$_('repoExplorer.recordJson')}</label>
           <textarea
             id="record-json"
             bind:value={recordJson}
···
         </div>
         <div class="actions">
           <button type="submit" class="primary" disabled={saving || !!jsonError}>
-            {saving ? 'Saving...' : 'Update Record'}
+            {saving ? $_('repoExplorer.saving') : $_('repoExplorer.updateRecord')}
           </button>
           <button type="button" class="danger" onclick={handleDelete} disabled={saving}>
-            Delete
+            {$_('common.delete')}
           </button>
         </div>
       </form>
···
   {:else if view === 'create'}
     <form class="create-form" onsubmit={handleCreate}>
       <div class="field">
-        <label for="collection">Collection (NSID)</label>
+        <label for="collection">{$_('repoExplorer.collectionNsid')}</label>
         <input
           id="collection"
           type="text"
···
         />
       </div>
       <div class="field">
-        <label for="rkey">Record Key (optional)</label>
+        <label for="rkey">{$_('repoExplorer.recordKeyOptional')}</label>
         <input
           id="rkey"
           type="text"
           bind:value={newRkey}
-          placeholder="Auto-generated if empty (TID)"
+          placeholder={$_('repoExplorer.autoGenerated')}
           disabled={saving}
         />
-        <p class="hint">Leave empty to auto-generate a TID-based key</p>
+        <p class="hint">{$_('repoExplorer.autoGeneratedHint')}</p>
       </div>
       <div class="editor-container">
-        <label for="new-record-json">Record JSON</label>
+        <label for="new-record-json">{$_('repoExplorer.recordJson')}</label>
         <textarea
           id="new-record-json"
           bind:value={recordJson}
···
       </div>
       <div class="actions">
         <button type="submit" class="primary" disabled={saving || !!jsonError || !newCollection.trim()}>
-          {saving ? 'Creating...' : 'Create Record'}
+          {saving ? $_('repoExplorer.creating') : $_('repoExplorer.createRecord')}
         </button>
         <button type="button" class="secondary" onclick={goBack}>
-          Cancel
+          {$_('common.cancel')}
         </button>
       </div>
     </form>
···
 </div>
 <style>
   .page {
-    max-width: 900px;
+    max-width: var(--width-lg);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   header {
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--space-6);
   }
+
   .breadcrumb {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-2);
   }
+
   .back {
     color: var(--text-secondary);
     text-decoration: none;
   }
+
   .back:hover {
     color: var(--accent);
   }
+
   .sep {
     color: var(--text-muted);
   }
+
   .breadcrumb-link {
     background: none;
     border: none;
···
     cursor: pointer;
     font-size: inherit;
   }
+
   .breadcrumb-link:hover {
     text-decoration: underline;
   }
+
   .current {
     color: var(--text-secondary);
   }
+
   h1 {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: var(--text-xl);
   }
+
   .did {
-    margin: 0.25rem 0 0 0;
+    margin: var(--space-1) 0 0 0;
     font-family: monospace;
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-muted);
     word-break: break-all;
   }
+
   .message {
-    padding: 1rem;
-    border-radius: 8px;
-    margin-bottom: 1rem;
+    padding: var(--space-4);
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-4);
   }
+
   .message.error {
     background: var(--error-bg);
     border: 1px solid var(--error-border);
     color: var(--error-text);
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
+
   .error-code {
     font-family: monospace;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     opacity: 0.9;
   }
+
   .error-message {
-    font-size: 0.9375rem;
+    font-size: var(--text-sm);
     line-height: 1.5;
   }
+
   .message.success {
     background: var(--success-bg);
     border: 1px solid var(--success-border);
     color: var(--success-text);
   }
+
   .loading-text {
     text-align: center;
     color: var(--text-secondary);
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   .toolbar {
     display: flex;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
   }
+
   .filter-input {
     flex: 1;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 0.875rem;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
     background: var(--bg-input);
     color: var(--text-primary);
   }
+
   .filter-input:focus {
     outline: none;
     border-color: var(--accent);
   }
+
   button.primary {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   button.primary:hover:not(:disabled) {
     background: var(--accent-hover);
   }
+
   button.primary:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
   button.secondary {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: transparent;
     color: var(--text-secondary);
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   button.secondary:hover:not(:disabled) {
     background: var(--bg-secondary);
   }
+
   button.danger {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: transparent;
     color: var(--error-text);
     border: 1px solid var(--error-text);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   button.danger:hover:not(:disabled) {
     background: var(--error-bg);
   }
+
   .empty {
     text-align: center;
     color: var(--text-secondary);
-    padding: 3rem;
+    padding: var(--space-8);
     background: var(--bg-secondary);
-    border-radius: 8px;
+    border-radius: var(--radius-xl);
   }
+
   .collections {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
   }
+
   .collection-group {
     background: var(--bg-secondary);
-    border-radius: 8px;
-    padding: 1rem;
+    border-radius: var(--radius-xl);
+    padding: var(--space-4);
   }
+
   .authority {
-    margin: 0 0 0.75rem 0;
-    font-size: 0.875rem;
+    margin: 0 0 var(--space-3) 0;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
-    font-weight: 500;
+    font-weight: var(--font-medium);
   }
+
   .nsid-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
+
   .collection-link {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     text-align: left;
     color: var(--text-primary);
-    transition: border-color 0.15s;
+    transition: border-color var(--transition-fast);
   }
+
   .collection-link:hover {
     border-color: var(--accent);
   }
+
   .nsid {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--accent);
   }
+
   .arrow {
     color: var(--text-muted);
   }
+
   .record-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
+
   .record-item {
     display: block;
     width: 100%;
-    padding: 1rem;
+    padding: var(--space-4);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     text-align: left;
     color: var(--text-primary);
-    transition: border-color 0.15s;
+    transition: border-color var(--transition-fast);
   }
+
   .record-item:hover {
     border-color: var(--accent);
   }
+
   .record-info {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-2);
   }
+
   .rkey {
     font-family: monospace;
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--accent);
   }
+
   .cid {
     font-family: monospace;
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-muted);
   }
+
   .record-preview {
     margin: 0;
-    padding: 0.5rem;
+    padding: var(--space-2);
     background: var(--bg-secondary);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     font-family: monospace;
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-secondary);
     white-space: pre-wrap;
     word-break: break-word;
     max-height: 100px;
     overflow: hidden;
   }
+
   .load-more {
     text-align: center;
-    padding: 1rem;
+    padding: var(--space-4);
   }
+
   .load-more button {
-    padding: 0.5rem 2rem;
+    padding: var(--space-2) var(--space-7);
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     color: var(--text-primary);
   }
+
   .load-more button:hover:not(:disabled) {
     background: var(--bg-card);
   }
+
   .record-detail {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: var(--space-6);
   }
+
   .record-meta {
     background: var(--bg-secondary);
-    padding: 1rem;
-    border-radius: 8px;
+    padding: var(--space-4);
+    border-radius: var(--radius-xl);
   }
+
   .record-meta dl {
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: 0.5rem 1rem;
+    gap: var(--space-2) var(--space-4);
     margin: 0;
   }
+
   .record-meta dt {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--text-secondary);
   }
+
   .record-meta dd {
     margin: 0;
   }
+
   .mono {
     font-family: monospace;
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     word-break: break-all;
   }
+
   .field {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .field label {
     display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 0.25rem;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    margin-bottom: var(--space-1);
   }
+
   .field input {
     width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
+    padding: var(--space-3);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
     background: var(--bg-input);
     color: var(--text-primary);
     box-sizing: border-box;
   }
+
   .field input:focus {
     outline: none;
     border-color: var(--accent);
   }
+
   .hint {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-muted);
-    margin: 0.25rem 0 0 0;
+    margin: var(--space-1) 0 0 0;
   }
+
   .editor-container {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .editor-container label {
     display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 0.25rem;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    margin-bottom: var(--space-1);
   }
+
   textarea {
     width: 100%;
     min-height: 300px;
-    padding: 1rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
+    padding: var(--space-4);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
     font-family: monospace;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     background: var(--bg-input);
     color: var(--text-primary);
     resize: vertical;
     box-sizing: border-box;
   }
+
   textarea:focus {
     outline: none;
     border-color: var(--accent);
   }
+
   textarea.has-error {
     border-color: var(--error-text);
   }
+
   .json-error {
-    margin: 0.25rem 0 0 0;
-    font-size: 0.75rem;
+    margin: var(--space-1) 0 0 0;
+    font-size: var(--text-xs);
     color: var(--error-text);
   }
+
   .actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
+
   .create-form {
     background: var(--bg-secondary);
-    padding: 1.5rem;
-    border-radius: 8px;
+    padding: var(--space-6);
+    border-radius: var(--radius-xl);
   }
 </style>

frontend/src/routes/RequestPasskeyRecovery.svelte

···
 <script lang="ts">
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
 
   let identifier = $state('')
   let submitting = $state(false)
···
   }
 </script>
 
-<div class="recovery-container">
+<div class="recovery-page">
   {#if success}
     <div class="success-content">
-      <h1>Recovery Link Sent</h1>
-      <p class="subtitle">
-        If your account exists and is a passkey-only account, you'll receive a recovery link
-        at your preferred notification channel.
-      </p>
-      <p class="info">
-        The link will expire in 1 hour. Check your email, Discord, Telegram, or Signal
-        depending on your account settings.
-      </p>
-      <button onclick={() => navigate('/login')}>Back to Sign In</button>
+      <h1>{$_('requestPasskeyRecovery.successTitle')}</h1>
+      <p class="subtitle">{$_('requestPasskeyRecovery.successMessage')}</p>
+      <p class="info-text">{$_('requestPasskeyRecovery.successInfo')}</p>
+      <button onclick={() => navigate('/login')}>{$_('requestPasskeyRecovery.backToLogin')}</button>
     </div>
   {:else}
-    <h1>Recover Passkey Account</h1>
-    <p class="subtitle">
-      Lost access to your passkey? Enter your handle or email and we'll send you a recovery link.
-    </p>
+    <h1>{$_('requestPasskeyRecovery.title')}</h1>
+    <p class="subtitle">{$_('requestPasskeyRecovery.subtitle')}</p>
 
     {#if error}
-      <div class="error">{error}</div>
+      <div class="message error">{error}</div>
     {/if}
 
     <form onsubmit={handleSubmit}>
       <div class="field">
-        <label for="identifier">Handle or Email</label>
+        <label for="identifier">{$_('requestPasskeyRecovery.handleOrEmail')}</label>
         <input
           id="identifier"
           type="text"
           bind:value={identifier}
-          placeholder="handle or [e-mail]"
+          placeholder={$_('requestPasskeyRecovery.emailPlaceholder')}
           disabled={submitting}
           required
         />
       </div>
 
       <div class="info-box">
-        <strong>How it works</strong>
-        <p>
-          We'll send a secure link to your registered notification channel.
-          Click the link to set a temporary password. Then you can sign in
-          and add a new passkey.
-        </p>
+        <strong>{$_('requestPasskeyRecovery.howItWorks')}</strong>
+        <p>{$_('requestPasskeyRecovery.howItWorksDetail')}</p>
       </div>
 
       <button type="submit" disabled={submitting || !identifier.trim()}>
-        {submitting ? 'Sending...' : 'Send Recovery Link'}
+        {submitting ? $_('requestPasskeyRecovery.sending') : $_('requestPasskeyRecovery.sendRecoveryLink')}
       </button>
     </form>
   {/if}
 
-  <p class="back-link">
-    <a href="#/login">Back to Sign In</a>
+  <p class="link-text">
+    <a href="#/login">{$_('requestPasskeyRecovery.backToLogin')}</a>
   </p>
 </div>
 
 <style>
-  .recovery-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+  .recovery-page {
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
 
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-3) 0;
   }
 
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
 
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-  }
-
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  label {
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
-  input {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
-  }
-
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
+    gap: var(--space-4);
   }
 
   .info-box {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 1rem;
-    font-size: 0.875rem;
+    border-radius: var(--radius-lg);
+    padding: var(--space-5);
+    font-size: var(--text-sm);
   }
 
   .info-box strong {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-3);
   }
 
   .info-box p {
···
     color: var(--text-secondary);
   }
 
-  button {
-    padding: 0.75rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-  }
-
-  button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .error {
-    padding: 0.75rem;
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: 4px;
-    color: var(--error-text);
-    margin-bottom: 1rem;
-  }
-
   .success-content {
     text-align: center;
   }
 
-  .info {
+  .info-text {
     color: var(--text-secondary);
-    font-size: 0.875rem;
-    margin-bottom: 1.5rem;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-6);
   }
 
-  .back-link {
+  .link-text {
     text-align: center;
-    margin-top: 2rem;
+    margin-top: var(--space-7);
   }
 
-  .back-link a {
+  .link-text a {
     color: var(--accent);
-    text-decoration: none;
-  }
-
-  .back-link a:hover {
-    text-decoration: underline;
   }
 </style>

frontend/src/routes/ResetPassword.svelte

···
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
   import { getAuthState } from '../lib/auth.svelte'
+  import { _ } from '../lib/i18n'
+
   const auth = getAuthState()
+
   let email = $state('')
   let token = $state('')
   let newPassword = $state('')
···
   let error = $state<string | null>(null)
   let success = $state<string | null>(null)
   let tokenSent = $state(false)
+
   $effect(() => {
     if (auth.session) {
       navigate('/dashboard')
     }
   })
+
   async function handleRequestReset(e: Event) {
     e.preventDefault()
     if (!email) return
···
     try {
       await api.requestPasswordReset(email)
       tokenSent = true
-      success = 'Password reset code sent! Check your preferred notification channel.'
+      success = $_('resetPassword.codeSent')
     } catch (e) {
       error = e instanceof ApiError ? e.message : 'Failed to send reset code'
     } finally {
       submitting = false
     }
   }
+
   async function handleReset(e: Event) {
     e.preventDefault()
     if (!token || !newPassword || !confirmPassword) return
     if (newPassword !== confirmPassword) {
-      error = 'Passwords do not match'
+      error = $_('resetPassword.passwordsMismatch')
       return
     }
     if (newPassword.length < 8) {
-      error = 'Password must be at least 8 characters'
+      error = $_('resetPassword.passwordLength')
       return
     }
     submitting = true
···
     success = null
     try {
       await api.resetPassword(token, newPassword)
-      success = 'Password reset successfully!'
+      success = $_('resetPassword.success')
       setTimeout(() => navigate('/login'), 2000)
     } catch (e) {
       error = e instanceof ApiError ? e.message : 'Failed to reset password'
···
     }
   }
 </script>
-<div class="reset-container">
+
+<div class="reset-page">
   {#if error}
     <div class="message error">{error}</div>
   {/if}
   {#if success}
     <div class="message success">{success}</div>
   {/if}
+
   {#if tokenSent}
-    <h1>Reset Password</h1>
-    <p class="subtitle">Enter the code you received and choose a new password.</p>
+    <h1>{$_('resetPassword.title')}</h1>
+    <p class="subtitle">{$_('resetPassword.subtitle')}</p>
+
     <form onsubmit={handleReset}>
       <div class="field">
-        <label for="token">Reset Code</label>
+        <label for="token">{$_('resetPassword.code')}</label>
         <input
           id="token"
           type="text"
           bind:value={token}
-          placeholder="Enter reset code"
+          placeholder={$_('resetPassword.codePlaceholder')}
           disabled={submitting}
           required
         />
       </div>
       <div class="field">
-        <label for="new-password">New Password</label>
+        <label for="new-password">{$_('resetPassword.newPassword')}</label>
         <input
           id="new-password"
           type="password"
           bind:value={newPassword}
-          placeholder="At least 8 characters"
+          placeholder={$_('resetPassword.newPasswordPlaceholder')}
           disabled={submitting}
           required
           minlength="8"
         />
       </div>
       <div class="field">
-        <label for="confirm-password">Confirm Password</label>
+        <label for="confirm-password">{$_('resetPassword.confirmPassword')}</label>
         <input
           id="confirm-password"
           type="password"
           bind:value={confirmPassword}
-          placeholder="Confirm new password"
+          placeholder={$_('resetPassword.confirmPasswordPlaceholder')}
           disabled={submitting}
           required
         />
       </div>
       <button type="submit" disabled={submitting || !token || !newPassword || !confirmPassword}>
-        {submitting ? 'Resetting...' : 'Reset Password'}
+        {submitting ? $_('resetPassword.resetting') : $_('resetPassword.resetButton')}
       </button>
       <button type="button" class="secondary" onclick={() => { tokenSent = false; token = ''; newPassword = ''; confirmPassword = '' }}>
-        Request New Code
+        {$_('resetPassword.requestNewCode')}
       </button>
     </form>
   {:else}
-    <h1>Forgot Password</h1>
-    <p class="subtitle">Enter your handle or email and we'll send you a code to reset your password.</p>
+    <h1>{$_('resetPassword.forgotTitle')}</h1>
+    <p class="subtitle">{$_('resetPassword.forgotSubtitle')}</p>
+
     <form onsubmit={handleRequestReset}>
       <div class="field">
-        <label for="email">Handle or Email</label>
+        <label for="email">{$_('resetPassword.handleOrEmail')}</label>
         <input
           id="email"
           type="text"
           bind:value={email}
-          placeholder="handle or [e-mail]"
+          placeholder={$_('resetPassword.emailPlaceholder')}
           disabled={submitting}
           required
         />
       </div>
       <button type="submit" disabled={submitting || !email}>
-        {submitting ? 'Sending...' : 'Send Reset Code'}
+        {submitting ? $_('resetPassword.sending') : $_('resetPassword.sendCode')}
       </button>
     </form>
   {/if}
-  <p class="back-link">
-    <a href="#/login">Back to Sign In</a>
+
+  <p class="link-text">
+    <a href="#/login">{$_('resetPassword.backToLogin')}</a>
   </p>
 </div>
+
 <style>
-  .reset-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+  .reset-page {
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
+
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-3) 0;
   }
+
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 2rem 0;
+    margin: 0 0 var(--space-7) 0;
   }
+
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-  }
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-  label {
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-  input {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
-  }
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-  button {
-    padding: 0.75rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    margin-top: 0.5rem;
+    gap: var(--space-4);
   }
-  button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  button.secondary {
-    background: transparent;
-    color: var(--text-secondary);
-    border: 1px solid var(--border-color-light);
-  }
-  button.secondary:hover:not(:disabled) {
-    background: var(--bg-secondary);
-  }
-  .message {
-    padding: 0.75rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-  }
-  .message.success {
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    color: var(--success-text);
-  }
-  .message.error {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
-  }
-  .back-link {
+
+  .link-text {
     text-align: center;
-    margin-top: 1.5rem;
+    margin-top: var(--space-6);
     color: var(--text-secondary);
   }
-  .back-link a {
+
+  .link-text a {
     color: var(--accent);
   }
 </style>

frontend/src/routes/Security.svelte

···
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
   import ReauthModal from '../components/ReauthModal.svelte'
+  import { _ } from '../lib/i18n'
+  import { formatDate as formatDateUtil } from '../lib/date'
 
   const auth = getAuthState()
   let message = $state<{ type: 'success' | 'error'; text: string } | null>(null)
···
       const result = await api.updateLegacyLoginPreference(auth.session.accessJwt, !allowLegacyLogin)
       allowLegacyLogin = result.allowLegacyLogin
       showMessage('success', allowLegacyLogin
-        ? 'Legacy app login enabled'
-        : 'Legacy app login disabled - only OAuth apps can sign in')
+        ? $_('security.legacyLoginEnabled')
+        : $_('security.legacyLoginDisabled'))
     } catch (e) {
       if (e instanceof ApiError) {
         if (e.error === 'ReauthRequired' || e.error === 'MfaVerificationRequired') {
···
           showMessage('error', e.message)
         }
       } else {
-        showMessage('error', 'Failed to update preference')
+        showMessage('error', $_('security.failedToUpdatePreference'))
       }
     } finally {
       legacyLoginUpdating = false
···
       await api.removePassword(auth.session.accessJwt)
       hasPassword = false
       showRemovePasswordForm = false
-      showMessage('success', 'Password removed. Your account is now passkey-only.')
+      showMessage('success', $_('security.passwordRemoved'))
     } catch (e) {
       if (e instanceof ApiError) {
         if (e.error === 'ReauthRequired') {
···
           showMessage('error', e.message)
         }
       } else {
-        showMessage('error', 'Failed to remove password')
+        showMessage('error', $_('security.failedToRemovePassword'))
       }
     } finally {
       removePasswordLoading = false
···
       totpEnabled = status.enabled
       hasBackupCodes = status.hasBackupCodes
     } catch {
-      showMessage('error', 'Failed to load TOTP status')
+      showMessage('error', $_('security.failedToLoadTotpStatus'))
     } finally {
       loading = false
     }
···
     backupCodes = []
     qrBase64 = ''
     totpUri = ''
-    showMessage('success', 'Two-factor authentication enabled successfully')
+    showMessage('success', $_('security.totpEnabledSuccess'))
   }
 
   async function handleDisable(e: Event) {
···
       showDisableForm = false
       disablePassword = ''
       disableCode = ''
-      showMessage('success', 'Two-factor authentication disabled')
+      showMessage('success', $_('security.totpDisabledSuccess'))
     } catch (e) {
       showMessage('error', e instanceof ApiError ? e.message : 'Failed to disable TOTP')
     } finally {
···
   function copyBackupCodes() {
     const text = backupCodes.join('\n')
     navigator.clipboard.writeText(text)
-    showMessage('success', 'Backup codes copied to clipboard')
+    showMessage('success', $_('security.backupCodesCopied'))
   }
 
   async function loadPasskeys() {
···
       const result = await api.listPasskeys(auth.session.accessJwt)
       passkeys = result.passkeys
     } catch {
-      showMessage('error', 'Failed to load passkeys')
+      showMessage('error', $_('security.failedToLoadPasskeys'))
     } finally {
       passkeysLoading = false
     }
···
   async function handleAddPasskey() {
     if (!auth.session) return
     if (!window.PublicKeyCredential) {
-      showMessage('error', 'Passkeys are not supported in this browser')
+      showMessage('error', $_('security.passkeysNotSupported'))
       return
     }
     addingPasskey = true
···
         publicKey: publicKeyOptions
       })
       if (!credential) {
-        showMessage('error', 'Passkey creation was cancelled')
+        showMessage('error', $_('security.passkeyCreationCancelled'))
         return
       }
       const credentialResponse = {
···
       await api.finishPasskeyRegistration(auth.session.accessJwt, credentialResponse, newPasskeyName || undefined)
       await loadPasskeys()
       newPasskeyName = ''
-      showMessage('success', 'Passkey added successfully')
+      showMessage('success', $_('security.passkeyAddedSuccess'))
     } catch (e) {
       if (e instanceof DOMException && e.name === 'NotAllowedError') {
-        showMessage('error', 'Passkey creation was cancelled')
+        showMessage('error', $_('security.passkeyCreationCancelled'))
       } else {
         showMessage('error', e instanceof ApiError ? e.message : 'Failed to add passkey')
       }
···
 
   async function handleDeletePasskey(id: string) {
     if (!auth.session) return
-    if (!confirm('Are you sure you want to delete this passkey?')) return
+    const passkey = passkeys.find(p => p.id === id)
+    const name = passkey?.friendlyName || 'this passkey'
+    if (!confirm($_('security.deletePasskeyConfirm', { values: { name } }))) return
     try {
       await api.deletePasskey(auth.session.accessJwt, id)
       await loadPasskeys()
-      showMessage('success', 'Passkey deleted')
+      showMessage('success', $_('security.passkeyDeleted'))
     } catch (e) {
       showMessage('error', e instanceof ApiError ? e.message : 'Failed to delete passkey')
     }
···
       await loadPasskeys()
       editingPasskeyId = null
       editPasskeyName = ''
-      showMessage('success', 'Passkey renamed')
+      showMessage('success', $_('security.passkeyRenamed'))
     } catch (e) {
       showMessage('error', e instanceof ApiError ? e.message : 'Failed to rename passkey')
     }
···
   }
 
   function formatDate(dateStr: string): string {
-    return new Date(dateStr).toLocaleDateString()
+    return formatDateUtil(dateStr)
   }
 </script>
 
 <div class="page">
   <header>
-    <a href="#/dashboard" class="back">&larr; Dashboard</a>
-    <h1>Security Settings</h1>
+    <a href="#/dashboard" class="back">{$_('common.backToDashboard')}</a>
+    <h1>{$_('security.title')}</h1>
   </header>
 
   {#if message}
···
   {/if}
 
   {#if loading}
-    <div class="loading">Loading...</div>
+    <div class="loading">{$_('common.loading')}</div>
   {:else}
     <section>
-      <h2>Two-Factor Authentication</h2>
+      <h2>{$_('security.totp')}</h2>
       <p class="description">
-        Add an extra layer of security to your account using an authenticator app like Google Authenticator, Authy, or 1Password.
+        {$_('security.totpDescription')}
       </p>
 
       {#if setupStep === 'idle'}
         {#if totpEnabled}
           <div class="status enabled">
-            <span>Two-factor authentication is <strong>enabled</strong></span>
+            <span>{$_('security.totpEnabled')}</span>
           </div>
 
           {#if !showDisableForm && !showRegenForm}
             <div class="totp-actions">
               <button type="button" class="secondary" onclick={() => showRegenForm = true}>
-                Regenerate Backup Codes
+                {$_('security.regenerateBackupCodes')}
               </button>
               <button type="button" class="danger-outline" onclick={() => showDisableForm = true}>
-                Disable 2FA
+                {$_('security.disableTotp')}
               </button>
             </div>
           {/if}
 
           {#if showRegenForm}
             <form onsubmit={handleRegenerate} class="inline-form">
-              <h3>Regenerate Backup Codes</h3>
-              <p class="warning-text">This will invalidate all existing backup codes.</p>
+              <h3>{$_('security.regenerateBackupCodes')}</h3>
+              <p class="warning-text">{$_('security.regenerateConfirm')}</p>
               <div class="field">
-                <label for="regen-password">Password</label>
+                <label for="regen-password">{$_('security.password')}</label>
                 <input
                   id="regen-password"
                   type="password"
                   bind:value={regenPassword}
-                  placeholder="Enter your password"
+                  placeholder={$_('security.enterPassword')}
                   disabled={regenLoading}
                   required
                 />
               </div>
               <div class="field">
-                <label for="regen-code">Authenticator Code</label>
+                <label for="regen-code">{$_('security.totpCode')}</label>
                 <input
                   id="regen-code"
                   type="text"
                   bind:value={regenCode}
-                  placeholder="6-digit code"
+                  placeholder="{$_('security.totpCodePlaceholder')}"
                   disabled={regenLoading}
                   required
                   maxlength="6"
···
               </div>
               <div class="actions">
                 <button type="button" class="secondary" onclick={() => { showRegenForm = false; regenPassword = ''; regenCode = '' }}>
-                  Cancel
+                  {$_('common.cancel')}
                 </button>
                 <button type="submit" disabled={regenLoading || !regenPassword || regenCode.length !== 6}>
-                  {regenLoading ? 'Regenerating...' : 'Regenerate'}
+                  {regenLoading ? $_('security.regenerating') : $_('security.regenerateBackupCodes')}
                 </button>
               </div>
             </form>
···
 
           {#if showDisableForm}
             <form onsubmit={handleDisable} class="inline-form danger-form">
-              <h3>Disable Two-Factor Authentication</h3>
-              <p class="warning-text">This will make your account less secure.</p>
+              <h3>{$_('security.disableTotp')}</h3>
+              <p class="warning-text">{$_('security.disableTotpWarning')}</p>
               <div class="field">
-                <label for="disable-password">Password</label>
+                <label for="disable-password">{$_('security.password')}</label>
                 <input
                   id="disable-password"
                   type="password"
                   bind:value={disablePassword}
-                  placeholder="Enter your password"
+                  placeholder={$_('security.enterPassword')}
                   disabled={disableLoading}
                   required
                 />
               </div>
               <div class="field">
-                <label for="disable-code">Authenticator Code</label>
+                <label for="disable-code">{$_('security.totpCode')}</label>
                 <input
                   id="disable-code"
                   type="text"
                   bind:value={disableCode}
-                  placeholder="6-digit code"
+                  placeholder="{$_('security.totpCodePlaceholder')}"
                   disabled={disableLoading}
                   required
                   maxlength="6"
···
               </div>
               <div class="actions">
                 <button type="button" class="secondary" onclick={() => { showDisableForm = false; disablePassword = ''; disableCode = '' }}>
-                  Cancel
+                  {$_('common.cancel')}
                 </button>
                 <button type="submit" class="danger" disabled={disableLoading || !disablePassword || disableCode.length !== 6}>
-                  {disableLoading ? 'Disabling...' : 'Disable 2FA'}
+                  {disableLoading ? $_('security.disabling') : $_('security.disableTotp')}
                 </button>
               </div>
             </form>
           {/if}
         {:else}
           <div class="status disabled">
-            <span>Two-factor authentication is <strong>not enabled</strong></span>
+            <span>{$_('security.totpDisabled')}</span>
           </div>
           <button onclick={handleStartSetup} disabled={verifyLoading}>
-            {verifyLoading ? 'Setting up...' : 'Set Up Two-Factor Authentication'}
+            {$_('security.enableTotp')}
           </button>
         {/if}
       {:else if setupStep === 'qr'}
         <div class="setup-step">
-          <h3>Step 1: Scan QR Code</h3>
-          <p>Scan this QR code with your authenticator app:</p>
+          <h3>{$_('security.totpSetup')}</h3>
+          <p>{$_('security.totpSetupInstructions')}</p>
           <div class="qr-container">
             <img src="data:image/png;base64,{qrBase64}" alt="TOTP QR Code" class="qr-code" />
           </div>
           <details class="manual-entry">
-            <summary>Can't scan? Enter manually</summary>
+            <summary>{$_('security.cantScan')}</summary>
             <code class="secret-code">{totpUri.split('secret=')[1]?.split('&')[0] || ''}</code>
           </details>
           <button onclick={() => setupStep = 'verify'}>
-            Next: Verify Code
+            {$_('security.next')}
           </button>
         </div>
       {:else if setupStep === 'verify'}
         <div class="setup-step">
-          <h3>Step 2: Verify Setup</h3>
-          <p>Enter the 6-digit code from your authenticator app:</p>
+          <h3>{$_('security.totpSetup')}</h3>
+          <p>{$_('security.totpCodePlaceholder')}</p>
           <form onsubmit={handleVerifySetup}>
             <div class="field">
               <input
···
             </div>
             <div class="actions">
               <button type="button" class="secondary" onclick={() => { setupStep = 'qr' }}>
-                Back
+                {$_('common.back')}
               </button>
               <button type="submit" disabled={verifyLoading || verifyCode.length !== 6}>
-                {verifyLoading ? 'Verifying...' : 'Verify & Enable'}
+                {$_('security.verifyAndEnable')}
               </button>
             </div>
           </form>
         </div>
       {:else if setupStep === 'backup'}
         <div class="setup-step">
-          <h3>Step 3: Save Backup Codes</h3>
+          <h3>{$_('security.backupCodes')}</h3>
           <p class="warning-text">
-            Save these backup codes in a secure location. Each code can only be used once.
-            If you lose access to your authenticator app, you'll need these to sign in.
+            {$_('security.backupCodesDescription')}
           </p>
           <div class="backup-codes">
             {#each backupCodes as code}
···
           </div>
           <div class="actions">
             <button type="button" class="secondary" onclick={copyBackupCodes}>
-              Copy to Clipboard
+              {$_('security.copyToClipboard')}
             </button>
             <button onclick={handleFinishSetup}>
-              I've Saved My Codes
+              {$_('security.savedMyCodes')}
             </button>
           </div>
         </div>
···
     </section>
 
     <section>
-      <h2>Passkeys</h2>
+      <h2>{$_('security.passkeys')}</h2>
       <p class="description">
-        Passkeys are a secure, passwordless way to sign in using biometrics (fingerprint or face), a security key, or your device's screen lock.
+        {$_('security.passkeysDescription')}
       </p>
 
       {#if passkeysLoading}
-        <div class="loading">Loading passkeys...</div>
+        <div class="loading">{$_('security.loadingPasskeys')}</div>
       {:else}
         {#if passkeys.length > 0}
           <div class="passkey-list">
···
                     <input
                       type="text"
                       bind:value={editPasskeyName}
-                      placeholder="Passkey name"
+                      placeholder="{$_('security.passkeyName')}"
                       class="passkey-name-input"
                     />
                     <div class="passkey-edit-actions">
-                      <button type="button" class="small" onclick={handleSavePasskeyName}>Save</button>
-                      <button type="button" class="small secondary" onclick={cancelEditPasskey}>Cancel</button>
+                      <button type="button" class="small" onclick={handleSavePasskeyName}>{$_('common.save')}</button>
+                      <button type="button" class="small secondary" onclick={cancelEditPasskey}>{$_('common.cancel')}</button>
                     </div>
                   </div>
                 {:else}
                   <div class="passkey-info">
-                    <span class="passkey-name">{passkey.friendlyName || 'Unnamed passkey'}</span>
+                    <span class="passkey-name">{passkey.friendlyName || $_('security.unnamedPasskey')}</span>
                     <span class="passkey-meta">
-                      Added {formatDate(passkey.createdAt)}
+                      {$_('security.added')} {formatDate(passkey.createdAt)}
                       {#if passkey.lastUsed}
-                        &middot; Last used {formatDate(passkey.lastUsed)}
+                        &middot; {$_('security.lastUsed')} {formatDate(passkey.lastUsed)}
                       {/if}
                     </span>
                   </div>
                   <div class="passkey-actions">
                     <button type="button" class="small secondary" onclick={() => startEditPasskey(passkey)}>
-                      Rename
+                      {$_('security.rename')}
                     </button>
                     {#if hasPassword || passkeys.length > 1}
                       <button type="button" class="small danger-outline" onclick={() => handleDeletePasskey(passkey.id)}>
-                        Delete
+                        {$_('security.deletePasskey')}
                       </button>
                     {/if}
                   </div>
···
           </div>
         {:else}
           <div class="status disabled">
-            <span>No passkeys registered</span>
+            <span>{$_('security.noPasskeys')}</span>
           </div>
         {/if}
 
         <div class="add-passkey">
           <div class="field">
-            <label for="passkey-name">Passkey Name (optional)</label>
+            <label for="passkey-name">{$_('security.passkeyName')}</label>
             <input
               id="passkey-name"
               type="text"
               bind:value={newPasskeyName}
-              placeholder="e.g., MacBook Touch ID"
+              placeholder="{$_('security.passkeyNamePlaceholder')}"
               disabled={addingPasskey}
             />
           </div>
           <button onclick={handleAddPasskey} disabled={addingPasskey}>
-            {addingPasskey ? 'Adding Passkey...' : 'Add a Passkey'}
+            {addingPasskey ? $_('security.adding') : $_('security.addPasskey')}
           </button>
         </div>
       {/if}
     </section>
 
     <section>
-      <h2>Password</h2>
+      <h2>{$_('security.password')}</h2>
       <p class="description">
-        Manage your account password. If you have passkeys set up, you can optionally remove your password for a fully passwordless experience.
+        {$_('security.passwordDescription')}
       </p>
 
       {#if passwordLoading}
-        <div class="loading">Loading...</div>
+        <div class="loading">{$_('common.loading')}</div>
       {:else if hasPassword}
         <div class="status enabled">
-          <span>Password authentication is <strong>enabled</strong></span>
+          <span>{$_('security.passwordStatus')}</span>
         </div>
 
         {#if passkeys.length > 0}
           {#if !showRemovePasswordForm}
             <button type="button" class="danger-outline" onclick={() => showRemovePasswordForm = true}>
-              Remove Password
+              {$_('security.removePassword')}
             </button>
           {:else}
             <div class="inline-form danger-form">
-              <h3>Remove Password</h3>
+              <h3>{$_('security.removePassword')}</h3>
               <p class="warning-text">
-                This will make your account passkey-only. You'll only be able to sign in using your registered passkeys.
-                If you lose access to all your passkeys, you can recover your account using your notification channel.
+                {$_('security.removePasswordWarning')}
               </p>
               <div class="info-box-inline">
-                <strong>Before proceeding:</strong>
+                <strong>{$_('security.beforeProceeding')}</strong>
                 <ul>
-                  <li>Make sure you have at least one reliable passkey registered</li>
-                  <li>Consider registering passkeys on multiple devices</li>
-                  <li>Ensure your recovery notification channel is up to date</li>
+                  <li>{$_('security.beforeProceedingItem1')}</li>
+                  <li>{$_('security.beforeProceedingItem2')}</li>
+                  <li>{$_('security.beforeProceedingItem3')}</li>
                 </ul>
               </div>
               <div class="actions">
                 <button type="button" class="secondary" onclick={() => showRemovePasswordForm = false}>
-                  Cancel
+                  {$_('common.cancel')}
                 </button>
                 <button type="button" class="danger" onclick={handleRemovePassword} disabled={removePasswordLoading}>
-                  {removePasswordLoading ? 'Removing...' : 'Remove Password'}
+                  {removePasswordLoading ? $_('security.removing') : $_('security.removePassword')}
                 </button>
               </div>
             </div>
           {/if}
         {:else}
-          <p class="hint">Add at least one passkey before you can remove your password.</p>
+          <p class="hint">{$_('security.addPasskeyFirst')}</p>
         {/if}
       {:else}
         <div class="status passkey-only">
-          <span>Your account is <strong>passkey-only</strong></span>
+          <span>{$_('security.noPassword')}</span>
         </div>
         <p class="hint">
-          You sign in using passkeys only. If you ever lose access to your passkeys,
-          you can recover your account using the "Lost passkey?" link on the login page.
+          {$_('security.passkeyOnlyHint')}
         </p>
       {/if}
     </section>
 
     <section>
-      <h2>Trusted Devices</h2>
+      <h2>{$_('security.trustedDevices')}</h2>
       <p class="description">
-        Manage devices that can skip two-factor authentication when signing in. Trust is granted for 30 days and automatically extends when you use the device.
+        {$_('security.trustedDevicesDescription')}
       </p>
       <a href="#/trusted-devices" class="section-link">
-        Manage Trusted Devices &rarr;
+        {$_('security.manageTrustedDevices')} &rarr;
       </a>
     </section>
 
     {#if hasMfa}
       <section>
-        <h2>App Compatibility</h2>
+        <h2>{$_('security.appCompatibility')}</h2>
         <p class="description">
-          Control whether apps that don't support modern authentication (like the official Bluesky app) can sign in to your account.
+          {$_('security.legacyLoginDescription')}
         </p>
 
         {#if legacyLoginLoading}
-          <div class="loading">Loading...</div>
+          <div class="loading">{$_('common.loading')}</div>
         {:else}
           <div class="toggle-row">
             <div class="toggle-info">
-              <span class="toggle-label">Allow legacy app login</span>
+              <span class="toggle-label">{$_('security.legacyLogin')}</span>
               <span class="toggle-description">
                 {#if allowLegacyLogin}
-                  Legacy apps can sign in with just your password, but sensitive actions (like changing your password) will require MFA verification.
+                  {$_('security.legacyLoginOn')}
                 {:else}
-                  Only OAuth-compatible apps can sign in. Legacy apps will be blocked.
+                  {$_('security.legacyLoginOff')}
                 {/if}
               </span>
             </div>
···
 
           {#if totpEnabled}
             <div class="warning-box">
-              <strong>Important: Password changes in Bluesky app will fail</strong>
-              <p>
-                With TOTP enabled, changing your password from the Bluesky app (or other legacy apps) will be blocked.
-                To change your password, you have two options:
-              </p>
+              <strong>{$_('security.legacyLoginWarning')}</strong>
+              <p>{$_('security.totpPasswordWarning')}</p>
               <ol>
-                <li><strong>Change it here:</strong> Use this website's <a href="#/settings">Settings page</a> where you can verify with your authenticator app.</li>
-                <li><strong>Verify your session first:</strong> Use the <a href="#/settings">re-authenticate option</a> to verify your Bluesky session with TOTP, then password changes will work temporarily.</li>
+                <li><strong>{$_('security.totpPasswordOption1Label')}</strong> {$_('security.totpPasswordOption1Text')} <a href="#/settings">{$_('security.totpPasswordOption1Link')}</a> {$_('security.totpPasswordOption1Suffix')}</li>
+                <li><strong>{$_('security.totpPasswordOption2Label')}</strong> {$_('security.totpPasswordOption2Text')} <a href="#/settings">{$_('security.totpPasswordOption2Link')}</a> {$_('security.totpPasswordOption2Suffix')}</li>
               </ol>
             </div>
           {/if}
 
           <div class="info-box-inline">
-            <strong>What are legacy apps?</strong>
-            <p>
-              Some apps (like the official Bluesky app) use older authentication that only requires your password.
-              When you have MFA enabled, these apps bypass your second factor.
-              Disabling legacy login forces all apps to use OAuth, which properly enforces MFA.
-            </p>
+            <strong>{$_('security.legacyAppsTitle')}</strong>
+            <p>{$_('security.legacyAppsDescription')}</p>
           </div>
         {/if}
       </section>
···
 
 <style>
   .page {
-    max-width: 600px;
+    max-width: var(--width-md);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
 
   header {
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
 
   .back {
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
 
   .back:hover {
···
   }
 
   h1 {
-    margin: 0.5rem 0 0 0;
-  }
-
-  .message {
-    padding: 0.75rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-  }
-
-  .message.success {
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    color: var(--success-text);
-  }
-
-  .message.error {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
+    margin: var(--space-2) 0 0 0;
   }
 
   .loading {
     text-align: center;
     color: var(--text-secondary);
-    padding: 2rem;
+    padding: var(--space-7);
   }
 
   section {
-    padding: 1.5rem;
+    padding: var(--space-6);
     background: var(--bg-secondary);
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-6);
   }
 
   section h2 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1.125rem;
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-lg);
   }
 
   .description {
     color: var(--text-secondary);
-    font-size: 0.875rem;
-    margin-bottom: 1.5rem;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-6);
   }
 
   .status {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-4);
   }
 
   .status.enabled {
···
     background: var(--warning-bg);
     border: 1px solid var(--border-color);
     color: var(--warning-text);
+  }
+
+  .status.passkey-only {
+    background: linear-gradient(135deg, rgba(77, 166, 255, 0.15), rgba(128, 90, 213, 0.15));
+    border: 1px solid var(--accent);
+    color: var(--accent);
   }
 
   .totp-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
     flex-wrap: wrap;
   }
 
-  .field {
-    margin-bottom: 1rem;
-  }
-
-  label {
-    display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 0.25rem;
-  }
-
-  input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    box-sizing: border-box;
-    background: var(--bg-input);
-    color: var(--text-primary);
-  }
-
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
   .code-input {
-    font-size: 1.5rem;
+    font-size: var(--text-2xl);
     letter-spacing: 0.5em;
     text-align: center;
     max-width: 200px;
···
     display: block;
   }
 
-  button {
-    padding: 0.75rem 1.5rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 1rem;
-  }
-
-  button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  button.secondary {
-    background: transparent;
-    color: var(--text-secondary);
-    border: 1px solid var(--border-color-light);
-  }
-
-  button.secondary:hover:not(:disabled) {
-    background: var(--bg-card);
-  }
-
-  button.danger {
-    background: var(--error-text);
-  }
-
-  button.danger:hover:not(:disabled) {
-    background: #900;
-  }
-
-  button.danger-outline {
-    background: transparent;
-    color: var(--error-text);
-    border: 1px solid var(--error-border);
-  }
-
-  button.danger-outline:hover:not(:disabled) {
-    background: var(--error-bg);
-  }
-
   .actions {
     display: flex;
-    gap: 0.5rem;
-    margin-top: 1rem;
+    gap: var(--space-2);
+    margin-top: var(--space-4);
   }
 
   .inline-form {
-    margin-top: 1rem;
-    padding: 1rem;
+    margin-top: var(--space-4);
+    padding: var(--space-4);
     background: var(--bg-card);
-    border: 1px solid var(--border-color-light);
-    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
   }
 
   .inline-form h3 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1rem;
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-base);
   }
 
   .danger-form {
···
 
   .warning-text {
     color: var(--error-text);
-    font-size: 0.875rem;
-    margin-bottom: 1rem;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-4);
   }
 
   .setup-step {
-    padding: 1rem;
+    padding: var(--space-4);
     background: var(--bg-card);
-    border: 1px solid var(--border-color-light);
-    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
   }
 
   .setup-step h3 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-2) 0;
   }
 
   .setup-step p {
     color: var(--text-secondary);
-    font-size: 0.875rem;
-    margin-bottom: 1rem;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-4);
   }
 
   .qr-container {
     display: flex;
     justify-content: center;
-    margin: 1.5rem 0;
+    margin: var(--space-6) 0;
   }
 
   .qr-code {
···
   }
 
   .manual-entry {
-    margin-bottom: 1rem;
-    font-size: 0.875rem;
+    margin-bottom: var(--space-4);
+    font-size: var(--text-sm);
   }
 
   .manual-entry summary {
···
 
   .secret-code {
     display: block;
-    margin-top: 0.5rem;
-    padding: 0.5rem;
+    margin-top: var(--space-2);
+    padding: var(--space-2);
     background: var(--bg-input);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     word-break: break-all;
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
   }
 
   .backup-codes {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 0.5rem;
-    margin: 1rem 0;
+    gap: var(--space-2);
+    margin: var(--space-4) 0;
   }
 
   .backup-code {
-    padding: 0.5rem;
+    padding: var(--space-2);
     background: var(--bg-input);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     text-align: center;
-    font-size: 0.875rem;
-    font-family: monospace;
+    font-size: var(--text-sm);
+    font-family: ui-monospace, monospace;
   }
 
   .passkey-list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
   }
 
   .passkey-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.75rem;
+    padding: var(--space-3);
     background: var(--bg-card);
-    border: 1px solid var(--border-color-light);
-    border-radius: 6px;
-    gap: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    gap: var(--space-4);
   }
 
   .passkey-info {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
     flex: 1;
     min-width: 0;
   }
 
   .passkey-name {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .passkey-meta {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     color: var(--text-secondary);
   }
 
   .passkey-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
     flex-shrink: 0;
   }
 
   .passkey-edit {
     display: flex;
     flex: 1;
-    gap: 0.5rem;
+    gap: var(--space-2);
     align-items: center;
   }
 
   .passkey-name-input {
     flex: 1;
-    padding: 0.5rem;
-    font-size: 0.875rem;
+    padding: var(--space-2);
+    font-size: var(--text-sm);
   }
 
   .passkey-edit-actions {
     display: flex;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
 
   button.small {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.75rem;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
   }
 
   .add-passkey {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--border-color-light);
+    margin-top: var(--space-4);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--border-color);
   }
 
   .add-passkey .field {
-    margin-bottom: 0.75rem;
+    margin-bottom: var(--space-3);
   }
 
   .section-link {
     display: inline-block;
     color: var(--accent);
     text-decoration: none;
-    font-weight: 500;
+    font-weight: var(--font-medium);
   }
 
   .section-link:hover {
     text-decoration: underline;
-  }
-
-  .status.passkey-only {
-    background: var(--accent);
-    background: linear-gradient(135deg, rgba(77, 166, 255, 0.15), rgba(128, 90, 213, 0.15));
-    border: 1px solid var(--accent);
-    color: var(--accent);
   }
 
   .hint {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
     margin: 0;
   }
···
   .info-box-inline {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 1rem;
-    margin-bottom: 1rem;
-    font-size: 0.875rem;
+    border-radius: var(--radius-lg);
+    padding: var(--space-4);
+    margin-bottom: var(--space-4);
+    font-size: var(--text-sm);
   }
 
   .info-box-inline strong {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-2);
   }
 
   .info-box-inline ul {
     margin: 0;
-    padding-left: 1.25rem;
+    padding-left: var(--space-5);
     color: var(--text-secondary);
   }
 
   .info-box-inline li {
-    margin-bottom: 0.25rem;
+    margin-bottom: var(--space-1);
   }
 
   .info-box-inline p {
···
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    gap: 1rem;
-    padding: 1rem;
+    gap: var(--space-4);
+    padding: var(--space-4);
     background: var(--bg-card);
-    border: 1px solid var(--border-color-light);
-    border-radius: 6px;
-    margin-bottom: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-4);
   }
 
   .toggle-info {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
 
   .toggle-label {
-    font-weight: 500;
+    font-weight: var(--font-medium);
   }
 
   .toggle-description {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
   }
 
···
     border: none;
     border-radius: 13px;
     cursor: pointer;
-    transition: background 0.2s;
+    transition: background var(--transition-fast);
     flex-shrink: 0;
   }
 
···
     height: 20px;
     background: white;
     border-radius: 50%;
-    transition: left 0.2s;
+    transition: left var(--transition-fast);
   }
 
   .toggle-button.on .toggle-slider {
···
 
   .warning-box {
     background: var(--warning-bg);
-    border: 1px solid var(--warning-border, var(--border-color));
+    border: 1px solid var(--warning-border);
     border-left: 4px solid var(--warning-text);
-    border-radius: 6px;
-    padding: 1rem;
-    margin-bottom: 1rem;
+    border-radius: var(--radius-lg);
+    padding: var(--space-4);
+    margin-bottom: var(--space-4);
   }
 
   .warning-box strong {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-2);
     color: var(--warning-text);
   }
 
   .warning-box p {
-    margin: 0 0 0.75rem 0;
-    font-size: 0.875rem;
+    margin: 0 0 var(--space-3) 0;
+    font-size: var(--text-sm);
     color: var(--text-primary);
   }
 
   .warning-box ol {
     margin: 0;
-    padding-left: 1.25rem;
-    font-size: 0.875rem;
+    padding-left: var(--space-5);
+    font-size: var(--text-sm);
   }
 
   .warning-box li {
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-2);
   }
 
   .warning-box a {

frontend/src/routes/Sessions.svelte

···
   import { getAuthState } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
+  import { formatDateTime } from '../lib/date'
   const auth = getAuthState()
   let loading = $state(true)
   let error = $state<string | null>(null)
···
       const result = await api.listSessions(auth.session.accessJwt)
       sessions = result.sessions
     } catch (e) {
-      error = e instanceof ApiError ? e.message : 'Failed to load sessions'
+      error = e instanceof ApiError ? e.message : $_('sessions.failedToLoad')
     } finally {
       loading = false
     }
···
   async function revokeSession(sessionId: string, isCurrent: boolean) {
     if (!auth.session) return
     const msg = isCurrent
-      ? 'This will log you out of this session. Continue?'
-      : 'Revoke this session?'
+      ? $_('sessions.revokeCurrentConfirm')
+      : $_('sessions.revokeConfirm')
     if (!confirm(msg)) return
     try {
       await api.revokeSession(auth.session.accessJwt, sessionId)
···
         sessions = sessions.filter(s => s.id !== sessionId)
       }
     } catch (e) {
-      error = e instanceof ApiError ? e.message : 'Failed to revoke session'
+      error = e instanceof ApiError ? e.message : $_('sessions.failedToRevoke')
     }
   }
   async function revokeAllSessions() {
     if (!auth.session) return
-    const otherCount = sessions.filter(s => !s.isCurrent).length
-    if (otherCount === 0) {
-      error = 'No other sessions to revoke'
+    const otherSessions = sessions.filter(s => !s.isCurrent)
+    if (otherSessions.length === 0) {
+      error = $_('sessions.noOtherSessions')
       return
     }
-    if (!confirm(`This will revoke ${otherCount} other session${otherCount > 1 ? 's' : ''}. Continue?`)) return
+    if (!confirm($_('sessions.revokeAllConfirm', { values: { count: otherSessions.length } }))) return
     try {
       await api.revokeAllSessions(auth.session.accessJwt)
       sessions = sessions.filter(s => s.isCurrent)
     } catch (e) {
-      error = e instanceof ApiError ? e.message : 'Failed to revoke sessions'
+      error = e instanceof ApiError ? e.message : $_('sessions.failedToRevokeAll')
     }
   }
   function formatDate(dateStr: string): string {
-    return new Date(dateStr).toLocaleString()
+    return formatDateTime(dateStr)
   }
   function timeAgo(dateStr: string): string {
     const date = new Date(dateStr)
···
     const days = Math.floor(diff / (1000 * 60 * 60 * 24))
     const hours = Math.floor(diff / (1000 * 60 * 60))
     const minutes = Math.floor(diff / (1000 * 60))
-    if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`
-    if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`
-    if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
-    return 'Just now'
+    if (days > 0) return $_('sessions.daysAgo', { values: { count: days } })
+    if (hours > 0) return $_('sessions.hoursAgo', { values: { count: hours } })
+    if (minutes > 0) return $_('sessions.minutesAgo', { values: { count: minutes } })
+    return $_('sessions.justNow')
   }
 </script>
 <div class="page">
   <header>
-    <a href="#/dashboard" class="back">&larr; Dashboard</a>
-    <h1>Active Sessions</h1>
+    <a href="#/dashboard" class="back">{$_('common.backToDashboard')}</a>
+    <h1>{$_('sessions.title')}</h1>
   </header>
   {#if loading}
-    <p class="loading">Loading sessions...</p>
+    <p class="loading">{$_('sessions.loadingSessions')}</p>
   {:else}
     {#if error}
       <div class="message error">{error}</div>
     {/if}
     {#if sessions.length === 0}
-      <p class="empty">No active sessions found.</p>
+      <p class="empty">{$_('sessions.noSessions')}</p>
     {:else}
       <div class="sessions-list">
         {#each sessions as session}
···
             <div class="session-info">
               <div class="session-header">
                 {#if session.isCurrent}
-                  <span class="badge current">Current</span>
+                  <span class="badge current">{$_('sessions.current')}</span>
                 {/if}
                 <span class="badge type" class:oauth={session.sessionType === 'oauth'}>
-                  {session.sessionType === 'oauth' ? 'OAuth' : 'Session'}
+                  {session.sessionType === 'oauth' ? $_('sessions.oauth') : $_('sessions.session')}
                 </span>
                 {#if session.clientName}
                   <span class="client-name">{session.clientName}</span>
···
               </div>
               <div class="session-details">
                 <div class="detail">
-                  <span class="label">Created:</span>
+                  <span class="label">{$_('sessions.created')}</span>
                   <span class="value">{timeAgo(session.createdAt)}</span>
                 </div>
                 <div class="detail">
-                  <span class="label">Expires:</span>
+                  <span class="label">{$_('sessions.expires')}</span>
                   <span class="value">{formatDate(session.expiresAt)}</span>
                 </div>
               </div>
···
                 class:danger={!session.isCurrent}
                 onclick={() => revokeSession(session.id, session.isCurrent)}
               >
-                {session.isCurrent ? 'Sign Out' : 'Revoke'}
+                {session.isCurrent ? $_('sessions.signOut') : $_('sessions.revoke')}
               </button>
             </div>
           </div>
         {/each}
       </div>
       <div class="actions-bar">
-        <button class="refresh-btn" onclick={loadSessions}>Refresh</button>
+        <button class="refresh-btn" onclick={loadSessions}>{$_('common.refresh')}</button>
         {#if sessions.filter(s => !s.isCurrent).length > 0}
-          <button class="revoke-all-btn" onclick={revokeAllSessions}>Revoke All Other Sessions</button>
+          <button class="revoke-all-btn" onclick={revokeAllSessions}>{$_('sessions.revokeAll')}</button>
         {/if}
       </div>
     {/if}
···
 </div>
 <style>
   .page {
-    max-width: 600px;
+    max-width: var(--width-md);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   header {
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
+
   .back {
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .back:hover {
     color: var(--accent);
   }
+
   h1 {
-    margin: 0.5rem 0 0 0;
+    margin: var(--space-2) 0 0 0;
   }
-  .loading, .empty {
+
+  .loading,
+  .empty {
     text-align: center;
     color: var(--text-secondary);
-    padding: 2rem;
-  }
-  .message {
-    padding: 0.75rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-  }
-  .message.error {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
+    padding: var(--space-7);
   }
+
   .sessions-list {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
   }
+
   .session-card {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
+    border-radius: var(--radius-xl);
+    padding: var(--space-4);
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
+
   .session-card.current {
     border-color: var(--accent);
     background: var(--bg-card);
   }
+
   .session-header {
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-2);
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
     flex-wrap: wrap;
   }
+
   .client-name {
-    font-weight: 500;
+    font-weight: var(--font-medium);
     color: var(--text-primary);
   }
+
   .badge {
     display: inline-block;
-    padding: 0.125rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: 500;
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
   }
+
   .badge.current {
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
   }
+
   .badge.type {
     background: var(--bg-secondary);
     color: var(--text-secondary);
     border: 1px solid var(--border-color);
   }
+
   .badge.type.oauth {
-    background: #e6f4ea;
-    color: #1e7e34;
-    border-color: #b8d9c5;
+    background: var(--success-bg);
+    color: var(--success-text);
+    border-color: var(--success-border);
   }
+
   .session-details {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-1);
   }
+
   .detail {
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .detail .label {
     color: var(--text-secondary);
-    margin-right: 0.5rem;
+    margin-right: var(--space-2);
   }
+
   .detail .value {
     color: var(--text-primary);
   }
+
   .revoke-btn {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     background: transparent;
     color: var(--text-primary);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .revoke-btn:hover {
     background: var(--bg-card);
   }
+
   .revoke-btn.danger {
     border-color: var(--error-text);
     color: var(--error-text);
   }
+
   .revoke-btn.danger:hover {
     background: var(--error-bg);
   }
+
   .actions-bar {
-    margin-top: 1rem;
+    margin-top: var(--space-4);
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
     flex-wrap: wrap;
   }
+
   .refresh-btn {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: transparent;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     color: var(--text-primary);
   }
+
   .refresh-btn:hover {
     background: var(--bg-card);
     border-color: var(--accent);
   }
+
   .revoke-all-btn {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: transparent;
     border: 1px solid var(--error-text);
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     color: var(--error-text);
   }
+
   .revoke-all-btn:hover {
     background: var(--error-bg);
   }

frontend/src/routes/Settings.svelte

···
 <script lang="ts">
-  import { getAuthState, logout } from '../lib/auth.svelte'
+  import { getAuthState, logout, refreshSession } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
+  import { locale, setLocale, getSupportedLocales, localeNames, _, type SupportedLocale } from '../lib/i18n'
   const auth = getAuthState()
+  const supportedLocales = getSupportedLocales()
+  let localeLoading = $state(false)
+  async function handleLocaleChange(newLocale: SupportedLocale) {
+    if (!auth.session) return
+    setLocale(newLocale)
+    localeLoading = true
+    try {
+      await api.updateLocale(auth.session.accessJwt, newLocale)
+    } catch (e) {
+      console.error('Failed to save locale preference:', e)
+    } finally {
+      localeLoading = false
+    }
+  }
   let message = $state<{ type: 'success' | 'error'; text: string } | null>(null)
   let emailLoading = $state(false)
   let newEmail = $state('')
···
       const result = await api.requestEmailUpdate(auth.session.accessJwt, newEmail)
       emailTokenRequired = result.tokenRequired
       if (emailTokenRequired) {
-        showMessage('success', 'Verification code sent to your current email')
+        showMessage('success', $_('settings.messages.verificationCodeSent'))
       } else {
         await api.updateEmail(auth.session.accessJwt, newEmail)
-        showMessage('success', 'Email updated successfully')
+        await refreshSession()
+        showMessage('success', $_('settings.messages.emailUpdated'))
         newEmail = ''
       }
     } catch (e) {
-      showMessage('error', e instanceof ApiError ? e.message : 'Failed to update email')
+      showMessage('error', e instanceof ApiError ? e.message : $_('settings.messages.emailUpdateFailed'))
     } finally {
       emailLoading = false
     }
···
     message = null
     try {
       await api.updateEmail(auth.session.accessJwt, newEmail, emailToken)
-      showMessage('success', 'Email updated successfully')
+      await refreshSession()
+      showMessage('success', $_('settings.messages.emailUpdated'))
       newEmail = ''
       emailToken = ''
       emailTokenRequired = false
     } catch (e) {
-      showMessage('error', e instanceof ApiError ? e.message : 'Failed to update email')
+      showMessage('error', e instanceof ApiError ? e.message : $_('settings.messages.emailUpdateFailed'))
     } finally {
       emailLoading = false
     }
···
     handleLoading = true
     message = null
     try {
-      await api.updateHandle(auth.session.accessJwt, newHandle)
-      showMessage('success', 'Handle updated successfully')
+      const fullHandle = showBYOHandle
+        ? newHandle
+        : `${newHandle}.${window.location.hostname}`
+      await api.updateHandle(auth.session.accessJwt, fullHandle)
+      await refreshSession()
+      showMessage('success', $_('settings.messages.handleUpdated'))
       newHandle = ''
     } catch (e) {
-      showMessage('error', e instanceof ApiError ? e.message : 'Failed to update handle')
+      showMessage('error', e instanceof ApiError ? e.message : $_('settings.messages.handleUpdateFailed'))
     } finally {
       handleLoading = false
     }
···
     try {
       await api.requestAccountDelete(auth.session.accessJwt)
       deleteTokenSent = true
-      showMessage('success', 'Deletion confirmation sent to your email')
+      showMessage('success', $_('settings.messages.deletionConfirmationSent'))
     } catch (e) {
-      showMessage('error', e instanceof ApiError ? e.message : 'Failed to request deletion')
+      showMessage('error', e instanceof ApiError ? e.message : $_('settings.messages.deletionRequestFailed'))
     } finally {
       deleteLoading = false
     }
···
   async function handleConfirmDelete(e: Event) {
     e.preventDefault()
     if (!auth.session || !deletePassword || !deleteToken) return
-    if (!confirm('Are you absolutely sure you want to delete your account? This cannot be undone.')) {
+    if (!confirm($_('settings.messages.deleteConfirmation'))) {
       return
     }
     deleteLoading = true
···
       await logout()
       navigate('/login')
     } catch (e) {
-      showMessage('error', e instanceof ApiError ? e.message : 'Failed to delete account')
+      showMessage('error', e instanceof ApiError ? e.message : $_('settings.messages.deletionFailed'))
     } finally {
       deleteLoading = false
     }
···
       a.click()
       document.body.removeChild(a)
       URL.revokeObjectURL(url)
-      showMessage('success', 'Repository exported successfully')
+      showMessage('success', $_('settings.messages.repoExported'))
     } catch (e) {
-      showMessage('error', e instanceof Error ? e.message : 'Failed to export repository')
+      showMessage('error', e instanceof Error ? e.message : $_('settings.messages.exportFailed'))
     } finally {
       exportLoading = false
     }
···
     e.preventDefault()
     if (!auth.session || !currentPassword || !newPassword || !confirmNewPassword) return
     if (newPassword !== confirmNewPassword) {
-      showMessage('error', 'Passwords do not match')
+      showMessage('error', $_('settings.messages.passwordsDoNotMatch'))
       return
     }
     if (newPassword.length < 8) {
-      showMessage('error', 'Password must be at least 8 characters')
+      showMessage('error', $_('settings.messages.passwordTooShort'))
       return
     }
     passwordLoading = true
     message = null
     try {
       await api.changePassword(auth.session.accessJwt, currentPassword, newPassword)
-      showMessage('success', 'Password changed successfully')
+      showMessage('success', $_('settings.messages.passwordChanged'))
       currentPassword = ''
       newPassword = ''
       confirmNewPassword = ''
     } catch (e) {
-      showMessage('error', e instanceof ApiError ? e.message : 'Failed to change password')
+      showMessage('error', e instanceof ApiError ? e.message : $_('settings.messages.passwordChangeFailed'))
     } finally {
       passwordLoading = false
     }
···
 </script>
 <div class="page">
   <header>
-    <a href="#/dashboard" class="back">&larr; Dashboard</a>
-    <h1>Account Settings</h1>
+    <a href="#/dashboard" class="back">{$_('common.backToDashboard')}</a>
+    <h1>{$_('settings.title')}</h1>
   </header>
   {#if message}
     <div class="message {message.type}">{message.text}</div>
   {/if}
   <section>
-    <h2>Change Email</h2>
+    <h2>{$_('settings.language')}</h2>
+    <p class="description">{$_('settings.languageDescription')}</p>
+    <select
+      class="language-select"
+      value={$locale}
+      disabled={localeLoading}
+      onchange={(e) => handleLocaleChange(e.currentTarget.value as SupportedLocale)}
+    >
+      {#each supportedLocales as loc}
+        <option value={loc}>{localeNames[loc]}</option>
+      {/each}
+    </select>
+  </section>
+  <section>
+    <h2>{$_('settings.changeEmail')}</h2>
     {#if auth.session?.email}
-      <p class="current">Current: {auth.session.email}</p>
+      <p class="current">{$_('settings.currentEmail', { values: { email: auth.session.email } })}</p>
     {/if}
     {#if emailTokenRequired}
       <form onsubmit={handleConfirmEmailUpdate}>
         <div class="field">
-          <label for="email-token">Verification Code</label>
+          <label for="email-token">{$_('settings.verificationCode')}</label>
           <input
             id="email-token"
             type="text"
             bind:value={emailToken}
-            placeholder="Enter code from email"
+            placeholder={$_('settings.verificationCodePlaceholder')}
             disabled={emailLoading}
             required
           />
         </div>
         <div class="actions">
           <button type="submit" disabled={emailLoading || !emailToken}>
-            {emailLoading ? 'Updating...' : 'Confirm Email Change'}
+            {emailLoading ? $_('settings.updating') : $_('settings.confirmEmailChange')}
           </button>
           <button type="button" class="secondary" onclick={() => { emailTokenRequired = false; emailToken = '' }}>
-            Cancel
+            {$_('common.cancel')}
           </button>
         </div>
       </form>
     {:else}
       <form onsubmit={handleRequestEmailUpdate}>
         <div class="field">
-          <label for="new-email">New Email</label>
+          <label for="new-email">{$_('settings.newEmail')}</label>
           <input
             id="new-email"
             type="email"
             bind:value={newEmail}
-            placeholder="[e-mail]"
+            placeholder={$_('settings.newEmailPlaceholder')}
             disabled={emailLoading}
             required
           />
         </div>
         <button type="submit" disabled={emailLoading || !newEmail}>
-          {emailLoading ? 'Requesting...' : 'Change Email'}
+          {emailLoading ? $_('settings.requesting') : $_('settings.changeEmailButton')}
         </button>
       </form>
     {/if}
   </section>
   <section>
-    <h2>Change Handle</h2>
+    <h2>{$_('settings.changeHandle')}</h2>
     {#if auth.session}
-      <p class="current">Current: @{auth.session.handle}</p>
+      <p class="current">{$_('settings.currentHandle', { values: { handle: auth.session.handle } })}</p>
     {/if}
     <div class="tabs">
       <button
···
         class:active={!showBYOHandle}
         onclick={() => showBYOHandle = false}
       >
-        PDS Handle
+        {$_('settings.pdsHandle')}
       </button>
       <button
         type="button"
···
         class:active={showBYOHandle}
         onclick={() => showBYOHandle = true}
       >
-        Custom Domain
+        {$_('settings.customDomain')}
       </button>
     </div>
     {#if showBYOHandle}
       <div class="byo-handle">
-        <p class="description">Use your own domain as your handle. You need to verify domain ownership first.</p>
+        <p class="description">{$_('settings.customDomainDescription')}</p>
         {#if auth.session}
           <div class="verification-info">
-            <h3>Setup Instructions</h3>
-            <p>Choose one of these verification methods:</p>
+            <h3>{$_('settings.setupInstructions')}</h3>
+            <p>{$_('settings.setupMethodsIntro')}</p>
             <div class="method">
-              <h4>Option 1: DNS TXT Record (Recommended)</h4>
-              <p>Add this TXT record to your domain:</p>
+              <h4>{$_('settings.dnsMethod')}</h4>
+              <p>{$_('settings.dnsMethodDesc')}</p>
               <code class="record">_atproto.{newHandle || 'yourdomain.com'} TXT "did={auth.session.did}"</code>
             </div>
             <div class="method">
-              <h4>Option 2: HTTP Well-Known File</h4>
-              <p>Serve your DID at this URL:</p>
+              <h4>{$_('settings.httpMethod')}</h4>
+              <p>{$_('settings.httpMethodDesc')}</p>
               <code class="record">https://{newHandle || 'yourdomain.com'}/.well-known/atproto-did</code>
-              <p>The file should contain only:</p>
+              <p>{$_('settings.httpMethodContent')}</p>
               <code class="record">{auth.session.did}</code>
             </div>
           </div>
         {/if}
         <form onsubmit={handleUpdateHandle}>
           <div class="field">
-            <label for="new-handle-byo">Your Domain</label>
+            <label for="new-handle-byo">{$_('settings.yourDomain')}</label>
             <input
               id="new-handle-byo"
               type="text"
               bind:value={newHandle}
-              placeholder="example.com"
+              placeholder={$_('settings.yourDomainPlaceholder')}
               disabled={handleLoading}
               required
             />
           </div>
           <button type="submit" disabled={handleLoading || !newHandle}>
-            {handleLoading ? 'Verifying...' : 'Verify & Update Handle'}
+            {handleLoading ? $_('settings.verifying') : $_('settings.verifyAndUpdate')}
           </button>
         </form>
       </div>
     {:else}
       <form onsubmit={handleUpdateHandle}>
         <div class="field">
-          <label for="new-handle">New Handle</label>
-          <input
-            id="new-handle"
-            type="text"
-            bind:value={newHandle}
-            placeholder="yourhandle"
-            disabled={handleLoading}
-            required
-          />
+          <label for="new-handle">{$_('settings.newHandle')}</label>
+          <div class="handle-input-wrapper">
+            <input
+              id="new-handle"
+              type="text"
+              bind:value={newHandle}
+              placeholder={$_('settings.newHandlePlaceholder')}
+              disabled={handleLoading}
+              required
+            />
+            <span class="handle-suffix">.{window.location.hostname}</span>
+          </div>
         </div>
         <button type="submit" disabled={handleLoading || !newHandle}>
-          {handleLoading ? 'Updating...' : 'Change Handle'}
+          {handleLoading ? $_('settings.updating') : $_('settings.changeHandleButton')}
         </button>
       </form>
     {/if}
   </section>
   <section>
-    <h2>Change Password</h2>
+    <h2>{$_('settings.changePassword')}</h2>
     <form onsubmit={handleChangePassword}>
       <div class="field">
-        <label for="current-password">Current Password</label>
+        <label for="current-password">{$_('settings.currentPassword')}</label>
         <input
           id="current-password"
           type="password"
           bind:value={currentPassword}
-          placeholder="Enter current password"
+          placeholder={$_('settings.currentPasswordPlaceholder')}
           disabled={passwordLoading}
           required
         />
       </div>
       <div class="field">
-        <label for="new-password">New Password</label>
+        <label for="new-password">{$_('settings.newPassword')}</label>
         <input
           id="new-password"
           type="password"
           bind:value={newPassword}
-          placeholder="At least 8 characters"
+          placeholder={$_('settings.newPasswordPlaceholder')}
           disabled={passwordLoading}
           required
           minlength="8"
         />
       </div>
       <div class="field">
-        <label for="confirm-new-password">Confirm New Password</label>
+        <label for="confirm-new-password">{$_('settings.confirmNewPassword')}</label>
         <input
           id="confirm-new-password"
           type="password"
           bind:value={confirmNewPassword}
-          placeholder="Confirm new password"
+          placeholder={$_('settings.confirmNewPasswordPlaceholder')}
           disabled={passwordLoading}
           required
         />
       </div>
       <button type="submit" disabled={passwordLoading || !currentPassword || !newPassword || !confirmNewPassword}>
-        {passwordLoading ? 'Changing...' : 'Change Password'}
+        {passwordLoading ? $_('settings.changing') : $_('settings.changePasswordButton')}
       </button>
     </form>
   </section>
   <section>
-    <h2>Export Data</h2>
-    <p class="description">Download your entire repository as a CAR (Content Addressable Archive) file. This includes all your posts, likes, follows, and other data.</p>
+    <h2>{$_('settings.exportData')}</h2>
+    <p class="description">{$_('settings.exportDataDescription')}</p>
     <button onclick={handleExportRepo} disabled={exportLoading}>
-      {exportLoading ? 'Exporting...' : 'Download Repository'}
+      {exportLoading ? $_('settings.exporting') : $_('settings.downloadRepo')}
     </button>
   </section>
   <section class="danger-zone">
-    <h2>Delete Account</h2>
-    <p class="warning">This action is irreversible. All your data will be permanently deleted.</p>
+    <h2>{$_('settings.deleteAccount')}</h2>
+    <p class="warning">{$_('settings.deleteWarning')}</p>
     {#if deleteTokenSent}
       <form onsubmit={handleConfirmDelete}>
         <div class="field">
-          <label for="delete-token">Confirmation Code (from email)</label>
+          <label for="delete-token">{$_('settings.confirmationCode')}</label>
           <input
             id="delete-token"
             type="text"
             bind:value={deleteToken}
-            placeholder="Enter confirmation code"
+            placeholder={$_('settings.confirmationCodePlaceholder')}
             disabled={deleteLoading}
             required
           />
         </div>
         <div class="field">
-          <label for="delete-password">Your Password</label>
+          <label for="delete-password">{$_('settings.yourPassword')}</label>
           <input
             id="delete-password"
             type="password"
             bind:value={deletePassword}
-            placeholder="Enter your password"
+            placeholder={$_('settings.yourPasswordPlaceholder')}
             disabled={deleteLoading}
             required
           />
         </div>
         <div class="actions">
           <button type="submit" class="danger" disabled={deleteLoading || !deleteToken || !deletePassword}>
-            {deleteLoading ? 'Deleting...' : 'Permanently Delete Account'}
+            {deleteLoading ? $_('settings.deleting') : $_('settings.permanentlyDelete')}
           </button>
           <button type="button" class="secondary" onclick={() => { deleteTokenSent = false; deleteToken = ''; deletePassword = '' }}>
-            Cancel
+            {$_('common.cancel')}
           </button>
         </div>
       </form>
     {:else}
       <button class="danger" onclick={handleRequestDelete} disabled={deleteLoading}>
-        {deleteLoading ? 'Requesting...' : 'Request Account Deletion'}
+        {deleteLoading ? $_('settings.requesting') : $_('settings.requestDeletion')}
       </button>
     {/if}
   </section>
 </div>
 <style>
   .page {
-    max-width: 600px;
+    max-width: var(--width-md);
     margin: 0 auto;
-    padding: 2rem;
+    padding: var(--space-7);
   }
+
   header {
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
+
   .back {
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
+
   .back:hover {
     color: var(--accent);
   }
+
   h1 {
-    margin: 0.5rem 0 0 0;
-  }
-  .message {
-    padding: 0.75rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-  }
-  .message.success {
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    color: var(--success-text);
-  }
-  .message.error {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
+    margin: var(--space-2) 0 0 0;
   }
+
   section {
-    padding: 1.5rem;
+    padding: var(--space-6);
     background: var(--bg-secondary);
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-6);
   }
+
   section h2 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1.125rem;
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-lg);
   }
-  .current, .description {
+
+  .current,
+  .description {
     color: var(--text-secondary);
-    font-size: 0.875rem;
-    margin-bottom: 1rem;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-4);
   }
-  .field {
-    margin-bottom: 1rem;
-  }
-  label {
-    display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 0.25rem;
-  }
-  input {
+
+  .language-select {
     width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    box-sizing: border-box;
-    background: var(--bg-input);
-    color: var(--text-primary);
   }
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-  button {
-    padding: 0.75rem 1.5rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 1rem;
-  }
-  button:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  button.secondary {
-    background: transparent;
-    color: var(--text-secondary);
-    border: 1px solid var(--border-color-light);
-  }
-  button.secondary:hover:not(:disabled) {
-    background: var(--bg-secondary);
-  }
-  button.danger {
-    background: var(--error-text);
-  }
-  button.danger:hover:not(:disabled) {
-    background: #900;
-  }
+
   .actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
+
   .danger-zone {
     background: var(--error-bg);
     border: 1px solid var(--error-border);
   }
+
   .danger-zone h2 {
     color: var(--error-text);
   }
+
   .warning {
     color: var(--error-text);
-    font-size: 0.875rem;
-    margin-bottom: 1rem;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-4);
   }
+
   .tabs {
     display: flex;
-    gap: 0.25rem;
-    margin-bottom: 1rem;
+    gap: var(--space-1);
+    margin-bottom: var(--space-4);
   }
+
   .tab {
     flex: 1;
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     background: transparent;
-    border: 1px solid var(--border-color-light);
+    border: 1px solid var(--border-color);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
   }
+
   .tab:first-child {
-    border-radius: 4px 0 0 4px;
+    border-radius: var(--radius-md) 0 0 var(--radius-md);
   }
+
   .tab:last-child {
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
   }
+
   .tab.active {
     background: var(--accent);
     border-color: var(--accent);
-    color: white;
+    color: var(--text-inverse);
   }
+
   .tab:hover:not(.active) {
     background: var(--bg-card);
   }
+
   .byo-handle .description {
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
   }
+
   .verification-info {
     background: var(--bg-card);
-    border: 1px solid var(--border-color-light);
-    border-radius: 6px;
-    padding: 1rem;
-    margin-bottom: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: var(--space-4);
+    margin-bottom: var(--space-4);
   }
+
   .verification-info h3 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1rem;
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-base);
   }
+
   .verification-info h4 {
-    margin: 0.75rem 0 0.25rem 0;
-    font-size: 0.875rem;
+    margin: var(--space-3) 0 var(--space-1) 0;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
   }
+
   .verification-info p {
-    margin: 0.25rem 0;
-    font-size: 0.8rem;
+    margin: var(--space-1) 0;
+    font-size: var(--text-xs);
     color: var(--text-secondary);
   }
+
   .method {
-    margin-top: 0.75rem;
-    padding-top: 0.75rem;
-    border-top: 1px solid var(--border-color-light);
+    margin-top: var(--space-3);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--border-color);
   }
+
   .method:first-of-type {
-    margin-top: 0.5rem;
+    margin-top: var(--space-2);
     padding-top: 0;
     border-top: none;
   }
+
   code.record {
     display: block;
     background: var(--bg-input);
-    padding: 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
+    padding: var(--space-2);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
     word-break: break-all;
-    margin: 0.25rem 0;
+    margin: var(--space-1) 0;
+  }
+
+  .handle-input-wrapper {
+    display: flex;
+    align-items: center;
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+  }
+
+  .handle-input-wrapper input {
+    flex: 1;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    min-width: 0;
+  }
+
+  .handle-input-wrapper input:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .handle-input-wrapper:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-muted);
+  }
+
+  .handle-suffix {
+    padding: 0 var(--space-3);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    white-space: nowrap;
+    border-left: 1px solid var(--border-color);
+    background: var(--bg-card);
   }
 </style>

frontend/src/routes/TrustedDevices.svelte

···
   import { getAuthState } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
   import { api, ApiError } from '../lib/api'
+  import { _ } from '../lib/i18n'
+  import { formatDateTime } from '../lib/date'
 
   interface TrustedDevice {
     id: string
···
 
   async function handleRevoke(deviceId: string) {
     if (!auth.session) return
-    if (!confirm('Are you sure you want to revoke trust for this device? You will need to enter your 2FA code next time you log in from this device.')) return
+    if (!confirm($_('trustedDevices.revokeConfirm'))) return
     try {
       await api.revokeTrustedDevice(auth.session.accessJwt, deviceId)
       await loadDevices()
-      showMessage('success', 'Device trust revoked')
+      showMessage('success', $_('trustedDevices.deviceRevoked'))
     } catch (e) {
-      showMessage('error', e instanceof ApiError ? e.message : 'Failed to revoke device')
+      showMessage('error', e instanceof ApiError ? e.message : $_('common.error'))
     }
   }
 
···
       await loadDevices()
       editingDeviceId = null
       editDeviceName = ''
-      showMessage('success', 'Device renamed')
+      showMessage('success', $_('trustedDevices.deviceRenamed'))
     } catch (e) {
-      showMessage('error', e instanceof ApiError ? e.message : 'Failed to rename device')
+      showMessage('error', e instanceof ApiError ? e.message : $_('common.error'))
     }
   }
 
   function formatDate(dateStr: string): string {
-    return new Date(dateStr).toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    })
+    return formatDateTime(dateStr)
   }
 
   function parseUserAgent(ua: string | null): string {
-    if (!ua) return 'Unknown device'
+    if (!ua) return $_('trustedDevices.unknownDevice')
     if (ua.includes('Firefox')) return 'Firefox'
     if (ua.includes('Chrome')) return 'Chrome'
     if (ua.includes('Safari')) return 'Safari'
···
 
 <div class="page">
   <header>
-    <a href="#/security" class="back">&larr; Security Settings</a>
-    <h1>Trusted Devices</h1>
+    <a href="#/security" class="back">{$_('trustedDevices.backToSecurity')}</a>
+    <h1>{$_('trustedDevices.title')}</h1>
   </header>
 
   {#if message}
···
 
   <div class="description">
     <p>
-      Trusted devices can skip two-factor authentication when logging in.
-      Trust is granted for 30 days and automatically extends when you use the device.
+      {$_('trustedDevices.description')}
     </p>
   </div>
 
   {#if loading}
-    <div class="loading">Loading...</div>
+    <div class="loading">{$_('common.loading')}</div>
   {:else if devices.length === 0}
     <div class="empty-state">
-      <p>No trusted devices yet.</p>
-      <p class="hint">When you log in with two-factor authentication enabled, you can choose to trust the device for 30 days.</p>
+      <p>{$_('trustedDevices.noDevices')}</p>
+      <p class="hint">{$_('trustedDevices.noDevicesHint')}</p>
     </div>
   {:else}
     <div class="device-list">
···
                 type="text"
                 class="edit-name-input"
                 bind:value={editDeviceName}
-                placeholder="Device name"
+                placeholder={$_('trustedDevices.deviceNamePlaceholder')}
               />
               <div class="edit-actions">
-                <button class="btn-small btn-primary" onclick={handleSaveDeviceName}>Save</button>
-                <button class="btn-small btn-secondary" onclick={cancelEditDevice}>Cancel</button>
+                <button class="btn-small btn-primary" onclick={handleSaveDeviceName}>{$_('common.save')}</button>
+                <button class="btn-small btn-secondary" onclick={cancelEditDevice}>{$_('common.cancel')}</button>
               </div>
             {:else}
               <h3>{device.friendlyName || parseUserAgent(device.userAgent)}</h3>
-              <button class="btn-icon" onclick={() => startEditDevice(device)} title="Rename">
+              <button class="btn-icon" onclick={() => startEditDevice(device)} title={$_('security.rename')}>
                 &#9998;
               </button>
             {/if}
···
 
           <div class="device-details">
             {#if device.userAgent && !device.friendlyName}
-              <p class="detail"><span class="label">Browser:</span> {device.userAgent}</p>
+              <p class="detail"><span class="label">{$_('trustedDevices.browser')}</span> {device.userAgent}</p>
             {:else if device.userAgent}
-              <p class="detail"><span class="label">Browser:</span> {parseUserAgent(device.userAgent)}</p>
+              <p class="detail"><span class="label">{$_('trustedDevices.browser')}</span> {parseUserAgent(device.userAgent)}</p>
             {/if}
             <p class="detail">
-              <span class="label">Last seen:</span> {formatDate(device.lastSeenAt)}
+              <span class="label">{$_('trustedDevices.lastSeen')}</span> {formatDate(device.lastSeenAt)}
             </p>
             {#if device.trustedAt}
               <p class="detail">
-                <span class="label">Trusted since:</span> {formatDate(device.trustedAt)}
+                <span class="label">{$_('trustedDevices.trustedSince')}</span> {formatDate(device.trustedAt)}
               </p>
             {/if}
             {#if device.trustedUntil}
               {@const daysRemaining = getDaysRemaining(device.trustedUntil)}
               <p class="detail trust-expiry" class:expiring-soon={daysRemaining <= 7}>
-                <span class="label">Trust expires:</span>
+                <span class="label">{$_('trustedDevices.trustExpires')}</span>
                 {#if daysRemaining <= 0}
-                  Expired
+                  {$_('trustedDevices.expired')}
                 {:else if daysRemaining === 1}
-                  Tomorrow
+                  {$_('trustedDevices.tomorrow')}
                 {:else}
-                  In {daysRemaining} days
+                  {$_('trustedDevices.inDays', { values: { days: daysRemaining } })}
                 {/if}
               </p>
             {/if}
···
 
           <div class="device-actions">
             <button class="btn-danger" onclick={() => handleRevoke(device.id)}>
-              Revoke Trust
+              {$_('trustedDevices.revoke')}
             </button>
           </div>
         </div>
···
 
 <style>
   .page {
-    max-width: 600px;
+    max-width: var(--width-md);
     margin: 0 auto;
-    padding: 2rem 1rem;
+    padding: var(--space-7) var(--space-4);
   }
 
   header {
-    margin-bottom: 2rem;
+    margin-bottom: var(--space-7);
   }
 
   .back {
     display: inline-block;
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-4);
     color: var(--accent);
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
 
   .back:hover {
···
 
   h1 {
     margin: 0;
-    font-size: 1.75rem;
-  }
-
-  .message {
-    padding: 0.75rem 1rem;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-  }
-
-  .message.success {
-    background: var(--success-bg);
-    color: var(--success-text);
-    border: 1px solid var(--success-border);
-  }
-
-  .message.error {
-    background: var(--error-bg);
-    color: var(--error-text);
-    border: 1px solid var(--error-border);
+    font-size: var(--text-2xl);
   }
 
   .description {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
-    margin-bottom: 1.5rem;
+    border-radius: var(--radius-xl);
+    padding: var(--space-4);
+    margin-bottom: var(--space-6);
   }
 
   .description p {
     margin: 0;
     color: var(--text-secondary);
-    font-size: 0.9rem;
+    font-size: var(--text-sm);
   }
 
   .loading {
     text-align: center;
-    padding: 2rem;
+    padding: var(--space-7);
     color: var(--text-secondary);
   }
 
   .empty-state {
     text-align: center;
-    padding: 3rem 1rem;
+    padding: var(--space-8) var(--space-4);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: var(--radius-xl);
   }
 
   .empty-state p {
···
   }
 
   .empty-state .hint {
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
+    margin-top: var(--space-2);
+    font-size: var(--text-sm);
     color: var(--text-muted);
   }
 
   .device-list {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
   }
 
   .device-card {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
+    border-radius: var(--radius-xl);
+    padding: var(--space-4);
   }
 
   .device-header {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 0.75rem;
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
   }
 
   .device-header h3 {
     margin: 0;
     flex: 1;
-    font-size: 1rem;
+    font-size: var(--text-base);
   }
 
   .edit-name-input {
     flex: 1;
-    padding: 0.5rem;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background: var(--bg-input);
-    color: var(--text-primary);
-    font-size: 0.9rem;
+    padding: var(--space-2);
+    font-size: var(--text-sm);
   }
 
   .edit-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
 
   .btn-icon {
···
     border: none;
     color: var(--text-secondary);
     cursor: pointer;
-    padding: 0.25rem;
-    font-size: 1rem;
+    padding: var(--space-1);
+    font-size: var(--text-base);
   }
 
   .btn-icon:hover {
···
   }
 
   .device-details {
-    margin-bottom: 0.75rem;
+    margin-bottom: var(--space-3);
   }
 
   .detail {
-    margin: 0.25rem 0;
-    font-size: 0.875rem;
+    margin: var(--space-1) 0;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
   }
 
···
   .device-actions {
     display: flex;
     justify-content: flex-end;
-    padding-top: 0.75rem;
+    padding-top: var(--space-3);
     border-top: 1px solid var(--border-color);
   }
 
   .btn-small {
-    padding: 0.375rem 0.75rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-md);
+    font-size: var(--text-xs);
     cursor: pointer;
   }
 
   .btn-primary {
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
   }
 
···
     background: transparent;
     border: 1px solid var(--error-border);
     color: var(--error-text);
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
   }
 
   .btn-danger:hover {

frontend/src/routes/Verify.svelte

···
 <script lang="ts">
   import { confirmSignup, resendVerification, getAuthState } from '../lib/auth.svelte'
   import { navigate } from '../lib/router.svelte'
+  import { _ } from '../lib/i18n'
 
   const STORAGE_KEY = 'tranquil_pds_pending_verification'
 
···
 
   function channelLabel(ch: string): string {
     switch (ch) {
-      case 'email': return 'Email'
-      case 'discord': return 'Discord'
-      case 'telegram': return 'Telegram'
-      case 'signal': return 'Signal'
+      case 'email': return $_('register.email')
+      case 'discord': return $_('register.discord')
+      case 'telegram': return $_('register.telegram')
+      case 'signal': return $_('register.signal')
       default: return ch
     }
   }
 </script>
 
-<div class="verify-container">
+<div class="verify-page">
   {#if error}
-    <div class="error">{error}</div>
+    <div class="message error">{error}</div>
   {/if}
 
   {#if pendingVerification}
-    <h1>Verify Your Account</h1>
+    <h1>{$_('verify.title')}</h1>
     <p class="subtitle">
-      We've sent a verification code to your {channelLabel(pendingVerification.channel)}.
-      Enter it below to complete registration.
+      {$_('verify.subtitle', { values: { channel: channelLabel(pendingVerification.channel) } })}
     </p>
-    <p class="handle-info">Verifying account: <strong>@{pendingVerification.handle}</strong></p>
+    <p class="handle-info">{$_('verify.verifyingAccount', { values: { handle: pendingVerification.handle } })}</p>
 
     {#if resendMessage}
-      <div class="success">{resendMessage}</div>
+      <div class="message success">{resendMessage}</div>
     {/if}
 
     <form onsubmit={(e) => { e.preventDefault(); handleVerification(e); }}>
       <div class="field">
-        <label for="verification-code">Verification Code</label>
+        <label for="verification-code">{$_('verify.codeLabel')}</label>
         <input
           id="verification-code"
           type="text"
           bind:value={verificationCode}
-          placeholder="Enter 6-digit code"
+          placeholder={$_('verify.codePlaceholder')}
           disabled={submitting}
           required
           maxlength="6"
···
       </div>
 
       <button type="submit" disabled={submitting || !verificationCode.trim()}>
-        {submitting ? 'Verifying...' : 'Verify Account'}
+        {submitting ? $_('verify.verifying') : $_('verify.verifyButton')}
       </button>
 
       <button type="button" class="secondary" onclick={handleResendCode} disabled={resendingCode}>
-        {resendingCode ? 'Resending...' : 'Resend Code'}
+        {resendingCode ? $_('verify.resending') : $_('verify.resendCode')}
       </button>
     </form>
 
-    <p class="cancel-link">
-      <a href="#/register" onclick={() => clearPendingVerification()}>Start over with a different account</a>
+    <p class="link-text">
+      <a href="#/register" onclick={() => clearPendingVerification()}>{$_('verify.startOver')}</a>
     </p>
   {:else}
-    <h1>Account Verification</h1>
-    <p class="subtitle">No pending verification found.</p>
-    <p class="no-pending-info">
-      If you recently created an account and need to verify it, you may need to create a new account.
-      If you already verified your account, you can sign in.
-    </p>
+    <h1>{$_('verify.title')}</h1>
+    <p class="subtitle">{$_('verify.noPending')}</p>
+    <p class="info-text">{$_('verify.noPendingInfo')}</p>
+
     <div class="actions">
-      <a href="#/register" class="btn">Create Account</a>
-      <a href="#/login" class="btn secondary">Sign In</a>
+      <a href="#/register" class="btn">{$_('verify.createAccount')}</a>
+      <a href="#/login" class="btn secondary">{$_('verify.signIn')}</a>
     </div>
   {/if}
 </div>
 
 <style>
-  .verify-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
+  .verify-page {
+    max-width: var(--width-sm);
+    margin: var(--space-9) auto;
+    padding: var(--space-7);
   }
 
   h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 var(--space-3) 0;
   }
 
   .subtitle {
     color: var(--text-secondary);
-    margin: 0 0 1rem 0;
+    margin: 0 0 var(--space-4) 0;
   }
 
   .handle-info {
-    font-size: 0.9rem;
+    font-size: var(--text-sm);
     color: var(--text-secondary);
-    margin: 0 0 1.5rem 0;
+    margin: 0 0 var(--space-6) 0;
   }
 
-  .no-pending-info {
+  .info-text {
     color: var(--text-secondary);
-    margin: 1rem 0 1.5rem 0;
+    margin: var(--space-4) 0 var(--space-6) 0;
   }
 
   form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-4);
   }
 
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+  .link-text {
+    text-align: center;
+    margin-top: var(--space-6);
+    font-size: var(--text-sm);
   }
 
-  label {
-    font-size: 0.875rem;
-    font-weight: 500;
+  .link-text a {
+    color: var(--text-secondary);
   }
 
-  input {
-    padding: 0.75rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
+  .actions {
+    display: flex;
+    gap: var(--space-4);
   }
 
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
-  button, .btn {
-    padding: 0.75rem;
+  .btn {
+    flex: 1;
+    display: inline-block;
+    padding: var(--space-4);
     background: var(--accent);
-    color: white;
+    color: var(--text-inverse);
     border: none;
-    border-radius: 4px;
-    font-size: 1rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
+    font-weight: var(--font-medium);
     cursor: pointer;
     text-decoration: none;
     text-align: center;
-    display: inline-block;
   }
 
-  button:hover:not(:disabled), .btn:hover {
+  .btn:hover {
     background: var(--accent-hover);
-  }
-
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+    text-decoration: none;
   }
 
-  button.secondary, .btn.secondary {
+  .btn.secondary {
     background: transparent;
     color: var(--accent);
     border: 1px solid var(--accent);
   }
 
-  button.secondary:hover:not(:disabled), .btn.secondary:hover {
+  .btn.secondary:hover {
     background: var(--accent);
-    color: white;
-  }
-
-  .error {
-    padding: 0.75rem;
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: 4px;
-    color: var(--error-text);
-    margin-bottom: 1rem;
-  }
-
-  .success {
-    padding: 0.75rem;
-    background: var(--success-bg);
-    border: 1px solid var(--success-border);
-    border-radius: 4px;
-    color: var(--success-text);
-    margin-bottom: 1rem;
-  }
-
-  .cancel-link {
-    text-align: center;
-    margin-top: 1.5rem;
-    font-size: 0.875rem;
-  }
-
-  .cancel-link a {
-    color: var(--text-secondary);
-  }
-
-  .actions {
-    display: flex;
-    gap: 1rem;
-  }
-
-  .actions .btn {
-    flex: 1;
+    color: var(--text-inverse);
   }
 </style>

frontend/src/styles/base.css

···
+@import './tokens.css';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  line-height: var(--leading-tight);
+}
+
+h1 { font-size: var(--text-2xl); }
+h2 { font-size: var(--text-xl); }
+h3 { font-size: var(--text-lg); }
+h4 { font-size: var(--text-base); }
+
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  padding: var(--space-4);
+  border: 1px solid var(--border-dark);
+  border-radius: var(--radius-md);
+  background: var(--bg-input);
+  color: var(--text-primary);
+  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
+  width: 100%;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--shadow-focus);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  background: var(--bg-input-disabled);
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-muted);
+}
+
+select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--space-4) center;
+  padding-right: var(--space-7);
+}
+
+button {
+  font-family: inherit;
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-normal);
+  padding: var(--space-4) var(--space-6);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--transition-normal), border-color var(--transition-normal), opacity var(--transition-normal);
+  background: var(--accent);
+  color: var(--text-inverse);
+}
+
+button:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+button.secondary {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+}
+
+button.secondary:hover:not(:disabled) {
+  background: var(--accent);
+  color: var(--text-inverse);
+}
+
+button.tertiary {
+  background: transparent;
+  color: var(--text-secondary);
+  padding: var(--space-3) var(--space-4);
+}
+
+button.tertiary:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+button.danger {
+  background: var(--error-text);
+}
+
+button.danger:hover:not(:disabled) {
+  background: #900;
+}
+
+button.ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-dark);
+}
+
+button.ghost:hover:not(:disabled) {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+label {
+  display: block;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+  margin-bottom: var(--space-2);
+}
+
+fieldset {
+  border: 1px solid var(--border-dark);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  margin: 0;
+}
+
+fieldset legend {
+  font-weight: var(--font-semibold);
+  padding: 0 var(--space-3);
+  color: var(--text-primary);
+}
+
+code {
+  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
+  font-size: 0.9em;
+  background: var(--bg-tertiary);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+}
+
+pre {
+  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
+  font-size: var(--text-sm);
+  background: var(--bg-tertiary);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+  margin: 0;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: var(--space-6) 0;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.field + .field {
+  margin-top: var(--space-5);
+}
+
+.hint {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  margin-top: var(--space-1);
+}
+
+.hint.warning {
+  color: var(--warning-text);
+}
+
+.hint.error {
+  color: var(--error-text);
+}
+
+.message {
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+}
+
+.message.success {
+  background: var(--success-bg);
+  border: 1px solid var(--success-border);
+  color: var(--success-text);
+}
+
+.message.error {
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  color: var(--error-text);
+}
+
+.message.warning {
+  background: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+  color: var(--warning-text);
+}
+
+.badge {
+  display: inline-block;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+}
+
+.badge.success {
+  background: var(--success-bg);
+  color: var(--success-text);
+}
+
+.badge.warning {
+  background: var(--warning-bg);
+  color: var(--warning-text);
+}
+
+.badge.error {
+  background: var(--error-bg);
+  color: var(--error-text);
+}
+
+.badge.accent {
+  background: var(--accent);
+  color: var(--text-inverse);
+}
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+}
+
+.section {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+}
+
+.section + .section {
+  margin-top: var(--space-6);
+}
+
+.page {
+  max-width: var(--width-md);
+  margin: 0 auto;
+  padding: var(--space-7);
+}
+
+.page-sm {
+  max-width: var(--width-sm);
+  margin: 0 auto;
+  padding: var(--space-7);
+}
+
+.page-lg {
+  max-width: var(--width-lg);
+  margin: 0 auto;
+  padding: var(--space-7);
+}
+
+.back-link {
+  display: inline-block;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  margin-bottom: var(--space-3);
+}
+
+.back-link:hover {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+.text-sm {
+  font-size: var(--text-sm);
+}
+
+.text-xs {
+  font-size: var(--text-xs);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.mono {
+  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
+}
+
+.mt-4 { margin-top: var(--space-4); }
+.mt-5 { margin-top: var(--space-5); }
+.mt-6 { margin-top: var(--space-6); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-5 { margin-bottom: var(--space-5); }
+.mb-6 { margin-bottom: var(--space-6); }

frontend/src/styles/tokens.css

···
+:root {
+  --space-0: 0;
+  --space-1: 0.125rem;
+  --space-2: 0.25rem;
+  --space-3: 0.5rem;
+  --space-4: 0.75rem;
+  --space-5: 1rem;
+  --space-6: 1.5rem;
+  --space-7: 2rem;
+  --space-8: 3rem;
+  --space-9: 4rem;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.5rem;
+
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
+
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+
+  --width-xs: 320px;
+  --width-sm: 400px;
+  --width-md: 600px;
+  --width-lg: 800px;
+  --width-xl: 1000px;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --shadow-focus: 0 0 0 2px var(--accent-muted);
+
+  --transition-fast: 0.1s ease;
+  --transition-normal: 0.15s ease;
+  --transition-slow: 0.25s ease;
+
+  --bg-primary: #fafafa;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #eeeeee;
+  --bg-card: #ffffff;
+  --bg-input: #ffffff;
+  --bg-input-disabled: #f5f5f5;
+
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  --text-inverse: #ffffff;
+
+  --border-color: #dddddd;
+  --border-light: #eeeeee;
+  --border-dark: #cccccc;
+
+  --accent: #0066cc;
+  --accent-hover: #0052a3;
+  --accent-muted: rgba(0, 102, 204, 0.15);
+
+  --success-bg: #dfd;
+  --success-border: #8c8;
+  --success-text: #060;
+
+  --error-bg: #fee;
+  --error-border: #fcc;
+  --error-text: #c00;
+
+  --warning-bg: #ffd;
+  --warning-border: #d4a03c;
+  --warning-text: #856404;
+
+  --border-color-light: var(--border-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #222222;
+    --bg-tertiary: #2a2a2a;
+    --bg-card: #2a2a2a;
+    --bg-input: #333333;
+    --bg-input-disabled: #2a2a2a;
+
+    --text-primary: #e0e0e0;
+    --text-secondary: #a0a0a0;
+    --text-muted: #707070;
+    --text-inverse: #1a1a1a;
+
+    --border-color: #404040;
+    --border-light: #333333;
+    --border-dark: #505050;
+
+    --accent: #4da6ff;
+    --accent-hover: #7abbff;
+    --accent-muted: rgba(77, 166, 255, 0.2);
+
+    --success-bg: #1a3d1a;
+    --success-border: #2d5a2d;
+    --success-text: #7bc67b;
+
+    --error-bg: #3d1a1a;
+    --error-border: #5a2d2d;
+    --error-text: #ff7b7b;
+
+    --warning-bg: #3d3d1a;
+    --warning-border: #5a5a2d;
+    --warning-text: #c6c67b;
+  }
+}

frontend/src/tests/Dashboard.test.ts

···
           { name: /app passwords/i, href: '#/app-passwords' },
           { name: /invite codes/i, href: '#/invite-codes' },
           { name: /account settings/i, href: '#/settings' },
-          { name: /notification preferences/i, href: '#/notifications' },
+          { name: /communication preferences/i, href: '#/comms' },
           { name: /repository explorer/i, href: '#/repo' },
         ]
         for (const { name, href } of navCards) {

frontend/src/tests/Notifications.test.ts frontend/src/tests/Comms.test.ts

···
 import { describe, it, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte'
-import Notifications from '../routes/Notifications.svelte'
+import Comms from '../routes/Comms.svelte'
 import {
   setupFetchMock,
   mockEndpoint,
···
   setupAuthenticatedUser,
   setupUnauthenticatedUser,
 } from './mocks'
-describe('Notifications', () => {
+describe('Comms', () => {
   beforeEach(() => {
     clearMocks()
     setupFetchMock()
···
   describe('authentication guard', () => {
     it('redirects to login when not authenticated', async () => {
       setupUnauthenticatedUser()
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(window.location.hash).toBe('#/login')
       })
···
       )
     })
     it('displays all page elements and sections', async () => {
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByRole('heading', { name: /notification preferences/i, level: 1 })).toBeInTheDocument()
         expect(screen.getByRole('link', { name: /dashboard/i })).toHaveAttribute('href', '#/dashboard')
···
         await new Promise(resolve => setTimeout(resolve, 100))
         return jsonResponse(mockData.notificationPrefs())
       })
-      render(Notifications)
+      render(Comms)
       expect(screen.getByText(/loading/i)).toBeInTheDocument()
     })
   })
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs())
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByRole('radio', { name: /email/i })).toBeInTheDocument()
         expect(screen.getByRole('radio', { name: /discord/i })).toBeInTheDocument()
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs())
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         const emailRadio = screen.getByRole('radio', { name: /email/i })
         expect(emailRadio).not.toBeDisabled()
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs({ discordId: null }))
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         const discordRadio = screen.getByRole('radio', { name: /discord/i })
         expect(discordRadio).toBeDisabled()
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs({ discordId: '123456789' }))
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         const discordRadio = screen.getByRole('radio', { name: /discord/i })
         expect(discordRadio).not.toBeDisabled()
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs())
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getAllByText(/configure below to enable/i).length).toBeGreaterThan(0)
       })
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs({ preferredChannel: 'email' }))
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         const emailRadio = screen.getByRole('radio', { name: /email/i }) as HTMLInputElement
         expect(emailRadio.checked).toBe(true)
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs())
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         const emailInput = screen.getByLabelText(/^email$/i) as HTMLInputElement
         expect(emailInput).toBeDisabled()
···
           signalNumber: '[phone]',
         }))
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect((screen.getByLabelText(/discord user id/i) as HTMLInputElement).value).toBe('123456789')
         expect((screen.getByLabelText(/telegram username/i) as HTMLInputElement).value).toBe('testuser')
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs())
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByText('Primary')).toBeInTheDocument()
       })
···
           discordVerified: true,
         }))
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         const verifiedBadges = screen.getAllByText('Verified')
         expect(verifiedBadges.length).toBeGreaterThan(0)
···
           discordVerified: false,
         }))
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByText('Not verified')).toBeInTheDocument()
       })
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs())
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByText('Primary')).toBeInTheDocument()
         expect(screen.queryByText('Not verified')).not.toBeInTheDocument()
···
         capturedBody = JSON.parse((options?.body as string) || '{}')
         return jsonResponse({ success: true })
       })
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByLabelText(/discord user id/i)).toBeInTheDocument()
       })
···
         await new Promise(resolve => setTimeout(resolve, 100))
         return jsonResponse({ success: true })
       })
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByRole('button', { name: /save preferences/i })).toBeInTheDocument()
       })
···
       mockEndpoint('com.tranquil.account.updateNotificationPrefs', () =>
         jsonResponse({ success: true })
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByRole('button', { name: /save preferences/i })).toBeInTheDocument()
       })
···
       mockEndpoint('com.tranquil.account.updateNotificationPrefs', () =>
         errorResponse('InvalidRequest', 'Invalid channel configuration', 400)
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByRole('button', { name: /save preferences/i })).toBeInTheDocument()
       })
···
       mockEndpoint('com.tranquil.account.updateNotificationPrefs', () =>
         jsonResponse({ success: true })
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByRole('button', { name: /save preferences/i })).toBeInTheDocument()
       })
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         jsonResponse(mockData.notificationPrefs())
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByRole('radio', { name: /discord/i })).toBeDisabled()
       })
···
           discordVerified: true,
         }))
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByRole('radio', { name: /discord/i })).not.toBeDisabled()
       })
···
       mockEndpoint('com.tranquil.account.getNotificationPrefs', () =>
         errorResponse('InternalError', 'Database connection failed', 500)
       )
-      render(Notifications)
+      render(Comms)
       await waitFor(() => {
         expect(screen.getByText(/database connection failed/i)).toBeInTheDocument()
       })

migrations/20251230_add_preferred_locale.sql

···
+ALTER TABLE users ADD COLUMN preferred_locale VARCHAR(10);

src/api/identity/account.rs

···
                 verification_channel,
                 recipient,
                 &verification_code,
+                None,
             )
             .await
         {

src/api/server/mod.rs

···
 pub use session::{
     confirm_signup, create_session, delete_session, get_legacy_login_preference, get_session,
     list_sessions, refresh_session, resend_verification, revoke_all_sessions, revoke_session,
-    update_legacy_login_preference,
+    update_legacy_login_preference, update_locale,
 };
 pub use signing_key::reserve_signing_key;
 pub use totp::{

src/api/server/passkey_account.rs

···
         verification_channel,
         &verification_recipient,
         &verification_code,
+        None,
     )
     .await
     {

src/api/server/session.rs

···
 
     match sqlx::query!(
         r#"SELECT
-            handle, email, email_verified, is_admin, deactivated_at,
+            handle, email, email_verified, is_admin, deactivated_at, preferred_locale,
             preferred_comms_channel as "preferred_channel: crate::comms::CommsChannel",
             discord_verified, telegram_verified, signal_verified
         FROM users WHERE did = $1"#,
···
                 "emailVerified": email_verified_value,
                 "preferredChannel": preferred_channel,
                 "preferredChannelVerified": preferred_channel_verified,
+                "preferredLocale": row.preferred_locale,
                 "isAdmin": row.is_admin,
                 "active": is_active,
                 "status": if is_active { "active" } else { "deactivated" },
···
     }
     match sqlx::query!(
         r#"SELECT
-            handle, email, email_verified, is_admin,
+            handle, email, email_verified, is_admin, preferred_locale,
             preferred_comms_channel as "preferred_channel: crate::comms::CommsChannel",
             discord_verified, telegram_verified, signal_verified
         FROM users WHERE did = $1"#,
···
                 "emailVerified": u.email_verified,
                 "preferredChannel": preferred_channel,
                 "preferredChannelVerified": preferred_channel_verified,
+                "preferredLocale": u.preferred_locale,
                 "isAdmin": u.is_admin,
                 "active": true
             }))
···
         channel_str,
         &recipient,
         &verification_code,
+        None,
     )
     .await
     {
···
         }
     }
 }
+
+const VALID_LOCALES: &[&str] = &["en", "zh", "ja", "ko"];
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct UpdateLocaleInput {
+    pub preferred_locale: String,
+}
+
+pub async fn update_locale(
+    State(state): State<AppState>,
+    auth: BearerAuth,
+    Json(input): Json<UpdateLocaleInput>,
+) -> Response {
+    if !VALID_LOCALES.contains(&input.preferred_locale.as_str()) {
+        return (
+            StatusCode::BAD_REQUEST,
+            Json(json!({
+                "error": "InvalidRequest",
+                "message": format!("Invalid locale. Valid options: {}", VALID_LOCALES.join(", "))
+            })),
+        )
+            .into_response();
+    }
+
+    let result = sqlx::query!(
+        "UPDATE users SET preferred_locale = $1 WHERE did = $2 RETURNING did",
+        input.preferred_locale,
+        auth.0.did
+    )
+    .fetch_optional(&state.db)
+    .await;
+
+    match result {
+        Ok(Some(_)) => {
+            info!(
+                did = %auth.0.did,
+                locale = %input.preferred_locale,
+                "User locale preference updated"
+            );
+            Json(json!({
+                "preferredLocale": input.preferred_locale
+            }))
+            .into_response()
+        }
+        Ok(None) => (
+            StatusCode::NOT_FOUND,
+            Json(json!({"error": "AccountNotFound"})),
+        )
+            .into_response(),
+        Err(e) => {
+            error!("DB error updating locale: {:?}", e);
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(json!({"error": "InternalError"})),
+            )
+                .into_response()
+        }
+    }
+}

src/auth/token.rs

···
         SCOPE_ACCESS,
         TOKEN_TYPE_ACCESS,
         key_bytes,
-        Duration::minutes(120),
+        Duration::minutes(15),
     )
 }
 
···
         SCOPE_REFRESH,
         TOKEN_TYPE_REFRESH,
         key_bytes,
-        Duration::days(90),
+        Duration::days(14),
     )
 }
 
···
         SCOPE_ACCESS,
         TOKEN_TYPE_ACCESS,
         secret,
-        Duration::minutes(120),
+        Duration::minutes(15),
     )
 }
 
···
         SCOPE_REFRESH,
         TOKEN_TYPE_REFRESH,
         secret,
-        Duration::days(90),
+        Duration::days(14),
     )
 }
 

src/comms/locale.rs

···
+pub const DEFAULT_LOCALE: &str = "en";
+pub const VALID_LOCALES: &[&str] = &["en", "zh", "ja", "ko"];
+
+pub fn validate_locale(locale: &str) -> &str {
+    if VALID_LOCALES.contains(&locale) {
+        locale
+    } else {
+        DEFAULT_LOCALE
+    }
+}
+
+pub struct NotificationStrings {
+    pub welcome_subject: &'static str,
+    pub welcome_body: &'static str,
+    pub email_verification_subject: &'static str,
+    pub email_verification_body: &'static str,
+    pub password_reset_subject: &'static str,
+    pub password_reset_body: &'static str,
+    pub email_update_subject: &'static str,
+    pub email_update_body: &'static str,
+    pub account_deletion_subject: &'static str,
+    pub account_deletion_body: &'static str,
+    pub plc_operation_subject: &'static str,
+    pub plc_operation_body: &'static str,
+    pub two_factor_code_subject: &'static str,
+    pub two_factor_code_body: &'static str,
+    pub passkey_recovery_subject: &'static str,
+    pub passkey_recovery_body: &'static str,
+    pub signup_verification_subject: &'static str,
+    pub signup_verification_body: &'static str,
+    pub legacy_login_subject: &'static str,
+    pub legacy_login_body: &'static str,
+}
+
+pub fn get_strings(locale: &str) -> &'static NotificationStrings {
+    match validate_locale(locale) {
+        "zh" => &STRINGS_ZH,
+        "ja" => &STRINGS_JA,
+        "ko" => &STRINGS_KO,
+        _ => &STRINGS_EN,
+    }
+}
+
+static STRINGS_EN: NotificationStrings = NotificationStrings {
+    welcome_subject: "Welcome to {hostname}",
+    welcome_body: "Welcome to {hostname}!\n\nYour handle is: @{handle}\n\nThank you for joining us.",
+    email_verification_subject: "Verify your email - {hostname}",
+    email_verification_body: "Hello @{handle},\n\nYour email verification code is: {code}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please ignore this email.",
+    password_reset_subject: "Password Reset - {hostname}",
+    password_reset_body: "Hello @{handle},\n\nYour password reset code is: {code}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please ignore this message.",
+    email_update_subject: "Confirm your new email - {hostname}",
+    email_update_body: "Hello @{handle},\n\nYour email update confirmation code is: {code}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please ignore this email.",
+    account_deletion_subject: "Account Deletion Request - {hostname}",
+    account_deletion_body: "Hello @{handle},\n\nYour account deletion confirmation code is: {code}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please secure your account immediately.",
+    plc_operation_subject: "{hostname} - PLC Operation Token",
+    plc_operation_body: "Hello @{handle},\n\nYou requested to sign a PLC operation for your account.\n\nYour verification token is: {token}\n\nThis token will expire in 10 minutes.\n\nIf you did not request this, you can safely ignore this message.",
+    two_factor_code_subject: "Sign-in Verification - {hostname}",
+    two_factor_code_body: "Hello @{handle},\n\nYour sign-in verification code is: {code}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please secure your account immediately.",
+    passkey_recovery_subject: "Account Recovery - {hostname}",
+    passkey_recovery_body: "Hello @{handle},\n\nYou requested to recover your passkey-only account.\n\nClick the link below to set a temporary password and regain access:\n{url}\n\nThis link will expire in 1 hour.\n\nIf you did not request this, please ignore this message. Your account remains secure.",
+    signup_verification_subject: "Verify your account - {hostname}",
+    signup_verification_body: "Welcome! Your account verification code is: {code}\n\nThis code will expire in 30 minutes.\n\nEnter this code to complete your registration on {hostname}.",
+    legacy_login_subject: "Security Alert: Legacy Login Detected - {hostname}",
+    legacy_login_body: "Hello @{handle},\n\nA login to your account was detected using a legacy app (like Bluesky) that doesn't support TOTP verification.\n\nDetails:\n- Time: {timestamp}\n- IP Address: {ip}\n\nYour TOTP protection was bypassed for this login. The session has limited permissions for sensitive operations.\n\nIf this wasn't you, please:\n1. Change your password immediately\n2. Review your active sessions\n3. Consider disabling legacy app logins in your security settings\n\nStay safe,\n{hostname}",
+};
+
+static STRINGS_ZH: NotificationStrings = NotificationStrings {
+    welcome_subject: "欢迎加入 {hostname}",
+    welcome_body: "欢迎加入 {hostname}！\n\n您的用户名是：@{handle}\n\n感谢您的加入。",
+    email_verification_subject: "验证您的邮箱 - {hostname}",
+    email_verification_body: "您好 @{handle}，\n\n您的邮箱验证码是：{code}\n\n此验证码将在10分钟后过期。\n\n如果这不是您的操作，请忽略此邮件。",
+    password_reset_subject: "密码重置 - {hostname}",
+    password_reset_body: "您好 @{handle}，\n\n您的密码重置验证码是：{code}\n\n此验证码将在10分钟后过期。\n\n如果这不是您的操作，请忽略此消息。",
+    email_update_subject: "确认您的新邮箱 - {hostname}",
+    email_update_body: "您好 @{handle}，\n\n您的邮箱更新确认码是：{code}\n\n此验证码将在10分钟后过期。\n\n如果这不是您的操作，请忽略此邮件。",
+    account_deletion_subject: "账户删除请求 - {hostname}",
+    account_deletion_body: "您好 @{handle}，\n\n您的账户删除确认码是：{code}\n\n此验证码将在10分钟后过期。\n\n如果这不是您的操作，请立即保护您的账户。",
+    plc_operation_subject: "{hostname} - PLC 操作令牌",
+    plc_operation_body: "您好 @{handle}，\n\n您请求为账户签署 PLC 操作。\n\n您的验证令牌是：{token}\n\n此令牌将在10分钟后过期。\n\n如果这不是您的操作，您可以安全地忽略此消息。",
+    two_factor_code_subject: "登录验证 - {hostname}",
+    two_factor_code_body: "您好 @{handle}，\n\n您的登录验证码是：{code}\n\n此验证码将在10分钟后过期。\n\n如果这不是您的操作，请立即保护您的账户。",
+    passkey_recovery_subject: "账户恢复 - {hostname}",
+    passkey_recovery_body: "您好 @{handle}，\n\n您请求恢复仅通行密钥账户的访问权限。\n\n点击以下链接设置临时密码并恢复访问：\n{url}\n\n此链接将在1小时后过期。\n\n如果这不是您的操作，请忽略此消息。您的账户仍然安全。",
+    signup_verification_subject: "验证您的账户 - {hostname}",
+    signup_verification_body: "欢迎！您的账户验证码是：{code}\n\n此验证码将在30分钟后过期。\n\n请输入此验证码完成在 {hostname} 上的注册。",
+    legacy_login_subject: "安全提醒：检测到传统应用登录 - {hostname}",
+    legacy_login_body: "您好 @{handle}，\n\n检测到使用不支持 TOTP 验证的传统应用（如 Bluesky）登录您的账户。\n\n详细信息：\n- 时间：{timestamp}\n- IP 地址：{ip}\n\n此次登录绕过了 TOTP 保护。该会话对敏感操作的权限有限。\n\n如果这不是您的操作，请：\n1. 立即更改密码\n2. 检查您的活跃会话\n3. 考虑在安全设置中禁用传统应用登录\n\n请注意安全，\n{hostname}",
+};
+
+static STRINGS_JA: NotificationStrings = NotificationStrings {
+    welcome_subject: "{hostname} へようこそ",
+    welcome_body: "{hostname} へようこそ！\n\nお客様のハンドル：@{handle}\n\nご登録ありがとうございます。",
+    email_verification_subject: "メール認証 - {hostname}",
+    email_verification_body: "@{handle} 様\n\nメール認証コードは：{code}\n\nこのコードは10分後に期限切れとなります。\n\nこの操作に心当たりがない場合は、このメールを無視してください。",
+    password_reset_subject: "パスワードリセット - {hostname}",
+    password_reset_body: "@{handle} 様\n\nパスワードリセットコードは：{code}\n\nこのコードは10分後に期限切れとなります。\n\nこの操作に心当たりがない場合は、このメッセージを無視してください。",
+    email_update_subject: "新しいメールアドレスの確認 - {hostname}",
+    email_update_body: "@{handle} 様\n\nメールアドレス更新の確認コードは：{code}\n\nこのコードは10分後に期限切れとなります。\n\nこの操作に心当たりがない場合は、このメールを無視してください。",
+    account_deletion_subject: "アカウント削除リクエスト - {hostname}",
+    account_deletion_body: "@{handle} 様\n\nアカウント削除の確認コードは：{code}\n\nこのコードは10分後に期限切れとなります。\n\nこの操作に心当たりがない場合は、直ちにアカウントを保護してください。",
+    plc_operation_subject: "{hostname} - PLC 操作トークン",
+    plc_operation_body: "@{handle} 様\n\nアカウントの PLC 操作の署名をリクエストされました。\n\n認証トークンは：{token}\n\nこのトークンは10分後に期限切れとなります。\n\nこの操作に心当たりがない場合は、このメッセージを無視しても問題ありません。",
+    two_factor_code_subject: "ログイン認証 - {hostname}",
+    two_factor_code_body: "@{handle} 様\n\nログイン認証コードは：{code}\n\nこのコードは10分後に期限切れとなります。\n\nこの操作に心当たりがない場合は、直ちにアカウントを保護してください。",
+    passkey_recovery_subject: "アカウント復旧 - {hostname}",
+    passkey_recovery_body: "@{handle} 様\n\nパスキー専用アカウントの復旧をリクエストされました。\n\n以下のリンクをクリックして一時パスワードを設定し、アクセスを回復してください：\n{url}\n\nこのリンクは1時間後に期限切れとなります。\n\nこの操作に心当たりがない場合は、このメッセージを無視してください。アカウントは安全なままです。",
+    signup_verification_subject: "アカウント認証 - {hostname}",
+    signup_verification_body: "ようこそ！アカウント認証コードは：{code}\n\nこのコードは30分後に期限切れとなります。\n\n{hostname} への登録を完了するには、このコードを入力してください。",
+    legacy_login_subject: "セキュリティ警告：レガシーログインを検出 - {hostname}",
+    legacy_login_body: "@{handle} 様\n\nTOTP 認証に対応していないレガシーアプリ（Bluesky など）からのログインが検出されました。\n\n詳細：\n- 時刻：{timestamp}\n- IP アドレス：{ip}\n\nこのログインでは TOTP 保護がバイパスされました。このセッションは機密操作に対する権限が制限されています。\n\n心当たりがない場合は：\n1. 直ちにパスワードを変更してください\n2. アクティブなセッションを確認してください\n3. セキュリティ設定でレガシーアプリのログインを無効にすることを検討してください\n\nご注意ください。\n{hostname}",
+};
+
+static STRINGS_KO: NotificationStrings = NotificationStrings {
+    welcome_subject: "{hostname}에 오신 것을 환영합니다",
+    welcome_body: "{hostname}에 오신 것을 환영합니다!\n\n회원님의 핸들은: @{handle}\n\n가입해 주셔서 감사합니다.",
+    email_verification_subject: "이메일 인증 - {hostname}",
+    email_verification_body: "안녕하세요 @{handle}님,\n\n이메일 인증 코드는: {code}\n\n이 코드는 10분 후에 만료됩니다.\n\n요청하지 않으셨다면 이 이메일을 무시하세요.",
+    password_reset_subject: "비밀번호 재설정 - {hostname}",
+    password_reset_body: "안녕하세요 @{handle}님,\n\n비밀번호 재설정 코드는: {code}\n\n이 코드는 10분 후에 만료됩니다.\n\n요청하지 않으셨다면 이 메시지를 무시하세요.",
+    email_update_subject: "새 이메일 확인 - {hostname}",
+    email_update_body: "안녕하세요 @{handle}님,\n\n이메일 업데이트 확인 코드는: {code}\n\n이 코드는 10분 후에 만료됩니다.\n\n요청하지 않으셨다면 이 이메일을 무시하세요.",
+    account_deletion_subject: "계정 삭제 요청 - {hostname}",
+    account_deletion_body: "안녕하세요 @{handle}님,\n\n계정 삭제 확인 코드는: {code}\n\n이 코드는 10분 후에 만료됩니다.\n\n요청하지 않으셨다면 즉시 계정을 보호하세요.",
+    plc_operation_subject: "{hostname} - PLC 작업 토큰",
+    plc_operation_body: "안녕하세요 @{handle}님,\n\n계정의 PLC 작업 서명을 요청하셨습니다.\n\n인증 토큰은: {token}\n\n이 토큰은 10분 후에 만료됩니다.\n\n요청하지 않으셨다면 이 메시지를 안전하게 무시하셔도 됩니다.",
+    two_factor_code_subject: "로그인 인증 - {hostname}",
+    two_factor_code_body: "안녕하세요 @{handle}님,\n\n로그인 인증 코드는: {code}\n\n이 코드는 10분 후에 만료됩니다.\n\n요청하지 않으셨다면 즉시 계정을 보호하세요.",
+    passkey_recovery_subject: "계정 복구 - {hostname}",
+    passkey_recovery_body: "안녕하세요 @{handle}님,\n\n패스키 전용 계정 복구를 요청하셨습니다.\n\n아래 링크를 클릭하여 임시 비밀번호를 설정하고 액세스를 복구하세요:\n{url}\n\n이 링크는 1시간 후에 만료됩니다.\n\n요청하지 않으셨다면 이 메시지를 무시하세요. 계정은 안전하게 유지됩니다.",
+    signup_verification_subject: "계정 인증 - {hostname}",
+    signup_verification_body: "환영합니다! 계정 인증 코드는: {code}\n\n이 코드는 30분 후에 만료됩니다.\n\n{hostname}에서 등록을 완료하려면 이 코드를 입력하세요.",
+    legacy_login_subject: "보안 알림: 레거시 로그인 감지 - {hostname}",
+    legacy_login_body: "안녕하세요 @{handle}님,\n\nTOTP 인증을 지원하지 않는 레거시 앱(예: Bluesky)을 사용한 로그인이 감지되었습니다.\n\n세부 정보:\n- 시간: {timestamp}\n- IP 주소: {ip}\n\n이 로그인에서 TOTP 보호가 우회되었습니다. 이 세션은 민감한 작업에 대한 권한이 제한됩니다.\n\n본인이 아닌 경우:\n1. 즉시 비밀번호를 변경하세요\n2. 활성 세션을 검토하세요\n3. 보안 설정에서 레거시 앱 로그인 비활성화를 고려하세요\n\n{hostname} 드림",
+};
+
+pub fn format_message(template: &str, vars: &[(&str, &str)]) -> String {
+    let mut result = template.to_string();
+    for (key, value) in vars {
+        result = result.replace(&format!("{{{}}}", key), value);
+    }
+    result
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_validate_locale() {
+        assert_eq!(validate_locale("en"), "en");
+        assert_eq!(validate_locale("zh"), "zh");
+        assert_eq!(validate_locale("ja"), "ja");
+        assert_eq!(validate_locale("ko"), "ko");
+        assert_eq!(validate_locale("invalid"), DEFAULT_LOCALE);
+        assert_eq!(validate_locale(""), DEFAULT_LOCALE);
+    }
+
+    #[test]
+    fn test_format_message() {
+        let template = "Hello {name}, your code is {code}";
+        let result = format_message(template, &[("name", "Alice"), ("code", "123456")]);
+        assert_eq!(result, "Hello Alice, your code is 123456");
+    }
+
+    #[test]
+    fn test_get_strings() {
+        let en = get_strings("en");
+        assert!(en.welcome_subject.contains("{hostname}"));
+
+        let zh = get_strings("zh");
+        assert!(zh.welcome_subject.contains("{hostname}"));
+        assert!(zh.welcome_body.contains("欢迎"));
+    }
+}

src/comms/mod.rs

···
+mod locale;
 mod sender;
 mod service;
 mod types;

src/comms/service.rs

···
 use tracing::{debug, error, info, warn};
 use uuid::Uuid;
 
+use super::locale::{format_message, get_strings};
 use super::sender::{CommsSender, SendError};
 use super::types::{CommsChannel, CommsStatus, NewComms, QueuedComms};
 
···
     pub channel: CommsChannel,
     pub email: Option<String>,
     pub handle: String,
+    pub locale: String,
 }
 
 pub async fn get_user_comms_prefs(
···
         SELECT
             email,
             handle,
-            preferred_comms_channel as "channel: CommsChannel"
+            preferred_comms_channel as "channel: CommsChannel",
+            preferred_locale
         FROM users
         WHERE id = $1
         "#,
···
         channel: row.channel,
         email: row.email,
         handle: row.handle,
+        locale: row.preferred_locale.unwrap_or_else(|| "en".to_string()),
     })
 }
 
···
     hostname: &str,
 ) -> Result<Uuid, sqlx::Error> {
     let prefs = get_user_comms_prefs(db, user_id).await?;
-    let body = format!(
-        "Welcome to {}!\n\nYour handle is: @{}\n\nThank you for joining us.",
-        hostname, prefs.handle
+    let strings = get_strings(&prefs.locale);
+    let body = format_message(
+        strings.welcome_body,
+        &[("hostname", hostname), ("handle", &prefs.handle)],
     );
+    let subject = format_message(strings.welcome_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::new(
···
             prefs.channel,
             super::types::CommsType::Welcome,
             prefs.email.clone().unwrap_or_default(),
-            Some(format!("Welcome to {}", hostname)),
+            Some(subject),
             body,
         ),
     )
···
     code: &str,
     hostname: &str,
 ) -> Result<Uuid, sqlx::Error> {
-    let body = format!(
-        "Hello @{},\n\nYour email verification code is: {}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please ignore this email.",
-        handle, code
+    let prefs = get_user_comms_prefs(db, user_id).await?;
+    let strings = get_strings(&prefs.locale);
+    let body = format_message(
+        strings.email_verification_body,
+        &[("handle", handle), ("code", code)],
     );
+    let subject = format_message(strings.email_verification_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::email(
             user_id,
             super::types::CommsType::EmailVerification,
             email.to_string(),
-            format!("Verify your email - {}", hostname),
+            subject,
             body,
         ),
     )
···
     hostname: &str,
 ) -> Result<Uuid, sqlx::Error> {
     let prefs = get_user_comms_prefs(db, user_id).await?;
-    let body = format!(
-        "Hello @{},\n\nYour password reset code is: {}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please ignore this message.",
-        prefs.handle, code
+    let strings = get_strings(&prefs.locale);
+    let body = format_message(
+        strings.password_reset_body,
+        &[("handle", &prefs.handle), ("code", code)],
     );
+    let subject = format_message(strings.password_reset_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::new(
···
             prefs.channel,
             super::types::CommsType::PasswordReset,
             prefs.email.clone().unwrap_or_default(),
-            Some(format!("Password Reset - {}", hostname)),
+            Some(subject),
             body,
         ),
     )
···
     code: &str,
     hostname: &str,
 ) -> Result<Uuid, sqlx::Error> {
-    let body = format!(
-        "Hello @{},\n\nYour email update confirmation code is: {}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please ignore this email.",
-        handle, code
+    let prefs = get_user_comms_prefs(db, user_id).await?;
+    let strings = get_strings(&prefs.locale);
+    let body = format_message(
+        strings.email_update_body,
+        &[("handle", handle), ("code", code)],
     );
+    let subject = format_message(strings.email_update_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::email(
             user_id,
             super::types::CommsType::EmailUpdate,
             new_email.to_string(),
-            format!("Confirm your new email - {}", hostname),
+            subject,
             body,
         ),
     )
···
     hostname: &str,
 ) -> Result<Uuid, sqlx::Error> {
     let prefs = get_user_comms_prefs(db, user_id).await?;
-    let body = format!(
-        "Hello @{},\n\nYour account deletion confirmation code is: {}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please secure your account immediately.",
-        prefs.handle, code
+    let strings = get_strings(&prefs.locale);
+    let body = format_message(
+        strings.account_deletion_body,
+        &[("handle", &prefs.handle), ("code", code)],
     );
+    let subject = format_message(strings.account_deletion_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::new(
···
             prefs.channel,
             super::types::CommsType::AccountDeletion,
             prefs.email.clone().unwrap_or_default(),
-            Some(format!("Account Deletion Request - {}", hostname)),
+            Some(subject),
             body,
         ),
     )
···
     hostname: &str,
 ) -> Result<Uuid, sqlx::Error> {
     let prefs = get_user_comms_prefs(db, user_id).await?;
-    let body = format!(
-        "Hello @{},\n\nYou requested to sign a PLC operation for your account.\n\nYour verification token is: {}\n\nThis token will expire in 10 minutes.\n\nIf you did not request this, you can safely ignore this message.",
-        prefs.handle, token
+    let strings = get_strings(&prefs.locale);
+    let body = format_message(
+        strings.plc_operation_body,
+        &[("handle", &prefs.handle), ("token", token)],
     );
+    let subject = format_message(strings.plc_operation_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::new(
···
             prefs.channel,
             super::types::CommsType::PlcOperation,
             prefs.email.clone().unwrap_or_default(),
-            Some(format!("{} - PLC Operation Token", hostname)),
+            Some(subject),
             body,
         ),
     )
···
     hostname: &str,
 ) -> Result<Uuid, sqlx::Error> {
     let prefs = get_user_comms_prefs(db, user_id).await?;
-    let body = format!(
-        "Hello @{},\n\nYour sign-in verification code is: {}\n\nThis code will expire in 10 minutes.\n\nIf you did not request this, please secure your account immediately.",
-        prefs.handle, code
+    let strings = get_strings(&prefs.locale);
+    let body = format_message(
+        strings.two_factor_code_body,
+        &[("handle", &prefs.handle), ("code", code)],
     );
+    let subject = format_message(strings.two_factor_code_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::new(
···
             prefs.channel,
             super::types::CommsType::TwoFactorCode,
             prefs.email.clone().unwrap_or_default(),
-            Some(format!("Sign-in Verification - {}", hostname)),
+            Some(subject),
             body,
         ),
     )
···
     hostname: &str,
 ) -> Result<Uuid, sqlx::Error> {
     let prefs = get_user_comms_prefs(db, user_id).await?;
-    let body = format!(
-        "Hello @{},\n\nYou requested to recover your passkey-only account.\n\nClick the link below to set a temporary password and regain access:\n{}\n\nThis link will expire in 1 hour.\n\nIf you did not request this, please ignore this message. Your account remains secure.",
-        prefs.handle, recovery_url
+    let strings = get_strings(&prefs.locale);
+    let body = format_message(
+        strings.passkey_recovery_body,
+        &[("handle", &prefs.handle), ("url", recovery_url)],
     );
+    let subject = format_message(strings.passkey_recovery_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::new(
···
             prefs.channel,
             super::types::CommsType::PasskeyRecovery,
             prefs.email.clone().unwrap_or_default(),
-            Some(format!("Account Recovery - {}", hostname)),
+            Some(subject),
             body,
         ),
     )
···
     channel: &str,
     recipient: &str,
     code: &str,
+    locale: Option<&str>,
 ) -> Result<Uuid, sqlx::Error> {
     let hostname = std::env::var("PDS_HOSTNAME").unwrap_or_else(|_| "localhost".to_string());
     let comms_channel = match channel {
···
         "signal" => CommsChannel::Signal,
         _ => CommsChannel::Email,
     };
-    let body = format!(
-        "Welcome! Your account verification code is: {}\n\nThis code will expire in 30 minutes.\n\nEnter this code to complete your registration on {}.",
-        code, hostname
+    let strings = get_strings(locale.unwrap_or("en"));
+    let body = format_message(
+        strings.signup_verification_body,
+        &[("code", code), ("hostname", &hostname)],
     );
     let subject = match comms_channel {
-        CommsChannel::Email => Some(format!("Verify your account - {}", hostname)),
+        CommsChannel::Email => {
+            Some(format_message(strings.signup_verification_subject, &[("hostname", &hostname)]))
+        }
         _ => None,
     };
     enqueue_comms(
···
     channel: CommsChannel,
 ) -> Result<Uuid, sqlx::Error> {
     let prefs = get_user_comms_prefs(db, user_id).await?;
-    let timestamp = chrono::Utc::now().format("%Y-%m-%d %H:%M:%S UTC");
-    let body = format!(
-        "Hello @{},\n\n\
-        A login to your account was detected using a legacy app (like Bluesky) that doesn't support TOTP verification.\n\n\
-        Details:\n\
-        - Time: {}\n\
-        - IP Address: {}\n\n\
-        Your TOTP protection was bypassed for this login. The session has limited permissions for sensitive operations.\n\n\
-        If this wasn't you, please:\n\
-        1. Change your password immediately\n\
-        2. Review your active sessions\n\
-        3. Consider disabling legacy app logins in your security settings\n\n\
-        Stay safe,\n\
-        {}",
-        prefs.handle, timestamp, client_ip, hostname
+    let strings = get_strings(&prefs.locale);
+    let timestamp = chrono::Utc::now().format("%Y-%m-%d %H:%M:%S UTC").to_string();
+    let body = format_message(
+        strings.legacy_login_body,
+        &[
+            ("handle", &prefs.handle),
+            ("timestamp", &timestamp),
+            ("ip", client_ip),
+            ("hostname", hostname),
+        ],
     );
+    let subject = format_message(strings.legacy_login_subject, &[("hostname", hostname)]);
     enqueue_comms(
         db,
         NewComms::new(
···
             channel,
             super::types::CommsType::LegacyLoginAlert,
             prefs.email.clone().unwrap_or_default(),
-            Some(format!("Security Alert: Legacy Login Detected - {}", hostname)),
+            Some(subject),
             body,
         ),
     )

src/lib.rs

···
             post(api::server::update_legacy_login_preference),
         )
         .route(
+            "/xrpc/com.tranquil.account.updateLocale",
+            post(api::server::update_locale),
+        )
+        .route(
             "/xrpc/com.tranquil.account.listTrustedDevices",
             get(api::server::list_trusted_devices),
         )

src/oauth/endpoints/metadata.rs

···
     #[serde(skip_serializing_if = "Option::is_none")]
     pub require_pushed_authorization_requests: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
+    pub require_request_uri_registration: Option<bool>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     pub dpop_signing_alg_values_supported: Option<Vec<String>>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub authorization_response_iss_parameter_supported: Option<bool>,
···
         code_challenge_methods_supported: Some(vec!["S256".to_string()]),
         pushed_authorization_request_endpoint: Some(format!("{}/oauth/par", issuer)),
         require_pushed_authorization_requests: Some(true),
+        require_request_uri_registration: Some(true),
         dpop_signing_alg_values_supported: Some(vec![
             "ES256".to_string(),
             "ES384".to_string(),
···
         scope: "atproto transition:generic".to_string(),
         token_endpoint_auth_method: "none".to_string(),
         application_type: "web".to_string(),
-        dpop_bound_access_tokens: false,
+        dpop_bound_access_tokens: true,
     })
 }

src/oauth/endpoints/token/grants.rs

···
 use axum::http::HeaderMap;
 use chrono::{Duration, Utc};
 
-const ACCESS_TOKEN_EXPIRY_SECONDS: i64 = 3600;
-const REFRESH_TOKEN_EXPIRY_DAYS: i64 = 60;
+const ACCESS_TOKEN_EXPIRY_SECONDS: i64 = 300;
+const REFRESH_TOKEN_EXPIRY_DAYS_CONFIDENTIAL: i64 = 60;
+const REFRESH_TOKEN_EXPIRY_DAYS_PUBLIC: i64 = 14;
 
 pub async fn handle_authorization_code_grant(
     state: AppState,
···
         dpop_jkt.as_deref(),
         auth_request.parameters.scope.as_deref(),
     )?;
+    let stored_client_auth = auth_request.client_auth.unwrap_or(ClientAuth::None);
+    let refresh_expiry_days = if matches!(stored_client_auth, ClientAuth::None) {
+        REFRESH_TOKEN_EXPIRY_DAYS_PUBLIC
+    } else {
+        REFRESH_TOKEN_EXPIRY_DAYS_CONFIDENTIAL
+    };
     let token_data = TokenData {
         did: did.clone(),
         token_id: token_id.0.clone(),
         created_at: now,
         updated_at: now,
-        expires_at: now + Duration::days(REFRESH_TOKEN_EXPIRY_DAYS),
+        expires_at: now + Duration::days(refresh_expiry_days),
         client_id: auth_request.client_id.clone(),
-        client_auth: auth_request.client_auth.unwrap_or(ClientAuth::None),
+        client_auth: stored_client_auth,
         device_id: auth_request.device_id,
         parameters: auth_request.parameters.clone(),
         details: None,
···
     };
     let new_token_id = TokenId::generate();
     let new_refresh_token = RefreshToken::generate();
-    let new_expires_at = Utc::now() + Duration::days(REFRESH_TOKEN_EXPIRY_DAYS);
+    let refresh_expiry_days = if matches!(token_data.client_auth, ClientAuth::None) {
+        REFRESH_TOKEN_EXPIRY_DAYS_PUBLIC
+    } else {
+        REFRESH_TOKEN_EXPIRY_DAYS_CONFIDENTIAL
+    };
+    let new_expires_at = Utc::now() + Duration::days(refresh_expiry_days);
     db::rotate_token(
         &state.db,
         db_id,

src/oauth/endpoints/token/helpers.rs

···
 use sha2::{Digest, Sha256};
 use subtle::ConstantTimeEq;
 
-const ACCESS_TOKEN_EXPIRY_SECONDS: i64 = 3600;
+const ACCESS_TOKEN_EXPIRY_SECONDS: i64 = 300;
 
 pub struct TokenClaims {
     pub jti: String,

tests/oauth_client_metadata.rs

···
     );
     assert_eq!(
         body["dpop_bound_access_tokens"].as_bool(),
-        Some(false),
-        "Should not require DPoP"
+        Some(true),
+        "AT Protocol requires DPoP-bound access tokens"
     );
     let scope = body["scope"].as_str().unwrap();
     assert!(scope.contains("atproto"), "Scope should include atproto");

tests/session_management.rs

···
             base_url().await
         ))
         .bearer_auth(&jwt)
-        .json(&json!({"sessionId": "999999999"}))
+        .json(&json!({"sessionId": "jwt:999999999"}))
         .send()
         .await
         .expect("Failed to send request");