/* UI-092 — BACKSTAGE MENUS. Apresentação sobre UI-087/089, sem mexer no bridge.
   Desktop: seletor de ferramentas e flyout do rail. Mobile: drawer agrupado.
   Respeita teclado, toque e preferência por movimento reduzido. */
@media(min-width:931px){
 .studio-nav{z-index:60}

 .studio-subnav-shell:not([hidden]){
  position:relative;z-index:42;display:flex;align-items:center;
  width:max-content;max-width:100%;min-height:52px;margin:0 0 16px;
  padding:5px;border:1px solid #526c50;border-radius:14px;
  background:linear-gradient(130deg,#202d22,#162019);
  box-shadow:0 7px 21px #020b0540;
 }
 .studio-subnav-toggle:not([hidden]){
  display:flex;align-items:center;justify-content:space-between;gap:17px;
  min-width:205px;max-width:100%;min-height:40px;padding:8px 13px;
  border:0;border-radius:10px;color:#e9f6e0;background:transparent;
  font-size:.84rem;font-weight:850;text-align:left;
 }
 .studio-subnav-toggle:not([hidden])::before{
  content:"FERRAMENTA";color:#97bb89;letter-spacing:.1em;
  font-size:.59rem;font-weight:900;margin-right:6px;
 }
 .studio-subnav-toggle:hover,.studio-subnav-toggle[aria-expanded=true]{background:#344839}
 .studio-subnav-toggle svg{width:17px;height:17px;flex:none;transition:transform .18s ease}
 .studio-subnav-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
 #studio-subnav:not([hidden]){
  display:none;position:absolute;top:calc(100% + 7px);left:0;
  flex-direction:column;gap:5px;width:min(310px,calc(100vw - 32px));
  margin:0;padding:8px;min-height:0;max-height:min(62dvh,420px);
  overflow:auto;overscroll-behavior:contain;
  border:1px solid #718967;border-radius:13px;
  background:#17271c;box-shadow:0 20px 46px #000a;
 }
 body[data-subnav-expanded=true] #studio-subnav:not([hidden]){display:flex}
 #studio-subnav button{width:100%;min-height:42px;text-align:left;border-radius:9px;white-space:normal}
 .studio-nav .ofc-context-flyout:not([hidden]){
  position:absolute;z-index:85;
  left:calc(100% + 9px);top:var(--ofc-flyout-y,60px);
  display:grid;gap:6px;width:272px;padding:14px;
  border:1px solid #758e6e;border-radius:16px;
  background:linear-gradient(152deg,#203525,#121d16 80%);
  box-shadow:0 20px 56px #000c,0 0 0 1px #ffffff08 inset;
  color:#eff9e8;animation:ofc-menu-in .17s ease both;
 }
 .ofc-context-flyout .ofc-flyout-kicker{
  margin:0;color:#add18f;font-size:.62rem;letter-spacing:.12em;font-weight:900;
 }
 .ofc-context-flyout strong{font-size:1.04rem;line-height:1.2}
 .ofc-context-flyout .ofc-flyout-copy{
  margin:0 0 6px;color:#b6cbb3;font-size:.74rem;line-height:1.45;
 }
 .ofc-flyout-links{display:grid;gap:4px}
 .ofc-flyout-links button{
  display:flex;align-items:center;justify-content:space-between;
  min-height:37px;width:100%;padding:7px 10px;
  color:#e9f5df;background:#2a4030;border:1px solid transparent;
  border-radius:9px;text-align:left;font-size:.78rem;font-weight:750;
 }
 .ofc-flyout-links button::after{content:"↗";color:#9bcf88;font-size:.9rem}
 .ofc-flyout-links button:hover,
 .ofc-flyout-links button:focus-visible{border-color:#a6dc8b;background:#3b593f}
 .studio-nav .hub-nav-button{transition:background .16s ease,transform .16s ease}
 .studio-nav .hub-nav-button:not(.active):hover{transform:translateX(2px)}
 .studio-nav .hub-nav-button[aria-expanded=true]:not(.active){background:#324a37;border-color:#5d8561}
 .studio-nav .hub-nav-button[title]:hover::after{display:none}
}
@media(max-width:930px){
 .studio-mobile-drawer:not([hidden]){box-shadow:0 18px 66px #000b}
 .mobile-drawer-list .ofc-drawer-group{
  margin:4px 0;overflow:hidden;
  border:1px solid #4e6e50;border-radius:12px;
  background:#1b2c21;
 }
 .mobile-drawer-list .ofc-drawer-group summary{
  display:flex;align-items:center;justify-content:space-between;
  min-height:47px;padding:10px 12px;list-style:none;
  color:#dcf0d6;font-size:.83rem;font-weight:900;cursor:pointer;
 }
 .mobile-drawer-list .ofc-drawer-group summary::-webkit-details-marker{display:none}
 .mobile-drawer-list .ofc-drawer-group summary::after{
  content:"⌄";font-size:1.1rem;color:#a9d596;transition:transform .15s ease;
 }
 .mobile-drawer-list .ofc-drawer-group[open] summary::after{transform:rotate(180deg)}
 .mobile-drawer-list .ofc-drawer-tools{display:grid;gap:4px;padding:0 7px 8px}
 .mobile-drawer-list .ofc-drawer-tools button{min-height:41px}
 .mobile-drawer-list .ofc-drawer-tools button[data-active=true]{
  background:#394d33;border-color:var(--studio-accent);
 }
 .mobile-drawer-list .ofc-drawer-group summary:focus-visible{outline:2px solid var(--studio-accent);outline-offset:-3px}
 .studio-mobile-bottom button:not([data-active=true]):active{background:#35543b}
}
.studio-screen:not([hidden])>.screen-title{animation:ofc-screen-in .22s ease both}
.studio-btn:not(:disabled){transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
@media(hover:hover) and (pointer:fine){
 .studio-btn:not(:disabled):hover{transform:translateY(-1px)}
 .studio-screen .studio-card{transition:border-color .2s ease,box-shadow .2s ease}
 .studio-screen .studio-card:hover{border-color:#678765;box-shadow:0 12px 30px #0004}
}
body[data-panel-theme=light] .studio-subnav-shell:not([hidden]){background:#f5faf2;border-color:#abc2a2}
body[data-panel-theme=light] .studio-subnav-toggle{color:#28412e}
body[data-panel-theme=light] .studio-subnav-toggle::before{color:#587a55}
body[data-panel-theme=light] .studio-subnav-toggle:hover{background:#e5f0e1}
body[data-panel-theme=light] .studio-nav .ofc-context-flyout:not([hidden]){background:#f9fcf6;color:#233d27;border-color:#a6c49b;box-shadow:0 18px 38px #15261833}
body[data-panel-theme=light] .ofc-context-flyout .ofc-flyout-copy{color:#506c51}
body[data-panel-theme=light] .ofc-context-flyout .ofc-flyout-kicker{color:#3b7948}
body[data-panel-theme=light] .ofc-flyout-links button{background:#ebf5e8;color:#22412b}
body[data-panel-theme=light] .ofc-flyout-links button:hover{background:#d8e9d2}
body[data-panel-theme=light] .mobile-drawer-list .ofc-drawer-group{background:#f1f8ee;border-color:#b3c8ae}
body[data-panel-theme=light] .mobile-drawer-list .ofc-drawer-group summary{color:#26472d}
body[data-panel-theme=light] .mobile-drawer-list .ofc-drawer-tools button[data-active=true]{background:#dceecf}
@keyframes ofc-menu-in{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ofc-screen-in{from{opacity:.7;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
 .studio-screen:not([hidden])>.screen-title,.studio-nav .ofc-context-flyout:not([hidden]){animation:none}
 .studio-btn:not(:disabled),.studio-screen .studio-card,
 .studio-nav .hub-nav-button,.ofc-drawer-group summary::after,
 .studio-subnav-toggle svg{transition:none!important}
}