.script-ui-surface { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; font: 12px/1.45 system-ui, sans-serif; color: #e6edf5; }
.script-ui-stack { position: absolute; display: flex; flex-direction: column; gap: 8px; width: min(248px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; pointer-events: none; }
.script-ui-stack.top-left { top: 12px; left: 12px; }
.script-ui-stack.top-right { top: 12px; right: 12px; }
.script-ui-stack.bottom-left { bottom: 12px; left: 12px; }
.script-ui-stack.bottom-right { bottom: 12px; right: 12px; }
.script-ui-panel { box-sizing: border-box; flex: 0 0 auto; padding: 12px; border: 1px solid #a9bfd54d; border-radius: 12px; background: #131c2af2; box-shadow: 0 4px 20px #0005; pointer-events: auto; overflow-wrap: anywhere; }
.script-ui-panel h3 { margin: 0 0 10px; font: 600 13px/1.4 system-ui, sans-serif; }
.script-ui-panel .script-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.script-ui-panel .script-field label, .script-ui-panel .script-field > span { flex: 1; }
.script-ui-panel .script-field input[type="range"] { flex: 1 1 100%; width: 100%; accent-color: #79d1bd; touch-action: pan-y; }
.script-ui-panel button, .script-ui-panel select, .script-ui-panel input[type="text"] { box-sizing: border-box; max-width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid #ffffff35; border-radius: 6px; background: #26354a; color: inherit; font: inherit; }
.script-ui-panel button { margin: 3px 6px 3px 0; cursor: pointer; touch-action: manipulation; }
.script-ui-panel button:hover { background: #344b64; }
.script-ui-panel button:disabled { opacity: .5; cursor: default; }
.script-ui-panel button[aria-busy="true"] { cursor: progress; }
.script-ui-panel [data-navigation-status] { margin: 8px 0 0; color: #bccbdc; font-size: 11px; }
.script-ui-panel :focus-visible { outline: 2px solid #96f2d8; outline-offset: 3px; }
.script-ui-panel input[type="checkbox"] { width: 20px; height: 20px; accent-color: #79d1bd; }
.script-ui-panel .script-control input[type="text"], .script-ui-panel .script-control select { width: 55%; min-width: 0; }
.script-ui-panel .script-control input[type="color"] { width: 48px; }
.script-ui-panel output { margin-left: auto; overflow-wrap: anywhere; }
/* Let native panels scroll on touch while the actual scene retains drag input. */
#canvasContainer:has(.script-ui-panel) { touch-action: auto; }
#canvasContainer:has(.script-ui-panel) > canvas { touch-action: none; }
.script-ui-panel { touch-action: pan-y; }
.script-ui-stack:has(.script-ui-navigation) { width: min(340px, calc(100% - 24px)); }
.script-ui-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 18px; border-radius: 16px; background: #07100ddd; border-color: #d9e6de2e; backdrop-filter: blur(14px); }
.script-ui-navigation h3 { grid-column: 1 / -1; margin: 0 0 4px; font-size: 11px; letter-spacing: .09em; font-weight: 500; color: #bac8bf; }
.script-ui-navigation button { margin: 0; min-height: 38px; border-radius: 8px; background: transparent; border-color: #d9e6de26; color: #eef3ed; }
.script-ui-navigation button:nth-of-type(-n+2) { grid-column: span 2; background: #edf2e8; border-color: #edf2e8; color: #142019; font-weight: 600; }
.script-ui-navigation button:hover { background: #d9e6de26; }
.script-ui-navigation button:nth-of-type(-n+2):hover { background: #fff; }
.script-ui-navigation .script-field, .script-ui-navigation [data-navigation-status] { grid-column: 1 / -1; }
.script-keyboard { grid-column: 1 / -1; }
.script-keyboard p { margin: 8px 0; color: #c3d1db; font-size: 11px; }
.script-keyboard [data-keyboard-control] { width: 100%; margin: 6px 0; }
.script-keyboard [aria-pressed="true"] { border-color: #96f2d8; background: #26463f; }
.script-keyboard-pad { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.script-keyboard-pad button { margin: 0; padding: 6px 3px; font-size: 11px; white-space: nowrap; touch-action: none; user-select: none; min-height: 40px; }