/**
 * custom-jl2.css - Sanyue ImgHub Custom Theme
 * 风格：温暖、个人、安静，与博主博客 meetyou.blog 保持一致
 * 浅色模式：纯净奶油米白背景 (#fbf7ee)，微暖近白卡片 (#fffdfa)，暖桃橙主题色 (#e8875a)
 * 深色模式：暖深棕灰底 (#1f1b17)，微暖深棕卡片 (#27221d)，高对比度易读文字，同一暖桃橙
 */

/* ==========================================================================
   1. Typography & Font Overrides (去除 Pacifico，换用博客风无衬线字体)
   ========================================================================== */

/* 覆盖 Pacifico 字体族名回退，彻底杜绝手写花体 */
@font-face {
  font-family: 'Pacifico';
  src: local('system-ui'), local('-apple-system'), local('PingFang SC'), local('Noto Sans SC'), local('sans-serif');
  font-display: swap;
}

:root {
  --site-font-family: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

html,
body {
  font-family: var(--site-font-family) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 标题类无衬线与字重 */
.title,
.main-title,
.title-base-text,
.title-crayon-text,
.login-title,
.status-title,
.error-title,
.ai-empty-title,
.page-header h2,
.group-header h4,
.first-title,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--site-font-family) !important;
  font-weight: 650 !important;
}

/* ==========================================================================
   2. Light Theme CSS Variables (浅色模式：纯净奶油米白与暖桃橙)
   ========================================================================== */
:root {
  /* 主色调：暖桃橙与层次变体 */
  --primary-color: #e8875a;
  --primary-color-accent: #dc7746;
  --el-color-primary: #e8875a;
  --el-color-primary-rgb: 232, 135, 90;
  --el-color-primary-light-3: #efa889;
  --el-color-primary-light-5: #f5c3ad;
  --el-color-primary-light-7: #faded2;
  --el-color-primary-light-8: #fceee7;
  --el-color-primary-light-9: #fdf6f2;
  --el-color-primary-dark-2: #dc7746;

  /* 背景色：纯净奶油米白（与 meetyou.blog 一致，绝不偏粉） */
  --bg-color: #fbf7ee;
  --admin-container-bg-color: #fbf7ee;
  --el-bg-color-page: #fbf7ee;

  /* 卡片与容器：近白微暖 */
  --card-bg: #fffdfa;
  --el-fill-color-blank: #fffdfa;
  --el-bg-color: #fffdfa;
  --el-bg-color-overlay: #fffdfa;
  --popper-bg-color: #fffdfa;
  --password-input-bg-color: #fffdfa;
  --toolbar-button-bg-color: #fffdfa;
  --admin-dashborad-stats-bg-color: #fffdfa;
  --admin-dashboard-btn-bg-color: #fffdfa;
  --admin-dashboard-imgcard-bg-color: #fffdfa;
  --admin-dashboard-tag-suggestion-bg-color: #fffdfa;
  --dialog-bg-color: #fffdfa;
  --dialog-surface-bg-color: rgba(255, 253, 250, 0.96);
  --dialog-section-bg-color: #f7f2e8;
  --dialog-control-bg-color: #faf5eb;
  --el-upload-dragger-bg-color: #fffdfa;

  /* 毛玻璃与半透明表面（在纯色背景下保持清晰、温润） */
  --glass-bg: rgba(255, 253, 250, 0.94);
  --glass-header-bg: rgba(251, 247, 238, 0.92);
  --glass-backdrop-blur: 16px;

  /* 边框色：温润米灰/淡褐 */
  --el-border-color: #e5ded0;
  --el-border-color-light: #ece6d9;
  --el-border-color-lighter: #f2ece2;
  --el-border-color-extra-light: #f8f4ec;
  --glass-border: #e5ded0;
  --glass-border-hover: #d4caa8;
  --glass-header-border: #e5ded0;
  --el-upload-dragger-border: 1.5px dashed #dfd5c2;
  --upload-list-item-border-color: #ede5d7;
  --upload-list-item-hover-border: #dfd5c2;
  --modern-action-group-border: #e5ded0;
  --modern-action-group-bg: #f8f3ea;
  --modern-action-group-hover-bg: #f2ebe0;
  --file-name-bg: #f8f3ea;
  --file-name-border: #e5ded0;
  --file-name-hover-bg: #f2ebe0;
  --file-name-hover-border: #d4caa8;

  /* 填充色 */
  --el-fill-color: #f3ece0;
  --el-fill-color-light: #f7f2e8;
  --el-fill-color-lighter: #faf6ef;
  --text-bg-color: #f5efe4;

  /* 文字颜色：温暖安静的深褐木炭色，避免生硬死黑 */
  --text-color: #2e2621;
  --text-color-secondary: #706256;
  --el-text-color-primary: #2e2621;
  --el-text-color-regular: #594c42;
  --el-text-color-secondary: #7d6e62;
  --el-text-color-placeholder: #a89a8d;
  --el-text-color-disabled: #c7bbb0;
  --upload-text-color: #594c42;
  --upload-header-color: #2e2621;
  --upload-main-title-color: #2e2621;
  --upload-title-text-color: #3d322b;
  --upload-title-text-shadow: none;
  --upload-title-hover-glow: transparent;
  --upload-title-underline-bg: #e8875a;
  --upload-title-underline-shadow: none;
  --upload-title-crayon-deep: #2e2621;
  --upload-title-crayon-edge: transparent;
  --upload-title-crayon-burr: transparent;
  --upload-title-crayon-dust: transparent;
  --page-footer-text-color: #8c7d70;
  --page-footer-name-color: #3d322b;
  --login-title-color: #2e2621;
  --login-title-glow-color: transparent;
  --login-input-icon-color: #9c8e82;
  --icon-color: #7d6e62;
  --placeholder-color: #a89a8d;
  --theme-toggle-color: #2e2621;
  --theme-toggle-bg-color: #2e2621;
  --admin-theme-toggle-color: #2e2621;
  --admin-theme-toggle-bg-color: #2e2621;
  --not-found-title-text-color: #2e2621;

  /* 上传区域与交互相关主题色变量 */
  --upload-list-file-icon-color: #e8875a;
  --el-upload-dragger-uniform-color: #e8875a;
  --el-icon--upload-color: #e8875a;
  --upload-card-effect-color: #efa889;
  --upload-card-effect-highlight-color: #fceee7;
  --upload-card-hover-glow-bg: radial-gradient(circle, rgba(232, 135, 90, 0.16) 0%, transparent 70%);
  --upload-action-copy-color: #e8875a;
  --upload-action-btn-hover-bg: #f4ece1;
  --dashboard-title-bg: rgba(232, 135, 90, 0.1);
  --login-input-underline-color: #e8875a;
  --login-input-label-focus-color: #e8875a;
  --tabs-switcher-accent-color: #e8875a;
  --tabs-switcher-current-color: #e8875a;
  --tabs-switcher-current-bg: #fdf6f2;
  --tabs-switcher-current-border-color: #e8875a;

  /* 柔和圆角（12-16px） */
  --el-border-radius-base: 12px;
  --el-border-radius-small: 8px;
  --el-border-radius-round: 24px;
  --upload-list-radius: 16px;

  /* 低饱和暖调柔和阴影 */
  --card-shadow: 0 4px 20px -2px rgba(160, 115, 85, 0.07), 0 2px 6px -1px rgba(160, 115, 85, 0.04);
  --card-shadow-hover: 0 8px 28px -4px rgba(160, 115, 85, 0.12), 0 4px 10px -2px rgba(160, 115, 85, 0.06);
  --glass-shadow: 0 4px 20px -2px rgba(160, 115, 85, 0.07);
  --popper-shadow: 0 8px 24px -3px rgba(160, 115, 85, 0.12), 0 3px 8px -1px rgba(160, 115, 85, 0.05);
  --dialog-box-shadow: 0 16px 40px -8px rgba(120, 85, 60, 0.16), 0 6px 14px -3px rgba(120, 85, 60, 0.07);
  --login-container-box-shadow: 0 8px 30px -4px rgba(160, 115, 85, 0.09), 0 3px 8px -1px rgba(160, 115, 85, 0.04);
  --login-container-hover-box-shadow: 0 14px 40px -4px rgba(160, 115, 85, 0.14), 0 6px 14px -2px rgba(160, 115, 85, 0.07);
  --el-upload-dragger-hover-box-shadow: 0 8px 28px -4px rgba(160, 115, 85, 0.12);

  /* 播放器主题色 */
  --plyr-color-main: #e8875a;
}

