.skill-inspiration-card {
  border: 0;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.skill-inspiration-card > div { padding-right: 72px; }
.skill-inspiration-card > div i {
  position: absolute;
  right: 14px;
  bottom: 13px;
  color: rgba(255, 255, 255, .9);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: .02em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

.skill-inspiration-card:hover > div i,
.skill-inspiration-card:focus-visible > div i { opacity: 1; transform: translateX(0); }
.skill-inspiration-card:focus-visible { box-shadow: inset 0 0 0 3px #6157ee; }

.video-replica-skill-view {
  width: min(1500px, calc(100% - 136px));
  margin: 0 32px 60px 100px;
  padding-top: 86px;
  color: #242631;
}

.video-replica-skill-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
}

.video-replica-skill-header > button {
  width: 42px;
  height: 42px;
  border: 1px solid #e1e3ed;
  border-radius: 13px;
  color: #353744;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 5px 16px rgba(43, 45, 65, .06);
}

.video-replica-skill-header > div > span,
.video-replica-skill-result > header span {
  color: #665af0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.video-replica-skill-header h1 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.025em; }
.video-replica-skill-header p { margin: 4px 0 0; color: #8a8e9e; font-size: 11px; }
.video-replica-skill-header > em {
  padding: 8px 11px;
  border: 1px solid #dddafc;
  border-radius: 999px;
  color: #5549d9;
  background: #f4f2ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .1em;
}

.video-replica-skill-layout {
  display: grid;
  grid-template-columns: minmax(460px, .88fr) minmax(520px, 1.12fr);
  gap: 16px;
  align-items: start;
}

.video-replica-skill-form,
.video-replica-skill-result {
  border: 1px solid #e4e5ed;
  border-radius: 22px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 16px 45px rgba(36, 39, 60, .07);
}

.video-replica-skill-form { padding: 20px; }
.video-replica-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
}
.video-replica-section-title:not(:first-child) { margin-top: 24px; }
.video-replica-section-title > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #2c2d37;
  font-size: 8px;
  font-weight: 800;
}
.video-replica-section-title strong,
.video-replica-section-title small { display: block; }
.video-replica-section-title strong { font-size: 12px; }
.video-replica-section-title small { margin-top: 2px; color: #989baa; font-size: 9px; }

.video-replica-mode { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.video-replica-mode button {
  padding: 13px 14px;
  border: 1px solid #e2e3eb;
  border-radius: 13px;
  text-align: left;
  color: #373945;
  background: #fafafd;
  cursor: pointer;
}
.video-replica-mode button.selected {
  border-color: #6a5ff0;
  background: #f2f0ff;
  box-shadow: inset 0 0 0 1px #6a5ff0;
}
.video-replica-mode strong,
.video-replica-mode small { display: block; }
.video-replica-mode strong { font-size: 11px; }
.video-replica-mode small { margin-top: 4px; color: #9699a6; font-size: 9px; }
.video-replica-mode .selected small { color: #675fe0; }

.video-replica-upload-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.video-replica-upload-card {
  display: grid;
  min-height: 116px;
  place-items: center;
  align-content: center;
  border: 1px dashed #cfd1dc;
  border-radius: 14px;
  background: #fafafd;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.video-replica-upload-card:hover,
.video-replica-upload-card.dragging { border-color: #6a5ff0; background: #f5f3ff; transform: translateY(-1px); }
.video-replica-upload-card.is-disabled { cursor: not-allowed; opacity: .5; transform: none; }
.video-replica-upload-card > span {
  display: grid;
  width: 30px;
  height: 30px;
  margin-bottom: 7px;
  place-items: center;
  border-radius: 10px;
  color: #655aed;
  background: #ece9ff;
  font-size: 17px;
}
.video-replica-upload-card strong { font-size: 10px; }
.video-replica-upload-card small { margin-top: 4px; color: #9a9daa; font-size: 8px; }

.video-replica-file-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 25px;
  min-height: 116px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dddfea;
  border-radius: 14px;
  background: #f8f8fc;
}
.video-replica-file-card video { width: 74px; height: 94px; border-radius: 10px; object-fit: cover; background: #151721; }
.video-replica-file-card strong,
.video-replica-file-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-replica-file-card strong { font-size: 10px; }
.video-replica-file-card small { margin-top: 5px; color: #9094a3; font-size: 8px; }
.video-replica-file-card button {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 8px;
  color: #747886;
  background: #e8e9ef;
  cursor: pointer;
}

.video-replica-product-list { display: flex; gap: 7px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; }
.video-replica-product-thumb { position: relative; flex: 0 0 70px; height: 70px; }
.video-replica-product-thumb img { width: 100%; height: 100%; border-radius: 11px; object-fit: cover; background: #f0f1f5; }
.video-replica-product-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: rgba(22, 24, 31, .72);
  cursor: pointer;
}

.video-replica-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.video-replica-fields label { display: grid; gap: 6px; }
.video-replica-fields label.full { grid-column: 1 / -1; }
.video-replica-fields label > span { color: #6e7180; font-size: 9px; font-weight: 650; }
.video-replica-fields input,
.video-replica-fields select,
.video-replica-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dedfe7;
  border-radius: 11px;
  outline: none;
  color: #30323d;
  background: #fafafd;
  font: inherit;
  font-size: 10px;
}
.video-replica-fields input,
.video-replica-fields select { height: 38px; padding: 0 11px; }
.video-replica-fields textarea { resize: vertical; padding: 10px 11px; line-height: 1.6; }
.video-replica-fields input:focus,
.video-replica-fields select:focus,
.video-replica-fields textarea:focus { border-color: #7065ee; box-shadow: 0 0 0 3px rgba(112, 101, 238, .1); }

.video-replica-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #ececf2;
}
.video-replica-submit-row strong,
.video-replica-submit-row small { display: block; }
.video-replica-submit-row strong { font-size: 10px; }
.video-replica-submit-row small { margin-top: 4px; color: #9296a4; font-size: 8px; }
.video-replica-submit-row > button {
  display: flex;
  min-width: 154px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: #5f55e8;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  box-shadow: 0 10px 22px rgba(95, 85, 232, .24);
}
.video-replica-submit-row > button:disabled { cursor: wait; opacity: .62; box-shadow: none; }
.video-replica-submit-row > button i { font-size: 15px; font-style: normal; }
.video-replica-warning { margin: 9px 0 0; color: #999ca9; font-size: 8px; text-align: right; }

.video-replica-skill-result { min-height: 640px; overflow: hidden; }
.video-replica-skill-result > header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #e9e9ef;
}
.video-replica-skill-result > header strong { display: block; margin-top: 2px; font-size: 12px; }
.video-replica-result-actions { display: flex; gap: 6px; }
.video-replica-result-actions button {
  height: 30px;
  padding: 0 11px;
  border: 1px solid #dedfe7;
  border-radius: 9px;
  color: #4b4e5a;
  background: #fff;
  cursor: pointer;
  font-size: 9px;
}
.video-replica-result-actions button.use-prompt {
  border-color: #28243f;
  color: #fff;
  background: #28243f;
}
.video-replica-result-actions button.use-prompt:hover { background: #443d70; }
.video-replica-result-actions button:focus-visible { outline: 3px solid #6558d933; outline-offset: 2px; }

.video-replica-result-empty,
.video-replica-progress {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  text-align: center;
}
.video-replica-result-empty > i {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
  place-items: center;
  border: 1px solid #dcd9ff;
  border-radius: 22px;
  color: #5b51dc;
  background: #f2f0ff;
  font-size: 18px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: -.05em;
  transform: rotate(-4deg);
}
.video-replica-result-empty strong,
.video-replica-progress strong { font-size: 12px; }
.video-replica-result-empty p,
.video-replica-progress p { max-width: 310px; margin: 7px 0 0; color: #9599a8; font-size: 9px; line-height: 1.7; }
.video-replica-progress > span {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 15px;
  place-items: center;
  border-radius: 18px;
  background: #efedff;
}
.video-replica-progress > span i {
  width: 24px;
  height: 24px;
  border: 2px solid #d2cef9;
  border-top-color: #6056e7;
  border-radius: 50%;
  animation: video-replica-spin .9s linear infinite;
}
@keyframes video-replica-spin { to { transform: rotate(360deg); } }

.video-replica-result-content nav { display: flex; gap: 4px; padding: 12px 16px 0; }
.video-replica-result-content nav button {
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  color: #858997;
  background: transparent;
  cursor: pointer;
  font-size: 9px;
}
.video-replica-result-content nav button.active { color: #4f45d0; background: #efedff; font-weight: 750; }
.video-replica-result-content pre {
  max-height: 494px;
  margin: 10px 16px 16px;
  overflow: auto;
  padding: 16px;
  border-radius: 14px;
  color: #363944;
  background: #f7f7fa;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
  font-size: 10px;
  line-height: 1.8;
}

.video-replica-history { border-top: 1px solid #e9e9ef; }
.video-replica-history > header {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
}
.video-replica-history > header strong { font-size: 10px; }
.video-replica-history > header small { color: #999ca9; font-size: 8px; }
#videoReplicaHistoryList { display: grid; gap: 1px; max-height: 180px; overflow-y: auto; padding: 0 8px 8px; }
.video-replica-history-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 0;
  border-radius: 10px;
  text-align: left;
  color: #444752;
  background: transparent;
  cursor: pointer;
}
.video-replica-history-item:hover { background: #f5f5f9; }
.video-replica-history-item > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #6359e6;
  background: #eeecff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
.video-replica-history-item strong,
.video-replica-history-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-replica-history-item strong { font-size: 9px; }
.video-replica-history-item small { margin-top: 3px; color: #999ca9; font-size: 8px; }
.video-replica-history-item > span { color: #777b88; font-size: 8px; }
.video-replica-history-item.failed > i { color: #bd4141; background: #fff0f0; }

@media (max-width: 1080px) {
  .video-replica-skill-view { width: calc(100% - 112px); margin-left: 92px; margin-right: 20px; }
  .video-replica-skill-layout { grid-template-columns: 1fr; }
  .video-replica-skill-result { min-height: 480px; }
}

@media (max-width: 680px) {
  .video-replica-skill-view { width: calc(100% - 24px); margin: 0 12px 78px; padding-top: 76px; }
  .video-replica-skill-header { grid-template-columns: 38px minmax(0, 1fr); }
  .video-replica-skill-header > em { display: none; }
  .video-replica-skill-header h1 { font-size: 17px; }
  .video-replica-skill-header p { display: none; }
  .video-replica-skill-form { padding: 14px; }
  .video-replica-upload-grid,
  .video-replica-fields { grid-template-columns: 1fr; }
  .video-replica-submit-row { align-items: stretch; flex-direction: column; }
  .video-replica-submit-row > button { width: 100%; }
  .video-replica-warning { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .skill-inspiration-card > div i,
  .video-replica-upload-card { transition: none; }
  .video-replica-progress > span i { animation-duration: 1.8s; }
}