.catalog-header { display: flex; justify-content: space-between; align-items: center; }
.back-link { color: #d1d5db; text-decoration: none; font-size: 14px; }
.catalog-main { max-width: 1600px; }
.upload-row { grid-template-columns: 1fr auto; align-items: end; }
.catalog-workspace { display: grid; grid-template-columns: 180px minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.pages-panel, .data-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.page-list { display: grid; gap: 10px; }
.page-thumb { border: 2px solid transparent; border-radius: 10px; background: #f9fafb; padding: 6px; display: grid; gap: 5px; width: 100%; }
.page-thumb.active { border-color: #111827; }
.page-thumb img { width: 100%; display: block; border-radius: 6px; }
.page-thumb span { font-size: 12px; font-weight: 700; }
.page-panel { min-width: 0; }
.page-stage { position: relative; width: fit-content; max-width: 100%; margin: 12px auto 0; touch-action: none; user-select: none; cursor: crosshair; }
.page-stage img { display: block; max-width: 100%; height: auto; border: 1px solid #d1d5db; border-radius: 8px; }
.crop-box { position: absolute; border: 2px solid #111827; background: rgba(255,255,255,.18); box-shadow: 0 0 0 9999px rgba(17,24,39,.22); pointer-events: none; }
.candidate-block { margin-top: -6px; }
.candidate-label { color: #6b7280; font-size: 12px; margin-bottom: 6px; }
.candidate-list { display: flex; flex-wrap: wrap; gap: 6px; }
.candidate { border: 1px solid #d1d5db; background: #f9fafb; border-radius: 18px; padding: 6px 9px; font-size: 12px; }
.candidate.selected { background: #111827; color: white; border-color: #111827; }
.page-text-box { margin-top: 18px; }
.page-text-box summary { cursor: pointer; font-weight: 700; }
.page-text-box pre { white-space: pre-wrap; font-size: 11px; max-height: 320px; overflow: auto; background: #f9fafb; padding: 12px; border-radius: 8px; }
@media (max-width: 1100px) {
  .catalog-workspace { grid-template-columns: 130px minmax(0, 1fr); }
  .data-panel { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 700px) {
  .upload-row { grid-template-columns: 1fr; }
  .catalog-workspace { display: block; }
  .pages-panel { position: static; max-height: none; }
  .page-list { grid-template-columns: repeat(4, 1fr); overflow-x: auto; }
  .page-panel, .data-panel { position: static; max-height: none; }
}