.jia-editor { position: absolute; z-index: 40; inset: 0; pointer-events: none; color: #fff; font: 400 13px/20px 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif; }
.jia-editor *, .jia-editor *::before, .jia-editor *::after { box-sizing: border-box; }
.jia-editor [hidden] { display: none !important; }
.jia-stage { position: absolute; pointer-events: auto; touch-action: none; cursor: crosshair; outline: 1px solid #ffffff1f; }
.jia-canvas { display: block; width: 100%; height: 100%; }
.jia-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: #15151566; color: #c3c3c8; }
.jia-toolbar { position: absolute; display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; width: max-content; max-width: calc(100% - 16px); height: 40px; padding: 4px; border: 0; border-radius: 12px; background: #222222b8; backdrop-filter: blur(12px); box-shadow: 0 6px 24px #0003; overflow-x: auto; overflow-y: hidden; pointer-events: auto; }
.jia-toolbar:empty { display: none; }
.jia-editor .jia-tool, .jia-editor .jia-label-tool, .jia-editor .jia-confirm { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 32px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font: inherit; }
.jia-editor .jia-tool { width: 32px; padding: 8px; }
.jia-editor .jia-label-tool { gap: 4px; width: 62px; padding: 4px 8px; font-weight: 500; }
.jia-editor .jia-confirm { width: 80px; padding: 4px 16px; background: #fff; color: #161616; font-weight: 500; }
.jia-editor .jia-tool:hover, .jia-editor .jia-label-tool:hover, .jia-editor [aria-pressed="true"] { background: #ffffff14; }
.jia-editor .jia-tool:active, .jia-editor .jia-label-tool:active { background: #ffffff1f; }
.jia-editor .jia-tool:disabled, .jia-editor .jia-label-tool:disabled { background: transparent; color: #ffffff33; cursor: not-allowed; }
.jia-editor .jia-confirm:disabled { background: #ffffff29; color: #ffffff33; cursor: not-allowed; }
.jia-editor .jia-tool svg, .jia-editor .jia-label-tool svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.jia-divider { flex: 0 0 4px; width: 4px; height: 16px; background: #ffffff0a; }
.jia-selection { position: absolute; border: 1px solid #ffffffa6; pointer-events: none; }
.jia-editor .jia-handle { position: absolute; width: 8px; height: 8px; padding: 0; border: 1px solid #424242; border-radius: 50%; background: #fff; pointer-events: auto; }
.jia-handle-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.jia-handle-ne { top: -4px; right: -4px; cursor: nesw-resize; }
.jia-handle-se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.jia-handle-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.jia-editor .jia-delete-label { position: absolute; top: -18px; right: -18px; display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #121212; cursor: pointer; pointer-events: auto; }
.jia-editor .jia-delete-label svg { display: block; width: 12px; height: 12px; fill: none; }
.jia-editor .jia-text-input { position: absolute; z-index: 2; min-width: 32px; max-width: 100%; padding: 2px; resize: both; border: 1px dashed #ffffffa6; outline: none; background: #16161626; font-family: Arial,'Microsoft YaHei',sans-serif; line-height: 1.25; pointer-events: auto; }
.jia-editor .jia-cancel { display: none; }
.jia-properties { position: absolute; display: flex; align-items: center; gap: 2px; width: 272px; height: 38px; padding: 2px; border-radius: 8px; background: #222222b8; backdrop-filter: blur(12px); box-shadow: 0 6px 24px #0003; pointer-events: auto; }
.jia-editor .jia-property-button { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 0 0 80px; width: 80px; height: 34px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: 500 13px/20px 'PingFang SC','Microsoft YaHei',Arial,sans-serif; cursor: pointer; }
.jia-editor .jia-property-button.is-style { flex-basis: 104px; width: 104px; }
.jia-editor .jia-property-button:hover, .jia-editor .jia-property-button[aria-expanded="true"] { background: #ffffff14; }
.jia-editor .jia-property-button:disabled { opacity: .3; cursor: not-allowed; }
.jia-property-button svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.jia-property-swatch { position: relative; display: block; flex: 0 0 10px; width: 10px; height: 10px; border: 1px solid #ffffff33; border-radius: 2px; }
.jia-property-swatch.is-none::after, .jia-color-preview.is-none::after { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #ff3355; transform: rotate(-45deg); content: ''; }
.jia-property-popup { position: absolute; z-index: 2; display: flex; gap: 2px; width: 224px; height: 44px; padding: 8px; border-radius: 8px; background: #222222eb; backdrop-filter: blur(12px); box-shadow: 0 6px 24px #0004; pointer-events: auto; }
.jia-editor .jia-color-choice, .jia-editor .jia-style-choice { position: relative; display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.jia-editor .jia-color-choice:hover, .jia-editor .jia-style-choice:hover, .jia-editor .jia-color-choice[aria-pressed="true"], .jia-editor .jia-style-choice[aria-pressed="true"] { background: #ffffff14; }
.jia-color-preview { position: relative; display: block; width: 18px; height: 18px; border: 1px solid #ffffff26; border-radius: 50%; }
.jia-property-popup.is-style { width: 200px; gap: 0; }
.jia-style-gap { flex: 0 0 12px; width: 12px; }
.jia-style-choice[data-dash="dashed"], .jia-style-choice[data-dash="dotted"] { margin-left: 2px; }
.jia-width-preview { width: 18px; border-radius: 2px; background: #fff; }
.jia-dash-preview { width: 18px; height: 0; border-top: 2px solid #fff; }
.jia-tool-popup { position: absolute; z-index: 3; display: flex; align-items: center; gap: 2px; width: 182px; max-width: calc(100% - 16px); height: 32px; padding: 2px; border: 0; border-radius: 8px; background: #222222b8; backdrop-filter: blur(12px); overflow-x: auto; overflow-y: hidden; pointer-events: auto; }
.jia-tool-popup.has-stroke { width: 378px; }
.jia-tool-popup.is-pen { width: 304px; height: 36px; }
.jia-tool-brush { display: flex; align-items: center; flex: 0 0 120px; gap: 8px; width: 120px; height: 32px; padding: 0 8px; }
.jia-editor .jia-tool-brush svg { display: block; flex: 0 0 16px; width: 16px; height: 16px; fill: none; }
.jia-editor .jia-brush-range { appearance: none; flex: 0 0 80px; width: 80px; height: 20px; margin: 0; padding: 0; border: 0; outline: none; background: transparent; cursor: pointer; touch-action: none; }
.jia-brush-range::-webkit-slider-runnable-track { height: 12px; border-radius: 4px; background: linear-gradient(to right,#ffffff33 0 var(--jia-brush-progress,13.0435%),#ffffff14 var(--jia-brush-progress,13.0435%) 100%); box-shadow: inset 0 0 1px #0004; }
.jia-brush-range::-webkit-slider-thumb { appearance: none; width: 4px; height: 16px; margin-top: -2px; border: 1px solid #ffffff26; border-radius: 11px; background: #fff; }
.jia-brush-range::-moz-range-track { height: 12px; border-radius: 4px; background: linear-gradient(to right,#ffffff33 0 var(--jia-brush-progress,13.0435%),#ffffff14 var(--jia-brush-progress,13.0435%) 100%); }
.jia-brush-range::-moz-range-thumb { width: 4px; height: 16px; border: 1px solid #ffffff26; border-radius: 11px; background: #fff; }
.jia-tool-popup fieldset { display: flex; align-items: center; flex: 0 0 auto; height: 28px; min-width: 0; margin: 0; padding: 0; border: 0; }
.jia-tool-widths { width: 84px; gap: 0; }
.jia-tool-lines { width: 88px; gap: 2px; }
.jia-tool-colors { width: 178px; gap: 2px; }
.jia-options-divider { flex: 0 0 8px; width: 8px; height: 16px; }
.jia-editor .jia-option-choice, .jia-editor .jia-option-color { position: relative; display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; margin: 0; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.jia-editor .jia-option-color { padding: 0; }
.jia-editor .jia-option-choice:hover, .jia-editor .jia-option-choice[aria-pressed="true"] { background: #ffffff14; }
.jia-option-color:hover .jia-option-color-ring { border-color: #ffffff33; }
.jia-option-dot { display: block; border-radius: 50%; background: #ffffff33; }
.jia-option-choice[aria-pressed="true"] .jia-option-dot { background: #fff; }
.jia-editor .jia-option-choice svg { display: block; width: 16px; height: 16px; fill: none; }
.jia-option-color-ring, .jia-option-color-dot { position: absolute; left: 50%; top: 50%; display: block; border: 1px solid transparent; border-radius: 50%; transform: translate(-50%,-50%); }
.jia-option-color-ring { width: 21px; height: 21px; }
.jia-option-color[aria-pressed="true"] .jia-option-color-ring { border-color: #fff; }
.jia-option-color-dot { width: 16px; height: 16px; border-color: #ffffff26; }
.jia-editor :is(button,textarea):focus-visible { outline: 1px solid #66d9fa; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .jia-editor * { transition: none !important; } }