/* 基础设置 */
body {
  font-family: "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background-color: #f0f9ff;
  margin: 0;
  padding: 20px;
  padding-top: 0;
  color: #333;
}

h1 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 26px;
}

/* 顶部导航栏 */
/* 固定顶部工具栏 */
/* ✅ 固定顶部工具栏（按钮区域） */
.sticky-toolbar {
  position: fixed;
  top: 0; /* 视情况微调，例如 header 高度 */
  left: 20px; /* 如果你侧边栏宽度是240px，适配它 */
  right: 10px;
  z-index: 1001;
  background: #fff;
  padding: 6px 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ✅ 操作面板区域也固定在按钮下方 */
.tool-panel.active {
  display: block;
  position: fixed;
  top: 130px; /* 工具栏按钮下面 */
  left: 20px; /* 适配侧边栏 */
  right: 10px;
  z-index: 1000;
  background: #fff;
  padding: 16px 24px;
  border-bottom: 1px solid #ddd;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ✅ 工具栏下方内容需要添加上边距，避免被挡住 */
.container-2col.shifted {
  margin-top: 200px; /* ✅ 当面板展开时下移 */
  transition: margin-top 0.3s ease;
}
/* 当菜单栏展开时 */
.container-2col.shifted-toolbar {
  margin-top: 100px; /* 可根据 toolbar 高度微调 */
}

/* 当操作面板也展开时（额外下移） */
.container-2col.shifted-panel {
  margin-top: 200px; /* 菜单 + 面板总高度 */
}

/* 两者都存在时，叠加生效 */
.container-2col.shifted-toolbar.shifted-panel {
  margin-top: 260px; /* 工具栏 + 页面选择器 + 面板都存在时下移更远 */
}
.container-2col.shifted-toolbar.shifted-panel.shifted-delete {
  margin-top: 240px;
}
.container-2col.shifted-toolbar.shifted-panel.shifted-extract {
  margin-top: 300px;
}
.container-2col.shifted-toolbar.shifted-panel.shifted-rotate {
  margin-top: 260px;
}
.container-2col.shifted-toolbar.shifted-panel.shifted-insert {
  margin-top: 340px; /* 插入内容多，额外下移 */
}
.container-2col.shifted-toolbar.shifted-panel.shifted-pagenumber {
  margin-top: 260px;
}
.container-2col.shifted-toolbar.shifted-panel.shifted-encrypt {
  margin-top: 240px;
}
.container-2col.shifted-toolbar.shifted-panel.shifted-compress {
  margin-top: 200px;
}

.container-2col.hide-left .left-panel {
  display: none;
}

.container-2col.hide-left .middle-panel {
  flex: 1;
  width: 100%;
}

/* 折叠按钮放进菜单栏时的样式 */
.pdftoggle-btn {
  font-size: 14px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  color: #333;
  margin-right: 10px;
}

/* 折叠时只显示“展开菜单” */
.toolbar.collapsed .toolbar-buttons {
  display: none;
}

.pdftoggle-btn:hover {
  background: #e0e0e0;
  text-decoration: none;
}

.toolbar-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  flex-wrap: wrap;
}

.toolbar-selector label {
  font-weight: bold;
  white-space: nowrap;
}

.toolbar-selector input {
  flex: 1;
  max-width: 240px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}


/* 顶部按钮样式 */
.toolbar button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #f1f1f1;
  color: black;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.toolbar button:hover {
  background: #bbdefb;
  color: #1e88e5;
}
.toolbar .btn-insert { background: #FF8A65; color: white; }
.toolbar .btn-extract { background: #BA68C8; color: white; }
.toolbar .btn-encrypt { background: #FFD54F; color: #333; }
.toolbar .btn-export { background: #00C4B4; color: white; }

/* 操作面板固定展示（只展示激活的） */
.tool-panel {
  display: none;
  position: sticky;
  top: 120px; /* 工具栏下方紧贴 */
  z-index: 997;
  background: #fff;
  padding: 16px 24px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-width: 1200px;
  margin: 10px auto;
}

/* 只有激活面板才显示 */

.tool-panel p,
.page-selector label {
  color: #2e7d32;
}
.top-nav {
  background: #f9f9fb;
  color: #333;
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  margin: 20px auto;
  max-width: 1000px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: "微软雅黑", sans-serif;
}

.top-nav nav {
  display: flex;
  gap: 30px;
}

.top-nav nav a {
  color: #555;
  text-decoration: none;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.top-nav nav a:hover {
  background: #eaf3ff;
  color: #2c7be5;
}

.top-nav nav a.active {
  background: #2c7be5;
  color: #fff;
  font-weight: bold;
}
/* 顶部操作区：横向按钮组 */
/* ✅ 改为双列分布：左侧固定宽度，右侧自适应 */
.toolbar {
  display: flex;
  justify-content: space-between; /* 关键 */
  align-items: flex-start;
  gap: 20px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  max-width: 1400px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* 默认纵向布局 */
.toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  min-width: 260px;
  transition: all 0.3s ease;
}

/* 折叠状态下变成横向结构 */
.toolbar.collapsed .toolbar-left {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ✅ 折叠菜单时让容器上移 */
.container-2col.toolbar-collapsed {
  margin-top: 30px !important;
}

/* 确保选择器和按钮间距合理 */
.toolbar-left .toolbar-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-left .toolbar-selector input {
  width: 180px;
}

/* 折叠状态下按钮自动紧跟输入框 */
.toolbar.collapsed .toolbar-left .pdftoggle-btn {
  margin-top: 0;
}


/* ✅ 控制按钮区域不再向下堆叠，避免压缩高度 */
.toolbar-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* ✅ 右侧按钮组保持靠左、自动换行 */
.toolbar-buttons {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  min-width: 0;
}
.toolbar-buttons button.active {
  background-color: #2c3e50;  /* 深蓝背景 */
  color: white;               /* 白色文字 */
  border-radius: 6px;
  font-weight: bold;
  box-shadow: 0 0 0 2px #aaa; /* 添加边框阴影更明显 */
}

/* 折叠后最小化样式 */
.toolbar.collapsed {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 20px;
  margin: 10px 40px; /* 左右可微调 */
}

.toolbar .btn-green {
  background: #388e3c;
  color: white;
  border: none;
}
.toolbar .btn-red {
  background: #d32f2f;
  color: white;
  border: none;
}



/* 两栏布局（上传 + 缩略图） */
.container-2col {
  display: flex;
  gap: 5px;
  max-width: 1500px;
  margin: auto;
  padding: 50px 10px;
  align-items: flex-start;
  margin-top: 60px; /* 默认时的 margin-top */
  transition: margin-top 0.3s ease;
}
@media (max-width: 900px) {
  .container-2col {
    flex-direction: column;
    padding: 20px 10px;
    margin-top: 300px !important; /* 让出工具栏 + 面板高度 */
    gap: 20px;
  }

  .tool-panel.active {
    position: static;  /* ✅ 不要固定了，否则会盖住缩略图 */
    margin-top: -20px; /* 微调位置贴紧按钮 */
  }

  .sticky-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
  }

  .toolbar {
    border: none;
    box-shadow: none;
  }
}



/* 左中右区域统一美化 */
.left-panel,
.middle-panel,
.right-panel {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 24px;
  flex-shrink: 0;
}

.left-panel,
.right-panel {
  width: 260px;
}

.middle-panel {
  flex: 1;
  min-width: 0;
}

/* 通用表单样式 */
input[type="file"],
input[type="text"],
input[type="number"],
input[type="password"],
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid #aed581;
  font-size: 14px;
  box-sizing: border-box;
}

/* 按钮样式 */
button {
  padding: 10px 16px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 5px;
  margin-right: 10px;
  transition: all 0.3s ease;
}
button:hover {
  opacity: 0.9;
}
.btn-green {
  background-color: #43a047;
  color: white;
}
.btn-red {
  background-color: #ef5350;
  color: white;
}
.btn-disabled {
  background-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}
.btn-disabled::after {
  content: "🚫";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 16px;
}


/* 上传文件信息框 */
.file-info {
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  padding: 10px 15px;
  margin-top: 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #33691e;
  border-left: 6px solid #00C4B4;
  font-weight: bold;
  font-family: "Comic Sans MS", "Poppins", sans-serif;
}
.pdf-extra-info {
  margin-top: 8px;
  white-space: pre-wrap;
}

.hidden {
  display: none !important;
}


/* 页面选择器模块样式 */
.page-selector {
  margin-bottom: 25px;
  padding: 16px 20px;
  border: 1px dashed #ccc;
  background-color: #fdfdfd;
  border-radius: 10px;
  font-size: 15px;
}
.page-selector label {
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
}
#pageSelectorInput {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  margin-bottom: 0;
}

/* 页面预览标题 */
.preview-section h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #2e7d32;
  text-align: center;
}

/* 缩略图网格 */
.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 24px;
}

/* 缩略图卡片 */
.page-thumb {
  position: relative;
  padding: 6px;
  border: 2px solid #c3c3c3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
  cursor: grab;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 3/4; /* 模拟 A4 比例 */
  overflow: hidden;
}
.page-thumb img {
  height: 100%;
  width: auto;
  display: block;
  margin: auto;
}
.page-thumb span {
  position: absolute;
  bottom: 4px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 5px;
}
.page-thumb.selected {
  border-color: #2196f3;
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
}
/* ✅ 显示 “已选中” 状态标签 */
.page-thumb.selected::after {
  content: "✅ 已选中该页";
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(33, 150, 243, 0.8); /* 蓝色背景 */
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
}

.page-thumb.dragging {
  opacity: 0.6;
  border: 2px dashed #2196f3;
  transform: scale(0.95);
}
.page-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}


/* 默认竖图 A4 比例（无需改动） */
.page-thumb {
  aspect-ratio: 3 / 4;
}

/* 横图情况动态切换为横向比例 */
.page-thumb.landscape-thumb {
  aspect-ratio: 4 / 3;
}

.page-thumb .delete-x {
  position: absolute;
  top: 4px;
  right: 4px;
  background: white;
  color: red;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  border: 1px solid red;
  transition: 0.2s;
}

.page-thumb .delete-x:hover {
  background: red;
  color: white;
}

.page-thumb.marked-delete {
  opacity: 0.4;
  border: 2px dashed red;
}

.page-thumb.marked-delete::after {
  content: "❌ 已标记删除";
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(255, 0, 0, 0.75);
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
}

/* 拖拽提示条 */
.drop-indicator {
  height: 6px;
  background-color: #42a5f5;
  border-radius: 3px;
  margin: 4px 0;
  animation: blink 1s infinite alternate;
}
@keyframes blink {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* 欢迎提示 */
.welcome-box {
  text-align: center;
  color: #33691e;
  padding: 60px 20px;
  font-size: 16px;
  border: 1px dashed #aed581;
  border-radius: 12px;
  background: #f1f8e9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  grid-column: 1 / -1;
  transition: all 0.3s ease;
}
.welcome-box h2 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: bold;
}
.welcome-box p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 400px;
  margin: auto;
}

