#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.workspace{flex:1;display:grid;grid-template-columns:var(--lib-w) minmax(0,1fr) var(--props-w);min-height:0}
.stage{position:relative;min-width:0;min-height:0;background:var(--bg)}
.statusbar{height:var(--statusbar-h);display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--panel);border-top:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
.statusbar .dot{color:var(--line-strong)}
.statusbar .spacer{flex:1}
.only-mobile{display:none!important}

/* ── Responsividade básica ── */
@media (max-width:1100px){
  :root{--lib-w:236px;--props-w:252px}
}
@media (max-width:860px){
  .workspace{grid-template-columns:minmax(0,1fr);position:relative}
  .library,.props{position:absolute;top:0;bottom:0;z-index:40;box-shadow:var(--shadow-lg);transition:transform .22s ease}
  .library{left:0;width:min(300px,84vw);transform:translateX(-105%)}
  .props{right:0;width:min(320px,88vw);transform:translateX(105%)}
  body.show-left .library{transform:none}
  body.show-right .props{transform:none}
  .only-mobile{display:inline-flex!important}
  .tbtn span{display:none}
  .tbtn{padding:8px}
  .zoom-label{font-size:12px;min-width:52px}
  .brand-text small{display:none}
  .status-note{display:none}
}