atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/file-upload/file-upload.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -28,11 +29,11 @@
 }
 
 :host(.is-sideload) {
-  background: white;
+  background: var(--bg-primary, white);
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border-default, #e5e7eb);
 }
 
 .fu-label {
@@ -58,7 +59,7 @@
   margin: 0;
   font-size: 28px;
   font-weight: 500;
-  color: #111827;
+  color: var(--text-primary, #111827);
   flex: 1;
 }
 
@@ -71,7 +72,7 @@
 }
 
 .fu-sideload-zone {
-  border: 2px dashed #e5e7eb;
+  border: 2px dashed var(--border-strong, #e5e7eb);
   border-radius: 12px;
   padding: 16px;
   display: flex;
@@ -79,16 +80,16 @@
   justify-content: center;
   gap: 12px;
   cursor: pointer;
-  background: #fdfdfd;
+  background: var(--bg-secondary, #fdfdfd);
   transition: all 0.2s;
 }
 .fu-sideload-zone:hover, .fu-sideload-zone.is-dragging {
-  border-color: #10b981;
-  background: #f0fdf4;
+  border-color: var(--color-primary, #10b981);
+  background: rgba(16, 185, 129, 0.05);
 }
 .fu-sideload-zone span {
   font-size: 15px;
-  color: #4b5563;
+  color: var(--text-secondary, #4b5563);
 }
 
 .fu-browse-pill {
@@ -133,7 +134,7 @@
 .fu-file-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   padding: 16px 32px;
   max-height: 400px;
   overflow-y: auto;
@@ -145,63 +146,171 @@
 .fu-file-item {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 14px 20px;
-  border: 1px solid #e5e7eb;
-  border-radius: 14px;
-  background: white;
-  transition: transform 0.2s;
+  gap: 14px;
+  padding: 12px 16px;
+  border: 1px solid var(--border-default, #e5e7eb);
+  border-radius: 12px;
+  background: var(--bg-primary, white);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+}
+.fu-file-item:hover {
+  border-color: var(--border-strong, #d1d5db);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 .fu-file-item.is-error {
-  background: #fff1f2;
+  background: var(--bg-primary, #fff1f2);
   border-color: #fecaca;
 }
+.fu-file-item.is-error:hover {
+  border-color: var(--color-error, #ef4444);
+}
+.fu-file-item.is-success {
+  border-color: var(--color-success, #10b981);
+  background: var(--bg-primary, #fcfdfc);
+}
+.fu-file-item.is-success:hover {
+  border-color: var(--color-success, #10b981);
+}
 
-.fu-sideload-item-icon {
+.fu-file-icon-wrapper {
+  width: 42px;
+  height: 42px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  transition: all 0.2s;
 }
 
 .fu-file-info {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.fu-file-name-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .fu-file-name {
-  display: block;
-  font-size: 15px;
-  font-weight: 600;
-  color: #1f2937;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary, #111827);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
 }
 
-.fu-file-meta {
-  font-size: 13px;
+.fu-file-status {
+  flex-shrink: 0;
+}
+
+.fu-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.fu-status-badge.is-success {
+  background: rgba(16, 185, 129, 0.08);
+  color: #10b981;
+}
+.fu-status-badge.is-uploading {
+  background: rgba(59, 130, 246, 0.08);
+  color: #3b82f6;
+}
+.fu-status-badge.is-pending {
+  background: rgba(107, 114, 128, 0.08);
   color: #6b7280;
-  margin-top: 2px;
+}
+.fu-status-badge.is-validating {
+  background: rgba(245, 158, 11, 0.08);
+  color: #f59e0b;
+}
+.fu-status-badge.is-error {
+  background: rgba(239, 68, 68, 0.08);
+  color: #ef4444;
+}
+
+.fu-spinner-dot {
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  border-radius: 50%;
+  animation: fu-pulse 1.2s infinite ease-in-out;
+}
+
+@keyframes fu-pulse {
+  0%, 100% {
+    transform: scale(0.6);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+.fu-file-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary, #6b7280);
+}
+
+.fu-file-size {
+  font-weight: 500;
 }
 
-.fu-item-error-msg {
+.fu-file-error-msg {
   color: #ef4444;
-  font-weight: 700;
-  background: rgba(239, 68, 68, 0.08);
-  padding: 1px 6px;
-  border-radius: 4px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  animation: fu-shake 0.3s ease-in-out;
 }
 
+@keyframes fu-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-2px);
+  }
+  75% {
+    transform: translateX(2px);
+  }
+}
 .fu-remove {
   color: #9ca3af !important;
+  opacity: 0.8;
+  transition: all 0.2s !important;
 }
 .fu-remove:hover {
   color: #ef4444 !important;
+  opacity: 1;
+  transform: scale(1.05);
 }
 
 /* Sideload Footer */
 .fu-sideload-footer {
   padding: 24px 32px;
-  background: #f9fafb;
-  border-top: 1px solid #e5e7eb;
+  background: var(--bg-secondary, #f9fafb);
+  border-top: 1px solid var(--border-default, #e5e7eb);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -240,4 +349,1226 @@
 
 .fu-input-hidden {
   display: none;
+}
+
+/* ── Clickable file-row affordance ─────────────────────────────────── */
+.fu-file-item.is-clickable {
+  cursor: pointer;
+}
+.fu-file-item.is-clickable:hover {
+  background: var(--bg-secondary, #f9fafb);
+  border-radius: 10px;
+  box-shadow: inset 0 0 0 1.5px var(--border-default, #e5e7eb);
+}
+
+/* ── Dropzone queue badge ───────────────────────────────────────────── */
+.fu-zone-has-files {
+  border-color: var(--color-primary, #10b981);
+}
+
+.fu-zone-queue-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 6px 14px;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1.5px solid rgba(16, 185, 129, 0.35);
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-primary-text, #047857);
+  cursor: pointer;
+  transition: background 0.15s, box-shadow 0.15s;
+  z-index: 1;
+}
+.fu-zone-queue-badge:hover {
+  background: rgba(16, 185, 129, 0.18);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+}
+
+.fu-zone-queue-view {
+  opacity: 0.75;
+  font-weight: 700;
+  margin-left: 2px;
+}
+
+/* ── Button/Compact "View Queue" pill ──────────────────────────────── */
+.fu-view-queue-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: var(--bg-secondary, #f3f4f6);
+  border: 1.5px solid var(--border-default, #e5e7eb);
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #374151);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.fu-view-queue-btn:hover {
+  background: rgba(16, 185, 129, 0.08);
+  border-color: var(--color-primary, #10b981);
+  color: var(--color-primary-text, #047857);
+}
+
+/* ── Queue management dialog ───────────────────────────────────────── */
+.fu-queue-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 99998;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fu-fade-in 0.15s ease;
+}
+
+.fu-queue-dialog {
+  background: var(--bg-primary, #ffffff);
+  border-radius: 20px;
+  width: min(560px, 100vw - 32px);
+  /* Use dvh so mobile browser chrome is accounted for */
+  max-height: min(88dvh, 88vh, 680px);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06);
+  /* clip instead of hidden so stacking context doesn't swallow the footer */
+  overflow: clip;
+  animation: fu-dialog-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.fu-queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--border-default, #e5e7eb);
+  flex-shrink: 0;
+}
+
+.fu-queue-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ── Auto/Manual mode badge ─────────────────────────────────────────── */
+.fu-upload-mode-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+.fu-upload-mode-badge.is-auto {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--color-primary-text, #047857);
+  border: 1px solid rgba(16, 185, 129, 0.25);
+}
+.fu-upload-mode-badge.is-manual {
+  background: rgba(99, 102, 241, 0.1);
+  color: #4f46e5;
+  border: 1px solid rgba(99, 102, 241, 0.25);
+}
+
+/* ── Manual upload call-to-action banner ────────────────────────────── */
+.fu-queue-manual-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: rgba(99, 102, 241, 0.06);
+  border-bottom: 1px solid rgba(99, 102, 241, 0.15);
+  font-size: 13px;
+  color: var(--text-secondary, #4b5563);
+  flex-shrink: 0;
+}
+.fu-queue-manual-banner strong {
+  color: #4f46e5;
+  font-weight: 700;
+}
+
+/* Manual mode — Upload button accent in footer */
+.fu-queue-dialog--manual .fu-queue-footer {
+  background: rgba(99, 102, 241, 0.03);
+}
+
+/* ── Emoji/text upload icon fallback ────────────────────────────────── */
+.fu-upload-icon-text {
+  font-size: 36px;
+  line-height: 1;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   INLINE VARIANT — minimal icon + text button
+   ══════════════════════════════════════════════════════════════════════ */
+.fu-inline-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 12px 6px 9px;
+  background: transparent;
+  border: 1.5px solid var(--border-default, #e2e8f0);
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #374151);
+  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
+  position: relative;
+  white-space: nowrap;
+  user-select: none;
+}
+.fu-inline-trigger:hover:not(.fu-inline-disabled) {
+  background: var(--bg-secondary, #f1f5f9);
+  border-color: var(--color-primary, #10b981);
+  color: var(--color-primary, #10b981);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+.fu-inline-trigger:active:not(.fu-inline-disabled) {
+  background: rgba(16, 185, 129, 0.08);
+  box-shadow: none;
+}
+.fu-inline-trigger.fu-inline-active {
+  border-color: var(--color-primary, #10b981);
+  color: var(--color-primary, #10b981);
+  background: rgba(16, 185, 129, 0.05);
+}
+.fu-inline-trigger.fu-inline-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.fu-inline-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.fu-inline-label {
+  line-height: 1.2;
+}
+
+/* Badge showing queued file count — click opens the queue dialog */
+.fu-inline-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 20px;
+  background: var(--color-primary, #10b981);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.15s;
+}
+.fu-inline-badge:hover {
+  background: #059669;
+  transform: scale(1.1);
+}
+
+.fu-queue-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary, #111827);
+}
+
+.fu-queue-count-pill {
+  padding: 2px 10px;
+  border-radius: 20px;
+  background: rgba(16, 185, 129, 0.12);
+  color: var(--color-primary-text, #047857);
+  font-size: 12px;
+  font-weight: 700;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.fu-queue-errors {
+  padding: 10px 20px;
+  border-bottom: 1px solid rgba(239, 68, 68, 0.25);
+  background: rgba(254, 242, 242, 0.8);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex-shrink: 0;
+  /* Cap so many errors can't bury the footer */
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+.fu-queue-error-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ef4444;
+}
+
+.fu-queue-summary {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 20px;
+  border-bottom: 1px solid var(--border-default, #e5e7eb);
+  background: var(--bg-secondary, #f9fafb);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.fu-queue-summary-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary, #6b7280);
+}
+.fu-queue-summary-stat.is-auto {
+  color: #3b82f6;
+}
+.fu-queue-summary-stat.is-complete {
+  color: #10b981;
+}
+
+.fu-qs-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.fu-qs-dot.success {
+  background: #10b981;
+}
+.fu-qs-dot.pending {
+  background: #6366f1;
+}
+.fu-qs-dot.error {
+  background: #ef4444;
+}
+
+.fu-queue-list {
+  flex: 1;
+  /* Critical: allows flex to shrink the list below content height */
+  /* so the footer is never pushed out of the dialog */
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fu-queue-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 40px 0;
+  color: var(--text-muted, #9ca3af);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.fu-queue-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 14px 20px 18px;
+  border-top: 1px solid var(--border-default, #e5e7eb);
+  background: var(--bg-secondary, #f9fafb);
+  flex-shrink: 0;
+  /* Guarantee footer always has room even when overflowing */
+  position: relative;
+  z-index: 1;
+}
+
+.fu-queue-footer-left,
+.fu-queue-footer-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ── File preview dialog ────────────────────────────────────────────── */
+.fu-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fu-fade-in 0.15s ease;
+}
+
+@keyframes fu-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.fu-dialog {
+  background: var(--bg-primary, #ffffff);
+  border-radius: 18px;
+  width: min(480px, 100vw - 32px);
+  max-height: min(90vh, 640px);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  animation: fu-dialog-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes fu-dialog-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92) translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.fu-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--border-default, #e5e7eb);
+}
+
+.fu-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary, #111827);
+}
+
+/* Preview area */
+.fu-dialog-preview {
+  background: var(--bg-secondary, #f8fafc);
+  border-bottom: 1px solid var(--border-default, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  max-height: 260px;
+  overflow: hidden;
+  padding: 16px;
+}
+
+.fu-dialog-image {
+  max-width: 100%;
+  max-height: 228px;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.fu-dialog-file-icon {
+  width: 96px;
+  height: 96px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Info section */
+.fu-dialog-info {
+  padding: 20px 24px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.fu-dialog-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary, #111827);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fu-dialog-meta {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.fu-dialog-meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--text-secondary, #6b7280);
+  font-weight: 500;
+}
+
+.fu-dialog-status-row {
+  display: flex;
+}
+
+.fu-dialog-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.fu-dialog-badge.is-success {
+  background: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+}
+.fu-dialog-badge.is-error {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+.fu-dialog-badge.is-pending {
+  background: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+.fu-dialog-badge.is-uploading {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+.fu-dialog-badge.is-validating {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.fu-dialog-progress {
+  height: 6px;
+  background: var(--border-default, #e5e7eb);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-top: 4px;
+}
+
+.fu-dialog-progress-fill {
+  height: 100%;
+  background: var(--color-primary, #10b981);
+  border-radius: 3px;
+  transition: width 0.4s ease;
+}
+
+/* Footer */
+.fu-dialog-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px 16px;
+  border-top: 1px solid var(--border-default, #e5e7eb);
+}
+
+.fu-dialog-nav-count {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary, #6b7280);
+  min-width: 40px;
+  text-align: center;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   DARK MODE — supports both data-theme attribute and OS preference
+   ══════════════════════════════════════════════════════════════════════ */
+/* Apply via data-theme attribute (explicit toggle) */
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Backdrops ── */
+}
+:host-context(.dark) .fu-queue-backdrop,
+:host-context(.dark) .fu-dialog-backdrop,
+:host-context([data-theme=dark]) .fu-queue-backdrop,
+:host-context([data-theme=dark]) .fu-dialog-backdrop,
+:host(.dark) .fu-queue-backdrop,
+:host(.dark) .fu-dialog-backdrop,
+:host([data-theme=dark]) .fu-queue-backdrop,
+:host([data-theme=dark]) .fu-dialog-backdrop {
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(6px);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Dialog cards ── */
+}
+:host-context(.dark) .fu-queue-dialog,
+:host-context(.dark) .fu-dialog,
+:host-context([data-theme=dark]) .fu-queue-dialog,
+:host-context([data-theme=dark]) .fu-dialog,
+:host(.dark) .fu-queue-dialog,
+:host(.dark) .fu-dialog,
+:host([data-theme=dark]) .fu-queue-dialog,
+:host([data-theme=dark]) .fu-dialog {
+  background: var(--bg-primary, #1e293b);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Inline trigger ── */
+}
+:host-context(.dark) .fu-inline-trigger,
+:host-context([data-theme=dark]) .fu-inline-trigger,
+:host(.dark) .fu-inline-trigger,
+:host([data-theme=dark]) .fu-inline-trigger {
+  border-color: var(--border-default, #334155);
+  color: var(--text-primary, #e2e8f0);
+}
+:host-context(.dark) .fu-inline-trigger:hover:not(.fu-inline-disabled),
+:host-context([data-theme=dark]) .fu-inline-trigger:hover:not(.fu-inline-disabled),
+:host(.dark) .fu-inline-trigger:hover:not(.fu-inline-disabled),
+:host([data-theme=dark]) .fu-inline-trigger:hover:not(.fu-inline-disabled) {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--color-primary, #10b981);
+  color: #34d399;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
+}
+:host-context(.dark) .fu-inline-trigger.fu-inline-active,
+:host-context([data-theme=dark]) .fu-inline-trigger.fu-inline-active,
+:host(.dark) .fu-inline-trigger.fu-inline-active,
+:host([data-theme=dark]) .fu-inline-trigger.fu-inline-active {
+  border-color: #34d399;
+  color: #34d399;
+  background: rgba(52, 211, 153, 0.06);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Mode badge ── */
+}
+:host-context(.dark) .fu-upload-mode-badge.is-auto,
+:host-context([data-theme=dark]) .fu-upload-mode-badge.is-auto,
+:host(.dark) .fu-upload-mode-badge.is-auto,
+:host([data-theme=dark]) .fu-upload-mode-badge.is-auto {
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
+  border-color: rgba(52, 211, 153, 0.3);
+}
+:host-context(.dark) .fu-upload-mode-badge.is-manual,
+:host-context([data-theme=dark]) .fu-upload-mode-badge.is-manual,
+:host(.dark) .fu-upload-mode-badge.is-manual,
+:host([data-theme=dark]) .fu-upload-mode-badge.is-manual {
+  background: rgba(99, 102, 241, 0.15);
+  color: #a5b4fc;
+  border-color: rgba(165, 180, 252, 0.3);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Manual banner ── */
+}
+:host-context(.dark) .fu-queue-manual-banner,
+:host-context([data-theme=dark]) .fu-queue-manual-banner,
+:host(.dark) .fu-queue-manual-banner,
+:host([data-theme=dark]) .fu-queue-manual-banner {
+  background: rgba(99, 102, 241, 0.08);
+  border-bottom-color: rgba(99, 102, 241, 0.2);
+  color: var(--text-secondary, #94a3b8);
+}
+:host-context(.dark) .fu-queue-manual-banner strong,
+:host-context([data-theme=dark]) .fu-queue-manual-banner strong,
+:host(.dark) .fu-queue-manual-banner strong,
+:host([data-theme=dark]) .fu-queue-manual-banner strong {
+  color: #a5b4fc;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Headers ── */
+}
+:host-context(.dark) .fu-queue-header,
+:host-context(.dark) .fu-dialog-header,
+:host-context([data-theme=dark]) .fu-queue-header,
+:host-context([data-theme=dark]) .fu-dialog-header,
+:host(.dark) .fu-queue-header,
+:host(.dark) .fu-dialog-header,
+:host([data-theme=dark]) .fu-queue-header,
+:host([data-theme=dark]) .fu-dialog-header {
+  border-bottom-color: var(--border-default, #334155);
+}
+:host-context(.dark) .fu-queue-title,
+:host-context(.dark) .fu-dialog-title,
+:host-context([data-theme=dark]) .fu-queue-title,
+:host-context([data-theme=dark]) .fu-dialog-title,
+:host(.dark) .fu-queue-title,
+:host(.dark) .fu-dialog-title,
+:host([data-theme=dark]) .fu-queue-title,
+:host([data-theme=dark]) .fu-dialog-title {
+  color: var(--text-primary, #f1f5f9);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Count pill ── */
+}
+:host-context(.dark) .fu-queue-count-pill,
+:host-context([data-theme=dark]) .fu-queue-count-pill,
+:host(.dark) .fu-queue-count-pill,
+:host([data-theme=dark]) .fu-queue-count-pill {
+  background: rgba(16, 185, 129, 0.18);
+  color: #34d399;
+  border-color: rgba(52, 211, 153, 0.3);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Error banner ── */
+}
+:host-context(.dark) .fu-queue-errors,
+:host-context([data-theme=dark]) .fu-queue-errors,
+:host(.dark) .fu-queue-errors,
+:host([data-theme=dark]) .fu-queue-errors {
+  background: rgba(239, 68, 68, 0.1);
+  border-bottom-color: rgba(239, 68, 68, 0.25);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Summary bar ── */
+}
+:host-context(.dark) .fu-queue-summary,
+:host-context([data-theme=dark]) .fu-queue-summary,
+:host(.dark) .fu-queue-summary,
+:host([data-theme=dark]) .fu-queue-summary {
+  background: var(--bg-secondary, #0f172a);
+  border-bottom-color: var(--border-default, #334155);
+}
+:host-context(.dark) .fu-queue-summary-stat,
+:host-context([data-theme=dark]) .fu-queue-summary-stat,
+:host(.dark) .fu-queue-summary-stat,
+:host([data-theme=dark]) .fu-queue-summary-stat {
+  color: var(--text-secondary, #94a3b8);
+}
+:host-context(.dark) .fu-queue-summary-stat.is-auto,
+:host-context([data-theme=dark]) .fu-queue-summary-stat.is-auto,
+:host(.dark) .fu-queue-summary-stat.is-auto,
+:host([data-theme=dark]) .fu-queue-summary-stat.is-auto {
+  color: #93c5fd;
+}
+:host-context(.dark) .fu-queue-summary-stat.is-complete,
+:host-context([data-theme=dark]) .fu-queue-summary-stat.is-complete,
+:host(.dark) .fu-queue-summary-stat.is-complete,
+:host([data-theme=dark]) .fu-queue-summary-stat.is-complete {
+  color: #34d399;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── File list ── */
+}
+:host-context(.dark) .fu-queue-list,
+:host-context([data-theme=dark]) .fu-queue-list,
+:host(.dark) .fu-queue-list,
+:host([data-theme=dark]) .fu-queue-list {
+  scrollbar-color: var(--border-default, #334155) transparent;
+  scrollbar-width: thin;
+}
+:host-context(.dark) .fu-queue-empty,
+:host-context([data-theme=dark]) .fu-queue-empty,
+:host(.dark) .fu-queue-empty,
+:host([data-theme=dark]) .fu-queue-empty {
+  color: var(--text-muted, #64748b);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── File rows ── */
+}
+:host-context(.dark) .fu-file-item,
+:host-context([data-theme=dark]) .fu-file-item,
+:host(.dark) .fu-file-item,
+:host([data-theme=dark]) .fu-file-item {
+  border-bottom-color: var(--border-default, #1e293b);
+}
+:host-context(.dark) .fu-file-item.is-clickable:hover,
+:host-context([data-theme=dark]) .fu-file-item.is-clickable:hover,
+:host(.dark) .fu-file-item.is-clickable:hover,
+:host([data-theme=dark]) .fu-file-item.is-clickable:hover {
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 0 0 1.5px var(--border-default, #334155);
+}
+:host-context(.dark) .fu-file-name,
+:host-context([data-theme=dark]) .fu-file-name,
+:host(.dark) .fu-file-name,
+:host([data-theme=dark]) .fu-file-name {
+  color: var(--text-primary, #f1f5f9);
+}
+:host-context(.dark) .fu-file-meta,
+:host-context([data-theme=dark]) .fu-file-meta,
+:host(.dark) .fu-file-meta,
+:host([data-theme=dark]) .fu-file-meta {
+  color: var(--text-secondary, #94a3b8);
+}
+:host-context(.dark) .fu-file-error-msg,
+:host-context([data-theme=dark]) .fu-file-error-msg,
+:host(.dark) .fu-file-error-msg,
+:host([data-theme=dark]) .fu-file-error-msg {
+  color: #f87171;
+}
+:host-context(.dark) .fu-remove,
+:host-context([data-theme=dark]) .fu-remove,
+:host(.dark) .fu-remove,
+:host([data-theme=dark]) .fu-remove {
+  color: #64748b !important;
+}
+:host-context(.dark) .fu-remove:hover,
+:host-context([data-theme=dark]) .fu-remove:hover,
+:host(.dark) .fu-remove:hover,
+:host([data-theme=dark]) .fu-remove:hover {
+  color: #f87171 !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Footer ── */
+}
+:host-context(.dark) .fu-queue-footer,
+:host-context([data-theme=dark]) .fu-queue-footer,
+:host(.dark) .fu-queue-footer,
+:host([data-theme=dark]) .fu-queue-footer {
+  background: var(--bg-secondary, #0f172a);
+  border-top-color: var(--border-default, #334155);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Status badges (in file list rows) ── */
+}
+:host-context(.dark) .fu-status-badge.is-success,
+:host-context([data-theme=dark]) .fu-status-badge.is-success,
+:host(.dark) .fu-status-badge.is-success,
+:host([data-theme=dark]) .fu-status-badge.is-success {
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
+}
+:host-context(.dark) .fu-status-badge.is-error,
+:host-context([data-theme=dark]) .fu-status-badge.is-error,
+:host(.dark) .fu-status-badge.is-error,
+:host([data-theme=dark]) .fu-status-badge.is-error {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+:host-context(.dark) .fu-status-badge.is-pending,
+:host-context([data-theme=dark]) .fu-status-badge.is-pending,
+:host(.dark) .fu-status-badge.is-pending,
+:host([data-theme=dark]) .fu-status-badge.is-pending {
+  background: rgba(99, 102, 241, 0.15);
+  color: #a5b4fc;
+}
+:host-context(.dark) .fu-status-badge.is-uploading,
+:host-context([data-theme=dark]) .fu-status-badge.is-uploading,
+:host(.dark) .fu-status-badge.is-uploading,
+:host([data-theme=dark]) .fu-status-badge.is-uploading {
+  background: rgba(59, 130, 246, 0.15);
+  color: #93c5fd;
+}
+:host-context(.dark) .fu-status-badge.is-validating,
+:host-context([data-theme=dark]) .fu-status-badge.is-validating,
+:host(.dark) .fu-status-badge.is-validating,
+:host([data-theme=dark]) .fu-status-badge.is-validating {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fcd34d;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Preview dialog ── */
+}
+:host-context(.dark) .fu-dialog-preview,
+:host-context([data-theme=dark]) .fu-dialog-preview,
+:host(.dark) .fu-dialog-preview,
+:host([data-theme=dark]) .fu-dialog-preview {
+  background: var(--bg-secondary, #0f172a);
+  border-bottom-color: var(--border-default, #334155);
+}
+:host-context(.dark) .fu-dialog-image,
+:host-context([data-theme=dark]) .fu-dialog-image,
+:host(.dark) .fu-dialog-image,
+:host([data-theme=dark]) .fu-dialog-image {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+:host-context(.dark) .fu-dialog-name,
+:host-context([data-theme=dark]) .fu-dialog-name,
+:host(.dark) .fu-dialog-name,
+:host([data-theme=dark]) .fu-dialog-name {
+  color: var(--text-primary, #f1f5f9);
+}
+:host-context(.dark) .fu-dialog-meta-item,
+:host-context([data-theme=dark]) .fu-dialog-meta-item,
+:host(.dark) .fu-dialog-meta-item,
+:host([data-theme=dark]) .fu-dialog-meta-item {
+  color: var(--text-secondary, #94a3b8);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Preview dialog status badges ── */
+}
+:host-context(.dark) .fu-dialog-badge.is-success,
+:host-context([data-theme=dark]) .fu-dialog-badge.is-success,
+:host(.dark) .fu-dialog-badge.is-success,
+:host([data-theme=dark]) .fu-dialog-badge.is-success {
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
+}
+:host-context(.dark) .fu-dialog-badge.is-error,
+:host-context([data-theme=dark]) .fu-dialog-badge.is-error,
+:host(.dark) .fu-dialog-badge.is-error,
+:host([data-theme=dark]) .fu-dialog-badge.is-error {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+:host-context(.dark) .fu-dialog-badge.is-pending,
+:host-context([data-theme=dark]) .fu-dialog-badge.is-pending,
+:host(.dark) .fu-dialog-badge.is-pending,
+:host([data-theme=dark]) .fu-dialog-badge.is-pending {
+  background: rgba(99, 102, 241, 0.15);
+  color: #a5b4fc;
+}
+:host-context(.dark) .fu-dialog-badge.is-uploading,
+:host-context([data-theme=dark]) .fu-dialog-badge.is-uploading,
+:host(.dark) .fu-dialog-badge.is-uploading,
+:host([data-theme=dark]) .fu-dialog-badge.is-uploading {
+  background: rgba(59, 130, 246, 0.15);
+  color: #93c5fd;
+}
+:host-context(.dark) .fu-dialog-badge.is-validating,
+:host-context([data-theme=dark]) .fu-dialog-badge.is-validating,
+:host(.dark) .fu-dialog-badge.is-validating,
+:host([data-theme=dark]) .fu-dialog-badge.is-validating {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fcd34d;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Progress bars ── */
+}
+:host-context(.dark) .fu-progress-bar,
+:host-context(.dark) .fu-dialog-progress,
+:host-context([data-theme=dark]) .fu-progress-bar,
+:host-context([data-theme=dark]) .fu-dialog-progress,
+:host(.dark) .fu-progress-bar,
+:host(.dark) .fu-dialog-progress,
+:host([data-theme=dark]) .fu-progress-bar,
+:host([data-theme=dark]) .fu-dialog-progress {
+  background: rgba(255, 255, 255, 0.08);
+}
+:host-context(.dark) .fu-dialog-footer,
+:host-context([data-theme=dark]) .fu-dialog-footer,
+:host(.dark) .fu-dialog-footer,
+:host([data-theme=dark]) .fu-dialog-footer {
+  border-top-color: var(--border-default, #334155);
+}
+:host-context(.dark) .fu-dialog-nav-count,
+:host-context([data-theme=dark]) .fu-dialog-nav-count,
+:host(.dark) .fu-dialog-nav-count,
+:host([data-theme=dark]) .fu-dialog-nav-count {
+  color: var(--text-secondary, #94a3b8);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Trigger badges ── */
+}
+:host-context(.dark) .fu-zone-queue-badge,
+:host-context([data-theme=dark]) .fu-zone-queue-badge,
+:host(.dark) .fu-zone-queue-badge,
+:host([data-theme=dark]) .fu-zone-queue-badge {
+  background: rgba(16, 185, 129, 0.12);
+  border-color: rgba(52, 211, 153, 0.3);
+  color: #34d399;
+}
+:host-context(.dark) .fu-zone-queue-badge:hover,
+:host-context([data-theme=dark]) .fu-zone-queue-badge:hover,
+:host(.dark) .fu-zone-queue-badge:hover,
+:host([data-theme=dark]) .fu-zone-queue-badge:hover {
+  background: rgba(16, 185, 129, 0.22);
+}
+:host-context(.dark) .fu-view-queue-btn,
+:host-context([data-theme=dark]) .fu-view-queue-btn,
+:host(.dark) .fu-view-queue-btn,
+:host([data-theme=dark]) .fu-view-queue-btn {
+  background: var(--bg-secondary, #1e293b);
+  border-color: var(--border-default, #334155);
+  color: var(--text-primary, #f1f5f9);
+}
+:host-context(.dark) .fu-view-queue-btn:hover,
+:host-context([data-theme=dark]) .fu-view-queue-btn:hover,
+:host(.dark) .fu-view-queue-btn:hover,
+:host([data-theme=dark]) .fu-view-queue-btn:hover {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: #34d399;
+  color: #34d399;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* ── Dropzone ── */
+}
+:host-context(.dark) .fu-zone-has-files,
+:host-context([data-theme=dark]) .fu-zone-has-files,
+:host(.dark) .fu-zone-has-files,
+:host([data-theme=dark]) .fu-zone-has-files {
+  background: rgba(16, 185, 129, 0.05);
+}
+
+/* Apply via OS preference */
+@media (prefers-color-scheme: dark) {
+  /* ── Backdrops ── */
+  .fu-queue-backdrop,
+  .fu-dialog-backdrop {
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(6px);
+  }
+  /* ── Dialog cards ── */
+  .fu-queue-dialog,
+  .fu-dialog {
+    background: var(--bg-primary, #1e293b);
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  }
+  /* ── Inline trigger ── */
+  .fu-inline-trigger {
+    border-color: var(--border-default, #334155);
+    color: var(--text-primary, #e2e8f0);
+  }
+  .fu-inline-trigger:hover:not(.fu-inline-disabled) {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: var(--color-primary, #10b981);
+    color: #34d399;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
+  }
+  .fu-inline-trigger.fu-inline-active {
+    border-color: #34d399;
+    color: #34d399;
+    background: rgba(52, 211, 153, 0.06);
+  }
+  /* ── Mode badge ── */
+  .fu-upload-mode-badge.is-auto {
+    background: rgba(16, 185, 129, 0.15);
+    color: #34d399;
+    border-color: rgba(52, 211, 153, 0.3);
+  }
+  .fu-upload-mode-badge.is-manual {
+    background: rgba(99, 102, 241, 0.15);
+    color: #a5b4fc;
+    border-color: rgba(165, 180, 252, 0.3);
+  }
+  /* ── Manual banner ── */
+  .fu-queue-manual-banner {
+    background: rgba(99, 102, 241, 0.08);
+    border-bottom-color: rgba(99, 102, 241, 0.2);
+    color: var(--text-secondary, #94a3b8);
+  }
+  .fu-queue-manual-banner strong {
+    color: #a5b4fc;
+  }
+  /* ── Headers ── */
+  .fu-queue-header,
+  .fu-dialog-header {
+    border-bottom-color: var(--border-default, #334155);
+  }
+  .fu-queue-title,
+  .fu-dialog-title {
+    color: var(--text-primary, #f1f5f9);
+  }
+  /* ── Count pill ── */
+  .fu-queue-count-pill {
+    background: rgba(16, 185, 129, 0.18);
+    color: #34d399;
+    border-color: rgba(52, 211, 153, 0.3);
+  }
+  /* ── Error banner ── */
+  .fu-queue-errors {
+    background: rgba(239, 68, 68, 0.1);
+    border-bottom-color: rgba(239, 68, 68, 0.25);
+  }
+  /* ── Summary bar ── */
+  .fu-queue-summary {
+    background: var(--bg-secondary, #0f172a);
+    border-bottom-color: var(--border-default, #334155);
+  }
+  .fu-queue-summary-stat {
+    color: var(--text-secondary, #94a3b8);
+  }
+  .fu-queue-summary-stat.is-auto {
+    color: #93c5fd;
+  }
+  .fu-queue-summary-stat.is-complete {
+    color: #34d399;
+  }
+  /* ── File list ── */
+  .fu-queue-list {
+    scrollbar-color: var(--border-default, #334155) transparent;
+    scrollbar-width: thin;
+  }
+  .fu-queue-empty {
+    color: var(--text-muted, #64748b);
+  }
+  /* ── File rows ── */
+  .fu-file-item {
+    border-bottom-color: var(--border-default, #1e293b);
+  }
+  .fu-file-item.is-clickable:hover {
+    background: rgba(255, 255, 255, 0.05);
+    box-shadow: inset 0 0 0 1.5px var(--border-default, #334155);
+  }
+  .fu-file-name {
+    color: var(--text-primary, #f1f5f9);
+  }
+  .fu-file-meta {
+    color: var(--text-secondary, #94a3b8);
+  }
+  .fu-file-error-msg {
+    color: #f87171;
+  }
+  .fu-remove {
+    color: #64748b !important;
+  }
+  .fu-remove:hover {
+    color: #f87171 !important;
+  }
+  /* ── Footer ── */
+  .fu-queue-footer {
+    background: var(--bg-secondary, #0f172a);
+    border-top-color: var(--border-default, #334155);
+  }
+  /* ── Status badges (in file list rows) ── */
+  .fu-status-badge.is-success {
+    background: rgba(16, 185, 129, 0.15);
+    color: #34d399;
+  }
+  .fu-status-badge.is-error {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+  }
+  .fu-status-badge.is-pending {
+    background: rgba(99, 102, 241, 0.15);
+    color: #a5b4fc;
+  }
+  .fu-status-badge.is-uploading {
+    background: rgba(59, 130, 246, 0.15);
+    color: #93c5fd;
+  }
+  .fu-status-badge.is-validating {
+    background: rgba(245, 158, 11, 0.15);
+    color: #fcd34d;
+  }
+  /* ── Preview dialog ── */
+  .fu-dialog-preview {
+    background: var(--bg-secondary, #0f172a);
+    border-bottom-color: var(--border-default, #334155);
+  }
+  .fu-dialog-image {
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  }
+  .fu-dialog-name {
+    color: var(--text-primary, #f1f5f9);
+  }
+  .fu-dialog-meta-item {
+    color: var(--text-secondary, #94a3b8);
+  }
+  /* ── Preview dialog status badges ── */
+  .fu-dialog-badge.is-success {
+    background: rgba(16, 185, 129, 0.15);
+    color: #34d399;
+  }
+  .fu-dialog-badge.is-error {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+  }
+  .fu-dialog-badge.is-pending {
+    background: rgba(99, 102, 241, 0.15);
+    color: #a5b4fc;
+  }
+  .fu-dialog-badge.is-uploading {
+    background: rgba(59, 130, 246, 0.15);
+    color: #93c5fd;
+  }
+  .fu-dialog-badge.is-validating {
+    background: rgba(245, 158, 11, 0.15);
+    color: #fcd34d;
+  }
+  /* ── Progress bars ── */
+  .fu-progress-bar,
+  .fu-dialog-progress {
+    background: rgba(255, 255, 255, 0.08);
+  }
+  .fu-dialog-footer {
+    border-top-color: var(--border-default, #334155);
+  }
+  .fu-dialog-nav-count {
+    color: var(--text-secondary, #94a3b8);
+  }
+  /* ── Trigger badges ── */
+  .fu-zone-queue-badge {
+    background: rgba(16, 185, 129, 0.12);
+    border-color: rgba(52, 211, 153, 0.3);
+    color: #34d399;
+  }
+  .fu-zone-queue-badge:hover {
+    background: rgba(16, 185, 129, 0.22);
+  }
+  .fu-view-queue-btn {
+    background: var(--bg-secondary, #1e293b);
+    border-color: var(--border-default, #334155);
+    color: var(--text-primary, #f1f5f9);
+  }
+  .fu-view-queue-btn:hover {
+    background: rgba(16, 185, 129, 0.1);
+    border-color: #34d399;
+    color: #34d399;
+  }
+  /* ── Dropzone ── */
+  .fu-zone-has-files {
+    background: rgba(16, 185, 129, 0.05);
+  }
 }