From 76dc3b125adc1ae71eafd0471db6776b44f4e935 Mon Sep 17 00:00:00 2001
From: Lewis <lu5a@proton.me>
Date: Wed, 18 Mar 2026 07:18:08 +0200
Subject: [PATCH] refactor(frontend): extract admin, settings, app passwords
 styles

---
 .../components/dashboard/AdminContent.svelte  | 413 +-----------------
 .../dashboard/AppPasswordsContent.svelte      | 235 +---------
 .../dashboard/SettingsContent.svelte          | 318 +-------------
 3 files changed, 16 insertions(+), 950 deletions(-)

diff --git a/frontend/src/components/dashboard/AdminContent.svelte b/frontend/src/components/dashboard/AdminContent.svelte
index 783553e..2298e37 100644
--- a/frontend/src/components/dashboard/AdminContent.svelte
+++ b/frontend/src/components/dashboard/AdminContent.svelte
@@ -269,7 +269,7 @@
   <section class="config-section">
     <h3>{$_('admin.serverConfig')}</h3>
     <form onsubmit={saveServerConfig}>
-      <div class="field">
+      <div>
         <label for="server-name">{$_('admin.serverName')}</label>
         <input
           id="server-name"
@@ -281,7 +281,7 @@
         <span class="field-help">{$_('admin.serverNameHelp')}</span>
       </div>
 