/* 加载动画容器 */
.generating-box {
  text-align: center;
  padding: 60px 20px;
  font-size: 16px;
  color: #33691e;
  border: 1px dashed #aed581;
  border-radius: 12px;
  background: #f1f8e9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  grid-column: 1 / -1;
  transition: all 0.3s ease;
}
.generating-box .spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 15px;
  border: 4px solid #ccc;
  border-top: 4px solid #42a5f5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-preview-box {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: #444;
  border: 1px dashed #ccc;
  border-radius: 12px;
  background: #fdfdfd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  grid-column: 1 / -1;
  animation: fadeIn 0.6s ease-in;
}

.loading-text {
  font-weight: bold;
  font-size: 18px;
  display: inline-block;
}

.loading-text .dot {
  display: inline-block;
  animation: jump 1.5s infinite;
}

.loading-text .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-text .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes jump {
  0%   { transform: translateY(0); opacity: 0.5; }
  50%  { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.5; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* 操作功能块 */
.tools-section details {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fcfcfc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tools-section summary {
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
}

/* 导出/重置按钮区域 */
.action-section {
  text-align: center;
  margin-top: 25px;
}
.action-section button {
  font-size: 15px;
  padding: 12px 24px;
}

/* 提示信息框 */
.message-box {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 6px;
  color: white;
  font-size: 15px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: opacity 0.5s ease;
}
.message-box.success { background-color: #4CAF50; }
.message-box.error { background-color: #f44336; }
.hidden {
  display: none !important;
}

/* 上传进度条 */
.progress-bar-container {
  position: relative;
  width: 100%;
  height: 14px;
  background-color: #eee;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.progress-bar {
  height: 100%;
  background-color: #4caf50;
  width: 0%;
  transition: width 0.2s ease;
}
.progress-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  font-size: 13px;
  line-height: 14px;
}
/* ✅ 动画定义，放在 media query 外部 */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0.3;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ✅ 小屏幕下的适配逻辑 */
@media (max-width: 900px) {
  .tool-panel.active {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    margin: 0;
    padding: 20px 16px;
    border-radius: 16px 16px 0 0;
    background: #fff;
    z-index: 9999;
    max-height: 65vh;
    overflow-y: auto;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.35s ease-out;
  }

  .container-2col {
    margin-bottom: 320px !important; /* 保证不会被挡住 */
  }

  .toolbar {
    z-index: 1; /* 工具栏较低，避免遮住面板 */
  }
}

.preview-button {
  position: absolute;
  top: 4px;
  right: 40px;
  background: #fff;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  z-index: 3;
}

.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.preview-modal.hidden {
  display: none;
}

.preview-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  overflow: scroll;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.preview-content img {
  max-width: 100%;
  max-height: 100%;
}

.close-preview {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  padding: 4px 10px;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}