.tool-page {
  min-height: calc(100vh - 4rem);
  background-color: var(--color-gray-50);
  padding: 3rem 1rem;
}
@media (min-width: 640px) {
  .tool-page {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .tool-page {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.tool-page__inner {
  max-width: 48rem;
  margin: 0 auto;
}

.tool-panel {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.tool-panel__header {
  padding: 2rem;
  text-align: center;
  color: var(--color-white);
}
.tool-panel__header--pdf-to-jpg {
  background-image: linear-gradient(
    to right,
    var(--color-red-500),
    var(--color-pink-600)
  );
}
.tool-panel__header--image-to-webp {
  background-image: linear-gradient(
    to right,
    var(--color-blue-500),
    var(--color-cyan-600)
  );
}
.tool-panel__header--webp-to-jpg {
  background-image: linear-gradient(
    to right,
    var(--color-green-500),
    var(--color-teal-600)
  );
}
.tool-panel__header--jpg-to-png {
  background-image: linear-gradient(
    to right,
    var(--color-purple-500),
    var(--color-fuchsia-600)
  );
}
.tool-panel__header--png-to-jpg {
  background-image: linear-gradient(
    to right,
    var(--color-orange-500),
    var(--color-red-600)
  );
}
.tool-panel__header--pdf-to-png {
  background-image: linear-gradient(
    to right,
    var(--color-indigo-500),
    var(--color-purple-600)
  );
}
.tool-panel__header--word-to-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-blue-500),
    var(--color-indigo-600)
  );
}
.tool-panel__header--png-to-webp {
  background-image: linear-gradient(
    to right,
    var(--color-green-500),
    var(--color-teal-600)
  );
}
.tool-panel__header--compress-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-red-500),
    var(--color-pink-600)
  );
}
.tool-panel__header--merge-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-purple-500),
    var(--color-fuchsia-600)
  );
}
.tool-panel__header--split-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-orange-500),
    var(--color-red-600)
  );
}
.tool-panel__header--protect-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-gray-700),
    var(--color-gray-900)
  );
}
.tool-panel__header--unlock-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-green-500),
    var(--color-teal-600)
  );
}
.tool-panel__header--pdf-to-text {
  background-image: linear-gradient(
    to right,
    var(--color-indigo-500),
    var(--color-blue-600)
  );
}
.tool-panel__header--excel-to-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-green-600),
    var(--color-green-700)
  );
}
.tool-panel__header--download {
  background-image: linear-gradient(
    to right,
    var(--color-gray-700),
    var(--color-gray-900)
  );
}

.tool-panel__icon-wrapper {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}
.tool-panel__header-icon {
  height: 3rem;
  width: 3rem;
  color: rgba(255, 255, 255, 0.9);
}
.tool-panel__title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.tool-panel__subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
}

.tool-panel__body {
  padding: 2rem;
}

.tool-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tool-upload {
  position: relative;
}
.tool-upload__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16rem;
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-xl);
  cursor: pointer;
  background-color: var(--color-gray-50);
  transition: all 0.3s;
}
.tool-upload__label:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-400);
}
.tool-upload__label--highlight {
  background-color: var(--color-gray-100);
  border-color: var(--color-blue-500);
}

.tool-upload__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
}
.tool-upload__icon {
  height: 3rem;
  width: 3rem;
  color: var(--color-gray-400);
  margin-bottom: 1rem;
  transition: color 0.3s;
}
.tool-upload__label:hover .tool-upload__icon {
  color: var(--color-gray-600);
}
.tool-upload__text {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-700);
}
.tool-upload__hint {
  font-size: 0.875rem;
  color: var(--color-gray-500);
}
.tool-upload__input {
  display: none;
}

.tool-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.3s;
}
.tool-btn:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-lg);
}
.tool-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.tool-btn--secondary {
  background-color: var(--color-white);
  color: var(--color-gray-600);
  border: 2px solid var(--color-gray-200);
  box-shadow: none;
}
.tool-btn--secondary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
  box-shadow: var(--shadow-sm);
}

