/* 免费工具区的样式。沿用站点的暖白/近黑/金三色，但版式比正文页更"应用"一些：
   工具页的主角是那个拖拽框，不是文字。 */

.tool-wrap { max-width: 1000px; }

/* 隐私声明放在最上面。这批工具唯一真正的差异化就是"文件不上传"，
   服务器也确实做不了（PHP 禁了 exec 那一票、30 秒执行上限）。 */
.tool-privacy {
  display: flex; align-items: center; gap: .8rem;
  background: var(--v3-card); border: 1px solid var(--v3-hair); border-left: 3px solid var(--v3-gold);
  padding: .9rem 1.2rem; margin: 0 0 1.8rem; font-size: .88rem; line-height: 1.7;
}
.tool-privacy b { color: var(--v3-text); }
.tool-privacy span { color: var(--v3-text-soft); }

.tool-drop {
  border: 2px dashed rgba(191, 155, 48, .55); background: var(--v3-card);
  padding: clamp(2rem, 6vw, 3.6rem) 1.5rem; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.tool-drop:hover, .tool-drop.is-over { border-color: var(--v3-red); background: rgba(200, 16, 46, .03); }
.tool-drop__big { margin: 0 0 .5rem !important; font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 800; }
.tool-drop__sub { margin: 0 !important; font-size: .84rem; color: var(--v3-text-soft); }
.tool-drop input { display: none; }

.tool-opts {
  display: grid; gap: 1.2rem clamp(1.2rem, 3vw, 2.4rem); margin: 1.6rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding: 1.4rem; background: var(--v3-card); border: 1px solid rgba(26, 20, 18, .1);
}
.tool-opt label { display: block; font-size: .8rem; letter-spacing: .06em; color: var(--v3-text-soft); margin-bottom: .5rem; }
.tool-opt select, .tool-opt input[type="number"], .tool-opt input[type="text"] {
  width: 100%; padding: .55rem .7rem; border: 1px solid rgba(26, 20, 18, .18);
  background: #fff; font: inherit; font-size: .92rem; border-radius: 0;
}
.tool-opt input[type="range"] { width: 100%; accent-color: var(--v3-red); }
.tool-opt input[type="color"] { width: 100%; height: 38px; padding: 2px; border: 1px solid rgba(26, 20, 18, .18); background: #fff; }
.tool-opt__val { font-weight: 800; color: var(--v3-red); font-variant-numeric: tabular-nums; }
.tool-opt__row { display: flex; gap: .6rem; align-items: center; }
.tool-opt__check { display: flex; align-items: center; gap: .5rem; font-size: .86rem; }
.tool-opt__check input { accent-color: var(--v3-red); width: 16px; height: 16px; }

.tool-presets { display: flex; gap: .5rem; flex-wrap: wrap; }
.tool-presets button {
  border: 1px solid rgba(26, 20, 18, .18); background: #fff; padding: .45rem .9rem;
  font: inherit; font-size: .84rem; cursor: pointer; border-radius: 0;
}
.tool-presets button.is-on { border-color: var(--v3-red); color: var(--v3-red); font-weight: 700; }
.tool-swatch { display: inline-block; width: 18px; height: 18px; border: 1px solid rgba(26, 20, 18, .25); vertical-align: middle; }

.tool-preview-box { margin: 1.4rem 0 0; }
/* display:block 会盖掉 [hidden] 的 display:none，所以要单独把 hidden 情况写回去 */
.tool-preview-box canvas[hidden] { display: none; }
.tool-preview-box canvas {
  max-width: 100%; max-height: 420px; width: auto; height: auto; display: block;
  cursor: crosshair; border: 1px solid var(--v3-hair);
}
.tool-pickhint { margin: .6rem 0 0 !important; font-size: .82rem; color: var(--v3-text-soft); }

.tool-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 2rem 0 .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--v3-hair);
}
.tool-bar h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 1.05rem !important; }
.tool-bar h2::before { content: none !important; }
.tool-count { font-size: .8rem; color: var(--v3-gold); letter-spacing: .1em; }
.tool-bulk {
  background: var(--v3-ink); color: #f5f1ea; border: 0; padding: .6rem 1.3rem;
  font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; border-radius: 0;
}
.tool-bulk:hover { background: var(--v3-red); }

