.upload-widget {
  margin-top: 1rem;
}
.upload-dropzone {
  border: 1.5px dashed rgba(78,52,46,.18);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,243,236,.85));
  padding: 1rem;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.upload-dropzone:hover,
.upload-dropzone.is-active {
  border-color: rgba(201,106,61,.65);
  background: rgba(248,243,236,.96);
  box-shadow: 0 16px 30px rgba(78,52,46,.08);
  transform: translateY(-1px);
}
.upload-dropzone-head {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.upload-dropzone-icon {
  width: 3rem;
  height: 3rem;
  border-radius: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,106,61,.14);
  color: #c96a3d;
  font-size: 1.15rem;
  flex: 0 0 auto;
}
.upload-dropzone-title {
  font-weight: 700;
  color: #4e342e;
}
.upload-dropzone-help,
.upload-dropzone-meta {
  color: #7b6b66;
  font-size: .9rem;
}
.upload-dropzone-meta {
  margin-top: .55rem;
}
.upload-dropzone-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .75rem;
}
.upload-dropzone-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .78rem;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(78,52,46,.1);
  color: #5f4a43;
}
.upload-alerts {
  margin-top: .75rem;
}
.upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.upload-preview-card,
.upload-existing-card {
  position: relative;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(78,52,46,.1);
  box-shadow: 0 14px 28px rgba(78,52,46,.08);
  overflow: hidden;
}
.upload-preview-card.is-invalid {
  border-color: rgba(220,53,69,.45);
  box-shadow: 0 14px 28px rgba(220,53,69,.12);
}
.upload-preview-card.is-sortable,
.upload-existing-card {
  cursor: grab;
}
.upload-preview-card.is-dragging,
.upload-existing-card.is-dragging {
  opacity: .55;
  transform: scale(.985);
}
.upload-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem .95rem 0;
}
.upload-card-order,
.upload-existing-order {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,106,61,.12);
  color: #c96a3d;
  font-weight: 700;
  font-size: .82rem;
}
.upload-card-handle,
.upload-existing-handle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: #8b7a74;
  font-size: .82rem;
}
.upload-card-body,
.upload-existing-body {
  padding: .95rem;
}
.upload-preview-frame {
  position: relative;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(248,243,236,.95), rgba(244,246,249,.95));
  border: 1px solid rgba(78,52,46,.08);
  min-height: 180px;
  overflow: hidden;
}
.upload-preview-full,
.upload-existing-image {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: contain;
  display: block;
  background: transparent;
}
.upload-preview-full[data-zoomable="1"],
.upload-existing-image[data-zoomable="1"] {
  cursor: zoom-in;
}
.upload-card-title {
  margin-top: .85rem;
  font-size: .95rem;
  font-weight: 700;
  color: #3e312d;
  line-height: 1.35;
  word-break: break-word;
}
.upload-card-meta,
.upload-card-recommendation,
.upload-existing-meta {
  color: #7b6b66;
  font-size: .85rem;
  margin-top: .35rem;
}
.upload-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .7rem;
}
.upload-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: 999px;
  padding: .28rem .6rem;
  font-size: .76rem;
  border: 1px solid rgba(78,52,46,.08);
  background: rgba(255,255,255,.85);
}
.upload-badge-warning { color: #9a6700; background: rgba(255,193,7,.12); border-color: rgba(255,193,7,.32); }
.upload-badge-error { color: #b02a37; background: rgba(220,53,69,.1); border-color: rgba(220,53,69,.32); }
.upload-badge-success { color: #146c43; background: rgba(25,135,84,.12); border-color: rgba(25,135,84,.25); }
.upload-crop-panel {
  margin-top: .85rem;
  padding: .8rem;
  border-radius: .95rem;
  background: rgba(248,243,236,.78);
  border: 1px solid rgba(78,52,46,.08);
}
.upload-crop-title {
  font-size: .8rem;
  font-weight: 700;
  color: #5b433c;
  margin-bottom: .55rem;
}
.upload-crop-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--upload-ratio, 1 / 1);
  border-radius: .9rem;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(255,255,255,.95) 25%, rgba(248,243,236,.95) 25%, rgba(248,243,236,.95) 50%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.95) 75%, rgba(248,243,236,.95) 75%, rgba(248,243,236,.95) 100%);
  background-size: 18px 18px;
  border: 1px solid rgba(78,52,46,.08);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.upload-crop-stage.is-dragging {
  cursor: grabbing;
}
.upload-crop-frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 1px rgba(78,52,46,.08), inset 0 0 0 999px rgba(78,52,46,.05);
  pointer-events: none;
}
.upload-crop-image {
  position: absolute;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
}
.upload-crop-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .7rem;
}
.upload-crop-controls input[type="range"] {
  flex: 1 1 auto;
}
.upload-card-actions,
.upload-existing-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-top: .95rem;
}
.upload-card-actions .btn,
.upload-existing-actions .btn {
  border-radius: .85rem;
}
.upload-empty-state {
  border: 1px dashed rgba(78,52,46,.14);
  border-radius: 1rem;
  padding: 1rem;
  color: #7b6b66;
  background: rgba(248,243,236,.5);
}
.upload-zoom-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
  background: rgba(33,37,41,.82);
  padding: 1.5rem;
}
.upload-zoom-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-zoom-dialog {
  width: min(96vw, 1080px);
  max-height: 90vh;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 28px 60px rgba(0,0,0,.28);
}
.upload-zoom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(78,52,46,.08);
}
.upload-zoom-body {
  background: linear-gradient(180deg, rgba(248,243,236,.9), rgba(255,255,255,.98));
  padding: 1rem;
}
.upload-zoom-body img {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}
.upload-inline-note {
  font-size: .8rem;
  color: #8a766f;
}
@media (max-width: 767.98px) {
  .upload-preview-grid {
    grid-template-columns: 1fr;
  }
}