/* css/style.css */

/* =========================================================================
   1. 主题变量定义（Cloudflare 经典配色 + 深灰暗黑模式）
   ========================================================================= */
:root {
  /* 亮色模式样式 */
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --text-main: #0f172a;
  --text-sub: #475569;
  --cf-orange: #f38020;
  --cf-orange-hover: #e06d10;
  --input-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;      /* 主背景：深灰色 */
    --card-bg: #1e1e1e;        /* 卡片背景：中深灰色 */
    --border-color: #2e2e2e;    /* 边框：浅深灰色 */
    --text-main: #f4f4f5;      /* 主标题颜色 */
    --text-sub: #a1a1aa;       /* 统计字颜色 */
    --input-bg: #18181b;       /* 输入框背景 */
  }

  input {
    color-scheme: dark;
  }
}

/* Uppy 主题变量注入 - scoped 在具体容器下以取代全局 !important 强制覆盖 */
#uppy-dashboard, #inline-uppy-dashboard {
  --uppy-color-action-primary: var(--cf-orange);
  --uppy-color-action-primary-hover: var(--cf-orange-hover);
}

/* =========================================================================
   2. 基础页面与主布局（左右分割，自适应高度与最大边界控制）
   ========================================================================= */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 核心布局：左右分割 (高保真视口自适应拉伸) */
.app-layout {
  display: flex;
  width: 100%;
  max-width: 1600px;
  height: calc(100vh - 40px); /* 视口自适应，留出 40px 间距，保证不溢出 */
  max-height: 860px;          /* 限制高保真主容器最大高度，防止大屏过长 */
  min-height: 500px;          /* 建立安全底线高度 */
  padding: 20px;
  gap: 20px;
  box-sizing: border-box;
}

/* 👈 左侧侧边栏 (310px) */
.sidebar {
  width: 310px;
  flex-shrink: 0;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;
  margin-bottom: 48px;
}

.brand-title {
  font-size: 16px;
  margin: 0;
  display: flex;
  flex-direction: column; /* 纵向高级排版： Cloudflare R2 在上，存储桶控制台在下 */
  align-items: flex-start;
  gap: 4px;
  line-height: 1.2;
}

/* Cloudflare R2 英文字号 (32px) */
.brand-en {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 32px; 
  color: var(--cf-orange);
  letter-spacing: 0.3px;
}

/* “存储桶上传控制台”字样 */
.brand-zh {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: var(--text-main);
  font-size: 24px;
}

/* 👉 右侧工作区 (贯通 100% 纵向拉伸) */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

/* 视图隐藏控制 */
.view-container {
  display: none !important; /* 👈 重新加上 !important，绝对保障未激活页面干净隐藏 */
  flex: 1;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.view-container.active {
  display: flex !important; /* 👈 重新加上 !important，绝对保障激活页面显示正常 */
}

/* =========================================================================
   3. Flowbite 风格胶囊导航 */
.nav-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.2s;
}

.nav-pill:hover {
  background-color: rgba(243, 128, 32, 0.05);
  color: var(--cf-orange);
}

.nav-pill.active {
  background-color: var(--cf-orange);
  color: #ffffff;
}

.nav-pill i {
  font-size: 16px;
  width: 18px;
  text-align: center;
}

/* =========================================================================
   4. 输入框、卡片与登出按钮 */
.config-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-color);
  padding-top: 18px;
  transition: opacity 0.2s;
}

/* 文件夹图标与后面的字绝对垂直居中对齐 */
.config-card label {
  font-size: 12.5px;
  font-weight: bold;
  color: var(--text-sub);
  display: inline-flex;   
  align-items: center;    
  gap: 6px;               
  line-height: 1;
}

.config-card label i {
  font-size: 14px;
  color: var(--cf-orange);
  display: inline-block;
  vertical-align: middle; 
  line-height: 1;
}

