/* Images to PDF — dropzone, file list, options, result. Uses design tokens. */
.itp-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.itp-drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  text-align: center; padding: var(--space-8) var(--space-4);
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-sunken); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.itp-drop:hover, .itp-drop:focus-within, .itp-drop.is-drag {
  border-color: var(--blue-500); background: var(--blue-50);
}
.itp-drop-icon { color: var(--blue-500); }
.itp-drop-title { font-weight: 600; color: var(--text-primary); }
.itp-drop-hint { font-size: var(--text-sm-size); color: var(--text-muted); }

.itp-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.itp-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface);
}
.itp-item-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--blue-600); color: #fff; font-size: var(--text-xs-size); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.itp-item-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.itp-item-name { font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itp-item-meta { font-size: var(--text-xs-size); color: var(--text-muted); }
.itp-item-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.itp-icon-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.itp-icon-btn:hover:not(:disabled) { border-color: var(--blue-300); color: var(--blue-600); background: var(--blue-50); }
.itp-icon-btn:disabled { opacity: .4; cursor: not-allowed; }

.itp-options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (max-width: 560px) { .itp-options { grid-template-columns: 1fr; } }

.itp-result {
  display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--success-200); border-radius: var(--radius-md);
  background: var(--success-50);
}
.itp-result-icon { color: var(--success-500); flex-shrink: 0; }
.itp-result-body { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex: 1; flex-wrap: wrap; }
.itp-result-title { font-weight: 600; color: var(--text-primary); }

.itp-privacy { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); color: var(--text-muted); }
.itp-privacy .icon { color: var(--success-500); }

.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); left: calc(50% - 8px);
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%;
  animation: itp-spin .6s linear infinite;
}
@keyframes itp-spin { to { transform: rotate(360deg); } }