feat: update toast close button with SVG icon and improve styling

Add a configurable S3 addressing style for remote backups while keeping path-style as the default for existing configurations. Use virtual-hosted-style to support providers such as Tencent COS buckets that reject path-style requests.

shared/backup-schema.ts

@@ -14,10 +14,12 @@ export const BACKUP_DEFAULT_INTERVAL_HOURS = 24;
 export const BACKUP_DEFAULT_START_TIME = '03:00';
 
 export type BackupDestinationType = 's3' | 'webdav';
+export type S3BackupAddressingStyle = 'path-style' | 'virtual-hosted-style';
 
 export interface S3BackupDestination {
   endpoint: string;
   bucket: string;
+  addressingStyle: S3BackupAddressingStyle;
   region: string;
   accessKeyId: string;
   secretAccessKey: string;
@@ -103,6 +105,7 @@ export function createDefaultBackupDestinationConfig(type: BackupDestinationType
     return {
       endpoint: '',
       bucket: '',
+      addressingStyle: 'path-style',
       region: BACKUP_DEFAULT_S3_REGION,
       accessKeyId: '',
       secretAccessKey: '',

src/services/backup-config.ts

@@ -16,6 +16,7 @@ import {
   type BackupRuntimeState,
   type BackupScheduleConfig,
   type BackupSettings,
+  type S3BackupAddressingStyle,
   type S3BackupDestination,
   type WebDavBackupDestination,
   createBackupRandomId,
@@ -35,6 +36,7 @@ export type {
   BackupRuntimeState,
   BackupScheduleConfig,
   BackupSettings,
+  S3BackupAddressingStyle,
   S3BackupDestination,
   WebDavBackupDestination,
 } from '../../shared/backup-schema';
@@ -109,6 +111,9 @@ function normalizeS3Destination(value: unknown, allowIncomplete = false): S3Back
   const source = isPlainObject(value) ? value : {};
   const endpoint = asTrimmedString(source.endpoint);
   const bucket = asTrimmedString(source.bucket);
+  const addressingStyleRaw = asTrimmedString(source.addressingStyle);
+  const addressingStyle: S3BackupAddressingStyle =
+    addressingStyleRaw === 'virtual-hosted-style' ? 'virtual-hosted-style' : 'path-style';
   const accessKeyId = asTrimmedString(source.accessKeyId);
   const secretAccessKey = asTrimmedString(source.secretAccessKey);
   const region = asTrimmedString(source.region) || 'auto';
@@ -131,6 +136,7 @@ function normalizeS3Destination(value: unknown, allowIncomplete = false): S3Back
   return {
     endpoint: endpoint ? endpoint.replace(/\/+$/, '') : '',
     bucket,
+    addressingStyle,
     region,
     accessKeyId,
     secretAccessKey,

src/services/backup-uploader.ts

@@ -448,8 +448,27 @@ async function existsInWebDav(config: WebDavBackupDestination, relativePath: str
   return true;
 }
 
+function isBucketHostedS3Endpoint(endpoint: URL, bucket: string): boolean {
+  const hostname = endpoint.hostname.toLowerCase();
+  const bucketName = bucket.trim().toLowerCase();
+  return !!bucketName && (hostname === bucketName || hostname.startsWith(`${bucketName}.`));
+}
+
 function s3BucketBaseUrl(config: S3BackupDestination): URL {
-  return new URL(`${config.endpoint.replace(/\/+$/, '')}/${encodeURIComponent(config.bucket)}`);
+  const endpoint = new URL(config.endpoint.replace(/\/+$/, ''));
+  const bucket = config.bucket.trim();
+
+  if (config.addressingStyle === 'virtual-hosted-style') {
+    if (isBucketHostedS3Endpoint(endpoint, bucket)) return endpoint;
+    endpoint.hostname = `${bucket}.${endpoint.hostname}`;
+    return endpoint;
+  }
+
+  return new URL(`${endpoint.toString().replace(/\/+$/, '')}/${encodeURIComponent(bucket)}`);
+}
+
+function s3ObjectUrl(config: S3BackupDestination, objectKey: string): URL {
+  return new URL(`${s3BucketBaseUrl(config).toString().replace(/\/+$/, '')}/${encodePathSegments(objectKey)}`);
 }
 
 function normalizeS3ObjectKey(config: S3BackupDestination, relativePath: string): string {
@@ -501,7 +520,7 @@ async function putToS3(
   options: RemoteBackupFilePutOptions = {}
 ): Promise<void> {
   const objectKey = normalizeS3ObjectKey(config, relativePath);
-  const url = new URL(`${s3BucketBaseUrl(config).toString()}/${encodePathSegments(objectKey)}`);
+  const url = s3ObjectUrl(config, objectKey);
   const response = await signedS3Request(config, 'PUT', url, bytes, options.contentType);
 
   if (!response.ok) {
@@ -594,7 +613,7 @@ async function downloadFromS3(config: S3BackupDestination, relativePath: string)
     throw new Error('Please select a backup file');
   }
   const objectKey = normalizeS3ObjectKey(config, normalized);
-  const url = new URL(`${s3BucketBaseUrl(config).toString()}/${encodePathSegments(objectKey)}`);
+  const url = s3ObjectUrl(config, objectKey);
   const response = await signedS3Request(config, 'GET', url);
   if (!response.ok) {
     throw new Error(`S3 download failed: ${response.status}`);
@@ -610,7 +629,7 @@ async function downloadFromS3(config: S3BackupDestination, relativePath: string)
 
 async function deleteFromS3(config: S3BackupDestination, relativePath: string): Promise<void> {
   const objectKey = normalizeS3ObjectKey(config, relativePath);
-  const url = new URL(`${s3BucketBaseUrl(config).toString()}/${encodePathSegments(objectKey)}`);
+  const url = s3ObjectUrl(config, objectKey);
   const response = await signedS3Request(config, 'DELETE', url);
   if (!response.ok && response.status !== 404) {
     throw new Error(`S3 delete failed: ${response.status}`);
@@ -619,7 +638,7 @@ async function deleteFromS3(config: S3BackupDestination, relativePath: string):
 
 async function existsInS3(config: S3BackupDestination, relativePath: string): Promise<boolean> {
   const objectKey = normalizeS3ObjectKey(config, relativePath);
-  const url = new URL(`${s3BucketBaseUrl(config).toString()}/${encodePathSegments(objectKey)}`);
+  const url = s3ObjectUrl(config, objectKey);
   const response = await signedS3Request(config, 'HEAD', url);
   if (response.status === 404) return false;
   if (!response.ok) {

webapp/public/icon-source.svg

@@ -0,0 +1,10 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Full-bleed background for any/maskable -->
+  <rect width="512" height="512" fill="#116FF9"/>
+  <!-- Logo scaled to ~50% centered in safe zone (inner 66% = Android adaptive icon guideline) -->
+  <g transform="translate(256,256) scale(0.5) translate(-380,-380)">
+    <path d="M386.5 183C497.785 183 588 271.2 588 380C588 419.877 575.879 456.986 555.046 488H17.6816C16.5766 481.834 16 475.484 16 469C16 413.617 58.0774 368.061 112.008 362.558C108.771 353.989 107 344.701 107 335C107 291.922 141.922 257 185 257C198.365 257 210.945 260.362 221.94 266.286C258.437 215.895 318.539 183 386.5 183Z" fill="#F6821F"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M92.6568 91.0069C88.7796 262.923 101.55 381.119 143.869 469.459C186.188 557.799 258.092 616.353 372.665 668.892C485.877 616.354 556.929 557.802 598.746 469.461C640.564 381.12 653.181 262.923 649.35 91.0069H92.6568ZM539.796 432.933C570.479 365.533 581.347 278.379 582.419 153.939L582.422 153.432H377.661V593.786L378.405 593.364C458.602 547.962 509.101 500.36 539.796 432.933Z" fill="white"/>
+    <path d="M604.465 305C680.976 305 743 367.233 743 444C743 459.378 740.509 474.172 735.913 488H379V423.553C391.721 397.751 418.287 380 449 380C459.483 380 469.482 382.068 478.613 385.818C500.559 338.11 548.658 305 604.465 305Z" fill="#FD9C33"/>
+  </g>
+</svg>

webapp/src/App.tsx

@@ -1535,7 +1535,7 @@ export default function App() {
   const isKnownAppRoute = APP_ROUTES.has(routeLocation) || isPublicSendRoute || isImportHashRoute;
   const isUnknownRoute = isMalformedSendRoute || (phase === 'app' ? !isKnownAppRoute : !isKnownAuthRoute && !APP_ROUTES.has(routeLocation));
   const isImportRoute = routeLocation === IMPORT_ROUTE || IMPORT_ROUTE_ALIASES.has(routeLocation);
-  const showSidebarToggle = mobileLayout && (location === '/vault' || location === '/sends');
+  const showSidebarToggle = mobileLayout && location === '/sends';
   const sidebarToggleTitle = location === '/vault' ? t('txt_folders') : t('txt_type');
   const demoDomainRules = useMemo<DomainRules>(() => ({
     equivalentDomains: [

webapp/src/components/ToastHost.tsx

@@ -12,8 +12,10 @@ export default function ToastHost({ toasts, onClose }: ToastHostProps) {
       {toasts.map((toast) => (
         <li key={toast.id} className={`toast-item ${toast.type}`}>
           <div className="toast-text">{toast.text}</div>
-          <button type="button" className="toast-close" onClick={() => onClose(toast.id)}>
+          <button type="button" className="toast-close" onClick={() => onClose(toast.id)} aria-label="关闭通知">
-            x
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+              <path d="M3 3l8 8M11 3l-8 8" />
+            </svg>
           </button>
           <div className="toast-progress" />
         </li>

webapp/src/components/TotpCodesPage.tsx

@@ -6,7 +6,7 @@ import { t } from '@/lib/i18n';
 import type { Cipher } from '@/lib/types';
 import LoadingState from '@/components/LoadingState';
 import WebsiteIcon from '@/components/vault/WebsiteIcon';
-import { isCipherVisibleInNormalVault } from '@/components/vault/vault-page-helpers';
+import { formatTotp, isCipherVisibleInNormalVault } from '@/components/vault/vault-page-helpers';
 
 interface TotpCodesPageProps {
   ciphers: Cipher[];
@@ -26,13 +26,6 @@ function getTotpTimeState(): { windowId: number; remain: number } {
   };
 }
 
-function formatTotp(code: string): string {
-  if (!code) return code;
-  if (code.length === 5) return `${code.slice(0, 2)} ${code.slice(2)}`;
-  if (code.length < 6) return code;
-  return `${code.slice(0, 3)} ${code.slice(3, 6)}`;
-}
-
 function TotpListIcon({ cipher }: { cipher: Cipher }) {
   return <WebsiteIcon cipher={cipher} fallback={<Globe size={18} />} />;
 }

webapp/src/components/VaultPage.tsx

@@ -17,13 +17,14 @@ import {
   createEmptyDraft,
   creationTimeValue,
   draftFromCipher,
-  buildCipherDuplicateSignature,
+  buildCipherDuplicateSignatures,
   firstCipherUri,
   firstPasskeyCreationTime,
   isCipherVisibleInArchive,
   isCipherVisibleInNormalVault,
   isCipherVisibleInTrash,
   sortTimeValue,
+  type DuplicateDetectionMode,
   type SidebarFilter,
   type VaultSortMode,
 } from '@/components/vault/vault-page-helpers';
@@ -79,6 +80,7 @@ export default function VaultPage(props: VaultPageProps) {
   const [sortMenuOpen, setSortMenuOpen] = useState(false);
   const [folderSortMode, setFolderSortMode] = useState<VaultSortMode>('name');
   const [folderSortMenuOpen, setFolderSortMenuOpen] = useState(false);
+  const [duplicateMode, setDuplicateMode] = useState<DuplicateDetectionMode>('exact');
   const [sidebarFilter, setSidebarFilter] = useState<SidebarFilter>({ kind: 'all' });
   const [selectedCipherId, setSelectedCipherId] = useState('');
   const [selectedMap, setSelectedMap] = useState<Record<string, boolean>>({});
@@ -338,16 +340,41 @@ export default function VaultPage(props: VaultPageProps) {
 
   const duplicateSignatureInfo = useMemo(() => {
     if (sidebarFilter.kind !== 'duplicates') return null;
-    const byId = new Map<string, string>();
+    const byId = new Map<string, string[]>();
     const counts = new Map<string, number>();
     for (const cipher of props.ciphers) {
       if (!isCipherVisibleInNormalVault(cipher)) continue;
-      const signature = buildCipherDuplicateSignature(cipher);
+      const signatures = Array.from(new Set(buildCipherDuplicateSignatures(cipher, duplicateMode)));
-      byId.set(cipher.id, signature);
+      byId.set(cipher.id, signatures);
-      counts.set(signature, (counts.get(signature) || 0) + 1);
+      for (const signature of signatures) {
+        counts.set(signature, (counts.get(signature) || 0) + 1);
+      }
     }
     return { byId, counts };
-  }, [props.ciphers, sidebarFilter.kind]);
+  }, [props.ciphers, sidebarFilter.kind, duplicateMode]);
+
+  const duplicateGroupIndexById = useMemo(() => {
+    if (!duplicateSignatureInfo) return new Map<string, number>();
+    const groupKeyById = new Map<string, string>();
+    const groupKeys = new Set<string>();
+    for (const cipher of props.ciphers) {
+      const groupKey = (duplicateSignatureInfo.byId.get(cipher.id) || [])
+        .filter((signature) => (duplicateSignatureInfo.counts.get(signature) || 0) >= 2)
+        .sort()[0];
+      if (!groupKey) continue;
+      groupKeyById.set(cipher.id, groupKey);
+      groupKeys.add(groupKey);
+    }
+    const groupIndexByKey = new Map<string, number>();
+    Array.from(groupKeys).sort().forEach((groupKey, index) => {
+      groupIndexByKey.set(groupKey, index % 64);
+    });
+    const byId = new Map<string, number>();
+    for (const [cipherId, groupKey] of groupKeyById.entries()) {
+      byId.set(cipherId, groupIndexByKey.get(groupKey) || 0);
+    }
+    return byId;
+  }, [props.ciphers, duplicateSignatureInfo]);
 
   const filteredCiphers = useMemo(() => {
     const next = props.ciphers.filter((cipher) => {
@@ -358,8 +385,11 @@ export default function VaultPage(props: VaultPageProps) {
         if (!isCipherVisibleInArchive(cipher)) return false;
       } else {
         if (!isCipherVisibleInNormalVault(cipher)) return false;
-        if (sidebarFilter.kind === 'duplicates' && ((duplicateSignatureInfo?.counts.get(duplicateSignatureInfo.byId.get(cipher.id) || '') || 0) < 2)) {
+        if (sidebarFilter.kind === 'duplicates') {
-          return false;
+          const signatures = duplicateSignatureInfo?.byId.get(cipher.id) || [];
+          if (!signatures.some((signature) => (duplicateSignatureInfo?.counts.get(signature) || 0) >= 2)) {
+            return false;
+          }
         }
         if (sidebarFilter.kind === 'favorite' && !cipher.favorite) return false;
         if (sidebarFilter.kind === 'type' && meta?.typeKey !== sidebarFilter.value) return false;
@@ -404,8 +434,9 @@ export default function VaultPage(props: VaultPageProps) {
   const sidebarFilterKey = useMemo(() => {
     if (sidebarFilter.kind === 'folder') return `folder:${sidebarFilter.folderId ?? 'none'}`;
     if (sidebarFilter.kind === 'type') return `type:${sidebarFilter.value}`;
+    if (sidebarFilter.kind === 'duplicates') return `duplicates:${duplicateMode}`;
     return sidebarFilter.kind;
-  }, [sidebarFilter]);
+  }, [sidebarFilter, duplicateMode]);
 
   useEffect(() => {
     setListScrollTop(0);
@@ -419,6 +450,10 @@ export default function VaultPage(props: VaultPageProps) {
     }
   }, [sidebarFilter.kind, sortMode]);
 
+  useEffect(() => {
+    if (sidebarFilter.kind === 'duplicates') setSelectedMap({});
+  }, [sidebarFilter.kind, duplicateMode]);
+
   useEffect(() => {
     if (isCreating) return;
     if (!filteredCiphers.length) {
@@ -984,10 +1019,11 @@ const folderName = useCallback((id: string | null | undefined): string => {
   const handleSyncVault = useCallback(() => { void syncVault(); }, [props.onRefresh]);
   const handleOpenBulkDelete = useCallback(() => setBulkDeleteOpen(true), []);
   const handleSelectDuplicates = useCallback(() => {
+    if (duplicateMode !== 'exact') return;
     const map: Record<string, boolean> = {};
     const seen = new Set<string>();
     for (const cipher of filteredCiphers) {
-      const signature = duplicateSignatureInfo?.byId.get(cipher.id) || buildCipherDuplicateSignature(cipher);
+      const signature = duplicateSignatureInfo?.byId.get(cipher.id)?.[0] || buildCipherDuplicateSignatures(cipher, 'exact')[0];
       if (seen.has(signature)) {
         map[cipher.id] = true;
         continue;
@@ -995,7 +1031,7 @@ const folderName = useCallback((id: string | null | undefined): string => {
       seen.add(signature);
     }
     setSelectedMap(map);
-  }, [filteredCiphers, duplicateSignatureInfo]);
+  }, [filteredCiphers, duplicateSignatureInfo, duplicateMode]);
   const handleSelectAll = useCallback(() => {
     const map: Record<string, boolean> = {};
     for (const cipher of filteredCiphers) map[cipher.id] = true;
@@ -1079,13 +1115,16 @@ const folderName = useCallback((id: string | null | undefined): string => {
           busy={busy}
           loading={props.loading}
           error={props.error}
+          folders={props.folders}
           searchInput={searchInput}
           sortMode={sortMode}
           sortMenuOpen={sortMenuOpen}
+          duplicateMode={duplicateMode}
           selectedCount={selectedCount}
           totalCipherCount={totalCipherCount}
           filteredCiphers={filteredCiphers}
           visibleCiphers={visibleCiphers}
+          duplicateGroupIndexById={duplicateGroupIndexById}
           virtualRange={virtualRange}
           selectedCipherId={selectedCipherId}
           selectedMap={selectedMap}
@@ -1102,6 +1141,8 @@ const folderName = useCallback((id: string | null | undefined): string => {
           onSearchCompositionEnd={handleSearchCompositionEnd}
           onToggleSortMenu={handleToggleSortMenu}
           onSelectSortMode={handleSelectSortMode}
+          onDuplicateModeChange={setDuplicateMode}
+          onChangeFilter={setSidebarFilter}
           onSyncVault={handleSyncVault}
           onOpenBulkDelete={handleOpenBulkDelete}
           onSelectDuplicates={handleSelectDuplicates}

webapp/src/components/backup-center/BackupDestinationDetail.tsx

@@ -2,6 +2,7 @@ import { CloudUpload, Save, Trash2 } from 'lucide-preact';
 import type {
   BackupDestinationRecord,
   RemoteBackupBrowserResponse,
+  S3BackupAddressingStyle,
   S3BackupDestination,
   WebDavBackupDestination,
 } from '@/lib/api/backup';
@@ -401,7 +402,7 @@ export function BackupDestinationDetail(props: BackupDestinationDetailProps) {
 
           {props.selectedDestination.type === 's3' ? (
             <div className="field-grid">
-              <label className="field field-span-2">
+              <label className="field">
                 <span>{t('txt_backup_s3_endpoint')}</span>
                 <input
                   className="input"
@@ -417,6 +418,24 @@ export function BackupDestinationDetail(props: BackupDestinationDetailProps) {
                   }))}
                 />
               </label>
+              <label className="field">
+                <span>{t('txt_backup_s3_addressing_style')}</span>
+                <select
+                  className="input"
+                  value={(props.selectedDestination.destination as S3BackupDestination).addressingStyle || 'path-style'}
+                  disabled={props.loadingSettings || props.disableWhileBusy}
+                  onChange={(event) => props.onUpdateDestination((destination) => ({
+                    ...destination,
+                    destination: {
+                      ...(destination.destination as S3BackupDestination),
+                      addressingStyle: (event.currentTarget as HTMLSelectElement).value as S3BackupAddressingStyle,
+                    },
+                  }))}
+                >
+                  <option value="path-style">{t('txt_backup_s3_addressing_path_style')}</option>
+                  <option value="virtual-hosted-style">{t('txt_backup_s3_addressing_virtual_hosted_style')}</option>
+                </select>
+              </label>
               <label className="field">
                 <span>{t('txt_backup_s3_bucket')}</span>
                 <input

webapp/src/components/vault/VaultListPanel.tsx

@@ -1,15 +1,40 @@
-import type { RefObject } from 'preact';
+import type { ComponentChildren, RefObject } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { memo } from 'preact/compat';
 import { createPortal } from 'preact/compat';
-import { Archive, ArrowUpDown, Check, CheckCheck, FolderInput, Plus, RefreshCw, RotateCcw, Trash2, X } from 'lucide-preact';
+import {
+  Archive,
+  ArrowUpDown,
+  Check,
+  CheckCheck,
+  ChevronDown,
+  Copy,
+  CreditCard,
+  Folder as FolderIcon,
+  FolderInput,
+  FolderX,
+  Globe,
+  KeyRound,
+  LayoutGrid,
+  Plus,
+  RefreshCw,
+  RotateCcw,
+  ShieldUser,
+  Star,
+  StickyNote,
+  Trash2,
+  X,
+} from 'lucide-preact';
 import LoadingState from '@/components/LoadingState';
-import type { Cipher } from '@/lib/types';
+import type { Cipher, Folder } from '@/lib/types';
 import { t } from '@/lib/i18n';
 import {
   CreateTypeIcon,
   getCreateTypeOptions,
+  getDuplicateDetectionOptions,
   getVaultSortOptions,
   VaultListIcon,
+  type DuplicateDetectionMode,
   type SidebarFilter,
   type VaultSortMode,
 } from '@/components/vault/vault-page-helpers';
@@ -25,13 +50,16 @@ interface VaultListPanelProps {
   busy: boolean;
   loading: boolean;
   error: string;
+  folders: Folder[];
   searchInput: string;
   sortMode: VaultSortMode;
   sortMenuOpen: boolean;
+  duplicateMode: DuplicateDetectionMode;
   selectedCount: number;
   totalCipherCount: number;
   filteredCiphers: Cipher[];
   visibleCiphers: Cipher[];
+  duplicateGroupIndexById: Map<string, number>;
   virtualRange: VirtualRange;
   selectedCipherId: string;
   selectedMap: Record<string, boolean>;
@@ -48,6 +76,8 @@ interface VaultListPanelProps {
   onSearchCompositionEnd: (value: string) => void;
   onToggleSortMenu: () => void;
   onSelectSortMode: (value: VaultSortMode) => void;
+  onDuplicateModeChange: (value: DuplicateDetectionMode) => void;
+  onChangeFilter: (filter: SidebarFilter) => void;
   onSyncVault: () => void;
   onOpenBulkDelete: () => void;
   onSelectDuplicates: () => void;
@@ -69,15 +99,28 @@ interface CipherListItemProps {
   cipher: Cipher;
   selected: boolean;
   checked: boolean;
+  duplicateGroupIndex: number | null;
   subtitle: string;
   onToggleSelected: (cipherId: string, checked: boolean) => void;
   onSelectCipher: (cipherId: string) => void;
 }
 
+type MobileFilterMenuKey = 'duplicate' | 'menu' | 'type' | 'folder';
+
+interface MobileFilterOption {
+  value: string;
+  label: string;
+  icon: ComponentChildren;
+  active: boolean;
+  onSelect: () => void;
+}
+
 const CipherListItem = memo(function CipherListItem(props: CipherListItemProps) {
+  const duplicateGroupHue = props.duplicateGroupIndex === null ? null : (props.duplicateGroupIndex * 137.508) % 360;
   return (
     <div
-      className={`list-item ${props.selected ? 'active' : ''}`}
+      className={`list-item ${props.selected ? 'active' : ''} ${duplicateGroupHue === null ? '' : 'duplicate-group-item'}`}
+      style={duplicateGroupHue === null ? undefined : { '--duplicate-group-hue': `${duplicateGroupHue}deg` }}
       onClick={(event) => {
         const target = event.target as HTMLElement;
         if (target.closest('.row-check')) return;
@@ -107,13 +150,116 @@ const CipherListItem = memo(function CipherListItem(props: CipherListItemProps)
 });
 
 export default function VaultListPanel(props: VaultListPanelProps) {
+  const [mobileFilterOpen, setMobileFilterOpen] = useState<MobileFilterMenuKey | null>(null);
+  const mobileFilterRef = useRef<HTMLDivElement | null>(null);
   const createTypeOptions = getCreateTypeOptions();
+  const duplicateDetectionOptions = getDuplicateDetectionOptions();
   const vaultSortOptions = getVaultSortOptions();
-  const createMenu = (
+  const duplicateModeOptions: MobileFilterOption[] = duplicateDetectionOptions.map((option) => ({
-    <div className="create-menu-wrap mobile-fab-wrap" ref={props.createMenuRef}>
+    value: option.value,
+    label: option.label,
+    icon: option.value === 'login-site' ? <Globe size={14} /> : option.value === 'exact' ? <Copy size={14} /> : <KeyRound size={14} />,
+    active: props.duplicateMode === option.value,
+    onSelect: () => props.onDuplicateModeChange(option.value),
+  }));
+  const menuFilterOptions: MobileFilterOption[] = [
+    { value: 'all', label: t('txt_all_items'), icon: <LayoutGrid size={14} />, active: props.sidebarFilter.kind === 'all', onSelect: () => props.onChangeFilter({ kind: 'all' }) },
+    { value: 'favorite', label: t('txt_favorites'), icon: <Star size={14} />, active: props.sidebarFilter.kind === 'favorite', onSelect: () => props.onChangeFilter({ kind: 'favorite' }) },
+    { value: 'archive', label: t('txt_archive'), icon: <Archive size={14} />, active: props.sidebarFilter.kind === 'archive', onSelect: () => props.onChangeFilter({ kind: 'archive' }) },
+    { value: 'trash', label: t('txt_trash'), icon: <Trash2 size={14} />, active: props.sidebarFilter.kind === 'trash', onSelect: () => props.onChangeFilter({ kind: 'trash' }) },
+    { value: 'duplicates', label: t('txt_duplicates'), icon: <Copy size={14} />, active: props.sidebarFilter.kind === 'duplicates', onSelect: () => props.onChangeFilter({ kind: 'duplicates' }) },
+  ];
+  const typeMobileFilterOptions: MobileFilterOption[] = [
+    { value: 'login', label: t('txt_login'), icon: <Globe size={14} />, active: props.sidebarFilter.kind === 'type' && props.sidebarFilter.value === 'login', onSelect: () => props.onChangeFilter({ kind: 'type', value: 'login' }) },
+    { value: 'card', label: t('txt_card'), icon: <CreditCard size={14} />, active: props.sidebarFilter.kind === 'type' && props.sidebarFilter.value === 'card', onSelect: () => props.onChangeFilter({ kind: 'type', value: 'card' }) },
+    { value: 'identity', label: t('txt_identity'), icon: <ShieldUser size={14} />, active: props.sidebarFilter.kind === 'type' && props.sidebarFilter.value === 'identity', onSelect: () => props.onChangeFilter({ kind: 'type', value: 'identity' }) },
+    { value: 'note', label: t('txt_note'), icon: <StickyNote size={14} />, active: props.sidebarFilter.kind === 'type' && props.sidebarFilter.value === 'note', onSelect: () => props.onChangeFilter({ kind: 'type', value: 'note' }) },
+    { value: 'ssh', label: t('txt_ssh_key'), icon: <KeyRound size={14} />, active: props.sidebarFilter.kind === 'type' && props.sidebarFilter.value === 'ssh', onSelect: () => props.onChangeFilter({ kind: 'type', value: 'ssh' }) },
+  ];
+  const folderMobileFilterOptions: MobileFilterOption[] = [
+    { value: '__none__', label: t('txt_no_folder'), icon: <FolderX size={14} />, active: props.sidebarFilter.kind === 'folder' && props.sidebarFilter.folderId === null, onSelect: () => props.onChangeFilter({ kind: 'folder', folderId: null }) },
+    ...props.folders.map((folder) => ({
+      value: folder.id,
+      label: folder.decName || folder.name || folder.id,
+      icon: <FolderIcon size={14} />,
+      active: props.sidebarFilter.kind === 'folder' && props.sidebarFilter.folderId === folder.id,
+      onSelect: () => props.onChangeFilter({ kind: 'folder', folderId: folder.id }),
+    })),
+  ];
+  const menuFilterSelected = menuFilterOptions.find((option) => option.active);
+  const typeFilterSelected = typeMobileFilterOptions.find((option) => option.active);
+  const folderFilterSelected = folderMobileFilterOptions.find((option) => option.active);
+  const duplicateModeSelected = duplicateModeOptions.find((option) => option.active);
+
+  useEffect(() => {
+    const onPointerDown = (event: Event) => {
+      if (!mobileFilterOpen) return;
+      const target = event.target as Node | null;
+      if (mobileFilterRef.current && target && !mobileFilterRef.current.contains(target)) {
+        setMobileFilterOpen(null);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setMobileFilterOpen(null);
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [mobileFilterOpen]);
+
+  const renderMobileFilterMenu = (
+    key: MobileFilterMenuKey,
+    label: string,
+    selected: MobileFilterOption | undefined,
+    fallbackIcon: ComponentChildren,
+    options: MobileFilterOption[]
+  ) => (
+    <div className="mobile-vault-filter-control">
       <button
         type="button"
-        className="btn btn-primary small mobile-fab-trigger"
+        className={`mobile-vault-filter-trigger ${mobileFilterOpen === key ? 'active' : ''}`}
+        aria-haspopup="menu"
+        aria-expanded={mobileFilterOpen === key}
+        onClick={() => setMobileFilterOpen((open) => open === key ? null : key)}
+      >
+        <span className="mobile-vault-filter-trigger-icon">{selected?.icon || fallbackIcon}</span>
+        <span className="mobile-vault-filter-trigger-label">{selected?.label || label}</span>
+        <ChevronDown size={13} className="mobile-vault-filter-chevron" />
+      </button>
+      {mobileFilterOpen === key && (
+        <div className="sort-menu mobile-vault-filter-menu" role="menu">
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              className={`sort-menu-item mobile-vault-filter-item ${option.active ? 'active' : ''}`}
+              onClick={() => {
+                option.onSelect();
+                setMobileFilterOpen(null);
+              }}
+              role="menuitemradio"
+              aria-checked={option.active}
+            >
+              <span className="mobile-vault-filter-item-main">
+                <span className="mobile-vault-filter-item-icon">{option.icon}</span>
+                <span>{option.label}</span>
+              </span>
+              {option.active ? <Check size={14} /> : <span className="sort-menu-check-placeholder" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
+  const createMenu = (
+    <div className={`create-menu-wrap ${props.isMobileLayout ? 'mobile-fab-wrap' : 'desktop-create-menu-wrap'}`} ref={props.createMenuRef}>
+      <button
+        type="button"
+        className={`btn btn-primary small ${props.isMobileLayout ? 'mobile-fab-trigger' : 'desktop-create-trigger'}`}
         aria-label={t('txt_add')}
         title={t('txt_add')}
         onClick={props.onToggleCreateMenu}
@@ -135,108 +281,127 @@ export default function VaultListPanel(props: VaultListPanelProps) {
 
   return (
     <section className="list-col">
-      <div className="list-head">
+      <div className="list-toolbar-stack" ref={mobileFilterRef}>
-        <div className="search-input-wrap">
+        <div className={`list-head ${props.selectedCount > 0 ? 'selection-mode' : ''}`}>
-          <input
+          {props.selectedCount > 0 ? (
-            className="search-input"
+            <>
-            placeholder={t('txt_search_your_secure_vault')}
+              {props.sidebarFilter.kind !== 'duplicates' && (
-            value={props.searchInput}
+                <button type="button" className="btn btn-secondary small" disabled={!props.filteredCiphers.length} onClick={props.onSelectAll}>
-            onInput={(e) => props.onSearchInput((e.currentTarget as HTMLInputElement).value)}
+                  <CheckCheck size={14} className="btn-icon" /> {t('txt_select_all')}
-            onCompositionStart={props.onSearchCompositionStart}
-            onCompositionEnd={(e) => props.onSearchCompositionEnd((e.currentTarget as HTMLInputElement).value)}
-            onKeyDown={(e) => {
-              if (e.key !== 'Escape' || !props.searchInput) return;
-              e.preventDefault();
-              props.onClearSearch();
-            }}
-          />
-          {!!props.searchInput && (
-            <button
-              type="button"
-              className="search-clear-btn"
-              aria-label={t('txt_clear_search')}
-              title={t('txt_clear_search_esc')}
-              onClick={props.onClearSearch}
-            >
-              <X size={14} />
-            </button>
-          )}
-        </div>
-        <div className="sort-menu-wrap" ref={props.sortMenuRef}>
-          <button
-            type="button"
-            className={`btn btn-secondary small sort-trigger ${props.sortMenuOpen ? 'active' : ''}`}
-            aria-label={t('txt_sort')}
-            title={t('txt_sort')}
-            onClick={props.onToggleSortMenu}
-          >
-            <ArrowUpDown size={14} className="btn-icon" />
-          </button>
-          {props.sortMenuOpen && (
-            <div className="sort-menu">
-              {vaultSortOptions.map((option) => (
-                <button
-                  key={option.value}
-                  type="button"
-                  className={`sort-menu-item ${props.sortMode === option.value ? 'active' : ''}`}
-                  onClick={() => props.onSelectSortMode(option.value)}
-                >
-                  <span>{option.label}</span>
-                  {props.sortMode === option.value ? <Check size={14} /> : <span className="sort-menu-check-placeholder" />}
                 </button>
-              ))}
+              )}
-            </div>
+              <button type="button" className="btn btn-secondary small" onClick={props.onClearSelection}>
+                <X size={14} className="btn-icon" /> {t('txt_cancel')}
+              </button>
+              {props.sidebarFilter.kind === 'trash' && (
+                <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onBulkRestore}>
+                  <RefreshCw size={14} className="btn-icon" /> {t('txt_restore')}
+                </button>
+              )}
+              {props.sidebarFilter.kind === 'archive' && (
+                <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onBulkUnarchive}>
+                  <RotateCcw size={14} className="btn-icon" /> {t('txt_unarchive')}
+                </button>
+              )}
+              {props.sidebarFilter.kind !== 'trash' && props.sidebarFilter.kind !== 'archive' && props.sidebarFilter.kind !== 'duplicates' && (
+                <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onBulkArchive}>
+                  <Archive size={14} className="btn-icon" /> {t('txt_archive_selected')}
+                </button>
+              )}
+              {props.sidebarFilter.kind !== 'trash' && props.sidebarFilter.kind !== 'archive' && props.sidebarFilter.kind !== 'duplicates' && (
+                <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onOpenMove}>
+                  <FolderInput size={14} className="btn-icon" /> {t('txt_move')}
+                </button>
+              )}
+              <button type="button" className="btn btn-danger small" disabled={props.busy} onClick={props.onOpenBulkDelete}>
+                <Trash2 size={14} className="btn-icon" /> {props.sidebarFilter.kind === 'trash' ? t('txt_delete_permanently') : t('txt_delete_selected')}
+              </button>
+            </>
+          ) : (
+            <>
+              <div className="search-input-wrap">
+                {props.sidebarFilter.kind === 'duplicates' && props.isMobileLayout ? (
+                  <div className="duplicate-mode-head-menu">
+                    {renderMobileFilterMenu('duplicate', t('txt_duplicate_detection_mode'), duplicateModeSelected, <Copy size={14} />, duplicateModeOptions)}
+                  </div>
+                ) : (
+                  <>
+                    <input
+                      className="search-input"
+                      placeholder={t('txt_search_items_count', { count: props.totalCipherCount })}
+                      value={props.searchInput}
+                      onInput={(e) => props.onSearchInput((e.currentTarget as HTMLInputElement).value)}
+                      onCompositionStart={props.onSearchCompositionStart}
+                      onCompositionEnd={(e) => props.onSearchCompositionEnd((e.currentTarget as HTMLInputElement).value)}
+                      onKeyDown={(e) => {
+                        if (e.key !== 'Escape' || !props.searchInput) return;
+                        e.preventDefault();
+                        props.onClearSearch();
+                      }}
+                    />
+                    {!!props.searchInput && (
+                      <button
+                        type="button"
+                        className="search-clear-btn"
+                        aria-label={t('txt_clear_search')}
+                        title={t('txt_clear_search_esc')}
+                        onClick={props.onClearSearch}
+                      >
+                        <X size={14} />
+                      </button>
+                    )}
+                  </>
+                )}
+              </div>
+              {props.sidebarFilter.kind === 'duplicates' && !props.isMobileLayout && (
+                <div className="duplicate-mode-head-menu">
+                  {renderMobileFilterMenu('duplicate', t('txt_duplicate_detection_mode'), duplicateModeSelected, <Copy size={14} />, duplicateModeOptions)}
+                </div>
+              )}
+              <div className="sort-menu-wrap" ref={props.sortMenuRef}>
+                <button
+                  type="button"
+                  className={`btn btn-secondary small sort-trigger sort-trigger-labeled ${props.sortMenuOpen ? 'active' : ''}`}
+                  aria-label={t('txt_sort')}
+                  title={t('txt_sort')}
+                  onClick={props.onToggleSortMenu}
+                >
+                  <ArrowUpDown size={14} className="btn-icon" /> <span>{t('txt_sort')}</span>
+                </button>
+                {props.sortMenuOpen && (
+                  <div className="sort-menu">
+                    {vaultSortOptions.map((option) => (
+                      <button
+                        key={option.value}
+                        type="button"
+                        className={`sort-menu-item ${props.sortMode === option.value ? 'active' : ''}`}
+                        onClick={() => props.onSelectSortMode(option.value)}
+                      >
+                        <span>{option.label}</span>
+                        {props.sortMode === option.value ? <Check size={14} /> : <span className="sort-menu-check-placeholder" />}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <button type="button" className="btn btn-secondary small list-icon-btn" disabled={props.busy || props.loading} onClick={props.onSyncVault}>
+                <RefreshCw size={14} className="btn-icon" /> {t('txt_sync_vault')}
+              </button>
+              {!props.isMobileLayout && props.sidebarFilter !== undefined && createMenu}
+            </>
           )}
         </div>
-        <div className="list-count" title={t('txt_total_items_count', { count: props.totalCipherCount })}>
+        {props.isMobileLayout && (
-          {t('txt_total_items_count', { count: props.totalCipherCount })}
+          <div className="mobile-vault-filter-row" aria-label={t('txt_filter')}>
-        </div>
+            {renderMobileFilterMenu('menu', t('txt_menu'), menuFilterSelected, <LayoutGrid size={14} />, menuFilterOptions)}
-        <button type="button" className="btn btn-secondary small list-icon-btn" disabled={props.busy || props.loading} onClick={props.onSyncVault}>
+            {renderMobileFilterMenu('type', t('txt_type'), typeFilterSelected, <Globe size={14} />, typeMobileFilterOptions)}
-          <RefreshCw size={14} className="btn-icon" /> {t('txt_sync_vault')}
+            {renderMobileFilterMenu('folder', t('txt_folder'), folderFilterSelected, <FolderIcon size={14} />, folderMobileFilterOptions)}
-        </button>
+          </div>
+        )}
       </div>
-      <div className="toolbar actions">
+      {!props.selectedCount && props.isMobileLayout && props.sidebarFilter.kind !== 'duplicates' && typeof document !== 'undefined' && props.mobileFabVisible
-        {props.sidebarFilter.kind === 'duplicates' && (
+        ? createPortal(createMenu, document.body)
-          <button type="button" className="btn btn-secondary small" disabled={!props.filteredCiphers.length || props.busy} onClick={props.onSelectDuplicates}>
+        : null}
-            <Check size={14} className="btn-icon" /> {t('txt_select_duplicate_items')}
-          </button>
-        )}
-        {props.selectedCount > 0 && props.sidebarFilter.kind === 'trash' && (
-          <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onBulkRestore}>
-            <RefreshCw size={14} className="btn-icon" /> {t('txt_restore')}
-          </button>
-        )}
-        {props.selectedCount > 0 && props.sidebarFilter.kind === 'archive' && (
-          <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onBulkUnarchive}>
-            <RotateCcw size={14} className="btn-icon" /> {t('txt_unarchive')}
-          </button>
-        )}
-        {props.selectedCount > 0 && props.sidebarFilter.kind !== 'trash' && props.sidebarFilter.kind !== 'archive' && props.sidebarFilter.kind !== 'duplicates' && (
-          <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onBulkArchive}>
-            <Archive size={14} className="btn-icon" /> {t('txt_archive_selected')}
-          </button>
-        )}
-        {props.selectedCount > 0 && props.sidebarFilter.kind !== 'trash' && props.sidebarFilter.kind !== 'archive' && props.sidebarFilter.kind !== 'duplicates' && (
-          <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onOpenMove}>
-            <FolderInput size={14} className="btn-icon" /> {t('txt_move')}
-          </button>
-        )}
-        {props.selectedCount > 0 && (
-          <button type="button" className="btn btn-secondary small" onClick={props.onClearSelection}>
-            <X size={14} className="btn-icon" /> {t('txt_cancel')}
-          </button>
-        )}
-        <button type="button" className="btn btn-danger small" disabled={!props.selectedCount || props.busy} onClick={props.onOpenBulkDelete}>
-          <Trash2 size={14} className="btn-icon" /> {props.sidebarFilter.kind === 'trash' ? t('txt_delete_permanently') : t('txt_delete_selected')}
-        </button>
-        <button type="button" className="btn btn-secondary small" disabled={!props.filteredCiphers.length} onClick={props.onSelectAll}>
-          <CheckCheck size={14} className="btn-icon" /> {t('txt_select_all')}
-        </button>
-        {props.isMobileLayout && typeof document !== 'undefined'
-          ? props.mobileFabVisible ? createPortal(createMenu, document.body) : null
-          : createMenu}
-      </div>
-
       <div className="list-panel" ref={props.listPanelRef} onScroll={(event) => props.onScroll((event.currentTarget as HTMLDivElement).scrollTop)}>
         {props.loading && !props.filteredCiphers.length && <LoadingState lines={7} compact />}
         {!props.loading && !!props.error && !props.filteredCiphers.length && (
@@ -255,6 +420,7 @@ export default function VaultListPanel(props: VaultListPanelProps) {
                 cipher={cipher}
                 selected={props.selectedCipherId === cipher.id}
                 checked={!!props.selectedMap[cipher.id]}
+                duplicateGroupIndex={props.sidebarFilter.kind === 'duplicates' ? props.duplicateGroupIndexById.get(cipher.id) ?? null : null}
                 subtitle={props.listSubtitle(cipher)}
                 onToggleSelected={props.onToggleSelected}
                 onSelectCipher={props.onSelectCipher}

webapp/src/components/vault/vault-page-helpers.tsx

@@ -10,10 +10,13 @@ import {
 import { copyTextToClipboard } from '@/lib/clipboard';
 import { t } from '@/lib/i18n';
 import type { Cipher, CipherAttachment, CustomFieldType, VaultDraft, VaultDraftField, VaultDraftLoginUri } from '@/lib/types';
+import { firstCipherUri, hostFromUri, websiteIconUrl } from '@/lib/website-utils';
+import { normalizeEquivalentDomain } from '@shared/domain-normalize';
 import WebsiteIcon from './WebsiteIcon';
 
 export type TypeFilter = 'login' | 'card' | 'identity' | 'note' | 'ssh';
 export type VaultSortMode = 'edited' | 'created' | 'name';
+export type DuplicateDetectionMode = 'exact' | 'login-site' | 'login-credentials' | 'password';
 export type SidebarFilter =
   | { kind: 'all' }
   | { kind: 'favorite' }
@@ -126,6 +129,16 @@ export const FOLDER_SORT_STORAGE_KEY = 'nodewarden.folder-sort.v1';
 export const MOBILE_LAYOUT_QUERY = '(max-width: 1180px)';
 export const VAULT_LIST_ROW_HEIGHT = 74;
 export const VAULT_LIST_OVERSCAN = 10;
+
+export function getDuplicateDetectionOptions(): Array<{ value: DuplicateDetectionMode; label: string }> {
+  return [
+    { value: 'exact', label: t('txt_duplicate_mode_exact') },
+    { value: 'login-site', label: t('txt_duplicate_mode_login_site') },
+    { value: 'login-credentials', label: t('txt_duplicate_mode_login_credentials') },
+    { value: 'password', label: t('txt_duplicate_mode_password') },
+  ];
+}
+
 export function getVaultSortOptions(): Array<{ value: VaultSortMode; label: string }> {
   return [
     { value: 'edited', label: t('txt_sort_last_edited') },
@@ -242,7 +255,7 @@ export function toBooleanFieldValue(raw: string): boolean {
   return v === '1' || v === 'true' || v === 'yes' || v === 'on';
 }
 
-export { firstCipherUri, hostFromUri, websiteIconUrl } from '@/lib/website-utils';
+export { firstCipherUri, hostFromUri, websiteIconUrl };
 
 export function createEmptyLoginUri(): VaultDraftLoginUri {
   return { uri: '', match: null, originalUri: '', extra: {} };
@@ -257,6 +270,30 @@ function valueOrFallback(value: string | null | undefined): string {
   return String(value || '');
 }
 
+function duplicateLoginUsername(cipher: Cipher): string {
+  return valueOrFallback(cipher.login?.decUsername ?? cipher.login?.username).trim().toLowerCase();
+}
+
+function duplicateLoginPassword(cipher: Cipher): string {
+  return valueOrFallback(cipher.login?.decPassword ?? cipher.login?.password);
+}
+
+function duplicateLoginSites(cipher: Cipher): string[] {
+  const sites = new Set<string>();
+  for (const uri of cipher.login?.uris || []) {
+    const raw = valueOrFallback(uri.decUri ?? uri.uri).trim();
+    if (!raw) continue;
+    const host = hostFromUri(raw).trim().toLowerCase().replace(/^www\./, '');
+    const site = normalizeEquivalentDomain(raw) || host;
+    if (site) sites.add(site);
+  }
+  return Array.from(sites).sort();
+}
+
+function duplicateSignature(parts: string[]): string {
+  return JSON.stringify(parts);
+}
+
 export function buildCipherDuplicateSignature(cipher: Cipher): string {
   const normalized = {
     type: Number(cipher.type || 1),
@@ -333,6 +370,23 @@ export function buildCipherDuplicateSignature(cipher: Cipher): string {
   return JSON.stringify(normalized);
 }
 
+export function buildCipherDuplicateSignatures(cipher: Cipher, mode: DuplicateDetectionMode): string[] {
+  if (mode === 'exact') return [buildCipherDuplicateSignature(cipher)];
+  if (Number(cipher.type || 1) !== 1 || !cipher.login) return [];
+
+  const username = duplicateLoginUsername(cipher);
+  const password = duplicateLoginPassword(cipher);
+  if (mode === 'password') {
+    return password ? [duplicateSignature(['password', password])] : [];
+  }
+  if (!username || !password) return [];
+  if (mode === 'login-credentials') {
+    return [duplicateSignature(['login-credentials', username, password])];
+  }
+
+  return duplicateLoginSites(cipher).map((site) => duplicateSignature(['login-site', site, username, password]));
+}
+
 export function createEmptyDraft(type: number): VaultDraft {
   return {
     type,
@@ -453,8 +507,9 @@ export function maskSecret(value: string): string {
 export function formatTotp(code: string): string {
   if (!code) return code;
   if (code.length === 5) return `${code.slice(0, 2)} ${code.slice(2)}`;
-  if (code.length < 6) return code;
+  if (code.length <= 4) return code;
-  return `${code.slice(0, 3)} ${code.slice(3, 6)}`;
+  if (code.length === 8) return `${code.slice(0, 4)} ${code.slice(4)}`;
+  return code.replace(/(.{3})(?=.)/g, '$1 ');
 }
 
 export function formatHistoryTime(value: string | null | undefined): string {

webapp/src/lib/api/backup.ts

@@ -6,6 +6,7 @@ import type {
   BackupRuntimeState,
   BackupScheduleConfig,
   BackupSettings as AdminBackupSettings,
+  S3BackupAddressingStyle,
   S3BackupDestination,
   WebDavBackupDestination,
 } from '@shared/backup-schema';
@@ -26,6 +27,7 @@ export type {
   BackupRuntimeState,
   BackupScheduleConfig,
   AdminBackupSettings,
+  S3BackupAddressingStyle,
   S3BackupDestination,
   WebDavBackupDestination,
 };

webapp/src/lib/crypto.ts

@@ -220,6 +220,25 @@ function normalizeTotpSecret(secret: string): string {
   return secret.toUpperCase().replace(/[\s-]/g, '').replace(/=+$/g, '');
 }
 
+function readOtpAuthParam(raw: string, name: string): string {
+  const queryStart = raw.indexOf('?');
+  if (queryStart < 0) return '';
+  const fragmentStart = raw.indexOf('#', queryStart + 1);
+  const query = raw.slice(queryStart + 1, fragmentStart > queryStart ? fragmentStart : undefined);
+  for (const part of query.split('&')) {
+    const eq = part.indexOf('=');
+    const key = eq >= 0 ? part.slice(0, eq) : part;
+    if (key.trim().toLowerCase() !== name.toLowerCase()) continue;
+    const value = eq >= 0 ? part.slice(eq + 1) : '';
+    try {
+      return decodeURIComponent(value.replace(/\+/g, ' '));
+    } catch {
+      return value;
+    }
+  }
+  return '';
+}
+
 function parseSteamSecret(raw: string): string {
   const match = raw.trim().match(/^steam:\/\/([^/?#]+)(?:[/?#].*)?$/i);
   if (!match?.[1]) return '';
@@ -276,7 +295,8 @@ function parseTotpConfig(raw: string): TotpConfig {
   if (/^otpauth:\/\//i.test(s)) {
     try {
       const u = new URL(s);
-      if (u.hostname.toLowerCase() !== 'totp') {
+      const otpType = u.hostname.toLowerCase();
+      if (otpType !== 'totp') {
         return { secret: '', steam: false, ...DEFAULT_TOTP_CONFIG };
       }
       const label = decodeURIComponent((u.pathname || '').replace(/^\/+/, '')).toLowerCase();
@@ -291,7 +311,16 @@ function parseTotpConfig(raw: string): TotpConfig {
         period: parseTotpPositiveInt(u.searchParams.get('period'), DEFAULT_TOTP_CONFIG.period, 1, 3600),
       };
     } catch {
-      return { secret: '', steam: false, ...DEFAULT_TOTP_CONFIG };
+      const issuer = readOtpAuthParam(s, 'issuer').trim().toLowerCase();
+      const algorithm = readOtpAuthParam(s, 'algorithm').trim().toLowerCase();
+      const steam = issuer === 'steam' || algorithm === 'steam';
+      return {
+        secret: normalizeTotpSecret(readOtpAuthParam(s, 'secret')),
+        steam,
+        algorithm: steam ? 'SHA-1' : parseTotpHashAlgorithm(algorithm),
+        digits: steam ? 5 : parseTotpPositiveInt(readOtpAuthParam(s, 'digits'), DEFAULT_TOTP_CONFIG.digits, 1, 10),
+        period: parseTotpPositiveInt(readOtpAuthParam(s, 'period'), DEFAULT_TOTP_CONFIG.period, 1, 3600),
+      };
     }
   }
   return { secret: normalizeTotpSecret(s), steam: false, ...DEFAULT_TOTP_CONFIG };

webapp/src/lib/i18n/locales/en.ts

@@ -267,6 +267,9 @@ const en: Record<string, string> = {
   "txt_backup_webdav_password": "WebDAV Password",
   "txt_backup_webdav_path": "Remote Folder",
   "txt_backup_s3_endpoint": "S3 Endpoint",
+  "txt_backup_s3_addressing_style": "S3 Addressing Style",
+  "txt_backup_s3_addressing_path_style": "path-style (default)",
+  "txt_backup_s3_addressing_virtual_hosted_style": "virtual-hosted-style",
   "txt_backup_s3_bucket": "Bucket",
   "txt_backup_s3_region": "Region",
   "txt_backup_s3_access_key": "Access Key",
@@ -447,6 +450,11 @@ const en: Record<string, string> = {
   "txt_favorite": "Favorite",
   "txt_favorites": "Favorites",
   "txt_duplicates": "Duplicates",
+  "txt_duplicate_detection_mode": "Match by",
+  "txt_duplicate_mode_exact": "Exact item",
+  "txt_duplicate_mode_login_site": "Site + username + password",
+  "txt_duplicate_mode_login_credentials": "Username + password",
+  "txt_duplicate_mode_password": "Reused password",
   "txt_field": "Field",
   "txt_field_label": "Field Label",
   "txt_field_label_is_required": "Field label is required.",
@@ -750,6 +758,7 @@ const en: Record<string, string> = {
   "txt_search_sends": "Search sends...",
   "txt_session_refresh_failed": "Session refresh failed. Please sign in again.",
   "txt_search_your_secure_vault": "Search your secure vault...",
+  "txt_search_items_count": "Search within {count} items...",
   "txt_clear_search": "Clear search",
   "txt_clear_search_esc": "Clear search (Esc)",
   "txt_sort": "Sort",

webapp/src/lib/i18n/locales/es.ts

@@ -267,6 +267,9 @@ const es: Record<string, string> = {
   "txt_backup_webdav_password": "Contraseña WebDAV",
   "txt_backup_webdav_path": "Carpeta remota",
   "txt_backup_s3_endpoint": "Endpoint S3",
+  "txt_backup_s3_addressing_style": "Estilo de direccionamiento S3",
+  "txt_backup_s3_addressing_path_style": "path-style (predeterminado)",
+  "txt_backup_s3_addressing_virtual_hosted_style": "virtual-hosted-style",
   "txt_backup_s3_bucket": "Bucket S3",
   "txt_backup_s3_region": "Región",
   "txt_backup_s3_access_key": "Clave de acceso",
@@ -447,6 +450,11 @@ const es: Record<string, string> = {
   "txt_favorite": "Favorito",
   "txt_favorites": "Favoritos",
   "txt_duplicates": "Duplicados",
+  "txt_duplicate_detection_mode": "Coincidir por",
+  "txt_duplicate_mode_exact": "Elemento exacto",
+  "txt_duplicate_mode_login_site": "Sitio + usuario + contraseña",
+  "txt_duplicate_mode_login_credentials": "Usuario + contraseña",
+  "txt_duplicate_mode_password": "Contraseña reutilizada",
   "txt_field": "Campo",
   "txt_field_label": "Etiqueta del campo",
   "txt_field_label_is_required": "La etiqueta del campo es obligatoria.",
@@ -750,6 +758,7 @@ const es: Record<string, string> = {
   "txt_search_sends": "Buscar envíos...",
   "txt_session_refresh_failed": "Error al actualizar la sesión. Inicia sesión de nuevo.",
   "txt_search_your_secure_vault": "Buscar en su bóveda segura...",
+  "txt_search_items_count": "Buscar entre {count} elementos...",
   "txt_clear_search": "Limpiar búsqueda",
   "txt_clear_search_esc": "Limpiar búsqueda (Esc)",
   "txt_sort": "Ordenar",

webapp/src/lib/i18n/locales/ru.ts

@@ -267,6 +267,9 @@ const ru: Record<string, string> = {
   "txt_backup_webdav_password": "Пароль WebDAV",
   "txt_backup_webdav_path": "Удаленная папка",
   "txt_backup_s3_endpoint": "S3 endpoint",
+  "txt_backup_s3_addressing_style": "Стиль адресации S3",
+  "txt_backup_s3_addressing_path_style": "path-style (по умолчанию)",
+  "txt_backup_s3_addressing_virtual_hosted_style": "virtual-hosted-style",
   "txt_backup_s3_bucket": "Бакет",
   "txt_backup_s3_region": "Регион",
   "txt_backup_s3_access_key": "Ключ доступа",
@@ -447,6 +450,11 @@ const ru: Record<string, string> = {
   "txt_favorite": "Любимый",
   "txt_favorites": "Избранное",
   "txt_duplicates": "Дубликаты",
+  "txt_duplicate_detection_mode": "Сравнивать по",
+  "txt_duplicate_mode_exact": "Полное совпадение",
+  "txt_duplicate_mode_login_site": "Сайт + логин + пароль",
+  "txt_duplicate_mode_login_credentials": "Логин + пароль",
+  "txt_duplicate_mode_password": "Повтор пароля",
   "txt_field": "Поле",
   "txt_field_label": "Метка поля",
   "txt_field_label_is_required": "Метка поля обязательна.",
@@ -750,6 +758,7 @@ const ru: Record<string, string> = {
   "txt_search_sends": "Поиск отправляет...",
   "txt_session_refresh_failed": "Не удалось обновить сеанс. Войдите снова.",
   "txt_search_your_secure_vault": "Найдите свое безопасное хранилище...",
+  "txt_search_items_count": "Поиск по {count} элементам...",
   "txt_clear_search": "Очистить поиск",
   "txt_clear_search_esc": "Очистить поиск (Esc)",
   "txt_sort": "Сортировать",

webapp/src/lib/i18n/locales/zh-CN.ts

@@ -267,6 +267,9 @@ const zhCN: Record<string, string> = {
   "txt_backup_webdav_password": "WebDAV 密码",
   "txt_backup_webdav_path": "远程目录",
   "txt_backup_s3_endpoint": "S3 端点",
+  "txt_backup_s3_addressing_style": "S3 寻址方式",
+  "txt_backup_s3_addressing_path_style": "path-style（默认）",
+  "txt_backup_s3_addressing_virtual_hosted_style": "virtual-hosted-style",
   "txt_backup_s3_bucket": "存储桶",
   "txt_backup_s3_region": "区域",
   "txt_backup_s3_access_key": "访问密钥",
@@ -447,6 +450,11 @@ const zhCN: Record<string, string> = {
   "txt_favorite": "收藏",
   "txt_favorites": "收藏",
   "txt_duplicates": "重复项",
+  "txt_duplicate_detection_mode": "匹配方式",
+  "txt_duplicate_mode_exact": "完全相同",
+  "txt_duplicate_mode_login_site": "网站+账号+密码",
+  "txt_duplicate_mode_login_credentials": "账号+密码",
+  "txt_duplicate_mode_password": "密码复用",
   "txt_field": "字段",
   "txt_field_label": "字段标签",
   "txt_field_label_is_required": "字段标签不能为空",
@@ -750,6 +758,7 @@ const zhCN: Record<string, string> = {
   "txt_search_sends": "搜索 Send...",
   "txt_session_refresh_failed": "会话刷新失败，请重新登录",
   "txt_search_your_secure_vault": "搜索你的密码库...",
+  "txt_search_items_count": "共 {count} 项中搜索...",
   "txt_clear_search": "清空搜索",
   "txt_clear_search_esc": "清空搜索（Esc）",
   "txt_sort": "排序",

webapp/src/lib/i18n/locales/zh-TW.ts

@@ -267,6 +267,9 @@ const zhTW: Record<string, string> = {
   "txt_backup_webdav_password": "WebDAV 密碼",
   "txt_backup_webdav_path": "遠程目錄",
   "txt_backup_s3_endpoint": "S3 端點",
+  "txt_backup_s3_addressing_style": "S3 定址方式",
+  "txt_backup_s3_addressing_path_style": "path-style（預設）",
+  "txt_backup_s3_addressing_virtual_hosted_style": "virtual-hosted-style",
   "txt_backup_s3_bucket": "儲存桶",
   "txt_backup_s3_region": "區域",
   "txt_backup_s3_access_key": "存取金鑰",
@@ -447,6 +450,11 @@ const zhTW: Record<string, string> = {
   "txt_favorite": "收藏",
   "txt_favorites": "收藏",
   "txt_duplicates": "重複項",
+  "txt_duplicate_detection_mode": "匹配方式",
+  "txt_duplicate_mode_exact": "完全相同",
+  "txt_duplicate_mode_login_site": "網站+帳號+密碼",
+  "txt_duplicate_mode_login_credentials": "帳號+密碼",
+  "txt_duplicate_mode_password": "密碼重複使用",
   "txt_field": "字段",
   "txt_field_label": "字段標籤",
   "txt_field_label_is_required": "字段標籤不能為空",
@@ -750,6 +758,7 @@ const zhTW: Record<string, string> = {
   "txt_search_sends": "搜索 Send...",
   "txt_session_refresh_failed": "會話刷新失敗，請重新登入",
   "txt_search_your_secure_vault": "搜索你的密碼庫...",
+  "txt_search_items_count": "在共 {count} 項中搜索...",
   "txt_clear_search": "清空搜索",
   "txt_clear_search_esc": "清空搜索（Esc）",
   "txt_sort": "排序",

webapp/src/styles.css

@@ -596,7 +596,7 @@ h4 {
 }
 
 .list-head {
-  margin-bottom: 8px;
+  margin-bottom: 5px;
 }
 
 .list-count {
@@ -1069,6 +1069,7 @@ textarea {
   .list-panel {
     padding: 6px;
     border-radius: var(--radius-md);
+    margin-top: 5px;
   }
 
   .list-item {

webapp/src/styles/dark.css

@@ -70,6 +70,7 @@
 :root[data-theme='dark'] .textarea,
 :root[data-theme='dark'] select.input,
 :root[data-theme='dark'] .search-input,
+:root[data-theme='dark'] .mobile-vault-filter-trigger,
 :root[data-theme='dark'] .dialog input,
 :root[data-theme='dark'] .dialog textarea,
 :root[data-theme='dark'] .dialog select {
@@ -79,6 +80,13 @@
   box-shadow: none;
 }
 
+:root[data-theme='dark'] .mobile-vault-filter-trigger:hover,
+:root[data-theme='dark'] .mobile-vault-filter-trigger.active {
+  background: var(--panel-muted);
+  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
+  color: var(--text);
+}
+
 :root[data-theme='dark'] .input::placeholder,
 :root[data-theme='dark'] .textarea::placeholder,
 :root[data-theme='dark'] input::placeholder,
@@ -200,6 +208,21 @@
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(139, 184, 255, 0.12);
 }
 
+:root[data-theme='dark'] .list-item.duplicate-group-item {
+  background: hsl(var(--duplicate-group-hue) 34% 18%);
+  border-color: hsl(var(--duplicate-group-hue) 28% 30%);
+}
+
+:root[data-theme='dark'] .list-item.duplicate-group-item:hover {
+  background: hsl(var(--duplicate-group-hue) 36% 21%);
+  border-color: hsl(var(--duplicate-group-hue) 34% 38%);
+}
+
+:root[data-theme='dark'] .list-item.duplicate-group-item.active {
+  background: hsl(var(--duplicate-group-hue) 38% 24%);
+  border-color: hsl(var(--duplicate-group-hue) 42% 48%);
+}
+
 :root[data-theme='dark'] .card-brand-icon {
   color: #bfdbfe;
   background: linear-gradient(180deg, #1f2937 0%, #111827 100%);

webapp/src/styles/forms.css

@@ -31,19 +31,12 @@
 }
 
 select.input {
-  @apply py-0 pr-[42px];
+  @apply py-0 pr-3.5;
   line-height: 1.5;
-  appearance: none;
+  appearance: auto;
-  -webkit-appearance: none;
+  -webkit-appearance: auto;
-  -moz-appearance: none;
+  -moz-appearance: auto;
-  background-image:
+  background-image: none;
-    linear-gradient(45deg, transparent 50%, #365fa8 50%),
-    linear-gradient(135deg, #365fa8 50%, transparent 50%);
-  background-position:
-    calc(100% - 18px) calc(50% - 3px),
-    calc(100% - 12px) calc(50% - 3px);
-  background-size: 6px 6px, 6px 6px;
-  background-repeat: no-repeat;
 }
 
 input[type='file'].input {

webapp/src/styles/overlays.css

@@ -209,14 +209,29 @@
 }
 
 .toast-close {
-  @apply cursor-pointer border-0 bg-transparent text-xl;
+  @apply flex cursor-pointer items-center justify-center border-0;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: transparent;
   color: inherit;
-  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
+  -webkit-tap-highlight-color: transparent;
+  transition: background 120ms ease, opacity 120ms ease;
 }
 
 .toast-close:hover {
-  transform: scale(1.08);
+  background: rgba(0, 0, 0, 0.08);
-  opacity: 0.84;
+}
+
+.toast-close:active {
+  background: rgba(0, 0, 0, 0.14);
+}
+
+.toast-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+  border-radius: 8px;
 }
 
 .toast-progress {

webapp/src/styles/responsive.css

@@ -302,10 +302,15 @@
   }
 
   .list-head {
-    @apply grid items-center gap-2;
+    @apply grid items-center gap-1.5;
     grid-template-columns: minmax(0, 1fr) auto auto auto;
   }
 
+  .list-head.selection-mode {
+    @apply justify-stretch;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
   .list-count {
     grid-column: auto;
     @apply w-auto whitespace-nowrap text-xs;
@@ -316,11 +321,50 @@
   }
 
   .list-head .search-input {
-    @apply h-[42px] w-full min-w-0 rounded-[14px];
+    @apply h-[34px] w-full min-w-0 rounded-[10px] px-3 py-0 text-[13px] font-semibold;
+    line-height: 34px;
+  }
+
+  .mobile-vault-filter-row {
+    @apply grid min-w-0 gap-1.5;
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .list-head .duplicate-mode-head-select {
+    @apply h-[34px] min-w-0 w-auto max-w-full rounded-[10px];
   }
 
   .list-icon-btn {
-    @apply w-auto min-w-0 gap-1.5 whitespace-nowrap px-3 py-0 text-[13px];
+    @apply h-[34px] w-auto min-w-0 gap-1.5 whitespace-nowrap rounded-[10px] px-3 py-0 text-[13px];
+  }
+
+  .list-head.selection-mode > .btn.small {
+    @apply h-[34px] min-w-0 w-full justify-center gap-1 px-2 text-[12px];
+  }
+
+  .list-head.selection-mode > .btn.small .btn-icon {
+    @apply m-0;
+  }
+
+  .sort-trigger {
+    @apply h-[34px] w-[34px] min-w-[34px] rounded-[10px];
+  }
+
+  .sort-trigger.sort-trigger-labeled {
+    @apply h-[34px] w-[34px] min-w-[34px] gap-0 px-0 text-[0];
+  }
+
+  .sort-trigger.sort-trigger-labeled .btn-icon {
+    @apply m-0;
+  }
+
+  .desktop-create-menu-wrap {
+    display: none;
+  }
+
+  .duplicate-mode-head-menu .mobile-vault-filter-menu {
+    min-width: max(100%, 190px);
   }
 
   .toolbar.actions {
@@ -329,6 +373,11 @@
     gap: var(--actions-gap);
   }
 
+  .toolbar.actions.duplicates-toolbar {
+    @apply justify-start;
+    flex-wrap: wrap;
+  }
+
   .actions {
     gap: var(--actions-gap);
   }
@@ -337,6 +386,10 @@
     @apply h-[34px] w-auto min-w-0 gap-1.5 whitespace-nowrap rounded-full px-3 py-0 text-[13px];
   }
 
+  .list-count-status {
+    @apply mb-1 px-1;
+  }
+
   .mobile-fab-wrap {
     @apply fixed right-3.5 z-[45];
     bottom: calc(14px + var(--mobile-tabbar-height, 70px) + env(safe-area-inset-bottom));
@@ -883,6 +936,10 @@
     font-size: 13px;
   }
 
+  .totp-code-main strong {
+    font-size: 20px;
+  }
+
   .settings-module .field,
   .auth-card .field {
     margin-bottom: 8px;

webapp/src/styles/vault.css

@@ -184,24 +184,147 @@
   gap: var(--actions-gap);
 }
 
+.toolbar.actions.duplicates-toolbar {
+  @apply items-center;
+}
+
 .toolbar .btn.small {
-  @apply h-[30px] rounded-full text-xs;
+  @apply h-[32px] rounded-full text-xs;
+}
+
+.duplicate-mode-select {
+  @apply h-8 min-w-[150px] rounded-full py-0 pl-3 pr-6 text-xs;
+  border-color: rgba(74, 103, 150, 0.26);
+  box-shadow: none;
+  line-height: 32px;
+  background-position:
+    calc(100% - 10px) calc(50% - 2px),
+    calc(100% - 6px) calc(50% - 2px);
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+}
+
+select.input.duplicate-mode-toolbar-select {
+  height: 32px;
+  padding-top: 0;
+  padding-right: 24px;
+  padding-bottom: 0;
+  line-height: 32px;
+  background-position:
+    calc(100% - 10px) calc(50% - 2px),
+    calc(100% - 6px) calc(50% - 2px);
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+}
+
+.duplicate-mode-head-select {
+  @apply h-[34px] w-auto min-w-[156px] max-w-full;
+}
+
+.duplicate-mode-head-menu {
+  @apply min-w-0;
+}
+
+.duplicate-mode-toolbar-select {
+  @apply w-auto max-w-[170px] shrink-0;
 }
 
 .list-head {
-  @apply mb-2 flex items-center gap-2.5;
+  @apply mb-1.5 flex items-center gap-2;
+  min-height: 34px;
 }
 
-.list-head .search-input-wrap {
+.list-head.selection-mode {
+  @apply gap-2;
+}
+
+.list-head.selection-mode > .btn.small {
+  @apply min-w-0 flex-1 justify-center;
+}
+
+.list-head .search-input-wrap,
+.duplicate-mode-head-menu {
   @apply min-w-0 flex-auto;
 }
 
 .list-head .search-input {
-  @apply h-[42px];
+  @apply h-[34px] rounded-[10px] px-3 py-0 text-[13px] font-semibold;
+  line-height: 34px;
 }
 
 .list-head .btn {
-  @apply whitespace-nowrap;
+  @apply h-[34px] whitespace-nowrap rounded-[10px] px-3 py-0 text-[13px];
+}
+
+.mobile-vault-filter-row {
+  @apply hidden;
+}
+
+.mobile-vault-filter-control {
+  @apply relative min-w-0;
+}
+
+.mobile-vault-filter-trigger {
+  @apply flex h-[34px] w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-[10px] border px-2.5 py-0 text-left text-[13px] font-semibold;
+  background: var(--panel);
+  border-color: rgba(74, 103, 150, 0.28);
+  color: var(--muted-strong);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
+  transition:
+    border-color var(--dur-fast) var(--ease-smooth),
+    background-color var(--dur-fast) var(--ease-smooth),
+    color var(--dur-fast) var(--ease-smooth),
+    box-shadow var(--dur-fast) var(--ease-smooth);
+}
+
+.mobile-vault-filter-trigger:hover,
+.mobile-vault-filter-trigger.active {
+  border-color: rgba(43, 102, 217, 0.46);
+  background: #f8fbff;
+  color: var(--primary-strong);
+}
+
+.mobile-vault-filter-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
+}
+
+.mobile-vault-filter-trigger-icon,
+.mobile-vault-filter-item-icon {
+  @apply inline-flex shrink-0 items-center justify-center;
+}
+
+.mobile-vault-filter-trigger-label {
+  @apply min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.mobile-vault-filter-chevron {
+  @apply shrink-0;
+}
+
+.mobile-vault-filter-trigger.active .mobile-vault-filter-chevron {
+  transform: rotate(180deg);
+}
+
+.mobile-vault-filter-menu {
+  @apply left-0 right-auto max-h-[280px] min-w-full overflow-auto;
+  min-width: max(100%, 168px);
+}
+
+.mobile-vault-filter-control:last-child .mobile-vault-filter-menu {
+  @apply left-auto right-0;
+}
+
+.mobile-vault-filter-item {
+  @apply gap-2;
+}
+
+.mobile-vault-filter-item-main {
+  @apply flex min-w-0 items-center gap-2;
+}
+
+.mobile-vault-filter-item-main span:last-child {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
 }
 
 .list-count {
@@ -225,6 +348,10 @@
   @apply w-9 min-w-9 justify-center gap-0 p-0;
 }
 
+.sort-trigger.sort-trigger-labeled {
+  @apply h-[34px] w-auto min-w-0 gap-1.5 rounded-[10px] px-3;
+}
+
 .sort-trigger.active {
   background: #e9f1ff;
   border-color: #a9c2ee;
@@ -266,6 +393,30 @@
   @apply h-3.5 w-3.5 shrink-0;
 }
 
+.desktop-create-menu-wrap {
+  @apply shrink-0;
+}
+
+.desktop-create-trigger {
+  @apply h-[34px] w-[34px] min-w-[34px] gap-0 rounded-[10px] p-0 text-[0];
+}
+
+.desktop-create-trigger .btn-icon {
+  @apply m-0;
+}
+
+.duplicates-helper-toolbar {
+  @apply justify-start pb-0.5;
+}
+
+.duplicates-helper-toolbar .btn.small {
+  @apply h-[34px] rounded-[10px] px-3 py-0 text-[13px];
+}
+
+.list-count-status {
+  @apply mb-1 pl-1;
+}
+
 .list-panel {
   @apply min-h-0 overflow-auto p-2;
   /* Virtualized rows update top/bottom spacers while scrolling. Chrome's scroll anchoring
@@ -281,6 +432,11 @@
   overflow-anchor: none;
 }
 
+.list-item.duplicate-group-item {
+  background: hsl(var(--duplicate-group-hue) 84% 94%);
+  border-color: hsl(var(--duplicate-group-hue) 42% 78%);
+}
+
 .list-item::before {
   content: '';
   @apply absolute inset-0 opacity-0;
@@ -361,6 +517,11 @@
   box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(37, 99, 235, 0.04);
 }
 
+.list-item.duplicate-group-item:hover {
+  background: hsl(var(--duplicate-group-hue) 88% 92%);
+  border-color: hsl(var(--duplicate-group-hue) 52% 68%);
+}
+
 .list-item:hover::before {
   opacity: 1;
   transform: translateX(0);
@@ -372,6 +533,11 @@
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
 }
 
+.list-item.duplicate-group-item.active {
+  background: hsl(var(--duplicate-group-hue) 88% 89%);
+  border-color: hsl(var(--duplicate-group-hue) 58% 58%);
+}
+
 .list-item.active::before {
   opacity: 1;
   transform: translateX(0);
@@ -900,7 +1066,7 @@
 
 .totp-codes-list {
   @apply grid w-full items-start gap-2.5;
-  grid-template-columns: repeat(var(--totp-columns, 1), minmax(300px, 1fr));
+  grid-template-columns: repeat(var(--totp-columns, 1), minmax(0, 1fr));
 }
 
 .totp-code-row {
@@ -925,7 +1091,7 @@
 }
 
 .totp-code-main strong {
-  @apply whitespace-nowrap text-[22px] leading-none;
+  @apply min-w-0 whitespace-nowrap text-[22px] leading-none;
   letter-spacing: 0.04em;
 }