.config-card input {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.config-card input:focus {
  border-color: var(--cf-orange);
}

.logout-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  width: 100%;
  padding: 8px 0;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.logout-btn:hover {
  background-color: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: #ef4444;
}

.stats-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.stats-card strong {
  color: var(--cf-orange);
}

.stats-card .path-preview {
  margin-left: 4px;
  color: var(--text-sub);
}

.stats-card .path-preview strong {
  font-family: monospace;
  font-size: 13px;
  color: var(--cf-orange);
  background: rgba(243, 128, 32, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

/* =========================================================================
   4.1 侧边栏存储桶选择器美化样式（横向单排 - 支持明亮与黑暗双重风格）
   ========================================================================= */
.profile-switch-wrapper {
  margin-bottom: 24px;
  display: flex;
  flex-direction: row; /* 修改为横向排列，将下拉框与图标文字放于一排 */
  align-items: center;
  justify-content: space-between;
  gap: 12px; /* 水平间距 */
  box-sizing: border-box;
}

.profile-label {
  font-size: 12.5px;
  font-weight: bold;
  color: var(--text-sub);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap; /* 防止左侧图标与说明文字被挤压折行 */
  flex-shrink: 0;
}

.profile-label i {
  font-size: 12px;
  color: var(--cf-orange);
}

.profile-selector {
  flex: 1; /* 自动拉伸填充右侧剩余宽度 */
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 10px; /* 稍微收缩内边距以适配单行排版 */
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: none; /* 移除浏览器默认样式 */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f38020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 28px;
  box-sizing: border-box;
  min-width: 0; /* 允许在窄屏弹性缩放 */
}

.profile-selector:focus {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 2px rgba(243, 128, 32, 0.15);
}

/* =========================================================================
   5. 身份确认防闪烁弹窗样式 */
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

html.unauthenticated .auth-modal-overlay {
  display: flex;
}

.auth-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.auth-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.auth-card h2 {
  font-size: 20px;
  margin: 0 0 6px 0;
  color: var(--text-main);
}

.auth-card p {
  font-size: 13.5px;
  color: var(--text-sub);
  margin: 0 0 20px 0;
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.password-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 42px 10px 14px; 
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  text-align: center;
  letter-spacing: 1px;
  box-sizing: border-box;
}

.password-wrapper input:focus {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px rgba(243, 128, 32, 0.25);
}

/* 隐藏浏览器默认眼睛图标 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button {
  display: none;
}

.eye-toggle-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-sub);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}

.eye-toggle-btn:hover {
  opacity: 1;
  color: var(--cf-orange);
}

.eye-toggle-btn i {
  font-size: 16px;
  width: 18px;
  text-align: center;
}

/* 使用特异度更高的ID组合选择器，精简掉所有 !important 标志 */
.auth-input-group button#auth-submit-btn {
  background-color: var(--cf-orange);
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 100%;
}

.auth-input-group button#auth-submit-btn:hover {
  background-color: var(--cf-orange-hover);
}

.auth-error-msg {
  margin-top: 12px;
  font-size: 13px;
  color: #ef4444;
  min-height: 18px;
}

/* =========================================================================
   6. 基于 ul / li 的现代化网盘文件列表样式 (Hover 绝无下划线)
   ========================================================================= */
.file-list-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.file-list-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.01);
  letter-spacing: 0.5px;
}

.file-list-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.file-list-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-main);
  transition: background-color 0.15s;
  cursor: pointer;
}

.file-list-row:hover {
  background-color: rgba(243, 128, 32, 0.04);
}

.col-select {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-select input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--cf-orange);
  cursor: pointer;
}

