mbkbucket 3.8.3 → 4.0.1

package/lib/public/bucketadmin.css

@@ -1,98 +1,137 @@
 /* ==========================================================================
-   MBKBucket File Manager - Original Theme Palette + Gentelella v4 Layout
+   MBKBucket File Manager - Clean, Modern Storage Dashboard
+   Design System: Refined Slate & Deep Teal Palette
    ========================================================================== */
 
 :root {
+  /* Brand / Primary Palette */
   --primary-color-ml: #0f766e;
-  --primary-light-color-ml: #d7f4ee;
-  --primary-dark-color-ml: #0b4f4a;
-  --secondary-color-ml: #1f8f84;
-  --dark-color-ml: #1f2a2a;
-  --light-color-ml: #f4f7f3;
-  --gray-color-ml: #667c79;
-  --gray-light-color-ml: #dce8e3;
-  --danger-color-ml: #dc2626;
-  --warning-color-ml: #d97706;
-  --success-color-ml: #16a34a;
-  --info-color-ml: #3b82f6;
-
+  --primary-light-color-ml: #f0fdfa;
+  --primary-dark-color-ml: #115e59;
+  --secondary-color-ml: #14b8a6;
+  --dark-color-ml: #0f172a;
+  --light-color-ml: #f8fafc;
+  --gray-color-ml: #64748b;
+  --gray-light-color-ml: #e2e8f0;
+  --danger-color-ml: #ef4444;
+  --warning-color-ml: #f59e0b;
+  --success-color-ml: #10b981;
+  --info-color-ml: #0284c7;
+
+  /* Aliases */
   --primary: var(--primary-color-ml);
   --primary-lt: var(--primary-light-color-ml);
   --primary-dk: var(--primary-dark-color-ml);
-  --primary-hover: #0d635c;
-
-  --body-bg: var(--light-color-ml);
-  --bg-surface: rgba(255, 255, 255, 0.82);
-  --bg-surface-secondary: rgba(244, 247, 243, 0.85);
-  --bg-surface-tertiary: #e2ede8;
-
-  --border-color: rgba(15, 118, 110, 0.16);
-  --border-color-light: rgba(15, 118, 110, 0.08);
-
-  --text: var(--dark-color-ml);
-  --text-secondary: #425855;
-  --text-muted: var(--gray-color-ml);
-  --text-disabled: #a0b2af;
-
-  --blue: #066fd1;
-  --azure: #1f8f84;
-  --green: #16a34a;
+  --primary-hover: #134e4a;
+  --primary-active: #084c47;
+
+  /* Surfaces & Backgrounds */
+  --body-bg: #f8fafc;
+  --bg-surface: #ffffff;
+  --bg-surface-secondary: #f8fafc;
+  --bg-surface-tertiary: #f1f5f9;
+  --bg-surface-hover: #f1f5f9;
+
+  /* Borders */
+  --border-color: #e2e8f0;
+  --border-color-light: #f1f5f9;
+  --border-color-focus: #0f766e;
+
+  /* Text */
+  --text: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #64748b;
+  --text-disabled: #94a3b8;
+
+  /* Accent Colors */
+  --blue: #2563eb;
+  --azure: #0891b2;
+  --green: #10b981;
   --yellow: #d97706;
   --orange: #ea580c;
-  --red: #dc2626;
+  --red: #ef4444;
   --purple: #7c3aed;
   --cyan: #0f766e;
 
-  --green-lt: rgba(22, 163, 74, 0.12);
-  --red-lt: rgba(220, 38, 38, 0.1);
-  --yellow-lt: rgba(217, 119, 6, 0.12);
-  --blue-lt: rgba(6, 111, 209, 0.1);
-  --azure-lt: rgba(31, 143, 132, 0.12);
-  --purple-lt: rgba(124, 58, 237, 0.1);
-  --cyan-lt: rgba(15, 118, 110, 0.12);
+  /* Light Accent Tints */
+  --green-lt: #ecfdf5;
+  --red-lt: #fef2f2;
+  --yellow-lt: #fffbeb;
+  --blue-lt: #eff6ff;
+  --azure-lt: #ecfeff;
+  --purple-lt: #f5f3ff;
+  --cyan-lt: #f0fdfa;
 
+  /* Geometry */
   --radius-sm: 6px;
   --radius: 8px;
-  --radius-lg: 14px;
-  --radius-xl: 18px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
 
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
-  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
-  --shadow-md: 0 10px 15px -3px rgba(15, 118, 110, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
-  --shadow-lg: 0 20px 25px -5px rgba(15, 118, 110, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --shadow-dropdown: 0 12px 30px rgba(15, 42, 42, 0.14), 0 4px 10px rgba(0, 0, 0, 0.05);
+  /* Modern Subtle Shadows */
+  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
+  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
+  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
+  --shadow-dropdown: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
 
-  --font: "IBM Plex Sans", "Segoe UI", sans-serif;
-  --font-headings: "Sora", "Segoe UI", sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+  /* Fonts */
+  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
+  --font-headings: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
+  --font-mono: "Segoe UI Mono", "Cascadia Code", Consolas, "Courier New", monospace;
 }
 
-/* Base Layout & Page Header */
+/* ==========================================================================
+   Base Layout & Reset
+   ========================================================================== */
 .page-wrapper,
 .page-wrapper *,
 .page-wrapper *::before,
-.page-wrapper *::after {
+.page-wrapper *::after,
+.modal,
+.modal * {
   box-sizing: border-box;
 }
 
+body,
+button,
+input,
+optgroup,
+select,
+textarea,
+.page-wrapper,
+.modal,
+.modal-content,
+.info-card,
+.info-value,
+.info-label,
+.file-info-pane,
+.fm-context-menu,
+.toast-notification,
+.batch-bar-inner {
+  font-family: var(--font);
+}
+
 .page-wrapper {
   max-width: 1600px;
   margin: 0 auto;
   width: 100%;
-  max-width: 100%;
 }
 
+/* ==========================================================================
+   Page Header
+   ========================================================================== */
 .page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1.2rem;
-  padding: 0.9rem 1.3rem;
-  border: 1px solid rgba(255, 255, 255, 0.9);
-  border-radius: 1rem;
-  background: rgba(255, 255, 255, 0.74);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
+  margin-bottom: 1rem;
+  padding: 0.85rem 1.25rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: #ffffff;
+  box-shadow: var(--shadow-xs);
 }
 
 .page-header-row {
@@ -107,27 +146,33 @@
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--primary-color-ml);
-  margin-bottom: 2px;
+  letter-spacing: 0.06em;
+  color: var(--primary);
+  margin-bottom: 3px;
 }
 
 .page-title {
   font-family: var(--font-headings);
-  font-size: 1.45rem;
+  font-size: 1.35rem;
   font-weight: 700;
-  color: var(--dark-color-ml);
+  color: var(--text);
   margin: 0;
-  line-height: 1.2;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .page-actions {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
+  gap: 0.5rem;
 }
 
-/* Button System */
+/* ==========================================================================
+   Button System
+   ========================================================================== */
 .btn {
   display: inline-flex;
   align-items: center;
@@ -137,60 +182,80 @@
   font-size: 13px;
   font-weight: 600;
   line-height: 1.4;
-  padding: 7px 15px;
-  border-radius: var(--radius);
+  padding: 7px 14px;
+  border-radius: var(--radius-sm);
   border: 1px solid transparent;
   cursor: pointer;
-  transition: all 0.15s ease-in-out;
+  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
   text-decoration: none;
   white-space: nowrap;
+  user-select: none;
 }
 
 .btn svg {
   flex-shrink: 0;
 }
 
+.btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-light-color-ml), 0 0 0 4px var(--primary);
+}
+
 .btn-primary {
-  background: var(--primary-color-ml);
+  background: var(--primary);
   color: #ffffff;
-  border-color: var(--primary-color-ml);
-  box-shadow: 0 2px 4px rgba(15, 118, 110, 0.2);
+  border-color: var(--primary-dark-color-ml);
+  box-shadow: var(--shadow-xs);
 }
 
 .btn-primary:hover {
-  background: var(--primary-dark-color-ml);
-  border-color: var(--primary-dark-color-ml);
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
   color: #ffffff;
-  transform: translateY(-1px);
+}
+
+.btn-primary:active {
+  background: var(--primary-active);
 }
 
 .btn-outline {
-  background: rgba(255, 255, 255, 0.9);
-  color: var(--dark-color-ml);
+  background: #ffffff;
+  color: var(--text);
   border-color: var(--border-color);
+  box-shadow: var(--shadow-xs);
 }
 
 .btn-outline:hover {
-  background: var(--primary-light-color-ml);
-  color: var(--primary-dark-color-ml);
-  border-color: var(--primary-color-ml);
+  background: #f8fafc;
+  color: var(--text);
+  border-color: #cbd5e1;
+}
+
+.btn-outline:active {
+  background: #f1f5f9;
 }
 
 .btn-danger {
   background: var(--danger-color-ml);
   color: #ffffff;
   border-color: var(--danger-color-ml);
+  box-shadow: var(--shadow-xs);
 }
 
 .btn-danger:hover {
-  background: #b91c1c;
-  border-color: #b91c1c;
+  background: #dc2626;
+  border-color: #dc2626;
   color: #ffffff;
 }
 
