html:has(body.lj-commerce-video-setup-open), body.lj-commerce-video-setup-open { overflow: hidden; }
.lj-commerce-video-setup-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; background: #25232c52; backdrop-filter: blur(3px); color: #242426; font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
.lj-commerce-video-setup-page { display: flex; flex-direction: column; width: min(1000px, 100%); max-height: calc(100dvh - 64px); min-height: 0; overflow: hidden; border: 1px solid #e9e7ec; border-radius: 24px; background: #fff; box-shadow: 0 24px 90px #24202e30; }
.lj-commerce-video-setup-overlay *, .lj-commerce-video-setup-overlay *::before, .lj-commerce-video-setup-overlay *::after { box-sizing: border-box; }
.lj-commerce-video-setup-overlay [hidden] { display: none !important; }
.lj-commerce-video-setup-overlay button { font: inherit; cursor: pointer; }
.lj-commerce-video-setup-overlay svg { width: 19px; height: 19px; flex-shrink: 0; }
.lj-commerce-video-setup-overlay button:focus-visible { outline: 3px solid #c4b5ed; outline-offset: 3px; }
.lj-commerce-video-setup-header { min-height: 62px; flex-shrink: 0; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #efedf1; background: #fff; }
.lj-commerce-video-setup-header h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.5px; line-height: 1.3; }
.lj-commerce-video-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: #f6f5f7; border-radius: 10px; color: #8c8792; }
.lj-commerce-video-close:hover { background: #edebf0; color: #39333f; }
.lj-commerce-video-setup-body { width: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.lj-commerce-video-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; }
.lj-commerce-video-upload { min-width: 0; padding: 16px; }
.lj-commerce-video-demo { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 16px; overflow: hidden; border: 1px solid #e9e8e6; border-radius: 16px; background: #fbfbfc; }
.lj-commerce-video-demo-comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; overflow: hidden; background: #f1efeb; }
.lj-commerce-video-demo-caption { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 14px; }
.lj-commerce-video-demo-caption h2 { flex-shrink: 0; }
.lj-commerce-video-demo-caption > span { margin-left: 5px; color: #85828b; font-size: 12px; white-space: nowrap; }
.lj-commerce-video-demo-caption > svg { width: 18px; height: 18px; }
.lj-commerce-video-demo-pane { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; }
.lj-commerce-video-demo-pane + .lj-commerce-video-demo-pane { border-left: 1px solid #fff; }
.lj-commerce-video-demo-pane img, .lj-commerce-video-demo-pane video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lj-commerce-video-demo-loading, .lj-commerce-video-demo-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; background: #fff9; color: #65596f; font-size: 12px; padding: 16px; text-align: center; pointer-events: none; }
.lj-commerce-video-demo-loading::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; border: 2px solid #d9cfe4; border-top-color: #8b73a5; border-radius: 50%; animation: lj-commerce-demo-spin 1s linear infinite; }
@keyframes lj-commerce-demo-spin { to { transform: rotate(360deg); } }
.lj-commerce-video-settings { min-width: 0; padding: 20px 24px; border-left: 1px solid #efeeed; }
.lj-commerce-video-workspace h2 { margin: 0; font-size: 16px; font-weight: 650; }
.lj-commerce-video-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lj-commerce-video-count { font-size: 12px; background: #f4f4f2; border-radius: 6px; color: #939095; padding: 3px 8px; }
.lj-commerce-video-muted { margin: 7px 0 23px; color: #939096; font-size: 12px; }
.lj-commerce-video-upload-stage { margin-top: 8px; min-height: 78px; display: flex; flex-direction: column; border: 1px dashed #dcdadf; background: #fbfafc; border-radius: 14px; transition: background .16s, border-color .16s; }
.lj-commerce-video-upload-stage.is-dragging { border-color: #9a82c2; background: #f5f0fc; }
.lj-commerce-video-dropzone { border: 0; padding: 12px; border-radius: 14px; flex: 1; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 9px; background: transparent; color: #555158; }
.lj-commerce-video-upload-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #92809e; }
.lj-commerce-video-upload-icon svg { width: 26px; height: 26px; }
.lj-commerce-video-dropzone b { font-size: 14px; font-weight: 550; }
.lj-commerce-video-dropzone small { color: #a09aa6; font-size: 12px; }
.lj-commerce-video-formats { font-size: 11px; color: #aaa5ae; text-align: center; margin: 8px 0 0; }
.lj-commerce-video-error { margin: 10px 0 0; color: #b44747; font-size: 12px; }
.lj-commerce-video-error:empty { display: none; }
.lj-commerce-video-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.lj-commerce-video-preview { position: relative; min-width: 0; margin: 0; aspect-ratio: 1; background: #f2f1f1; border-radius: 10px; overflow: hidden; }
.lj-commerce-video-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lj-commerce-video-preview figcaption { position: absolute; left: 7px; bottom: 7px; padding: 2px 7px; border-radius: 5px; background: #fffd; color: #676269; font-size: 10px; }
.lj-commerce-video-preview > button { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; border: 1px solid #fff5; background: #343139b3; color: white; width: 23px; height: 23px; border-radius: 50%; }
.lj-commerce-video-preview > button svg { width: 13px; height: 13px; }
.has-images .lj-commerce-video-dropzone { min-height: 68px; flex-direction: row; flex: initial; padding: 12px; margin-top: auto; }
.has-images .lj-commerce-video-upload-icon { width: 28px; height: 28px; border: 0; background: transparent; box-shadow: none; margin: 0; }
.has-images .lj-commerce-video-upload-icon svg { width: 19px; height: 19px; }
.has-images .lj-commerce-video-dropzone small { display: none; }
.lj-commerce-video-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; margin-top: 18px; }
.lj-commerce-video-field { position: relative; min-width: 0; }
.lj-commerce-video-field.model, .lj-commerce-video-field.ratio { grid-column: 1 / -1; }
.lj-commerce-video-field-label { display: block; color: #89848f; font-size: 12px; margin-bottom: 7px; }
.lj-commerce-video-choice { width: 100%; height: 43px; display: flex; align-items: center; gap: 9px; padding: 0 13px; background: #f7f7f5; border: 1px solid #ecebe8; border-radius: 22px; color: #49464c; }
.lj-commerce-video-choice > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-commerce-video-choice > svg:first-child { color: #82778e; width: 17px; height: 17px; }
.lj-commerce-video-choice > svg:last-child { margin-left: auto; width: 14px; height: 14px; color: #949095; }
.lj-commerce-video-choice:hover, .lj-commerce-video-choice[aria-expanded="true"] { border-color: #d9d1e4; background: #f5f2f9; }
.lj-commerce-video-menu { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 7px); padding: 6px; background: #fff; border: 1px solid #e8e5ec; border-radius: 15px; box-shadow: 0 12px 30px #2921361a; max-height: 255px; overflow-y: auto; }
.lj-commerce-video-menu.opens-up { top: auto; bottom: calc(100% + 7px); }
.lj-commerce-video-menu.duration { left: auto; width: min(362px, calc(100vw - 74px)); padding: 14px; }
.lj-commerce-video-menu.ratio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 10px; max-height: 340px; }
.lj-commerce-video-option { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; border-radius: 9px; background: transparent; padding: 9px 10px; color: #534d5b; }
.lj-commerce-video-option > span { min-width: 0; }
.lj-commerce-video-option b { display: block; font-size: 12px; font-weight: 550; }
.lj-commerce-video-option small { display: block; font-size: 11px; color: #9b95a0; margin-top: 3px; }
.lj-commerce-video-option svg { width: 14px; height: 14px; opacity: 0; }
.lj-commerce-video-option.is-selected { color: #8267a6; background: #f5f1fb; }
.lj-commerce-video-option.is-selected svg { opacity: 1; }
.lj-commerce-video-option:hover { background: #f5f4f7; }
.lj-commerce-video-menu.ratio .lj-commerce-video-option { position: relative; flex-direction: column; justify-content: center; gap: 7px; min-height: 88px; border: 1px solid #e0dfdb; background: #f5f5f3; color: #30302e; text-align: center; }
.lj-commerce-video-menu.ratio .lj-commerce-video-option > i { display: block; flex-shrink: 0; border: 1px solid #87877f; border-radius: 3px; }
.lj-commerce-video-menu.ratio .lj-commerce-video-option > svg { display: none; }
.lj-commerce-video-menu.ratio .lj-commerce-video-option small { color: #8b8b84; font-size: 10px; }
.lj-commerce-video-menu.ratio .lj-commerce-video-option.is-selected, .lj-commerce-video-menu.resolution .lj-commerce-video-option.is-selected { border-color: #30302e; box-shadow: inset 0 0 0 1px #30302e; background: #fff; color: #222; }
.lj-commerce-video-menu.resolution { padding: 7px; display: grid; gap: 5px; }
.lj-commerce-video-menu.resolution .lj-commerce-video-option { border: 1px solid #e0dfdb; background: #f5f5f3; color: #30302e; }
.lj-commerce-video-duration-editor { display: flex; align-items: center; gap: 12px; padding: 12px 0 8px; }
.lj-commerce-video-duration-slider { flex: 1; min-width: 0; }
.lj-commerce-video-duration-slider input { width: 100%; margin: 0; accent-color: #282826; cursor: pointer; }
.lj-commerce-video-duration-slider input:focus-visible { outline: 2px solid #888; outline-offset: 3px; }
.lj-commerce-video-duration-limits { display: flex; justify-content: space-between; color: #92928b; font-size: 10px; margin-top: 4px; }
.lj-commerce-video-duration-stepper { display: flex; align-items: center; border: 1px solid #deded8; border-radius: 11px; overflow: hidden; flex-shrink: 0; }
.lj-commerce-video-duration-stepper > button { width: 28px; height: 39px; border: 0; background: #f5f5f3; color: #55554e; font-size: 18px; }
.lj-commerce-video-duration-stepper > button:disabled { opacity: .35; cursor: default; }
.lj-commerce-video-duration-stepper output { min-width: 48px; text-align: center; color: #282826; font-size: 13px; font-weight: 650; }
.lj-commerce-video-duration-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lj-commerce-video-duration-presets > button { border: 1px solid #deded8; border-radius: 20px; background: #f5f5f3; color: #30302e; padding: 4px 10px; font-size: 11px; }
.lj-commerce-video-duration-presets > button[aria-pressed="true"] { background: #fff; border-color: #30302e; box-shadow: inset 0 0 0 1px #30302e; }
.lj-commerce-video-model-note { min-height: 17px; font-size: 11px; color: #9d96a3; margin: 11px 0 21px; }
.lj-commerce-video-mode-area { border-top: 1px solid #efeeef; padding-top: 19px; }
.lj-commerce-video-mode-options { display: flex; gap: 8px; }
.lj-commerce-video-mode-options > button { display: flex; align-items: center; justify-content: center; gap: 7px; flex: 1; padding: 10px 8px; border: 1px solid #e9e7eb; background: #fff; border-radius: 22px; color: #8d8595; font-size: 12px; }
.lj-commerce-video-mode-options svg { width: 16px; height: 16px; }
.lj-commerce-video-mode-options > button[aria-checked="true"] { color: #7b639e; border-color: #e3dbef; background: #f5f1fb; }
.lj-commerce-video-mode-note { color: #a49ca9; font-size: 11px; line-height: 1.6; margin: 10px 0 0; }
.lj-commerce-video-setup-footer { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 20px; border-top: 1px solid #eeedeb; background: #fff; }
.lj-commerce-video-summary { display: grid; gap: 3px; }
.lj-commerce-video-summary b { font-size: 12px; font-weight: 550; color: #5d5863; }
.lj-commerce-video-summary small { font-size: 11px; color: #a59da9; }
/* Keep the primary label above the commerce page's inherited button color. */
.lj-commerce-video-setup-overlay .lj-commerce-video-continue { display: flex; align-items: center; justify-content: center; gap: 20px; flex-shrink: 0; min-width: 166px; height: 44px; padding: 0 22px; border: 1px solid #252427; border-radius: 24px; color: #fff; background: #272529; font-weight: 550; transition: background .15s; }
.lj-commerce-video-setup-overlay .lj-commerce-video-continue:hover:not(:disabled) { background: #454048; }
.lj-commerce-video-setup-overlay .lj-commerce-video-continue:disabled { background: #eeecef; border-color: #eeecef; color: #817889; cursor: not-allowed; }
section[aria-labelledby="commerce-product-video-title"] lanjuan-video-mode { display: none; }
@media (max-width: 760px) {
  .lj-commerce-video-setup-overlay { padding: 16px; }
  .lj-commerce-video-setup-page { max-height: calc(100dvh - 32px); border-radius: 20px; }
  .lj-commerce-video-setup-header { min-height: 58px; padding: 12px 16px; }
  .lj-commerce-video-setup-header h1 { font-size: 18px; }
  .lj-commerce-video-workspace { grid-template-columns: minmax(0, 1fr); }
  .lj-commerce-video-upload, .lj-commerce-video-settings { padding: 14px; }
  .lj-commerce-video-settings { border-left: 0; border-top: 1px solid #efeeed; }
  .lj-commerce-video-upload-stage { min-height: 72px; }
  .lj-commerce-video-dropzone { min-height: 70px; padding: 10px 8px; gap: 7px; }
  .lj-commerce-video-dropzone small { font-size: 10px; }
  .lj-commerce-video-demo h2 { font-size: 14px; }
  .lj-commerce-video-demo-caption { gap: 7px; padding: 10px 12px; min-height: 44px; }
  .lj-commerce-video-demo-caption > span { margin-left: 2px; font-size: 11px; }
  .lj-commerce-video-dropzone b { font-size: 12px; }
  .lj-commerce-video-formats { font-size: 10px; }
  .lj-commerce-video-settings .lj-commerce-video-muted { margin-bottom: 18px; }
  .lj-commerce-video-setup-footer { padding: 12px 14px; gap: 10px; }
  .lj-commerce-video-continue { min-width: 128px; gap: 13px; padding: 0 17px; }
  .lj-commerce-video-summary small { font-size: 10px; }
  .lj-commerce-video-summary b { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .lj-commerce-video-setup-overlay * { transition: none !important; animation: none !important; } }