feat: add loading skeleton components and styles for improved UI experience

.gitignore

@@ -55,3 +55,9 @@ NodeWarden-compat/
 .codex-upstream/bitwarden-browser/
 
 .reasonix/
+
+# Compatibility analysis documents
+BITWARDEN_COMPATIBILITY_ANALYSIS.md
+.mcp.json
+opencode.jsonc
+.cursor/

src/handlers/accounts.ts

@@ -10,6 +10,10 @@ import { isTotpEnabled, verifyTotpToken } from '../utils/totp';
 import { createRecoveryCode, recoveryCodeEquals } from '../utils/recovery-code';
 import { buildAccountKeys } from '../utils/user-decryption';
 
+const TWO_FACTOR_PROVIDER_AUTHENTICATOR = 0;
+const TOTP_USER_VERIFICATION_TOKEN_TTL_MS = 10 * 60 * 1000;
+const TOTP_BASE32_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+
 // CONTRACT:
 // users.master_password_hash is server-side login verification only. It does
 // not decrypt vault data. Password changes must keep encrypted user key material,
@@ -64,6 +68,77 @@ function normalizeTotpSecret(input: string): string {
   return out;
 }
 
+function randomBase32Secret(length: number = 32): string {
+  const bytes = new Uint8Array(length);
+  crypto.getRandomValues(bytes);
+  let out = '';
+  for (const byte of bytes) {
+    out += TOTP_BASE32_ALPHABET[byte % TOTP_BASE32_ALPHABET.length];
+  }
+  return out;
+}
+
+function base64UrlEncodeBytes(data: Uint8Array): string {
+  const base64 = btoa(String.fromCharCode(...data));
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+function base64UrlDecodeBytes(input: string): Uint8Array {
+  let base64 = input.replace(/-/g, '+').replace(/_/g, '/');
+  while (base64.length % 4) base64 += '=';
+  const binary = atob(base64);
+  const out = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) out[i] = binary.charCodeAt(i);
+  return out;
+}
+
+async function hmacSha256(secret: string, data: string): Promise<Uint8Array> {
+  const key = await crypto.subtle.importKey(
+    'raw',
+    new TextEncoder().encode(secret),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign']
+  );
+  return new Uint8Array(await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(data)));
+}
+
+async function createTotpUserVerificationToken(env: Env, user: User, key: string): Promise<string> {
+  const payload = {
+    sub: user.id,
+    key,
+    stamp: user.securityStamp,
+    exp: Date.now() + TOTP_USER_VERIFICATION_TOKEN_TTL_MS,
+  };
+  const payloadB64 = base64UrlEncodeBytes(new TextEncoder().encode(JSON.stringify(payload)));
+  const signatureB64 = base64UrlEncodeBytes(await hmacSha256(env.JWT_SECRET, payloadB64));
+  return `${payloadB64}.${signatureB64}`;
+}
+
+async function verifyTotpUserVerificationToken(env: Env, user: User, key: string, token: string): Promise<boolean> {
+  try {
+    const [payloadB64, signatureB64] = String(token || '').split('.');
+    if (!payloadB64 || !signatureB64) return false;
+    const expected = base64UrlEncodeBytes(await hmacSha256(env.JWT_SECRET, payloadB64));
+    if (expected !== signatureB64) return false;
+    const payload = JSON.parse(new TextDecoder().decode(base64UrlDecodeBytes(payloadB64))) as {
+      sub?: string;
+      key?: string;
+      stamp?: string;
+      exp?: number;
+    };
+    return (
+      payload.sub === user.id &&
+      payload.key === key &&
+      payload.stamp === user.securityStamp &&
+      typeof payload.exp === 'number' &&
+      payload.exp >= Date.now()
+    );
+  } catch {
+    return false;
+  }
+}
+
 function normalizeRecoveryCodeInput(input: string): string {
   return String(input || '').toUpperCase().replace(/[^A-Z2-7]/g, '');
 }
@@ -91,6 +166,23 @@ async function verifyUserSecret(
   return auth.verifyPassword(normalized, user.masterPasswordHash, user.email);
 }
 
+function readBodyString(body: Record<string, unknown>, names: string[]): string {
+  for (const name of names) {
+    const value = body[name];
+    if (typeof value === 'string') return value;
+  }
+  return '';
+}
+
+async function readRequestBody(request: Request): Promise<Record<string, unknown>> {
+  const contentType = request.headers.get('content-type') || '';
+  if (contentType.includes('application/x-www-form-urlencoded')) {
+    const formData = await request.formData();
+    return Object.fromEntries(formData.entries()) as Record<string, unknown>;
+  }
+  return await request.json();
+}
+
 function toProfile(user: User, env: Env): ProfileResponse {
   void env;
   const accountKeys = buildAccountKeys(user);
@@ -592,6 +684,164 @@ export async function handleGetTotpStatus(request: Request, env: Env, userId: st
   });
 }
 