.col-name {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-name span:hover {
  color: var(--cf-orange);
  text-decoration: none; /* 彻底移除悬浮下划线，改用纯橙色高亮 */
}

.col-name i {
  color: var(--cf-orange);
  font-size: 16px;
  flex-shrink: 0;
}

.col-type {
  width: 120px;
  flex-shrink: 0;
  color: var(--text-sub);
}

.col-size {
  width: 120px;
  flex-shrink: 0;
  color: var(--text-sub);
}

.col-date {
  width: 180px;
  flex-shrink: 0;
  color: var(--text-sub);
  font-size: 12.5px;
}

.col-action {
  width: 50px;
  flex-shrink: 0;
  text-align: center;
  position: relative;
}

.action-dot-btn {
  background: transparent;
  border: none;
  color: var(--text-sub);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.action-dot-btn:hover {
  background-color: var(--border-color);
  color: var(--text-main);
}

.action-dot-btn i {
  font-size: 16px;
}

/* 下拉菜单 */
.action-dropdown {
  position: absolute;
  right: 14px;
  top: 32px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  min-width: 150px; /* 已根据要求修改为 150px */
  padding: 4px 0;
  display: none;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text-main);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
  white-space: nowrap; /* 强制文本不换行，防止变成两排 */
}

.dropdown-item:hover {
  background-color: rgba(243, 128, 32, 0.08);
}

.dropdown-item.danger {
  color: #ef4444;
}

.dropdown-item.danger:hover {
  background-color: rgba(239, 68, 68, 0.12);
}

.dropdown-item i {
  font-size: 14px;
  width: 14px;
}

/* 面包屑导航与高度恒定锁定 */
.manager-header {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 16px;
  height: 60px; 
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.manager-header-left {
  display: flex;
  align-items: center;
}

.breadcrumb {
  font-size: 13px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.breadcrumb span {
  cursor: pointer;
}

.breadcrumb span:hover {
  color: var(--cf-orange);
  text-decoration: none; /* 彻底移除悬浮下划线 */
}

.breadcrumb .separator {
  color: var(--text-sub); /* 斜杠颜色与普通文字完全一样 */
  margin: 0 4px;
  cursor: default;
  pointer-events: none; /* 排除鼠标悬浮效果 */
  text-decoration: none;
}

.breadcrumb i {
  font-size: 14px;
}

/* 顶部批量递归删除按钮样式 */
.batch-delete-btn {
  background-color: #ef4444;
  border: none;
  color: #ffffff;
  height: 36px; 
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
  box-sizing: border-box;
}

.batch-delete-btn:hover {
  background-color: #dc2626;
}

.empty-placeholder {
  text-align: center;
  padding: 60px 0;
  color: var(--text-sub);
  font-size: 13.5px;
}

/* =========================================================================
   7. Uppy 容器 (通过高特异性 ID 级选择器，完全去除了 !important 标记) */
#view-upload {
  width: 100%;
  box-sizing: border-box;
  padding: 2px;
}

#uppy-dashboard, #inline-uppy-dashboard {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

#uppy-dashboard .uppy-Dashboard-inner,
#inline-uppy-dashboard .uppy-Dashboard-inner {
  flex: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  overflow: hidden;
}

#uppy-dashboard .uppy-Root,
#uppy-dashboard .uppy-Dashboard,
#uppy-dashboard .uppy-Dashboard-innerWrap,
#uppy-dashboard .uppy-Dashboard-AddFiles,
#uppy-dashboard .uppy-Dashboard-AddFiles-panel,
#uppy-dashboard .uppy-Dashboard-files,
#inline-uppy-dashboard .uppy-Root,
#inline-uppy-dashboard .uppy-Dashboard,
#inline-uppy-dashboard .uppy-Dashboard-innerWrap,
#inline-uppy-dashboard .uppy-Dashboard-AddFiles,
#inline-uppy-dashboard .uppy-Dashboard-AddFiles-panel,
#inline-uppy-dashboard .uppy-Dashboard-files {
  flex: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  box-sizing: border-box;
  border: none;
  background: transparent;
}