.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tool-item {
  display: flex; align-items: center; gap: 1rem; padding: .8rem;
  background: var(--v3-card); border: 1px solid rgba(26, 20, 18, .1);
}
.tool-item__thumb { width: 56px; height: 56px; object-fit: cover; flex: none; background: #eee; }
.tool-item__meta { flex: 1; min-width: 0; }
.tool-item__name {
  margin: 0 0 .25rem !important; font-weight: 700; font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-item__size { margin: 0 !important; font-size: .82rem; color: var(--v3-text-soft); font-variant-numeric: tabular-nums; }
.tool-item__save { color: var(--v3-red); font-weight: 700; margin-left: .5rem; }
.tool-item__dim { margin: .2rem 0 0 !important; font-size: .74rem; color: var(--v3-gold); font-variant-numeric: tabular-nums; }
.tool-item__dl {
  flex: none; background: transparent; color: var(--v3-red); border: 1px solid rgba(200, 16, 46, .35);
  padding: .45rem 1rem; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; border-radius: 0;
}
.tool-item__dl:hover:not(:disabled) { background: var(--v3-red); color: #fff; }
.tool-item__dl:disabled { opacity: .4; cursor: default; }
.tool-item__x {
  flex: none; background: transparent; border: 0; color: var(--v3-text-soft);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
.tool-item__x:hover { color: var(--v3-red); }

/* 工具索引页的卡片墙 */
.tool-grid {
  list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  border-top: 1px solid var(--v3-hair); border-left: 1px solid var(--v3-hair);
}
.tool-grid li { margin: 0 !important; }
.tool-grid a {
  display: block; height: 100%; padding: clamp(1.2rem, 2.5vw, 1.7rem);
  background: var(--v3-card); text-decoration: none; border: 0 !important;
  border-right: 1px solid var(--v3-hair); border-bottom: 1px solid var(--v3-hair);
  transition: background .2s;
}
.tool-grid a:hover { background: rgba(191, 155, 48, .07); }
.tool-grid h2 {
  margin: 0 0 .5rem !important; padding: 0 !important; border: 0 !important;
  font-size: 1.1rem !important; font-weight: 800 !important; color: var(--v3-text) !important;
}
.tool-grid h2::before { content: none !important; }
.tool-grid p { margin: 0 !important; font-size: .86rem; line-height: 1.75; color: var(--v3-text-soft); }
.tool-grid .go { display: inline-block; margin-top: .9rem; font-size: .8rem; color: var(--v3-red); letter-spacing: .06em; }

.tool-how { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.tool-how ol { padding-left: 1.3rem; }
.tool-how li { margin-bottom: .7rem; line-height: 1.9; }

.tool-faq { margin-top: clamp(2rem, 4vw, 3rem); }
.tool-faq__item { padding: 1.1rem 0; border-bottom: 1px solid rgba(26, 20, 18, .1); }
.tool-faq__item h3 { margin: 0 0 .5rem !important; font-size: .98rem !important; }
.tool-faq__item h3::before { content: none !important; }
.tool-faq__item p { margin: 0 !important; font-size: .9rem; line-height: 1.9; color: var(--v3-text-soft); }

/* 底部那条通向咨询业务的入口。做得克制，工具页就是工具页，不要变成落地页。 */
.tool-foot {
  margin-top: clamp(2.4rem, 5vw, 3.4rem); padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--v3-ink); color: rgba(245, 241, 234, .8); font-size: .88rem; line-height: 1.9;
}
.tool-foot b { color: #f5f1ea; }
.tool-foot a { color: var(--v3-gold) !important; text-decoration: none; border-bottom: 1px solid rgba(191, 155, 48, .45) !important; }
.tool-foot a:hover { border-bottom-color: var(--v3-gold) !important; }

/* 免责声明。位置在工具面板下方、说明文字上方 —— 用完工具就能看到，
   但不抢主视觉。字号小、颜色淡，不吓人，但必须在每一页都有。 */
.tool-disclaimer {
  margin: 2rem 0 0 !important; padding: .9rem 1.1rem;
  border: 1px solid rgba(26, 20, 18, .12); background: rgba(26, 20, 18, .02);
  font-size: .8rem; line-height: 1.85; color: var(--v3-text-soft);
}
.tool-disclaimer b { color: var(--v3-text); font-weight: 700; }