/* ==========================================================================
   3. Dark Theme CSS Variables (深色模式：暖深棕灰与同一暖桃橙)
   ========================================================================== */
html.dark,
body.dark,
.dark {
  /* 主色调：同一暖桃橙，深色下强调色使用更明亮的桃色 */
  --primary-color: #e8875a;
  --primary-color-accent: #f09a72;
  --el-color-primary: #e8875a;
  --el-color-primary-rgb: 232, 135, 90;
  --el-color-primary-light-3: #bf6f49;
  --el-color-primary-light-5: #945638;
  --el-color-primary-light-7: #693c27;
  --el-color-primary-light-8: #502e1d;
  --el-color-primary-light-9: #381f14;
  --el-color-primary-dark-2: #f09a72;

  /* 背景色：温暖的深棕灰底（如 #1f1b17） */
  --bg-color: #1f1b17;
  --admin-container-bg-color: #1f1b17;
  --el-bg-color-page: #1f1b17;

  /* 卡片与容器：微暖深棕，舒适不刺眼 */
  --card-bg: #27221d;
  --el-fill-color-blank: #27221d;
  --el-bg-color: #27221d;
  --el-bg-color-overlay: #2e2822;
  --popper-bg-color: #27221d;
  --password-input-bg-color: #211c18;
  --toolbar-button-bg-color: #27221d;
  --admin-dashborad-stats-bg-color: #27221d;
  --admin-dashboard-btn-bg-color: #27221d;
  --admin-dashboard-imgcard-bg-color: #27221d;
  --admin-dashboard-tag-suggestion-bg-color: #27221d;
  --dialog-bg-color: #27221d;
  --dialog-surface-bg-color: rgba(39, 34, 29, 0.96);
  --dialog-section-bg-color: #211c18;
  --dialog-control-bg-color: #2b2520;
  --el-upload-dragger-bg-color: #27221d;

  /* 毛玻璃与表面 */
  --glass-bg: rgba(39, 34, 29, 0.9);
  --glass-header-bg: rgba(31, 27, 23, 0.9);

  /* 边框色：暖调深褐边框 */
  --el-border-color: #3d352e;
  --el-border-color-light: #362f28;
  --el-border-color-lighter: #2f2822;
  --el-border-color-extra-light: #28221d;
  --glass-border: #3d352e;
  --glass-border-hover: #4e443b;
  --glass-header-border: #3d352e;
  --el-upload-dragger-border: 1.5px dashed #443b33;
  --upload-list-item-border-color: #362f28;
  --upload-list-item-hover-border: #4e443b;
  --modern-action-group-border: #3d352e;
  --modern-action-group-bg: #211c18;
  --modern-action-group-hover-bg: #2b2520;
  --file-name-bg: #211c18;
  --file-name-border: #362f28;
  --file-name-hover-bg: #2b2520;
  --file-name-hover-border: #4e443b;

  /* 填充色 */
  --el-fill-color: #2b2520;
  --el-fill-color-light: #25201b;
  --el-fill-color-lighter: #1f1b17;
  --text-bg-color: #25201b;

  /* 文字颜色：高对比度、柔和可读的暖白与暖灰 */
  --text-color: #ede6df;
  --text-color-secondary: #a6998d;
  --el-text-color-primary: #ede6df;
  --el-text-color-regular: #cfc5ba;
  --el-text-color-secondary: #a6998d;
  --el-text-color-placeholder: #7a6e63;
  --el-text-color-disabled: #584f46;
  --upload-text-color: #cfc5ba;
  --upload-header-color: #ede6df;
  --upload-main-title-color: #ede6df;
  --upload-title-text-color: #ede6df;
  --upload-title-text-shadow: none;
  --upload-title-hover-glow: transparent;
  --upload-title-underline-bg: #f09a72;
  --upload-title-underline-shadow: none;
  --upload-title-crayon-deep: #ede6df;
  --upload-title-crayon-edge: transparent;
  --upload-title-crayon-burr: transparent;
  --upload-title-crayon-dust: transparent;
  --page-footer-text-color: #8f8275;
  --page-footer-name-color: #cfc5ba;
  --login-title-color: #ede6df;
  --login-title-glow-color: transparent;
  --login-input-icon-color: #8f8275;
  --icon-color: #a6998d;
  --placeholder-color: #7a6e63;
  --theme-toggle-color: #ede6df;
  --theme-toggle-bg-color: #ede6df;
  --admin-theme-toggle-color: #ede6df;
  --admin-theme-toggle-bg-color: #ede6df;
  --not-found-title-text-color: #ede6df;

  /* 上传区域与交互相关主题色变量 */
  --upload-list-file-icon-color: #f09a72;
  --el-upload-dragger-uniform-color: #f09a72;
  --el-icon--upload-color: #f09a72;
  --upload-card-effect-color: #e8875a;
  --upload-card-effect-highlight-color: #f09a72;
  --upload-card-hover-glow-bg: radial-gradient(circle, rgba(240, 154, 114, 0.16) 0%, transparent 70%);
  --upload-action-copy-color: #f09a72;
  --upload-action-btn-hover-bg: #2b2520;
  --dashboard-title-bg: rgba(232, 135, 90, 0.18);
  --login-input-underline-color: #f09a72;
  --login-input-label-focus-color: #f09a72;
  --tabs-switcher-accent-color: #f09a72;
  --tabs-switcher-current-color: #f09a72;
  --tabs-switcher-current-bg: rgba(232, 135, 90, 0.2);
  --tabs-switcher-current-border-color: #e8875a;

  /* 深色阴影 */
  --card-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45), 0 2px 8px -1px rgba(0, 0, 0, 0.25);
  --card-shadow-hover: 0 10px 36px -4px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.35);
  --glass-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
  --popper-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
  --dialog-box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.7);
  --login-container-box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.45);
  --login-container-hover-box-shadow: 0 14px 44px -4px rgba(0, 0, 0, 0.6);
  --el-upload-dragger-hover-box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.5);

  --plyr-color-main: #e8875a;
}

