/* AI Design Factory panel (admin designer) */
.aidf { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.aidf-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: inherit; }
.aidf .input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.2); font: inherit; font-weight: 400; background: #fff; color: #111;
}
.aidf textarea.input { resize: vertical; line-height: 1.4; }
.aidf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.aidf-controls { align-items: flex-end; }
.aidf-grow { flex: 1 1 160px; min-width: 140px; }
.aidf-narrow { width: 90px; flex: 0 0 auto; }
.aidf select.input { padding: 8px 8px; }

.aidf-whiteRow { align-items: center; gap: 8px; }
.aidf-whiteRow input[type="range"] { flex: 1 1 120px; min-width: 120px; }

.aidf-status { min-height: 18px; }
.aidf-status[data-kind="error"] { color: #c0243b; font-weight: 600; }
.aidf-status[data-kind="ok"] { color: #157347; }

.aidf-results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 8px;
}
.aidf-card {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; background: #fafafa;
}
.aidf-cutArea { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed rgba(0,0,0,0.15); padding-top: 8px; }
.aidf-imgWrap {
  border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 160px; background: #f4f4f5;
}
.aidf-imgWrap img { max-width: 100%; height: auto; display: block; }
/* transparent checkerboard so cutouts read clearly */
.aidf-checker {
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.aidf-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.aidf-histCard {
  display: flex; flex-direction: column; gap: 4px; padding: 4px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; background: #fff; text-align: center;
}
.aidf-histCard:hover { border-color: #157347; }
.aidf-histCard img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f4f4f5; border-radius: 6px;
}
.aidf-histLabel { font-size: 11px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }