.skin-builder-machine {
  border: 1px solid rgba(0, 220, 255, .45);
  background: rgba(2, 10, 16, .82);
  padding: 16px;
  margin-top: 18px;
}
.skin-builder-machine * { box-sizing: border-box; }
.skin-builder-machine__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.skin-builder-machine__title { margin: 0; color: #eaffff; letter-spacing: .12em; font-size: 18px; }
.skin-builder-machine__copy { color: #70c9d7; max-width: 760px; line-height: 1.5; margin: 8px 0 0; }
.skin-builder-machine__generator { border: 1px solid rgba(53, 242, 124, .45); background: rgba(2, 24, 18, .45); padding: 14px; margin-top: 16px; }
.skin-builder-machine__generator-fields { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(220px, .42fr); gap: 12px; }
.skin-builder-machine__generator label { display: grid; gap: 7px; color: #dff; letter-spacing: .1em; font-size: 12px; }
.skin-builder-machine__generator textarea, .skin-builder-machine__generator input { width: 100%; border: 1px solid rgba(0, 220, 255, .45); background: #05090c; color: #eaffff; padding: 10px; font: inherit; }
.skin-builder-machine__generator textarea { min-height: 86px; resize: vertical; }
.skin-builder-machine__reference { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid rgba(0, 220, 255, .3); background: rgba(0, 0, 0, .25); }
.skin-builder-machine__reference > strong { color: #eaffff; letter-spacing: .1em; font-size: 12px; }
.skin-builder-machine__reference img { width: 100%; max-width: 900px; aspect-ratio: 1234 / 750; object-fit: fill; border: 1px solid rgba(0, 220, 255, .45); background: #000; }
.skin-builder-machine__reference > div:last-child { display: flex; gap: 10px; flex-wrap: wrap; }
.skin-builder-machine__reference-meta, .skin-builder-machine__reference-empty { color: #70c9d7; font-size: 12px; }
.skin-builder-machine__generator-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; color: #70c9d7; font-size: 12px; }
.skin-builder-machine__generator-status { min-height: 22px; margin-top: 10px; color: #35f27c; line-height: 1.45; }
.skin-builder-machine__generated { margin-top: 14px; display: grid; gap: 10px; }
.skin-builder-machine__generated img { display: block; width: 100%; max-width: 900px; height: auto; object-fit: contain; border: 1px solid rgba(53, 242, 124, .55); background: #000; }
.skin-builder-machine__generated-meta { color: #70c9d7; font-size: 12px; letter-spacing: .08em; }
.skin-builder-machine__generated div { display: flex; gap: 10px; flex-wrap: wrap; }
.skin-builder-machine__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.skin-builder-machine button {
  border: 1px solid rgba(0, 220, 255, .7);
  background: rgba(0, 35, 44, .68);
  color: #18f4ff;
  padding: 10px 14px;
  letter-spacing: .14em;
  font: inherit;
  cursor: pointer;
}
.skin-builder-machine button:hover { box-shadow: 0 0 18px rgba(0, 220, 255, .32); }
.skin-builder-machine button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.skin-builder-machine__stages { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.skin-builder-machine__stage { border: 1px solid rgba(255, 255, 255, .14); padding: 10px; color: #7ccbd8; min-height: 68px; }
.skin-builder-machine__stage.is-ready { border-color: #35f27c; color: #ddfff0; }
.skin-builder-machine__stage strong { display: block; color: #fff; margin-bottom: 6px; }
.skin-builder-machine__grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); gap: 14px; }
.skin-builder-machine__workflow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.skin-builder-machine__card { border: 1px solid rgba(0, 220, 255, .28); padding: 14px; min-height: 180px; background: rgba(0, 0, 0, .24); }
.skin-builder-machine__card h4 { margin: 0 0 10px; color: #eaffff; letter-spacing: .12em; }
.skin-builder-machine__source { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.skin-builder-machine__source > div { min-width: 0; }
.skin-builder-machine__source > button { grid-column: 1 / -1; justify-self: start; }
.skin-builder-machine__thumb { width: 120px; aspect-ratio: 1234 / 750; height: auto; object-fit: contain; border: 1px solid rgba(0, 220, 255, .35); background: #05090c; }
.skin-builder-machine__source-name { color: #d9ffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-builder-machine__source-meta, .skin-builder-machine__empty { color: #70c9d7; font-size: 12px; }
.skin-builder-machine__targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; }
.skin-builder-machine__target { border: 1px solid rgba(255, 255, 255, .12); padding: 10px; }
.skin-builder-machine__target-name { color: #dff; }
.skin-builder-machine__target-meta { color: #70c9d7; font-size: 12px; margin-top: 4px; }
.skin-builder-machine__card-copy, .skin-builder-machine__outputs { color: #70c9d7; line-height: 1.5; }
.skin-builder-machine details { margin-top: 12px; }
.skin-builder-machine summary { color: #18f4ff; cursor: pointer; letter-spacing: .08em; }
.skin-builder-machine__prompt { max-height: 300px; overflow: auto; white-space: pre-wrap; color: #d9ffff; background: #05090c; border: 1px solid rgba(0, 220, 255, .25); padding: 12px; font: 12px/1.5 monospace; }
.skin-builder-machine__status { margin-top: 12px; color: #35f27c; min-height: 20px; }
@media (max-width: 900px) {
  .skin-builder-machine__grid, .skin-builder-machine__workflow-grid, .skin-builder-machine__stages, .skin-builder-machine__generator-fields { grid-template-columns: 1fr; }
}