.of-archive { width: min(1000px, 95vw); max-height: 90vh; }
.of-archive[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.of-archive .dialog-body { overflow: auto; }
.of-archive-drop { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; border: 2px dashed #c5cad6; border-radius: 12px; background: #f7f8fb; text-align: center; }
.of-archive-drop span { color: #667085; font-size: 13px; }
.of-archive-dragging { outline: 4px solid #6366f1; outline-offset: -5px; }
.of-archive-dragging .of-archive-drop { border-color: #6366f1; background: #eef2ff; }
.of-archive-status { min-height: 24px; color: #475467; }
.of-archive-status.is-error { color: #b42318; }
.of-archive-table { overflow-x: auto; }
.of-archive-table table { width: 100%; border-collapse: collapse; text-align: left; }
.of-archive-table th, .of-archive-table td { padding: 12px; border-bottom: 1px solid #e4e7ec; }
.of-archive-table th { color: #667085; font-size: 12px; }
.of-archive-table td:first-child { min-width: 200px; max-width: 420px; overflow-wrap: anywhere; }
.of-archive-table td small { display: block; color: #667085; margin-top: 4px; }
.of-archive-actions { min-width: 205px; }
.of-archive-actions a { display: inline-block; margin: 3px; text-decoration: none; font-size: 12px; }
@media (max-width: 600px) {
  .of-archive-drop { padding: 16px; }
  .of-archive-table thead { display: none; }
  .of-archive-table table, .of-archive-table tbody { display: block; }
  .of-archive-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 0; border-bottom: 1px solid #e4e7ec; gap: 8px; }
  .of-archive-table td { padding: 0; border: 0; min-width: 0; }
  .of-archive-table td:first-child, .of-archive-actions { grid-column: 1 / -1; min-width: 0; max-width: none; }
  .of-archive-table td[data-label]::before { content: attr(data-label); display: block; color: #667085; font-size: 11px; margin-bottom: 3px; }
}