+function twoFactorProviderResponse(type: number, enabled: boolean): Record<string, unknown> {
+  return {
+    Enabled: enabled,
+    Type: type,
+    Object: 'twoFactorProvider',
+  };
+}
+
+function twoFactorAuthenticatorResponse(
+  enabled: boolean,
+  key: string,
+  userVerificationToken?: string
+): Record<string, unknown> {
+  return {
+    Enabled: enabled,
+    Key: key,
+    UserVerificationToken: userVerificationToken ?? null,
+    Object: 'twoFactorAuthenticator',
+  };
+}
+
+// GET /api/two-factor
+export async function handleGetTwoFactorProviders(request: Request, env: Env, userId: string): Promise<Response> {
+  void request;
+  const storage = new StorageService(env.DB);
+  const user = await storage.getUserById(userId);
+  if (!user) return errorResponse('User not found', 404);
+
+  const data = user.totpSecret
+    ? [twoFactorProviderResponse(TWO_FACTOR_PROVIDER_AUTHENTICATOR, true)]
+    : [];
+
+  return jsonResponse({
+    Data: data,
+    ContinuationToken: null,
+    Object: 'list',
+  });
+}
+
+// POST /api/two-factor/get-authenticator
+export async function handleGetTwoFactorAuthenticator(request: Request, env: Env, userId: string): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  const auth = new AuthService(env);
+  const user = await storage.getUserById(userId);
+  if (!user) return errorResponse('User not found', 404);
+
+  let body: Record<string, unknown>;
+  try {
+    body = await readRequestBody(request);
+  } catch {
+    return errorResponse('Invalid JSON', 400);
+  }
+
+  const secret = readBodyString(body, ['masterPasswordHash', 'MasterPasswordHash', 'otp', 'OTP', 'secret', 'Secret']);
+  const verified = await verifyUserSecret(auth, user, secret);
+  if (!verified) return errorResponse('User verification failed.', 400);
+
+  const key = normalizeTotpSecret(user.totpSecret || '') || randomBase32Secret();
+  const userVerificationToken = await createTotpUserVerificationToken(env, user, key);
+  return jsonResponse(twoFactorAuthenticatorResponse(!!user.totpSecret, key, userVerificationToken));
+}
+
+// PUT/POST /api/two-factor/authenticator
+export async function handlePutTwoFactorAuthenticator(request: Request, env: Env, userId: string): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  const user = await storage.getUserById(userId);
+  if (!user) return errorResponse('User not found', 404);
+
+  let body: Record<string, unknown>;
+  try {
+    body = await readRequestBody(request);
+  } catch {
+    return errorResponse('Invalid JSON', 400);
+  }
+
+  const key = normalizeTotpSecret(readBodyString(body, ['key', 'Key']));
+  const token = readBodyString(body, ['token', 'Token']).trim();
+  const userVerificationToken = readBodyString(body, ['userVerificationToken', 'UserVerificationToken']);
+  if (!key || !token || !userVerificationToken) {
+    return errorResponse('Key, token and userVerificationToken are required', 400);
+  }
+  if (!await verifyTotpUserVerificationToken(env, user, key, userVerificationToken)) {
+    return errorResponse('User verification failed.', 400);
+  }
+  if (!isTotpEnabled(key)) return errorResponse('Invalid TOTP secret', 400);
+  if (!await verifyTotpToken(key, token)) return errorResponse('Invalid token.', 400);
+
+  user.totpSecret = key;
+  if (!user.totpRecoveryCode) {
+    user.totpRecoveryCode = createRecoveryCode();
+  }
+  user.updatedAt = new Date().toISOString();
+  await storage.saveUser(user);
+  await storage.deleteRefreshTokensByUserId(user.id);
+  AuthService.invalidateUserCache(user.id);
+  await writeAuditEvent(storage, {
+    actorUserId: user.id,
+    action: 'account.totp.enable',
+    category: 'security',
+    level: 'security',
+    targetType: 'user',
+    targetId: user.id,
+    metadata: auditRequestMetadata(request),
+  });
+
+  return jsonResponse(twoFactorAuthenticatorResponse(true, key));
+}
+
+// DELETE /api/two-factor/authenticator and PUT/POST /api/two-factor/disable
+export async function handleDisableTwoFactorProvider(request: Request, env: Env, userId: string): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  const auth = new AuthService(env);
+  const user = await storage.getUserById(userId);
+  if (!user) return errorResponse('User not found', 404);
+
+  let body: Record<string, unknown>;
+  try {
+    body = await readRequestBody(request);
+  } catch {
+    return errorResponse('Invalid JSON', 400);
+  }
+
+  const typeRaw = body.type ?? body.Type ?? TWO_FACTOR_PROVIDER_AUTHENTICATOR;
+  const type = typeof typeRaw === 'number' ? typeRaw : Number.parseInt(String(typeRaw), 10);
+  if (type !== TWO_FACTOR_PROVIDER_AUTHENTICATOR) {
+    return errorResponse('Two-factor provider is not supported by this server.', 400);
+  }
+
+  const key = normalizeTotpSecret(readBodyString(body, ['key', 'Key']));
+  const userVerificationToken = readBodyString(body, ['userVerificationToken', 'UserVerificationToken']);
+  const secret = readBodyString(body, ['masterPasswordHash', 'MasterPasswordHash', 'otp', 'OTP', 'secret', 'Secret']);
+  let verified = false;
+  if (key && userVerificationToken) {
+    verified = await verifyTotpUserVerificationToken(env, user, key, userVerificationToken);
+  }
+  if (!verified) {
+    verified = await verifyUserSecret(auth, user, secret);
+  }
+  if (!verified) return errorResponse('User verification failed.', 400);
+
+  user.totpSecret = null;
+  user.updatedAt = new Date().toISOString();
+  await storage.saveUser(user);
+  await storage.deleteRefreshTokensByUserId(user.id);
+  AuthService.invalidateUserCache(user.id);
+  await writeAuditEvent(storage, {
+    actorUserId: user.id,
+    action: 'account.totp.disable',
+    category: 'security',
+    level: 'security',
+    targetType: 'user',
+    targetId: user.id,
+    metadata: auditRequestMetadata(request),
+  });
+
+  return jsonResponse(twoFactorProviderResponse(TWO_FACTOR_PROVIDER_AUTHENTICATOR, false));
+}
+
 // PUT /api/accounts/totp
 // enable: { enabled: true, secret: "...", token: "123456" }
 // disable: { enabled: false, masterPasswordHash: "..." }
@@ -699,7 +949,9 @@ export async function handleGetTotpRecoveryCode(request: Request, env: Env, user
   }
 
   return jsonResponse({
+    Code: user.totpRecoveryCode,
     code: user.totpRecoveryCode,
+    Object: 'twoFactorRecover',
     object: 'twoFactorRecover',
   });
 }

src/handlers/ciphers.ts

@@ -141,6 +141,12 @@ function optionalEncString(value: unknown): string | null {
   return isValidEncString(value) ? value.trim() : null;
 }
 
