/* Consistent compact controls across Studio and Companion. */
body.studio-pro-workspace{font-family:Inter,'Segoe UI',sans-serif;font-size:13px}
.studio-pro-workspace button,.studio-pro-workspace select,.studio-pro-workspace input{font-family:inherit}
.studio-pro-workspace button .studio-icon,.studio-pro-workspace h4 .studio-icon{vertical-align:middle;margin-right:6px;flex:none}
.studio-pro-workspace h4{font-size:13px;line-height:1.5}
#corner-radius-panel:not(.studio-panel-max){width:320px!important;max-width:calc(100vw - 24px)!important;box-sizing:border-box;font-size:12px!important}
#corner-radius-panel .inspector-body{padding:8px!important;gap:6px}
#corner-radius-panel summary{font-size:12px!important;padding:12px!important}
#corner-radius-panel label{font-size:12px!important;line-height:1.5}
#corner-radius-panel button{min-height:30px;font-size:11px!important;padding:7px 10px!important;line-height:1.35}
#corner-radius-panel input[type=number]{font-size:12px!important;min-height:30px;box-sizing:border-box}
#corner-radius-panel .layer-geometry-fields{gap:12px!important}
.studio-pro-workspace .fm-toolbar{display:flex;gap:6px;align-items:center;margin:6px 0;flex-wrap:wrap}
.studio-pro-workspace .fm-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 9px;font-size:11px;line-height:1.3;min-height:32px;white-space:nowrap}
.studio-pro-workspace .fm-toolbar button .studio-icon{margin:0;width:15px;height:15px}
.studio-pro-workspace .fm-search{font-size:12px;padding:9px;min-height:34px;box-sizing:border-box;width:100%}
.studio-pro-workspace .fm-path{font-size:10px!important;line-height:1.5;color:var(--muted);margin:10px 0;overflow-wrap:anywhere}
.studio-pro-workspace .fm-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.studio-pro-workspace .fm-folder{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:40px;padding:10px!important;font-size:12px!important;line-height:1.3;white-space:normal;text-align:left}
.studio-pro-workspace .fm-folder .studio-icon{width:18px;height:18px;margin:0;flex:none}
.studio-pro-workspace input[type=range]{appearance:none;-webkit-appearance:none;box-sizing:border-box;height:26px!important;padding:0 0 12px!important;border:0!important;border-radius:0!important;cursor:pointer;accent-color:var(--accent);background:linear-gradient(to right,var(--accent,#70dfc9) var(--range-fill,50%),#405064 var(--range-fill,50%)) left 6px/100% 4px no-repeat,repeating-linear-gradient(to right,#63768b 0 1px,transparent 1px 10%) left bottom/100% 7px no-repeat!important}
.studio-pro-workspace input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent;border:0}
.studio-pro-workspace input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:16px;margin-top:-6px;border:1px solid #9df4df;border-radius:4px;background:var(--accent,#70dfc9);box-shadow:0 1px 3px #0008}
.studio-pro-workspace input[type=range]:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.studio-pro-workspace input[type=range]:disabled{opacity:.4}
.range-readout{font:11px/1.4 'Segoe UI',sans-serif;color:var(--accent,#70dfc9);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
.export-config .preview-pair figure{display:grid;grid-template-rows:68px minmax(0,1fr)}
.export-config .preview-pair figcaption{margin:0;line-height:1.5;font-size:10px}
.export-config .preview-pair figcaption small{font-size:11px;letter-spacing:0;font-weight:400;line-height:1.5;margin:4px 0 0}
.export-config .preview-image{height:220px}
.export-config .export-settings small{font-size:11px;line-height:1.55}
.export-config .export-settings label{align-items:center;gap:10px;margin-bottom:12px}
.export-config .export-settings select{font-size:12px;padding:8px;min-height:34px}
.export-config .preview-stats{gap:10px}
.export-config .preview-stats strong{font-size:19px;font-variant-numeric:tabular-nums}
@media(max-width:900px){#corner-radius-panel:not(.studio-panel-max){width:min(320px,90vw)!important}.export-config .preview-pair figure{grid-template-rows:80px minmax(0,1fr)}}
/* Shared inspector layout: labels, numeric fields, and toggles align consistently. */
#corner-radius-panel .inspector-body>label,#tab-video-fx label,#tab-sound label{gap:8px}
#corner-radius-panel label:has(>input[type=checkbox]),#tab-video-fx label:has(>input[type=checkbox]),#tab-sound label:has(>input[type=checkbox]){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;text-align:left!important;margin:8px 0!important;min-height:24px}
#corner-radius-panel input[type=checkbox],#tab-video-fx input[type=checkbox],#tab-sound input[type=checkbox]{appearance:auto;width:14px!important;height:14px!important;min-width:14px!important;margin:0!important;accent-color:var(--accent);flex:none}
#media-frame-controls{padding:0!important;margin:0!important;border:0!important;width:100%;box-sizing:border-box}
#media-frame-controls .media-zoom-row{display:grid!important;grid-template-columns:minmax(0,1fr) 56px 16px;align-items:center;text-align:left;gap:8px;margin:0 0 10px!important}
#media-frame-controls .media-zoom-row input{width:100%!important;margin:0;padding:6px 8px}
#media-frame-controls .field-unit{font-size:11px;color:var(--muted)}
#media-frame-controls .media-reset{margin:0 0 12px!important;width:100%;background:#203044;border:1px solid #3a4d62;border-radius:5px}
#media-frame-controls .media-flip-group{border-top:1px solid #2b3b4b;padding-top:6px;display:grid;grid-template-columns:1fr;gap:2px}
#corner-radius-panel input[type=number],#corner-radius-panel select{border-radius:5px!important;background-color:#101b28!important;color:#dfebf6!important;border:1px solid #34495e!important;padding:6px 8px!important;font-variant-numeric:tabular-nums}
#corner-radius-panel details{border-color:#2a3b4c!important}
#corner-radius-panel summary{color:#c7d9e8!important;background:#172535!important;font-weight:600!important}
#corner-radius-panel .inspector-body>label>input[type=number]:only-of-type{max-width:100%}
.studio-pro-workspace .sidebar-panel .panel-title{font-size:16px!important;font-weight:600;line-height:1.4;margin:0 0 14px}
.studio-pro-workspace .sidebar-panel h4{display:flex;align-items:center;gap:7px}
#corner-radius-panel label:has(>input[type=range]+input[type=number]),#tab-video-fx label:has(>input[type=range]+input[type=number]),#tab-sound label:has(>input[type=range]+input[type=number]){display:grid!important;grid-template-columns:minmax(0,1fr) 56px!important;align-items:center!important;gap:5px 10px!important;margin:4px 0 6px!important;text-align:left!important}
#corner-radius-panel label>input[type=range]:has(+input[type=number]),#tab-video-fx label>input[type=range]:has(+input[type=number]),#tab-sound label>input[type=range]:has(+input[type=number]){grid-column:1;grid-row:2;width:100%!important;min-width:0!important;margin:0!important}
#corner-radius-panel label>input[type=range]+input[type=number],#tab-video-fx label>input[type=range]+input[type=number],#tab-sound label>input[type=range]+input[type=number]{grid-column:2;grid-row:2;width:56px!important;min-width:56px!important;max-width:56px!important;margin:0!important;box-sizing:border-box}
#corner-radius-panel #media-frame-controls .media-flip-group label{margin:0!important;min-height:28px;line-height:1.3}
.studio-pro-workspace .nav-btn>.studio-icon{width:22px!important;height:22px!important;margin:0 0 4px}
.studio-pro-workspace .sidebar-panel button{font-size:12px;line-height:1.35}
/* EQ keeps its vertical faders while sharing the same thumb, scale and theme. */
#tab-sound .eq-bank{gap:8px;padding:12px 0;overflow-x:auto;scrollbar-width:thin}
#tab-sound .eq-bank label{display:flex!important;flex-direction:column;align-items:center;gap:8px;min-width:42px;margin:0!important;font-size:11px}
#tab-sound .eq-bank input[type=range]{width:26px!important;min-width:26px!important;height:140px!important;writing-mode:vertical-lr;direction:rtl;padding:0 12px 0 0!important;background:linear-gradient(to top,var(--accent) var(--range-fill,50%),#405064 var(--range-fill,50%)) 5px top/4px 100% no-repeat,repeating-linear-gradient(to top,#63768b 0 1px,transparent 1px 10%) right top/7px 100% no-repeat!important}
#tab-sound .eq-bank input[type=range]::-webkit-slider-runnable-track{width:4px;height:100%}
#tab-sound .eq-bank input[type=range]::-webkit-slider-thumb{width:16px;height:14px;margin:0 0 0 -6px}
#tab-sound .eq-bank output{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--accent)}
.export-settings .render-information{margin:0 0 14px;border:1px solid #2b3b4b;border-radius:5px;padding:8px}
.export-settings .render-information summary{cursor:pointer;font-size:11px;color:#a7bfd3}
.export-settings .render-information small{margin-top:8px}
#inspector-text-shadow .text-shadow-fields{display:grid;grid-template-columns:1fr;gap:8px}
#inspector-text-shadow label{display:grid;grid-template-columns:minmax(0,1fr) 56px;align-items:center;gap:6px 10px}
#inspector-text-shadow label span{font-size:12px!important;line-height:1.5;color:#a8bed0}
#inspector-text-shadow label:has(input[type=number]) span{grid-column:1/-1;text-align:left}
#inspector-text-shadow input[type=color]{width:56px!important;height:30px!important;border:1px solid #34495e;border-radius:5px;background:#101b28;padding:3px!important}
.studio-pro-workspace .sidebar-panel .input-label-sm{font-size:11px;line-height:1.4}
.studio-pro-workspace .sidebar-panel .input-field{font-size:12px;line-height:1.4}

#clip-hover-tip{box-sizing:border-box;max-width:min(420px,calc(100vw - 16px));max-height:calc(100vh - 16px);white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden}

/* Compact shared controls, without changing canvas or timeline clip geometry. */
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) button:not(.tl-block):not(.nav-btn){font-size:12px!important;line-height:1.35;box-sizing:border-box;min-height:28px;padding:6px 9px;vertical-align:middle}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) button+button{margin-left:0}
.studio-pro-workspace :is(.gallery-actions,.export-actions,.video-commands,.fm-toolbar){gap:6px!important}
.studio-pro-workspace :is(.gallery-actions,.export-actions,.video-commands,.fm-toolbar) button{margin:0!important}
.studio-pro-workspace dialog>a+button{margin-left:12px}
.studio-pro-workspace .gallery-actions{padding:6px;display:flex;flex-wrap:wrap}
.studio-pro-workspace .gallery-v8-card{height:auto!important;overflow:visible!important}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) :is(input:not([type=range]):not([type=checkbox]):not([type=color]),select,textarea){font:12px/1.4 Inter,'Segoe UI',sans-serif;box-sizing:border-box;border:1px solid #34495e;border-radius:5px;background:#101b28;color:#dfebf6;padding:6px 8px;min-width:0}
.studio-pro-workspace input[type=number]{appearance:textfield;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.studio-pro-workspace input[type=number]::-webkit-inner-spin-button,.studio-pro-workspace input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.studio-pro-workspace input[type=range]{height:24px!important;padding:0!important;background:linear-gradient(to right,var(--accent,#70dfc9) var(--range-fill,50%),#405064 var(--range-fill,50%)) center/100% 4px no-repeat!important;border-radius:3px!important;margin:0;min-width:0}
.studio-pro-workspace input[type=range]::-webkit-slider-thumb{width:14px;height:14px;border-radius:50%;margin-top:-5px}
#corner-radius-panel .layer-geometry-fields{grid-template-columns:1fr!important;gap:4px!important}
#corner-radius-panel label:has(>input[type=range]+input[type=number]){gap:4px 8px!important;margin:4px 0 8px!important}
.studio-pro-workspace .sidebar-panel h4 .studio-icon{margin:0;width:16px;height:16px}
.studio-pro-workspace .fm-grid:has(.fm-folder-name){grid-template-columns:repeat(2,minmax(0,1fr))!important}
.studio-pro-workspace .fm-folder:has(.fm-folder-name){gap:6px;min-width:0;margin:0!important;min-height:42px;flex-wrap:nowrap}
.fm-folder-name{font-size:11px;line-height:1.3;flex:1;min-width:0}
.fm-folder-count{font:10px/1.5 Inter,sans-serif;color:var(--accent);background:#0d2530;border-radius:4px;padding:1px 5px;flex:none}
.studio-pro-workspace input[type=checkbox]{appearance:none!important;width:14px!important;height:14px!important;min-width:14px!important;padding:0!important;border:1px solid #61798c;border-radius:3px;background:#101b28;vertical-align:middle;cursor:pointer}
.studio-pro-workspace input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px #101b28}
.studio-pro-workspace input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Stable media cards and theme controls. */
.studio-pro-workspace .fm-card:not(.fm-folder):not(.fm-file-row){display:grid;grid-template-rows:96px 32px 26px;align-content:start;height:168px!important;min-height:168px!important;max-height:168px!important;padding:6px!important;gap:2px;box-sizing:border-box;overflow:hidden}
.studio-pro-workspace .fm-card:not(.fm-folder):not(.fm-file-row) .thumb{display:block;width:100%;height:96px!important;min-height:0;object-fit:contain;background:#0b2029;border-radius:4px}
.studio-pro-workspace .fm-card:not(.fm-folder):not(.fm-file-row)>p{font:11px/16px Inter,'Segoe UI',sans-serif!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;white-space:normal!important;min-width:0;height:32px;max-height:32px;margin:0!important;padding:0!important}
.studio-pro-workspace .fm-card:not(.fm-folder):not(.fm-file-row)>small{font-size:10px!important;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;margin:0!important}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) :is(input:not([type=range]):not([type=checkbox]),select,textarea){border:0!important;background-color:#102e35!important;color:#ddf4ef!important;border-radius:6px!important;box-shadow:none!important}
.studio-pro-workspace input[type=checkbox]{appearance:none!important;border:0!important;border-radius:50%!important;background:#17464b!important;box-shadow:none!important;display:inline-block}
.studio-pro-workspace input[type=checkbox]:checked{background-color:var(--accent,#70dfc9)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 3 3 5-6' fill='none' stroke='%2307282a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-size:100% 100%!important;box-shadow:none!important}

#saved-shapes{padding-top:12px;margin-top:12px;border-top:1px solid #20434a}#saved-shapes>button{width:100%;margin-bottom:8px}#saved-shapes small{display:block;font-size:11px;color:var(--muted);margin-top:8px}.saved-shapes-list{display:grid;gap:6px}.saved-shapes-list>div{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px}.saved-shapes-list button{margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.element-create-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}.studio-pro-workspace .element-create-actions button{margin:0!important;width:100%!important;height:38px!important;padding:8px!important}.element-icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px!important;height:34px!important;margin:0 0 10px!important}.element-icon-button .studio-icon{width:20px;height:20px;margin:0!important}.studio-pro-workspace :is(#elements-list-container,#text-list-container) .layer-list-item{height:38px!important;min-height:38px!important;padding:4px 8px!important;gap:7px;margin-bottom:6px!important;border-width:1px!important;border-radius:5px!important;box-sizing:border-box}.studio-pro-workspace .layer-list-item .layer-name{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-pro-workspace .layer-list-item>.delete-btn{width:26px!important;min-height:26px!important;height:26px!important;padding:4px!important;margin:0!important}.studio-pro-workspace .layer-list-item>img,.studio-pro-workspace .layer-list-item>div:first-child:not(.layer-name){width:22px!important;height:22px!important;flex:none}.saved-elements{margin-top:12px;padding-top:10px}.saved-elements>h4{display:flex;align-items:center;gap:6px}.saved-elements small{display:block;font-size:10px;color:var(--muted);line-height:1.5}.saved-elements .studio-icon{width:15px;height:15px;flex:none}.saved-shapes-list>div>button:first-child{display:flex;align-items:center;gap:6px}.saved-shapes-list>div>button:first-child .studio-icon{margin:0!important}#saved-shapes>button{width:38px!important}
.studio-pro-workspace input[type=range]::-webkit-slider-thumb{background:var(--accent,#70dfc9)!important;border:0!important;box-shadow:0 1px 3px #0005!important;border-radius:50%!important}.studio-pro-workspace input[type=range]::-moz-range-thumb{background:var(--accent,#70dfc9)!important;border:0!important;border-radius:50%!important;width:14px;height:14px}
.gallery-heading{display:flex;align-items:center;gap:8px;justify-content:space-between}.gallery-heading .gallery-sync-button{width:28px;height:28px;min-height:28px!important;padding:5px!important;margin:0!important;display:inline-flex;align-items:center;justify-content:center}.gallery-sync-button .studio-icon{width:16px;height:16px;margin:0!important}.gallery-sync-status{display:block;font-size:10px;color:var(--muted);line-height:1.5;margin-bottom:6px}
/* Panel hierarchy uses quiet surfaces rather than stacked outlines. */
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) :is(details,.control-box){border:0!important;background:#10212d!important;border-radius:6px;box-shadow:0 2px 6px #0002}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) details details{background:#142b35!important;box-shadow:0 1px 4px #0002;margin-top:7px}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) details>summary{background:transparent!important;border:0!important;font-size:12px!important;line-height:1.4;padding:10px 12px!important}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) details[open]>summary{background:#17323b!important;color:#caeee6!important;border-radius:6px 6px 0 0}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) .inspector-body{background:transparent!important;border:0!important}
.studio-pro-workspace .layer-list-item{border-color:transparent!important;background:#112b34;box-shadow:0 1px 4px #0002}.studio-pro-workspace .layer-list-item.active{background:#16423f;box-shadow:inset 3px 0 var(--accent)}
.studio-pro-workspace .gallery-sync-button{background:#153a40!important;border:0!important;color:var(--accent)!important;border-radius:5px!important;box-shadow:0 1px 4px #0002}
.studio-pro-workspace .element-icon-button{background:#153a40!important;border:0!important;color:var(--accent)!important;border-radius:6px!important;box-shadow:0 1px 4px #0002}.studio-pro-workspace .element-icon-button:hover{background:#1b4b50!important}.studio-pro-workspace .element-create-actions button{background:#153a40!important;border:0!important;color:var(--accent)!important}.studio-pro-workspace #tab-elements>hr{display:none}#saved-shapes{border:0!important;margin-top:12px;padding-top:8px}
#studio-colour-picker{margin:0;inset:auto;border:0!important;background:#102d35!important;font-size:12px!important;box-shadow:0 12px 32px #0007!important}#studio-colour-picker .cp-hue{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)!important;height:12px!important;border-radius:6px!important;margin-bottom:14px!important}#studio-colour-picker .cp-hue::-webkit-slider-thumb{background:var(--accent)!important;border:0!important}#studio-colour-picker button,#studio-colour-picker .cp-hex{border:0!important;background:#19404a!important;color:#def5ef!important;font-size:12px!important}#studio-colour-picker .cp-done{background:var(--accent)!important;color:#062b29!important}.studio-pro-workspace input[type=color]{height:28px!important;min-height:28px!important;padding:3px!important;border:0!important;border-radius:5px!important;background:#153a40!important;cursor:pointer}.studio-pro-workspace input[type=color]::-webkit-color-swatch-wrapper{padding:0}.studio-pro-workspace input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}.effect-tab-button{display:inline-flex!important;align-items:center;justify-content:flex-start;gap:7px;background:#153a40!important;border:0!important;font-size:11px!important}.effect-tab-button.active{background:#1d514e!important;color:var(--accent)!important}.effect-tab-button .studio-icon,#tab-video-fx summary>.studio-icon{width:16px;height:16px;margin:0 6px 0 0!important;vertical-align:middle}

/* Shared control surfaces and balanced numeric readouts. */
.studio-pro-workspace button:not(.tl-block){border:0!important;box-shadow:0 2px 5px #0003}
.studio-pro-workspace button:focus-visible{outline:2px solid var(--accent,#70dfc9);outline-offset:2px}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) button:not(.element-icon-button):not(.delete-btn):not(.nav-btn):not(.active){background-color:#153a40}
.studio-pro-workspace input[type=number]{padding-inline:8px!important;text-align:center;box-sizing:border-box}
.studio-pro-workspace input[type=range]{appearance:none;-webkit-appearance:none;box-sizing:border-box}
.studio-pro-workspace input[type=range]::-webkit-slider-runnable-track{height:4px;border:0;background:transparent}
.studio-pro-workspace input[type=range]::-moz-range-track{height:4px;border:0;background:transparent}
.studio-pro-workspace #corner-radius-panel{border:0!important;box-shadow:-4px 0 18px #0004,0 4px 12px #0003!important}
/* Recessed fields and raised theme surfaces replace grey UI outlines. */
body.studio-pro-workspace{--border:#0a2028;--control-well:#0b252d;--surface-raised:#15333d}
.studio-pro-workspace :is(dialog,.export-box,.native-key-panel,.fm-card,.gallery-v8-card,.control-box,.inspector-section,.render-information){border:0!important;background-color:var(--surface-raised);box-shadow:0 3px 10px #0003}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) :is(input:not([type=range]):not([type=checkbox]):not([type=color]),select,textarea){background-color:var(--control-well)!important;box-shadow:inset 0 1px 3px #0004!important}
.studio-pro-workspace :is(.sidebar-panel,#timeline-editor,.nested-scenes-bar,.fm-toolbar){border-color:transparent!important}
.studio-pro-workspace .fm-card.selected{background:#16423f;box-shadow:inset 3px 0 var(--accent),0 3px 10px #0003}
/* Compact track visibility controls, with equal inset and no baseline drift. */
.studio-pro-workspace .timeline-track-rail{box-sizing:border-box;padding-left:6px!important;padding-bottom:3px!important;align-items:center!important;gap:4px!important}
.studio-pro-workspace .timeline-track-rail .track-btn{display:inline-flex!important;align-items:center;justify-content:center;width:22px!important;min-width:22px!important;height:22px!important;padding:4px!important;margin:0!important;line-height:1;background:#102b35;flex:none}
.studio-pro-workspace .timeline-track-rail .track-btn .studio-icon{display:block;width:12px!important;height:12px!important;margin:0!important;flex:none}

#permanent-gallery{margin-top:16px;padding-bottom:1px}#permanent-gallery>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px}#permanent-gallery>summary::before{content:'▸';color:var(--accent)}#permanent-gallery[open]>summary::before{content:'▾'}#permanent-gallery>summary>span{flex:1;font-size:12px}#permanent-gallery #gallery-grid{margin:8px 10px 0;gap:10px;align-items:start}#permanent-gallery .gallery-sync-status{margin:0 10px}#permanent-gallery .gallery-v8-card{height:auto!important;max-height:none!important;min-height:0;overflow:visible!important}#permanent-gallery .gallery-actions{gap:6px!important;padding:7px!important}#permanent-gallery .gallery-actions button{margin:0!important}
#permanent-gallery .gallery-v8-card{aspect-ratio:auto!important;display:flex;flex-direction:column}#permanent-gallery .gallery-v8-card>img,#permanent-gallery .gallery-v8-card>video{flex:none;height:78px!important}#permanent-gallery .gallery-v8-card .card-label{flex:none;white-space:nowrap}#permanent-gallery .gallery-actions{flex:none}
/* Shared form and disclosure geometry, including menus and modal dialogs. */
.studio-pro-workspace :is(dialog,#template-manager) :is(input:not([type=range]):not([type=checkbox]):not([type=color]),select,textarea){width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:8px 10px!important;border:0!important;border-radius:6px!important;background-color:var(--control-well)!important;box-shadow:inset 0 1px 3px #0004!important;color:#ddf4ef;font:12px/1.4 Inter,'Segoe UI',sans-serif}
.studio-pro-workspace :is(input,select,textarea,button,summary):focus-visible{outline:1px solid var(--accent)!important;outline-offset:1px!important}
.studio-pro-workspace select{appearance:none;padding-right:28px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3' stroke='%23bdbdbd' fill='none' stroke-width='1.5'/%3E%3C/svg%3E")!important;background-position:right 9px center!important;background-size:12px!important;background-repeat:no-repeat!important}
#studio-select-menu{position:fixed;inset:auto;margin:0;padding:5px;border:0;border-radius:7px;background:#12313b;box-shadow:0 8px 26px #0008;overflow:auto;box-sizing:border-box;z-index:100010;color:#ddf4ef}#studio-select-menu[hidden]{display:none!important}#studio-select-menu button{display:block;width:100%;padding:8px 10px;margin:0!important;min-height:30px;text-align:left;white-space:normal;overflow-wrap:anywhere;font:12px/1.4 Inter,'Segoe UI',sans-serif;background:transparent;border:0;border-radius:4px;box-shadow:none!important;color:inherit}#studio-select-menu button.highlighted,#studio-select-menu button:hover{background:#20534f}#studio-select-menu button[aria-selected=true]{color:var(--accent)}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog,#template-manager,.clip-label-menu) summary{list-style:none!important;display:flex;align-items:center;gap:7px;min-width:0;white-space:normal;overflow-wrap:anywhere}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog,#template-manager,.clip-label-menu) summary::-webkit-details-marker{display:none}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog,#template-manager,.clip-label-menu) summary::before{content:''!important;width:10px;height:10px;flex:0 0 10px;background:var(--accent);clip-path:polygon(30% 10%,80% 50%,30% 90%);transform:none}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog,#template-manager,.clip-label-menu) details[open]>summary::before{transform:rotate(90deg)}
#inspector-linked-video label{display:grid!important;grid-template-columns:minmax(0,1fr) 64px!important;gap:8px;align-items:center;text-align:left}
#inspector-linked-video input[type=number]{width:64px!important;min-width:64px!important;max-width:64px!important;padding:7px 8px!important}
#inspector-linked-video [data-name]{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.5}
#tab-sound .audio-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#tab-sound .audio-tabs button{min-width:0;margin:0!important;padding:8px!important;gap:6px;font-size:11px!important;white-space:normal;text-align:left;line-height:1.4}#tab-sound .audio-tabs .studio-icon{width:14px!important;height:14px!important;flex:0 0 14px;margin:0!important}
.studio-pro-workspace .settings-last{margin-top:auto!important}
#template-manager{max-width:100%;box-sizing:border-box}#template-manager label{margin:12px 0!important;display:grid!important;gap:6px}#template-manager select{margin:0!important}#template-manager .template-guidance{font-size:12px;line-height:1.5;color:#a9c7cd;margin:0 0 12px}#template-actions,.template-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}#template-manager button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;white-space:normal;padding:9px!important;margin:0!important;font-size:12px;border:0!important;background:#173e46;line-height:1.4}#template-manager button .studio-icon{margin:0!important;width:15px;height:15px}#template-manager .template-more{margin-top:14px;background:#0e242d;padding:10px;border-radius:6px}#template-manager .template-more summary{font-size:12px;cursor:pointer;margin-bottom:8px}#template-manager [role=status]{overflow-wrap:anywhere;line-height:1.5}
.studio-pro-workspace dialog{padding:20px!important;box-sizing:border-box}.studio-pro-workspace dialog form{min-width:0}.studio-pro-workspace dialog h3{font-size:16px;margin:0 0 16px}.studio-pro-workspace dialog .export-actions{display:flex;justify-content:flex-end;gap:8px!important;margin-top:18px}.studio-pro-workspace dialog .export-actions button{margin:0!important;min-width:74px}
#selection-box.radius-editing :is(.sel-handle,.radius-handle):not(.radius-active){visibility:hidden!important}#selection-box .radius-handle{background:var(--accent)!important;width:10px;height:10px;cursor:grab!important}#selection-box .sel-handle{width:9px;height:9px;border-width:1px}#selection-box .sel-handle.rot{cursor:grab!important}#selection-box .sel-handle.rot:active{cursor:grabbing!important}#selection-box .sel-handle:is(.nw,.se){cursor:nwse-resize!important}#selection-box .sel-handle:is(.ne,.sw){cursor:nesw-resize!important}#selection-box .sel-handle:is(.n,.s){cursor:ns-resize!important}#selection-box .sel-handle:is(.e,.w){cursor:ew-resize!important}
.studio-pro-workspace #track-video-container,.studio-pro-workspace #track-audio-container{border:0!important}.studio-pro-workspace #track-audio-container::before,.studio-pro-workspace .timeline-track-rail[data-track-type=audio][data-track-index="0"]::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#24515a;pointer-events:none;z-index:2}
.studio-pro-workspace :is(#clip-label-menu,#track-context-menu){background:#102d35;border:0;box-shadow:0 6px 22px #0007;padding:6px;border-radius:7px}.studio-pro-workspace :is(#clip-label-menu,#track-context-menu) button{width:100%;box-sizing:border-box;margin:0!important;padding:7px 9px!important;box-shadow:none!important;text-align:left;background:transparent;line-height:1.4}.studio-pro-workspace :is(#clip-label-menu,#track-context-menu) button:hover{background:#20534f}.clip-colours>summary{padding:8px 9px;cursor:pointer}.clip-colours[open]{background:#0b222b;border-radius:5px}.clip-colours button i{border:0!important;flex:none;border-radius:3px}
#studio-template-menu>#template-manager{width:min(460px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important}dialog>#template-manager{width:100%!important;max-width:100%!important}#template-manager .template-more>div{position:static!important;width:auto!important;padding:10px 0 0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.studio-pro-workspace #selection-box,.studio-pro-workspace #selection-box.video-selection{border:1px solid var(--accent)!important}.studio-pro-workspace #selection-box .sel-handle{border-color:var(--accent)!important}.studio-pro-workspace #selection-box .rot-line,.studio-pro-workspace #selection-box .sel-handle.rot{background:var(--accent)!important}
#selection-box .sel-handle.rot{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M5 8a8 8 0 1 1 0 8M5 3v5h5' stroke='%23202020' stroke-width='5' fill='none'/%3E%3Cpath d='M5 8a8 8 0 1 1 0 8M5 3v5h5' stroke='%23bdbdbd' stroke-width='2' fill='none'/%3E%3C/svg%3E") 12 12,grab!important}
.studio-pro-workspace .studio-panel-max{z-index:100000!important;border:0!important;color:inherit;box-sizing:border-box}.studio-pro-workspace .studio-panel-max::backdrop{background:#071019}
#studio-template-menu>#template-manager{border:0!important;border-radius:8px;background:#12313b!important;box-shadow:0 8px 28px #0007!important}
.studio-pro-workspace :is(dialog,#template-manager,.sidebar-panel,#corner-radius-panel) select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3' stroke='%23bdbdbd' fill='none' stroke-width='1.5'/%3E%3C/svg%3E")!important;background-position:right 9px center!important;background-size:12px!important;background-repeat:no-repeat!important;padding-right:28px!important}

/* Icon-only controls must not inherit the label gap. */
.studio-pro-workspace button.studio-icon-only{display:inline-flex;align-items:center;justify-content:center;gap:0;padding:6px;line-height:1}
.studio-pro-workspace button.studio-icon-only svg{margin:0!important;flex:none;display:block}
@media(max-width:900px){
 .studio-pro-workspace dialog{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto;padding:16px!important}
 .studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) :is(button:not(.tl-block),select,input:not([type=checkbox]):not([type=range]):not([type=color])){min-height:40px!important}
 .studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) :is(input:not([type=range]),select,textarea){font-size:16px!important}
 .studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) summary{min-height:44px;box-sizing:border-box}
 .studio-pro-workspace .layer-list-item{min-height:48px!important;height:auto!important}
 .studio-pro-workspace .layer-list-item>.delete-btn{width:40px!important;height:40px!important}
 .studio-pro-workspace button.studio-icon-only{min-width:40px;min-height:40px;padding:8px}
 .mobile-tools{height:calc(48px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
 .mobile-tools button{min-height:44px;flex:1;padding:8px 4px}
 .sidebar-panel,#corner-radius-panel{bottom:calc(48px + env(safe-area-inset-bottom))!important;box-sizing:border-box;overscroll-behavior:contain}
 #timeline-editor{margin-bottom:calc(48px + env(safe-area-inset-bottom))!important}
 .fm-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fm-preview:not([open]){display:none}
 #studio-select-menu button{min-height:44px;font-size:14px}
 .studio-pro-workspace input[type=range]{min-height:36px;touch-action:pan-y}
}

.studio-pro-workspace .timeline-controls .nested-scenes-bar{padding:0 8px;gap:6px;flex-wrap:nowrap;flex:none;background:transparent;border:0;font-size:11px}
.studio-pro-workspace .nested-scenes-bar [role=status]{display:none}
.studio-pro-workspace .timeline-controls .nested-scenes-bar button{padding:5px 8px;min-height:28px;white-space:nowrap;font-size:11px}
.timeline-move-tools{position:absolute;z-index:9100;display:flex;align-items:center;justify-content:center;gap:4px;background:#10212d;box-sizing:border-box}
.studio-pro-workspace .timeline-move-tools button.studio-icon-only{width:26px;height:26px;min-width:26px;min-height:26px;padding:5px;margin:0;background:#153a40;color:var(--accent);border-radius:5px}
.timeline-move-tools .studio-icon{width:16px;height:16px}
@media(max-width:900px){.studio-pro-workspace .timeline-move-tools button.studio-icon-only{height:36px;min-height:36px}}

/* Action groups use gap instead of sibling margins, so stacked rows align. */
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel,dialog) button{box-sizing:border-box;max-width:100%}
.studio-action-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0}
.studio-pro-workspace .studio-action-row button{margin:0!important}
#inspector-presets .inspector-body{display:grid;gap:8px}
#inspector-presets select{width:100%!important;margin:0!important;min-width:0}
#inspector-presets .preset-actions{margin:0}
.studio-pro-workspace .preset-actions button.studio-icon-only{width:34px!important;height:34px!important;min-height:34px!important;padding:8px!important;flex:none}
.preset-actions .studio-icon{width:18px;height:18px}
@media(max-width:900px){.studio-pro-workspace .preset-actions button.studio-icon-only{width:44px!important;height:44px!important;min-height:44px!important}}

/* Names and long choices get their own row instead of competing with labels. */
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) label:has(>input[type=text]),#inspector-matte label:has(>select){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important;align-items:start!important;margin:0 0 12px!important;text-align:left}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) label>input[type=text],#inspector-matte label>select{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;box-sizing:border-box;text-align:left}
#inspector-matte label:has(>input[type=color]){display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px!important}
#inspector-matte #matte-attach{width:100%;margin:0 0 8px!important}

.studio-pro-workspace .sidebar-panel>:is(h2,h3,h4),.studio-pro-workspace #corner-radius-panel>strong,.studio-pro-workspace dialog>:is(h2,h3,h4){color:var(--accent,#70dfc9)!important}
.studio-pro-workspace .viewport-timecodes{font-size:12px;line-height:1.4;padding:5px 12px;min-height:26px;gap:8px}
@media(max-width:600px){.studio-pro-workspace .viewport-timecodes{font-size:10px;padding-inline:8px;gap:4px}}

.studio-pro-workspace .gallery-actions{display:flex;flex-direction:row;justify-content:flex-start;gap:6px!important;margin:0!important;padding:6px!important}.studio-pro-workspace .gallery-actions button.studio-icon-only{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:6px!important;margin:0!important}.gallery-actions .studio-icon{width:16px;height:16px}@media(max-width:900px){.studio-pro-workspace .gallery-actions button.studio-icon-only{width:40px!important;height:40px!important;min-height:40px!important}}

.saved-elements .inspector-body{display:grid;gap:6px}.saved-elements select{width:100%!important;margin:0!important}.saved-elements .studio-action-row{margin:0!important}.studio-pro-workspace .saved-elements .preset-actions button{width:34px!important;height:34px!important;padding:8px!important;margin:0!important}.saved-elements .preset-actions .studio-icon{width:18px;height:18px}@media(max-width:900px){.studio-pro-workspace .saved-elements .preset-actions button{width:44px!important;height:44px!important}}

/* One compact spacing rhythm across tabs. */
.studio-pro-workspace .sidebar-panel{--panel-gap:8px}
.studio-pro-workspace .sidebar-panel>details,.studio-pro-workspace .sidebar-panel>.control-box{margin:0 0 var(--panel-gap)!important;padding:0!important}
.studio-pro-workspace .sidebar-panel>h3{margin:0 0 12px!important}
.studio-pro-workspace .sidebar-panel details>summary{padding:8px 10px!important;gap:6px!important}
.studio-pro-workspace .sidebar-panel summary>.studio-icon{margin:0!important;width:15px;height:15px}
.studio-pro-workspace .sidebar-panel details>summary{box-sizing:border-box;min-height:34px}
#tab-video-fx>details>summary{min-height:34px}
#tab-video-fx>details>:not(summary){margin-left:10px;margin-right:10px}
#tab-sound .audio-tabs{gap:6px!important;margin:0 0 8px!important}
#tab-sound .audio-tabs button{padding:7px 8px!important;min-height:34px!important;gap:6px}
.studio-pro-workspace :is(.studio-action-row,.video-commands,.fm-toolbar,.element-create-actions){gap:6px!important}
@media(max-width:900px){#tab-sound .audio-tabs button,#tab-video-fx>details>summary{min-height:44px!important}}

.corner-actions{flex-wrap:nowrap;margin:0 0 8px}.corner-actions #corner-radius-link{flex:none;margin:0!important;width:34px!important;height:34px;padding:8px!important}.corner-actions #corner-radius-link .studio-icon{width:18px;height:18px}.corner-actions #corner-radius-link[aria-pressed=true]{background:var(--accent)!important;color:#072b2a!important}.studio-pro-workspace #reset-corners{flex:none;width:34px;height:34px;padding:8px!important;margin:0!important}#reset-corners .studio-icon{width:18px;height:18px}

/* One compact dismissal control per modal; no footer space. */
.studio-pro-workspace dialog:has(.studio-dialog-close){padding:18px!important;box-sizing:border-box}.studio-pro-workspace dialog:has(.studio-dialog-close)>:is(h2,h3),.studio-pro-workspace dialog:has(.studio-dialog-close)>form>:is(h2,h3){padding-right:36px;margin-top:0;margin-bottom:12px}.studio-pro-workspace dialog button.studio-dialog-close{position:absolute!important;top:10px;right:10px;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:6px!important;margin:0!important;display:inline-flex!important;align-items:center;justify-content:center;border:0!important;background:transparent!important}.studio-dialog-close .studio-icon{width:18px!important;height:18px!important;margin:0!important}.studio-pro-workspace dialog button.studio-dialog-close:hover{background:#25454b!important}#template-manager .template-more{margin-top:8px;padding:0;background:transparent}#template-manager .template-more>summary{margin:0;padding:8px 10px;min-height:34px;box-sizing:border-box}#template-manager .template-more[open]>.template-action-grid{padding:8px 0 0;gap:6px!important}.host-grid{gap:6px 12px!important}@media(max-width:900px){.studio-pro-workspace dialog button.studio-dialog-close{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important} .studio-pro-workspace dialog:has(.studio-dialog-close)>:is(h2,h3){padding-right:44px}}

.studio-pro-workspace .studio-empty-message{display:block;grid-column:1/-1;width:100%;box-sizing:border-box;margin:6px 0;padding:6px 10px;font-size:11px!important;line-height:1.5;text-align:center;color:var(--text,#cbd5e1);opacity:.6}.studio-empty-message:empty{display:none}

#tab-video-fx .transition-actions-row{display:flex;align-items:center;gap:6px;margin:8px 10px;min-width:0}#tab-video-fx .transition-actions-row>label{display:flex!important;align-items:center;gap:5px!important;margin:0!important;font-size:11px;flex:1;min-width:0}#tab-video-fx .transition-actions-row input[data-duration]{width:48px!important;min-width:40px!important;max-width:60px!important;height:28px!important;min-height:28px!important;padding:4px!important;margin:0!important}#tab-video-fx .transition-actions-row [data-actions]{display:flex;align-items:center;gap:4px;flex:none}#tab-video-fx .transition-actions-row button{height:28px!important;min-height:28px!important;padding:4px 7px!important;margin:0!important;font-size:11px!important;white-space:nowrap}#tab-video-fx .transition-actions-row button.studio-icon-only{width:28px!important;min-width:28px!important;padding:6px!important}#tab-video-fx .transition-actions-row .studio-icon{width:14px;height:14px;margin:0}

#tab-video-fx [data-filters]{margin:0!important;padding:4px 6px!important}#tab-video-fx [data-filters]>details{margin:0 0 4px!important;padding:0!important}#tab-video-fx [data-filters]>details:last-child{margin-bottom:0!important}#tab-video-fx [data-filters]>details>summary{padding:6px 8px!important;min-height:30px!important;line-height:18px}#tab-video-fx [data-filters] .inspector-body{padding:8px!important}#tab-video-fx label.transition-effect-row{display:flex!important;align-items:center;gap:6px!important;margin:8px 10px!important;font-size:11px;min-width:0}#tab-video-fx .transition-effect-row select{flex:1;min-width:0!important;width:0!important;height:30px!important;min-height:30px!important;padding:4px 22px 4px 7px!important;margin:0!important;font-size:11px!important}#tab-video-fx .transition-effect-row button.transition-default{flex:none;width:28px!important;height:28px!important;min-height:28px!important;padding:6px!important;margin:0!important}#tab-video-fx .transition-default .studio-icon{width:15px;height:15px;margin:0!important}@media(max-width:900px){#tab-video-fx [data-filters]>details>summary{min-height:38px!important}}

/* Shared compact spacing for both side panels. */
.studio-pro-workspace .sidebar-panel{--panel-gap:6px;padding:12px!important}
.studio-pro-workspace .sidebar-panel>:is(h3,.panel-title){margin:0 0 8px!important}
.studio-pro-workspace .sidebar-panel>h4{margin:10px 0 6px!important}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) .inspector-body{gap:6px;padding:8px!important}
#corner-radius-panel>strong{padding:9px 10px!important}
#corner-radius-panel .inspector-body>label:not(:has(input[type=range])){margin:3px 0!important}
#corner-radius-panel .media-zoom-row{margin-bottom:6px!important}
#corner-radius-panel .media-reset{margin-bottom:6px!important}
.studio-pro-workspace .saved-elements{margin-top:8px;padding-top:0}
#no-text-msg{margin:4px 0!important;padding:5px 0!important;opacity:.6}
.studio-pro-workspace .fm-search{margin-top:4px;padding:6px 8px;min-height:30px}
.studio-pro-workspace .fm-path{margin:6px 0!important}
#tab-sound .audio-tabs{margin-bottom:6px!important;gap:4px!important}
@media(min-width:901px){
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) details>summary{min-height:30px!important;padding:6px 8px!important}
.studio-pro-workspace .sidebar-panel .element-create-actions button{height:32px!important;padding:6px!important}
.studio-pro-workspace .saved-elements .preset-actions button{width:30px!important;height:30px!important;padding:6px!important}
#tab-sound .audio-tabs button{min-height:30px!important;padding:5px 7px!important}
}

@media(min-width:901px){#corner-radius-panel .inspector-body>label:not(:has(input[type=range])){margin:0!important;min-height:28px;gap:4px!important}#corner-radius-panel .inspector-body>label>input[type=number]{height:28px!important;min-height:28px!important;padding:4px 6px!important}#inspector-linked-video .inspector-body{gap:4px}#corner-radius-panel details>summary{margin:0!important}}

#custom-project-manager{width:min(540px,calc(100vw - 24px));max-height:85vh;overflow:auto}#custom-project-manager h2{font-size:18px}#custom-project-manager .project-location{font-size:11px;margin:4px 0 10px;opacity:.7}#custom-project-manager label{margin:6px 0;font-size:12px}#custom-project-manager input,#custom-project-manager select{margin-top:4px;padding:7px 9px;font-size:12px}#custom-project-manager .project-folder-row{display:flex;gap:6px;align-items:end}#custom-project-manager .project-folder-row label{flex:1;min-width:0}#custom-project-manager [data-folder]{width:32px;height:32px;padding:7px;margin:0 0 6px}#custom-project-manager [data-search]{margin:6px 0}.custom-project-list{max-height:240px;overflow:auto;display:grid;gap:4px;margin:8px 0}.custom-project-row{display:flex;align-items:center;gap:4px;background:#0c2830;border-radius:5px;padding:3px}.custom-project-row button{margin:0!important}.custom-project-row .project-open{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;background:transparent!important}.custom-project-row .studio-icon-only{width:30px;height:30px;padding:6px!important}.custom-project-row .studio-icon{width:16px;height:16px;margin:0!important}#custom-project-manager form{border-top:1px solid #29434a;padding-top:6px}#custom-project-manager .error:empty{display:none}

#custom-project-manager{border:1px solid #33545a!important;border-radius:12px!important;box-shadow:0 18px 60px #0008!important}#custom-project-manager .project-storage{padding:8px 10px;margin:6px 0 10px;background:#0a2029;border:1px solid #25414a;border-radius:6px}#custom-project-manager .project-storage small{display:block;font-size:10px;color:#9db8c1;font-variant-numeric:tabular-nums;line-height:1.5}#custom-project-manager meter{display:block;width:100%;height:6px;margin-top:5px}#custom-project-manager meter::-webkit-meter-bar{background:#203b45;border:0}#custom-project-manager meter::-webkit-meter-optimum-value{background:#63cbb9}#custom-project-manager .custom-project-list{border:1px solid #29434b;border-radius:7px;padding:5px;min-height:100px;background:#0b1d27}#custom-project-manager .project-open{display:flex;align-items:center;gap:9px;padding:7px 8px!important}#custom-project-manager .project-open span{overflow:hidden;text-overflow:ellipsis}#custom-project-manager .project-open .studio-icon{color:var(--accent);flex:none}#custom-project-manager .custom-project-row:hover{background:#153a43}#custom-project-manager .custom-project-row button:last-child:hover{color:#ffb3ac}#custom-project-manager form{display:flex;align-items:end;gap:8px}#custom-project-manager form label{flex:1;min-width:0}#custom-project-manager form .primary{margin:0 0 6px;white-space:nowrap}@media(max-width:600px){#custom-project-manager form{flex-wrap:wrap}#custom-project-manager form label{flex-basis:100%}}
#custom-project-manager .custom-project-list{align-content:start}#custom-project-manager form .primary{background:var(--accent,#72dfcb)!important;color:#082b2b!important;border-color:transparent!important}#custom-project-manager .custom-project-row{min-height:36px}
/* Equal compact accordion spacing in the library and layer inspector. */
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel){--section-height:30px}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) details{margin:0 0 4px!important;padding:0!important}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) details>summary{min-height:var(--section-height)!important;margin:0!important;padding:6px 8px!important;line-height:18px!important;gap:6px!important;box-sizing:border-box}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) details:last-child{margin-bottom:0!important}
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) .inspector-body:has(>details){padding:4px 6px!important;row-gap:0!important}
@media(max-width:900px),(pointer:coarse) and (max-width:1200px){.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel){--section-height:38px}}
/* Keep the active gesture cursor consistent over every child and outside the canvas. */
html.studio-pointer-drag,html.studio-pointer-drag *,html.studio-pointer-drag #selection-box .sel-handle,html.studio-pointer-drag #selection-box .radius-handle{cursor:var(--studio-drag-cursor)!important}

/* Let the sidebar scroll without compressing the layer list behind the editor. */
.studio-pro-workspace :is(#tab-text,#tab-elements)>*{flex-shrink:0}
.studio-pro-workspace :is(#text-list-container,#elements-list-container){flex:0 0 auto;min-height:0;max-height:250px;overflow-y:auto}
.studio-pro-workspace .layer-list-item .layer-name{min-width:0;line-height:1.4}

/* Match field typography and reserve more of each clip for media and levels. */
.studio-pro-workspace :is(.sidebar-panel,#corner-radius-panel) :is(label,input,select,textarea){font-size:11px!important}
#studio-select-menu button{font:inherit!important}
[data-studio-mode=edit] .nested-scenes-bar [data-name]{display:none}
.studio-pro-workspace .tl-block:is(.multi-selected,.selected-tl-block){border-color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important;outline:0!important}
.studio-pro-workspace .tl-block .content{top:1px!important;height:12px!important;line-height:12px!important;font-size:9px!important}
.studio-pro-workspace :is(.tl-video-strip,.tl-wave-canvas){top:15px!important;height:calc(100% - 15px)!important}
.studio-pro-workspace .clip-envelope{top:15px;height:calc(100% - 17px)}
#clip-colour-options{position:fixed;inset:auto;margin:0;padding:5px;border:0;border-radius:7px;background:#102d35;color:#ddf4ef;box-shadow:0 8px 26px #0008;max-height:calc(100dvh - 16px);overflow:auto;min-width:130px}
#clip-colour-options button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;background:transparent;border:0;color:inherit;text-align:left;font:11px/1.4 'Segoe UI',sans-serif;cursor:pointer}
#clip-colour-options button:hover{background:#20534f}#clip-colour-options i{width:12px;height:12px;border-radius:3px}
.custom-node-layer{z-index:10003;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.custom-node-layer circle{pointer-events:all;cursor:grab;fill:#fff;stroke:#112d35;stroke-width:1.5;touch-action:none}

#canvas-wrapper>.custom-pen{z-index:200000;pointer-events:auto}

.studio-pro-workspace .layer-list-item>.layer-visibility{flex:0 0 24px;width:24px!important;min-width:24px;min-height:24px!important;height:24px!important;padding:4px!important;margin:0!important;background:transparent!important;box-shadow:none!important;border-radius:5px;color:var(--muted)}
.layer-visibility .studio-icon{width:16px;height:16px;margin:0!important}.layer-list-item.clip-hidden .layer-name{opacity:.45}.layer-visibility[aria-pressed=false]{opacity:.55}
@media(pointer:coarse){.studio-pro-workspace .layer-list-item>.layer-visibility{flex-basis:32px;width:32px!important;height:36px!important}}

/* Documents use an icon and readable filename, never a media preview slot. */
.studio-pro-workspace .fm-card.fm-file-row{display:grid!important;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-content:center;align-items:center;height:auto!important;min-height:64px!important;max-height:none!important;padding:9px 10px!important}
.studio-pro-workspace .fm-card.fm-file-row>.thumb{grid-row:1/3;grid-column:1;width:38px;height:44px!important;min-height:0;aspect-ratio:auto;background:transparent;display:flex;align-items:center;justify-content:center}
.fm-document-icon{width:34px;height:42px;display:block}
.studio-pro-workspace .fm-card.fm-file-row>p{grid-column:2;display:block;height:auto;max-height:none;margin:0!important;padding:0;min-width:0;font:12px/1.4 'Segoe UI',sans-serif;white-space:normal;overflow-wrap:anywhere}
.studio-pro-workspace .fm-card.fm-file-row>small{grid-column:2;margin:0!important;font-size:10px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}

#smart-members .media-flip-group{display:grid;gap:4px}
#corner-radius-panel #smart-members .media-flip-group label{display:flex;align-items:center;gap:8px;margin:0;min-height:32px}
#corner-radius-panel #smart-members .media-flip-group input{width:16px;height:16px;flex:none;margin:0;padding:0}

/* Enabled primary actions must retain contrast against dark panels. */
.studio-pro-workspace button.primary{background:#72dfcb!important;color:#082b2b!important;border-color:transparent!important;opacity:1}
.studio-pro-workspace button.primary:not(:disabled):hover{background:#96eedf!important}
.studio-pro-workspace button.primary:disabled{background:#29464b!important;color:#9aafb4!important;opacity:.55;cursor:not-allowed}
.studio-pro-workspace button:focus-visible{outline:2px solid #96eedf;outline-offset:2px}
.export-actions a{padding:8px 12px;border:1px solid #548a84;border-radius:5px;text-decoration:none}
.export-actions a:hover{background:#21474a;color:#b5fff0!important}
/* Do not let one trim handle cover the opposite edge on short clips. */
.tl-edge{max-width:50%;box-sizing:border-box}

/* Enabled controls must never inherit black text on the dark Studio surface. */
body.studio-pro-workspace button:not(:disabled):not([aria-disabled="true"]){color:#e4f6f2!important;opacity:1}
body.studio-pro-workspace button.primary:not(:disabled),body.studio-pro-workspace button[aria-pressed="true"]:not(:disabled){background:#72dfcb!important;color:#082b2b!important}
body.studio-pro-workspace button:disabled,body.studio-pro-workspace button[aria-disabled="true"]{color:#9aafb4!important;opacity:.48!important;cursor:not-allowed}
body.studio-pro-workspace button:not(:disabled):focus-visible{outline:2px solid #8ff5df;outline-offset:2px}

/* Compact timeline clips: a quiet title bar with a clear media body. */
.studio-pro-workspace :is(.tl-block,.studio-nest-block){border-radius:2px!important;box-shadow:none!important;border:1px solid #34778b!important;outline-offset:-1px!important}
.studio-pro-workspace .studio-nest-block{display:flex!important;flex-direction:column;justify-content:flex-start!important;align-items:flex-start!important;padding:3px 7px!important;text-align:left;font-weight:500!important}
.studio-pro-workspace .studio-nest-block .nest-scene-number{font:500 11px/15px 'Segoe UI',sans-serif!important}
.studio-pro-workspace .studio-nest-block .nest-layout-name{font:400 10px/13px 'Segoe UI',sans-serif!important;opacity:.75}
.studio-pro-workspace .tl-block .content{left:0!important;right:0!important;top:0!important;height:18px!important;padding:0 27px 0 6px!important;box-sizing:border-box;font:500 11px/18px 'Segoe UI',sans-serif!important;background:#00374645;border:0!important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.studio-pro-workspace .tl-block.type-audio{background:#004b62!important;border-color:#34778b!important}
.studio-pro-workspace :is(.tl-video-strip,.tl-wave-canvas){top:18px!important;height:calc(100% - 18px)!important;opacity:1!important}
.studio-pro-workspace .clip-envelope{top:18px;height:calc(100% - 20px)}
.studio-pro-workspace :is(.tl-block.multi-selected,.tl-block.selected-tl-block,.studio-nest-block[aria-pressed=true]){border-color:#c9eaff!important;box-shadow:inset 0 0 0 1px #c9eaff!important;outline:0!important}
.studio-pro-workspace .tl-fx-badge{position:absolute;right:7px;top:0;z-index:6;font:italic 14px/18px Georgia,serif;color:#cce7ef;opacity:.55;pointer-events:none}
.studio-pro-workspace .tl-fx-badge[data-active=true]{opacity:1;color:#fff}
.studio-pro-workspace .tl-block{container-type:inline-size}
@container (max-width:45px){.tl-fx-badge{display:none}.tl-block .content{padding-right:3px!important}}

/* One separator rather than an additional empty pixel between ordinary clips. */
.studio-pro-workspace .tl-block{border-left-width:0!important;border-right-color:#0b121d!important;border-radius:1px!important}
#clip-effect-controls{margin:0 0 12px;padding:8px;background:#101f2a;border:1px solid #34505e;border-radius:4px}
#clip-effect-controls h3{margin:0 0 6px;font-size:13px}#clip-effect-controls [data-clip-name]{margin:0 0 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a8c7d1}
#clip-effect-controls details{border-top:1px solid #344650}#clip-effect-controls summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;padding:3px 0;font-size:12px}
#clip-effect-controls summary span:before{content:'› ';color:#a8c7d1}#clip-effect-controls details[open] summary span:before{content:'⌄ '}
#clip-effect-controls summary button{min-width:26px;min-height:26px;padding:0;background:transparent;box-shadow:none}
#clip-effect-controls .effect-values{padding:4px 8px 9px}.effect-value{display:flex;justify-content:space-between;gap:12px;font-size:11px;line-height:1.7}.effect-value span:last-child{color:#71cee9;overflow-wrap:anywhere;max-width:60%}

/* Media type colours stay consistent across projects. */
.studio-pro-workspace .tl-block{background:#004b62!important}
.studio-pro-workspace .studio-nest-block{background:#424f00!important;border-color:#7e8a3c!important}
#corner-radius-panel.audio-effect-selection>:not(#clip-effect-controls){display:none!important}
.nest-mini-clips{position:absolute;left:0;right:0;bottom:3px;height:12px;pointer-events:none;opacity:.28;overflow:hidden}
.nest-mini-clips i{position:absolute;height:4px;background:#d6e88a;border-right:1px solid #424f00;box-sizing:border-box}

#corner-radius-panel #clip-effect-controls summary{display:flex!important;justify-content:space-between!important;text-align:left!important}
#clip-effect-controls summary::before,#clip-effect-controls summary::after{display:none!important}
#clip-effect-controls summary span{flex:1;text-align:left}

.studio-pro-workspace .tl-block:is(.multi-selected,.selected-tl-block){border:1px solid #c9eaff!important;box-shadow:inset 0 0 0 1px #c9eaff!important}
#clip-effect-controls .effect-value input:not([type=checkbox]),#clip-effect-controls .effect-value select{width:110px!important;min-width:0;padding:3px!important}
#clip-effect-controls input[type=checkbox]{width:16px!important;height:16px!important;flex:none}

/* Consistent high-contrast controls; nested clips retain their category colour. */
body.studio-pro-workspace button:not(.studio-nest-block):not(:disabled):not([aria-disabled="true"]){background-color:#203943!important;color:#e7f1f5!important;border-color:#45616c!important}
body.studio-pro-workspace button:not(.studio-nest-block):not(:disabled):hover{background-color:#2d4c58!important}
body.studio-pro-workspace button.primary:not(:disabled),body.studio-pro-workspace button:not(.studio-nest-block)[aria-pressed="true"]:not(:disabled){background-color:#216b7f!important;color:#fff!important;border-color:#5599aa!important}
body.studio-pro-workspace button.studio-nest-block[aria-pressed="true"]{background:#596607!important;color:#f3f5df!important;border:1px solid #e1e8aa!important;box-shadow:inset 0 0 0 1px #e1e8aa!important}

body.studio-pro-workspace button.primary:not(.studio-nest-block):not(:disabled):not([aria-disabled="true"]){background-color:#216b7f!important;color:#fff!important;border-color:#5599aa!important}