/* ==========================================================================
   4. Layout & Global Containers (纯色背景下的页面布局与温润基底)
   ========================================================================== */
body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  margin: 0;
  padding: 0;
}

.container,
.main-container,
.upload-home,
.login,
.blocked-container,
.whitelist-container,
.not-found-container {
  background-color: var(--bg-color) !important;
}

/* 顶部与底栏文本 */
.page-footer {
  color: var(--page-footer-text-color) !important;
}

.page-footer a,
.footer-name {
  color: var(--page-footer-name-color) !important;
}

/* ==========================================================================
   5. Title Styling (去掉 Pacifico，改用温润无衬线与优雅下划线)
   ========================================================================== */
.title[data-v-9426cafc],
.title {
  font-family: var(--site-font-family) !important;
  font-weight: 650 !important;
  font-size: 2.15rem !important;
  letter-spacing: -0.01em !important;
  color: var(--upload-main-title-color) !important;
  text-shadow: none !important;
  animation: none !important; /* 移除抖动浮动动画，让视觉安定宁静 */
  padding-bottom: 6px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease !important;
}

.title[data-v-9426cafc]:hover,
.title:hover {
  transform: translateY(-1px) !important;
  filter: none !important;
}

.title[data-v-9426cafc]:after,
.title:after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 3px !important;
  background: var(--upload-title-underline-bg) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.title[data-v-9426cafc]:hover:after,
.title:hover:after {
  width: 60px !important;
}

.main-title[data-v-9426cafc],
.main-title {
  color: var(--upload-main-title-color) !important;
  filter: none !important;
}

/* 蜡笔划线与原字重叠效果：保证文本不模糊、边缘不锯齿 */
.title-base-text[data-v-9426cafc],
.title-base-text {
  font-family: var(--site-font-family) !important;
  font-weight: 650 !important;
  opacity: 1 !important;
}

.title:hover .title-base-text[data-v-9426cafc] {
  opacity: 1 !important;
}

.title-crayon-text[data-v-9426cafc],
.title-crayon-text {
  display: none !important; /* 隐藏手绘蜡笔重叠特效，恢复纯粹干净的字形 */
}

/* 登录页标题 */
.login-title[data-v-694d04f5],
.login-title {
  font-family: var(--site-font-family) !important;
  font-weight: 650 !important;
  font-size: 2rem !important;
  letter-spacing: -0.01em !important;
  color: var(--login-title-color) !important;
  text-shadow: none !important;
  margin-bottom: 20px !important;
}

.login-title:hover {
  text-shadow: none !important;
  color: var(--primary-color) !important;
}

/* ==========================================================================
   6. Upload Area & Cards (上传区拖拽卡片、URL上传卡片、上传列表)
   ========================================================================== */
/* 拖拽上传框：纯色背景下保持实体卡片质感，不再半透明发虚 */
[data-v-3fa3fdaf] .el-upload-dragger,
.el-upload-dragger {
  opacity: 1 !important;
  background-color: var(--el-fill-color-blank) !important;
  border-radius: 16px !important;
  border: var(--el-upload-dragger-border) !important;
  box-shadow: var(--card-shadow) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

[data-v-3fa3fdaf] .el-upload-dragger:hover,
[data-v-3fa3fdaf] .el-upload:focus-within .el-upload-dragger,
[data-v-3fa3fdaf] .el-upload-dragger.is-dragover,
.el-upload-dragger:hover,
.el-upload-dragger.is-dragover {
  opacity: 1 !important;
  border-color: var(--primary-color) !important;
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-1px);
}

/* 上传大图标与提示文字：暖桃橙点缀 */
.el-icon--upload[data-v-3fa3fdaf],
.el-upload-dragger .el-icon--upload {
  color: var(--primary-color) !important;
}

