/* ==============================================
   1. 基础色调调整（基于HUE变量统一控制）
============================================== */
:root {
  /* 主色调改为深蓝色（原默认210，调整为220更偏靛蓝） */
  --hue: 220;
  
  /* 强化主色对比度（暗色调更深，亮色调更鲜明） */
  --hsl-primary-dark: var(--hue) 60% 35%;    /* 深色元素（按钮、选中状态） */
  --hsl-primary-contrast: var(--hue) 50% 45%; /* 交互元素（hover状态） */
  --hsl-primary-light: var(--hue) 65% 65%;   /* 浅色背景（高亮区域） */
}

/* 引入本地字体（造字工坊乃思体） */
@font-face {
  font-family: 'ZaoZiGongFangNaiSi'; /* 自定义字体名称 */
  font-style: normal;
  font-weight: 400; /* 常规字重 */
  /* 字体路径：相对于 custom.css 的位置（../fonts/ 对应 _files/fonts/） */
  src: url('../fonts/zaozigongfangnaisiti.woff2') format('truetype');
  /* 兼容旧浏览器（可选） */
  font-display: swap; /* 字体加载期间显示默认字体，避免空白 */
}

/* 全局替换字体 */
:root {
  --custom-font: 'ZaoZiGongFangNaiSi', sans-serif;
}

/* 应用到所有UI元素 */
body,
.file-item,
.header,
.menu,
.popup-caption,
button,
input,
select,
textarea,
.file-name,
.folder-name {
  font-family: var(--custom-font) !important;
}

/* 微调字体大小（根据字体实际显示效果调整） */
.file-name {
  font-size: 15px !important; /* 文件名稍大，提升识别度 */
}

.menu a {
  font-size: 15px !important; /* 菜单文字适配 */
}

.popup-caption {
  font-size: 1.05rem !important; /* 弹窗标题适配 */
}
/* ==============================================
   2. 布局与间距优化zuoxia
============================================== */
:root {
  /* 网格视图字体稍大，提升可读性 */
  --grid-font-size: 15px;
  
  /* 列表视图最大宽度增加，利用更多空间 */
  --list-max-width: 1200px;
  
  /* 侧边栏默认宽度调整，hover时更宽以显示完整信息 */
  --sidebar-width: calc(8vw + 160px);
  --sidebar-width-hover: 520px;
  
  /* 文件夹菜单图标与文字间距优化 */
  --menu-text-indent: 8px;
  --menu-folder-icon-size: 24px; /* 文件夹图标稍大更醒目 */
}


/* ==============================================
   3. 文件卡片与列表样式美化
============================================== */
/* 网格视图文件项：添加圆角和阴影，hover时有微动效 */
.file-item {
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.file-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* 列表视图行高调整，添加分隔线 */
.rows .file-item {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.rows .file-item:last-child {
  border-bottom: none !important;
}


/* ==============================================
   4. 弹窗预览样式增强
============================================== */
:root {
  /* 弹窗背景半透明黑，更聚焦内容 */
  --popup-bg: rgba(15, 15, 15, 0.95);
  
  /* 弹窗标题文字更清晰 */
  --popup-caption-color: #f0f0f0;
  --popup-caption-font-weight: 400;
  --popup-caption-max-width: 800px; /* 宽屏显示更长标题 */
  --popup-caption-line-clamp: 4; /* 最多显示4行标题 */
}

/* 弹窗关闭按钮hover效果 */
.popup-close:hover {
  background-color: rgba(255,255,255,0.2) !important;
}


/* ==============================================
   5. 顶部导航与菜单美化
============================================== */
/* 导航栏背景色 */
.header {
  background-color: hsl(var(--hsl-primary-dark) / 5%) !important;
  border-bottom: 1px solid hsl(var(--hsl-primary-dark) / 10%) !important;
}

/* 菜单文字hover高亮 */
.menu a:hover {
  color: hsl(var(--hsl-primary-contrast)) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* 显示菜单折叠/展开图标（默认opacity为0） */
:root {
  --menu-icon-toggle-opacity: 0.7;
}

.menu-icon-toggle:hover {
  opacity: 1 !important;
}


/* ==============================================
   6. 响应式优化（手机端适配）
============================================== */
@media (max-width: 768px) {
  :root {
    --grid-font-size: 14px; /* 小屏幕字体略小 */
    --sidebar-width-small: 90vw; /* 侧边栏占更多宽度 */
  }
  
  /* 手机端文件卡片间距减少 */
  .grid {
    gap: 8px !important;
    padding: 8px !important;
  }
}


/* 用CSS背景图实现（无需修改HTML） */
body::after {
  content: "";
  position: fixed;
  bottom: 20px;
  right: 40px;
  width: 100px;
  height: 100px; /* 若图片是正方形，固定高度；否则用background-size调整 */
  background-image: url("https://pay.vfxcn.cn/html/emfogo.png"); /* 图片路径 */
  background-size: contain; /* 自适应容器 */
  background-repeat: no-repeat;
  background-position: center;
  z-index: 9999;
  opacity: 0.8;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

body::after:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* 手机端调整 */
@media (max-width: 768px) {
  body::after {
    width: 80px;
    height: 80px;
    bottom: 15px;
    right: 15px;
  }
}