.lf-tool { max-width: 720px; margin: 2rem auto; text-align: center; }

.lf-form {
  display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; justify-content: center;
}
.lf-form #lf-url {
  flex: 1 1 320px; padding: .9rem 1rem; font-size: 1rem;
  border: 1px solid #d0d0d8; border-radius: 8px;
}
.lf-form #lf-submit {
  padding: .9rem 1.5rem; font-size: 1rem; border: 0; border-radius: 8px;
  background: #6b4eff; color: #fff; cursor: pointer;
}
.lf-form #lf-submit:disabled { opacity: .6; cursor: default; }

.lf-status { min-height: 1.5em; color: #555; }
.lf-notice { padding: 1rem; background: #fff4e5; border-radius: 8px; }

.lf-progress {
  height: 8px; border-radius: 999px; background: #ece7ff;
  overflow: hidden; margin: .25rem 0 1rem;
}
.lf-progress-bar {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #6b4eff, #9b6bff);
  transition: width .4s ease;
}
.lf-progress--indeterminate .lf-progress-bar {
  width: 40%;
  animation: lf-indeterminate 1.1s ease-in-out infinite;
}
@keyframes lf-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.lf-result {
  margin-top: 2rem; padding: 2rem; border-radius: 16px;
  background: linear-gradient(135deg, #6b4eff 0%, #9b6bff 100%); color: #fff;
}
.lf-result.lf-reveal-in { animation: lf-card-in .6s ease-out; }
@keyframes lf-card-in {
  0%   { opacity: 0; transform: translateY(16px) scale(.98); box-shadow: 0 0 0 rgba(107, 78, 255, 0); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.01); box-shadow: 0 0 32px rgba(107, 78, 255, .35); }
  100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(107, 78, 255, .15); }
}
.lf-result-lead { margin: 0; opacity: .9; }
.lf-saved { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; margin: .2em 0; }
.lf-percent { margin: 0; font-size: 1.1rem; opacity: .95; }

.lf-images {
  margin-top: 1.5rem; text-align: left; max-height: 420px; overflow-y: auto;
  border: 1px solid #e6e2f5; border-radius: 12px; padding: .5rem;
}
.lf-image-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .5rem; border-bottom: 1px solid #f0edfa;
  opacity: 0; animation: lf-row-in .35s ease forwards;
}
.lf-image-row:last-child { border-bottom: 0; }
@keyframes lf-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lf-image-row.lf-row-updated { animation: lf-row-flash .7s ease; }
@keyframes lf-row-flash {
  0%   { background: rgba(107, 78, 255, .12); }
  100% { background: transparent; }
}
.lf-image-thumb {
  width: 48px; height: 48px; border-radius: 8px; object-fit: cover;
  flex: 0 0 auto; background: #f0edfa;
}
.lf-image-meta { flex: 1 1 auto; min-width: 0; }
.lf-image-name {
  margin: 0; font-size: .9rem; font-weight: 600; color: #202224;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lf-image-format { margin: 0; font-size: .75rem; color: #8a8a94; text-transform: uppercase; }
.lf-image-sizes { margin: 0; font-size: .85rem; color: #555; white-space: nowrap; }
.lf-image-percent { margin: 0; font-size: .95rem; font-weight: 700; color: #6b4eff; white-space: nowrap; }
.lf-badge {
  flex: 0 0 auto; font-size: .7rem; font-weight: 600; padding: .2rem .55rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
.lf-badge--tested { background: #6b4eff; color: #fff; }
.lf-badge--estimated { background: transparent; color: #8a8a94; border: 1px solid #d0cce0; }
.lf-badge--pending {
  background: #fff4e5; color: #b9770e;
  animation: lf-badge-pulse 1.2s ease-in-out infinite;
}
@keyframes lf-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}