#uppy-dashboard .uppy-Dashboard-AddFiles,
#inline-uppy-dashboard .uppy-Dashboard-AddFiles {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   8. 极简边距警告气泡 (通过精确特异性完全剥离 !important) */
#uppy-dashboard .uppy-Informer,
#inline-uppy-dashboard .uppy-Informer {
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  pointer-events: none;
}

#uppy-dashboard .uppy-Informer-item,
#inline-uppy-dashboard .uppy-Informer-item,
#uppy-dashboard .uppy-Informer p,
#inline-uppy-dashboard .uppy-Informer p,
#uppy-dashboard .uppy-Informer-animated,
#inline-uppy-dashboard .uppy-Informer-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 85%;
  margin: 5px auto;
  background-color: var(--cf-orange);
  color: #ffffff;
  border: none;
  border-radius: 24px;
  padding: 8px 80px;
  box-shadow: 0 4px 16px rgba(243, 128, 32, 0.35);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

#uppy-dashboard .uppy-Informer-item p::before,
#inline-uppy-dashboard .uppy-Informer-item p::before,
#uppy-dashboard .uppy-Informer p::before,
#inline-uppy-dashboard .uppy-Informer p::before {
  content: "\f071";               /* FA7 Solid 'fa-triangle-exclamation' 图标 unicode */
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900;               
  display: inline-block;
  font-size: 18px;
  margin-right: 10px;
  vertical-align: middle;
  color: #ffffff;
  -webkit-mask: none;              
  mask: none;
  background-color: transparent;
}

#uppy-dashboard .uppy-Informer-item p span,
#inline-uppy-dashboard .uppy-Informer-item p span,
#uppy-dashboard .uppy-Informer p span,
#inline-uppy-dashboard .uppy-Informer p span {
  color: #ffffff;
}

/* =========================================================================
   9. S3 独占对象详细信息面板样式 (100% 克隆 R2 官方详细页)
   ========================================================================= */
.back-btn {
  background-color: var(--border-color);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0 14px;
  height: 38px; 
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.back-btn:hover {
  background-color: var(--card-bg);
  color: var(--cf-orange);
  border-color: var(--cf-orange);
}

.back-btn i {
  font-size: 14px;
}

.detail-header {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 16px;
  height: 60px; 
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.detail-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-file-path {
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-main);
}

.copy-small-btn {
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--text-sub);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.copy-small-btn:hover {
  background-color: var(--border-color);
  color: var(--text-main);
}

.detail-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-action-btn {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.detail-action-btn:hover {
  border-color: var(--cf-orange);
  color: var(--cf-orange);
}

.detail-action-btn i {
  font-size: 14px;
}

.detail-action-btn.danger {
  background-color: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.detail-action-btn.danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

/* 详情卡片布局网格 */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.detail-section {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.detail-section h3 {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-main);
  margin: 0 0 14px 0;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

/* 详细信息一行的 Grid */
.info-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-section .label {
  font-size: 12px;
  color: var(--text-sub);
  text-transform: uppercase;
}

.detail-section .val {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-main);
}

/* URL 一键复制区块 */
.url-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.url-input-group {
  display: flex;
  gap: 10px;
  width: 100%;
}

.url-input-group input {
  flex: 1;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
}

.url-input-group .copy-btn {
  background-color: var(--cf-orange);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.url-input-group .copy-btn:hover {
  background-color: var(--cf-orange-hover);
}

.placeholder-text {
  text-align: center;
  padding: 24px 0;
  color: var(--text-sub);
  font-size: 13px;
}

/* =========================================================================
   10. 网页正中央二次确认弹窗 (去除了所有冗余 !important)
   ========================================================================= */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); 
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px); 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.confirm-card {
  background: rgba(30, 41, 59, 0.75); /* 经典深蓝灰磨砂底色 */
  backdrop-filter: blur(16px); 
  -webkit-backdrop-filter: blur(16px); 
  border: 1px solid rgba(255, 255, 255, 0.1); /* 精致半透明边缘线 */
  border-radius: 16px; 
  padding: 28px 24px; 
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); /* 柔和深色羽化投影 */
  box-sizing: border-box; 
}

.confirm-icon {
  font-size: 42px;
  margin-bottom: 12px;
  color: #ef4444; /* 红色警告图标 */
}

.confirm-card h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #ffffff; /* 纯白文字 */
}

