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

feat: implement two-factor authentication endpoints and related functionality
feat: add compatibility validation for cipher fields during import and storage
2026-06-20 21:00:41 +00:00 · 2026-06-11 21:00:16 +08:00 · 2026-06-11 16:53:51 +08:00 · 2026-06-11 15:02:55 +08:00
15 changed files with 766 additions and 124 deletions
@@ -55,3 +55,9 @@ NodeWarden-compat/
 .codex-upstream/bitwarden-browser/

 .reasonix/
+
+# Compatibility analysis documents
+BITWARDEN_COMPATIBILITY_ANALYSIS.md
+.mcp.json
+opencode.jsonc
+.cursor/
@@ -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',
  });
 }
@@ -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) {
-        // Preserve the encrypted URI so NodeWarden Web can decrypt it and repair
-        // 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;
+      // Official Bitwarden treats UriChecksum as nullable encrypted metadata.
+      // Keep the URI intact and let clients that can repair checksums do so.
      out.push({ ...next, uriChecksum: null });
      continue;
    }
@@ -243,14 +253,27 @@ function normalizeCipherLoginUrisForCompatibility(
  return out.length ? out : null;
 }

-function hasMissingLoginUriChecksum(cipher: Cipher): boolean {
-  if (!cipher.key || !cipher.login || typeof cipher.login !== 'object') return false;
-  const uris = (cipher.login as any).uris;
-  if (!Array.isArray(uris)) return false;
-  return uris.some((uri: any) => {
-    if (!uri || typeof uri !== 'object') return false;
-    return isValidEncString(uri.uri) && !isValidEncString(uri.uriChecksum);
-  });
+export function validateCipherEncryptedFieldsForCompatibility(cipher: Cipher): string | null {
+  if (cipher.name != null && !optionalEncStringWithin(cipher.name, 1000)) return 'Cipher name must be an encrypted string up to 1000 characters.';
+  if (cipher.notes != null && !optionalEncStringWithin(cipher.notes, 10000)) return 'Cipher notes must be an encrypted string up to 10000 characters.';
+
+  const login = cipher.login as any;
+  if (login && typeof login === 'object') {
+    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);
@@ -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.
-// Keep request parsing backward-compatible with historical provider values (8 / 100).
+// Some UI surfaces use -1 for the recovery-code settings dialog. Login itself follows
+// 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 twoFactorProvider = body.twoFactorProvider;
-    const twoFactorRemember = body.twoFactorRemember;
+    const twoFactorToken = readBodyValue(body, ['twoFactorToken', 'TwoFactorToken']);
+    const twoFactorProvider = readBodyValue(body, ['twoFactorProvider', 'TwoFactorProvider']);
+    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)) {
@@ -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 });
@@ -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);
  }
@@ -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>
+  );
+}
@@ -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';

@@ -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);
@@ -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;
-  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.20);
+  @apply text-white;
+  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;
-  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
+  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
+  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);
-  box-shadow: 0 6px 14px rgba(13, 31, 68, 0.04);
+  border: 1px solid rgba(37, 99, 235, 0.22);
+  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;
-  border-color: rgba(37, 99, 235, 0.34);
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  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);
 }
@@ -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,
@@ -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;
-  left: 32px;
+  top: 5px;
+  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;
-  border-color: rgba(128, 152, 192, 0.18);
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+  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);
-  border-color: rgba(37, 99, 235, 0.28);
+  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.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 {
@@ -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;
+}
@@ -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-hover: #1d4aa7;
-  --primary-strong: #173f8f;
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-strong: #1e40af;
  --brand: var(--primary);
  --brand-strong: var(--primary-strong);
-  --accent: #0f766e;
+  --accent: #0d9488;
  --accent-soft: #e6f6f3;
-  --danger: #c92f4e;
-  --success: #0f766e;
-  --warning: #b7791f;
-  --overlay-strong: rgba(15, 23, 42, 0.58);
-  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.045);
-  --shadow-md: 0 8px 18px rgba(15, 23, 42, 0.075);
-  --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.105);
+  --danger: #dc2626;
+  --success: #059669;
+  --warning: #d97706;
+  --overlay-strong: rgba(15, 23, 42, 0.62);
+  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
+  --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 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;
-  --panel: #171d25;
-  --panel-soft: #131922;
-  --panel-muted: #0f151d;
-  --panel-subtle: #1c2430;
-  --surface: #171d25;
-  --line: rgba(148, 163, 184, 0.18);
-  --line-soft: rgba(148, 163, 184, 0.11);
-  --text: #e8edf4;
-  --text-muted: #9aa8ba;
-  --muted: #9aa8ba;
-  --muted-strong: #c4cfdc;
-  --primary: #80b6ff;
-  --primary-hover: #a6cbff;
-  --primary-strong: #d7e8ff;
+  --bg-accent: #0a0e13;
+  --panel: #151b24;
+  --panel-soft: #111720;
+  --panel-muted: #0d1219;
+  --panel-subtle: #1a2230;
+  --surface: #151b24;
+  --line: rgba(148, 163, 184, 0.16);
+  --line-soft: rgba(148, 163, 184, 0.09);
+  --text: #f1f5f9;
+  --text-muted: #94a3b8;
+  --muted: #94a3b8;
+  --muted-strong: #cbd5e1;
+  --primary: #60a5fa;
+  --primary-hover: #93c5fd;
+  --primary-strong: #bfdbfe;
  --brand: var(--primary);
  --brand-strong: var(--primary-strong);
-  --accent: #5eead4;
-  --accent-soft: rgba(94, 234, 212, 0.12);
-  --danger: #fb7185;
-  --success: #5eead4;
+  --accent: #2dd4bf;
+  --accent-soft: rgba(45, 212, 191, 0.12);
+  --danger: #f87171;
+  --success: #34d399;
  --warning: #fbbf24;
-  --overlay-strong: rgba(2, 6, 23, 0.74);
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26);
-  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30);
-  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.34);
+  --overlay-strong: rgba(0, 0, 0, 0.75);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --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 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);
 }
@@ -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;
-  color: var(--text-muted);
+  @apply shrink-0 whitespace-nowrap;
+  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 {
Author	SHA1	Message	Date
shuaiplus	e9aef72df7	feat: add loading skeleton components and styles for improved UI experience	2026-06-11 21:00:16 +08:00
shuaiplus	9adb24d4bb	feat: implement two-factor authentication endpoints and related functionality	2026-06-11 16:53:51 +08:00
shuaiplus	563570e3e0	feat: add compatibility validation for cipher fields during import and storage	2026-06-11 15:02:55 +08:00