.style-replication-root {
  --style-primary: #6c4bff;
  --style-primary-hover: #5937ed;
  --style-primary-light: #f2eeff;
  --style-border: #e8eaf1;
  --style-background: #f7f8fc;
  --style-text: #171a2b;
  --style-muted: #7a8194;
  --style-success: #22a06b;
  --style-error: #e5484d;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--style-text);
  background: #fff;
}

.style-replication-root * { box-sizing: border-box; }
.style-replication-root button,
.style-replication-root select,
.style-replication-root textarea { font: inherit; }
.style-replication-root svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.style-replication-workbench {
  display: grid;
  width: 100%;
  min-width: 1080px;
  height: 100%;
  min-height: 0;
  grid-template-columns: 230px minmax(500px, 600px) minmax(360px, 1fr);
  background: var(--style-background);
}
.style-replication-workbench.without-results {
  grid-template-columns: 230px minmax(600px, 1fr);
}

.style-history-panel,
.style-settings-panel,
.style-results-panel { min-width: 0; min-height: 0; background: #fff; }

.style-history-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 14px 14px;
  border-right: 1px solid var(--style-border);
}

.style-history-heading,
.style-page-heading,
.style-results-heading,
.style-config-card > header { display: flex; align-items: center; }
.style-history-heading { justify-content: space-between; padding: 0 4px; }
.style-history-heading h2,
.style-results-heading h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.style-history-heading button,
.style-history-menu { display: grid; place-items: center; border: 0; color: var(--style-muted); background: transparent; cursor: pointer; }
.style-history-heading button { width: 32px; height: 32px; border-radius: 9px; }
.style-history-heading button:hover { color: var(--style-primary); background: var(--style-primary-light); }

.style-new-task {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #5b38f5, #784dff 55%, #a33cf0);
  box-shadow: 0 9px 20px rgb(108 75 255 / 22%);
  cursor: pointer;
}

.style-history-filter,
.style-select-grid select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--style-border);
  border-radius: 8px;
  padding: 0 34px 0 12px;
  color: var(--style-text);
  background: #fff;
  outline: none;
}
.style-history-filter:focus,
.style-select-grid select:focus,
.style-copy-card textarea:focus { border-color: var(--style-primary); box-shadow: 0 0 0 3px rgb(108 75 255 / 10%); }