+.btn-danger:active {
+  background: #b91c1c;
+}
+
 .btn-sm {
-  padding: 5px 11px;
+  padding: 5px 10px;
   font-size: 12px;
+  border-radius: var(--radius-sm);
 }
 
 .btn-icon {
@@ -202,28 +267,31 @@
   justify-content: center;
 }
 
-/* File Manager Card Layout */
+/* ==========================================================================
+   Main File Manager Card & Layout
+   ========================================================================== */
 .card.file-manager {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(14px);
-  border: 1px solid rgba(255, 255, 255, 0.9);
+  background: #ffffff;
+  border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
-  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
+  box-shadow: var(--shadow-sm);
   overflow: hidden;
 }
 
 .fm-layout {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
-  height: calc(100vh - 180px);
+  height: calc(100vh - 170px);
   min-height: 580px;
   max-height: 900px;
 }
 
-/* Left Sidebar Tree */
+/* ==========================================================================
+   Left Sidebar Tree (Explorer)
+   ========================================================================== */
 .fm-tree-wrap {
   border-right: 1px solid var(--border-color);
-  background: rgba(244, 247, 243, 0.65);
+  background: #f8fafc;
   display: flex;
   flex-direction: column;
   padding: 12px 10px;
@@ -231,7 +299,7 @@
 }
 
 .fm-tree-header {
-  padding: 4px 10px 8px;
+  padding: 4px 8px 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -242,8 +310,8 @@
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--primary-dark-color-ml);
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
 }
 
 .fm-tree {
@@ -253,15 +321,16 @@
 }
 
 .fm-tree::-webkit-scrollbar {
-  width: 5px;
+  width: 4px;
 }
+
 .fm-tree::-webkit-scrollbar-thumb {
-  background: var(--gray-light-color-ml);
-  border-radius: 3px;
+  background: #cbd5e1;
+  border-radius: 2px;
 }
 
 .tree-group {
-  margin-bottom: 3px;
+  margin-bottom: 2px;
 }
 
 .tree-link {
@@ -269,7 +338,7 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 7px 11px;
+  padding: 6px 10px;
   background: transparent;
   border: none;
   border-radius: var(--radius-sm);
@@ -278,14 +347,14 @@
   color: var(--text-secondary);
   text-align: left;
   cursor: pointer;
-  transition: all 0.12s ease;
+  transition: background-color 0.12s ease, color 0.12s ease;
   user-select: none;
   font-weight: 500;
 }
 
 .tree-link:hover {
-  background: rgba(255, 255, 255, 0.8);
-  color: var(--primary-dark-color-ml);
+  background: #f1f5f9;
+  color: var(--text);
 }
 
 .tree-link.active {
@@ -295,12 +364,12 @@
 }
 
 .tree-link svg {
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
 .tree-link.active svg {
-  color: var(--primary-color-ml);
+  color: var(--primary);
 }
 
 .tree-link span {
@@ -309,7 +378,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: inherit;
   font-size: 13px;
 }
 
@@ -322,34 +390,42 @@
 }
 
 .tree-sub {
-  padding-left: 12px;
+  padding-left: 10px;
 }
 
 .tree-badge {
   font-size: 10.5px;
-  padding: 1px 7px;
+  padding: 1px 6px;
   border-radius: 99px;
-  background: var(--primary-light-color-ml);
-  color: var(--primary-dark-color-ml);
+  background: #e2e8f0;
+  color: var(--text-secondary);
   font-weight: 600;
 }
 
