.jis-editor { position: absolute; inset: 0; z-index: 40; pointer-events: none; color: #fff; font: 400 13px/20px 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif; }
.jis-editor *, .jis-editor *::before, .jis-editor *::after { box-sizing: border-box; }
.jis-editor [hidden] { display: none !important; }
.jis-stage { position: absolute; pointer-events: auto; touch-action: none; cursor: crosshair; outline: 1px solid #ffffff50; }
.jis-source, .jis-canvas, .jis-pins { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; pointer-events: none; user-select: none; }
.jis-pins { overflow: visible; }
.jis-pin { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; transform: translate(-50%,-50%); border: 1px solid #fff; border-radius: 50% 50% 50% 2px; box-shadow: 0 1px 5px #0008; color: #fff; font-size: 12px; font-weight: 600; }
.jis-pin.is-selected { outline: 2px solid #fff8; outline-offset: 2px; }
.jis-selection { position: absolute; pointer-events: none; border: 1px solid #fff9; }
.jis-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: #15151588; color: #ccc; }
.jis-toolbar { position: absolute; display: flex; align-items: center; gap: 12px; width: 301px; max-width: calc(100% - 16px); height: 40px; padding: 4px; border-radius: 12px; background: #222b; backdrop-filter: blur(8px); overflow-x: auto; overflow-y: hidden; pointer-events: auto; }
.jis-tools { display: flex; flex: 0 0 215px; align-items: center; gap: 2px; height: 32px; }
.jis-history { display: flex; flex: 0 0 66px; align-items: center; gap: 2px; height: 32px; }
.jis-editor .jis-tool, .jis-editor .jis-style { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.jis-editor .jis-tool.is-pin { flex-basis: 69px; width: 69px; padding: 4px 8px; }
.jis-editor .jis-tool svg, .jis-editor .jis-style svg { flex: 0 0 16px; width: 16px; height: 16px; }
.jis-editor .jis-tool:hover, .jis-editor .jis-tool[aria-pressed="true"], .jis-editor .jis-style[aria-pressed="true"] { background: #ffffff14; }
.jis-editor .jis-tool:disabled { opacity: .28; cursor: not-allowed; }
.jis-divider { flex: 0 0 8px; width: 8px; height: 16px; border-left: 1px solid #ffffff14; margin-left: 4px; margin-right: -4px; }
.jis-properties { position: absolute; display: flex; flex-direction: column; gap: 8px; width: max-content; padding: 8px; border-radius: 12px; background: #222b; backdrop-filter: blur(8px); pointer-events: auto; }
.jis-colors { display: flex; gap: 2px; }
.jis-editor .jis-color { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 3px solid #262626; border-radius: 50%; cursor: pointer; }
.jis-editor .jis-color[aria-pressed="true"] { outline: 1px solid #fff; outline-offset: -1px; }
.jis-arrow-styles { display: flex; gap: 4px; }
.jis-editor .jis-style { flex-basis: 32px; width: 32px; height: 28px; }
.jis-composer { position: absolute; display: flex; align-items: center; gap: 12px; width: 680px; max-width: calc(100% - 16px); min-height: 56px; padding: 12px 16px; border-radius: 16px; background: #222b; backdrop-filter: blur(8px); pointer-events: auto; }
.jis-prompt { flex: 1; min-width: 0; min-height: 24px; max-height: 120px; overflow-y: auto; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; line-height: 24px; }
.jis-prompt[data-empty="true"]::before { content: attr(data-placeholder); color: #ffffff59; pointer-events: none; }
.jis-token { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; margin: 0 3px; padding-right: 6px; border-radius: 5px; background: #ffffff1a; color: #fff; user-select: all; vertical-align: middle; }
.jis-token-thumbnail { display: inline-block; width: 24px; height: 24px; border-radius: 4px; background-repeat: no-repeat; background-color: #313131; }
.jis-model { flex: 0 0 auto; color: #ffffff70; font-size: 12px; white-space: nowrap; }
.jis-editor .jis-save { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #161616; font-size: 22px; cursor: pointer; }
.jis-editor .jis-save:disabled { background: #ffffff29; color: #ffffff33; cursor: not-allowed; }
.jis-editor .jis-text-input { position: absolute; z-index: 1; width: min(260px,70%); min-height: 52px; max-height: 150px; padding: 0; resize: both; border: 1px solid #fff7; border-radius: 2px; outline: 0; background: #15151566; color: #e51739; font: 20px/1.25 Arial,'Microsoft YaHei',sans-serif; user-select: text; }
.jis-editor :is(button,[contenteditable],textarea):focus-visible, .jis-stage:focus-visible { outline: 1px solid #66d9fa; outline-offset: 2px; }
@media (max-width: 640px) { .jis-model { display: none; } }
.jis-editor[data-compact="true"] .jis-model { display: none; }
.jis-editor[data-compact="true"] .jis-toolbar { gap: 4px; scrollbar-width: none; }
.jis-editor[data-compact="true"] .jis-toolbar::-webkit-scrollbar { display: none; }
.jis-controls-viewport { display: contents; }
.jis-editor[data-mobile="true"] .jis-controls-viewport { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; }
.jis-editor[data-mobile="true"] .jis-controls-viewport > :is(.jis-toolbar,.jis-composer,.jis-properties) { position: relative; flex: 0 0 auto; left: auto !important; top: auto !important; max-width: 100%; }
.jis-editor[data-mobile="true"] .jis-toolbar { flex-wrap: wrap; height: auto; min-height: 40px; overflow: visible; }
.jis-editor[data-mobile="true"] .jis-tools { flex: 1 1 215px; min-width: 0; height: auto; flex-wrap: wrap; }
.jis-editor[data-mobile="true"] .jis-properties { order: -1; }
@media (prefers-reduced-motion: reduce) { .jis-editor * { transition: none !important; } }