/* 工具页专属样式补充。通用组件在 shared/base.css，这里只写本工具特有的部分。 */

.tool__intro {
  max-width: 62ch;
}

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.thumbs-note {
  margin-bottom: var(--space-2);
}

.options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.options .hint {
  flex-basis: 100%;
}

.filename {
  position: relative;
  display: flex;
  align-items: center;
}

.filename .input {
  padding-right: 46px;
}

.filename__suffix {
  position: absolute;
  right: var(--space-3);
  color: var(--text-faint);
  font-size: var(--text-sm);
  pointer-events: none;
}

@media (max-width: 480px) {
  .thumb-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }

  .tool__actions .btn--lg {
    width: 100%;
  }
}