.el-upload-dragger .el-upload__text em,
[data-v-3fa3fdaf] .el-upload__text em,
html.dark .el-upload__text[data-v-3fa3fdaf] em {
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* URL粘贴卡片 */
.paste-card[data-v-3fa3fdaf],
.paste-card {
  opacity: 1 !important;
  background-color: var(--el-fill-color-blank) !important;
  border-radius: 16px !important;
  border: var(--el-upload-dragger-border) !important;
  box-shadow: var(--card-shadow) !important;
}

.paste-card[data-v-3fa3fdaf]:hover {
  opacity: 1 !important;
  border-color: var(--primary-color) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

.upload-card-textarea[data-v-3fa3fdaf] {
  border-radius: 14px !important;
  background-color: var(--dialog-control-bg-color) !important;
  border: 1px solid var(--glass-border) !important;
}

.upload-card-textarea[data-v-3fa3fdaf]:hover,
.upload-card-textarea[data-v-3fa3fdaf]:focus-within {
  border-color: var(--primary-color) !important;
}

.upload-card-textarea[data-v-3fa3fdaf] .el-textarea__inner {
  border-radius: 14px !important;
  color: var(--text-color) !important;
}

.paste-card-upload-button[data-v-3fa3fdaf],
.paste-card-upload-button {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px -1px rgba(232, 135, 90, 0.35) !important;
}

.paste-card-upload-button[data-v-3fa3fdaf]:hover {
  background-color: var(--primary-color-accent) !important;
  border-color: var(--primary-color-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -1px rgba(232, 135, 90, 0.45) !important;
}

.paste-card-method-group[data-v-3fa3fdaf] {
  border-radius: 10px !important;
  background-color: var(--modern-action-group-bg) !important;
  border: 1px solid var(--glass-border) !important;
}

.paste-card-method-group[data-v-3fa3fdaf]:before {
  border-radius: 8px !important;
  background-color: var(--el-fill-color-blank) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.paste-card-method-button.is-active[data-v-3fa3fdaf] {
  color: var(--primary-color) !important;
  font-weight: 600 !important;
}

/* 上传列表卡片 */
.upload-list-card[data-v-3fa3fdaf],
.upload-list-card {
  border-radius: 16px !important;
  background-color: var(--el-fill-color-blank) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--card-shadow) !important;
}

.upload-list-dashboard[data-v-3fa3fdaf] {
  opacity: 1 !important;
  border-radius: 16px 16px 0 0 !important;
  background-color: var(--glass-header-bg) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: none !important;
}

.upload-list-dashboard-title[data-v-3fa3fdaf] {
  background-color: var(--dashboard-title-bg) !important;
  color: var(--primary-color) !important;
  border-radius: 10px !important;
}

.upload-list-item[data-v-00a85f8a] {
  border-radius: 12px !important;
  border: 1px solid var(--upload-list-item-border-color) !important;
  background-color: var(--el-fill-color-blank) !important;
}

.upload-list-item[data-v-00a85f8a]:hover {
  border-color: var(--upload-list-item-hover-border) !important;
  box-shadow: var(--card-shadow) !important;
}

.upload-list-item-name-wrapper[data-v-00a85f8a] {
  border-radius: 8px !important;
  background: var(--file-name-bg) !important;
  border: 1px solid var(--file-name-border) !important;
}

.upload-list-item-name-wrapper[data-v-00a85f8a]:hover {
  background: var(--file-name-hover-bg) !important;
  border-color: var(--file-name-hover-border) !important;
}

.upload-list-item-progress[data-v-00a85f8a] .el-progress-bar__inner {
  background: var(--primary-color) !important;
  border-radius: 8px !important;
}

.upload-list-item-url[data-v-00a85f8a] .el-input-group__prepend {
  background: var(--el-color-primary-light-9) !important;
  color: var(--primary-color) !important;
  border-radius: 9px 0 0 9px !important;
}

html.dark .upload-list-item-url[data-v-00a85f8a] .el-input-group__prepend {
  background: rgba(232, 135, 90, 0.18) !important;
  color: var(--primary-color-accent) !important;
}

.upload-list-item-url[data-v-00a85f8a] .el-input.is-focus .el-input-group__prepend {
  background: var(--primary-color) !important;
  color: #fff !important;
}

.upload-list-item-url[data-v-00a85f8a] .el-input__wrapper:hover,
.upload-list-item-url[data-v-00a85f8a] .el-input__wrapper.is-focus {
  border-color: var(--primary-color) !important;
}

.upload-list-item-url[data-v-00a85f8a] .el-input__wrapper.is-focus:before {
  background: linear-gradient(90deg, transparent, rgba(232, 135, 90, 0.12), transparent) !important;
}

/* 顶部操作组与按钮 */
.modern-action-group[data-v-3fa3fdaf],
.modern-action-group {
  border-radius: 12px !important;
  border: 1px solid var(--modern-action-group-border) !important;
  background-color: var(--modern-action-group-bg) !important;
}

.modern-action-btn[data-v-3fa3fdaf],
.modern-action-btn {
  border-radius: 8px !important;
  color: var(--el-text-color-regular) !important;
}

.modern-action-btn:hover {
  background-color: var(--upload-action-btn-hover-bg) !important;
  color: var(--primary-color) !important;
}

/* 右上角快捷工具按钮 */
.quick-toolbar-button,
.toggle-dark-button,
.more-button,
.upload-method-button,
.directory-tree-trigger,
.toggle-dark,
.language-switcher,
#themeToggle {
  border-radius: 12px !important;
  border: 1px solid var(--glass-border) !important;
  background-color: var(--el-fill-color-blank) !important;
  box-shadow: 0 2px 6px -1px rgba(160, 115, 85, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quick-toolbar-button:hover,
.toggle-dark-button:hover,
.more-button:hover,
.upload-method-button:hover,
.directory-tree-trigger:hover,
.toggle-dark:hover,
.language-switcher:hover,
#themeToggle:hover {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: 0 4px 12px -2px rgba(160, 115, 85, 0.14) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.upload-folder-container .el-input__wrapper {
  border-radius: 12px !important;
  border: 1px solid var(--glass-border) !important;
  background-color: var(--el-fill-color-blank) !important;
}

.upload-folder-container .el-input__wrapper:hover,
.upload-folder-container .el-input__wrapper:focus-within {
  border-color: var(--primary-color) !important;
}

/* ==========================================================================
   7. Login Page (登录页卡片与表单精修)
   ========================================================================== */
.login-container[data-v-694d04f5],
.login-container {
  border-radius: 16px !important;
  background-color: var(--el-fill-color-blank) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--login-container-box-shadow) !important;
  padding: 42px 32px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.login-container[data-v-694d04f5]:hover,
.login-container:hover {
  box-shadow: var(--login-container-hover-box-shadow) !important;
}

/* 输入框标签下划线与聚焦颜色 */
.input-name[data-v-694d04f5]:after {
  background: var(--primary-color) !important;
  border-radius: 2px !important;
}

.input-container:has(.input-wrapper.focused) .input-name[data-v-694d04f5],
.input-container:hover .input-name[data-v-694d04f5],
.input-name[data-v-694d04f5]:hover {
  color: var(--primary-color) !important;
}

/* 密码输入框 */
.password-input[data-v-694d04f5] .el-input__wrapper,
.password-input .el-input__wrapper {
  border-radius: 12px !important;
  background-color: var(--password-input-bg-color) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.password-input[data-v-694d04f5] .el-input__wrapper:hover,
.password-input .el-input__wrapper:hover {
  border-color: var(--el-color-primary-light-3) !important;
}

.password-input[data-v-694d04f5] .el-input__wrapper:focus-within,
.password-input .el-input__wrapper:focus-within {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(232, 135, 90, 0.16) !important;
}

.password-input[data-v-694d04f5] .el-input__wrapper:hover .el-input__suffix-inner,
.password-input[data-v-694d04f5] .el-input__wrapper:focus-within .el-input__prefix {
  color: var(--primary-color) !important;
}

/* 登录提交按钮 */
.submit[data-v-694d04f5],
.submit {
  border-radius: 12px !important;
  background-color: var(--primary-color) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -2px rgba(232, 135, 90, 0.38) !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.submit[data-v-694d04f5]:not(.is-loading):hover,
.submit[data-v-694d04f5]:not(.is-loading):focus,
.submit:not(.is-loading):hover,
.submit:not(.is-loading):focus {
  background-color: var(--primary-color-accent) !important;
  box-shadow: 0 6px 18px -2px rgba(232, 135, 90, 0.48) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* ==========================================================================
   8. Admin Dashboard & Gallery (管理后台、侧边栏、卡片网格与数据表)
   ========================================================================== */
/* 侧边导航栏 */
.sidebar-container[data-v-7e86d3a2],
.sidebar-container {
  border-radius: 16px !important;
  background-color: var(--el-fill-color-blank) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--card-shadow) !important;
}

.menu-item[data-v-7e86d3a2],
.menu-item {
  border-radius: 10px !important;
  color: var(--el-text-color-regular) !important;
  transition: all 0.2s ease !important;
}

.menu-item[data-v-7e86d3a2]:hover,
.menu-item:hover {
  background-color: var(--el-color-primary-light-9) !important;
  color: var(--primary-color) !important;
}

html.dark .menu-item[data-v-7e86d3a2]:hover,
html.dark .menu-item:hover {
  background-color: rgba(232, 135, 90, 0.12) !important;
  color: var(--primary-color-accent) !important;
}

.menu-item.is-active[data-v-7e86d3a2],
.menu-item.is-active {
  background-color: var(--el-color-primary-light-9) !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
}

html.dark .menu-item.is-active[data-v-7e86d3a2],
html.dark .menu-item.is-active {
  background-color: rgba(232, 135, 90, 0.2) !important;
  color: var(--primary-color-accent) !important;
}

.menu-item.is-active .menu-icon,
.menu-item:hover .menu-icon {
  color: var(--primary-color) !important;
}

/* 后台顶部控制栏 */
.admin-header-content[data-v-d8560f0c],
.admin-header-content {
  border-radius: 16px !important;
  background-color: var(--glass-header-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--card-shadow) !important;
}

.admin-header-control:hover,
.admin-header-actions #themeToggle:hover {
  color: var(--primary-color) !important;
}

/* 搜索卡片 */
.search-card[data-v-0e995c9b] .el-input__wrapper {
  border-radius: 14px !important;
  background-color: var(--el-fill-color-blank) !important;
  border: 1px solid var(--glass-border) !important;
}

.search-card[data-v-0e995c9b] .el-input__wrapper:focus-within {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(232, 135, 90, 0.15) !important;
}

/* 图片卡片与目录卡片 */
.img-card[data-v-956fb02e],
.img-card[data-v-534cf01b],
.folder-card,
.img-card {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--glass-border) !important;
  background-color: var(--el-fill-color-blank) !important;
  box-shadow: var(--card-shadow) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.img-card:hover,
.folder-card:hover {
  border-color: var(--primary-color) !important;
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-2px);
}

.dashboard-checkbox--breadcrumb.checked:before,
.dashboard-checkbox--breadcrumb[data-v-3757bfa7].checked:before {
  background: var(--primary-color) !important;
}

/* 底部浮动批量操作条 */
.batch-floating-bar[data-v-49301bcc],
.batch-floating-bar {
  border-radius: 16px !important;
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--dialog-box-shadow) !important;
}

/* 表格与管理列表 */
.main-table[data-v-a624f0ec],
.main-table {
  border-radius: 16px !important;
  border: 1px solid var(--glass-border) !important;
  background-color: var(--el-fill-color-blank) !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden !important;
}

.el-table {
  --el-table-border-color: var(--glass-border) !important;
  --el-table-header-bg-color: var(--el-fill-color-light) !important;
  --el-table-row-hover-bg-color: var(--el-color-primary-light-9) !important;
  background-color: transparent !important;
}

html.dark .el-table {
  --el-table-row-hover-bg-color: rgba(232, 135, 90, 0.1) !important;
}

.el-table th.el-table__cell {
  background-color: var(--el-fill-color-light) !important;
  color: var(--el-text-color-regular) !important;
  font-weight: 600 !important;
}

.el-table td.el-table__cell {
  border-bottom-color: var(--glass-border) !important;
}

/* 统计条动画与图标 */
.stats-fill[data-v-993a3210],
.stats-fill {
  background: var(--primary-color) !important;
  border-radius: 4px !important;
}

.file-card-header .fa-icon[data-v-993a3210] {
  color: var(--primary-color) !important;
}

/* 系统维护 - 重建索引按钮（避免被 el-button--primary 纯色背景与文本色重叠遮挡） */
.rebuild-btn[data-v-993a3210],
.action-btn.rebuild-btn,
.el-button--primary.rebuild-btn {
  background: var(--el-fill-color-blank) !important;
  background-color: var(--el-fill-color-blank) !important;
  border-color: var(--glass-border) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}

.rebuild-btn[data-v-993a3210] .fa-icon,
.rebuild-btn[data-v-993a3210] svg,
.rebuild-btn[data-v-993a3210] span,
.action-btn.rebuild-btn .fa-icon,
.action-btn.rebuild-btn svg,
.action-btn.rebuild-btn span,
.el-button--primary.rebuild-btn .fa-icon,
.el-button--primary.rebuild-btn svg,
.el-button--primary.rebuild-btn span {
  color: var(--primary-color) !important;
  fill: currentColor !important;
}

.rebuild-btn[data-v-993a3210]:hover,
.action-btn.rebuild-btn:hover,
.el-button--primary.rebuild-btn:hover {
  background: var(--el-color-primary-light-9) !important;
  background-color: var(--el-color-primary-light-9) !important;
  border-color: var(--el-color-primary-light-5) !important;
  color: var(--primary-color-accent) !important;
}

.rebuild-btn[data-v-993a3210]:hover .fa-icon,
.rebuild-btn[data-v-993a3210]:hover svg,
.rebuild-btn[data-v-993a3210]:hover span,
.action-btn.rebuild-btn:hover .fa-icon,
.action-btn.rebuild-btn:hover svg,
.action-btn.rebuild-btn:hover span,
.el-button--primary.rebuild-btn:hover .fa-icon,
.el-button--primary.rebuild-btn:hover svg,
.el-button--primary.rebuild-btn:hover span {
  color: var(--primary-color-accent) !important;
}

/* 深色模式下的重建索引按钮 */
html.dark .rebuild-btn[data-v-993a3210],
html.dark .action-btn.rebuild-btn,
html.dark .el-button--primary.rebuild-btn,
body.dark .rebuild-btn[data-v-993a3210],
body.dark .action-btn.rebuild-btn,
body.dark .el-button--primary.rebuild-btn,
.dark .rebuild-btn[data-v-993a3210],
.dark .action-btn.rebuild-btn,
.dark .el-button--primary.rebuild-btn {
  background: var(--el-fill-color-light) !important;
  background-color: var(--el-fill-color-light) !important;
  border-color: var(--glass-border) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}

html.dark .rebuild-btn[data-v-993a3210] .fa-icon,
html.dark .rebuild-btn[data-v-993a3210] svg,
html.dark .rebuild-btn[data-v-993a3210] span,
html.dark .action-btn.rebuild-btn .fa-icon,
html.dark .action-btn.rebuild-btn svg,
html.dark .action-btn.rebuild-btn span,
html.dark .el-button--primary.rebuild-btn .fa-icon,
html.dark .el-button--primary.rebuild-btn svg,
html.dark .el-button--primary.rebuild-btn span,
body.dark .rebuild-btn[data-v-993a3210] .fa-icon,
body.dark .rebuild-btn[data-v-993a3210] svg,
body.dark .rebuild-btn[data-v-993a3210] span,
body.dark .action-btn.rebuild-btn .fa-icon,
body.dark .action-btn.rebuild-btn svg,
body.dark .action-btn.rebuild-btn span,
body.dark .el-button--primary.rebuild-btn .fa-icon,
body.dark .el-button--primary.rebuild-btn svg,
body.dark .el-button--primary.rebuild-btn span,
.dark .rebuild-btn[data-v-993a3210] .fa-icon,
.dark .rebuild-btn[data-v-993a3210] svg,
.dark .rebuild-btn[data-v-993a3210] span,
.dark .action-btn.rebuild-btn .fa-icon,
.dark .action-btn.rebuild-btn svg,
.dark .action-btn.rebuild-btn span,
.dark .el-button--primary.rebuild-btn .fa-icon,
.dark .el-button--primary.rebuild-btn svg,
.dark .el-button--primary.rebuild-btn span {
  color: var(--primary-color) !important;
  fill: currentColor !important;
}

html.dark .rebuild-btn[data-v-993a3210]:hover,
html.dark .action-btn.rebuild-btn:hover,
html.dark .el-button--primary.rebuild-btn:hover,
body.dark .rebuild-btn[data-v-993a3210]:hover,
body.dark .action-btn.rebuild-btn:hover,
body.dark .el-button--primary.rebuild-btn:hover,
.dark .rebuild-btn[data-v-993a3210]:hover,
.dark .action-btn.rebuild-btn:hover,
.dark .el-button--primary.rebuild-btn:hover {
  background: rgba(232, 135, 90, 0.15) !important;
  background-color: rgba(232, 135, 90, 0.15) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color-light-3, #efa889) !important;
}

html.dark .rebuild-btn[data-v-993a3210]:hover .fa-icon,
html.dark .rebuild-btn[data-v-993a3210]:hover svg,
html.dark .rebuild-btn[data-v-993a3210]:hover span,
html.dark .action-btn.rebuild-btn:hover .fa-icon,
html.dark .action-btn.rebuild-btn:hover svg,
html.dark .action-btn.rebuild-btn:hover span,
html.dark .el-button--primary.rebuild-btn:hover .fa-icon,
html.dark .el-button--primary.rebuild-btn:hover svg,
html.dark .el-button--primary.rebuild-btn:hover span,
body.dark .rebuild-btn[data-v-993a3210]:hover .fa-icon,
body.dark .rebuild-btn[data-v-993a3210]:hover svg,
body.dark .rebuild-btn[data-v-993a3210]:hover span,
body.dark .action-btn.rebuild-btn:hover .fa-icon,
body.dark .action-btn.rebuild-btn:hover svg,
body.dark .action-btn.rebuild-btn:hover span,
body.dark .el-button--primary.rebuild-btn:hover .fa-icon,
body.dark .el-button--primary.rebuild-btn:hover svg,
body.dark .el-button--primary.rebuild-btn:hover span,
.dark .rebuild-btn[data-v-993a3210]:hover .fa-icon,
.dark .rebuild-btn[data-v-993a3210]:hover svg,
.dark .rebuild-btn[data-v-993a3210]:hover span,
.dark .action-btn.rebuild-btn:hover .fa-icon,
.dark .action-btn.rebuild-btn:hover svg,
.dark .action-btn.rebuild-btn:hover span,
.dark .el-button--primary.rebuild-btn:hover .fa-icon,
.dark .el-button--primary.rebuild-btn:hover svg,
.dark .el-button--primary.rebuild-btn:hover span {
  color: var(--primary-color-light-3, #efa889) !important;
}

/* ==========================================================================
   9. Element Plus UI Component Refinements (按钮、弹窗、下拉、表单控件)
   ========================================================================== */
/* 通用卡片与弹窗 */
.el-card {
  border-radius: 16px !important;
  border: 1px solid var(--glass-border) !important;
  background-color: var(--el-fill-color-blank) !important;
  box-shadow: var(--card-shadow) !important;
}

.el-dialog,
.el-message-box {
  border-radius: 16px !important;
  border: 1px solid var(--glass-border) !important;
  background-color: var(--dialog-surface-bg-color) !important;
  box-shadow: var(--dialog-box-shadow) !important;
}

.el-dialog__header,
.el-message-box__header {
  border-bottom: 1px solid var(--glass-border) !important;
  padding: 18px 24px !important;
}

.el-dialog__title,
.el-message-box__title {
  font-family: var(--site-font-family) !important;
  font-weight: 650 !important;
  color: var(--text-color) !important;
}

.el-dialog__header:after,
.el-message-box__header:after {
  display: none !important;
}

/* 下拉菜单与 Popper 浮层 */
.el-popper.is-light,
.el-popper.is-pure,
.el-dropdown__popper,
.el-select__popper,
.suggestion-dropdown {
  border-radius: 14px !important;
  border: 1px solid var(--glass-border) !important;
  background-color: var(--popper-bg-color) !important;
  box-shadow: var(--popper-shadow) !important;
}

.el-dropdown-menu__item,
.el-select-dropdown__item {
  border-radius: 8px !important;
  margin: 3px 6px !important;
  color: var(--el-text-color-regular) !important;
  transition: all 0.15s ease !important;
}

.el-dropdown-menu__item:hover,
.el-dropdown-menu__item:focus,
.el-select-dropdown__item.is-hovering,
.el-select-dropdown__item:hover {
  background-color: var(--el-color-primary-light-9) !important;
  color: var(--primary-color) !important;
}

html.dark .el-dropdown-menu__item:hover,
html.dark .el-dropdown-menu__item:focus,
html.dark .el-select-dropdown__item.is-hovering,
html.dark .el-select-dropdown__item:hover {
  background-color: rgba(232, 135, 90, 0.15) !important;
  color: var(--primary-color-accent) !important;
}

.el-select-dropdown__item.is-selected {
  color: var(--primary-color) !important;
  font-weight: 600 !important;
}

/* 按钮样式：柔和圆角与温润微交互 */
.el-button {
  border-radius: 12px !important;
  font-family: var(--site-font-family) !important;
  font-weight: 500 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.el-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px -1px rgba(232, 135, 90, 0.35) !important;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--primary-color-accent) !important;
  border-color: var(--primary-color-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -1px rgba(232, 135, 90, 0.45) !important;
  transform: translateY(-1px);
}

.el-button--primary.is-plain {
  background-color: var(--el-color-primary-light-9) !important;
  border-color: var(--el-color-primary-light-7) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}

.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px -1px rgba(232, 135, 90, 0.35) !important;
}

/* 表单输入控件 */
.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner {
  border-radius: 12px !important;
  background-color: var(--el-fill-color-blank) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.el-input__wrapper:hover,
.el-select__wrapper:hover,
.el-textarea__inner:hover {
  border-color: var(--el-color-primary-light-3) !important;
}

.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(232, 135, 90, 0.16) !important;
}

/* 开关、单选、多选 */
.el-switch.is-checked .el-switch__core {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--primary-color) !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.el-radio__input.is-checked + .el-radio__label {
  color: var(--primary-color) !important;
}

.el-radio-button.is-active .el-radio-button__inner {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  box-shadow: -1px 0 0 0 var(--primary-color) !important;
  color: #fff !important;
}

/* 标签样式 */
.el-tag--primary {
  background-color: var(--el-color-primary-light-9) !important;
  border-color: var(--el-color-primary-light-7) !important;
  color: var(--primary-color) !important;
  border-radius: 8px !important;
}

html.dark .el-tag--primary {
  background-color: rgba(232, 135, 90, 0.16) !important;
  border-color: rgba(232, 135, 90, 0.3) !important;
  color: var(--primary-color-accent) !important;
}

/* 分页控件 */
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active,
.pagination-container .el-pager li.is-active,
.page-jump .jump-btn {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.el-pagination.is-background .el-pager li:not(.is-disabled):hover,
.pagination-container .el-pager li:hover {
  color: var(--primary-color) !important;
}

.pagination-container .btn-next,
.pagination-container .btn-prev,
.pagination-container .el-pager li {
  border-radius: 8px !important;
  border: 1px solid var(--glass-border) !important;
}

/* 提示信息 */
.el-message {
  border-radius: 12px !important;
  border: 1px solid var(--glass-border) !important;
  background-color: var(--dialog-surface-bg-color) !important;
  box-shadow: var(--popper-shadow) !important;
}

/* 404 / 限制 / 白名单等辅助页面 */
.quick-link,
.shield-icon {
  color: var(--primary-color) !important;
}

.floating-shape {
  background: rgba(232, 135, 90, 0.12) !important;
}

/* ==========================================================================
   10. Scrollbar Refinement (与整体调性一致的温润细滑滚动条)
   ========================================================================== */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(180, 150, 130, 0.35);
  border-radius: 7px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 150, 130, 0.55);
}

html.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}