+function optionalEncStringWithin(value: unknown, maxLength: number): string | null {
+  const normalized = optionalEncString(value);
+  if (!normalized) return null;
+  return normalized.length <= maxLength ? normalized : null;
+}
+
 function shouldAcceptCipherKey(value: unknown): boolean {
   return value == null || value === '' || isValidEncString(value);
 }
@@ -151,13 +157,16 @@ function normalizeCipherKeyForStorage(value: unknown): string | null {
 
 function sanitizeEncryptedObject<T extends Record<string, any>>(
   source: T | null | undefined,
-  encryptedKeys: readonly string[]
+  encryptedKeys: readonly string[] | Record<string, number>
 ): T | null {
   if (!source || typeof source !== 'object') return source ?? null;
   const next: Record<string, any> = { ...source };
-  for (const key of encryptedKeys) {
+  const entries = Array.isArray(encryptedKeys)
+    ? encryptedKeys.map((key) => [key, 10000] as const)
+    : Object.entries(encryptedKeys);
+  for (const [key, maxLength] of entries) {
     if (!Object.prototype.hasOwnProperty.call(next, key)) continue;
-    next[key] = optionalEncString(next[key]);
+    next[key] = optionalEncStringWithin(next[key], maxLength);
   }
   return next as T;
 }
@@ -188,7 +197,12 @@ export function normalizeCipherLoginForCompatibility(
 ): any {
   const normalized = normalizeCipherLoginForStorage(login);
   if (!normalized || typeof normalized !== 'object') return normalized ?? null;
-  const next = sanitizeEncryptedObject(normalized, ['username', 'password', 'totp', 'uri']);
+  const next = sanitizeEncryptedObject(normalized, {
+    username: 1000,
+    password: 5000,
+    totp: 1000,
+    uri: 10000,
+  });
   if (!next) return null;
   next.uris = normalizeCipherLoginUrisForCompatibility(next.uris, {
     requiresUriChecksum,
@@ -214,23 +228,19 @@ function normalizeCipherLoginUrisForCompatibility(
     const hasChecksum = isValidEncString(next.uriChecksum);
     const hasMatch = next.match != null;
 
-    if (hasUri && hasChecksum) {
+    if (hasUri && String(next.uri).trim().length > 10000) continue;
+    if (hasChecksum && String(next.uriChecksum).trim().length > 10000) {
+      next.uriChecksum = null;
+    }
+
+    if (hasUri && isValidEncString(next.uriChecksum)) {
       out.push(next);
       continue;
     }
 
     if (hasUri && !hasChecksum) {
-      if (options.preserveRepairableUris) {
+      // Official Bitwarden treats UriChecksum as nullable encrypted metadata.
-        // Preserve the encrypted URI so NodeWarden Web can decrypt it and repair
+      // Keep the URI intact and let clients that can repair checksums do so.
-        // the missing checksum. Dropping it here makes the URI appear lost and
-        // can turn a display-only compatibility issue into data loss on save.
-        out.push({ ...next, uriChecksum: null });
-        continue;
-      }
-      // Bitwarden browser clients using the SDK drop item-key encrypted URIs
-      // whose checksum is missing/invalid. User-key encrypted legacy/import
-      // entries bypass this validation and can safely keep the URI.
-      if (options.requiresUriChecksum) continue;
       out.push({ ...next, uriChecksum: null });
       continue;
     }
@@ -243,14 +253,27 @@ function normalizeCipherLoginUrisForCompatibility(
   return out.length ? out : null;
 }
 
-function hasMissingLoginUriChecksum(cipher: Cipher): boolean {
+export function validateCipherEncryptedFieldsForCompatibility(cipher: Cipher): string | null {
-  if (!cipher.key || !cipher.login || typeof cipher.login !== 'object') return false;
+  if (cipher.name != null && !optionalEncStringWithin(cipher.name, 1000)) return 'Cipher name must be an encrypted string up to 1000 characters.';
-  const uris = (cipher.login as any).uris;
+  if (cipher.notes != null && !optionalEncStringWithin(cipher.notes, 10000)) return 'Cipher notes must be an encrypted string up to 10000 characters.';
-  if (!Array.isArray(uris)) return false;
+
-  return uris.some((uri: any) => {
+  const login = cipher.login as any;
-    if (!uri || typeof uri !== 'object') return false;
+  if (login && typeof login === 'object') {
-    return isValidEncString(uri.uri) && !isValidEncString(uri.uriChecksum);
+    if (login.username != null && !optionalEncStringWithin(login.username, 1000)) return 'Login username must be an encrypted string up to 1000 characters.';
-  });
+    if (login.password != null && !optionalEncStringWithin(login.password, 5000)) return 'Login password must be an encrypted string up to 5000 characters.';
+    if (login.totp != null && !optionalEncStringWithin(login.totp, 1000)) return 'Login TOTP must be an encrypted string up to 1000 characters.';
+    if (login.uri != null && !optionalEncStringWithin(login.uri, 10000)) return 'Login URI must be an encrypted string up to 10000 characters.';
+
+    if (Array.isArray(login.uris)) {
+      for (const uri of login.uris) {
+        if (!uri || typeof uri !== 'object') continue;
+        if (uri.uri != null && !optionalEncStringWithin(uri.uri, 10000)) return 'Login URI must be an encrypted string up to 10000 characters.';
+        if (uri.uriChecksum != null && !optionalEncStringWithin(uri.uriChecksum, 10000)) return 'Login URI checksum must be an encrypted string up to 10000 characters.';
+      }
+    }
+  }
+
+  return null;
 }
 
 function normalizeFido2CredentialsForCompatibility(credentials: any): any[] | null {
@@ -589,7 +612,14 @@ export function cipherToResponse(
     !!responseCipherKey,
     !!options.preserveRepairableUris
   );
-  const normalizedCard = sanitizeEncryptedObject((passthrough as any).card ?? null, ['cardholderName', 'brand', 'number', 'expMonth', 'expYear', 'code']);
+  const normalizedCard = sanitizeEncryptedObject((passthrough as any).card ?? null, {
+    cardholderName: 1000,
+    brand: 1000,
+    number: 1000,
+    expMonth: 1000,
+    expYear: 1000,
+    code: 1000,
+  });
   const normalizedIdentity = sanitizeEncryptedObject((passthrough as any).identity ?? null, [
     'title',
     'firstName',
@@ -647,6 +677,7 @@ export function cipherToResponse(
     passwordHistory: normalizePasswordHistoryForCompatibility((passthrough as any).passwordHistory),
     sshKey: normalizedSshKey,
     key: responseCipherKey,
+    data: typeof (passthrough as any).data === 'string' ? (passthrough as any).data : null,
     encryptedFor: (passthrough as any).encryptedFor ?? null,
   };
 }
@@ -772,6 +803,8 @@ export async function handleCreateCipher(request: Request, env: Env, userId: str
   const createFields = getAliasedProp(cipherData, ['fields', 'Fields']);
   cipher.fields = createFields.present ? (createFields.value ?? null) : (cipher.fields ?? null);
   normalizeCipherForStorage(cipher);
+  const compatibilityError = validateCipherEncryptedFieldsForCompatibility(cipher);
+  if (compatibilityError) return errorResponse(compatibilityError, 400);
 
   // Prevent referencing a folder owned by another user.
   if (cipher.folderId) {
@@ -779,10 +812,6 @@ export async function handleCreateCipher(request: Request, env: Env, userId: str
     if (!folderOk) return errorResponse('Folder not found', 404);
   }
 
-  if (hasMissingLoginUriChecksum(cipher)) {
-    return errorResponse('Login URI checksum is required for item-key encrypted ciphers. Refresh NodeWarden and save the item again.', 400);
-  }
-
   await storage.saveCipher(cipher);
   const revisionDate = await storage.updateRevisionDate(userId);
   notifyVaultSyncForRequest(request, env, userId, revisionDate);
@@ -835,10 +864,6 @@ export async function handleUpdateCipher(request: Request, env: Env, userId: str
     return errorResponse('The client copy of this cipher is out of date. Resync the client and try again.', 400);
   }
 
-  if (!shouldPreserveRepairableCipherUris(request) && incomingLogin.present && hasMissingLoginUriChecksum(existingCipher)) {
-    return errorResponse('This item has login URIs that must be repaired in NodeWarden Web before updating from this client. Open NodeWarden Web once, then resync.', 400);
-  }
-
   const nextType = Number(cipherData.type) || existingCipher.type;
 
   // Opaque passthrough: merge existing stored data with ALL incoming client fields.
@@ -887,6 +912,8 @@ export async function handleUpdateCipher(request: Request, env: Env, userId: str
     cipher.fields = null;
   }
   normalizeCipherForStorage(cipher);
+  const compatibilityError = validateCipherEncryptedFieldsForCompatibility(cipher);
+  if (compatibilityError) return errorResponse(compatibilityError, 400);
 
   // Prevent referencing a folder owned by another user.
   if (cipher.folderId) {
@@ -894,10 +921,6 @@ export async function handleUpdateCipher(request: Request, env: Env, userId: str
     if (!folderOk) return errorResponse('Folder not found', 404);
   }
 
-  if (hasMissingLoginUriChecksum(cipher)) {
-    return errorResponse('Login URI checksum is required for item-key encrypted ciphers. Refresh NodeWarden and save the item again.', 400);
-  }
-
   await syncIncomingAttachmentMetadata(storage, cipher.id, cipherData);
   await storage.saveCipher(cipher);
   const revisionDate = await storage.updateRevisionDate(userId);

src/handlers/identity.ts

@@ -23,11 +23,12 @@ import {
 const TWO_FACTOR_REMEMBER_TTL_MS = 30 * 24 * 60 * 60 * 1000;
 const TWO_FACTOR_PROVIDER_AUTHENTICATOR = 0;
 const TWO_FACTOR_PROVIDER_REMEMBER = 5;
+const TWO_FACTOR_PROVIDER_RECOVERY_CODE = 8;
 const WEB_REFRESH_COOKIE = 'nodewarden_web_refresh';
-// Android client (2026.2.x) deserializes TwoFactorProviders2 keys with -1 for recovery code.
+// Some UI surfaces use -1 for the recovery-code settings dialog. Login itself follows
-// Keep request parsing backward-compatible with historical provider values (8 / 100).
+// the official Identity provider enum (RecoveryCode = 8), while request parsing remains
+// compatible with older/local provider values.
 const TWO_FACTOR_PROVIDER_RECOVERY_CODE_RESPONSE = '-1';
-const TWO_FACTOR_PROVIDER_RECOVERY_CODE_LEGACY = 8;
 const TWO_FACTOR_PROVIDER_RECOVERY_CODE_ANDROID_REQUEST = 100;
 
 function resolveTotpSecret(userSecret: string | null): string | null {
@@ -76,6 +77,14 @@ function constantTimeEquals(a: string, b: string): boolean {
   return diff === 0;
 }
 
+function readBodyValue(body: Record<string, string>, names: string[]): string | undefined {
+  for (const name of names) {
+    const value = body[name];
+    if (value != null) return value;
+  }
+  return undefined;
+}
+
 function buildRefreshCookie(request: Request, refreshToken: string, maxAgeSeconds: number): string {
   const isHttps = new URL(request.url).protocol === 'https:';
   const parts = [
@@ -132,7 +141,7 @@ function buildPreloginResponse(
 
 function twoFactorRequiredResponse(message: string = 'Two factor required.', includeRecoveryCode: boolean = false): Response {
   const providers = includeRecoveryCode
-    ? [String(TWO_FACTOR_PROVIDER_AUTHENTICATOR), TWO_FACTOR_PROVIDER_RECOVERY_CODE_RESPONSE]
+    ? [String(TWO_FACTOR_PROVIDER_AUTHENTICATOR), String(TWO_FACTOR_PROVIDER_RECOVERY_CODE)]
     : [String(TWO_FACTOR_PROVIDER_AUTHENTICATOR)];
   const providers2: Record<string, null> = {};
   for (const provider of providers) providers2[provider] = null;
@@ -228,9 +237,9 @@ export async function handleToken(request: Request, env: Env): Promise<Response>
     // Login with password
     const email = body.username?.toLowerCase();
     const passwordHash = body.password;
-    const twoFactorToken = body.twoFactorToken;
+    const twoFactorToken = readBodyValue(body, ['twoFactorToken', 'TwoFactorToken']);
-    const twoFactorProvider = body.twoFactorProvider;
+    const twoFactorProvider = readBodyValue(body, ['twoFactorProvider', 'TwoFactorProvider']);
-    const twoFactorRemember = body.twoFactorRemember;
+    const twoFactorRemember = readBodyValue(body, ['twoFactorRemember', 'TwoFactorRemember']);
     const loginIdentifier = clientIdentifier;
     const deviceInfo = readAuthRequestDeviceInfo(body, request);
 
@@ -332,7 +341,7 @@ export async function handleToken(request: Request, env: Env): Promise<Response>
         }
       } else if (
         normalizedTwoFactorProvider === TWO_FACTOR_PROVIDER_RECOVERY_CODE_RESPONSE ||
-        normalizedTwoFactorProvider === String(TWO_FACTOR_PROVIDER_RECOVERY_CODE_LEGACY) ||
+        normalizedTwoFactorProvider === String(TWO_FACTOR_PROVIDER_RECOVERY_CODE) ||
         normalizedTwoFactorProvider === String(TWO_FACTOR_PROVIDER_RECOVERY_CODE_ANDROID_REQUEST)
       ) {
         if (!recoveryCodeEquals(normalizedTwoFactorToken, user.totpRecoveryCode)) {

src/handlers/import.ts

@@ -5,7 +5,7 @@ import { errorResponse, jsonResponse } from '../utils/response';
 import { readActingDeviceIdentifier } from '../utils/device';
 import { generateUUID } from '../utils/uuid';
 import { LIMITS } from '../config/limits';
-import { normalizeCipherLoginForStorage, normalizeCipherSshKeyForCompatibility } from './ciphers';
+import { normalizeCipherLoginForStorage, normalizeCipherSshKeyForCompatibility, validateCipherEncryptedFieldsForCompatibility } from './ciphers';
 
 // Bitwarden client import request format
 interface CiphersImportRequest {
@@ -252,6 +252,10 @@ export async function handleCiphersImport(request: Request, env: Env, userId: st
       deletedAt: null,
     };
     cipher.login = normalizeCipherLoginForStorage(cipher.login);
+    const compatibilityError = validateCipherEncryptedFieldsForCompatibility(cipher);
+    if (compatibilityError) {
+      return errorResponse(`Cipher ${i + 1}: ${compatibilityError}`, 400);
+    }
 
     cipherRows.push(cipher);
     cipherMapRows.push({ index: i, sourceId, id: cipher.id });

src/router-authenticated.ts

@@ -11,6 +11,10 @@ import {
   handleGetTotpStatus,
   handleSetTotpStatus,
   handleGetTotpRecoveryCode,
+  handleGetTwoFactorProviders,
+  handleGetTwoFactorAuthenticator,
+  handlePutTwoFactorAuthenticator,
+  handleDisableTwoFactorProvider,
   handleGetApiKey,
   handleRotateApiKey,
 } from './handlers/accounts';
@@ -119,6 +123,25 @@ export async function handleAuthenticatedRoute(
     return handleGetTotpRecoveryCode(request, env, userId);
   }
 
+  if (path === '/api/two-factor') {
+    if (method === 'GET') return handleGetTwoFactorProviders(request, env, userId);
+    return errorResponse('Method not allowed', 405);
+  }
+
+  if (path === '/api/two-factor/get-authenticator' && method === 'POST') {
+    return handleGetTwoFactorAuthenticator(request, env, userId);
+  }
+
+  if (path === '/api/two-factor/authenticator') {
+    if (method === 'PUT' || method === 'POST') return handlePutTwoFactorAuthenticator(request, env, userId);
+    if (method === 'DELETE') return handleDisableTwoFactorProvider(request, env, userId);
+    return errorResponse('Method not allowed', 405);
+  }
+
+  if (path === '/api/two-factor/disable' && (method === 'PUT' || method === 'POST')) {
+    return handleDisableTwoFactorProvider(request, env, userId);
+  }
+
   if (path === '/api/accounts/revision-date' && method === 'GET') {
     return handleGetRevisionDate(request, env, userId);
   }

webapp/src/components/LoadingSkeleton.tsx

@@ -0,0 +1,40 @@
+export function CardSkeleton() {
+  return (
+    <div className="skeleton-card">
+      <div className="skeleton-avatar" />
+      <div className="skeleton-content">
+        <div className="skeleton-line skeleton-line-lg" />
+        <div className="skeleton-line" />
+      </div>
+    </div>
+  );
+}
+
+export function ListSkeleton({ count = 5 }: { count?: number }) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="skeleton-list-item">
+          <div className="skeleton-icon" />
+          <div className="skeleton-content">
+            <div className="skeleton-line skeleton-line-md" />
+            <div className="skeleton-line skeleton-line-sm" />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export function PageSkeleton() {
+  return (
+    <div className="skeleton-page">
+      <div className="skeleton-header">
+        <div className="skeleton-line skeleton-line-xl" />
+      </div>
+      <div className="skeleton-body">
+        <ListSkeleton />
+      </div>
+    </div>
+  );
+}

webapp/src/styles.css

@@ -7,6 +7,7 @@
 @import './styles/management.css';
 @import './styles/overlays.css';
 @import './styles/motion.css';
+@import './styles/skeleton.css';
 @import './styles/responsive.css';
 @import './styles/dark.css';
 

webapp/src/styles/base.css

@@ -8,7 +8,14 @@ body,
   @apply m-0 h-full w-full p-0;
   color: var(--text);
   background: var(--bg-accent);
-  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
+  font-size: var(--font-base);
+  line-height: var(--leading-normal);
+  letter-spacing: var(--tracking-normal);
+  font-feature-settings: 'liga' 1, 'kern' 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 html {
@@ -16,7 +23,7 @@ html {
 }
 
 body {
-  @apply relative antialiased;
+  @apply relative;
   transition: background-color var(--dur-medium) var(--ease-smooth), color var(--dur-medium) var(--ease-smooth);
 }
 
@@ -25,6 +32,28 @@ body.dialog-open {
   overscroll-behavior: contain;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  letter-spacing: var(--tracking-tight);
+  line-height: var(--leading-tight);
+  margin: 0;
+}
+
+h1 { font-size: var(--font-4xl); }
+h2 { font-size: var(--font-3xl); }
+h3 { font-size: var(--font-xl); }
+h4 { font-size: var(--font-lg); }
+
+p {
+  margin: 0;
+  line-height: var(--leading-relaxed);
+}
+
+small {
+  font-size: var(--font-sm);
+  line-height: var(--leading-snug);
+}
+
 ::selection {
   background: color-mix(in srgb, var(--primary) 20%, transparent);
   color: var(--text);

webapp/src/styles/forms.css

@@ -1,20 +1,33 @@
 .muted {
-  @apply m-0 mb-4 text-center leading-relaxed text-muted;
+  @apply m-0 mb-4 text-center text-muted;
+  font-size: var(--font-sm);
+  line-height: var(--leading-relaxed);
+  letter-spacing: var(--tracking-normal);
 }
 
 .field {
-  @apply mb-3.5 block;
+  @apply mb-4 block;
 }
 
 .field > span {
-  @apply mb-2 mt-2.5 block text-sm font-semibold;
+  @apply mb-2 block;
+  font-size: var(--font-sm);
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
+  color: var(--muted-strong);
+  line-height: var(--leading-snug);
 }
 
 .input {
-  @apply h-12 w-full rounded-xl border px-3.5 py-2.5 text-base leading-normal text-ink outline-none transition;
+  @apply h-12 w-full rounded-xl border px-3.5 py-2.5 outline-none;
   background: var(--panel);
   border-color: rgba(74, 103, 150, 0.34);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
+  transition: all var(--dur-fast) var(--ease-smooth);
+  font-size: var(--font-base);
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+  color: var(--text);
 }
 
 select.input {
@@ -54,9 +67,10 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .input:focus {
-  border-color: rgba(43, 102, 217, 0.6);
+  border-color: var(--primary);
   background-color: #fbfdff;
-  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10), 0 8px 18px rgba(37, 99, 235, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 8px 20px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  transform: translateY(-1px);
 }
 
 .input-readonly {
@@ -115,7 +129,12 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .btn {
-  @apply inline-flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-full border border-transparent px-4 text-[15px] font-bold no-underline transition;
+  @apply inline-flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-full border border-transparent px-4 no-underline;
+  font-size: var(--font-sm);
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
+  line-height: 1;
+  transition: all var(--dur-fast) var(--ease-smooth);
 }
 
 .topbar-actions .btn,
@@ -161,28 +180,53 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .btn.full {
-  @apply my-2.5 h-12 w-full text-lg;
+  @apply my-2.5 h-12 w-full;
+  font-size: var(--font-md);
+  font-weight: 600;
 }
 
 .btn-primary {
-  @apply border-blue-700/30 bg-blue-600 text-white;
+  @apply text-white;
-  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.20);
+  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+  border: 1px solid rgba(37, 99, 235, 0.4);
+  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-primary::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease-smooth);
 }
 
 .btn-primary:hover {
-  @apply bg-blue-700;
+  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
-  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
+  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  transform: translateY(-2px);
+}
+
+.btn-primary:hover::before {
+  opacity: 1;
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0) scale(0.98);
 }
 
 .btn-secondary {
   @apply bg-panel text-brand-strong;
-  border-color: rgba(37, 99, 235, 0.20);
+  border: 1px solid rgba(37, 99, 235, 0.22);
-  box-shadow: 0 6px 14px rgba(13, 31, 68, 0.04);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 
 .btn-secondary:hover {
-  background: #f4f8ff;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-  border-color: rgba(37, 99, 235, 0.34);
+  border-color: rgba(37, 99, 235, 0.40);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1);
 }
 
 .btn-danger {
@@ -200,11 +244,21 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .or {
-  @apply text-center text-slate-700;
+  @apply text-center;
+  font-size: var(--font-sm);
+  color: var(--muted);
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  font-weight: 600;
 }
 
 .field-help {
-  @apply mt-2 text-[13px] leading-normal text-slate-500;
+  @apply mt-2;
+  font-size: var(--font-xs);
+  line-height: var(--leading-relaxed);
+  letter-spacing: var(--tracking-normal);
+  color: var(--muted);
 }
 
 .check-line-compact {
@@ -216,14 +270,21 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .auth-link-btn {
-  @apply cursor-pointer border-0 bg-transparent p-0 text-[13px] font-bold text-blue-700 transition;
+  @apply cursor-pointer border-0 bg-transparent p-0 transition;
+  font-size: var(--font-xs);
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
+  color: var(--primary-strong);
+  line-height: var(--leading-snug);
 }
 
 .auth-link-btn:hover {
   text-decoration: underline;
+  text-underline-offset: 2px;
   transform: translateX(2px);
 }
 
 .auth-link-btn:disabled {
-  @apply cursor-not-allowed text-slate-400 no-underline;
+  @apply cursor-not-allowed no-underline;
+  color: var(--muted);
 }

webapp/src/styles/motion.css

@@ -64,6 +64,26 @@
   to   { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes shimmer {
+  0% { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.3); }
+  50% { box-shadow: 0 0 30px rgba(37, 99, 235, 0.5), 0 0 40px rgba(37, 99, 235, 0.2); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

webapp/src/styles/shell.css

@@ -3,10 +3,15 @@
 }
 
 .app-shell {
-  @apply relative mx-auto flex max-w-[1600px] flex-col overflow-hidden border bg-panel-soft shadow-elevated;
+  @apply relative mx-auto flex max-w-[1600px] flex-col overflow-hidden border bg-panel-soft;
   height: calc(100vh - 40px);
   border-color: var(--line);
   @apply rounded-3xl;
+  box-shadow:
+    0 20px 60px rgba(15, 23, 42, 0.12),
+    0 8px 24px rgba(15, 23, 42, 0.08),
+    0 0 0 1px rgba(15, 23, 42, 0.04);
+  transition: box-shadow var(--dur-medium) var(--ease-smooth);
 }
 
 .topbar {
@@ -104,7 +109,7 @@
 }
 
 .theme-switch-slider::before {
-  @apply absolute h-[26px] w-[26px] rounded-full;
+  @apply absolute h-[23px] w-[26px] rounded-full;
   content: '';
   left: 2px;
   bottom: 2px;
@@ -119,8 +124,8 @@
 
 .theme-switch .sun svg {
   @apply absolute h-[18px] w-[18px];
-  top: 6px;
+  top: 5px;
-  left: 32px;
+  left: 29px;
   z-index: 1;
   opacity: 0.95;
   transition: transform var(--dur-medium) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
@@ -193,7 +198,13 @@
 }
 
 .side-link {
-  @apply flex items-center gap-2.5 rounded-xl border border-transparent px-3 py-2.5 text-sm font-semibold text-muted-strong no-underline transition;
+  @apply flex items-center rounded-xl border border-transparent px-3 py-2.5 no-underline transition;
+  gap: var(--space-2);
+  font-size: var(--font-sm);
+  font-weight: 500;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+  color: var(--muted-strong);
 }
 
 .side-link span,
@@ -213,24 +224,33 @@
 }
 
 .side-group-trigger {
-  @apply flex w-full cursor-pointer items-center gap-2.5 rounded-xl border border-transparent px-3 py-2.5 text-left text-sm font-semibold text-muted-strong transition;
+  @apply flex w-full cursor-pointer items-center rounded-xl border border-transparent px-3 py-2.5 text-left transition;
+  gap: var(--space-2);
   background: transparent;
+  font-size: var(--font-sm);
+  font-weight: 500;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+  color: var(--muted-strong);
 }
 
 .side-link:hover,
 .side-group-trigger:hover {
-  background: #fff;
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
-  border-color: rgba(128, 152, 192, 0.18);
+  border-color: rgba(128, 152, 192, 0.20);
   color: var(--text);
-  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
+  transform: translateX(2px);
 }
 
 .side-link.active,
 .side-group-trigger.active {
-  background: rgba(37, 99, 235, 0.11);
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
-  border-color: rgba(37, 99, 235, 0.28);
+  border-color: rgba(37, 99, 235, 0.32);
   color: var(--primary-strong);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.5),
+    0 2px 8px rgba(37, 99, 235, 0.15);
 }
 
 .side-group-chevron {
@@ -264,7 +284,13 @@
 }
 
 .side-sub-link {
-  @apply flex items-center gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-semibold text-muted no-underline transition;
+  @apply flex items-center rounded-lg border border-transparent px-2.5 py-2 no-underline transition;
+  gap: var(--space-2);
+  font-size: var(--font-sm);
+  font-weight: 500;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+  color: var(--muted);
 }
 
 .side-sub-link:hover {

webapp/src/styles/skeleton.css

@@ -0,0 +1,75 @@
+.skeleton-card,
+.skeleton-list-item {
+  @apply flex items-center gap-3 rounded-xl border p-4;
+  background: var(--panel);
+  border-color: var(--line-soft);
+  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.skeleton-avatar {
+  @apply h-12 w-12 shrink-0 rounded-full;
+  background: linear-gradient(
+    90deg,
+    var(--panel-muted) 0%,
+    var(--panel-soft) 50%,
+    var(--panel-muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.skeleton-icon {
+  @apply h-10 w-10 shrink-0 rounded-lg;
+  background: linear-gradient(
+    90deg,
+    var(--panel-muted) 0%,
+    var(--panel-soft) 50%,
+    var(--panel-muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.skeleton-content {
+  @apply min-w-0 flex-1 space-y-2;
+}
+
+.skeleton-line {
+  @apply h-3 rounded-full;
+  background: linear-gradient(
+    90deg,
+    var(--panel-muted) 0%,
+    var(--panel-soft) 50%,
+    var(--panel-muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.skeleton-line-sm {
+  @apply w-1/3;
+}
+
+.skeleton-line-md {
+  @apply w-2/3;
+}
+
+.skeleton-line-lg {
+  @apply w-4/5;
+}
+
+.skeleton-line-xl {
+  @apply w-full;
+}
+
+.skeleton-page {
+  @apply h-full space-y-4 p-4;
+}
+
+.skeleton-header {
+  @apply mb-6;
+}
+
+.skeleton-body {
+  @apply space-y-3;
+}

webapp/src/styles/tokens.css

@@ -7,66 +7,108 @@
   --surface: #ffffff;
   --line: rgba(100, 116, 139, 0.24);
   --line-soft: rgba(100, 116, 139, 0.14);
-  --text: #111827;
+  --text: #0f172a;
   --text-muted: #64748b;
   --muted: #64748b;
   --muted-strong: #334155;
-  --primary: #2457c5;
+  --primary: #2563eb;
-  --primary-hover: #1d4aa7;
+  --primary-hover: #1d4ed8;
-  --primary-strong: #173f8f;
+  --primary-strong: #1e40af;
   --brand: var(--primary);
   --brand-strong: var(--primary-strong);
-  --accent: #0f766e;
+  --accent: #0d9488;
   --accent-soft: #e6f6f3;
-  --danger: #c92f4e;
+  --danger: #dc2626;
-  --success: #0f766e;
+  --success: #059669;
-  --warning: #b7791f;
+  --warning: #d97706;
-  --overlay-strong: rgba(15, 23, 42, 0.58);
+  --overlay-strong: rgba(15, 23, 42, 0.62);
-  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.045);
+  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
-  --shadow-md: 0 8px 18px rgba(15, 23, 42, 0.075);
+  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.05);
-  --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.105);
+  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
+  --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
+  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15), 0 8px 24px rgba(37, 99, 235, 0.12);
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 10px;
   --radius-xl: 14px;
+  --radius-2xl: 18px;
   --ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-out-soft: cubic-bezier(0.24, 0.8, 0.32, 1);
   --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
   --dur-instant: 80ms;
   --dur-quick: 120ms;
   --dur-fast: 180ms;
   --dur-medium: 240ms;
   --dur-panel: 280ms;
+  --dur-slow: 350ms;
   --actions-gap: clamp(5px, calc((100vw - 520px) * 1), 10px);
+
+  /* Typography Scale */
+  --font-xs: 11px;
+  --font-sm: 13px;
+  --font-base: 14px;
+  --font-md: 15px;
+  --font-lg: 16px;
+  --font-xl: 18px;
+  --font-2xl: 20px;
+  --font-3xl: 24px;
+  --font-4xl: 28px;
+
+  /* Line Heights */
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 1.75;
+
+  /* Letter Spacing */
+  --tracking-tighter: -0.02em;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.01em;
+  --tracking-wider: 0.02em;
+
+  /* Spacing Scale */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
 }
 
 :root[data-theme='dark'] {
-  --bg-accent: #101418;
+  --bg-accent: #0a0e13;
-  --panel: #171d25;
+  --panel: #151b24;
-  --panel-soft: #131922;
+  --panel-soft: #111720;
-  --panel-muted: #0f151d;
+  --panel-muted: #0d1219;
-  --panel-subtle: #1c2430;
+  --panel-subtle: #1a2230;
-  --surface: #171d25;
+  --surface: #151b24;
-  --line: rgba(148, 163, 184, 0.18);
+  --line: rgba(148, 163, 184, 0.16);
-  --line-soft: rgba(148, 163, 184, 0.11);
+  --line-soft: rgba(148, 163, 184, 0.09);
-  --text: #e8edf4;
+  --text: #f1f5f9;
-  --text-muted: #9aa8ba;
+  --text-muted: #94a3b8;
-  --muted: #9aa8ba;
+  --muted: #94a3b8;
-  --muted-strong: #c4cfdc;
+  --muted-strong: #cbd5e1;
-  --primary: #80b6ff;
+  --primary: #60a5fa;
-  --primary-hover: #a6cbff;
+  --primary-hover: #93c5fd;
-  --primary-strong: #d7e8ff;
+  --primary-strong: #bfdbfe;
   --brand: var(--primary);
   --brand-strong: var(--primary-strong);
-  --accent: #5eead4;
+  --accent: #2dd4bf;
-  --accent-soft: rgba(94, 234, 212, 0.12);
+  --accent-soft: rgba(45, 212, 191, 0.12);
-  --danger: #fb7185;
+  --danger: #f87171;
-  --success: #5eead4;
+  --success: #34d399;
   --warning: #fbbf24;
-  --overlay-strong: rgba(2, 6, 23, 0.74);
+  --overlay-strong: rgba(0, 0, 0, 0.75);
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.35);
-  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.34);
+  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.50), 0 10px 10px -5px rgba(0, 0, 0, 0.40);
+  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.60);
+  --shadow-glow: 0 0 20px rgba(96, 165, 250, 0.20), 0 8px 24px rgba(96, 165, 250, 0.15);
 }

webapp/src/styles/vault.css

@@ -21,7 +21,13 @@
 }
 
 .sidebar-title {
-  @apply mb-2 text-[13px] font-bold text-slate-700;
+  @apply mb-2;
+  font-size: var(--font-xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--muted);
+  line-height: var(--leading-tight);
 }
 
 .sidebar-title-row {
@@ -86,17 +92,25 @@
 }
 
 .tree-btn {
-  @apply mb-1 flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left transition;
+  @apply mb-1 flex w-full min-w-0 cursor-pointer items-center border-0 bg-transparent px-2.5 py-2 text-left transition;
+  gap: var(--space-2);
+  border-radius: var(--radius-md);
+  font-size: var(--font-sm);
+  font-weight: 500;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+  color: var(--muted-strong);
 }
 
 .tree-btn:hover {
   background: rgba(37, 99, 235, 0.05);
+  color: var(--text);
 }
 
 .tree-btn.active {
   background: rgba(37, 99, 235, 0.09);
   color: var(--primary-strong);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .tree-icon {
@@ -191,8 +205,12 @@
 }
 
 .list-count {
-  @apply shrink-0 whitespace-nowrap text-xs;
+  @apply shrink-0 whitespace-nowrap;
-  color: var(--text-muted);
+  font-size: var(--font-xs);
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
+  color: var(--muted);
+  line-height: var(--leading-tight);
 }
 
 .list-icon-btn {
@@ -525,7 +543,12 @@
 }
 
 .list-title {
-  @apply flex min-w-0 items-center gap-1.5 text-[15px] font-bold;
+  @apply flex min-w-0 items-center;
+  gap: var(--space-2);
+  font-size: var(--font-base);
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
   color: var(--primary-strong);
   transition: color var(--dur-fast) var(--ease-smooth), letter-spacing 220ms var(--ease-out-soft);
 }
@@ -569,7 +592,7 @@
 
 .list-item:hover .list-title,
 .list-item.active .list-title {
-  letter-spacing: -0.012em;
+  letter-spacing: var(--tracking-tighter);
 }
 
 .list-item:hover .list-sub,
@@ -614,11 +637,19 @@
 
 .detail-title {
   @apply m-0 overflow-hidden text-ellipsis whitespace-nowrap;
+  font-size: var(--font-2xl);
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tighter);
+  color: var(--text);
 }
 
 .detail-sub {
   @apply mt-2;
-  color: #667085;
+  font-size: var(--font-sm);
+  line-height: var(--leading-relaxed);
+  letter-spacing: var(--tracking-normal);
+  color: var(--muted);
 }
 
 .password-history-link {