.input{ width: 100%; border-radius: 0.375rem; border: 1px solid #d1d5db; padding: 0.25rem 0.5rem; }
.label{ display:block; font-size:0.875rem; font-weight:500; color:#374151; margin-bottom:0.25rem; }
.menu-item{ width:100%; text-align:left; padding:0.5rem 0.75rem; font-size:0.875rem; cursor:pointer; background:transparent; border:none; }

.page {
  width: 210mm; height: 297mm; background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.12);
  margin: 0 auto; padding: var(--page-padding, 10mm);
  position: relative; border-radius: 6px;
}
.page.letter { width: 216mm; height: 279mm; }

.grid {
  position: absolute; inset: var(--page-padding, 10mm);
  display: grid; gap: var(--gutter, 5mm);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
  grid-template-columns: repeat(var(--cols, 3), 1fr);
}

.cell {
  position: relative; border: 1px dashed #d1d5db;
  background: #f9fafb; overflow: hidden; user-select: none;
}
.cell.dragging { opacity: .6; outline: 2px dashed #6366f1; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fit & align set via inline style per cell */

.cell-toolbar {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 6px;
  opacity: 0; transition: opacity .15s ease;
}
.cell:hover .cell-toolbar { opacity: 1; }
.cell-btn {
  background: rgba(255,255,255,.95);
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px; line-height: 0; cursor: pointer;
}

/* Caption overlay */
.caption {
  position: absolute; left: 0; right: 0;
  padding: var(--cap-pad, 8px);
  font-family: var(--cap-font, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif);
  font-size: var(--cap-size, 14px);
  font-weight: var(--cap-weight, 400);
  color: var(--cap-color, #111);
  text-align: var(--cap-align, center);
  background: transparent;
  pointer-events: none;
}
.caption.top { top: 0; }
.caption.bottom { bottom: 0; }

/* Sidebar thumbnails */
.page-li{ display:flex; align-items:center; gap:0.5rem; padding:0.5rem; border-radius:0.375rem; cursor:pointer; }
.page-li.active{ background-color:#eef2ff; box-shadow:0 0 0 1px #c7d2fe inset; }

/* Buttons in cropper */
.btn-aspect{ padding:0.25rem 0.5rem; border-radius:0.375rem; background-color:#f3f4f6; border:1px solid transparent; font-size:0.75rem; }

/* Hovers to replace Tailwind hover: utilities */
.menu-item:hover { background-color:#f9fafb; }
.btn-aspect:hover { background-color:#e5e7eb; }

/* Print */
@media print {
  body * { visibility: hidden; }
  .page, .page * { visibility: visible; }
  .page { page-break-after: always !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; }
}