/* ==========================================================================
   11. Admin File Management Folder & File Card Overlay Refinement
   管理后台文件管理页：文件夹卡片与图片文件卡片底部遮罩及文件名微调
   ========================================================================== */

/* 文件夹卡片底部遮罩（浅色模式：暖白到奶油柔和渐变） */
.card-bottom-overlay[data-v-534cf01b],
.folder-card .card-bottom-overlay {
  background: linear-gradient(0deg, #fbf7ee 0%, rgba(255, 253, 250, 0.92) 60%, rgba(255, 253, 250, 0) 100%) !important;
}

/* 文件夹卡片文件名（浅色模式：文字深棕，去除灰黑投影） */
.file-name[data-v-534cf01b],
.folder-card .file-name {
  color: var(--text-color, #2e2621) !important;
  text-shadow: none !important;
  font-weight: 550;
}

/* 文件夹卡片悬浮操作按钮（浅色模式：深棕色图标与半透明浅底） */
.action-btn[data-v-534cf01b],
.folder-card .action-btn {
  background: rgba(46, 38, 33, 0.08) !important;
  color: var(--text-color, #2e2621) !important;
}

.action-btn[data-v-534cf01b]:hover,
.folder-card .action-btn:hover {
  background: rgba(46, 38, 33, 0.16) !important;
}

.folder-card .action-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* 文件夹卡片底部遮罩（深色模式：暖深棕半透明渐变） */
html.dark .card-bottom-overlay[data-v-534cf01b],
html.dark .folder-card .card-bottom-overlay,
.dark .card-bottom-overlay[data-v-534cf01b],
.dark .folder-card .card-bottom-overlay {
  background: linear-gradient(0deg, rgba(39, 34, 29, 0.92) 0%, rgba(39, 34, 29, 0.6) 65%, rgba(39, 34, 29, 0) 100%) !important;
}

/* 文件夹卡片文件名（深色模式：文字浅色，去除生硬阴影） */
html.dark .file-name[data-v-534cf01b],
html.dark .folder-card .file-name,
.dark .file-name[data-v-534cf01b],
.dark .folder-card .file-name {
  color: var(--text-color, #ede6df) !important;
  text-shadow: none !important;
}

/* 文件夹卡片悬浮操作按钮（深色模式） */
html.dark .action-btn[data-v-534cf01b],
html.dark .folder-card .action-btn,
.dark .action-btn[data-v-534cf01b],
.dark .folder-card .action-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-color, #ede6df) !important;
}

html.dark .action-btn[data-v-534cf01b]:hover,
html.dark .folder-card .action-btn:hover,
.dark .action-btn[data-v-534cf01b]:hover,
.dark .folder-card .action-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* 图片文件卡片：保留深色半透明渐变底遮罩与文字投影，确保在各类图片背景上清晰可读 */
.card-bottom-overlay[data-v-956fb02e],
.img-card:not(.folder-card) .card-bottom-overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 60%, transparent 100%) !important;
}

.file-name[data-v-956fb02e],
.img-card:not(.folder-card) .file-name {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) !important;
}