.style-history-list { min-height: 0; flex: 1; overflow: hidden auto; scrollbar-width: thin; }
.style-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--style-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.style-history-item:hover,
.style-history-item.active { border-color: rgb(108 75 255 / 36%); background: #fbfaff; box-shadow: 0 5px 16px rgb(40 34 82 / 6%); }
.style-history-thumb { display: grid; width: 64px; height: 68px; place-items: center; overflow: hidden; border-radius: 8px; color: #9aa1b4; background: #f0f2f7; }
.style-history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.style-history-copy { min-width: 0; padding: 2px 14px 0 0; }
.style-history-copy strong,
.style-history-copy span,
.style-history-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-history-copy strong { font-size: 12px; }
.style-history-copy span { margin-top: 7px; color: var(--style-muted); font-size: 10px; }
.style-history-copy small { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 8px; color: #a0a6b5; font-size: 9px; }
.style-history-copy i { border-radius: 5px; padding: 2px 5px; color: var(--style-success); background: #ebfbf3; font-style: normal; }
.style-history-copy i.status-generating,
.style-history-copy i.status-analyzing { color: #286ce4; background: #edf4ff; }
.style-history-copy i.status-failed { color: var(--style-error); background: #fff0f0; }
.style-history-copy i.status-partial_success { color: #9c6400; background: #fff7dd; }
.style-history-menu { position: absolute; top: 5px; right: 4px; width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.style-history-menu:hover { color: var(--style-primary); background: var(--style-primary-light); }
.style-history-empty { padding: 50px 12px; color: var(--style-muted); text-align: center; font-size: 12px; line-height: 1.8; }
.style-history-empty span { color: #a5aaba; font-size: 10px; }
.style-history-foot { margin: 0; color: #a4a9b7; text-align: center; font-size: 9px; }
.style-history-foot button { display: block; margin: 7px auto 0; border: 0; color: #6d5bd0; background: transparent; font: inherit; cursor: pointer; }

.style-settings-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-right: 1px solid var(--style-border); }
.style-page-heading { min-height: 72px; justify-content: space-between; gap: 16px; padding: 15px 24px 12px; border-bottom: 1px solid var(--style-border); }
.style-page-heading h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.style-page-heading p { margin: 3px 0 0; color: var(--style-muted); font-size: 11px; }
.style-guide-button,
.style-results-heading button,
.style-results-panel footer button { display: flex; align-items: center; gap: 6px; border: 1px solid #ddd8ff; border-radius: 8px; padding: 8px 11px; color: var(--style-primary); background: #fff; cursor: pointer; font-size: 11px; }
.style-settings-scroll { min-height: 0; padding: 12px 16px 18px; overflow: hidden auto; scrollbar-width: thin; }
.style-config-card { margin-bottom: 8px; border: 1px solid var(--style-border); border-radius: 12px; padding: 12px 14px; background: #fff; box-shadow: 0 3px 12px rgb(35 39 70 / 3%); }
.style-config-card > header { min-height: 24px; gap: 8px; }
.style-config-card h2 { margin: 0; font-size: 13px; }
.style-config-card header small { margin-left: 4px; color: #a0a6b6; font-size: 9px; }
.style-step-number { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 6px; color: #fff; background: var(--style-primary); font-size: 10px; font-weight: 700; }
.style-link-button { margin-left: auto; border: 0; color: var(--style-primary); background: transparent; cursor: pointer; font-size: 10px; }
.style-link-button:disabled { opacity: .5; cursor: not-allowed; }

.style-upload-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.style-upload-row.has-asset { grid-template-columns: 112px minmax(180px, 1fr); align-items: stretch; }
.style-upload-row.is-dragging .style-upload-box { border-color: var(--style-primary); background: var(--style-primary-light); }
.style-upload-preview { width: 112px; height: 88px; overflow: hidden; border: 1px solid var(--style-border); border-radius: 9px; background: #f3f4f8; }
.style-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.style-upload-box { display: flex; min-height: 84px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px dashed #d9dce6; border-radius: 9px; color: var(--style-muted); background: #fbfcfe; cursor: pointer; }
.style-upload-box:hover { border-color: var(--style-primary); background: #fbfaff; }
.style-upload-box svg { color: #8a91a5; }
.style-upload-box strong { color: #33384a; font-size: 11px; }
.style-upload-box span { font-size: 9px; }
.style-upload-box .style-spinner { width: 22px; height: 22px; border-width: 2px; }
.style-angles-card { background: #fcfcff; }
.style-angle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.style-angle-grid .style-config-card { margin: 0; padding: 8px; box-shadow: none; background: #fff; }
.style-angle-grid .style-config-card > header { min-height: 18px; }
.style-angle-grid .style-config-card h2 { font-size: 10px; }
.style-angle-grid .style-step-number { width: 17px; height: 17px; flex-basis: 17px; border-radius: 5px; font-size: 0; }
.style-angle-grid .style-upload-row { margin-top: 7px; gap: 6px; }
.style-angle-grid .style-upload-row.has-asset { grid-template-columns: 58px minmax(0, 1fr); }
.style-angle-grid .style-upload-preview { width: 58px; height: 58px; }
.style-angle-grid .style-upload-box { min-height: 58px; }
.style-angle-grid .style-upload-box strong { font-size: 9px; }
.style-angle-grid .style-upload-box span { font-size: 8px; text-align: center; }
.style-angle-grid .style-asset-meta { font-size: 8px; }
.style-field-help { margin: 8px 0 0; color: #8f96a8; font-size: 9px; line-height: 1.5; }
.style-asset-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: -4px; color: var(--style-muted); font-size: 9px; }
.style-asset-meta strong { max-width: 180px; overflow: hidden; color: #4b5164; text-overflow: ellipsis; white-space: nowrap; }
.style-asset-meta button { display: flex; align-items: center; gap: 3px; margin-left: auto; border: 0; color: var(--style-error); background: transparent; cursor: pointer; font-size: 9px; }
.style-asset-meta button svg { width: 13px; height: 13px; }

.style-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.style-choice-chip { display: flex; min-height: 29px; align-items: center; gap: 5px; border: 1px solid var(--style-border); border-radius: 7px; padding: 5px 10px; color: #555c70; background: #fff; cursor: pointer; font-size: 10px; }
.style-choice-chip span { display: grid; width: 14px; height: 14px; place-items: center; border: 1px solid #ccd1de; border-radius: 50%; }
.style-choice-chip span svg { width: 10px; height: 10px; }
.style-choice-chip.selected { border-color: var(--style-primary); color: var(--style-primary); background: #fbfaff; }
.style-choice-chip.selected span { border-color: var(--style-primary); background: var(--style-primary-light); }
.style-choice-chip:disabled { opacity: .7; cursor: not-allowed; }

.style-copy-card textarea { width: 100%; min-height: 142px; margin-top: 9px; resize: vertical; border: 1px solid var(--style-border); border-radius: 8px; padding: 10px 12px; color: var(--style-text); background: #fff; outline: none; font-size: 10px; line-height: 1.7; }
.style-copy-card textarea::placeholder { color: #adb2bf; }
.style-select-grid { display: grid; grid-template-columns: 1.35fr 1fr .8fr; gap: 10px; margin-top: 10px; }
.style-select-grid label { display: grid; gap: 5px; color: #5c6273; font-size: 9px; }
.style-select-grid select { height: 36px; font-size: 10px; }
.style-output-card > p { margin: 8px 0 0; color: #9ca2b1; font-size: 9px; }

.style-generate-footer { padding: 10px 18px 12px; border-top: 1px solid var(--style-border); background: #fff; }
.style-generate-button { width: 100%; height: 43px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(100deg, #5634f3, #7b48ff 52%, #b13ee8); box-shadow: 0 8px 22px rgb(108 75 255 / 22%); cursor: pointer; font-weight: 700; font-size: 12px; }
.style-generate-button:hover:not(:disabled) { background: linear-gradient(100deg, #4f2de8, #6e3cf4 52%, #a631df); }
.style-generate-button:disabled { color: #a4a9b7; background: #eef0f5; box-shadow: none; cursor: not-allowed; }
.style-generate-footer > span { display: block; margin-top: 7px; color: #9da3b2; text-align: center; font-size: 9px; }

.style-results-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 0 20px; }
.style-results-heading { min-height: 72px; justify-content: space-between; border-bottom: 1px solid var(--style-border); }
.style-results-heading button { color: var(--style-error); border-color: #ffd6d8; }
.style-progress-steps { display: grid; grid-template-columns: minmax(105px, 1fr) 32px minmax(95px, 1fr) 32px minmax(125px, 1fr); align-items: center; gap: 8px; padding: 22px 4px 18px; }
.style-progress-steps > div { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 2px 7px; color: #9ca2b0; }
.style-progress-steps > div > span { grid-row: 1 / 3; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #dde0e8; border-radius: 50%; background: #fff; font-size: 10px; font-weight: 700; }
.style-progress-steps strong { overflow: hidden; color: #666d80; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-progress-steps small { font-size: 9px; }
.style-progress-steps > i { height: 1px; background: #e4e6ec; }
.style-progress-steps > div.active > span,
.style-progress-steps > div.done > span { border-color: var(--style-primary); color: #fff; background: var(--style-primary); }
.style-progress-steps > div.active strong,
.style-progress-steps > div.done strong { color: #353a4c; }
.style-progress-steps > div.active small { color: var(--style-primary); }
.style-progress-steps > div.done small { color: var(--style-success); }
.style-progress-steps > div.done + i { background: var(--style-primary); }
.style-progress-steps > div.failed > span { border-color: var(--style-error); color: #fff; background: var(--style-error); }
.style-progress-steps > div.failed strong,
.style-progress-steps > div.failed small { color: var(--style-error); }

.style-result-scroll { min-height: 0; overflow: hidden auto; scrollbar-width: thin; padding: 0 4px 18px; }
.style-stage-message { display: flex; min-height: 68px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; margin-bottom: 14px; border: 1px solid #e6e2ff; border-radius: 10px; color: #5d6475; background: #fbfaff; text-align: center; }
.style-stage-message strong { font-size: 11px; }
.style-stage-message small { color: var(--style-muted); font-size: 9px; }
.style-stage-message.is-empty { min-height: 150px; border-style: dashed; border-color: #e1e3ea; color: #8e95a6; background: #fcfcfd; }
.style-stage-message.is-empty svg { width: 30px; height: 30px; }
.style-stage-message.is-error { border-color: #ffd9da; background: #fff8f8; }
.style-stage-message.is-warning { border-color: #f4e0a6; background: #fffcf1; }
.style-stage-message button { margin-top: 4px; border: 1px solid currentColor; border-radius: 7px; padding: 6px 10px; color: var(--style-primary); background: #fff; cursor: pointer; font-size: 9px; }
.style-stage-message.is-error button { color: var(--style-error); }
.style-stage-message.is-warning button { color: #8d6500; }
.style-error-details { max-width: min(100%, 520px); color: #72788a; font-size: 9px; }
.style-error-details summary { cursor: pointer; color: var(--style-error); }
.style-error-details p { margin: 5px 0 0; overflow-wrap: anywhere; }
.style-completed-label { margin: 0 0 12px; color: #555c6d; font-size: 10px; }
.style-spinner { display: block; width: 28px; height: 28px; border: 3px solid #e7e2ff; border-top-color: var(--style-primary); border-radius: 50%; animation: style-spin .9s linear infinite; }
@keyframes style-spin { to { transform: rotate(360deg); } }

.style-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.style-result-grid.is-single { grid-template-columns: minmax(0, 520px); }
.style-result-card { min-width: 0; overflow: hidden; border: 1px dashed #dfe2ea; border-radius: 10px; background: #fff; }
.style-result-card.is-pending,
.style-result-card.is-generating,
.style-result-card.is-failed { display: grid; min-height: 278px; place-items: center; color: var(--style-muted); text-align: center; }
.style-result-card.is-generating { border-style: solid; border-color: #ddd6ff; background: linear-gradient(145deg, #f7f9fc, #edf4fc); }
.style-result-card.is-failed { border-color: #ffd4d6; background: #fffafa; }
.style-result-card > div > svg { width: 30px; height: 30px; }
.style-result-card > div > strong { display: block; margin-top: 12px; color: #454b5e; font-size: 12px; }
.style-result-card > div > p { margin: 7px 0; font-size: 9px; }
.style-result-card.is-failed button { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; border: 1px solid #ffd0d3; border-radius: 7px; padding: 7px 10px; color: var(--style-error); background: #fff; cursor: pointer; font-size: 9px; }
.style-result-image { position: relative; min-height: 260px; overflow: hidden; background: #f0f2f7; }
.style-result-image > img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.style-result-grid.ratio-square-1-1 .style-result-image > img { aspect-ratio: 1 / 1; }
.style-result-grid.ratio-portrait-4-5 .style-result-image > img { aspect-ratio: 4 / 5; }
.style-result-grid.ratio-landscape-4-3 .style-result-image > img { aspect-ratio: 4 / 3; }
.style-result-grid.ratio-portrait-9-16 .style-result-image > img { aspect-ratio: 9 / 16; }
.style-result-grid.ratio-landscape-16-9 .style-result-image > img { aspect-ratio: 16 / 9; }
.style-result-actions { position: absolute; inset: auto 8px 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; opacity: 0; transform: translateY(5px); transition: opacity .18s ease, transform .18s ease; }
.style-result-image:hover .style-result-actions { opacity: 1; transform: translateY(0); }
.style-result-actions a,
.style-result-actions button { display: inline-flex; align-items: center; gap: 3px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 6px; padding: 6px 7px; color: #fff; background: rgb(25 29 43 / 76%); backdrop-filter: blur(8px); text-decoration: none; cursor: pointer; font-size: 8px; }
.style-result-actions button:disabled { opacity: .45; cursor: not-allowed; }
.style-result-actions svg { width: 12px; height: 12px; }
.style-result-meta { padding: 10px 11px 11px; }
.style-result-meta > strong { display: inline; margin: 0 7px 0 0; font-size: 11px; }
.style-result-meta > span { color: var(--style-muted); font-size: 9px; }
.style-result-meta details { margin-top: 8px; border-top: 1px solid #eff0f4; padding-top: 7px; color: var(--style-muted); font-size: 9px; }
.style-result-meta summary { cursor: pointer; }
.style-result-meta p { margin: 7px 0; }
.style-result-meta ul { margin: 0; padding-left: 16px; }

.style-results-panel > footer { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--style-border); color: #a0a6b4; font-size: 9px; }
.style-results-panel > footer button { color: #555c70; border-color: var(--style-border); }

.style-notice { position: fixed; z-index: 2400; right: 24px; bottom: 24px; max-width: 360px; margin: 0; border: 1px solid #ded8ff; border-radius: 9px; padding: 10px 14px; color: #4d4386; background: #f7f4ff; box-shadow: 0 12px 36px rgb(33 28 62 / 18%); font-size: 11px; }
.style-notice.is-error { border-color: #ffd1d3; color: #a82e34; background: #fff4f4; }
.style-notice.is-success { border-color: #cdebdc; color: #18724b; background: #f0fbf6; }
.style-result-dialog { width: min(88vw, 920px); max-height: 92vh; overflow: hidden; border: 0; border-radius: 14px; padding: 42px 16px 16px; background: #11141d; box-shadow: 0 28px 80px rgb(0 0 0 / 35%); }
.style-result-dialog::backdrop { background: rgb(9 11 18 / 72%); backdrop-filter: blur(5px); }
.style-result-dialog img { display: block; max-width: 100%; max-height: calc(92vh - 58px); margin: auto; object-fit: contain; }
.style-result-dialog button { position: absolute; top: 9px; right: 11px; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgb(255 255 255 / 13%); cursor: pointer; }

.style-replication-nav-icon svg { width: 22px; height: 22px; }

@media (max-width: 1480px) and (min-width: 761px) {
  .style-replication-workbench { grid-template-columns: 215px minmax(460px, 540px) minmax(340px, 1fr); }
  .style-replication-workbench.without-results { grid-template-columns: 215px minmax(560px, 1fr); }
  .style-results-panel { padding-inline: 14px; }
  .style-progress-steps { gap: 5px; grid-template-columns: minmax(90px, 1fr) 20px minmax(86px, 1fr) 20px minmax(108px, 1fr); }
}

@media (max-width: 760px) {
  .style-replication-workbench { display: block; min-width: 0; overflow: auto; }
  .style-history-panel { display: flex; max-height: 164px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--style-border); }
  .style-history-heading { min-height: 24px; }
  .style-new-task { min-height: 34px; }
  .style-history-list { display: flex; min-height: 74px; gap: 8px; overflow-x: auto; overflow-y: hidden; }
  .style-history-item { min-width: 210px; }
  .style-history-foot { display: none; }
  .style-settings-panel,
  .style-results-panel { min-height: 100%; }
  .style-settings-panel { border-right: 0; }
  .style-results-panel { padding: 0 12px 76px; }
  .style-result-grid { grid-template-columns: 1fr; }
  .style-select-grid { grid-template-columns: 1fr; }
  .style-progress-steps { overflow-x: auto; grid-template-columns: 130px 26px 110px 26px 150px; }
}