/* ── Tool page layout ──────────────────────────────────────── */
.tool-page {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
  min-height: calc(100vh - 60px - 48px - 160px);
}

.tool-page__inner {
  max-width: 680px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--gray-400);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--gray-400); transition: color .15s; }
.breadcrumb a:hover { color: var(--black); }

.tool-page__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 600;
  color: var(--black);
  margin-bottom: .5rem;
}

.tool-page__sub {
  font-size: .95rem;
  color: var(--gray-600);
  margin-bottom: 2rem;
  max-width: 55ch;
}

/* ── Steps ─────────────────────────────────────────────────── */
.tool-step { margin-top: 1rem; }

/* ── Quality panel ─────────────────────────────────────────── */
.quality-panel {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.file-info {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

.file-info__icon {
  color: var(--gray-600);
  flex-shrink: 0;
  display: flex;
}

.file-info__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.file-info__name {
  font-size: .875rem;
  font-weight: 500;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-info__size {
  font-size: .75rem;
  color: var(--gray-400);
}

.file-info__remove {
  font-size: 1.25rem;
  color: var(--gray-400);
  line-height: 1;
  padding: .2rem .4rem;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  cursor: pointer;
}
.file-info__remove:hover { color: var(--black); background: var(--gray-200); }

/* Quality options */
.quality-options {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.quality-options legend {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: .65rem;
  float: none;
  width: 100%;
}

.quality-opt { cursor: pointer; }
.quality-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.quality-opt__box {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.quality-opt input:checked + .quality-opt__box {
  border-color: var(--black);
  background: var(--gray-100);
}

.quality-opt__name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--black);
  flex: 1;
}

.quality-opt__desc {
  font-size: .78rem;
  color: var(--gray-400);
}

.quality-opt__badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  white-space: nowrap;
}
.quality-opt__badge--light  { background: var(--gray-100); }
.quality-opt__badge--strong { background: var(--black); color: var(--white); border-color: var(--black); }

/* ── Processing card ───────────────────────────────────────── */
.processing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  gap: .75rem;
}

.processing-card__spinner svg {
  animation: spin 1s linear infinite;
  color: var(--black);
}

@keyframes spin { to { transform: rotate(360deg); } }

.processing-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--black);
}

.processing-card__sub {
  font-size: .875rem;
  color: var(--gray-600);
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.processing-card__note {
  font-size: .78rem;
  color: var(--gray-400);
  max-width: 40ch;
}

/* ── Result card ────────────────────────────────────────────── */
.result-card {
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--shadow-md);
}

.result-card__header {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.result-card__check { color: #16a34a; display: flex; }

.result-card__header h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--black);
}

.result-card__sizes {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

.result-size {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.result-size__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.result-size__value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--black);
  font-family: var(--font-serif);
}

.result-size__value--accent { color: #16a34a; }
.result-size__value--saving { color: #16a34a; }

.result-size__arrow {
  font-size: 1.1rem;
  color: var(--gray-400);
  align-self: flex-end;
  padding-bottom: .15rem;
}

.result-size--saving {
  margin-left: auto;
  align-items: flex-end;
}

.btn--ghost {
  background: transparent;
  color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
}
.btn--ghost:hover { border-color: var(--gray-400); color: var(--black); opacity: 1; }

/* ── Receipt card ───────────────────────────────────────────── */
.receipt-card {
  margin-top: 1.25rem;
  background: var(--gray-900);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  font-family: var(--font-sans);
}

.receipt-card__header {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  margin-bottom: 1.1rem;
  color: rgba(255,255,255,.5);
}

.receipt-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

.receipt-card__time { margin-left: auto; }

.receipt-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .83rem;
  gap: 1rem;
}

.receipt-card__row--hash {
  flex-direction: column;
  gap: .35rem;
}

.receipt-card__label { color: rgba(255,255,255,.4); flex-shrink: 0; }

.receipt-card__value {
  color: var(--white);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

.receipt-card__hash {
  font-family: 'Courier New', monospace;
  font-size: .78rem;
  color: #a3e635;
  letter-spacing: .03em;
  word-break: break-all;
  background: rgba(163,230,53,.08);
  padding: .4rem .65rem;
  border-radius: var(--radius-sm);
  display: block;
}

.receipt-card__note {
  margin-top: 1rem;
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  line-height: 1.5;
}

/* ── Error card ─────────────────────────────────────────────── */
.error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  gap: .75rem;
}

.error-card__icon { color: #dc2626; display: flex; }

.error-card h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--black);
}

.error-card p {
  font-size: .875rem;
  color: var(--gray-600);
  max-width: 40ch;
}

/* ── Privacy strip ──────────────────────────────────────────── */
.privacy-strip {
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
  padding: .9rem 0;
}

.privacy-strip__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.privacy-strip__item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--gray-600);
}

/* ── Ghost button ───────────────────────────────────────────── */
.btn--ghost {
  background: transparent;
  color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
}
.btn--ghost:hover { border-color: var(--gray-400); color: var(--black); opacity: 1; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .quality-opt__desc { display: none; }
  .result-card__sizes { gap: .75rem; }
  .privacy-strip__inner { gap: 1rem; }
}