-      <div class="field">
+      <div>
         <label for="server-logo">{$_('admin.serverLogo')}</label>
         <div class="logo-section">
           {#if logoPreview}
@@ -341,7 +341,7 @@
   <section class="stats-section">
     <div class="section-header-row">
       <h3>{$_('admin.serverStats')}</h3>
-      <button type="button" class="refresh-btn" onclick={loadStats} disabled={loading}>
+      <button type="button" class="sm tertiary" onclick={loadStats} disabled={loading}>
         {$_('admin.refreshStats')}
       </button>
     </div>
@@ -423,7 +423,7 @@
 </div>
 
 {#if selectedUser}
-  <div class="modal-overlay" onclick={closeUserDetail} onkeydown={(e) => e.key === 'Escape' && closeUserDetail()} role="presentation">
+  <div class="modal-backdrop" onclick={closeUserDetail} onkeydown={(e) => e.key === 'Escape' && closeUserDetail()} role="presentation">
     <div class="modal" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="dialog" aria-modal="true" tabindex="-1">
       <div class="modal-header">
         <h2>{$_('admin.userDetails')}</h2>
@@ -433,7 +433,7 @@
         {#if userDetailLoading}
           <div class="loading">{$_('common.loading')}</div>
         {/if}
-        <dl class="user-details">
+        <dl class="definition-list">
           <dt>{$_('admin.handle')}</dt>
           <dd>@{selectedUser.handle}</dd>
           <dt>{$_('admin.did')}</dt>
@@ -480,406 +480,3 @@
     </div>
   </div>
 {/if}
-
-<style>
-  .admin {
-    max-width: var(--width-lg);
-  }
-
-  section {
-    background: var(--bg-secondary);
-    padding: var(--space-5);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-5);
-  }
-
-  section h3 {
-    margin: 0 0 var(--space-4) 0;
-    font-size: var(--text-base);
-  }
-
-  .section-header-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-4);
-  }
-
-  .section-header-row h3 {
-    margin: 0;
-  }
-
-  .refresh-btn {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-sm);
-    background: transparent;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    color: var(--text-primary);
-  }
-
-  .refresh-btn:hover:not(:disabled) {
-    border-color: var(--accent);
-  }
-
-  .refresh-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .loading,
-  .empty {
-    color: var(--text-secondary);
-    padding: var(--space-4);
-    text-align: center;
-  }
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: var(--space-4);
-  }
-
-  .stat-item {
-    background: var(--bg-card);
-    padding: var(--space-4);
-    border-radius: var(--radius-md);
-    text-align: center;
-  }
-
-  .stat-value {
-    display: block;
-    font-size: var(--text-2xl);
-    font-weight: var(--font-bold);
-    color: var(--accent);
-  }
-
-  .stat-label {
-    display: block;
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    margin-top: var(--space-1);
-  }
-
-  .search-bar {
-    display: flex;
-    gap: var(--space-2);
-    margin-bottom: var(--space-4);
-  }
-
-  .search-bar input {
-    flex: 1;
-  }
-
-  .user-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .user-item {
-    list-style: none;
-  }
-
-  .user-item-btn {
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-    padding: var(--space-3);
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    gap: var(--space-3);
-    cursor: pointer;
-    text-align: left;
-    color: inherit;
-    font: inherit;
-  }
-
-  .user-item-btn:hover {
-    border-color: var(--accent);
-  }
-
-  .user-info {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-
-  .user-handle {
-    font-weight: var(--font-medium);
-  }
-
-  .user-did {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-    word-break: break-all;
-  }
-
-  .user-email {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .user-date {
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-  }
-
-  .user-badges {
-    display: flex;
-    gap: var(--space-2);
-    flex-shrink: 0;
-  }
-
-  .badge {
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--radius-md);
-    font-size: var(--text-xs);
-  }
-
-  .badge.deactivated {
-    background: var(--warning-bg);
-    color: var(--warning-text);
-  }
-
-  .field {
-    margin-bottom: var(--space-4);
-  }
-
-  .field label {
-    display: block;
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-    margin-bottom: var(--space-1);
-  }
-
-  .field-help {
-    display: block;
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-    margin-top: var(--space-1);
-  }
-
-  .logo-section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .logo-preview {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-  }
-
-  .logo-preview img {
-    width: 48px;
-    height: 48px;
-    object-fit: contain;
-    border-radius: var(--radius-md);
-    background: var(--bg-card);
-    padding: var(--space-2);
-  }
-
-  .remove-logo {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-sm);
-    background: transparent;
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-  }
-
-  .remove-logo:hover {
-    background: var(--error-bg);
-  }
-
-  .colors-grid {
-    margin-bottom: var(--space-5);
-  }
-
-  .colors-grid h4 {
-    margin: 0 0 var(--space-2) 0;
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-  }
-
-  .color-fields {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-3);
-    margin-top: var(--space-3);
-  }
-
-  .color-field label {
-    display: block;
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-    margin-bottom: var(--space-1);
-  }
-
-  .color-input-row {
-    display: flex;
-    gap: var(--space-2);
-    align-items: center;
-  }
-
-  .color-input-row input[type="color"] {
-    width: 40px;
-    height: 36px;
-    padding: 2px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-
-  .color-input-row input[type="text"] {
-    flex: 1;
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-  }
-
-  .load-more {
-    display: block;
-    width: 100%;
-    margin-top: var(--space-4);
-  }
-
-  .badge.verified {
-    background: var(--success-bg);
-    color: var(--success-text);
-  }
-
-  .badge.unverified {
-    background: var(--bg-tertiary);
-    color: var(--text-secondary);
-  }
-
-  .modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: var(--overlay-bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: var(--z-modal);
-  }
-
-  .modal {
-    background: var(--bg-card);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-lg);
-    max-width: var(--width-sm);
-    width: 90%;
-    max-height: 90vh;
-    overflow-y: auto;
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-4) var(--space-5);
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .modal-header h2 {
-    margin: 0;
-    font-size: var(--text-lg);
-  }
-
-  .close-btn {
-    background: none;
-    border: none;
-    font-size: var(--text-xl);
-    cursor: pointer;
-    color: var(--text-secondary);
-    padding: 0;
-    line-height: 1;
-  }
-
-  .close-btn:hover {
-    color: var(--text-primary);
-  }
-
-  .modal-body {
-    padding: var(--space-5);
-  }
-
-  .user-details {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: var(--space-2) var(--space-4);
-    margin: 0 0 var(--space-5) 0;
-  }
-
-  .user-details dt {
-    font-weight: var(--font-medium);
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-  }
-
-  .user-details dd {
-    margin: 0;
-  }
-
-  .user-details .mono {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    word-break: break-all;
-  }
-
-  .modal-actions {
-    display: flex;
-    gap: var(--space-3);
-    flex-wrap: wrap;
-  }
-
-  .modal-actions button.danger {
-    background: var(--error-text);
-    border: 1px solid var(--error-text);
-    color: white;
-  }
-
-  .modal-actions button.danger:hover {
-    background: var(--error-border);
-  }
-
-  @media (max-width: 600px) {
-    .user-item {
-      flex-direction: column;
-    }
-
-    .user-item-btn {
-      flex-direction: column;
-      gap: var(--space-2);
-    }
-
-    .user-info {
-      width: 100%;
-    }
-
-    .user-badges {
-      width: 100%;
-      flex-wrap: wrap;
-    }
-
-    .search-bar {
-      flex-direction: column;
-    }
-
-    .color-fields {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>
diff --git a/frontend/src/components/dashboard/AppPasswordsContent.svelte b/frontend/src/components/dashboard/AppPasswordsContent.svelte
index 76ca20b..bdebef1 100644
--- a/frontend/src/components/dashboard/AppPasswordsContent.svelte
+++ b/frontend/src/components/dashboard/AppPasswordsContent.svelte
@@ -131,7 +131,7 @@
   {/if}
 
   <form class="create-form" onsubmit={handleCreate}>
-    <div class="field">
+    <div>
       <label for="app-name">{$_('appPasswords.name')}</label>
       <input
         id="app-name"
@@ -183,7 +183,7 @@
           </div>
           <button
             type="button"
-            class="delete-btn"
+            class="sm danger-outline"
             onclick={() => handleDelete(pw.name)}
             disabled={deleting === pw.name}
           >
@@ -194,234 +194,3 @@
     </ul>
   {/if}
 </div>
-
-<style>
-  .app-passwords {
-    max-width: var(--width-lg);
-  }
-
-  .new-password-banner {
-    background: var(--warning-bg);
-    border: 1px solid var(--warning-border);
-    border-radius: var(--radius-lg);
-    padding: var(--space-4);
-    margin-bottom: var(--space-6);
-  }
-
-  .new-password-banner .password-label {
-    font-size: var(--text-sm);
-    color: var(--text-primary);
-    margin-bottom: var(--space-2);
-  }
-
-  .new-password-banner .warning {
-    color: var(--warning-text);
-    font-weight: var(--font-medium);
-    margin: 0 0 var(--space-3) 0;
-  }
-
-  .acknowledge-label {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    margin-bottom: var(--space-3);
-    cursor: pointer;
-    font-size: var(--text-sm);
-    color: var(--text-primary);
-  }
-
-  .acknowledge-label input[type="checkbox"] {
-    width: 18px;
-    height: 18px;
-    accent-color: var(--accent);
-  }
-
-  .password-display {
-    display: flex;
-    gap: var(--space-2);
-    margin-bottom: var(--space-3);
-  }
-
-  .password-display code {
-    flex: 1;
-    padding: var(--space-3);
-    background: var(--bg-card);
-    border-radius: var(--radius-md);
-    font-family: var(--font-mono);
-    word-break: break-all;
-  }
-
-  .copy-btn {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-sm);
-  }
-
-  .dismiss-btn {
-    width: 100%;
-  }
-
-  .create-form {
-    background: var(--bg-secondary);
-    padding: var(--space-5);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-6);
-  }
-
-  .create-form .field {
-    margin-bottom: var(--space-4);
-  }
-
-  .scope-selector {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    margin-bottom: var(--space-4);
-  }
-
-  .scope-label {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .scope-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-2);
-  }
-
-  .scope-btn {
-    padding: var(--space-2) var(--space-4);
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    color: var(--text-primary);
-    cursor: pointer;
-    font-size: var(--text-sm);
-    transition: all 0.15s ease;
-  }
-
-  .scope-btn:hover:not(:disabled) {
-    background: var(--bg-hover);
-    border-color: var(--accent);
-  }
-
-  .scope-btn.selected {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .scope-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .loading,
-  .empty {
-    color: var(--text-secondary);
-    padding: var(--space-6);
-    text-align: center;
-  }
-
-  .password-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .password-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-4);
-    background: var(--bg-secondary);
-    border-radius: var(--radius-lg);
-    gap: var(--space-4);
-  }
-
-  .password-info {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-
-  .password-name {
-    font-weight: var(--font-medium);
-  }
-
-  .password-meta {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--space-2);
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .scope-badge {
-    font-size: var(--text-xs);
-    padding: var(--space-1) var(--space-2);
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    color: var(--text-secondary);
-  }
-
-  .scope-badge.full {
-    background: var(--success-bg);
-    border-color: var(--success-border);
-    color: var(--success-text);
-  }
-
-  .controller-badge {
-    font-size: var(--text-xs);
-    padding: var(--space-1) var(--space-2);
-    background: var(--accent-muted);
-    border: 1px solid var(--accent);
-    border-radius: var(--radius-sm);
-    color: var(--accent);
-    cursor: help;
-  }
-
-  .date {
-    color: var(--text-secondary);
-  }
-
-  .delete-btn {
-    flex-shrink: 0;
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-sm);
-    background: transparent;
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-  }
-
-  .delete-btn:hover:not(:disabled) {
-    background: var(--error-bg);
-  }
-
-  .delete-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  @media (max-width: 500px) {
-    .password-item {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .delete-btn {
-      width: 100%;
-    }
-
-    .password-display {
-      flex-direction: column;
-    }
-  }
-</style>
diff --git a/frontend/src/components/dashboard/SettingsContent.svelte b/frontend/src/components/dashboard/SettingsContent.svelte
index ead11c5..4208965 100644
--- a/frontend/src/components/dashboard/SettingsContent.svelte
+++ b/frontend/src/components/dashboard/SettingsContent.svelte
@@ -382,7 +382,7 @@
         {#if emailUpdateAuthorized}
           <p class="hint success">{$_('settings.emailUpdateAuthorized')}</p>
         {:else}
-          <div class="field">
+          <div>
             <label for="email-token">{$_('settings.verificationCode')}</label>
             <input
               id="email-token"
@@ -394,7 +394,7 @@
             <p class="hint">{$_('settings.emailTokenHint')}</p>
           </div>
         {/if}
-        <div class="field">
+        <div>
           <label for="new-email">{$_('settings.newEmail')}</label>
           <input
             id="new-email"
@@ -420,7 +420,7 @@
       </form>
     {:else}
       <form onsubmit={(e) => { e.preventDefault(); handleRequestEmailUpdate() }}>
-        <div class="field">
+        <div>
           <label for="new-email">{$_('settings.newEmail')}</label>
           <input
             id="new-email"
@@ -472,7 +472,7 @@
           </div>
         </div>
         <form onsubmit={handleUpdateHandle}>
-          <div class="field">
+          <div>
             <label for="new-handle-byo">{$_('settings.yourDomain')}</label>
             <input id="new-handle-byo" type="text" bind:value={newHandle} placeholder={$_('settings.yourDomainPlaceholder')} disabled={handleLoading} required />
           </div>
@@ -483,7 +483,7 @@
       </div>
     {:else}
       <form onsubmit={handleUpdateHandle}>
-        <div class="field">
+        <div>
           <label for="new-handle">{$_('settings.newHandle')}</label>
           <HandleInput
             id="new-handle"
@@ -529,10 +529,10 @@
                 <span class="backup-size">{formatBytes(backup.sizeBytes)}</span>
               </div>
               <div class="backup-item-actions">
-                <button class="small" onclick={() => handleDownloadBackup(backup.id, backup.repoRev)}>
+                <button class="sm" onclick={() => handleDownloadBackup(backup.id, backup.repoRev)}>
                   {$_('settings.backups.download')}
                 </button>
-                <button class="small danger" onclick={() => handleDeleteBackup(backup.id)}>
+                <button class="sm danger-outline" onclick={() => handleDeleteBackup(backup.id)}>
                   {$_('settings.backups.delete')}
                 </button>
               </div>
@@ -586,7 +586,7 @@
     <p class="warning-text">{$_('settings.deleteWarning')}</p>
     {#if deleteTokenSent}
       <form onsubmit={handleConfirmDelete}>
-        <div class="field">
+        <div>
           <label for="delete-token">{$_('settings.confirmationCode')}</label>
           <input
             id="delete-token"
@@ -597,7 +597,7 @@
             required
           />
         </div>
-        <div class="field">
+        <div>
           <label for="delete-password">{$_('settings.yourPassword')}</label>
           <input
             id="delete-password"
@@ -624,303 +624,3 @@
     {/if}
   </section>
 </div>
-
-<style>
-  .settings {
-    max-width: var(--width-lg);
-  }
-
-  section {
-    background: var(--bg-secondary);
-    padding: var(--space-5);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-5);
-  }
-
-  section h3 {
-    margin: 0 0 var(--space-3) 0;
-    font-size: var(--text-base);
-  }
-
-  .current {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    margin: 0 0 var(--space-3) 0;
-  }
-
-  .language-select {
-    width: 100%;
-  }
-
-  .field {
-    margin-bottom: var(--space-3);
-  }
-
-  .field label {
-    display: block;
-    margin-bottom: var(--space-1);
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-  }
-
-  .actions {
-    display: flex;
-    gap: var(--space-2);
-    margin-top: var(--space-3);
-  }
-
-  .tabs {
-    display: flex;
-    gap: var(--space-1);
-    margin-bottom: var(--space-4);
-  }
-
-  .tab {
-    flex: 1;
-    padding: var(--space-2) var(--space-4);
-    background: transparent;
-    border: 1px solid var(--border-color);
-    cursor: pointer;
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .tab:first-child {
-    border-radius: var(--radius-md) 0 0 var(--radius-md);
-  }
-
-  .tab:last-child {
-    border-radius: 0 var(--radius-md) var(--radius-md) 0;
-  }
-
-  .tab.active {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .loading,
-  .empty {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    margin-bottom: var(--space-4);
-  }
-
-  .backup-list {
-    list-style: none;
-    padding: 0;
-    margin: 0 0 var(--space-4) 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .backup-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-3);
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-  }
-
-  .backup-info {
-    display: flex;
-    gap: var(--space-3);
-    font-size: var(--text-sm);
-  }
-
-  .backup-date {
-    font-weight: var(--font-medium);
-  }
-
-  .backup-size {
-    color: var(--text-secondary);
-  }
-
-  .backup-actions {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-4);
-    gap: var(--space-3);
-    flex-wrap: wrap;
-  }
-
-  .backup-toggle {
-    margin-bottom: var(--space-3);
-  }
-
-  .backup-toggle .toggle-label {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    cursor: pointer;
-    font-size: var(--text-sm);
-    white-space: nowrap;
-  }
-
-  .backup-toggle .toggle-label input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-  }
-
-  .backup-item-actions {
-    display: flex;
-    gap: var(--space-2);
-  }
-
-  .restore-section {
-    margin-top: var(--space-5);
-    padding-top: var(--space-4);
-    border-top: 1px solid var(--border-color);
-  }
-
-  .restore-section h4 {
-    margin: 0 0 var(--space-2) 0;
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-  }
-
-  .restore-section .hint {
-    margin-bottom: var(--space-3);
-  }
-
-  .restore-form {
-    display: flex;
-    gap: var(--space-2);
-    flex-wrap: wrap;
-  }
-
-  .restore-form input[type="file"] {
-    flex: 1;
-    min-width: 200px;
-  }
-
-  .restore-preview {
-    margin-top: var(--space-2);
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    display: flex;
-    gap: var(--space-2);
-    flex-wrap: wrap;
-  }
-
-  .restore-preview .file-name {
-    font-weight: var(--font-medium);
-    color: var(--text-primary);
-  }
-
-  .export-buttons {
-    display: flex;
-    gap: var(--space-2);
-    flex-wrap: wrap;
-  }
-
-  button.small {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-sm);
-  }
-
-  .danger-zone {
-    border: 1px solid var(--error-border);
-  }
-
-  .danger-zone h3 {
-    color: var(--error-text);
-  }
-
-  .warning-text {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    margin: 0 0 var(--space-4) 0;
-  }
-
-  button.danger {
-    background: var(--error-text);
-    border: 1px solid var(--error-text);
-    color: white;
-  }
-
-  button.danger:hover:not(:disabled) {
-    background: var(--error-border);
-  }
-
-  button.danger:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .hint {
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-    margin: var(--space-1) 0 0 0;
-  }
-
-  .hint.warning {
-    color: var(--warning-text);
-  }
-
-  .hint.success {
-    color: var(--success-text);
-    background: var(--success-bg);
-    padding: var(--space-2);
-    border-radius: var(--radius-md);
-    margin-bottom: var(--space-3);
-  }
-
-  .byo-handle {
-    margin-top: var(--space-3);
-  }
-
-  .verification-info {
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    padding: var(--space-4);
-    margin-bottom: var(--space-4);
-  }
-
-  .verification-info h4 {
-    margin: 0 0 var(--space-2) 0;
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-  }
-
-  .verification-info h5 {
-    margin: var(--space-3) 0 var(--space-1) 0;
-    font-size: var(--text-xs);
-    font-weight: var(--font-medium);
-    color: var(--text-secondary);
-  }
-
-  .verification-info p {
-    margin: var(--space-1) 0;
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-  }
-
-  .method {
-    margin-top: var(--space-3);
-    padding-top: var(--space-3);
-    border-top: 1px solid var(--border-color);
-  }
-
-  .method:first-of-type {
-    margin-top: var(--space-2);
-    padding-top: 0;
-    border-top: none;
-  }
-
-  code.record {
-    display: block;
-    background: var(--bg-input);
-    padding: var(--space-2);
-    border-radius: var(--radius-md);
-    font-size: var(--text-xs);
-    word-break: break-all;
-    margin: var(--space-1) 0;
-  }
-</style>