#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}
.save-state{margin-left:6px;font-weight:600}
.status-cost{margin-left:6px;padding:1px 9px;border-radius:99px;background:#dcfce7;color:#166534;font-weight:700;font-variant-numeric:tabular-nums}
.status-totals{margin-left:6px;padding:1px 9px;border-radius:99px;background:#fef3c7;color:#92400e;font-weight:700;font-variant-numeric:tabular-nums}
.save-state::before{content:"✓ ";color:#16a34a}
.save-state.warn{color:#b45309}.save-state.warn::before{content:"! "}
.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}
}
/* ── Modo embed (editor dentro de artigos: /pt/embed.html) ── */
.embed-only{display:none!important}
html[data-embed] .embed-only{display:inline-flex!important}
html[data-embed] #start-screen,html[data-embed] [data-suggestions],html[data-embed] #lang-select,
html[data-embed] #btn-new,html[data-embed] #btn-makers,html[data-embed] #btn-open,html[data-embed] #btn-share,html[data-embed] #btn-blog,html[data-embed] #btn-blog-en,
html[data-embed] #item-count,html[data-embed] .statusbar,html[data-embed] .brand-text small{display:none!important}
html[data-embed] #btn-open-full span{display:inline!important}
html[data-embed] .stage-hint,html[data-embed] #tool-minimap{display:none}
@media (max-width:560px){html[data-embed] .brand-text{display:none}}
/* Celular/tablet: painéis recolhidos (translateX) não geram rolagem lateral e
   a barra superior mantém só o essencial (Sugestões segue na tela inicial). */
@media (max-width:860px){
  .workspace{overflow:hidden}
  .toolbar-side [data-suggestions]{display:none}
}
/* A contagem de itens também aparece na barra de status: some da barra
   superior abaixo de 1440px para caber Tutoriais sem cortar os grupos. */
@media (max-width:1440px){
  #item-count{display:none}
  .toolbar-side .lang-select{max-width:150px}
}
@media (max-width:560px){
  .toolbar{gap:6px;padding:0 8px}
  .toolbar .brand-text{display:none}
  .toolbar-side .lang-select{max-width:64px}
}
/* Telas médias: botões secundários só com ícone (o title continua como dica). */
@media (max-width:1366px){#btn-new span,#btn-open span,#btn-save span{display:none}}
@media (max-width:1100px){#btn-present span,#btn-share span,#btn-blog span,#btn-blog-en span{display:none}.toolbar .tsep{margin:0 3px}}