/* Reference-aligned operator shell. Broadcast colors remain independent. */
.studio-reference{--st-sidebar:330px;position:relative}
.studio-reference .studio-header{height:54px;min-height:54px;padding:0 16px}
.studio-reference .studio-header>.row{gap:10px}
.studio-reference #studio-title-edit{font-size:13px;font-weight:500}
.studio-reference .studio-body{grid-template-columns:minmax(0,1fr) var(--st-sidebar);height:calc(100dvh - 54px)}
.studio-reference .stage{padding:18px 20px 86px;gap:8px}
.studio-reference .studio-command{width:min(84%,calc((100dvh - 280px)*1.77778));margin:0 auto;justify-content:center}
.studio-reference #studio-preview-slot{flex:0 0 auto}
.studio-reference .wk-program-preview{width:100%;box-shadow:none;border-radius:2px;border-color:var(--st-line)}
.studio-reference .studio-layout-bar{position:relative;height:42px;gap:10px;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin}
.studio-reference .studio-layouts{gap:3px;flex:none}
.studio-reference .studio-layouts button{width:31px;min-width:31px;height:28px;padding:3px;border-radius:4px}
.studio-reference .studio-layout-edit{margin-left:auto;flex:none;gap:4px}
.studio-reference .studio-layout-edit button{width:27px;min-width:27px;height:28px;border-radius:4px}
.studio-reference .studio-source-strip{flex:0 0 98px;height:98px!important;min-height:98px!important;gap:8px!important}
.studio-reference .studio-source-strip>.tile,.studio-reference .studio-source-extra{height:90px!important;min-height:90px!important;flex-basis:136px;border-radius:6px}
.studio-reference .studio-source-extra{font-size:11px;flex-basis:132px}
.studio-reference .studio-source-strip .tile-label{font-size:10px;padding:4px 6px}
.studio-reference .studio-source-menu{width:23px;height:24px;top:3px;right:3px;font-size:17px;z-index:8}
.studio-source-status{position:absolute;top:4px;left:4px;font-size:9px;padding:3px 5px;border-radius:3px;background:#1b2230d9;color:white;pointer-events:none;z-index:6}
.studio-source-toggle{position:absolute;inset:30px 5px 24px;border-radius:4px;background:#111827ed;color:white;font-size:10px;padding:3px;z-index:7;opacity:0;cursor:pointer;transition:opacity .12s!important}
.studio-source-strip .tile:hover .studio-source-toggle,.studio-source-strip .tile:focus-within .studio-source-toggle{opacity:1}
.studio-reference .studio-panel{padding-right:68px}
.studio-reference .panel-content{padding:0 10px 18px}
.studio-reference .studio-rail{width:68px;padding:5px 3px;gap:1px}
.studio-reference .studio-rail button{height:59px;min-height:59px;font-size:9px;border-radius:5px}
.studio-reference .studio-rail .icon{width:18px;height:18px}
.studio-reference .studio-panel-heading{height:42px;margin:0 -10px 10px;padding:4px 8px}
.studio-reference .studio-panel-heading select{border:0;background:transparent;min-height:30px;font-size:11px}
.studio-reference .studio-gallery-section{border:0;padding-bottom:10px}
.studio-reference .studio-tool-panel{gap:10px}
.studio-reference .studio-section-toggle{font-size:13px;min-height:28px}
.studio-reference .studio-gallery-section h3{margin-bottom:8px}
.studio-reference .studio-thumb-picture{height:47px;border-radius:5px}
.studio-reference .studio-thumb-label{font-size:9px;margin-top:4px}
.studio-reference .studio-inline-setting{gap:4px}
.studio-reference .studio-position{width:25px;height:26px}
.studio-reference .studio-inline-setting .btn{min-height:27px;padding:4px 6px;font-size:10px}
.studio-reference .studio-tool-panel .check{font-size:11px}
.studio-reference .controls{position:absolute;left:0;bottom:0;width:calc(100% - var(--st-sidebar));height:72px;min-height:72px;justify-content:center;gap:8px;padding:5px 12px;background:var(--st-bg);z-index:40}
.studio-reference .controls #screen,.studio-reference .controls #local-record{display:none}
.studio-reference .controls .control{min-width:60px;font-size:10px;gap:3px;padding:4px;min-height:56px}
.studio-reference .controls .control-icon{height:30px;width:32px;border-radius:5px}
.studio-reference .controls .leave{font-size:11px;padding:8px 10px;margin-left:12px;min-height:36px}
.studio-device-group{position:relative;display:flex;padding-right:15px;align-items:flex-start}
.studio-reference .studio-device-group .studio-device-arrow{position:absolute;right:0;top:4px;margin:0;width:18px;min-width:18px;height:30px;background:transparent;display:block}
.studio-present-menu{position:fixed;width:240px;background:var(--st-surface);color:var(--st-text);border:1px solid var(--st-line);border-radius:8px;box-shadow:0 8px 28px #0003;padding:6px;z-index:250}
.studio-present-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 9px;text-align:left;background:none;color:inherit;border-radius:5px;font-size:13px;cursor:pointer}
.studio-present-menu button:hover,.studio-present-menu button:focus{background:var(--st-soft);outline:none}
.studio-present-menu .icon{width:18px;height:18px}
.studio-banner-presets{display:grid;gap:6px}.studio-banner-presets .btn{text-align:left;justify-content:flex-start;font-weight:400}
.studio-reference.studio-panel-collapsed{--st-sidebar:68px}
.studio-reference.studio-panel-collapsed .studio-body{grid-template-columns:minmax(0,1fr) 68px}
.studio-reference.studio-panel-collapsed .studio-panel{padding-right:68px}
@media(min-width:1500px){.studio-reference{--st-sidebar:380px}.studio-reference .studio-panel{padding-right:76px}.studio-reference .studio-rail{width:76px}.studio-reference .studio-command{width:min(82%,calc((100dvh - 280px)*1.77778))}.studio-reference .studio-thumb-picture{height:56px}}
@media(max-width:1100px){.studio-reference{--st-sidebar:305px}.studio-reference .studio-command{width:100%}.studio-reference .controls{gap:3px;padding:5px}.studio-reference .controls .control{min-width:48px;font-size:9px}.studio-reference .controls .leave{margin-left:3px}.studio-reference #studio-destinations>span:last-child{display:none}.studio-reference #studio-destinations{padding:8px}}
@media(max-width:800px){.studio-reference .controls .leave{max-width:78px;white-space:normal}.studio-reference .studio-device-group{padding-right:9px}.studio-reference .controls{gap:0}.studio-reference .controls .control{min-width:43px}.studio-reference .stage{padding-left:12px;padding-right:12px}.studio-reference .studio-device-group .studio-device-arrow{width:13px;min-width:13px}}
@media(max-width:650px){.studio-reference{padding-bottom:128px}.studio-reference .studio-header{height:60px;min-height:60px;padding:0 8px}.studio-reference .studio-header>.row{gap:5px}.studio-reference #studio-title-edit{max-width:30vw;font-size:11px}.studio-reference #studio-destinations{display:none}.studio-reference .studio-body{display:flex;height:auto}.studio-reference .stage{padding:12px;min-height:300px}.studio-reference .studio-command{width:100%;flex:none}.studio-reference .studio-panel{height:560px;padding-right:68px}.studio-reference .studio-thumb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-reference .controls{position:fixed;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:56px 56px;gap:4px;width:100%;height:128px;min-height:128px;padding:6px 8px}.studio-reference .controls .control,.studio-reference .controls .leave{min-width:0;max-width:none;width:100%;margin:0;font-size:10px;min-height:52px;justify-content:center}.studio-reference .controls .leave{align-self:center;grid-column:span 2}.studio-reference .controls .studio-device-group{width:100%;padding-right:14px}.studio-reference .studio-device-group .studio-device-arrow{width:18px;right:0;display:block}.studio-source-toggle{opacity:1}.studio-reference .studio-top-status{display:none}}
@media(pointer:coarse){.studio-source-toggle{opacity:1}}

.studio-reference [data-studio-layout=pip] rect:last-child{fill:var(--st-primary);stroke:var(--st-surface);stroke-width:6px}

body:has(.studio-reference) #dialog .studio-appearance-choices button{background:var(--st-raised);color:var(--st-text);border-color:var(--st-line)}body:has(.studio-reference) #dialog .studio-appearance-choices button[aria-pressed=true]{background:var(--st-soft);color:var(--st-primary);border-color:var(--st-primary)}body:has(.studio-reference) #dialog .studio-settings-layout nav button{color:var(--st-muted)}body:has(.studio-reference) #dialog .studio-settings-layout nav button[aria-pressed=true]{background:var(--st-soft);color:var(--st-primary)}