.tool-btn--pdf-to-jpg {
  background-image: linear-gradient(
    to right,
    var(--color-red-600),
    var(--color-red-700)
  );
}
.tool-btn--image-to-webp {
  background-image: linear-gradient(
    to right,
    var(--color-blue-600),
    var(--color-blue-700)
  );
}
.tool-btn--webp-to-jpg {
  background-image: linear-gradient(
    to right,
    var(--color-green-600),
    var(--color-green-700)
  );
}
.tool-btn--jpg-to-png {
  background-image: linear-gradient(
    to right,
    var(--color-purple-600),
    var(--color-purple-700)
  );
}
.tool-btn--png-to-jpg {
  background-image: linear-gradient(
    to right,
    var(--color-orange-600),
    var(--color-orange-700)
  );
}
.tool-btn--pdf-to-png {
  background-image: linear-gradient(
    to right,
    var(--color-indigo-600),
    var(--color-indigo-700)
  );
}
.tool-btn--word-to-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-blue-600),
    var(--color-indigo-700)
  );
}
.tool-btn--png-to-webp {
  background-image: linear-gradient(
    to right,
    var(--color-green-600),
    var(--color-teal-600)
  );
}
.tool-btn--compress-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-red-600),
    var(--color-pink-600)
  );
}
.tool-btn--merge-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-purple-600),
    var(--color-purple-700)
  );
}
.tool-btn--split-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-orange-600),
    var(--color-orange-700)
  );
}
.tool-btn--protect-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-gray-700),
    var(--color-gray-900)
  );
}
.tool-btn--unlock-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-green-600),
    var(--color-green-700)
  );
}
.tool-btn--pdf-to-text {
  background-image: linear-gradient(
    to right,
    var(--color-indigo-600),
    var(--color-indigo-700)
  );
}
.tool-btn--excel-to-pdf {
  background-image: linear-gradient(
    to right,
    var(--color-green-600),
    var(--color-green-700)
  );
}
.tool-btn--download {
  background-image: linear-gradient(
    to right,
    var(--color-gray-800),
    var(--color-gray-900)
  );
}

.tool-footer {
  margin-top: 2rem;
  text-align: center;
  color: var(--color-gray-500);
  font-size: 0.875rem;
}

.tool-seo {
  margin-top: 2.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
  padding: 2rem;
}
.tool-seo__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-800);
  margin-bottom: 1.5rem;
}
.tool-seo__desc {
  color: var(--color-gray-600);
  line-height: 1.625;
  margin-bottom: 1.5rem;
}
.tool-seo__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-gray-600);
}
.tool-seo__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.tool-seo__bullet {
  margin-top: 0.4rem;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.tool-seo__bullet--red {
  background-color: var(--color-red-500);
}
.tool-seo__bullet--blue {
  background-color: var(--color-blue-500);
}
.tool-seo__bullet--green {
  background-color: var(--color-green-500);
}
.tool-seo__bullet--purple {
  background-color: var(--color-purple-500);
}
.tool-seo__bullet--orange {
  background-color: var(--color-orange-500);
}
.tool-seo__bullet--indigo {
  background-color: var(--color-indigo-500);
}

/* Download specific */
.download-page {
  padding: 4rem 1rem;
  text-align: center;
}
.download-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 3rem;
  box-shadow: var(--shadow-xl);
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
}
.download-icon {
  display: inline-flex;
  height: 4rem;
  width: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-green-100);
  color: var(--color-green-600);
  margin-bottom: 1.5rem;
}
.download-icon svg {
  height: 2rem;
  width: 2rem;
}
.download-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: 0.5rem;
}
.download-file {
  font-size: 1.125rem;
  color: var(--color-gray-600);
  margin-bottom: 2rem;
  word-break: break-all;
}
.download-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}
.download-btn--primary {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  border: none;
  cursor: pointer;
}
.download-btn--primary:hover {
  background-color: var(--color-blue-700);
}
.download-btn--secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  border: none;
  cursor: pointer;
}
.download-btn--secondary:hover {
  background-color: var(--color-gray-200);
}