-/* Sidebar Storage & Bucket Section */
+.tree-link.active .tree-badge {
+  background: #ccfbf1;
+  color: var(--primary-dark-color-ml);
+}
+
+/* ==========================================================================
+   Sidebar Storage & Bucket Switcher
+   ========================================================================== */
 .fm-storage {
   margin-top: auto;
   padding: 12px;
   border-top: 1px solid var(--border-color);
-  background: rgba(255, 255, 255, 0.85);
-  border-radius: var(--radius);
-  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.05);
+  background: #ffffff;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow-xs);
 }
 
 .fm-storage-label {
-  font-size: 10.5px;
+  font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--primary-dark-color-ml);
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
   margin-bottom: 6px;
 }
 
@@ -365,70 +441,76 @@
 
 .bucket-switcher-icon {
   position: absolute;
-  left: 10px;
-  color: var(--primary-color-ml);
+  left: 9px;
+  color: var(--primary);
   pointer-events: none;
 }
 
 .bucket-switcher-select {
   width: 100%;
-  padding: 6px 10px 6px 30px;
+  padding: 6px 10px 6px 28px;
   font-family: var(--font);
   font-size: 12.5px;
   font-weight: 600;
-  color: var(--dark-color-ml);
-  background: var(--light-color-ml);
+  color: var(--text);
+  background: #ffffff;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   outline: none;
   cursor: pointer;
   appearance: auto;
-  transition: border-color 0.15s ease;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
 }
 
 .bucket-switcher-select:focus {
-  border-color: var(--primary-color-ml);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
 }
 
 .bucket-switcher-status {
   font-size: 11px;
-  color: var(--primary-color-ml);
+  color: var(--primary);
   margin-top: 4px;
   display: block;
 }
 
+.bucket-switcher-status.is-hidden {
+  display: none;
+}
+
 .storage-bar {
-  height: 5px;
-  background: var(--gray-light-color-ml);
-  border-radius: 3px;
+  height: 4px;
+  background: #f1f5f9;
+  border-radius: 2px;
   overflow: hidden;
   margin: 8px 0 6px;
 }
 
 .fm-storage-meta {
   font-size: 11.5px;
-  color: var(--gray-color-ml);
-  font-weight: 600;
+  color: var(--text-muted);
+  font-weight: 500;
 }
 
 .fm-storage-subinfo {
-  font-size: 10.5px;
-  color: var(--gray-color-ml);
+  font-size: 11px;
+  color: var(--text-muted);
   margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* Main Content Area */
+/* ==========================================================================
+   Main Content Area & Toolbar
+   ========================================================================== */
 .fm-main {
   display: flex;
   flex-direction: column;
   min-height: 0;
-  background: rgba(255, 255, 255, 0.9);
+  background: #ffffff;
 }
 
-/* Toolbar */
 .fm-toolbar {
   display: flex;
   align-items: center;
@@ -437,14 +519,14 @@
   padding: 10px 16px;
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
-  background: rgba(255, 255, 255, 0.7);
+  background: #ffffff;
   flex-wrap: wrap;
 }
 
 .fm-breadcrumb {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 4px;
   flex-wrap: wrap;
   min-height: 32px;
 }
@@ -454,11 +536,11 @@
   border: none;
   font-family: var(--font);
   font-size: 13px;
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   cursor: pointer;
-  padding: 3px 8px;
+  padding: 3px 6px;
   border-radius: var(--radius-sm);
-  transition: all 0.12s ease;
+  transition: background-color 0.12s ease, color 0.12s ease;
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -466,13 +548,13 @@
 }
 
 .bc-link:hover {
-  background: var(--primary-light-color-ml);
-  color: var(--primary-dark-color-ml);
+  background: #f1f5f9;
+  color: var(--text);
 }
 
 .bc-link.current {
-  color: var(--dark-color-ml);
-  font-weight: 700;
+  color: var(--text);
+  font-weight: 600;
   cursor: default;
 }
 
@@ -481,25 +563,26 @@
 }
 
 .fm-breadcrumb .sep {
-  color: var(--gray-color-ml);
-  font-size: 13px;
+  color: #cbd5e1;
+  font-size: 12px;
   user-select: none;
 }
 
 .fm-toolbar-actions {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   margin-left: auto;
 }
 
-/* Quick Filters */
+/* Quick Filters - Segmented Control */
 .quick-filter-group {
   display: inline-flex;
-  background: rgba(15, 118, 110, 0.06);
+  background: #f1f5f9;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   padding: 2px;
+  gap: 2px;
 }
 
 .quick-filter-btn {
@@ -507,28 +590,29 @@
   border: none;
   font-family: var(--font);
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--text-secondary);
-  padding: 4px 11px;
-  border-radius: var(--radius-sm);
+  padding: 3px 9px;
+  border-radius: 4px;
   cursor: pointer;
-  transition: all 0.12s ease;
+  transition: background-color 0.12s ease, color 0.12s ease;
 }
 
 .quick-filter-btn:hover {
-  color: var(--primary-dark-color-ml);
+  color: var(--text);
 }
 
 .quick-filter-btn.active {
   background: #ffffff;
-  color: var(--primary-color-ml);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  color: var(--primary-dark-color-ml);
+  font-weight: 600;
+  box-shadow: var(--shadow-xs);
 }
 
 /* Search Box */
 .search-box {
   position: relative;
-  width: 210px;
+  width: 200px;
   display: flex;
   align-items: center;
 }