.img-card:not(.folder-card) .action-btn {
  background: hsla(0, 0%, 100%, 0.18) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   12. Dashboard & Layout Background Consistency Fix
   统一 HTML/Body/容器/侧栏/抽屉/滚动条轨道背景色，消除浅色模式下左侧（及右侧）窄竖条色差
   ========================================================================== */

/* 1. HTML 与顶层根容器底色（浅色：奶油色 #fbf7ee，深色：暖深棕 #1f1b17） */
html {
  background-color: #fbf7ee !important;
  background-color: var(--bg-color, #fbf7ee) !important;
}

html.dark,
body.dark,
.dark {
  background-color: #1f1b17 !important;
  background-color: var(--bg-color, #1f1b17) !important;
}

/* 覆盖 OverlayScrollbars 附加在 html/body 及根容器上的属性与状态 */
html[data-overlayscrollbars-body],
html[data-overlayscrollbars-body] > body,
html[data-overlayscrollbars-initialize],
body[data-overlayscrollbars-initialize],
#app,
[data-overlayscrollbars],
[data-overlayscrollbars-viewport],
[data-overlayscrollbars-padding],
[data-overlayscrollbars-content] {
  background-color: #fbf7ee !important;
  background-color: var(--bg-color, #fbf7ee) !important;
}

html.dark[data-overlayscrollbars-body],
html.dark[data-overlayscrollbars-body] > body,
html.dark[data-overlayscrollbars-initialize],
html.dark body[data-overlayscrollbars-initialize],
html.dark #app,
html.dark [data-overlayscrollbars],
html.dark [data-overlayscrollbars-viewport],
html.dark [data-overlayscrollbars-padding],
html.dark [data-overlayscrollbars-content],
body.dark #app,
.dark #app {
  background-color: #1f1b17 !important;
  background-color: var(--bg-color, #1f1b17) !important;
}

/* 2. 管理后台容器与主视口容器 */
.container,
.main-container,
.container[data-v-0e995c9b],
.main-container[data-v-0e995c9b],
.container[data-v-1c8c15ba],
.main-container[data-v-1c8c15ba],
.el-container,
.el-main {
  background-color: #fbf7ee !important;
  background-color: var(--bg-color, #fbf7ee) !important;
}

html.dark .container,
html.dark .main-container,
html.dark .container[data-v-0e995c9b],
html.dark .main-container[data-v-0e995c9b],
html.dark .container[data-v-1c8c15ba],
html.dark .main-container[data-v-1c8c15ba],
html.dark .el-container,
html.dark .el-main,
.dark .container,
.dark .main-container,
.dark .container[data-v-0e995c9b],
.dark .main-container[data-v-0e995c9b],
.dark .container[data-v-1c8c15ba],
.dark .main-container[data-v-1c8c15ba],
.dark .el-container,
.dark .el-main {
  background-color: #1f1b17 !important;
  background-color: var(--bg-color, #1f1b17) !important;
}

/* 3. 侧栏、折叠侧栏、抽屉与 el-aside 背景与页面底色一致 */
.el-aside,
aside,
.sidebar-container,
.sidebar-container.is-collapsed,
.sidebar-container[data-v-7e86d3a2],
.sidebar-container.is-collapsed[data-v-7e86d3a2] {
  background-color: #fbf7ee !important;
  background-color: var(--bg-color, #fbf7ee) !important;
}

html.dark .el-aside,
html.dark aside,
html.dark .sidebar-container,
html.dark .sidebar-container.is-collapsed,
html.dark .sidebar-container[data-v-7e86d3a2],
html.dark .sidebar-container.is-collapsed[data-v-7e86d3a2],
.dark .el-aside,
.dark aside,
.dark .sidebar-container,
.dark .sidebar-container.is-collapsed,
.dark .sidebar-container[data-v-7e86d3a2],
.dark .sidebar-container.is-collapsed[data-v-7e86d3a2] {
  background-color: #1f1b17 !important;
  background-color: var(--bg-color, #1f1b17) !important;
}

/* 抽屉与移动端目录抽屉 */
.mobile-drawer,
.mobile-drawer[data-v-feeadb1c],
.directory-tree-drawer,
.move-drawer,
.el-drawer,
.el-drawer__body,
.el-drawer__header,
.el-drawer__footer {
  background-color: #fbf7ee !important;
  background-color: var(--bg-color, #fbf7ee) !important;
}

html.dark .mobile-drawer,
html.dark .mobile-drawer[data-v-feeadb1c],
html.dark .directory-tree-drawer,
html.dark .move-drawer,
html.dark .el-drawer,
html.dark .el-drawer__body,
html.dark .el-drawer__header,
html.dark .el-drawer__footer,
.dark .mobile-drawer,
.dark .mobile-drawer[data-v-feeadb1c],
.dark .directory-tree-drawer,
.dark .move-drawer,
.dark .el-drawer,
.dark .el-drawer__body,
.dark .el-drawer__header,
.dark .el-drawer__footer {
  background-color: #1f1b17 !important;
  background-color: var(--bg-color, #1f1b17) !important;
}

/* 4. 原生与 OverlayScrollbars 滚动条轨道背景修复（与页面底色完全融合） */
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#app::-webkit-scrollbar-track,
.container::-webkit-scrollbar-track,
.main-container::-webkit-scrollbar-track,
.el-main::-webkit-scrollbar-track,
.el-aside::-webkit-scrollbar-track {
  background: transparent !important;
  background-color: transparent !important;
}

/* OverlayScrollbars 滚动条轨道 */
.os-scrollbar,
.os-scrollbar-track,
.os-theme-dark,
.os-theme-light,
.os-theme-dark .os-scrollbar,
.os-theme-dark .os-scrollbar-track,
.os-theme-light .os-scrollbar,
.os-theme-light .os-scrollbar-track {
  --os-track-bg: transparent !important;
  --os-track-bg-hover: transparent !important;
  --os-track-bg-active: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
}

html.dark .os-scrollbar,
html.dark .os-scrollbar-track,
html.dark .os-theme-dark,
html.dark .os-theme-dark .os-scrollbar,
html.dark .os-theme-dark .os-scrollbar-track,
.dark .os-scrollbar,
.dark .os-scrollbar-track,
.dark .os-theme-dark,
.dark .os-theme-dark .os-scrollbar,
.dark .os-theme-dark .os-scrollbar-track {
  --os-track-bg: transparent !important;
  --os-track-bg-hover: transparent !important;
  --os-track-bg-active: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Element Plus 内部滚动条 */
.el-scrollbar,
.el-scrollbar__bar,
.el-scrollbar__wrap {
  background: transparent !important;
  background-color: transparent !important;
}