most-box 0.0.2 → 0.0.6

package/public/app.css

@@ -1,1519 +0,0 @@
-/* =============================================
-   MostBox - App Styles
-   Native CSS with Variables, Nesting, Responsive
-   ============================================= */
-
-/* === CSS Variables (Theme) === */
-:root {
-  --bg-primary: #f8fafc;
-  --bg-secondary: #ffffff;
-  --bg-tertiary: #f1f5f9;
-  --text-primary: #0f172a;
-  --text-secondary: #64748b;
-  --text-muted: #94a3b8;
-  --border-color: rgba(0, 0, 0, 0.06);
-  --accent-blue: #3b82f6;
-  --danger: #ef4444;
-  --success: #22c55e;
-  --warning: #f59e0b;
-  --info: #6366f1;
-}
-
-[data-theme="dark"] {
-  --bg-primary: #0f172a;
-  --bg-secondary: #1e293b;
-  --bg-tertiary: #334155;
-  --text-primary: #f8fafc;
-  --text-secondary: #94a3b8;
-  --text-muted: #64748b;
-  --border-color: rgba(255, 255, 255, 0.08);
-  --accent-blue: #60a5fa;
-}
-
-/* === Base / Reset === */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--text-muted);
-  border-radius: 4px;
-}
-
-/* === Layout === */
-.app-layout {
-  display: flex;
-  min-height: 100vh;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-}
-
-/* === Sidebar === */
-.sidebar {
-  width: 200px;
-  background: var(--bg-tertiary);
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border-color);
-  flex-shrink: 0;
-
-  .sidebar-header {
-    padding: 20px 16px;
-    border-bottom: 1px solid var(--border-color);
-
-    h1 {
-      font-size: 18px;
-      font-weight: 700;
-      color: var(--accent-blue);
-    }
-  }
-
-  .sidebar-nav {
-    padding: 12px 8px;
-    flex: 1;
-  }
-
-  .sidebar-nav-btn {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 4px;
-    background: transparent;
-    color: var(--text-secondary);
-    font-weight: 500;
-    font-size: 13px;
-    transition: background 0.15s;
-
-    &.active {
-      background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
-      color: var(--accent-blue);
-      font-weight: 600;
-    }
-
-    &:hover:not(.active) {
-      background: color-mix(in srgb, var(--accent-blue) 6%, transparent);
-    }
-  }
-
-  .sidebar-footer {
-    padding: 12px 16px;
-    border-top: 1px solid var(--border-color);
-  }
-
-  .sidebar-footer-label {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-bottom: 6px;
-    font-size: 11px;
-    color: var(--text-secondary);
-  }
-
-  .storage-bar {
-    height: 4px;
-    border-radius: 2px;
-    background: var(--bg-secondary);
-    overflow: hidden;
-  }
-
-  .storage-bar-fill {
-    height: 100%;
-    background: var(--accent-blue);
-    transition: width 0.3s;
-  }
-
-  .storage-info {
-    display: flex;
-    justify-content: space-between;
-    font-size: 10px;
-    color: var(--text-secondary);
-    margin-top: 4px;
-  }
-}
-
-/* === Mobile sidebar overlay === */
-.sidebar-overlay {
-  display: none;
-}
-
-.mobile-menu-btn {
-  display: none;
-}
-
-/* === Main Content === */
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-/* === Header === */
-.app-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-  gap: 16px;
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .header-title {
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  .header-badge {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
-    border-radius: 12px;
-    background: var(--bg-tertiary);
-    font-size: 11px;
-    color: var(--text-secondary);
-  }
-
-  .header-badge-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--warning);
-
-    &.connected {
-      background: var(--success);
-    }
-  }
-
-  .header-right {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-}
-
-/* === Search === */
-.search-box {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border-radius: 8px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-
-  input {
-    background: none;
-    border: none;
-    outline: none;
-    font-size: 12px;
-    color: var(--text-primary);
-    width: 120px;
-  }
-
-  button {
-    display: flex;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-secondary);
-    padding: 0;
-  }
-}
-
-/* === Icon Button === */
-.icon-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  border: none;
-  background: var(--bg-tertiary);
-  cursor: pointer;
-  color: var(--text-secondary);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.15s;
-
-  &:hover {
-    background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-tertiary));
-  }
-
-  &.accent {
-    color: var(--accent-blue);
-  }
-
-  &.theme-toggle {
-    color: #6366f1;
-  }
-}
-
-.icon-btn-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--danger);
-  color: #fff;
-  font-size: 9px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* === Upload / Download Grid === */
-.action-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  padding: 16px 24px;
-  position: relative;
-}
-
-.action-card {
-  border: 2px dashed color-mix(in srgb, var(--accent-blue) 20%, transparent);
-  border-radius: 12px;
-  padding: 20px;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  background: transparent;
-  transition: background 0.15s, border-color 0.15s;
-
-  &:hover {
-    background: color-mix(in srgb, var(--accent-blue) 4%, transparent);
-  }
-
-  p {
-    font-size: 12px;
-    color: var(--accent-blue);
-    font-weight: 500;
-  }
-}
-
-.action-card.upload.drag-over {
-  border-color: var(--accent-blue);
-  background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
-}
-
-.action-card-download {
-  p {
-    color: #6366f1;
-  }
-}
-
-.action-card-input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 1;
-}
-
-/* === Breadcrumb === */
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 24px;
-  font-size: 12px;
-
-  button {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-  }
-
-  button.current {
-    color: var(--text-secondary);
-  }
-
-  .breadcrumb-edit-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-secondary);
-    padding: 2px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-/* === File Grid === */
-.content-grid {
-  flex: 1;
-  padding: 12px 24px;
-  overflow: auto;
-}
-
-.file-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 16px;
-}
-
-/* === Empty State === */
-.empty-state {
-  text-align: center;
-  color: var(--text-muted);
-  padding: 48px;
-  font-size: 13px;
-}
-
-/* === File / Folder Card === */
-.card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16px;
-  border-radius: 12px;
-  cursor: pointer;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  transition: all 0.15s;
-
-  &:hover {
-    border-color: var(--accent-blue);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  }
-
-  &.selected {
-    background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
-    border-color: var(--accent-blue);
-  }
-}
-
-.card-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 12px;
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.card-icon.folder {
-  background: linear-gradient(135deg, #818cf8, #6366f1);
-}
-
-.card-icon.file {
-  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
-}
-
-.card-icon.starred {
-  background: linear-gradient(135deg, #fbbf24, #f59e0b);
-}
-
-.card-icon.trash {
-  background: linear-gradient(135deg, #94a3b8, #64748b);
-}
-
-.card-name {
-  font-size: 12px;
-  font-weight: 500;
-  text-align: center;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-primary);
-}
-
-.card-date {
-  font-size: 10px;
-  color: var(--text-muted);
-  margin-top: 2px;
-}
-
-/* === Modal Overlay === */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-container {
-  width: 380px;
-  max-width: calc(100vw - 32px);
-  padding: 24px;
-  border-radius: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-
-  h3 {
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-muted);
-  }
-}
-
-.modal-close-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-muted);
-}
-
-/* === Welcome Guide === */
-.welcome-modal {
-  width: 380px;
-  max-width: calc(100vw - 32px);
-  padding: 28px;
-  border-radius: 16px;
-  background: #fff;
-  text-align: center;
-
-  h2 {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 12px;
-  }
-
-  p {
-    font-size: 13px;
-    color: #64748b;
-    line-height: 1.6;
-    margin-bottom: 20px;
-  }
-}
-
-.welcome-steps {
-  display: flex;
-  justify-content: center;
-  gap: 6px;
-  margin-bottom: 20px;
-}
-
-.welcome-step-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #e2e8f0;
-
-  &.active {
-    background: #3b82f6;
-  }
-}
-
-.welcome-actions {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-}
-
-.welcome-success-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: #dcfce7;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 16px;
-}
-
-/* === Buttons === */
-.btn {
-  padding: 10px 20px;
-  border-radius: 10px;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  transition: opacity 0.15s;
-
-  &.primary {
-    background: #3b82f6;
-    color: #fff;
-  }
-
-  &.secondary {
-    background: transparent;
-    border: 1px solid #e5e7eb;
-    color: #6b7280;
-  }
-
-  &.danger {
-    background: var(--danger);
-    color: #fff;
-  }
-
-  &.small {
-    padding: 6px 12px;
-    border-radius: 8px;
-    font-size: 12px;
-  }
-
-  &.full {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-/* === Settings Modal === */
-.settings-modal {
-  width: 420px;
-  max-width: calc(100vw - 32px);
-  padding: 28px;
-  border-radius: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-
-  .settings-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
-  .settings-label {
-    display: block;
-    font-size: 13px;
-    font-weight: 500;
-    margin-bottom: 8px;
-    color: var(--text-primary);
-  }
-
-  .settings-row {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  .settings-input {
-    flex: 1;
-    padding: 10px 12px;
-    border-radius: 8px;
-    border: 1.5px solid var(--border-color);
-    font-size: 13px;
-    outline: none;
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-  }
-
-  .settings-hint {
-    font-size: 11px;
-    color: var(--text-muted);
-    margin-top: 8px;
-  }
-
-  .settings-divider {
-    border-top: 1px solid var(--border-color);
-    padding-top: 16px;
-  }
-
-  .settings-about {
-    text-align: center;
-    margin-bottom: 16px;
-
-    h3 {
-      font-size: 16px;
-      font-weight: 600;
-      margin-bottom: 4px;
-      color: var(--text-primary);
-    }
-
-    p {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-  }
-}
-
-/* === Input Modal === */
-.input-modal {
-  width: 360px;
-  max-width: calc(100vw - 32px);
-  padding: 24px;
-  border-radius: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-
-  h3 {
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 16px;
-    color: var(--text-primary);
-  }
-}
-
-.modal-input {
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 8px;
-  border: 1.5px solid var(--border-color);
-  font-size: 13px;
-  outline: none;
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-  margin-bottom: 16px;
-}
-
-.modal-actions {
-  display: flex;
-  gap: 8px;
-
-  .btn {
-    flex: 1;
-    padding: 10px;
-    border-radius: 8px;
-    font-size: 13px;
-  }
-}
-
-/* === Confirm Modal === */
-.confirm-modal {
-  width: 360px;
-  max-width: calc(100vw - 32px);
-  padding: 24px;
-  border-radius: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-
-  h3 {
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 12px;
-    color: var(--text-primary);
-  }
-
-  p {
-    font-size: 13px;
-    color: var(--text-secondary);
-    margin-bottom: 20px;
-  }
-}
-
-/* === Move Modal === */
-.move-modal {
-  width: 400px;
-  max-width: calc(100vw - 32px);
-  padding: 24px;
-  border-radius: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-
-  .move-breadcrumb {
-    display: flex;
-    gap: 6px;
-    margin-bottom: 12px;
-    flex-wrap: wrap;
-  }
-
-  .move-breadcrumb-btn {
-    padding: 4px 8px;
-    border-radius: 6px;
-    border: none;
-    background: var(--bg-tertiary);
-    color: var(--text-secondary);
-    cursor: pointer;
-    font-size: 12px;
-
-    &.active {
-      background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
-      color: var(--accent-blue);
-    }
-  }
-
-  .move-folder-list {
-    max-height: 200px;
-    overflow: auto;
-    margin-bottom: 16px;
-  }
-
-  .move-folder-item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 10px;
-    border-radius: 8px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    font-size: 13px;
-    color: var(--text-primary);
-    text-align: left;
-
-    &:hover {
-      background: var(--bg-tertiary);
-    }
-
-    &.selected {
-      background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
-      color: var(--accent-blue);
-    }
-  }
-
-  .move-new-folder {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 16px;
-
-    input {
-      flex: 1;
-      padding: 8px 10px;
-      border-radius: 8px;
-      border: 1.5px solid var(--border-color);
-      font-size: 12px;
-      outline: none;
-      background: var(--bg-tertiary);
-      color: var(--text-primary);
-    }
-  }
-}
-
-/* === Share Modal === */
-.share-modal {
-  width: 420px;
-  max-width: calc(100vw - 32px);
-  padding: 24px;
-  border-radius: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-
-  .share-link-box {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 16px;
-  }
-
-  .share-link-text {
-    flex: 1;
-    padding: 12px 14px;
-    border-radius: 10px;
-    background: var(--bg-tertiary);
-    font-size: 13px;
-    font-family: monospace;
-    color: var(--text-primary);
-    word-break: break-all;
-  }
-
-  .share-copy-btn {
-    width: 44px;
-    border-radius: 10px;
-    border: none;
-    background: var(--accent-blue);
-    color: #fff;
-    cursor: pointer;
-
-    &.copied {
-      background: var(--success);
-    }
-  }
-}
-
-/* === Download Modal === */
-.download-modal {
-  width: 400px;
-  max-width: calc(100vw - 32px);
-  padding: 24px;
-  border-radius: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-
-  .download-input {
-    width: 100%;
-    padding: 12px 14px;
-    border-radius: 10px;
-    border: 1.5px solid var(--border-color);
-    font-size: 13px;
-    font-family: monospace;
-    outline: none;
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    margin-bottom: 16px;
-  }
-
-  .download-btn {
-    width: 100%;
-    padding: 12px;
-    border-radius: 10px;
-    border: none;
-    background: var(--info);
-    color: #fff;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:disabled {
-      background: var(--bg-tertiary);
-      color: var(--text-muted);
-      cursor: not-allowed;
-    }
-  }
-}
-
-/* === Preview === */
-.preview-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: rgba(0, 0, 0, 0.9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-
-  .preview-close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
-    border: none;
-    background: rgba(255, 255, 255, 0.1);
-    cursor: pointer;
-    color: #fff;
-  }
-
-  img,
-  video {
-    max-width: 100%;
-    max-height: 80vh;
-    border-radius: 12px;
-  }
-
-  .preview-audio {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 16px;
-    padding: 40px 48px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-    min-width: 320px;
-  }
-
-  .preview-audio-icon {
-    width: 72px;
-    height: 72px;
-    border-radius: 50%;
-    background: rgba(59, 130, 246, 0.15);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .preview-audio-filename {
-    font-size: 14px;
-    color: var(--text-secondary);
-    margin: 0;
-    text-align: center;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .preview-audio-player {
-    width: 100%;
-    max-width: 400px;
-    height: 40px;
-  }
-
-  .preview-audio-player::-webkit-media-controls-panel {
-    background: var(--bg-tertiary);
-  }
-}
-
-/* === Batch Action Bar === */
-.batch-bar {
-  position: fixed;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border-radius: 12px;
-  background: var(--bg-secondary);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  border: 1px solid var(--border-color);
-  z-index: 100;
-
-  .batch-info {
-    font-size: 12px;
-    color: var(--text-secondary);
-  }
-
-  .batch-dismiss {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-muted);
-    padding: 4px;
-  }
-
-  .batch-divider {
-    width: 1px;
-    height: 20px;
-    background: var(--border-color);
-  }
-}
-
-/* === Transfer Panel === */
-.transfer-modal {
-  width: 380px;
-  max-width: calc(100vw - 32px);
-  max-height: 70vh;
-  padding: 24px;
-  border-radius: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  overflow: auto;
-
-  .transfer-item {
-    padding: 10px 0;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .transfer-item-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 4px;
-  }
-
-  .transfer-item-name {
-    font-size: 12px;
-    font-weight: 500;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .transfer-item-cancel {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--danger);
-    padding: 2px;
-  }
-
-  .transfer-progress-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .transfer-progress-bar {
-    flex: 1;
-    height: 4px;
-    border-radius: 2px;
-    background: var(--bg-tertiary);
-  }
-
-  .transfer-progress-fill {
-    height: 100%;
-    border-radius: 2px;
-    background: var(--accent-blue);
-    transition: width 0.2s;
-
-    &.download {
-      background: var(--info);
-    }
-
-    &.error {
-      background: var(--danger);
-    }
-
-    &.cancelled {
-      background: var(--warning);
-    }
-  }
-
-  .transfer-progress-text {
-    font-size: 10px;
-    color: var(--text-muted);
-    min-width: 32px;
-    text-align: right;
-  }
-}
-
-/* === Toast === */
-@keyframes toastSlideIn {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.toast {
-  position: fixed;
-  right: 24px;
-  z-index: 9999;
-  color: #fff;
-  padding: 12px 20px;
-  border-radius: 12px;
-  font-size: 13px;
-  font-weight: 500;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  animation: toastSlideIn 0.2s ease;
-
-  &.success {
-    background: var(--success);
-  }
-
-  &.error {
-    background: var(--danger);
-  }
-
-  &.warning {
-    background: var(--warning);
-  }
-
-  &.info {
-    background: var(--accent-blue);
-  }
-}
-
-/* === Welcome Guide Path Step === */
-.welcome-path-section {
-  text-align: left;
-  margin-bottom: 20px;
-
-  .path-label {
-    font-size: 12px;
-    color: #9ca3af;
-    margin-bottom: 4px;
-  }
-
-  .path-value {
-    font-size: 12px;
-    color: #374151;
-    font-family: monospace;
-    background: #f3f4f6;
-    padding: 8px 10px;
-    border-radius: 6px;
-    word-break: break-all;
-    margin-bottom: 12px;
-  }
-
-  .path-input {
-    width: 100%;
-    padding: 10px 12px;
-    border-radius: 8px;
-    border: 1.5px solid #e5e7eb;
-    font-size: 13px;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  .path-hint {
-    font-size: 11px;
-    color: #9ca3af;
-    margin-top: 4px;
-  }
-}
-
-/* =============================================
-   Responsive Design
-   ============================================= */
-@media (max-width: 768px) {
-
-  /* Sidebar: drawer mode */
-  .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 300;
-    transform: translateX(-100%);
-    transition: transform 0.25s ease;
-    width: 240px;
-
-    &.open {
-      transform: translateX(0);
-    }
-  }
-
-  .sidebar-overlay {
-    display: block;
-    position: fixed;
-    inset: 0;
-    z-index: 299;
-    background: rgba(0, 0, 0, 0.4);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.25s ease, visibility 0.25s ease;
-
-    &.visible {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
-  .mobile-menu-btn {
-    display: flex;
-  }
-
-  /* Header */
-  .app-header {
-    padding: 12px 16px;
-    gap: 8px;
-
-    .header-right {
-      gap: 4px;
-    }
-  }
-
-  /* Upload/Download */
-  .action-grid {
-    grid-template-columns: 1fr;
-    padding: 12px 16px;
-    gap: 8px;
-  }
-
-  .action-card {
-    padding: 14px;
-  }
-
-  /* Breadcrumb */
-  .breadcrumb {
-    padding: 0 16px;
-  }
-
-  /* Content */
-  .content-grid {
-    padding: 12px 16px;
-  }
-
-  .file-grid {
-    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
-    gap: 10px;
-  }
-
-  /* Card */
-  .card {
-    padding: 12px;
-  }
-
-  .card-icon {
-    width: 44px;
-    height: 44px;
-    border-radius: 10px;
-    margin-bottom: 8px;
-  }
-
-  .card-name {
-    font-size: 11px;
-  }
-
-  /* Modals: bottom sheet style */
-  .modal-overlay {
-    align-items: flex-end;
-    padding: 0;
-  }
-
-  .modal-container {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-    max-height: 85vh;
-    overflow: auto;
-  }
-
-  .welcome-modal {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .settings-modal {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .input-modal {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .confirm-modal {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .move-modal {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .share-modal {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .download-modal {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .transfer-modal {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 16px 16px 0 0;
-  }
-
-  /* Toast */
-  .toast {
-    right: 12px;
-    left: 12px;
-  }
-
-  /* Batch bar */
-  .batch-bar {
-    left: 8px;
-    right: 8px;
-    transform: none;
-    flex-wrap: wrap;
-    justify-content: center;
-    bottom: 12px;
-    gap: 6px;
-  }
-
-  /* Preview */
-  .preview-overlay {
-    padding: 12px;
-  }
-}
-
-@media (max-width: 480px) {
-  .file-grid {
-    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
-    gap: 8px;
-  }
-
-  .card {
-    padding: 10px;
-  }
-
-  .card-icon {
-    width: 40px;
-    height: 40px;
-    margin-bottom: 6px;
-  }
-
-  .card-name {
-    font-size: 10px;
-  }
-
-  .app-header {
-    padding: 10px 12px;
-
-    .header-title {
-      font-size: 14px;
-    }
-
-    .header-badge {
-      font-size: 10px;
-      padding: 2px 6px;
-    }
-  }
-
-  .action-grid {
-    padding: 10px 12px;
-  }
-
-  .content-grid {
-    padding: 10px 12px;
-  }
-
-  .breadcrumb {
-    padding: 0 12px;
-    font-size: 11px;
-  }
-
-  .batch-bar {
-    padding: 8px 12px;
-    gap: 4px;
-
-    .batch-info {
-      font-size: 11px;
-    }
-  }
-}
-
-/* Preview Text Container */
-.preview-text-container {
-  width: 90vw;
-  max-width: 900px;
-  max-height: 80vh;
-  overflow: auto;
-  background: var(--bg-secondary);
-  border-radius: 12px;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.preview-text-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--border-color);
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.preview-text {
-  color: #0f172a;
-  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-all;
-  margin: 0;
-  overflow: auto;
-  max-height: 100%;
-}
-
-.preview-text-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 20px;
-  color: var(--text-secondary);
-  gap: 12px;
-}
-
-.preview-text-spinner {
-  animation: spin 0.8s linear infinite;
-  opacity: 0.6;
-}
-
-.preview-text-loading-hint {
-  font-size: 12px;
-  opacity: 0.6;
-  text-align: center;
-  max-width: 300px;
-}
-
-.preview-media-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 100px;
-  min-height: 100px;
-}
-
-.preview-media-wrapper .preview-loading {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-}
-
-.preview-loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid rgba(255, 255, 255, 0.2);
-  border-top-color: #fff;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.preview-media-wrapper img,
-.preview-media-wrapper video {
-  max-width: 100%;
-  max-height: 80vh;
-  border-radius: 12px;
-}
-
-.preview-unsupported {
-  background: var(--bg-secondary);
-  border-radius: 12px;
-  padding: 40px;
-  text-align: center;
-  color: var(--text-primary);
-}
-
-.preview-unsupported p:first-of-type {
-  font-size: 14px;
-  font-weight: 500;
-  word-break: break-all;
-}
-
-[data-theme="dark"] .preview-text {
-  color: #e2e8f0;
-}