.confirm-card p {
  font-size: 14px;
  color: #e2e8f0; /* 亮灰色次要文字 */
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.confirm-btn-group {
  display: flex;
  gap: 12px;
}

.confirm-close-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.confirm-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.confirm-action-btn {
  flex: 1;
  background-color: var(--cf-orange);
  color: #ffffff;
  border: none;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.confirm-action-btn:hover {
  background-color: var(--cf-orange-hover);
}

.confirm-action-btn.danger {
  background-color: #ef4444;
}

.confirm-action-btn.danger:hover {
  background-color: #dc2626;
}

/* =========================================================================
   11. 网页上方滑入“精致气泡式”通知样式 (Toast)
   ========================================================================= */
.toast-message {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-40px);
  background-color: var(--cf-orange);
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(243, 128, 32, 0.4);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
  z-index: 9999999;
  white-space: nowrap;
}

.toast-message.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* =========================================================================
   12. 存储管理页控制组样式（精简无用 !important 规则）
   ========================================================================= */
.manager-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 右侧控制按钮基础样式 */
.header-upload-btn, .header-add-folder-btn {
  height: 36px; 
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  box-sizing: border-box;
}

/* 1. “上传” 按钮样式 */
.header-upload-btn {
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--text-main);
}

.header-upload-btn:hover {
  border-color: var(--cf-orange);
  color: var(--cf-orange);
  background-color: rgba(243, 128, 32, 0.05);
}

/* 2. “添加文件夹” 按钮样式 */
.header-add-folder-btn {
  background-color: var(--cf-orange);
  border: 1px solid var(--cf-orange); 
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(243, 128, 32, 0.25);
}

.header-add-folder-btn:hover {
  background-color: var(--cf-orange-hover);
  border-color: var(--cf-orange-hover);
}

/* 3. “刷新” 按钮样式 */
.header-refresh-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.header-refresh-btn:hover {
  border-color: var(--cf-orange);
  color: var(--cf-orange);
  background-color: rgba(243, 128, 32, 0.05);
}

/* 同步刷新旋转动效 */
.header-refresh-btn.rotating i {
  animation: spin-refresh 0.8s linear infinite;
}

@keyframes spin-refresh {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 4. 600px 内嵌式上传区外壳 (已由 300px 扩增至 600px) */
.inline-upload-container {
  position: relative;
  width: 100%;
  height: 600px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 内嵌关闭 “×” 按钮 */
.inline-upload-close-btn {
  position: absolute;
  top: 12px;
  right: 18px;
  background: transparent;
  border: none;
  color: var(--text-sub);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 999;
  transition: color 0.2s;
  padding: 2px;
}

.inline-upload-close-btn:hover {
  color: #ef4444;
}

#inline-uppy-dashboard {
  width: 100%;
  height: 100%;
}

/* 内嵌直传仪表盘主题适配 */
#inline-uppy-dashboard .uppy-Dashboard-inner {
  border: none;
  border-radius: 0;
  background-color: transparent;
}

/* 自研磨砂文件夹模态框创建按钮悬浮过渡 */
#folder-ok-btn {
  background-color: var(--cf-orange);
  transition: background-color 0.2s;
}

#folder-ok-btn:hover {
  background-color: var(--cf-orange-hover);
}

/* =========================================================================
   13. 批量操作按钮组样式美化（批量移动与批量迁移统一为橙色激活微光风格）
   ========================================================================= */
