.jmc-editor .jmk-widget { display: flex; box-sizing: border-box; align-items: center; gap: 4px; width: 680px; max-width: calc(100vw - 48px); min-height: 40px; padding: 4px; border-radius: 12px; background: #202022; color: #c9c9cf; font: 13px/20px "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; }
.jmc-editor .jmk-widget[hidden], .jmc-editor .jmk-overlay [hidden] { display: none !important; }
.jmc-editor :is(.jmk-widget, .jmk-overlay, .jmk-library) *, .jmc-editor :is(.jmk-widget, .jmk-overlay, .jmk-library) *::before, .jmc-editor :is(.jmk-widget, .jmk-overlay, .jmk-library) *::after { box-sizing: border-box; }
.jmc-editor .jmk-widget-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-height: 0; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: #c9c9cf; font: inherit; }
.jmc-editor .jmk-widget-tool svg { width: 18px; height: 18px; }
.jmc-editor .jmk-widget-tool:hover { background: #ffffff0d; color: #fff; }
.jmc-editor .jmk-widget-hide { display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 7px; margin-left: auto; border: 0; border-radius: 7px; background: transparent; color: #888891; }
.jmc-editor .jmk-widget-hide svg { width: 16px; height: 16px; }
.jmc-editor .jmk-library { position: fixed; z-index: 350; display: flex; flex-direction: column; gap: 3px; width: 196px; max-width: calc(100vw - 16px); padding: 8px; border: 1px solid #ffffff0d; border-radius: 12px; background: #202022; box-shadow: 0 12px 35px #0006; color: #d0d0d5; font: 13px/20px "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; }
.jmc-editor .jmk-library h2 { padding: 4px 10px 8px; margin: 0; color: #82828c; font-size: 12px; line-height: 20px; font-weight: 400; }
.jmc-editor .jmk-library-option { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; text-align: left; }
.jmc-editor .jmk-library-option svg { width: 18px; height: 18px; }
.jmc-editor .jmk-library-option:hover { background: #ffffff0d; }
.jmc-editor .jmk-overlay { position: fixed; z-index: 400; inset: 0; display: flex; justify-content: center; align-items: center; padding: 24px; background: #0009; color: #d2d2d7; font: 13px/20px "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; }
.jmc-editor .jmk-camera-dialog { position: relative; display: flex; box-sizing: border-box; flex-direction: column; width: 800px; height: 596px; max-width: 100%; max-height: calc(100dvh - 48px); padding: 24px; overflow-y: auto; border-radius: 20px; background: #1a1a1a; outline: none; }
.jmc-editor .jmk-dialog-header { display: flex; flex: 0 0 36px; justify-content: space-between; align-items: flex-start; gap: 16px; height: 36px; }
.jmc-editor .jmk-dialog-header h2 { margin: 0; color: #ededf0; font-size: 16px; line-height: 24px; font-weight: 500; }
.jmc-editor .jmk-dialog-close { display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: #b5b5bc; }
.jmc-editor .jmk-dialog-close:hover { background: #ffffff08; color: #ededf1; }
.jmc-editor .jmk-dialog-close svg { width: 20px; height: 20px; }
.jmc-editor .jmk-camera-preview { position: relative; display: grid; flex: 0 0 180px; place-items: center; width: 320px; height: 180px; max-width: 100%; margin: 24px auto 32px; overflow: hidden; border-radius: 8px; background: #ffffff0a; }
.jmc-editor .jmk-camera-preview > .jmk-camera-example { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: inherit; }
.jmc-editor .jmk-camera-preview-empty { color: #66666e; font-size: 12px; line-height: 20px; text-align: center; }
.jmc-editor .jmk-camera-groups { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; min-height: 198px; }
.jmc-editor .jmk-camera-group { min-width: 0; }
.jmc-editor .jmk-camera-group h3 { margin: 0 0 16px; color: #8d8d94; font-size: 12px; line-height: 20px; font-weight: 400; text-align: center; }
.jmc-editor .jmk-camera-carousel { position: relative; min-width: 0; height: 162px; }
.jmc-editor .jmk-camera-options { position: relative; height: 162px; overflow: hidden; mask-image: linear-gradient(transparent 0%, #000 18%, #000 82%, transparent 100%); -webkit-mask-image: linear-gradient(transparent 0%, #000 18%, #000 82%, transparent 100%); }
.jmc-editor .jmk-camera-option { position: absolute; top: 36px; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; width: 100%; height: 90px; min-height: 0; padding: 6px 8px; transform: translateY(calc(var(--jmk-position) * 96px)); border: 1px solid #ffffff02; border-radius: 16px; background: radial-gradient(ellipse at 50% 40%, #ffffff0b, #101010 80%); color: #90909a; font: inherit; opacity: .6; transition: transform .18s ease, opacity .18s ease; }
.jmc-editor .jmk-camera-option.is-selected { border-color: #ffffff06; color: #e1e1e6; background: radial-gradient(ellipse at 50% 40%, #ffffff12, #101010 80%); opacity: 1; }
.jmc-editor .jmk-camera-thumbnail, .jmc-editor .jmk-camera-numeric { display: grid; flex: 0 0 56px; place-items: center; width: 56px; height: 56px; object-fit: contain; }
.jmc-editor .jmk-camera-numeric { color: #e7e7eb; font-size: 18px; line-height: 24px; font-weight: 600; }
.jmc-editor .jmk-camera-option-title { max-width: 100%; overflow: hidden; font-size: 12px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.jmc-editor .jmk-carousel-previous, .jmc-editor .jmk-carousel-next { position: absolute; z-index: 2; left: calc(50% - 12px); display: grid; place-items: center; width: 24px; height: 24px; min-height: 0; padding: 5px; border: 0; border-radius: 6px; background: #252525ee; color: #c2c2ca; opacity: 0; transition: opacity .15s ease; }
.jmc-editor .jmk-carousel-previous { top: 0; }
.jmc-editor .jmk-carousel-next { bottom: 0; }
.jmc-editor :is(.jmk-carousel-previous, .jmk-carousel-next) svg { width: 14px; height: 14px; transform: rotate(90deg); }
.jmc-editor .jmk-camera-carousel:hover :is(.jmk-carousel-previous, .jmk-carousel-next), .jmc-editor .jmk-camera-carousel:focus-within :is(.jmk-carousel-previous, .jmk-carousel-next) { opacity: 1; }
.jmc-editor .jmk-dialog-footer { display: flex; flex: 0 0 36px; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 24px; }
.jmc-editor .jmk-dialog-confirm { display: grid; place-items: center; width: 80px; height: 36px; min-height: 0; padding: 8px 14px; border: 0; border-radius: 8px; background: #e9e9ee; color: #18181b; font: inherit; font-weight: 500; }
.jmc-editor .jmk-style-dialog { --jmk-style-width: 568px; --jmk-style-height: 320px; --jmk-style-side-width: 240px; position: relative; box-sizing: border-box; width: 800px; height: 604px; max-width: 100%; max-height: calc(100dvh - 48px); padding: 24px; overflow: auto; border-radius: 20px; background: #1a1a1a; outline: none; }
.jmc-editor .jmk-style-stage { position: absolute; top: 112px; right: 24px; left: 24px; height: var(--jmk-style-height); overflow: hidden; perspective: 1200px; }
.jmc-editor .jmk-style-card { position: absolute; top: 0; left: calc(50% - var(--jmk-style-side-width) / 2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: var(--jmk-style-side-width); height: var(--jmk-style-height); min-height: 0; padding: 18px; overflow: hidden; border: 1px solid #ffffff05; border-radius: 8px; background: linear-gradient(135deg, #303033, #222225); color: #9a9aa3; font: inherit; transition: left .2s ease, width .2s ease, opacity .2s ease, transform .2s ease; }
.jmc-editor .jmk-style-card[data-position="-2"] { z-index: 0; left: calc(50% - var(--jmk-style-width) / 2 - 92px); transform: rotateY(18deg); transform-origin: right center; opacity: .24; }
.jmc-editor .jmk-style-card[data-position="-1"] { z-index: 1; left: calc(50% - var(--jmk-style-width) / 2 - 46px); transform: rotateY(18deg); transform-origin: right center; opacity: .48; }
.jmc-editor .jmk-style-card[data-position="1"] { z-index: 1; left: calc(50% + var(--jmk-style-width) / 2 - var(--jmk-style-side-width) + 46px); transform: rotateY(-18deg); transform-origin: left center; opacity: .48; }
.jmc-editor .jmk-style-card[data-position="2"] { z-index: 0; left: calc(50% + var(--jmk-style-width) / 2 - var(--jmk-style-side-width) + 92px); transform: rotateY(-18deg); transform-origin: left center; opacity: .24; }
.jmc-editor .jmk-style-card.is-selected { z-index: 2; left: calc(50% - var(--jmk-style-width) / 2); width: var(--jmk-style-width); transform: none; background: #252527; color: #a8a8b0; opacity: 1; }
.jmc-editor .jmk-style-card > .jmk-style-example { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; }
.jmc-editor .jmk-style-example-status { padding: 18px; color: #898993; font-size: 12px; line-height: 20px; }
.jmc-editor .jmk-style-placeholder-title { font-size: 16px; line-height: 24px; font-weight: 500; }
.jmc-editor .jmk-style-placeholder-note { color: #73737c; font-size: 12px; line-height: 20px; font-weight: 400; }
.jmc-editor .jmk-style-name { position: absolute; top: 440px; left: 50%; width: var(--jmk-style-width); height: 20px; padding: 0; margin: 0; transform: translateX(-50%); color: #d5d5db; font-size: 13px; line-height: 20px; font-weight: 500; text-align: center; }
.jmc-editor .jmk-style-controls { position: absolute; top: 500px; left: 50%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 28px; transform: translateX(-50%); }
.jmc-editor .jmk-style-previous, .jmc-editor .jmk-style-next { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 7px; border: 0; border-radius: 7px; background: #ffffff06; color: #93939e; }
.jmc-editor :is(.jmk-style-previous, .jmk-style-next):hover { background: #ffffff12; color: #ededf3; }
.jmc-editor :is(.jmk-style-previous, .jmk-style-next) svg { width: 14px; height: 14px; }
.jmc-editor .jmk-style-dots { display: flex; align-items: center; justify-content: center; height: 20px; }
.jmc-editor .jmk-style-dot { display: grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; min-height: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; }
.jmc-editor .jmk-style-dot::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #67676f; }
.jmc-editor .jmk-style-dot.is-selected::after { width: 20px; border-radius: 3px; background: #e3e3e8; }
.jmc-editor .jmk-style-dialog > .jmk-dialog-footer { position: absolute; top: 544px; right: 24px; bottom: auto; left: auto; height: 36px; padding: 0; margin: 0; }
.jmc-editor .jmk-motion-dialog { display: flex; box-sizing: border-box; flex-direction: column; width: 800px; height: 628px; max-width: 100%; max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; border-radius: 20px; background: #1a1a1a; outline: none; }
.jmc-editor .jmk-motion-dialog > .jmk-dialog-header { flex: 0 0 84px; height: 84px; padding: 24px; }
.jmc-editor .jmk-motion-header-actions { display: flex; align-items: center; gap: 12px; }
.jmc-editor .jmk-motion-clear { height: 36px; min-height: 0; padding: 8px 0; border: 0; background: transparent; color: #b0b0b9; font: inherit; }
.jmc-editor .jmk-motion-clear:disabled { color: #54545d; cursor: not-allowed; }
.jmc-editor .jmk-motion-body { flex: 1 1 468px; min-height: 0; height: 468px; padding: 0 24px; overflow: auto; scrollbar-width: none; mask-image: linear-gradient(#000 0%, #000 calc(100% - 20px), transparent 100%); -webkit-mask-image: linear-gradient(#000 0%, #000 calc(100% - 20px), transparent 100%); }
.jmc-editor .jmk-motion-body::-webkit-scrollbar { display: none; }
.jmc-editor .jmk-motion-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-bottom: 20px; }
.jmc-editor .jmk-motion-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #b6b6be; font: inherit; }
.jmc-editor .jmk-motion-placeholder { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #28282b; color: #73737c; }
.jmc-editor .jmk-motion-placeholder > :is(.jmk-motion-poster, .jmk-motion-video) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.jmc-editor .jmk-motion-video { z-index: 1; }
.jmc-editor .jmk-motion-placeholder > .jmk-motion-preview-status { position: absolute; z-index: 2; right: 4px; bottom: 4px; left: 4px; padding: 2px 4px; border-radius: 4px; background: #0009; color: #ddd; font-size: 10px; line-height: 16px; }
.jmc-editor .jmk-motion-placeholder > span { padding: 8px; color: inherit; font-size: 11px; line-height: 18px; text-align: center; }
.jmc-editor .jmk-motion-card.is-selected .jmk-motion-placeholder { border-color: #e9e9ef; }
.jmc-editor .jmk-motion-card:hover .jmk-motion-placeholder { background: #303034; }
.jmc-editor .jmk-motion-name { display: block; width: 100%; height: 20px; overflow: hidden; font-size: 12px; line-height: 20px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.jmc-editor .jmk-motion-dialog > .jmk-dialog-footer { display: flex; flex: 0 0 76px; align-items: flex-end; justify-content: flex-end; height: 76px; padding: 16px 24px 24px; margin: 0; }
.jmc-editor .jmk-motion-dialog .jmk-dialog-confirm:disabled { background: #434346; color: #65656c; cursor: not-allowed; }
.jmc-editor :is(.jmk-widget, .jmk-library, .jmk-overlay) button:focus-visible { outline: 2px solid #b8bfd3; outline-offset: 2px; }
@media (max-width: 650px) {
  .jmc-editor .jmk-overlay { padding: 12px; }
  .jmc-editor .jmk-camera-dialog { height: auto; max-height: calc(100dvh - 24px); padding: 20px; border-radius: 16px; }
  .jmc-editor .jmk-camera-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .jmc-editor .jmk-camera-preview { margin-top: 16px; margin-bottom: 24px; }
  .jmc-editor .jmk-dialog-footer { position: sticky; bottom: -20px; z-index: 1; margin: 4px -4px -4px; padding: 12px 4px 4px; background: #1a1a1a; }
  .jmc-editor .jmk-style-dialog { --jmk-style-width: min(568px, calc(100vw - 88px)); --jmk-style-height: min(320px, calc((100vw - 88px) * .56338)); --jmk-style-side-width: min(240px, 34vw); height: min(604px, calc((100vw - 88px) * .56338 + 284px)); max-height: calc(100dvh - 24px); padding: 20px; border-radius: 16px; }
  .jmc-editor .jmk-style-stage { top: 92px; right: 20px; left: 20px; }
  .jmc-editor .jmk-style-name { top: calc(100px + var(--jmk-style-height)); }
  .jmc-editor .jmk-style-controls { top: calc(148px + var(--jmk-style-height)); gap: 4px; }
  .jmc-editor .jmk-style-dot { flex-basis: 17px; width: 17px; }
  .jmc-editor .jmk-style-dot.is-selected::after { width: 17px; }
  .jmc-editor .jmk-style-placeholder-title { font-size: 14px; }
  .jmc-editor .jmk-style-placeholder-note { max-width: 100%; font-size: 11px; }
  .jmc-editor .jmk-style-dialog > .jmk-dialog-footer { top: calc(var(--jmk-style-height) + 228px); right: 20px; bottom: auto; }
  .jmc-editor .jmk-motion-dialog { max-height: calc(100dvh - 24px); border-radius: 16px; }
  .jmc-editor .jmk-motion-dialog > .jmk-dialog-header { flex-basis: 76px; height: 76px; padding: 20px; }
  .jmc-editor .jmk-motion-body { padding: 0 20px; }
  .jmc-editor .jmk-motion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jmc-editor .jmk-motion-dialog > .jmk-dialog-footer { position: static; flex-basis: 72px; height: 72px; padding: 16px 20px 20px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .jmc-editor :is(.jmk-widget, .jmk-overlay, .jmk-library), .jmc-editor :is(.jmk-widget, .jmk-overlay, .jmk-library) * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.jmc-editor .jmk-widget { gap: 8px; height: 60px; padding: 8px 10px 8px 8px; border-radius: 20px 20px 0 0; background: #1a1a1acc; }
.jmc-editor .jmk-widget-tool { flex: 1 1 0; justify-content: flex-start; min-width: 0; height: 44px; gap: 8px; padding: 8px; border-radius: 12px; background: #ffffff05; font-size: 12px; line-height: 20px; }
.jmc-editor .jmk-widget-tool > img { flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; }
.jmc-editor .jmk-widget-hide { flex: 0 0 24px; width: 24px; height: 44px; padding: 4px; margin-left: 9px; background: #ffffff05; border-radius: 12px; }
.jmc-editor .jmk-widget-restore { display: none; align-items: center; justify-content: center; flex: 0 0 40px; gap: 0; width: 40px; height: 24px; min-height: 0; padding: 3px 4px; border: 0; border-radius: 16.5px; background: transparent; color: #c9c9cf; cursor: pointer; }
.jmc-editor .jmk-widget-restore > img { display: block; flex: 0 0 16px; width: 16px; height: 16px; object-fit: contain; pointer-events: none; }
.jmc-editor .jmk-widget.is-collapsed { justify-content: flex-start; gap: 0; width: 40px; min-height: 24px; height: 24px; padding: 0; border-radius: 16.5px; background: transparent; }
.jmc-editor .jmk-widget.is-collapsed > :is(.jmk-widget-tool, .jmk-widget-hide) { display: none; }
.jmc-editor .jmk-widget.is-collapsed > .jmk-widget-restore { display: inline-flex; }
.jmc-editor .jmk-widget-restore:hover { background: #ffffff0a; }