/* O shell usa styles.css. Variáveis de conteúdo permanecem isoladas em .slide. */
body.carousel-page{overflow:hidden;background:#0b0c0e;color:#f3f4f6}
.carousel-page .carousel-editor-content{min-width:0;height:100dvh;overflow:hidden}
.carousel-page #app{height:100dvh;min-height:0}.carousel-page #app>header{height:66px;flex-wrap:nowrap;padding:9px 16px;background:#0d0f12;border-color:#282b32;overflow:hidden}.carousel-page #app>header .brand{min-width:148px;padding:0;gap:0;text-decoration:none}.carousel-page #app>header .brand b{color:#c8f65b}.carousel-title{min-width:120px;max-width:320px;flex:1;background:transparent;border:0;color:#f3f4f6;font:600 14px Manrope,system-ui;outline:0}.carousel-title:focus-visible{outline:2px solid #c8f65b;outline-offset:3px;border-radius:4px}.carousel-page #app .btn{background:#17191e;border-color:#282b32}.carousel-page #app .btn:hover{background:#22252b;border-color:#41454d}.carousel-page #app .btn.primary{background:#c8f65b;border-color:#c8f65b;color:#111}.carousel-page #app .btn.accent{background:#8d7dff;border-color:#8d7dff}.carousel-page #app .main{grid-template-columns:166px minmax(480px,1fr) 360px}.carousel-page #app .rail,.carousel-page #app .inspector{background:#111317;border-color:#282b32}.carousel-page #app .stage{background:#17191e;background-image:radial-gradient(#282b32 1px,transparent 1px)}.carousel-page #app .thumb.active,.carousel-page #app .gridpos button.on,.carousel-page #app .seg button.on,.carousel-page #app .wbtns button.on,.carousel-page #app .chip.on,.carousel-page #app .btn.on{border-color:#c8f65b;background:#28331b;color:#f3f4f6}.carousel-page #app :focus-visible{outline:2px solid #c8f65b;outline-offset:2px}
@media(max-width:1279px){.carousel-page #app .main{grid-template-columns:144px minmax(420px,1fr) 320px}}
@media(max-width:1050px){.carousel-page .carousel-editor-content{height:100vh}.carousel-page #app .main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 112px}.carousel-page #app .rail{grid-row:2;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:9px}.carousel-page #app .thumb{flex:0 0 88px;width:88px;height:110px;margin:0}.carousel-page #app .inspector{display:none}.carousel-page #app .stage{padding:16px}.carousel-page #app>header .swatch,.carousel-page #app>header .sep,.carousel-page #importBtn,.carousel-page #exportJsonBtn,.carousel-page #resetBtn{display:none}}
@media(max-width:767px){.carousel-page #app>header{padding:8px 10px;gap:8px}.carousel-page #app>header .brand{min-width:auto}.carousel-page #app>header .brand small{display:none}.carousel-page #tplBtn{display:none}.carousel-page #exportBtn{padding:9px 10px;font-size:12px}.carousel-title{max-width:150px}.carousel-page #app .stage{align-items:flex-start}.carousel-page #app .canvas-wrap{margin-top:12px}}

/* Editor mobile: o cabeçalho mantém as ações acessíveis e o inspetor vira uma gaveta. */
.editor-menu-btn{display:none}
.header-tools{display:contents}
.editor-menu-backdrop{display:none}
@media(max-width:1050px){
  .carousel-page .carousel-editor-content{height:100dvh}
  .carousel-page #app .main{grid-template-rows:minmax(0,1fr) calc(143px + env(safe-area-inset-bottom,0px))}
  .carousel-page #app .rail{padding:9px 9px calc(24px + env(safe-area-inset-bottom,0px));scrollbar-gutter:auto}
  .carousel-page #app>header{height:auto;min-height:66px;overflow:visible;flex-wrap:wrap;align-content:center;padding-top:max(9px,env(safe-area-inset-top,0px))}
  .carousel-page #app .header-tools{display:contents}
}
@media(max-width:767px){
  .carousel-page #app>header{padding:8px 10px;padding-top:max(9px,env(safe-area-inset-top,0px));gap:8px;align-items:center}
  .carousel-page #app>header>.editor-menu-btn{display:inline-flex;order:1;flex:0 0 auto;padding:9px 11px;min-height:42px}
  .carousel-page #app>header>.brand{order:2;min-width:0;flex:1}
  .carousel-page #app>header>.header-tools{order:3;display:flex;align-items:center;gap:8px;width:calc(100% + 20px);margin:0 -10px;padding:8px 10px 2px;overflow-x:auto;overscroll-behavior-x:contain;border-top:1px solid #24272d}
  .carousel-page #app>header>.header-tools>.sep,
  .carousel-page #app>header>.header-tools>.swatch,
  .carousel-page #app>header>.header-tools>.grow,
  .carousel-page #app>header>.header-tools>#importBtn,
  .carousel-page #app>header>.header-tools>#exportJsonBtn,
  .carousel-page #app>header>.header-tools>#resetBtn,
  .carousel-page #app>header>.header-tools>#tplBtn{display:none}
  .carousel-page #app>header>.header-tools>.carousel-title{display:block;order:-1;flex:1 0 150px;min-width:150px;max-width:none;height:42px;border:1px solid #282b32;border-radius:7px;padding:0 10px;background:#15171b}
  .carousel-page #app>header>.header-tools>.savestat{display:none}
  .carousel-page #app>header>.header-tools>.btn{min-height:42px;white-space:nowrap;padding:0 12px}
  .carousel-page #app .stage{padding:12px 10px;align-items:center}
  .carousel-page #app .canvas-wrap{margin-top:0}
  .carousel-page #app .inspector{display:block;position:fixed;z-index:30;top:0;right:0;bottom:0;width:min(88vw,380px);padding:18px 16px max(18px,env(safe-area-inset-bottom));border-left:1px solid #3a3e47;box-shadow:-18px 0 50px rgba(0,0,0,.42);transform:translateX(105%);transition:transform .22s ease;visibility:hidden}
  body.editor-menu-open #app .inspector{transform:none;visibility:visible}
  .editor-menu-backdrop{position:fixed;inset:0;z-index:25;border:0;background:rgba(3,4,6,.68);cursor:pointer}
  body.editor-menu-open .editor-menu-backdrop{display:block}
  body.editor-menu-open #app>header>.editor-menu-btn{background:#28331b;border-color:#c8f65b}
}
@media(max-width:380px){
  .carousel-page #app>header>.editor-menu-btn span{display:none}
  .carousel-page #app>header>.editor-menu-btn{padding:9px 12px}
  .carousel-page #app>header>.header-tools>.carousel-title{flex-basis:132px;min-width:132px}
}