.batch-move-btn, .batch-migrate-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  transition: all 0.2s;
  
  /* 统一采用橙色微光激活风格 */
  border: 1px solid var(--cf-orange);
  background-color: rgba(243, 128, 32, 0.04);
  color: var(--cf-orange);
}

.batch-move-btn:hover, .batch-migrate-btn:hover {
  background-color: var(--cf-orange);
  color: #ffffff;
}

/* =========================================================================
   14. 整理与迁移中心弹窗 - 动态双模适配、全路径及高度空间极致填充（已彻底清除死代码）
   ========================================================================= */

/* 1. 弹窗卡片本体（支持明亮与暗黑自适应） */
#migrate-modal .migrate-card {
  max-width: 900px;
  width: 90%;
  background: var(--card-bg); /* 自适应主题卡片背景 */
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  color: var(--text-main);
  box-sizing: border-box;
}

/* 2. 弹窗头部标题栏 */
.migrate-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.migrate-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
}

.migrate-modal-header h3 i {
  color: var(--cf-orange);
}

.close-modal-btn {
  background: transparent;
  border: none;
  color: var(--text-sub);
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
  line-height: 1;
}

.close-modal-btn:hover {
  color: var(--text-main);
}

/* 3. 双栏流向网格布局 */
.visual-flow-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.flow-node {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 左右流向盒：主盒子高度为 390px */
.flow-node .node-box {
  background: var(--input-bg); /* 自适应面板背景 */
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 24px;
  height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative;
}

/* 4. 源节点（SOURCE）特色展示区 */
.source-node .node-box {
  justify-content: center;
  gap: 16px;
}

.source-node .node-box i.fa-database {
  font-size: 32px;
  color: var(--cf-orange);
}

.source-node .bucket-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.source-node .path-text {
  font-family: monospace;
  font-size: 13px;
  color: var(--text-sub);
  word-break: break-all;
}

/* 第三行内容统计徽章 */
.source-node .count-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--cf-orange);
  background: rgba(243, 128, 32, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  align-self: center;
}

/* 5. 中间过渡连接器与徽章 */
.flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
}

.action-badge {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  z-index: 2;
  white-space: nowrap;
}

.arrow-line {
  position: absolute;
  width: 100%;
  height: 1px;
  border-top: 2px dashed var(--border-color);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* 6. 目标节点（TARGET）特色展示区 */
.target-node .node-box {
  justify-content: flex-start;
  gap: 16px; /* 控制大区块之间的间距 */
  padding: 20px 24px;
}

/* 7. 目标端头行组件（横向单排） */
.target-profile-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.target-profile-header-row i.fa-database {
  font-size: 24px;
  color: var(--cf-orange);
  flex-shrink: 0;
}

/* 让下拉框自动撑满行内的剩余宽度 */
.embed-select {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f38020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 32px;
  box-sizing: border-box;
  min-width: 0;
}

.embed-select:focus {
  border-color: var(--cf-orange);
}

/* 8. 目标路径选择与展示框架 */
.target-path-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* 第一行：Target目标路径展示 */
.target-path-preview-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12.5px;
  word-break: break-all;
}

.target-path-label {
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}

.target-path-full {
  font-family: monospace;
  font-weight: 700;
  color: var(--cf-orange); /* 已调为经典主题橙色 */
}

/* 浏览器主容器 */
.target-dir-browser-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* 返回上一级按钮 */
.target-dir-up-btn {
  width: 100%;
  height: 34px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.target-dir-up-btn:hover:not(:disabled) {
  background-color: var(--border-color);
  color: var(--cf-orange);
}

.target-dir-up-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: transparent;
}

/* 局部滚动文件夹列表盒（高度精调为 235px） */
.target-dir-list-box {
  width: 100%;
  height: 235px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}

/* 极简自定义细滚动条 */
.target-dir-list-box::-webkit-scrollbar {
  width: 6px;
}

.target-dir-list-box::-webkit-scrollbar-track {
  background: transparent;
}

