/* ============================================================================
 * 在线压缩工具 · 工具区样式（PDF 压缩页 / 图片压缩页共用）
 * ----------------------------------------------------------------------------
 * 原则：工具区保持浅色、纯净、聚焦；
 *       品牌区（深蓝）由 brand/brand.css 单独负责，两者视觉区分明显但不突兀。
 * ========================================================================== */

:root {
  --tool-bg: #f4f7fb;
  --tool-card: #ffffff;
  --tool-line: #e3e9f2;
  --tool-line-strong: #d2dced;
  --tool-ink: #101f33;
  --tool-body: #46586f;
  --tool-muted: #64758c;
  --tool-navy: #1a365d;
  --tool-navy-700: #2a4770;
  --tool-navy-100: #e7eef7;
  --tool-gold: #c9a227;
  --tool-ok: #1a7f5a;
  --tool-ok-bg: #e8f6f0;
  --tool-warn: #b06a00;
  --tool-warn-bg: #fdf4e4;
  --tool-err: #b3261e;
  --tool-err-bg: #fdecea;
  --tool-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------------
 * 基础归零（本文件自持，不依赖任何 CSS 框架）
 * 【背景】本站在 2026-10 之前引入过 Tailwind Play CDN，但页面里一个 Tailwind
 *   工具类都没用到，它实际只贡献了一份 preflight 重置，却要额外加载 440KB 的
 *   运行时（浏览器里现场编译 CSS）。已移除该运行时，preflight 中真正被依赖的
 *   部分在这里以最小实现接管 —— 删掉下面任何一条都会造成可见的视觉回退：
 *     · html { line-height: 1.5 }  ← 最关键。缺了它所有文字行高会从 1.5 掉回
 *       normal，正文块变矮、按钮整体上移，页面高度缩短十几像素。
 *     · * { border-width: 0 }      ← 缺了它按钮/输入框会露出浏览器默认边框。
 *     · img/svg/video { display:block } ← 缺了它图片会以基线对齐、底部多出缝隙。
 *     · [hidden] { display:none } ← 见下方注释，缺了它 JS 里的 el.hidden = true
 *       对按钮完全无效（按钮会一直显示着）。
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

/* hidden 属性必须自己兜一次底。
 * 原因：浏览器内置样式表里 [hidden]{display:none} 属于 **UA 样式**，
 * 而作者样式表的优先级恒高于 UA 样式表 —— 所以只要本项目给同一个元素写了
 * display（例如 .btn { display: inline-flex }），那个 .btn 上的 hidden 属性就会
 * 彻底失效、按钮一直显示。这里显式再声明一次，才能让 JS 的 `el.hidden = true`
 * 在任何元素上都真的生效。 */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}

/* 表单控件：字体/颜色统一继承页面，避免各浏览器默认样式不一致 */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

/* 媒体元素块级化（消除行内基线间隙） */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

/* 标题、段落、列表默认外边距归零，间距一律由各组件自己定义 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

body.tool-page {
  margin: 0;
  font-family: var(--tool-font);
  color: var(--tool-body);
  background:
    radial-gradient(900px 380px at 50% -140px, #ffffff, transparent 70%),
    var(--tool-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ------------------------------------------------------------------ 布局骨架 */

.tool-main {
  padding: 40px 0 64px;
}

.tool-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

.tool-hero {
  text-align: center;
  margin-bottom: 26px;
}

.tool-hero h1 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--tool-ink);
}

.tool-hero p {
  margin: 0 auto;
  max-width: 620px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--tool-body);
}

.tool-hero__badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tool-hero__badges span {
  font-size: 12px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--tool-line);
  color: var(--tool-navy);
  font-weight: 500;
}

/* ------------------------------------------------------------------ 主卡片 */

.tool-card {
  background: var(--tool-card);
  border: 1px solid var(--tool-line);
  border-radius: 18px;
  box-shadow: 0 18px 44px -32px rgba(18, 40, 68, 0.4);
  padding: 26px;
}