@@ -538,27 +622,26 @@
   left: 9px;
   width: 14px;
   height: 14px;
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   pointer-events: none;
 }
 
 .search-box input {
   width: 100%;
-  padding: 6px 26px 6px 28px;
+  padding: 5px 24px 5px 28px;
   font-family: var(--font);
   font-size: 12.5px;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  background: rgba(255, 255, 255, 0.85);
-  color: var(--dark-color-ml);
+  border-radius: var(--radius-sm);
+  background: #ffffff;
+  color: var(--text);
   outline: none;
-  transition: all 0.15s ease;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
 }
 
 .search-box input:focus {
-  border-color: var(--primary-color-ml);
-  background: #ffffff;
-  box-shadow: 0 0 0 3px var(--primary-light-color-ml);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
 }
 
 .search-clear-btn {
@@ -566,38 +649,42 @@
   right: 6px;
   background: transparent;
   border: none;
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   cursor: pointer;
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1;
-  padding: 2px 4px;
+  padding: 2px;
+}
+
+.search-clear-btn:hover {
+  color: var(--text);
 }
 
 /* View Switcher */
 .fm-view-toggle {
   display: inline-flex;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   overflow: hidden;
   background: #ffffff;
 }
 
 .view-btn {
-  width: 32px;
-  height: 30px;
+  width: 30px;
+  height: 28px;
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.12s ease;
+  transition: background-color 0.12s ease, color 0.12s ease;
 }
 
 .view-btn:hover {
-  background: var(--light-color-ml);
-  color: var(--dark-color-ml);
+  background: #f1f5f9;
+  color: var(--text);
 }
 
 .view-btn.active {
@@ -605,19 +692,27 @@
   color: var(--primary-dark-color-ml);
 }
 
-/* File Grid Wrap & Items */
+.view-btn#view-thumbs {
+  border-left: 1px solid var(--border-color);
+}
+
+/* ==========================================================================
+   File Grid Container & Grid Items
+   ========================================================================== */
 .fm-grid-wrap {
   flex: 1 1 auto;
   overflow-y: auto;
   padding: 16px;
   position: relative;
+  background: #ffffff;
 }
 
 .fm-grid-wrap::-webkit-scrollbar {
   width: 6px;
 }
+
 .fm-grid-wrap::-webkit-scrollbar-thumb {
-  background: var(--gray-light-color-ml);
+  background: #cbd5e1;
   border-radius: 3px;
 }
 
@@ -627,35 +722,34 @@
   grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
   grid-auto-rows: max-content;
   align-content: start;
-  gap: 14px;
+  gap: 12px;
 }
 
 .fm-item {
   position: relative;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(15, 118, 110, 0.15);
-  border-radius: var(--radius-lg);
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
   cursor: pointer;
   font-family: var(--font);
   text-align: left;
-  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
   user-select: none;
 }
 
 .fm-item:hover {
-  border-color: var(--primary-color-ml);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.1);
+  border-color: #cbd5e1;
+  box-shadow: var(--shadow-sm);
 }
 
 .fm-item.is-selected {
-  border-color: var(--primary-color-ml);
+  border-color: var(--primary);
   background: var(--primary-light-color-ml);
 }
 
-/* Item styling in Grid View */
+/* Item in Grid View */
 .fm-grid.view-grid .fm-item {
-  padding: 12px;
+  padding: 10px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -665,25 +759,22 @@
 .fm-grid.view-grid .fm-item-icon {
   width: 100%;
   aspect-ratio: 16 / 10;
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  background: var(--light-color-ml);
+  background: #f8fafc;
+  border: 1px solid var(--border-color-light);
   overflow: hidden;
   position: relative;
 }
 
-.view-btn#view-thumbs {
-  border-left: 1px solid var(--border-color);
-}
-
 .fm-item-thumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: opacity 0.25s ease-in-out;
+  transition: opacity 0.2s ease;
 }
 
 .fm-item-thumb.fm-lazy-thumb {
@@ -695,15 +786,17 @@
 }
 
 .fm-item-icon .ext {
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.6px;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: 4px;
 }
 
 .fm-item-icon .folder-svg {
-  width: 42px;
-  height: 42px;
+  width: 40px;
+  height: 40px;
 }
 
 .fm-grid.view-grid .fm-item-details {
@@ -712,31 +805,32 @@
 }
 
 .fm-item-name {
-  font-size: 13px;
+  font-size: 12.5px;
   font-weight: 600;
-  color: var(--dark-color-ml);
+  color: var(--text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
+  line-height: 1.35;
 }
 
 .fm-item-meta {
-  font-size: 11.5px;
-  color: var(--gray-color-ml);
+  font-size: 11px;
+  color: var(--text-muted);
   margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* Star & Context Menu Buttons */
+/* Star & Menu Action Triggers */
 .fm-star {
   position: absolute;
-  top: 8px;
-  left: 8px;
-  width: 24px;
-  height: 24px;
+  top: 6px;
+  left: 6px;
+  width: 22px;
+  height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -744,11 +838,11 @@
   border-radius: 50%;
   color: var(--text-disabled);
   opacity: 0;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(4px);
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow-xs);
   transition: opacity 0.12s ease, color 0.12s ease;
   z-index: 2;
-  border: none;
 }
 
 .fm-item:hover .fm-star,
@@ -757,32 +851,31 @@
 }
 
 .fm-star.on {
-  color: var(--yellow);
+  color: #eab308;
   opacity: 1;
 }
 
 .fm-star:hover {
-  color: var(--yellow);
-  transform: scale(1.1);
+  color: #eab308;
 }
 
 .fm-item-menu {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(4px);
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid var(--border-color);
+  background: #ffffff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   opacity: 0;
-  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
+  box-shadow: var(--shadow-xs);
+  transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
   z-index: 2;
 }
 
@@ -791,45 +884,59 @@
 }
 
 .fm-item-menu:hover {
-  background: #ffffff;
-  color: var(--primary-dark-color-ml);
-  box-shadow: var(--shadow-sm);
+  background: #f8fafc;
+  color: var(--text);
 }
 