.target-dir-list-box::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.target-dir-list-box::-webkit-scrollbar-thumb:hover {
  background: var(--cf-orange);
}

/* 文件夹列表单项 */
.target-dir-item {
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: none;
  box-sizing: border-box;
  transition: background-color 0.15s;
}

.target-dir-item:hover {
  background-color: rgba(243, 128, 32, 0.08);
  color: var(--cf-orange);
}

.target-dir-item i {
  color: var(--cf-orange);
  font-size: 14px;
}

/* 零子目录提示语 */
.target-dir-empty-tip {
  font-size: 12px;
  color: var(--text-sub);
  padding: 24px 0;
  text-align: center;
}

/* 9. 传输模式选项控制面板 */
.migrate-options-panel {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.option-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
}

.radio-group {
  display: flex;
  gap: 24px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s;
}

/* 利用 CSS 最新特异度，当 Radio 处于 disabled 状态时，整行标签自动呈现半透明灰色，并显示禁用手势 */
.radio-label:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 绝对安全的隐形定位，去除 display: none 导致非激活态不可点击选择的故障 */
.radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* 绘制精美圆形单选按钮 */
.custom-radio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  transition: all 0.2s;
}

.radio-label input[type="radio"]:checked + .custom-radio {
  border-color: var(--cf-orange);
}

.radio-label input[type="radio"]:checked + .custom-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--cf-orange);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 安全警告信息提示框 */
.security-tip-box {
  margin-top: 14px;
  background: rgba(243, 128, 32, 0.05);
  border: 1px solid rgba(243, 128, 32, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-sub);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.security-tip-box i {
  color: var(--cf-orange);
  font-size: 14px;
  margin-top: 2px;
}

/* 10. 底部大按钮动作区域 */
.migrate-card .confirm-btn-group {
  display: flex;
  gap: 16px;
}

/* 取消按钮 */
.migrate-card .confirm-close-btn {
  flex: 1;
  height: 46px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.migrate-card .confirm-close-btn:hover {
  background: var(--border-color);
  color: var(--text-main);
}

/* 确认传输大按钮 */
.migrate-card .confirm-action-btn.primary {
  flex: 1;
  height: 46px;
  background-color: var(--cf-orange);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.migrate-card .confirm-action-btn.primary:hover {
  background-color: var(--cf-orange-hover);
}

/* 跨桶强制安全复制橙色高亮微光警告标签样式 */
.migrate-warning-tip {
  font-size: 11px;
  color: var(--text-sub); /* 🟢 完美修正为主题灰色 */
}

/* =========================================================================
   15. 侧边栏上传目标目录点选浏览器专属排版样式 (不使用 !important)
   ========================================================================= */
.sidebar-path-preview-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-path-preview-row label {
  font-size: 12.5px;
  font-weight: bold;
  color: var(--text-sub);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.sidebar-path-full {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--cf-orange);
  word-break: break-all;
}

.sidebar-dir-browser-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

/* =========================================================================
   16. 侧边栏传输进度看板样式 (橙色微光高保真适配)
   ========================================================================= */
.sidebar-progress-card {
  background: rgba(243, 128, 32, 0.08);
  border: 1px solid rgba(243, 128, 32, 0.25);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease-out;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.progress-title i {
  color: var(--cf-orange);
}

.progress-percent {
  font-family: monospace;
  color: var(--cf-orange);
  font-weight: 800;
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--cf-orange);
  width: 0%;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text {
  font-size: 11px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   17. 侧边栏目录树高度状态联动 (防止挤压下方进度条)
   ========================================================================= */
#sidebar-dir-list-box {
  height: 310px; /* 默认维持 310px 完整高度 */
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 丝滑弹性过渡 */
}

/* 当侧边栏检测到有后台传输任务进行时，自适应减小高度至 180px */
.sidebar.has-progress #sidebar-dir-list-box {
  height: 245px; 
}