fix: add --surface-subtle token, restore info grouping, and apply theme-aware favorite color

- Add --surface-subtle (oklch 3% opacity) to replace rgba(0,0,0,0.03)
- Fix info items, creator-info, civitai-view, modal-send-btn, header-actions
  to use --surface-subtle instead of --surface-hover
- Keep true hover states on --surface-hover
- Use light #d4a017 / dark #ffc107 for --favorite-color based on theme
- Replace hardcoded #ffc107 and #d4a017 with var(--favorite-color)

static/css/components/modal/_base.css

@@ -1,4 +1,4 @@
-/* modal 基础样式 */
+/* Modal base styles */
 .modal {
     display: none;
     position: fixed;
@@ -6,19 +6,19 @@
     left: 0;
     width: 100%;
     height: calc(100% - var(--header-height, 48px)); /* Adjust height to exclude header */
-    background: rgba(0, 0, 0, 0.2); /* 调整为更淡的半透明黑色 */
+    background: rgba(0, 0, 0, 0.2);
     z-index: var(--z-modal);
     overflow: auto; /* Change from hidden to auto to allow scrolling */
 }
 
-/* 当模态窗口打开时，禁止body滚动 */
+/* Prevent body scroll when modal is open */
 body.modal-open {
     position: fixed;
     width: 100%;
-    padding-right: var(--scrollbar-width, 0px); /* 补偿滚动条消失导致的页面偏移 */
+    padding-right: var(--scrollbar-width, 0px);
 }
 
