/* PDF 万能转换工具 - 网站版样式（浅色主题 · iLovePDF 风格磁贴布局） */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #2f6fed;
  --blue-dark: #1e56c8;
  --blue-light: #eaf1ff;
  --green: #16a34a;
  --green-dark: #12833c;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f6f7fb;
  --card: #ffffff;
  --danger: #dc2626;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ---------- 顶部（白底居中大标题） ---------- */
.hero {
  background: #fff;
  border-bottom: 1px solid #eef0f4;
  text-align: center;
  padding: 40px 16px 26px;
}
.hero h1 { font-size: 32px; font-weight: 700; letter-spacing: .5px; }
.hero p { font-size: 15px; color: var(--muted); margin-top: 10px; }

/* ---------- 分类筛选 pill ---------- */
.pills {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px; padding: 20px 16px 2px;
}
.pill {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--text);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.pill:hover { border-color: #b9c6e4; background: #f4f7ff; }
.pill.active { background: #1f2937; color: #fff; border-color: #1f2937; }

/* ---------- 布局 ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 14px 18px 44px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
}

.card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; color: var(--blue-dark);
  margin-bottom: 14px; font-weight: 700;
}
.step-no {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex: 0 0 auto;
}

/* ---------- 工具磁贴网格 ---------- */
.tools-sec { margin-bottom: 10px; }
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 14px;
}
@media (max-width: 560px) { .tool-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.func-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1.5px solid #e8eaee;
  background: #fff;
  border-radius: 14px;
  padding: 16px 15px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.func-btn:hover {
  transform: translateY(-3px);
  border-color: var(--cat, var(--blue));
  box-shadow: 0 8px 20px rgba(16, 24, 40, .09);
}
.func-btn:active { transform: translateY(-1px); }
.func-btn.active {
  border-color: var(--cat, var(--blue));
  background: var(--catbg, var(--blue-light));
  box-shadow: inset 0 0 0 1px var(--cat, var(--blue));
}

.func-btn .fb-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--catbg, #f1f3f8);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; margin-bottom: 12px;
}
.func-btn .fb-label { font-size: 15px; font-weight: 700; display: block; }
.func-btn .fb-desc {
  font-size: 12.5px; color: var(--muted); margin-top: 5px;
  display: block; line-height: 1.55;
}

.func-hint { margin-top: 14px; font-size: 13px; color: var(--muted); }
.func-hint b { color: var(--blue-dark); }

/* ---------- 上传区 ---------- */
.dropzone {
  border: 2px dashed #b9c6e4;
  border-radius: 14px;
  padding: 30px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  outline: none;
  background: #fafbff;
}
.dropzone:hover, .dropzone:focus { border-color: var(--blue); background: var(--blue-light); }
.dropzone.drag { border-color: var(--blue); background: var(--blue-light); }
.dz-icon { font-size: 32px; }
.dz-text { margin-top: 8px; font-size: 15px; }
.dz-link { color: var(--blue); font-weight: 600; }
.dz-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

.file-list { list-style: none; margin-top: 12px; }
.file-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 8px 12px;
  background: #f8fafc; border: 1px solid var(--line);
  border-radius: 9px; margin-bottom: 6px;
  word-break: break-all;
}
.file-list .fl-size { color: var(--muted); flex: 0 0 auto; }
.file-list .fl-x {
  margin-left: auto; flex: 0 0 auto;
  border: none; background: none; color: var(--danger);
  cursor: pointer; font-size: 15px; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
}
.file-list .fl-x:hover { background: #fee2e2; }

/* ---------- 参数 ---------- */
.opt-area { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.opt-item { display: flex; flex-direction: column; gap: 6px; }
.opt-item label { font-size: 13px; font-weight: 600; }
.opt-item input[type=number], .opt-item input[type=text], .opt-item select {
  font-family: inherit; font-size: 13.5px;
  border: 1.5px solid var(--line); border-radius: 8px;
  padding: 8px 10px; width: 150px; background: #fff; color: var(--text);
}
.opt-item input:focus, .opt-item select:focus {
  outline: none; border-color: var(--blue);
}
.radio-row { display: flex; gap: 16px; font-size: 13.5px; align-items: center; flex-wrap: wrap; }
.radio-row label { font-weight: 400; display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* ---------- 开始 / 进度 ---------- */
.action-card { text-align: center; }
.start-btn {
  font-family: inherit;
  background: var(--green); color: #fff;
  border: none; border-radius: 10px;
  font-size: 16px; font-weight: 700;
  padding: 13px 66px; cursor: pointer;
  transition: background .12s, transform .06s;
}
.start-btn:hover:not(:disabled) { background: var(--green-dark); }
.start-btn:active:not(:disabled) { transform: scale(.98); }
.start-btn:disabled { background: #9ca3af; cursor: not-allowed; }

.progress { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.progress-bar {
  flex: 1; height: 10px; border-radius: 6px;
  background: #e5e7eb; overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2f6fed, #4f8bff);
  transition: width .2s;
}
.progress-text { font-size: 12.5px; color: var(--muted); flex: 0 0 auto; min-width: 120px; text-align: left; }

/* ---------- 日志 ---------- */
.log-box {
  background: #0f172a; color: #d7e3ff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.65;
  border-radius: 10px; padding: 12px 14px;
  max-height: 240px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-all;
}
.log-err { color: #ff9d9d; }
.log-ok { color: #7ef0a5; }

/* ---------- 结果 ---------- */
.result-list { list-style: none; }
.result-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #f8fafc; font-size: 13.5px;
  word-break: break-all;
}
.result-list .rl-size { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.dl-btn {
  margin-left: auto; flex: 0 0 auto;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--blue); color: #fff;
  border: none; border-radius: 7px;
  padding: 7px 14px; cursor: pointer;
}
.dl-btn:hover { background: var(--blue-dark); }

.zip-row { margin-top: 12px; text-align: center; }
.zip-btn {
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: #fff; color: var(--blue-dark);
  border: 1.5px solid var(--blue); border-radius: 9px;
  padding: 9px 26px; cursor: pointer;
}
.zip-btn:hover { background: var(--blue-light); }

/* ---------- 页脚 ---------- */
.foot { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 10px; }