-/* List View */
+/* ==========================================================================
+   List View
+   ========================================================================== */
 .fm-grid.view-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
 }
 
 .fm-grid.view-list .fm-item {
-  padding: 8px 14px;
+  padding: 6px 12px;
   display: grid;
-  grid-template-columns: 20px 32px 1fr 110px 140px 32px 32px;
-  gap: 12px;
+  grid-template-columns: 20px 30px 1fr 110px 140px 28px 28px;
+  gap: 10px;
   align-items: center;
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+}
+
+.fm-grid.view-list .fm-item:hover {
+  background: #f8fafc;
+  border-color: var(--border-color);
+}
+
+.fm-grid.view-list .fm-item.is-selected {
+  background: var(--primary-light-color-ml);
+  border-color: #ccfbf1;
 }
 
 .fm-grid.view-list .fm-item-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-sm);
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--light-color-ml);
+  background: #f8fafc;
+  border: 1px solid var(--border-color-light);
 }
 
 .fm-grid.view-list .fm-item-icon .ext {
-  font-size: 10.5px;
+  font-size: 10px;
   font-weight: 700;
+  padding: 1px 4px;
 }
 
 .fm-grid.view-list .fm-item-icon .folder-svg {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
 }
 
 .fm-grid.view-list .fm-star,
@@ -837,6 +944,8 @@
   position: static;
   opacity: 1;
   background: transparent;
+  border: none;
+  box-shadow: none;
 }
 
 .fm-grid.view-list .fm-item-meta {
@@ -844,27 +953,28 @@
   margin-top: 0;
 }
 
-/* Header row for list view */
 .fm-list-header {
   display: grid;
-  grid-template-columns: 20px 32px 1fr 110px 140px 32px 32px;
-  gap: 12px;
+  grid-template-columns: 20px 30px 1fr 110px 140px 28px 28px;
+  gap: 10px;
   align-items: center;
-  padding: 6px 14px;
+  padding: 6px 12px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--primary-dark-color-ml);
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
   border-bottom: 1px solid var(--border-color);
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 }
 
-/* Empty State */
+/* ==========================================================================
+   Empty State & Skeletons
+   ========================================================================== */
 .fm-empty {
-  padding: 80px 20px;
+  padding: 64px 20px;
   text-align: center;
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -877,7 +987,7 @@
 }
 
 .fm-empty svg {
-  color: var(--text-disabled);
+  color: #cbd5e1;
   margin-bottom: 12px;
 }
 
@@ -885,28 +995,28 @@
   font-family: var(--font-headings);
   font-size: 15px;
   font-weight: 700;
-  color: var(--dark-color-ml);
+  color: var(--text);
   margin-bottom: 4px;
 }
 
 .fm-empty .empty-desc {
   font-size: 13px;
   max-width: 360px;
+  color: var(--text-secondary);
 }
 
-/* Skeletons */
 .fm-skeleton-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-  gap: 14px;
