@media(max-width:850px){
 html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 header{height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0;gap:5px;position:relative;z-index:120;box-shadow:0 2px 14px #0006}
 header strong{font-size:14px;white-space:nowrap;letter-spacing:-.5px}header .grow{min-width:0}
 .top-action,.mobile-toggle{min-width:35px;min-height:36px;padding:6px!important;border-radius:11px;font-size:17px!important}
 .layout{height:calc(100dvh - 52px - env(safe-area-inset-top));display:block;position:relative}
 .workspace{position:absolute;inset:0;touch-action:none}
 .tools{position:absolute;z-index:80;left:6px;top:8px;bottom:100px;width:49px;max-height:none;overflow-y:auto;overflow-x:hidden;padding:5px 3px;gap:5px;border:1px solid #44465d;border-radius:16px;background:#1b1d2beF;box-shadow:0 8px 28px #0007;scrollbar-width:none}
 .tools::-webkit-scrollbar{display:none}.tools button{min-height:43px;flex:0 0 43px;border-radius:11px;font-size:19px;padding:4px 0}.tools small{font-size:8px;line-height:1.1;margin-top:0}
 .sidebar{position:fixed;top:calc(52px + env(safe-area-inset-top));right:0;bottom:0;width:min(340px,90vw);z-index:180;border-radius:17px 0 0 0;box-shadow:-15px 0 45px #000b;padding-bottom:env(safe-area-inset-bottom)}
 .floating-controls{position:fixed!important;z-index:110;left:50%!important;right:auto!important;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom))!important;width:max-content;max-width:calc(100vw - 68px);padding:5px!important;border-radius:15px;flex-wrap:nowrap;box-shadow:0 7px 30px #000a}
 .floating-controls input{width:clamp(48px,15vw,100px)!important}.floating-controls button{min-width:32px!important;height:33px!important;padding:5px!important}
 .status{left:61px!important;bottom:74px!important;font-size:10px!important;max-width:calc(100vw - 75px);padding:5px 8px}
 .anim-panel{position:fixed;z-index:105;left:59px;right:6px;bottom:calc(64px + env(safe-area-inset-bottom));max-height:min(38dvh,255px);overflow-y:auto;padding:9px;border-radius:14px;background:#191d2df7}
 .anim-panel.mobile-closed{display:none}.anim-bar{gap:5px}.anim-bar b{width:100%;font-size:12px}.anim-bar button{font-size:11px;min-height:34px}.anim-bar label{display:flex;align-items:center;gap:4px}
 .frames{margin-top:6px}.frame{flex-basis:69px}.frame canvas{width:56px;height:42px}
 .mobile-anim-button{position:fixed;z-index:115;right:8px;bottom:calc(67px + env(safe-area-inset-bottom));border:1px solid #9d83ff;background:#292341;box-shadow:0 6px 20px #0009;border-radius:12px;min-width:45px;height:40px;font-size:19px}
 .settings-dialog{max-height:90dvh}.canvas-wrap{box-shadow:0 12px 42px #0009}
}
@media(max-width:390px){header strong{font-size:12px}.top-action,.mobile-toggle{min-width:31px;padding:4px!important}.brand-icon{display:none}.tools{width:45px}.floating-controls{max-width:calc(100vw - 58px)}}
@media(min-width:851px){.mobile-anim-button{display:none}}

/* Zoom de precisão: pixels nítidos, sem suavização, em ampliações extremas */
.canvas-wrap.pixel-zoom canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.zoom-dock{position:absolute;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #45445c;background:#171925e8;border-radius:13px;box-shadow:0 4px 20px #0006}
.zoom-dock button{min-width:34px;height:35px;padding:5px 8px;font-weight:700}
.zoom-dock #zoomQuickLabel{min-width:66px;font-size:12px;font-variant-numeric:tabular-nums}
@media(max-width:850px){.zoom-dock{right:7px;bottom:58px}.zoom-dock button{height:32px;min-width:32px}.zoom-dock #zoomQuickLabel{min-width:58px}}