/* Stage & Dock: scoped to the interactive studios. */
.studio.stage-dock{--sd-top:64px;--sd-bottom:140px;position:relative;display:block;height:calc(100% - 88px);border-radius:16px;background:#160e20;overflow:hidden;isolation:isolate}
.stage-dock #o-viewer,.stage-dock #h-viewer{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:var(--sd-top) 0 var(--sd-bottom);border:0;border-radius:0;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#50326850,transparent 60%),linear-gradient(#17101f,#0f0a16)}
.stage-dock .st-stage>.hint{display:none}
.stage-dock .sd-stage-tag{position:absolute;top:22px;left:22px;z-index:2;display:flex;align-items:center;gap:8px;color:#cbb3e0;font-size:10px;letter-spacing:.6px;pointer-events:none}
.stage-dock .sd-stage-tag i{width:5px;height:5px;background:#bb8dec;border-radius:50%;box-shadow:0 0 12px #bb8dec44}
.stage-dock .sd-stage-tag small{font-size:10px;color:#8d769e;letter-spacing:0;border-left:1px solid #63427466;padding-left:8px}
.stage-dock .sd-stage-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:9px;color:#9275a8;white-space:nowrap;pointer-events:none;z-index:3}
.stage-dock .sd-panel{position:absolute;top:76px;right:16px;z-index:6;width:clamp(245px,var(--st-right,300px),42%);max-height:calc(100% - 208px);min-height:0;height:auto;display:flex;flex-direction:column;gap:0;padding:0;background:#21162def;border:1px solid #69447f88;border-radius:12px;box-shadow:0 16px 45px #08040c66;overflow:hidden;backdrop-filter:blur(14px);order:initial}
.stage-dock .sd-panel[hidden]{display:none!important}
.stage-dock .sd-panel.st-left{left:16px;right:auto;width:clamp(195px,var(--st-left,215px),32%);border-right:1px solid #69447f88}
.stage-dock .sd-panel.sd-dragging{z-index:10;border-color:#b58bd9;box-shadow:0 22px 60px #08030e77}
.stage-dock .sd-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:12px 13px 11px;border-bottom:1px solid #67427e55;background:#261930;cursor:grab;touch-action:none;user-select:none}
.stage-dock .sd-panel-heading:active{cursor:grabbing}
.stage-dock .sd-panel-title{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px;color:#e5d1f3;font-weight:550}
.stage-dock .sd-panel-title>svg{height:14px;width:14px;flex:none;color:#b595d0}
.stage-dock .sd-panel-title>svg:first-child{width:10px;height:14px;opacity:.6}
.stage-dock .sd-close{width:25px;height:25px;display:grid;place-items:center;flex:none;border:0;background:none;color:#9f83b2;border-radius:5px;padding:5px}
.stage-dock .sd-close:hover{background:#b589d521;color:#eed8ff}
.stage-dock .sd-close svg{width:14px;height:14px}
.stage-dock .sd-content{display:flex;flex-direction:column;gap:12px;overflow:auto;min-height:0;max-height:100%;padding:13px;scrollbar-width:thin;overscroll-behavior:contain}
.stage-dock .st-left .sd-content>.segmented{align-self:stretch;width:100%;padding:3px}
.stage-dock .st-left .sd-content>.segmented button{flex:1;padding:8px;font-size:11px}
.stage-dock .import-caption{display:none}
.stage-dock .st-ped{border:0;background:none;padding:0;border-radius:0;gap:10px}
.stage-dock .st-ped-head{gap:6px}
.stage-dock .st-ped-head span{font-size:9px;color:#9377a7}
.stage-dock .st-ped-head b{font-size:11px;color:#d1b3ed}
.stage-dock .st-ped-btns{gap:7px}
.stage-dock .st-ped-btn{font-size:11px;padding:10px 7px;background:#35213f;box-shadow:0 0 0 1px #80559755 inset;border-radius:7px}
.stage-dock .st-ped-parts{gap:7px}
.stage-dock .st-ped-part.slot{border-color:#8d64ae55;background:#321f3e55}
.stage-dock .st-ped small{color:#9c80af;font-size:10px;line-height:1.8}
.stage-dock .st-ped-reset{font-size:10px}
.stage-dock .st-help summary{font-size:10px}
.stage-dock .st-allow{border-color:#8b5cb333;background:#885bb20a}
.stage-dock .st-cats{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px}
.stage-dock .st-cats:empty{display:none}
.stage-dock .st-cat{flex:1;min-width:calc(33% - 5px);font-size:9px;padding:7px 5px;gap:5px}
.stage-dock .st-cat>i{width:25px;height:25px;border-radius:5px}
.stage-dock .st-cat span{min-width:0;font-size:9px}
.stage-dock .st-cat small{font-size:8px}
.stage-dock .st-head{padding:0;align-items:center;gap:9px}
.stage-dock .st-head h2{font-size:19px;font-weight:550}
.stage-dock .st-desc{font-size:10px;line-height:1.7;margin-bottom:0}
.stage-dock #o-pack,.stage-dock #h-pack{min-width:0;max-width:140px;padding:8px;font-size:10px}
.stage-dock .st-filter{padding:0}
.stage-dock .st-search{width:100%}
.stage-dock .st-search input{height:35px;font-size:10px;background:#190f23}
.stage-dock #o-grid,.stage-dock #h-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:110px;gap:8px;min-height:110px;overflow:visible;flex:none;padding:0}
.stage-dock .st-item{border-radius:8px;min-height:0}
.stage-dock .st-item::before{display:none}
.stage-dock .st-item.upload{font-size:10px;background:#ab73d30a;border-color:#a778cd66}
.stage-dock .st-item.none{font-size:10px}
.stage-dock .st-pager{padding:2px 0;gap:5px}
.stage-dock .st-actions{position:sticky;bottom:-13px;background:#21162df5;border-top:1px solid #754a8a44;padding:11px 0 0;margin:0;z-index:3}
.stage-dock .st-actions .btn{font-size:10px;padding:10px 7px;flex:1}
.stage-dock .st-tabs{padding:0;gap:9px;border-bottom-color:#67427e55}
.stage-dock .st-tabs button{font-size:10px;padding:0 3px 10px}
.stage-dock .st-pane{overflow:visible;min-height:0}
.stage-dock .sims-pane{padding:0}
.stage-dock .sims-pane>div,.stage-dock .sims-pane>label{max-width:100%}
.stage-dock .sims-drop{padding:18px 12px;border-color:#a272c555}
.stage-dock .sims-drop small{font-size:10px}
.stage-dock .st-stage>.st-top-actions{top:15px;left:auto;right:17px;max-width:65%;z-index:4;gap:6px}
.stage-dock .st-top-actions:empty{display:none}
.stage-dock .st-gacha,.stage-dock .st-reset,.stage-dock .st-saved-btn{font-size:10px;padding:9px 10px;border-radius:7px}
.stage-dock .st-saved-menu{z-index:25}
.stage-dock .st-tools{position:static;inset:auto;transform:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;border:0;background:none;max-width:none;width:100%;padding:0;overflow:visible}
.stage-dock .st-tools button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:auto;min-height:40px;padding:10px;border-radius:7px;background:#33203e;border:1px solid #74528e55;font-size:11px}
.stage-dock .st-tools button span{display:inline;white-space:normal;font-size:11px}
.stage-dock .st-tools button svg{width:16px;height:16px}
.stage-dock .st-tools button.on{background:#70439455;border-color:#be8ae9;color:#efd9ff}
.stage-dock .st-tools hr{display:none}
.stage-dock [data-aux-view="camera"] #h-views .tat-only,.stage-dock [data-aux-view="camera"] #h-views .sims-only,.stage-dock [data-aux-view="camera"] #h-opts,.stage-dock [data-aux-view="camera"] .tat-side-row{display:none!important}
.stage-dock [data-aux-view="tools"] .st-tools [data-view],.stage-dock [data-aux-view="tools"] .st-tools [data-cam]{display:none}
.stage-dock [data-aux-view="camera"] #h-tat-body,body:not([data-page="tattoo"]) .stage-dock #h-tat-body{display:none}
.stage-dock #h-tat-body{display:flex;flex-direction:column;gap:12px}
.stage-dock .tat-opts{position:static;inset:auto;transform:none;display:flex;flex-direction:column;gap:10px;padding:12px 0 0;width:100%;border:0;border-top:1px solid #67427e55;border-radius:0;background:none}
.stage-dock .tat-opts .tat-tool{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.stage-dock .tat-opts>.tat-tool{padding:0;border:0;border-radius:0;background:none;backdrop-filter:none}
.stage-dock .tat-opts .tat-tool[hidden]{display:none}
.stage-dock .tat-opts .tat-modes{display:flex;flex-wrap:wrap}
.stage-dock .tat-opts label{flex-wrap:wrap;width:100%;gap:7px}
.stage-dock .tat-opts label input[type="range"]{flex-basis:100%;order:3;width:100%;margin:0}
.stage-dock .tat-opts label output{margin-left:auto}
.stage-dock .tat-side-row{position:static;display:flex}
.stage-dock .tat-side-row>.st-light-btn{display:none}
.stage-dock .tat-side-row .tat-sym{position:static;flex:1;width:100%;font-size:11px}
.stage-dock .tat-side{position:static;inset:auto;transform:none;width:100%;display:flex;align-items:stretch;gap:10px;pointer-events:auto}
.stage-dock .tat-layers{width:100%;max-width:none;max-height:none;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.stage-dock .tat-list{max-height:none}
.stage-dock .tat-map{width:100%;padding:0;margin:0}
.stage-dock .tat-map .section-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px;font-size:9px;letter-spacing:1px}
.stage-dock .tat-map .link-btn{font-size:10px;padding:4px 0}
.stage-dock .tat-map .sims-cv-info{font-size:10px;line-height:1.7;color:#a487b7}
.stage-dock .tat-uv{width:100%;border-radius:9px}
.stage-dock .st-variants{position:static;inset:auto;transform:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:none;padding:0;border:0;background:none;overflow:visible}
.stage-dock .st-variants:empty{display:none}
.stage-dock .st-stage-variants::before{display:none}
.stage-dock .st-variants button{width:100%;height:auto;aspect-ratio:1;border-radius:8px}
.stage-dock .st-tint-row{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.stage-dock .st-tints{display:flex;flex-wrap:wrap;gap:10px;padding:3px}
.stage-dock .st-tints button{width:24px;height:24px}
.stage-dock .st-hex{max-width:120px;align-self:flex-start;font-size:12px}
.stage-dock .st-light{position:static;inset:auto;transform:none;display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;padding:12px;border:1px solid #75518d55;border-radius:8px;cursor:default;background:#2b1b35}
.stage-dock .st-light input{width:calc(100% - 25px);max-width:none;cursor:ew-resize}
.stage-dock .st-light-btn{display:flex;align-items:center;justify-content:center;width:100%;font-size:11px;padding:11px;border:1px solid #805a9855;background:#35203f}
.stage-dock .sd-help{font-size:11px;line-height:1.8;color:#ac8fbe;margin:0;padding:0}
.stage-dock .sd-dock{position:absolute;z-index:12;bottom:34px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;gap:4px;padding:7px;border:1px solid #9268ac77;border-radius:15px;background:#25172ff5;box-shadow:0 12px 38px #09040e66;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none}
.stage-dock .sd-dock-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:67px;padding:11px 12px;border:1px solid transparent;border-radius:9px;background:none;color:#ae91c0;font-size:10px;white-space:nowrap;flex:none;transition:background .15s,color .15s}
.stage-dock .sd-dock-button svg{width:19px;height:19px}
.stage-dock .sd-dock-button:hover{background:#b484d81c;color:#eed4ff}
.stage-dock .sd-dock-button[aria-pressed="true"]{background:#74489366;border-color:#b181d85e;color:#f2dbff}
.stage-dock .sd-dock-button[hidden]{display:none}
.stage-dock>.st-resize{display:none}
.stage-dock .sd-panel>.st-resize{display:block;position:absolute;top:46px;bottom:0;height:auto;z-index:5;width:7px}
.stage-dock .sd-panel>.st-resize.left{left:auto;right:0}
.stage-dock .sd-panel>.st-resize.right{left:0;right:auto}
.stage-dock .sd-panel>.st-resize::after{left:3px}
.sd-studio-switcher{display:flex;align-items:center;gap:5px}
.sd-studio-switcher a{padding:8px 13px;border-radius:7px;text-decoration:none;font-size:11px;color:#9e87b2;border:1px solid transparent}
.sd-studio-switcher a:hover{background:#ac79d014;color:#ead3ff}
.sd-studio-switcher a[aria-current="page"]{color:#e1b9ff;background:#a872d523;border-color:#9a67bb44}
@media(min-width:1700px){.studio.stage-dock{--sd-bottom:150px}.stage-dock .sd-panel{width:clamp(280px,var(--st-right,330px),38%)}.stage-dock .sd-panel.st-left{width:clamp(215px,var(--st-left,235px),30%)}}
@media(max-width:1100px){.stage-dock .sd-panel{width:clamp(240px,var(--st-right,270px),43%)}.stage-dock .sd-panel.st-left{width:clamp(180px,var(--st-left,195px),30%)}.stage-dock .sd-dock-button{min-width:59px;padding:10px}.stage-dock .sd-stage-tag small{display:none}.stage-dock .st-top-actions .st-reset{font-size:9px;padding:8px}}
@media(min-width:761px) and (max-height:760px){.stage-dock .sd-panel{top:60px;max-height:calc(100% - 174px)}.stage-dock .sd-panel-heading{padding:9px 12px}.stage-dock .sd-dock{bottom:27px;padding:5px}.stage-dock .sd-dock-button{padding:8px 10px;gap:5px}.studio.stage-dock{--sd-top:50px;--sd-bottom:115px}.stage-dock .sd-stage-hint{bottom:8px}.stage-dock .sd-stage-tag{top:17px}}
@media(min-width:761px) and (max-width:860px){#page-outfit,#page-hair{height:calc(100dvh - var(--topbar));padding:0 14px 14px}.studio.stage-dock{height:calc(100% - 84px)}}
@media(max-width:760px){
#page-outfit,#page-hair{height:calc(100dvh - var(--topbar));padding:0 10px 12px;min-height:580px}
.studio-page-heading{height:76px}.studio-page-heading h1{font-size:20px}
.studio-page-heading .eyebrow{font-size:8px;letter-spacing:1px}
.sd-studio-switcher{gap:0}.sd-studio-switcher a{padding:7px 8px;font-size:10px}
.studio.stage-dock{height:calc(100% - 76px);min-height:490px;--sd-top:61px;--sd-bottom:123px;border-radius:12px;overflow:hidden}
.stage-dock .sd-stage-tag{top:17px;left:14px;font-size:9px}
.stage-dock .st-stage>.st-top-actions{top:38px;left:10px;right:10px;max-width:none;justify-content:center;gap:5px}
.stage-dock .st-gacha,.stage-dock .st-reset,.stage-dock .st-saved-btn{font-size:8px;padding:7px}
.stage-dock .sd-dock{bottom:26px;left:12px;right:12px;transform:none;max-width:none;padding:5px;border-radius:12px;justify-content:flex-start;gap:1px}
.stage-dock .sd-dock-button{flex:1 0 49px;min-width:49px;padding:10px 7px;font-size:9px;gap:6px}
.stage-dock .sd-dock-button svg{width:17px;height:17px}
.stage-dock .sd-stage-hint{font-size:8px;bottom:9px;max-width:calc(100% - 20px);text-align:center}
.stage-dock .sd-panel,.stage-dock .sd-panel.st-left{position:absolute!important;top:auto!important;left:11px!important;right:11px!important;bottom:112px!important;width:auto!important;max-width:none;max-height:49%;border-radius:12px;min-height:0;z-index:9}
.stage-dock .sd-panel-heading{padding:10px 12px;cursor:default}
.stage-dock .sd-panel-title{font-size:12px}
.stage-dock .sd-panel-title>svg:first-child{display:none}
.stage-dock .sd-close{width:30px;height:30px}
.stage-dock .sd-content{padding:12px;gap:12px}
.stage-dock .sd-panel>.st-resize{display:none}
.stage-dock.sd-sheet-open{--sd-bottom:var(--sd-sheet-space,360px)}
.stage-dock.sd-sheet-open #o-viewer{--sd-top:68px}
.stage-dock .st-head{gap:10px}
.stage-dock .st-head h2{font-size:18px}
.stage-dock .st-ped-head span{font-size:10px}
.stage-dock .st-ped-head b{font-size:12px}
.stage-dock .st-ped-btn{font-size:12px;padding:11px}
.stage-dock #o-grid,.stage-dock #h-grid{grid-auto-rows:105px}
.stage-dock .st-cats{gap:6px}.stage-dock .st-cat{min-width:calc(25% - 6px)}
.stage-dock .st-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
.stage-dock .st-tools button{font-size:11px;gap:6px;padding:10px 7px}
.stage-dock .st-tools button span{font-size:10px}
.stage-dock .tat-map{max-width:270px;margin:0 auto}
.stage-dock .st-variants{grid-template-columns:repeat(4,minmax(0,1fr))}
.stage-dock .tat-opts label input[type=range]{flex-basis:100%}
.stage-dock .tat-side-row{width:100%}
.stage-dock .st-saved-menu{position:absolute;right:auto;left:50%;transform:translateX(-50%);width:min(310px,calc(100vw - 48px))}
}
