From 9e243b0400832ec7027312172167f6e4538c45bd Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Thu, 14 Aug 2025 16:41:19 +0800
Subject: [PATCH] :bug: Fix(custom): fix delete button css

---
 src/renderer/manage/pages/BucketPage.vue     |    1 +
 src/renderer/manage/pages/css/BucketPage.css | 2548 +++++++++---------
 2 files changed, 1275 insertions(+), 1274 deletions(-)

diff --git a/src/renderer/manage/pages/BucketPage.vue b/src/renderer/manage/pages/BucketPage.vue
index 5d527973..6ef378bc 100644
--- a/src/renderer/manage/pages/BucketPage.vue
+++ b/src/renderer/manage/pages/BucketPage.vue
@@ -509,6 +509,7 @@
                 <div class="file-info-section">
                   <div
                     class="file-name"
+                    :title="item.fileName"
                     @click.stop="copyToClipboard(item.fileName ?? '')"
                   >
                     {{ formatFileName(item.fileName ?? '', 25) }}
diff --git a/src/renderer/manage/pages/css/BucketPage.css b/src/renderer/manage/pages/css/BucketPage.css
index bea91f52..8b9ce9c6 100644
--- a/src/renderer/manage/pages/css/BucketPage.css
+++ b/src/renderer/manage/pages/css/BucketPage.css
@@ -1,1274 +1,1274 @@
-/* BucketPage Styles */
-
-.bucket-container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  gap: 1rem;
-  overflow: hidden;
-}
-
-/* Header Card */
-.bucket-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  transition: var(--transition-medium);
-  box-shadow: var(--shadow-sm);
-}
-
-.bucket-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-border);
-}
-
-.header-card {
-  flex-shrink: 0;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border-secondary);
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-  min-width: 200px;
-}
-
-.custom-domain-input {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  transition: var(--transition-fast);
-  width: 200px;
-}
-
-.custom-domain-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-.custom-domain-select {
-  position: relative;
-  width: 200px;
-}
-
-.select-input {
-  padding: 0.5rem 2rem 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  transition: var(--transition-fast);
-  width: 100%;
-  cursor: pointer;
-}
-
-.select-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-.select-arrow {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  pointer-events: none;
-  transition: var(--transition-fast);
-}
-
-.select-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  z-index: 1000;
-  max-height: 200px;
-  overflow-y: auto;
-  margin-top: 0.25rem;
-}
-
-.select-option {
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-}
-
-.select-option:hover {
-  background: var(--color-surface-elevated);
-}
-
-.custom-domain-link {
-  color: var(--color-accent);
-  text-decoration: none;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.custom-domain-link:hover {
-  color: var(--color-accent-hover);
-  text-decoration: underline;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.action-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  border: none;
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  position: relative;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.action-button:hover {
-  background: var(--color-accent);
-  color: white;
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.action-button.primary {
-  background: var(--color-blue-common);
-  color: white;
-}
-
-.action-button.primary:hover {
-  background: var(--color-accent-hover);
-}
-
-.action-button.secondary {
-  background: var(--color-surface-elevated);
-  border: 1px solid var(--color-border);
-}
-
-.action-button.secondary:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.action-button.danger {
-  background: var(--color-error);
-  color: white;
-}
-
-.action-button.danger:hover {
-  background: var(--color-error-hover);
-}
-
-.action-icon {
-  width: 18px;
-  height: 18px;
-}
-
-.search-input {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  transition: var(--transition-fast);
-  width: 200px;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-/* Breadcrumb */
-.breadcrumb-card {
-  flex-shrink: 0;
-}
-
-.breadcrumb-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  flex-wrap: wrap;
-}
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.breadcrumb-item:hover {
-  color: var(--color-accent);
-}
-
-.breadcrumb-item.current {
-  color: var(--color-text-primary);
-  font-weight: 500;
-  cursor: default;
-}
-
-.breadcrumb-separator {
-  color: var(--color-text-tertiary);
-  margin: 0 0.25rem;
-}
-
-/* Control Panel */
-.control-panel-card {
-  flex-shrink: 0;
-}
-
-.control-panel {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.control-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-}
-
-.file-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.file-info-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.control-center {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.control-right {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.view-toggle {
-  display: flex;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
-.view-toggle-button {
-  padding: 0.5rem;
-  border: none;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.view-toggle-button.active {
-  background: var(--color-accent);
-  color: white;
-}
-
-.view-toggle-button:not(.active):hover {
-  background: var(--color-surface);
-}
-
-.dropdown {
-  position: relative;
-}
-
-.dropdown-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-}
-
-.dropdown-button:hover {
-  border-color: var(--color-accent);
-  background: var(--color-surface);
-}
-
-.dropdown-content {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  z-index: 1000;
-  min-width: 150px;
-  margin-top: 0.25rem;
-}
-
-.dropdown-item {
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-.dropdown-item:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-accent);
-}
-
-.page-input {
-  padding: 0.25rem 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  width: 80px;
-  text-align: center;
-}
-
-.page-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-}
-
-/* Content Area */
-.content-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.content-area {
-  flex: 1;
-  padding: 0.75rem;
-  overflow: hidden;
-}
-
-/* Virtual Scroller Container */
-.virtual-scroller-container {
-  height: 100%;
-  width: 100%;
-}
-
-/* File Grid Item */
-.file-grid-item {
-  display: flex;
-  flex-direction: column;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  transition: var(--transition-medium);
-  cursor: pointer;
-  height: 220px;
-}
-
-.file-grid-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.file-grid-item.selected {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-.file-preview {
-  position: relative;
-  aspect-ratio: 16/9;
-  overflow: hidden;
-  background: var(--color-surface-elevated);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.file-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transition: var(--transition-medium);
-}
-
-.file-icon {
-  width: 48px;
-  height: 48px;
-  color: var(--color-text-tertiary);
-}
-
-.file-info-section {
-  flex: 1;
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.file-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: 0.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.file-name:hover {
-  color: var(--color-accent);
-}
-
-.file-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  margin-bottom: 0.75rem;
-}
-
-.file-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.file-action-group {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.file-action-button {
-  padding: 0.375rem;
-  border: none;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-}
-
-.file-action-button:hover {
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  transform: translateY(-1px);
-}
-
-.file-action-button.danger:hover {
-  color: var(--color-error);
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.file-checkbox {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  position: relative;
-}
-
-.file-checkbox:checked {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-.file-checkbox:checked::after {
-  content: '✓';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  font-size: 10px;
-  font-weight: bold;
-}
-
-/* File List Item */
-.file-list-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  transition: var(--transition-medium);
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-}
-
-.file-list-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.file-list-item.selected {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-.file-list-checkbox {
-  flex-shrink: 0;
-  margin-right: 0.25rem;
-}
-
-.file-list-icon {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.file-list-info {
-  flex: 1;
-  min-width: 0;
-  margin-right: 1rem;
-}
-
-.file-list-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: 0.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.file-list-name:hover {
-  color: var(--color-accent);
-}
-
-.file-list-meta {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.file-list-actions {
-  display: flex;
-  gap: 0.25rem;
-  flex-shrink: 0;
-}
-
-/* File Actions Dropdown */
-.file-actions-dropdown {
-  position: relative;
-}
-
-.file-actions-dropdown-content {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  z-index: 1000;
-  min-width: 140px;
-  margin-top: 0.25rem;
-  overflow: hidden;
-}
-
-.file-actions-dropdown-item {
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  border-bottom: 1px solid var(--color-border-secondary);
-}
-
-.file-actions-dropdown-item:last-child {
-  border-bottom: none;
-}
-
-.file-actions-dropdown-item:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-accent);
-}
-
-/* Modal Overlay */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2000;
-}
-
-.modal-container {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-xl);
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.modal-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.modal-close {
-  padding: 0.5rem;
-  border: none;
-  background: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-close:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-}
-
-.modal-content {
-  flex: 1;
-  background: var(--color-background-primary);
-  padding: 1.5rem;
-  overflow-y: auto;
-}
-
-.modal-footer {
-  background: var(--color-background-primary);
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1rem 1.5rem;
-  border-top: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-/* Form Elements */
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: 0.5rem;
-}
-
-.form-input {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  transition: var(--transition-fast);
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-.form-textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-.form-select {
-  width: 100%;
-  padding: 0.75rem 2rem 0.75rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  cursor: pointer;
-  appearance: none;
-}
-
-.form-select:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-/* Switch */
-.switch-container {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.switch-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--color-border);
-  transition: 0.3s;
-  border-radius: 24px;
-}
-
-.switch-slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: 0.3s;
-  border-radius: 50%;
-}
-
-input:checked + .switch-slider {
-  background-color: var(--color-accent);
-}
-
-input:checked + .switch-slider:before {
-  transform: translateX(20px);
-}
-
-.switch-label {
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-/* Drawer */
-.drawer-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 2000;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.drawer-container {
-  background: var(--color-surface);
-  width: 60%;
-  max-width: 800px;
-  height: 100%;
-  box-shadow: var(--shadow-xl);
-  display: flex;
-  flex-direction: column;
-  transform: translateX(100%);
-  transition: transform 0.3s ease-out;
-}
-
-.drawer-overlay.open .drawer-container {
-  transform: translateX(0);
-}
-
-.drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.drawer-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.drawer-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-}
-
-/* Upload Area */
-.upload-area {
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 3rem 2rem;
-  text-align: center;
-  cursor: pointer;
-  transition: var(--transition-medium);
-  background: var(--color-surface-elevated);
-}
-
-.upload-area:hover,
-.upload-area.dragover {
-  border-color: var(--color-accent);
-  background: var(--color-accent-soft);
-}
-
-.upload-area-text {
-  font-size: 1.125rem;
-  color: var(--color-text-secondary);
-  margin-bottom: 0.5rem;
-}
-
-.upload-area-subtext {
-  font-size: 0.875rem;
-  color: var(--color-text-tertiary);
-}
-
-/* Tabs */
-.tabs-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.tabs-header {
-  display: flex;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.tab-button {
-  padding: 0.75rem 1.5rem;
-  border: none;
-  background: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-bottom: 2px solid transparent;
-  position: relative;
-}
-
-.tab-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.tab-button.active {
-  color: var(--color-accent);
-  border-bottom-color: var(--color-accent);
-}
-
-.tab-badge {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  background: var(--color-accent);
-  color: white;
-  font-size: 0.625rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 10px;
-  min-width: 16px;
-  text-align: center;
-}
-
-.tab-content {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.tab-panel {
-  flex: 1;
-  padding: 1rem;
-  overflow-y: auto;
-}
-
-/* Progress Bar */
-.progress-bar {
-  width: 100%;
-  height: 8px;
-  background: var(--color-surface-elevated);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: var(--color-accent);
-  border-radius: 4px;
-  transition: width 0.3s ease;
-}
-
-/* Badge */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-radius: var(--radius-sm);
-}
-
-.badge.success {
-  background: var(--color-success-soft);
-  color: var(--color-success);
-}
-
-.badge.error {
-  background: var(--color-error-soft);
-  color: var(--color-error);
-}
-
-.badge.warning {
-  background: var(--color-warning-soft);
-  color: var(--color-warning);
-}
-
-/* Tooltip */
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip-text {
-  visibility: hidden;
-  width: max-content;
-  max-width: 200px;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  text-align: center;
-  border-radius: var(--radius-md);
-  padding: 0.5rem;
-  position: absolute;
-  z-index: 1000;
-  top: 125%;
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0;
-  transition: opacity 0.3s;
-  font-size: 0.75rem;
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-md);
-}
-
-.tooltip:hover .tooltip-text {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* File Actions Dropdown */
-.file-actions-dropdown {
-  position: relative;
-}
-
-.file-actions-dropdown-content {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  z-index: 1000;
-  min-width: 120px;
-  margin-top: 0.25rem;
-}
-
-.file-actions-dropdown-item {
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.file-actions-dropdown-item:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-accent);
-}
-
-/* Empty State */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem 2rem;
-  text-align: center;
-}
-
-.empty-state-icon {
-  width: 64px;
-  height: 64px;
-  color: var(--color-text-tertiary);
-  margin-bottom: 1rem;
-}
-
-.empty-state-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: 0.5rem;
-}
-
-.empty-state-description {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .bucket-container {
-    padding: 0.5rem;
-  }
-  
-  .card-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .header-left {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-  
-  .control-panel {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-  
-  .file-grid-item {
-    height: 240px;
-  }
-  
-  .drawer-container {
-    width: 90%;
-  }
-}
-
-/* Transitions */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-
-.slide-enter-active, .slide-leave-active {
-  transition: transform 0.3s ease;
-}
-
-.slide-enter-from, .slide-leave-to {
-  transform: translateX(100%);
-}
-
-/* Fullscreen Styles */
-.content-fullscreen {
-  padding: 0;
-  gap: 0;
-}
-
-.content-fullscreen .content-card {
-  flex: 1;
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-  display: flex;
-  flex-direction: column;
-}
-
-.fullscreen-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  background: var(--color-surface);
-  border-bottom: 1px solid var(--color-border-secondary);
-  flex-shrink: 0;
-  z-index: 100;
-}
-
-.fullscreen-header-left {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 200px;
-}
-
-.fullscreen-header-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-}
-
-.fullscreen-header-right {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex: 1;
-  justify-content: flex-end;
-  min-width: 200px;
-}
-
-.fullscreen-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.content-fullscreen .content-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.content-fullscreen .virtual-scroller-container {
-  flex: 1;
-  overflow: hidden;
-}
-
-/* Responsive adjustments for fullscreen */
-@media (max-width: 768px) {
-  .fullscreen-header {
-    flex-direction: column;
-    gap: 0.75rem;
-    padding: 1rem;
-  }
-  
-  .fullscreen-header-left,
-  .fullscreen-header-center,
-  .fullscreen-header-right {
-    width: 100%;
-    min-width: unset;
-  }
-  
-  .fullscreen-header-right {
-    justify-content: space-between;
-  }
-}
+/* BucketPage Styles */
+
+.bucket-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  gap: 1rem;
+  overflow: hidden;
+}
+
+/* Header Card */
+.bucket-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-xl);
+  transition: var(--transition-medium);
+  box-shadow: var(--shadow-sm);
+}
+
+.bucket-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border);
+}
+
+.header-card {
+  flex-shrink: 0;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border-secondary);
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+  min-width: 200px;
+}
+
+.custom-domain-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  transition: var(--transition-fast);
+  width: 200px;
+}
+
+.custom-domain-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+.custom-domain-select {
+  position: relative;
+  width: 200px;
+}
+
+.select-input {
+  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  transition: var(--transition-fast);
+  width: 100%;
+  cursor: pointer;
+}
+
+.select-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+.select-arrow {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-secondary);
+  pointer-events: none;
+  transition: var(--transition-fast);
+}
+
+.select-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 0.25rem;
+}
+
+.select-option {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+}
+
+.select-option:hover {
+  background: var(--color-surface-elevated);
+}
+
+.custom-domain-link {
+  color: var(--color-accent);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.custom-domain-link:hover {
+  color: var(--color-accent-hover);
+  text-decoration: underline;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.action-button:hover {
+  background: var(--color-accent);
+  color: white;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.action-button.primary {
+  background: var(--color-blue-common);
+  color: white;
+}
+
+.action-button.primary:hover {
+  background: var(--color-accent-hover);
+}
+
+.action-button.secondary {
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+}
+
+.action-button.secondary:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.action-button.danger {
+  background: var(--color-error);
+  color: white;
+}
+
+.action-button.danger:hover {
+  background: var(--color-error);
+}
+
+.action-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.search-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  transition: var(--transition-fast);
+  width: 200px;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+/* Breadcrumb */
+.breadcrumb-card {
+  flex-shrink: 0;
+}
+
+.breadcrumb-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  flex-wrap: wrap;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.breadcrumb-item:hover {
+  color: var(--color-accent);
+}
+
+.breadcrumb-item.current {
+  color: var(--color-text-primary);
+  font-weight: 500;
+  cursor: default;
+}
+
+.breadcrumb-separator {
+  color: var(--color-text-tertiary);
+  margin: 0 0.25rem;
+}
+
+/* Control Panel */
+.control-panel-card {
+  flex-shrink: 0;
+}
+
+.control-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.control-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.file-info-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.control-center {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.control-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.view-toggle {
+  display: flex;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.view-toggle-button {
+  padding: 0.5rem;
+  border: none;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.view-toggle-button.active {
+  background: var(--color-accent);
+  color: white;
+}
+
+.view-toggle-button:not(.active):hover {
+  background: var(--color-surface);
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+}
+
+.dropdown-button:hover {
+  border-color: var(--color-accent);
+  background: var(--color-surface);
+}
+
+.dropdown-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 1000;
+  min-width: 150px;
+  margin-top: 0.25rem;
+}
+
+.dropdown-item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+}
+
+.dropdown-item:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-accent);
+}
+
+.page-input {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  width: 80px;
+  text-align: center;
+}
+
+.page-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+/* Content Area */
+.content-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.content-area {
+  flex: 1;
+  padding: 0.75rem;
+  overflow: hidden;
+}
+
+/* Virtual Scroller Container */
+.virtual-scroller-container {
+  height: 100%;
+  width: 100%;
+}
+
+/* File Grid Item */
+.file-grid-item {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: var(--transition-medium);
+  cursor: pointer;
+  height: 220px;
+}
+
+.file-grid-item:hover {
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.file-grid-item.selected {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.file-preview {
+  position: relative;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  background: var(--color-surface-elevated);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: var(--transition-medium);
+}
+
+.file-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--color-text-tertiary);
+}
+
+.file-info-section {
+  flex: 1;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.file-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.file-name:hover {
+  color: var(--color-accent);
+}
+
+.file-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.75rem;
+}
+
+.file-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-action-group {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.file-action-button {
+  padding: 0.375rem;
+  border: none;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+}
+
+.file-action-button:hover {
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  transform: translateY(-1px);
+}
+
+.file-action-button.danger:hover {
+  color: var(--color-error);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.file-checkbox {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+}
+
+.file-checkbox:checked {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.file-checkbox:checked::after {
+  content: '✓';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+/* File List Item */
+.file-list-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
+  transition: var(--transition-medium);
+  cursor: pointer;
+  width: 100%;
+  margin: 0;
+}
+
+.file-list-item:hover {
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.file-list-item.selected {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.file-list-checkbox {
+  flex-shrink: 0;
+  margin-right: 0.25rem;
+}
+
+.file-list-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-list-info {
+  flex: 1;
+  min-width: 0;
+  margin-right: 1rem;
+}
+
+.file-list-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.file-list-name:hover {
+  color: var(--color-accent);
+}
+
+.file-list-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.file-list-actions {
+  display: flex;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+/* File Actions Dropdown */
+.file-actions-dropdown {
+  position: relative;
+}
+
+.file-actions-dropdown-content {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 1000;
+  min-width: 140px;
+  margin-top: 0.25rem;
+  overflow: hidden;
+}
+
+.file-actions-dropdown-item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+
+.file-actions-dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.file-actions-dropdown-item:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-accent);
+}
+
+/* Modal Overlay */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.modal-container {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-xl);
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.modal-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.modal-close {
+  padding: 0.5rem;
+  border: none;
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-close:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.modal-content {
+  flex: 1;
+  background: var(--color-background-primary);
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  background: var(--color-background-primary);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+/* Form Elements */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  transition: var(--transition-fast);
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+.form-select {
+  width: 100%;
+  padding: 0.75rem 2rem 0.75rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  appearance: none;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+/* Switch */
+.switch-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-border);
+  transition: 0.3s;
+  border-radius: 24px;
+}
+
+.switch-slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.3s;
+  border-radius: 50%;
+}
+
+input:checked + .switch-slider {
+  background-color: var(--color-accent);
+}
+
+input:checked + .switch-slider:before {
+  transform: translateX(20px);
+}
+
+.switch-label {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+}
+
+/* Drawer */
+.drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 2000;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.drawer-container {
+  background: var(--color-surface);
+  width: 60%;
+  max-width: 800px;
+  height: 100%;
+  box-shadow: var(--shadow-xl);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.drawer-overlay.open .drawer-container {
+  transform: translateX(0);
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.drawer-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.drawer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+/* Upload Area */
+.upload-area {
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 3rem 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: var(--transition-medium);
+  background: var(--color-surface-elevated);
+}
+
+.upload-area:hover,
+.upload-area.dragover {
+  border-color: var(--color-accent);
+  background: var(--color-accent-soft);
+}
+
+.upload-area-text {
+  font-size: 1.125rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.upload-area-subtext {
+  font-size: 0.875rem;
+  color: var(--color-text-tertiary);
+}
+
+/* Tabs */
+.tabs-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tabs-header {
+  display: flex;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.tab-button {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  position: relative;
+}
+
+.tab-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.tab-button.active {
+  color: var(--color-accent);
+  border-bottom-color: var(--color-accent);
+}
+
+.tab-badge {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  background: var(--color-accent);
+  color: white;
+  font-size: 0.625rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  min-width: 16px;
+  text-align: center;
+}
+
+.tab-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-panel {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+/* Progress Bar */
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--color-surface-elevated);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--color-accent);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+/* Badge */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+}
+
+.badge.success {
+  background: var(--color-success-soft);
+  color: var(--color-success);
+}
+
+.badge.error {
+  background: var(--color-error-soft);
+  color: var(--color-error);
+}
+
+.badge.warning {
+  background: var(--color-warning-soft);
+  color: var(--color-warning);
+}
+
+/* Tooltip */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-text {
+  visibility: hidden;
+  width: max-content;
+  max-width: 200px;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  text-align: center;
+  border-radius: var(--radius-md);
+  padding: 0.5rem;
+  position: absolute;
+  z-index: 1000;
+  top: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 0.75rem;
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* File Actions Dropdown */
+.file-actions-dropdown {
+  position: relative;
+}
+
+.file-actions-dropdown-content {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 1000;
+  min-width: 120px;
+  margin-top: 0.25rem;
+}
+
+.file-actions-dropdown-item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.file-actions-dropdown-item:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-accent);
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
+}
+
+.empty-state-icon {
+  width: 64px;
+  height: 64px;
+  color: var(--color-text-tertiary);
+  margin-bottom: 1rem;
+}
+
+.empty-state-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.empty-state-description {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .bucket-container {
+    padding: 0.5rem;
+  }
+  
+  .card-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .header-left {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+  
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+  
+  .file-grid-item {
+    height: 240px;
+  }
+  
+  .drawer-container {
+    width: 90%;
+  }
+}
+
+/* Transitions */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active, .slide-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.slide-enter-from, .slide-leave-to {
+  transform: translateX(100%);
+}
+
+/* Fullscreen Styles */
+.content-fullscreen {
+  padding: 0;
+  gap: 0;
+}
+
+.content-fullscreen .content-card {
+  flex: 1;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.fullscreen-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border-secondary);
+  flex-shrink: 0;
+  z-index: 100;
+}
+
+.fullscreen-header-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 200px;
+}
+
+.fullscreen-header-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.fullscreen-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  justify-content: flex-end;
+  min-width: 200px;
+}
+
+.fullscreen-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.content-fullscreen .content-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.content-fullscreen .virtual-scroller-container {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Responsive adjustments for fullscreen */
+@media (max-width: 768px) {
+  .fullscreen-header {
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+  
+  .fullscreen-header-left,
+  .fullscreen-header-center,
+  .fullscreen-header-right {
+    width: 100%;
+    min-width: unset;
+  }
+  
+  .fullscreen-header-right {
+    justify-content: space-between;
+  }
+}