+  gap: 12px;
   width: 100%;
 }
 
 .fm-skeleton-card {
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid var(--border-color-light);
-  border-radius: var(--radius-lg);
-  padding: 12px;
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -915,16 +1025,16 @@
 .fm-skeleton-icon {
   width: 100%;
   aspect-ratio: 16 / 10;
-  border-radius: var(--radius);
-  background: linear-gradient(90deg, #eaf2ee 25%, #dce8e3 50%, #eaf2ee 75%);
+  border-radius: var(--radius-sm);
+  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
   background-size: 200% 100%;
   animation: fm-shimmer 1.5s infinite;
 }
 
 .fm-skeleton-line {
-  height: 12px;
+  height: 10px;
   border-radius: 4px;
-  background: linear-gradient(90deg, #eaf2ee 25%, #dce8e3 50%, #eaf2ee 75%);
+  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
   background-size: 200% 100%;
   animation: fm-shimmer 1.5s infinite;
 }
@@ -937,22 +1047,23 @@
   100% { background-position: -200% 0; }
 }
 
-/* Context Menu */
+/* ==========================================================================
+   Context Menu
+   ========================================================================== */
 .fm-context-menu {
   position: fixed;
   z-index: 1000;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(12px);
+  background: #ffffff;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-sm);
   box-shadow: var(--shadow-dropdown);
-  padding: 6px;
-  min-width: 175px;
-  animation: fm-menu-pop 0.12s cubic-bezier(0.16, 1, 0.3, 1);
+  padding: 4px;
+  min-width: 165px;
+  animation: fm-menu-pop 0.1s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes fm-menu-pop {
-  from { opacity: 0; transform: scale(0.95); }
+  from { opacity: 0; transform: scale(0.96); }
   to { opacity: 1; transform: scale(1); }
 }
 
@@ -961,21 +1072,21 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 7px 11px;
+  padding: 6px 10px;
   border: none;
   background: transparent;
   font-family: var(--font);
   font-size: 12.5px;
   font-weight: 500;
-  color: var(--dark-color-ml);
-  border-radius: var(--radius-sm);
+  color: var(--text);
+  border-radius: 4px;
   cursor: pointer;
   text-align: left;
-  transition: background 0.1s ease, color 0.1s ease;
+  transition: background-color 0.1s ease, color 0.1s ease;
 }
 
 .fm-context-item:hover {
-  background: var(--primary-light-color-ml);
+  background: #f1f5f9;
   color: var(--primary-dark-color-ml);
 }
 
@@ -986,11 +1097,13 @@
 
 .fm-context-divider {
   height: 1px;
-  background: var(--border-color-light);
-  margin: 4px 0;
+  background: var(--border-color);
+  margin: 3px 0;
 }
 
-/* Modals */
+/* ==========================================================================
+   Modals & Dialogs
+   ========================================================================== */
 .modal {
   display: none;
   position: fixed;
@@ -998,8 +1111,8 @@
   z-index: 1050;
   overflow-x: hidden;
   overflow-y: auto;
-  background: rgba(15, 42, 42, 0.45);
-  backdrop-filter: blur(6px);
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(4px);
   align-items: center;
   justify-content: center;
   padding: 1rem;
@@ -1014,7 +1127,7 @@
   width: 100%;
   max-width: 480px;
   margin: auto;
-  animation: modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: modal-enter 0.18s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .modal-dialog.modal-lg {
@@ -1039,7 +1152,7 @@
 }
 
 @keyframes modal-enter {
-  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
   to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
@@ -1051,16 +1164,18 @@
   background: #ffffff;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-xl);
-  box-shadow: 0 20px 40px rgba(15, 42, 42, 0.16);
+  box-shadow: var(--shadow-dropdown);
   outline: 0;
+  overflow: hidden;
 }
 
 .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 18px;
+  padding: 12px 18px;
   border-bottom: 1px solid var(--border-color);
+  background: #ffffff;
 }
 
 .modal-title {
@@ -1070,12 +1185,12 @@
   gap: 8px;
   font-size: 15px;
   font-weight: 700;
-  color: var(--primary-dark-color-ml);
+  color: var(--text);
   margin: 0;
 }
 
 .modal-title-icon {
-  color: var(--primary-color-ml);
+  color: var(--primary);
 }
 
 .btn-close {
@@ -1083,16 +1198,16 @@
   border: none;
   font-size: 20px;
   line-height: 1;
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   cursor: pointer;
   padding: 4px;
   border-radius: var(--radius-sm);
-  transition: all 0.12s ease;
+  transition: color 0.12s ease, background-color 0.12s ease;
 }
 
 .btn-close:hover {
-  color: var(--dark-color-ml);
-  background: var(--light-color-ml);
+  color: var(--text);
+  background: #f1f5f9;
 }
 
 .modal-body {
@@ -1108,48 +1223,48 @@
   gap: 8px;
   padding: 12px 18px;
   border-top: 1px solid var(--border-color);
-  background: var(--light-color-ml);
-  border-bottom-left-radius: var(--radius-xl);
-  border-bottom-right-radius: var(--radius-xl);
+  background: #f8fafc;
 }
 
-/* Upload Dropzone & Queue */
+/* ==========================================================================
+   Upload Dropzone & Queue
+   ========================================================================== */
 .upload-drop-zone {
-  border: 2px dashed var(--primary-color-ml);
-  border-radius: var(--radius-lg);
-  padding: 32px 20px;
+  border: 1.5px dashed #cbd5e1;
+  border-radius: var(--radius);
+  padding: 28px 16px;
   text-align: center;
-  background: var(--primary-light-color-ml);
+  background: #f8fafc;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: border-color 0.12s ease, background-color 0.12s ease;
 }
 
 .upload-drop-zone:hover,
 .upload-drop-zone.dragover {
-  border-color: var(--primary-dark-color-ml);
-  background: #c5efe7;
+  border-color: var(--primary);
+  background: var(--primary-light-color-ml);
 }
 
 .drop-icon {
-  color: var(--primary-color-ml);
-  margin-bottom: 10px;
+  color: var(--primary);
+  margin-bottom: 8px;
 }
 
 .drop-text {
-  font-size: 14px;
+  font-size: 13.5px;
   font-weight: 600;
-  color: var(--dark-color-ml);
+  color: var(--text);
 }
 
 .drop-browse-link {
-  color: var(--primary-color-ml);
+  color: var(--primary);
   text-decoration: underline;
   cursor: pointer;
 }
 
 .drop-hint {
-  font-size: 12px;
-  color: var(--gray-color-ml);
+  font-size: 11.5px;
+  color: var(--text-muted);
   margin-top: 4px;
 }
 
@@ -1159,6 +1274,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
+  margin-top: 12px;
 }
 
 .upload-queue-item {
@@ -1166,81 +1282,127 @@
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  background: var(--light-color-ml);
+  background: #f8fafc;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   font-size: 12.5px;
 }
 
 .upload-queue-meta {
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   font-size: 11.5px;
 }
 
 .progress-bar-wrap {
-  height: 6px;
-  background: var(--gray-light-color-ml);
-  border-radius: 3px;
+  height: 4px;
+  background: #e2e8f0;
+  border-radius: 2px;
   overflow: hidden;
 }
 
 .progress-bar-inner {
   height: 100%;
-  background: var(--primary-color-ml);
-  transition: width 0.2s ease;
+  background: var(--primary);
+  transition: width 0.18s ease;
 }
 
 .upload-percent {
   font-size: 12px;
   font-weight: 700;
-  color: var(--primary-color-ml);
+  color: var(--primary);
 }
 
-/* Modal Form Inputs */
+/* Form Controls in Modals */
 .form-label {
   font-size: 12.5px;
   font-weight: 600;
-  color: var(--dark-color-ml);
-  margin-bottom: 6px;
+  color: var(--text);
+  margin-bottom: 5px;
   display: block;
 }
 
 .form-control {
   width: 100%;
-  padding: 8px 12px;
+  padding: 7px 11px;
   font-family: var(--font);
   font-size: 13px;
-  color: var(--dark-color-ml);
+  color: var(--text);
   background: #ffffff;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   outline: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
 }
 
 .form-control:focus {
-  border-color: var(--primary-color-ml);
-  box-shadow: 0 0 0 3px var(--primary-light-color-ml);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
 }
 
 .form-text {
   font-size: 11.5px;
-  color: var(--gray-color-ml);
+  color: var(--text-muted);
   margin-top: 4px;
 }
 
-/* Preview Modal Content */
-.preview-content {
-  max-height: 70vh;
-  overflow: auto;
+/* ==========================================================================
+   Preview Modal Content
+   ========================================================================== */
+.preview-modal-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  background: #152222;
-  min-height: 280px;
-}
-
-.preview-content img {
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: #ffffff;
+  color: var(--text);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.preview-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.preview-tabs {
+  display: inline-flex;
+  background: #f1f5f9;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  gap: 2px;
+}
+
+.preview-tab {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  padding: 3px 9px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  font-family: var(--font);
+}
+
+.preview-tab.active {
+  background: #ffffff;
+  color: var(--primary-dark-color-ml);
+  font-weight: 600;
+  box-shadow: var(--shadow-xs);
+}
+
+.preview-content {
+  max-height: 70vh;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #09090b;
+  min-height: 280px;
+}
+
+.preview-content img {
   max-width: 100%;
   max-height: 70vh;
   object-fit: contain;
@@ -1258,12 +1420,20 @@
   max-height: 70vh;
   margin: 0;
   padding: 16px;
-  background: #1a2828;
-  color: #f4f7f3;
+  background: #18181b;
+  color: #f4f4f5;
   font-family: var(--font-mono);
   font-size: 12.5px;
   overflow: auto;
-  line-height: 1.5;
+  line-height: 1.55;
+  tab-size: 2;
+}
+
+.preview-code-block code {
+  color: inherit;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
 }
 
 .preview-iframe {
@@ -1272,13 +1442,184 @@
   border: none;
 }
 
-.preview-actions {
+.rendered-markdown {
+  padding: 1.5rem;
+  color: var(--text);
+  background: #ffffff;
+  line-height: 1.65;
+  max-height: 70vh;
+  overflow-y: auto;
+  font-family: var(--font);
+}
+
+.rendered-markdown h1,
+.rendered-markdown h2,
+.rendered-markdown h3 {
+  color: var(--text);
+  font-family: var(--font-headings);
+  font-weight: 700;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.rendered-markdown code {
+  background: #f1f5f9;
+  color: var(--primary-dark-color-ml);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.rendered-markdown pre {
+  background: #18181b;
+  color: #f4f4f5;
+  padding: 1rem;
+  border-radius: var(--radius);
+  overflow-x: auto;
+}
+
+.rendered-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.rendered-markdown th,
+.rendered-markdown td {
+  border: 1px solid var(--border-color);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.rendered-markdown th {
+  background: #f8fafc;
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Metadata Info Cards */
+.file-info-pane {
+  background: #f8fafc;
+  padding: 1.25rem;
+}
+
+.info-card {
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  font-family: var(--font);
+}
+
+.info-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+  font-family: var(--font-headings);
+}
+
+.info-value {
+  font-size: 13px;
+  color: var(--text);
+  word-break: break-all;
+  font-family: var(--font);
+  line-height: 1.45;
+}
+
+.info-value.font-mono,
+.font-mono {
+  font-family: var(--font-mono) !important;
+  font-size: 12px;
+}
+
+.font-semibold {
+  font-weight: 600 !important;
+}
+
+.text-break {
+  word-break: break-all !important;
+  overflow-wrap: break-word !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.small {
+  font-size: 12px !important;
+}
+
+/* ==========================================================================
+   Floating Batch Action Bar
+   ========================================================================== */
+.batch-action-bar {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  animation: batch-slide 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes batch-slide {
+  from { opacity: 0; transform: translate(-50%, 12px); }
+  to { opacity: 1; transform: translate(-50%, 0); }
+}
+
+.batch-bar-inner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px;
+  background: #0f172a;
+  color: #ffffff;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.batch-selection-info {
   display: flex;
   align-items: center;
   gap: 8px;
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+.batch-count-badge {
+  background: var(--primary);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 999px;
+}
+
+.batch-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.batch-actions .btn-outline-light {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.batch-actions .btn-outline-light:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
 
-/* Toast Container & Notifications */
+/* ==========================================================================
+   Toasts & Alerts
+   ========================================================================== */
 .toast-container {
   position: fixed;
   bottom: 20px;
@@ -1295,9 +1636,9 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px 16px;
-  border-radius: var(--radius);
-  background: var(--dark-color-ml);
+  padding: 9px 14px;
+  border-radius: var(--radius-sm);
+  background: #0f172a;
   color: #ffffff;
   font-family: var(--font);
   font-size: 13px;
@@ -1305,38 +1646,73 @@
   box-shadow: var(--shadow-lg);
   min-width: 260px;
   max-width: 400px;
-  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .toast-notification.success {
-  background: linear-gradient(135deg, #10b981, #059669);
+  background: #065f46;
+  border-color: #047857;
 }
 
 .toast-notification.error {
-  background: linear-gradient(135deg, #ef4444, #dc2626);
+  background: #991b1b;
+  border-color: #b91c1c;
 }
 
 .toast-notification.warning {
-  background: linear-gradient(135deg, #f59e0b, #d97706);
+  background: #92400e;
+  border-color: #b45309;
 }
 
 .toast-close-btn {
   margin-left: auto;
   background: transparent;
   border: none;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, 0.8);
   cursor: pointer;
   font-size: 16px;
   line-height: 1;
 }
 
-/* Pagination */
+.toast-close-btn:hover {
+  color: #ffffff;
+}
+
+/* Flash alerts */
+.alert {
+  padding: 10px 14px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  border: 1px solid transparent;
+}
+
+.alert-success {
+  background: #ecfdf5;
+  color: #065f46;
+  border-color: #a7f3d0;
+}
+
+.alert-danger {
+  background: #fef2f2;
+  color: #991b1b;
+  border-color: #fecaca;
+}
+
+/* ==========================================================================
+   Pagination
+   ========================================================================== */
 .pagination-container {
-  padding: 12px 16px;
+  padding: 10px 16px;
   border-top: 1px solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  background: #ffffff;
 }
 
 .pagination {
@@ -1363,17 +1739,17 @@
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;
-  transition: all 0.12s ease;
+  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
 }
 
 .page-item .page-link:hover {
-  background: var(--primary-light-color-ml);
-  color: var(--primary-dark-color-ml);
+  background: #f1f5f9;
+  color: var(--text);
 }
 
 .page-item.active .page-link {
-  background: var(--primary-color-ml);
-  border-color: var(--primary-color-ml);
+  background: var(--primary);
+  border-color: var(--primary);
   color: #ffffff;
 }
 
@@ -1382,7 +1758,116 @@
   cursor: not-allowed;
 }
 
-/* Mobile & Tablet Responsiveness */
+/* ==========================================================================
+   Provider Badges & Connection Status
+   ========================================================================== */
+.provider-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  vertical-align: middle;
+  font-family: var(--font-headings);
+}
+
+.provider-badge.provider-gdrive,
+.provider-badge.provider-googledrive,
+.provider-badge.provider-google-drive {
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-color: #bfdbfe;
+}
+
+.provider-badge.provider-s3 {
+  background: #fff7ed;
+  color: #c2410c;
+  border-color: #fed7aa;
+}
+
+.provider-badge.provider-r2 {
+  background: #fff7ed;
+  color: #c2410c;
+  border-color: #fed7aa;
+}
+
+.provider-badge.provider-minio {
+  background: #fef2f2;
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
+.health-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: #ecfdf5;
+  color: #047857;
+  border: 1px solid #a7f3d0;
+}
+
+.health-status-badge.unhealthy {
+  background: #fef2f2;
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
+.health-status-badge.checking {
+  background: #fffbeb;
+  color: #b45309;
+  border-color: #fde68a;
+}
+
+.health-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #10b981;
+}
+
+.health-status-badge.unhealthy .health-dot {
+  background: #ef4444;
+}
+
+.health-status-badge.checking .health-dot {
+  background: #f59e0b;
+}
+
+.health-check-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  transition: color 0.12s ease, background-color 0.12s ease;
+}
+
+.health-check-btn:hover {
+  color: var(--primary);
+  background: var(--primary-light-color-ml);
+}
+
+.storage-latency-tag {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+/* ==========================================================================
+   Mobile & Responsive Adaptations
+   ========================================================================== */
 @media (max-width: 900px) {
   .page-wrapper {
     padding: 0;
@@ -1391,10 +1876,8 @@
   }
 
   .card.file-manager {
-    border-radius: var(--radius-md);
+    border-radius: var(--radius);
     width: 100%;
-    max-width: 100%;
-    overflow: hidden;
   }
 
   .fm-layout {
@@ -1402,20 +1885,13 @@
     height: auto;
     min-height: 0;
     max-height: none;
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
   }
 
   .fm-tree-wrap {
-    display: flex;
     border-right: none;
     border-bottom: 1px solid var(--border-color);
     padding: 10px 14px;
-    background: rgba(244, 247, 243, 0.85);
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
+    background: #f8fafc;
   }
 
   .fm-tree-header,
@@ -1426,71 +1902,27 @@
   .fm-storage {
     margin-top: 0;
     padding: 8px 12px;
-    background: rgba(255, 255, 255, 0.95);
+    background: #ffffff;
     border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    box-shadow: 0 1px 4px rgba(15, 118, 110, 0.05);
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
   }
 
   .fm-main {
     width: 100%;
-    max-width: 100%;
     min-width: 0;
-    overflow: hidden;
   }
 
   .fm-grid-wrap {
-    min-height: 400px;
+    min-height: 380px;
     padding: 12px;
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-    overflow-x: hidden;
   }
 
   .fm-grid.view-grid {
-    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
-    gap: 10px;
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .fm-item {
-    -webkit-tap-highlight-color: transparent;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    box-sizing: border-box;
-  }
-
-  .fm-item-details {
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .fm-item-name {
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .fm-item:active {
-    transform: scale(0.98);
-    background: var(--primary-light-color-ml);
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+    gap: 8px;
   }
 
   .fm-item-menu {
     opacity: 1;
-    background: rgba(255, 255, 255, 0.92);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
   }
 
   .fm-star.on {
@@ -1503,29 +1935,26 @@
     padding: 0.75rem 1rem;
     margin-bottom: 0.75rem;
     border-radius: var(--radius);
-    width: 100%;
-    max-width: 100%;
   }
 
   .page-header-row {
     flex-direction: column;
     align-items: stretch;
     gap: 10px;
-    width: 100%;
   }
 
   .page-actions {
     width: 100%;
     display: flex;
     justify-content: stretch;
-    gap: 8px;
+    gap: 6px;
   }
 
   .page-actions .btn {
     flex: 1 1 0;
     min-width: 0;
     justify-content: center;
-    padding: 7px 8px;
+    padding: 6px 8px;
     font-size: 12px;
   }
 
@@ -1534,9 +1963,6 @@
     align-items: stretch;
     gap: 8px;
     padding: 8px 10px;
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
   }
 
   .fm-breadcrumb {
@@ -1557,89 +1983,44 @@
     flex-direction: column;
     align-items: stretch;
     gap: 8px;
-    max-width: 100%;
   }
 
   .quick-filter-group {
     width: 100%;
     display: flex;
-    overflow-x: auto;
-    scrollbar-width: none;
-    max-width: 100%;
-  }
-
-  .quick-filter-group::-webkit-scrollbar {
-    display: none;
   }
 
   .quick-filter-btn {
     flex: 1 1 0;
     text-align: center;
-    padding: 5px 6px;
+    padding: 4px 6px;
     font-size: 11.5px;
-    white-space: nowrap;
   }
 
   .search-box {
     width: 100%;
-    max-width: 100%;
-  }
-
-  .search-box input {
-    width: 100%;
-    box-sizing: border-box;
   }
 
-  /* Grid Mode on Small Phones */
   .fm-grid.view-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 8px;
-    width: 100%;
-    max-width: 100%;
   }
 
   .fm-grid.view-grid .fm-item {
     padding: 8px;
-    border-radius: var(--radius-md);
     gap: 6px;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-  }
-
-  .fm-grid.view-grid .fm-item-icon {
-    aspect-ratio: 16 / 11;
-    width: 100%;
   }
 
   .fm-item-name {
     font-size: 12px;
-    line-height: 1.35;
   }
 
   .fm-item-meta {
-    font-size: 10px;
+    font-size: 10.5px;
   }
 
-  .fm-item-menu {
-    top: 5px;
-    right: 5px;
-    width: 26px;
-    height: 26px;
-  }
-
-  .fm-star {
-    top: 5px;
-    left: 5px;
-    width: 22px;
-    height: 22px;
-  }
-
-  /* List Mode on Mobile */
   .fm-grid.view-list {
-    gap: 6px;
-    width: 100%;
-    max-width: 100%;
+    gap: 4px;
   }
 
   .fm-grid.view-list .fm-item {
@@ -1647,35 +2028,6 @@
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
-    border-radius: var(--radius-md);
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-  }
-
-  .fm-grid.view-list .fm-item-checkbox {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  .fm-grid.view-list .fm-item-icon {
-    width: 32px;
-    height: 32px;
-    flex-shrink: 0;
-    border-radius: var(--radius-sm);
-  }
-
-  .fm-grid.view-list .fm-item-name {
-    flex: 1 1 auto;
-    min-width: 0;
-    font-size: 12.5px;
-    font-weight: 600;
-    color: var(--dark-color-ml);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   .fm-grid.view-list .fm-item-size,
@@ -1684,24 +2036,6 @@
     display: none;
   }
 
-  .fm-grid.view-list .fm-item-menu {
-    flex-shrink: 0;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 1;
-    color: var(--gray-color-ml);
-    border-radius: 6px;
-    background: transparent;
-    box-shadow: none;
-  }
-
-  .fm-grid.view-list .fm-item-menu:active {
-    background: var(--light-color-ml);
-  }
-
   .fm-list-header {
     display: none;
   }