/* Overlay Studio: independent workspace, viewport-sized canvas and persistent inspectors. */
.overlay-library-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:30px 0 18px}.overlay-library-heading h2{font-size:22px;letter-spacing:-.6px}.overlay-library-heading .eyebrow{margin-bottom:8px}.overlay-library-heading>.muted{font-size:12px}.template-description{color:var(--muted);font-size:13px;margin:-5px 0 22px}.saved-scenes,.scene-templates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.saved-scenes{margin-bottom:55px}.saved-scene-card,.scene-template-card{display:block;text-align:left;padding:0;border:1px solid var(--line);background:var(--panel);border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s}.saved-scene-card:hover,.scene-template-card:hover{border-color:var(--accent);transform:translateY(-3px);filter:none}.scene-thumbnail{display:block;position:relative;width:100%;aspect-ratio:16/9;background-color:var(--panel);background-image:linear-gradient(45deg,var(--surface) 25%,transparent 25%),linear-gradient(-45deg,var(--surface) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--surface) 75%),linear-gradient(-45deg,transparent 75%,var(--surface) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;overflow:hidden;pointer-events:none}.scene-card-copy{display:flex;padding:17px 20px 4px;justify-content:space-between;align-items:center;gap:8px}.scene-card-copy strong{font-size:14px}.scene-card-copy small{font-size:10px;color:var(--muted)}.scene-card-action{display:block;font-size:11px;color:var(--accent);padding:0 20px 18px}.template-copy{display:block;padding:22px}.template-copy-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.template-copy-title strong{font-size:20px;letter-spacing:-.5px}.template-copy-title small{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.template-copy>span:nth-child(2){font-size:12px;color:var(--muted);display:block;min-height:40px}.template-use{font-size:11px;color:var(--accent);display:block;margin-top:18px}.scenes-empty{grid-column:1/-1;text-align:center;padding:35px;border:1px dashed var(--line);border-radius:12px;color:var(--text-soft);background:linear-gradient(125deg,color-mix(in srgb, var(--panel) 33.33%, transparent),transparent)}.scenes-empty>span{display:block;color:var(--accent);font-size:35px;margin-bottom:8px}.scenes-empty small{color:var(--muted);display:block;margin-top:7px}
.studio-segment{display:inline-flex;border:1px solid var(--line);border-radius:7px;padding:3px;background:var(--surface-sunken);gap:3px}.studio-segment button{border:0;background:transparent;border-radius:4px;padding:6px 12px;font-size:11px;color:var(--muted)}.studio-segment button.active{background:var(--surface-raised);color:var(--accent-strong)}
.overlay-studio{position:fixed;inset:0;z-index:50;background:var(--surface-sunken);display:grid;grid-template-rows:62px minmax(0,1fr) 32px;font-size:12px;line-height:1.45}.overlay-studio button{font-size:11px;line-height:1.3;padding:8px 11px;border-radius:6px}.overlay-studio input,.overlay-studio textarea,.overlay-studio select{font-size:11px;line-height:1.4;min-width:0}.studio-header{display:flex;gap:13px;align-items:center;padding:0 20px;background:var(--workspace-panel,var(--panel));border-bottom:1px solid var(--line)}.studio-back{background:none;border:0!important;color:var(--text-soft);font-size:17px!important;display:flex;align-items:center;gap:12px}.studio-back span{font-size:11px}.studio-divider{height:22px;width:1px;background:var(--surface-raised)}.studio-header #ov-name{background:none;border-color:transparent;font-size:14px;font-weight:600;padding:8px;width:clamp(150px,20vw,300px)}.studio-header #ov-name:focus{background:var(--surface-sunken);border-color:var(--accent)}.studio-save-state{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}.studio-save-state:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--success)}.studio-save-state.unsaved:before{background:var(--warning)}.studio-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.studio-header-actions>[data-tool]{font-size:23px;background:none;border-color:transparent;padding:3px 10px}.studio-header #studio-save{padding:10px 18px;border-radius:8px}.studio-body{display:grid;grid-template-columns:224px minmax(0,1fr) 280px;min-height:0;overflow:hidden}.studio-left{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.studio-left-tabs{display:flex;justify-content:space-around;min-height:48px;border-bottom:1px solid var(--line);flex:none}.studio-left-tabs button{border:0;background:none;border-radius:0;color:var(--muted);padding:15px 6px 12px;font-size:10px;border-bottom:2px solid transparent}.studio-left-tabs button[aria-selected=true]{color:var(--accent-strong);border-bottom-color:var(--accent)}.studio-left-content{overflow:auto;min-height:0;flex:1}.studio-section-heading{display:flex;align-items:center;justify-content:space-between;padding:15px 12px 10px;color:var(--subtle);font-size:8px;letter-spacing:1px}.studio-section-heading button{border:0;background:none;color:var(--muted);font-size:19px;padding:0 4px}.layer-row{display:flex;align-items:center;padding:4px 8px;border-left:2px solid transparent;gap:2px;min-height:44px}.layer-row.active{background:var(--accent-soft);border-left-color:var(--accent)}.layer-row.dimmed .layer-identity{opacity:.42}.layer-row:hover{background-color:var(--surface)}.layer-row.drop-target{border-top:2px solid var(--accent)}.layer-row button{border:0;background:none;padding:4px;color:var(--muted);font-size:12px}.layer-row .layer-identity{display:flex;align-items:center;gap:9px;min-width:0;flex:1;text-align:left;color:var(--text-soft);min-height:32px}.layer-row.active .layer-identity{color:var(--accent-strong)}.layer-icon{width:18px;text-align:center;color:var(--muted);font-size:17px}.layer-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-indicator{margin-left:auto;color:var(--accent-strong);font-size:12px}.studio-layer-tools{border-top:1px solid var(--line);padding:15px 12px;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:20px}.studio-layer-tools button{padding:7px 4px!important;font-size:9px!important;background:var(--surface);border-color:var(--line)}.danger{color:var(--danger-text)!important}.studio-description{color:var(--muted);font-size:11px;margin:16px;line-height:1.7}.element-card{display:grid!important;grid-template-columns:32px 1fr;column-gap:10px;text-align:left;width:calc(100% - 24px);margin:7px 12px;background:var(--surface);border-color:var(--line);padding:12px!important}.element-card>span{grid-row:1/3;font-size:24px;color:var(--accent-strong);align-self:center;text-align:center}.element-card strong{font-size:11px;font-weight:600}.element-card small{font-size:9px;color:var(--muted);margin-top:3px}.studio-left #media-upload{width:calc(100% - 28px);margin:18px 14px 0}.media-card{width:calc(100% - 28px);margin:7px 14px;text-align:center;background:var(--surface);padding:8px!important}.media-card img{width:100%;height:100px;object-fit:contain}.media-card>span{display:block;font-size:36px;padding:20px;color:var(--accent-strong)}.media-card small{display:block;color:var(--muted);font-size:9px;margin:7px}
.studio-center{display:grid;grid-template-rows:49px minmax(0,1fr) 48px;min-width:0;min-height:0;overflow:hidden;background:var(--canvas)}.studio-canvas-toolbar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);min-width:0}.studio-canvas-toolbar .studio-segment button{font-size:18px;padding:2px 10px}.studio-snap{display:flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted);font-size:10px}.studio-snap input{accent-color:var(--accent)}.studio-canvas-toolbar>#studio-preview{margin-left:auto;background:none;border-color:var(--line);white-space:nowrap}.studio-zoom{display:flex;align-items:center}.studio-zoom button{padding:5px 7px;background:none;border-color:transparent;color:var(--muted);font-size:16px}.studio-zoom select{padding:5px 7px;border:0;background:var(--surface);max-width:94px;font-size:10px}.canvas-viewport{min-height:0;overflow:auto;position:relative;outline:none!important;touch-action:none;background-color:var(--surface-sunken);background-image:radial-gradient(var(--surface-raised) 1px,transparent 1px);background-size:18px 18px}.canvas-viewport.pan-tool{cursor:grab}.canvas-viewport.pan-tool:active{cursor:grabbing}#canvas-world{box-sizing:border-box;width:100%;height:100%;padding:50px;display:flex;align-items:center;justify-content:center}#canvas-holder{position:relative;flex:none;box-shadow:0 20px 80px #0009;outline:1px solid var(--line)}#overlay-canvas{position:relative;overflow:hidden;touch-action:none;background-color:var(--surface);background-image:linear-gradient(45deg,var(--surface-raised) 25%,transparent 25%),linear-gradient(-45deg,var(--surface-raised) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--surface-raised) 75%),linear-gradient(-45deg,transparent 75%,var(--surface-raised) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}#overlay-canvas .overlay-widget{cursor:move;user-select:none}#overlay-canvas .overlay-widget img{pointer-events:none}#overlay-canvas .studio-widget-selected{outline:2px solid color-mix(in srgb, var(--accent) 46.67%, transparent);outline-offset:-2px}.studio-ruler{position:absolute;color:var(--subtle);font:8px/1.2 ui-monospace,Consolas,monospace;pointer-events:none;overflow:visible}.studio-ruler.horizontal{height:22px;left:0;right:0;top:-24px;border-bottom:1px solid var(--line)}.studio-ruler.vertical{width:22px;left:-25px;top:0;bottom:0;border-right:1px solid var(--line)}.studio-ruler span{position:absolute}.studio-ruler.horizontal span{bottom:7px;border-left:1px solid var(--line-strong);padding-left:4px}.studio-ruler.vertical span{left:0;writing-mode:vertical-rl;border-top:1px solid var(--line-strong);padding-top:4px}#studio-selection,#studio-guides{position:absolute;inset:0;pointer-events:none;z-index:5}.transform-box{position:absolute;border:1px solid var(--accent-strong);pointer-events:none}.transform-box.locked{border-color:var(--secondary-line)}.transform-size{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);padding:4px 7px;border-radius:4px;background:var(--accent-strong);color:var(--accent-strong);font-size:9px;white-space:nowrap}.transform-box.locked .transform-size{background:var(--secondary-soft)}.resize-handle{position:absolute;width:8px;height:8px;background:var(--accent-strong)!important;border:1px solid var(--accent-border)!important;border-radius:1px!important;padding:0!important;pointer-events:auto;min-width:0;box-shadow:0 0 0 3px color-mix(in srgb, var(--line) 26.67%, transparent)}.handle-nw{left:-5px;top:-5px;cursor:nwse-resize}.handle-n{left:calc(50% - 4px);top:-5px;cursor:ns-resize}.handle-ne{right:-5px;top:-5px;cursor:nesw-resize}.handle-e{right:-5px;top:calc(50% - 4px);cursor:ew-resize}.handle-se{right:-5px;bottom:-5px;cursor:nwse-resize}.handle-s{bottom:-5px;left:calc(50% - 4px);cursor:ns-resize}.handle-sw{bottom:-5px;left:-5px;cursor:nesw-resize}.handle-w{left:-5px;top:calc(50% - 4px);cursor:ew-resize}.guide{position:absolute;background:var(--brand-secondary);box-shadow:0 0 5px color-mix(in srgb, var(--brand-secondary) 33.33%, transparent)}.guide.x{top:0;bottom:0;width:1px}.guide.y{left:0;right:0;height:1px}#studio-marquee{position:absolute;border:1px solid var(--accent);background:color-mix(in srgb, var(--accent) 12.94%, transparent);pointer-events:none;z-index:6}.studio-inline-text{position:absolute;z-index:7;background:color-mix(in srgb, var(--panel) 92.55%, transparent)!important;color:#fff;border:1px solid var(--accent)!important;resize:none;padding:0!important;line-height:1.35!important;box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 8.24%, transparent)}.studio-testbar{display:flex;align-items:center;gap:9px;padding:7px 15px;background:var(--panel);border-top:1px solid var(--line);font-size:10px}.studio-testbar strong{font-size:10px;color:var(--muted);font-weight:500}.studio-testbar select{font-size:10px;padding:5px 8px;border-color:var(--line)}.studio-testbar button{font-size:10px;padding:6px 10px}.studio-live-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.studio-local-note{margin-left:auto;font-size:9px;color:var(--subtle);white-space:nowrap}
.studio-inspector{background:var(--panel);border-left:1px solid var(--line);overflow:auto;min-height:0}.inspector-heading{display:flex;align-items:center;gap:12px;padding:20px 16px;border-bottom:1px solid var(--line);min-height:80px}.inspector-heading>span{font-size:24px;color:var(--accent-strong);width:24px;text-align:center}.inspector-heading h2{font-size:13px;font-weight:600}.inspector-heading p{font-size:9px;color:var(--muted);margin-top:3px}.inspector-heading button{margin-left:auto;background:none;border:0;color:var(--muted);font-size:16px}.inspector-section{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;padding:17px 16px 20px;border-bottom:1px solid var(--line)}.inspector-section h3{grid-column:1/-1;font-size:10px;font-weight:600;color:var(--text-soft);margin:0 0 3px}.inspector-field{position:relative;font-size:9px;color:var(--muted);display:block;min-width:0}.inspector-field input:not([type=checkbox]):not([type=color]),.inspector-field select,.inspector-field textarea{display:block;width:100%;margin-top:6px;padding:8px 9px;border-color:var(--line);background:var(--surface-sunken);color:var(--text-soft);border-radius:5px}.inspector-field textarea{min-height:85px;resize:vertical}.inspector-field input[type=number]{appearance:textfield}.full-field{grid-column:1/-1}.check-field{display:flex;align-items:center;gap:7px;flex-direction:row-reverse;justify-content:flex-end;font-size:10px;padding:4px 0}.check-field input{accent-color:var(--accent)}.color-field{grid-column:1/-1;padding-left:34px}.color-field input[type=color]{position:absolute;bottom:2px;left:0;width:26px;height:30px;padding:0;border:0;background:transparent;cursor:pointer}.inspector-align{display:flex;justify-content:space-between;margin-top:2px;border:1px solid var(--line);border-radius:5px;padding:2px}.inspector-align button{border:0;background:none;color:var(--muted);font-size:17px;padding:3px 8px}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1}.inspector-actions button{font-size:10px}.event-filters{display:flex;flex-wrap:wrap;gap:9px}.event-filters label{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--muted)}.event-filters input{accent-color:var(--accent-strong)}.studio-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;background:var(--panel);border-top:1px solid var(--line);color:var(--subtle);font-size:8px;white-space:nowrap}.studio-footer>span:first-child{color:var(--muted);overflow:hidden;text-overflow:ellipsis}.studio-footer>button{background:none;border:0;font-size:9px;color:var(--muted);padding:3px}.preview-mode .studio-left,.preview-mode .studio-inspector{opacity:.55;pointer-events:none}.preview-mode #overlay-canvas .overlay-widget{cursor:default}.studio-dialog{width:min(620px,95vw);padding:28px;background:var(--panel);color:var(--text);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 30px 100px #000a}.studio-dialog::backdrop{background:color-mix(in srgb, var(--canvas) 80%, transparent);backdrop-filter:blur(4px)}.studio-dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.studio-dialog-heading button{background:none;border:0}.studio-dialog>p{font-size:12px;line-height:1.8;color:var(--muted);margin:18px 0}.studio-dialog label{font-size:11px;color:var(--muted)}.studio-dialog label input{width:100%;display:block;margin:8px 0 16px}.studio-dialog button,.studio-dialog .button{font-size:11px}.studio-dialog hr{border:0;border-top:1px solid var(--line);margin:22px 0}.shortcut-list{display:grid;grid-template-columns:1fr 1.5fr;gap:15px;font-size:11px}.shortcut-list dt{color:var(--accent-strong)}.shortcut-list dd{margin:0;color:var(--muted)}#notice{z-index:100}.overlay-studio input:focus-visible,.overlay-studio textarea:focus-visible{outline-offset:0}.overlay-studio input[type=color]:focus-visible{outline-offset:2px}
@media(min-width:1700px){.studio-body{grid-template-columns:260px minmax(0,1fr) 310px}.scene-templates{grid-template-columns:repeat(4,minmax(0,1fr))}.saved-scenes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.studio-body{grid-template-columns:185px minmax(0,1fr) 250px}.studio-left-tabs button{font-size:9px}.studio-header{gap:7px;padding:0 10px}.studio-save-state{display:none}.studio-canvas-toolbar{gap:5px;padding:8px}.studio-snap{font-size:9px}.studio-testbar{gap:5px;padding:7px}.studio-local-note{display:none}.studio-footer>span:nth-child(2){display:none}.studio-header #ov-name{width:180px}.layer-row{padding:4px}.layer-name{font-size:9px}}
@media(max-width:800px){.scene-templates,.saved-scenes{grid-template-columns:1fr}.overlay-library-heading{align-items:flex-start;flex-direction:column}.studio-body{grid-template-columns:150px minmax(300px,1fr) 230px;overflow-x:auto}.studio-header #ov-name{width:130px}.studio-header #studio-source{display:none}.studio-header-actions{gap:3px}.studio-header-actions>[data-tool]{padding:3px 6px}.studio-left-tabs button{padding:15px 3px;font-size:8px}.layer-row>button:not(.layer-identity){padding:3px;font-size:10px}}

body:has(.overlay-studio:not([hidden])){overflow:hidden}

.preview-mode .studio-body{grid-template-columns:0 minmax(0,1fr) 0}.preview-mode .studio-left,.preview-mode .studio-inspector{visibility:hidden;overflow:hidden}.preview-mode .studio-ruler{visibility:hidden}

/* Media actions stay separate from inserting an asset. */
.media-card .media-use{display:block;width:100%;padding:0!important;background:transparent;border:0;overflow:hidden;text-align:center}
.media-card .media-use strong{display:block;font-size:10px;overflow-wrap:anywhere;color:var(--text);margin:7px 3px}
.media-card .media-icon{display:block;font-size:36px;padding:14px;color:var(--accent-strong)}
.media-card .media-use-label{display:block;font-size:9px;color:var(--accent-strong);margin:8px 0}
.media-actions{display:flex;justify-content:center;gap:8px;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.media-actions button{padding:5px 8px;font-size:9px}.media-more{display:block;margin:16px auto}
#media-delete-dialog p,#media-delete-dialog li{font-size:12px;color:var(--text-soft);overflow-wrap:anywhere}
#media-delete-dialog .row{margin-top:22px}#media-delete-name{font-weight:650;color:var(--text)!important}