-/* modal-content 样式 */
+/* Modal content styles */
 .modal-content {
     position: relative;
     max-width: 800px;
@@ -31,7 +31,7 @@ body.modal-open {
     border: 1px solid var(--lora-border);
     box-shadow: var(--shadow-md);
     overflow-y: auto;
-    overflow-x: hidden; /* 防止水平滚动条 */
+    overflow-x: hidden;
     scrollbar-gutter: stable both-edges; /* Reserve space to prevent layout shift when scrollbar toggles */
 }
 
@@ -39,10 +39,10 @@ body.modal-open {
     min-height: 480px;
 }
 
-/* 当 modal 打开时锁定 body */
+/* Lock body when modal is open */
 body.modal-open {
-    overflow: hidden !important; /* 覆盖 base.css 中的 scroll */
-    padding-right: var(--scrollbar-width, 8px); /* 使用滚动条宽度作为补偿 */
+    overflow: hidden !important;
+    padding-right: var(--scrollbar-width, 8px);
 }
 
 @keyframes modalFadeIn {
@@ -95,15 +95,20 @@ body.modal-open {
     color: white;
 }
 
-.cancel-btn:hover {
+.cancel-btn:hover,
+.cancel-btn:focus-visible {
     background: var(--lora-border);
 }
 
-.delete-btn:hover {
+.delete-btn:hover,
+.delete-btn:focus-visible {
     background: oklch(from var(--lora-error) l c h / 85%);
 }
 
-.exclude-btn:hover, .confirm-btn:hover {
+.exclude-btn:hover,
+.exclude-btn:focus-visible,
+.confirm-btn:hover,
+.confirm-btn:focus-visible {
     background: oklch(from var(--lora-accent, #4f46e5) l c h / 85%);
 }
 
@@ -127,23 +132,27 @@ body.modal-open {
     z-index: 10;
 }
 
-.close:hover {
+.close:hover,
+.close:focus-visible {
     opacity: 1;
+    outline: 2px solid var(--lora-accent);
+    outline-offset: 2px;
+    border-radius: var(--border-radius-xs);
 }
 
-/* 统一各个 section 的样式 */
+/* Unified section styles */
 .support-section,
 .changelog-section,
 .update-info,
 .info-item,
 .path-preview {
-    background: var(--surface-hover);
+    background: var(--surface-subtle);
     border: 1px solid var(--lora-border);
     border-radius: var(--border-radius-sm);
     padding: var(--space-2);
 }
 
-/* 深色主题统一样式 */
+/* Dark theme unified styles */
 [data-theme="dark"] .modal-content {
     background: var(--lora-surface);
     border: 1px solid var(--lora-border);
@@ -163,9 +172,11 @@ body.modal-open {
     font-size: 0.95em;
 }
 
-.primary-btn:hover {
+.primary-btn:hover,
+.primary-btn:focus-visible {
     background-color: oklch(from var(--lora-accent) l c h / 85%);
     color: var(--lora-text);
+    outline: none;
 }
 
 /* Secondary button styles */
@@ -183,9 +194,11 @@ body.modal-open {
     font-size: 0.95em;
 }
 
-.secondary-btn:hover {
+.secondary-btn:hover,
+.secondary-btn:focus-visible {
     background-color: var(--border-color);
     color: var(--text-color);
+    outline: none;
 }
 
 /* Disabled button styles */
@@ -246,14 +259,16 @@ button:disabled,
     font-size: 0.95em;
 }
 
-.danger-btn:hover {
+.danger-btn:hover,
+.danger-btn:focus-visible {
     background-color: oklch(from var(--lora-error) l c h / 85%);
     color: white;
+    outline: none;
 }
 
 /* Metadata archive status styles */
 .metadata-archive-status {
-    background: var(--surface-hover);
+    background: var(--surface-subtle);
     border: 1px solid var(--lora-border);
     border-radius: var(--border-radius-sm);
     padding: var(--space-2);
@@ -299,7 +314,7 @@ button:disabled,
 }
 
 .backup-status {
-    background: var(--surface-hover);
+    background: var(--surface-subtle);
     border: 1px solid var(--lora-border);
     border-radius: var(--border-radius-sm);
     padding: var(--space-3);
@@ -383,7 +398,7 @@ button:disabled,
 .backup-location-details {
     border: 1px solid var(--lora-border);
     border-radius: var(--border-radius-sm);
-    background: var(--surface-hover);
+    background: var(--surface-subtle);
 }
 
 .backup-location-details summary {
@@ -414,7 +429,7 @@ button:disabled,
     max-width: 100%;
     padding: 6px 8px;
     border-radius: var(--border-radius-sm);
-    background: var(--surface-hover);
+    background: var(--surface-subtle);
     color: var(--text-color);
     overflow-wrap: anywhere;
     word-break: break-word;
@@ -487,7 +502,7 @@ button:disabled,
 }
 
 #bulkDownloadMissingLorasModal .bulk-download-loras-preview {
-    background: var(--surface-hover);
+    background: var(--surface-subtle);
     border: 1px solid var(--lora-border);
     border-radius: var(--border-radius-sm);
     padding: var(--space-3);

static/css/components/modal/doctor-modal.css

@@ -48,8 +48,7 @@
     padding: var(--space-3);
     border-radius: var(--border-radius-sm);
     border: 1px solid var(--lora-border);
-    background: rgba(0, 0, 0, 0.03);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+    background: var(--surface-subtle);
 }
 
 .doctor-kicker {
@@ -128,7 +127,7 @@
 
 .doctor-issue-card {
     border: 1px solid rgba(0, 0, 0, 0.1);
-    background: rgba(0, 0, 0, 0.03);
+    background: var(--surface-subtle);
     border-radius: var(--border-radius-sm);
     padding: var(--space-3);
     box-shadow: none;
@@ -242,7 +241,7 @@
 
 [data-theme="dark"] .doctor-hero,
 [data-theme="dark"] .doctor-issue-card {
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--surface-subtle);
     border-color: var(--lora-border);
     box-shadow: none;
 }

static/css/components/modal/help-modal.css

@@ -303,5 +303,5 @@
 
 /* Dark theme adjustments */
 [data-theme="dark"] .video-container {
-  background-color: rgba(255, 255, 255, 0.03);
+  background-color: var(--surface-hover);
 }

static/css/components/modal/settings-modal.css

@@ -927,7 +927,7 @@ input:checked + .toggle-slider:before {
 
 /* Path Template Settings Styles */
 .template-preview {
-    background: rgba(0, 0, 0, 0.03);
+    background: var(--surface-subtle);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: var(--border-radius-xs);
     padding: var(--space-1);
@@ -939,7 +939,7 @@ input:checked + .toggle-slider:before {
 }
 
 [data-theme="dark"] .template-preview {
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--surface-subtle);
     border: 1px solid var(--lora-border);
 }
 

static/css/components/modal/support-modal.css

@@ -258,7 +258,7 @@
     color: white; /* Icon color changes to white on hover */
 }
 
-/* 增强hover状态的视觉反馈 */
+/* Enhanced hover visual feedback */
 .social-link:hover,
 .update-link:hover,
 .folder-item:hover {

static/css/components/modal/update-modal.css

@@ -171,7 +171,7 @@
 
 /* Update progress styles */
 .update-progress {
-    background: rgba(0, 0, 0, 0.03);
+    background: var(--surface-subtle);
     border: 1px solid var(--lora-border);
     border-radius: var(--border-radius-sm);
     padding: var(--space-2);
@@ -179,7 +179,7 @@
 }
 
 [data-theme="dark"] .update-progress {
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--surface-subtle);
 }
 
 .progress-info {
@@ -429,7 +429,7 @@
 }
 
 [data-theme="dark"] .banner-history-item {
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--surface-subtle);
 }
 
 .banner-history-title {