/* PDFlyHQ — tools/remove-pages/result.css
   Stat boxes, download button. Same pattern as Compress / Split / Extract PDF's;
   stats here are Original pages / Pages removed / New file size. JS contract:
   #stat-source, #stat-removed, #stat-size, #btn-download, #btn-reset. */

.result-wrap { text-align: center; max-width: 480px; margin: 0 auto; }

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-success-500) 14%, transparent);
  animation: result-pop var(--duration-slow) var(--ease-bounce);
}
.result-badge svg { width: 28px; height: 28px; }
@keyframes result-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

.result-badge__check { stroke-dasharray: 20; stroke-dashoffset: 20; animation: result-check-draw 420ms var(--ease-out) 220ms forwards; }
@keyframes result-check-draw { to { stroke-dashoffset: 0; } }

.result-wrap h2 { margin-bottom: var(--space-1); font-size: var(--text-xl); }
.result-subtitle { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-6); }

.result-stats { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-8); }
.stat-card { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-lg); border: 1px solid transparent; }
.stat-card__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.stat-card__value { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stat-card--highlight { grid-column: 1 / -1; background: color-mix(in srgb, var(--color-success-500) 12%, transparent); border-color: color-mix(in srgb, var(--color-success-500) 30%, transparent); }
.stat-card--highlight .stat-card__value { color: var(--color-success-600); }

.result-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.result-actions .btn--success { gap: var(--space-2); }
@media (min-width: 480px) { .result-actions { flex-direction: row; justify-content: center; } }