.tool-card + .tool-card {
  margin-top: 20px;
}

/* 拖拽上传区 */
.dropzone {
  position: relative;
  border: 2px dashed var(--tool-line-strong);
  border-radius: 14px;
  background: #fbfcfe;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    transform 0.18s ease;
}

.dropzone:hover {
  border-color: var(--tool-navy);
  background: var(--tool-navy-100);
}

.dropzone.is-dragover {
  border-color: var(--tool-navy);
  background: var(--tool-navy-100);
  transform: scale(1.005);
}

.dropzone__icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--tool-navy-100);
  color: var(--tool-navy);
}

.dropzone__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.dropzone__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tool-ink);
}

.dropzone__sub {
  margin: 0;
  font-size: 13px;
  color: var(--tool-muted);
}

.dropzone__actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 已选文件条 */
.filebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--tool-line);
  border-radius: 12px;
  background: #fbfcfe;
}

.filebar + .filebar {
  margin-top: 10px;
}

.filebar__ico {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--tool-navy-100);
  color: var(--tool-navy);
}

.filebar__ico svg {
  width: 19px;
  height: 19px;
}

.filebar__meta {
  min-width: 0;
  flex: 1;
}

.filebar__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--tool-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filebar__size {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--tool-muted);
}

/* ------------------------------------------------------------------ 选项区 */

.opts {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--tool-line);
}

.opts__row + .opts__row {
  margin-top: 20px;
}

.opts__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tool-ink);
}

.opts__label .val {
  font-weight: 600;
  color: var(--tool-navy);
}

/* 分段选择器 */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 5px;
  background: var(--tool-navy-100);
  border-radius: 12px;
}

.seg label {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
}

.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg span {
  display: block;
  padding: 10px 8px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tool-body);
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  line-height: 1.35;
}

.seg span small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--tool-muted);
  margin-top: 2px;
}

.seg input:checked + span {
  background: #fff;
  color: var(--tool-navy);
  box-shadow: 0 6px 16px -10px rgba(18, 40, 68, 0.5);
}

.seg input:checked + span small {
  color: var(--tool-navy-700);
}

.seg input:focus-visible + span {
  outline: 2px solid var(--tool-navy);
  outline-offset: 2px;
}

/* 滑块 */
.slider {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--tool-navy-100);
  outline: none;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tool-navy);
  cursor: pointer;
  box-shadow: 0 3px 10px -3px rgba(18, 40, 68, 0.5);
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tool-navy);
  cursor: pointer;
}

.slider__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--tool-muted);
}

/* 下拉选择 */
.select {
  width: 100%;
  max-width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--tool-line-strong);
  border-radius: 12px;
  background: #fff;
  font-family: var(--tool-font);
  font-size: 14px;
  color: var(--tool-ink);
  cursor: pointer;
}

.select:focus {
  outline: none;
  border-color: var(--tool-navy);
  box-shadow: 0 0 0 3px var(--tool-navy-100);
}

/* ------------------------------------------------------------------ 按钮 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--tool-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s ease, background-color 0.18s ease,
    border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--tool-navy);
  color: #fff;
  box-shadow: 0 12px 26px -16px rgba(26, 54, 93, 0.95);
}

.btn--primary:not(:disabled):hover {
  background: var(--tool-navy-700);
  transform: translateY(-1px);
}

.btn--soft {
  background: #fff;
  color: var(--tool-navy);
  border-color: var(--tool-line-strong);
}

.btn--soft:not(:disabled):hover {
  border-color: var(--tool-navy);
  background: var(--tool-navy-100);
}

.btn--block {
  width: 100%;
}

.btn__arrow {
  width: 15px;
  height: 15px;
  flex: none;
}

.tool-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tool-actions .btn {
  flex: 1 1 200px;
}

/* ------------------------------------------------------------------ 进度 */

