/* Base */
.wc-combine-container { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; gap: 12px; }
.wcc-top { display: flex; gap: 8px; align-items: center; }
#wcc-search { flex: 1; padding: 12px 14px; border: 1px solid #ddd; border-radius: 10px; font-size: 16px; }

/* Layout */
.wcc-body { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 16px; align-items: start; }
.wcc-results, .wcc-selected, .wcc-preview { border: 1px solid #eee; border-radius: 12px; padding: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }

/* Wide preview mode (desktop) */
.wc-combine-container.wcc-wide .wcc-body { grid-template-columns: 1fr 1fr; }
.wc-combine-container.wcc-wide .wcc-preview { grid-column: 1 / -1; }

/* Lists */
.wcc-results-title, .wcc-selected-title { font-weight: 600; margin-bottom: 8px; }
.wcc-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 420px; overflow: auto; }
.wcc-item { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; border: 1px solid #f2f2f2; border-radius: 12px; padding: 10px; background: #fafafa; }
.wcc-item img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 10px; }
.wcc-item .wcc-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wcc-item .wcc-name { font-size: 14px; line-height: 1.3; }
.wcc-btn, .wcc-btn-secondary { border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; background: #111827; color: white; font-weight: 600; }
.wcc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wcc-btn-secondary { background: #e5e7eb; color: #111827; }
.wcc-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wcc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.wcc-opt { display: grid; gap: 6px; font-size: 14px; }
.wcc-hint { font-size: 11px; color: #6b7280; }

/* Preview area */
.wcc-preview { overflow: auto; }
.wcc-preview-inner { width: 100%; display: flex; justify-content: center; }
#wcc-canvas { width: 100%; height: auto; border: 1px dashed #e5e7eb; border-radius: 10px; background: #fff; display: block; }

/* Thumbs: horizontal row with scroll */
.wcc-thumbs { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.wcc-thumbs .wcc-thumb { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; border: 2px solid transparent; cursor: pointer; flex: 0 0 auto; scroll-snap-align: start; }
.wcc-thumbs .wcc-thumb.active { border-color: #2563eb; }

.wcc-empty { padding: 10px; background: #f8fafc; border: 1px dashed #e5e7eb; border-radius: 10px; text-align: center; color: #374151; }

/* Responsive: tablet */
@media (max-width: 1024px) {
  .wcc-body { grid-template-columns: 1fr; }
  .wcc-list { max-height: 36vh; }
  .wcc-options { grid-template-columns: 1fr 1fr; }
  .wcc-item { grid-template-columns: 64px 1fr; }
  .wcc-item img, .wcc-item.selected .wcc-chosen { width: 64px; height: 64px; }
}

/* Responsive: mobile */
@media (max-width: 640px) {
  #wcc-search { font-size: 16px; padding: 12px; }
  .wcc-top { position: sticky; top: 0; background: #fff; padding-top: 6px; z-index: 5; }
  .wcc-body { grid-template-columns: 1fr; gap: 12px; }
  .wcc-results, .wcc-selected, .wcc-preview { padding: 10px; }
  .wcc-list { max-height: 34vh; }
  .wcc-item { grid-template-columns: 56px 1fr; padding: 8px; }
  .wcc-item img, .wcc-item.selected .wcc-chosen { width: 56px; height: 56px; }
  .wcc-thumbs .wcc-thumb { width: 44px; height: 44px; }
  .wcc-options { grid-template-columns: 1fr; }
  .wcc-btn, .wcc-btn-secondary { width: 100%; }
}