.jag-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; }
.jag-editor *, .jag-editor *::before, .jag-editor *::after { box-sizing: border-box; }
.jag-editor [hidden] { display: none !important; }
.jag-panel { position: absolute; display: flex; flex-direction: column; gap: 12px; width: 800px; max-width: calc(100% - 16px); height: 512px; max-height: calc(100% - 16px); padding: 14px 16px 16px; overflow: auto; border-radius: 24px; background: #202022; pointer-events: auto; overscroll-behavior: contain; }
.jag-header { display: flex; flex: 0 0 22px; align-items: center; justify-content: space-between; height: 22px; }
.jag-header strong { font-size: 14px; line-height: 22px; font-weight: 500; }
.jag-editor .jag-reset { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #ffffff80; font: inherit; font-size: 12px; line-height: 20px; cursor: pointer; }
.jag-editor .jag-reset svg { flex: 0 0 12px; width: 12px; height: 12px; }
.jag-columns { display: grid; flex: 1; grid-template-columns: minmax(0,392px) minmax(0,352px); gap: 24px; min-height: 448px; }
.jag-preview { position: relative; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); place-items: center; min-width: 0; min-height: 448px; overflow: hidden; border-radius: 16px; background: #ffffff03; }
.jag-orbit { position: relative; width: 312px; height: 312px; min-width: 0; margin: 0; padding: 0; border: 0; transform-origin: center; touch-action: none; user-select: none; cursor: grab; }
.jag-orbit:active { cursor: grabbing; }
.jag-grid, .jag-axis-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jag-grid path { fill: none; stroke: #ffffff2b; stroke-width: .8px; vector-effect: non-scaling-stroke; }
.jag-grid-back { z-index: 1; opacity: .4; }
.jag-grid-front { z-index: 3; }
.jag-axis-layer { z-index: 2; }
.jag-cone { fill: #83d6ff19; stroke: none; }
.jag-axis { fill: none; stroke: #b6e7ff9c; stroke-width: 1.2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jag-card { position: absolute; z-index: 2; top: 50%; left: 50%; width: 89.5156px; max-width: calc(100% - 48px); height: 112.734px; transform: translate(-50%,-50%) scale(.9); overflow: hidden; border: 1px solid #fff2; border-radius: 3px; background: #161616; }
.jag-editor .jag-card > .jag-source { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; pointer-events: none; }
.jag-camera { position: absolute; z-index: 5; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; pointer-events: none; }
.jag-camera-body { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.jag-camera-face { position: absolute; top: -13px; left: -17px; width: 34px; height: 26px; border: .5px solid #c4cbd4; border-radius: 2px; background: #838e9d; backface-visibility: hidden; }
.jag-face-front { transform: translateZ(9.07px); display: grid; place-items: center; background: #4c5663; }
.jag-face-back { transform: rotateY(180deg) translateZ(9.07px); background: #a1acba; }
.jag-face-top, .jag-face-bottom { top: -9.07px; width: 34px; height: 18.14px; }
.jag-face-top { transform: rotateX(90deg) translateZ(13px); background: #b5bfcc; }
.jag-face-bottom { transform: rotateX(-90deg) translateZ(13px); background: #56616f; }
.jag-face-left, .jag-face-right { left: -9.07px; width: 18.14px; height: 26px; }
.jag-face-left { transform: rotateY(-90deg) translateZ(17px); }
.jag-face-right { transform: rotateY(90deg) translateZ(17px); background: #687583; }
.jag-monitor { display: block; width: 22px; height: 14px; border: 1px solid #161b22; border-radius: 1px; object-fit: cover; pointer-events: none; }
.jag-camera-lens { position: absolute; top: -7.75px; left: -7.75px; width: 15.5px; height: 15.5px; border: 2px solid #a8b5c4; border-radius: 50%; background: #273848; transform: rotateY(180deg) translateZ(20.07px); box-shadow: inset 0 0 0 2px #4e6e84; }
.jag-editor .jag-direction { position: absolute; z-index: 7; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: #ffffff0a; color: #ffffffb3; cursor: pointer; }
.jag-editor .jag-direction svg { width: 12px; height: 12px; }
.jag-direction-up { top: calc(50% - 160px); left: calc(50% - 16px); }
.jag-direction-down { top: calc(50% + 128px); left: calc(50% - 16px); }
.jag-direction-left { top: calc(50% - 16px); left: calc(50% - 160px); }
.jag-direction-right { top: calc(50% - 16px); left: calc(50% + 128px); }
.jag-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jag-section-title { color: #ffffffa6; font-size: 12px; line-height: 20px; }
.jag-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.jag-editor .jag-preset { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: #ffffff08; color: #ffffffa6; font: inherit; cursor: pointer; }
.jag-editor .jag-preset svg { flex: 0 0 16px; width: 16px; height: 16px; }
.jag-editor .jag-preset[aria-pressed="true"] { background: #ffffff14; color: #fff; }
.jag-parameter { display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.jag-parameter-heading { display: flex; align-items: center; justify-content: space-between; min-height: 20px; color: #ffffffa6; font-size: 12px; line-height: 20px; }
.jag-value { color: #ffffff66; font-variant-numeric: tabular-nums; }
.jag-editor .jag-range { display: block; width: 100%; height: 16px; margin: 0; padding: 0; border: 0; background: transparent; appearance: none; cursor: pointer; }
.jag-range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: #ffffff24; }
.jag-range::-webkit-slider-thumb { appearance: none; width: 4px; height: 16px; margin-top: -7px; border: 0; border-radius: 2px; background: #fff; }
.jag-range::-moz-range-track { height: 2px; border-radius: 2px; background: #ffffff24; }
.jag-range::-moz-range-thumb { width: 4px; height: 16px; border: 0; border-radius: 2px; background: #fff; }
.jag-ticks { display: flex; justify-content: space-between; margin-inline: -8px; }
.jag-editor .jag-tick { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 28px; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: #ffffff59; font-size: 10px; line-height: 16px; cursor: pointer; }
.jag-editor .jag-tick[aria-pressed="true"] { color: #fff; }
.jag-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; min-height: 32px; }
.jag-pending { margin-right: auto; color: #ffffff59; font-size: 11px; }
.jag-editor .jag-save { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: #fff; color: #161616; font: inherit; cursor: pointer; }
.jag-editor button:hover { filter: brightness(1.16); }
.jag-editor button:disabled, .jag-editor input:disabled { opacity: .3; cursor: not-allowed; }
.jag-loading { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; color: #ffffff80; background: #20202299; pointer-events: none; }
.jag-editor :is(button,input,[tabindex]):focus-visible { outline: 1px solid #66d9fa; outline-offset: 2px; }
.jag-editor[data-narrow="true"] .jag-panel { height: auto; }
.jag-editor[data-narrow="true"] .jag-columns { grid-template-columns: minmax(0,1fr); min-height: 0; }
.jag-editor[data-narrow="true"] .jag-preview { min-height: 352px; }
.jag-editor[data-narrow="true"] .jag-controls { padding-bottom: 4px; }
@media (max-width: 820px) { .jag-panel { height: auto; } .jag-columns { grid-template-columns: minmax(0,1fr); min-height: 0; } .jag-preview { min-height: 352px; } .jag-controls { padding-bottom: 4px; } }
@media (prefers-reduced-motion: reduce) { .jag-editor * { transition: none !important; } }