.progress {
  margin-top: 20px;
  display: none;
}

.progress.is-on {
  display: block;
}

.progress__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--tool-navy-100);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tool-navy), var(--tool-navy-700));
  transition: width 0.22s ease;
}

.progress__text {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--tool-muted);
  text-align: center;
}

/* ------------------------------------------------------------------ 结果 */

.results {
  margin-top: 20px;
}

.results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.results__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--tool-ink);
}

.summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.summary__item {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--tool-navy-100);
  border: 1px solid var(--tool-line);
  min-width: 108px;
}

.summary__item span {
  display: block;
  font-size: 11.5px;
  color: var(--tool-muted);
  margin-bottom: 3px;
}

.summary__item strong {
  font-size: 16px;
  color: var(--tool-navy);
  letter-spacing: 0.3px;
}

.summary__item strong.is-save {
  color: var(--tool-ok);
}

/* 文件结果行 */
.result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--tool-line);
  border-radius: 12px;
  background: #fff;
}

.result + .result {
  margin-top: 10px;
}

.result__thumb {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 10px;
  background: var(--tool-navy-100);
  border: 1px solid var(--tool-line);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--tool-navy);
}

.result__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result__thumb svg {
  width: 24px;
  height: 24px;
}

.result__meta {
  flex: 1;
  min-width: 0;
}

.result__name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tool-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result__sizes {
  margin: 0;
  font-size: 13px;
  color: var(--tool-body);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.result__sizes del {
  color: var(--tool-muted);
  text-decoration-thickness: 1px;
}

.result__sizes .arrow {
  color: var(--tool-muted);
}

.result__sizes .after {
  font-weight: 700;
  color: var(--tool-ink);
}

.tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
}

.tag--save {
  color: var(--tool-ok);
  background: var(--tool-ok-bg);
}

.tag--flat {
  color: var(--tool-warn);
  background: var(--tool-warn-bg);
}

.tag--err {
  color: var(--tool-err);
  background: var(--tool-err-bg);
}

.result__act {
  flex: none;
}

.result__act .btn {
  padding: 10px 16px;
  font-size: 13.5px;
}

/* 提示条 */
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.7;
  background: var(--tool-warn-bg);
  color: var(--tool-warn);
  border: 1px solid #f0dcae;
}

.notice svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}

.notice--err {
  background: var(--tool-err-bg);
  color: var(--tool-err);
  border-color: #f3c9c5;
}

.notice--info {
  background: var(--tool-navy-100);
  color: var(--tool-navy);
  border-color: var(--tool-line-strong);
}

/* ------------------------------------------------------------------ 说明区 */

.tool-tips {
  margin-top: 34px;
}

.tool-tips h2 {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tool-ink);
  text-align: center;
}

.tool-tips__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tip {
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--tool-line);
}

.tip h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tool-navy);
}

.tip p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--tool-body);
}

/* 工具页之间的互推条（属于工具区，非品牌区） */
.tool-cross {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--tool-line);
}

.tool-cross p {
  margin: 0;
  font-size: 13.5px;
  color: var(--tool-body);
}

.tool-cross strong {
  color: var(--tool-ink);
}

/* ------------------------------------------------------------------ 响应式 */

@media (max-width: 720px) {
  .tool-main {
    padding: 26px 0 46px;
  }

  .tool-shell {
    padding: 0 14px;
  }

  .tool-hero h1 {
    font-size: 23px;
  }

  .tool-hero p {
    font-size: 13.5px;
  }

  .tool-card {
    padding: 18px 16px;
    border-radius: 16px;
  }

  .dropzone {
    padding: 30px 16px;
  }

  .seg {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .result {
    flex-wrap: wrap;
  }

  .result__act {
    width: 100%;
  }

  .result__act .btn {
    width: 100%;
  }

  .tool-tips__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-actions .btn {
    flex: 1 1 100%;
  }
}