body{font-family:sans-serif;margin:0;background:#f5f5f5;}
html,body{
  overscroll-behavior:none;    
}
canvas, .draw-layer, #uiLayer {
  touch-action: none !important;
  -webkit-touch-callout: none; 
  -webkit-user-select: none;  
  user-select: none;
}
canvas{
  touch-action:none;             
}
#canvasContainer {
  touch-action: pan-x pan-y; 
  overscroll-behavior: none; /
}
.slider{
  touch-action:pan-y;           
}
.wrap{text-align:center;margin:20px auto;}
.back-row{display:inline-block;margin-bottom:6px;}
.board-box{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:12px;text-align:left;}
h1{font-size:20px;margin:0 0 10px;text-align:center;}
.top-bar{display:flex;justify-content:center;align-items:center;margin-bottom:8px;}
.canvas-size-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  font-size:12px;
  margin:0 auto 6px auto;
  width:fit-content;
}
.canvas-size-row label{display:inline-flex;align-items:center;gap:3px;}
.canvas-size-row input[type="number"]{width:60px;padding:2px;font-size:12px;}
.canvas-size-row input[type="checkbox"]{margin:0;}
#sizeMenuBody{text-align:center;}
.size-menu-checks{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;margin:0 auto 6px auto;width:fit-content;font-size:12px;flex-wrap:nowrap;white-space:nowrap;}
.size-menu-checks label{display:inline-flex;align-items:center;gap:2px;margin:0;white-space:nowrap;line-height:1.1;}
.size-menu-comma{margin:0 2px;line-height:1.1;}
#sizeMenuBox input[type="checkbox"]{accent-color:#000!important;}
#sizeMenuHead .btn-small{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
#sizeMenuHead #applySizeBtn{margin:0 0 0 2px!important;}
#sizeMenuToggleBtn{width:auto;height:auto;min-width:22px;padding:3px 6px;line-height:1;}
.size-view-row #applyAllBtn{margin-left:2px;}


#applySizeBtn{margin-left:2px;}
.btn{display:inline-block;padding:6px 10px;border:1px solid #555;background:#333;color:#fff;border-radius:4px;font-size:13px;text-decoration:none;cursor:pointer;}
.btn:hover{background:#555;}
.layout {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.right-column {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
}

.navigator-box {
    border: 1px solid #999;
    background: #fff;
    width: 140px; 
    height: 140px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    cursor: crosshair; 
}

#navCanvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
}

#navViewportRect {
    position: absolute;
    border: 1px solid red;
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.3);
    pointer-events: none;
    display: none; 
}

.nav-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    margin-top: 4px;
}
.nav-zoom-line{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:4px 0;font-size:11px;padding:0 2px;}
.nav-zoom-label{justify-self:start;}
#zoomLevelDisplay{justify-self:center;}
.nav-zoom-percent{justify-self:end;}


.nav-btn {
    border: 1px solid #aaa;
    background: #e4e8e8;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;

    width: 26px;      
    height: 26px;
    font-size: 13px; 
    padding: 0;
    line-height: 1;  
    
    color: #000;
}
.nav-btn:hover { 
    background: #d0d4d4; 
}

.nav-btn:active {
    background: #333;
    color: #fff;
    border-color: #333;
}
.tool-column{flex:0 0 150px;display:flex;flex-direction:column;gap:8px;font-size:12px;}
.tool-section{border:1px solid #ddd;border-radius:4px;padding:6px;background:#f5f8f8;}
.section-title{font-weight:bold;font-size:11px;margin-bottom:4px;}
.size-row{display:flex;align-items:center;gap:4px;margin-bottom:3px;}
.size-row span{width:28px;font-size:11px;}
.size-row input{width:60px;font-size:11px;padding:2px;box-sizing:border-box;}
#applySizeBtn{display:block;margin:4px auto 0 auto;}
.btn-small{display:inline-block;padding:3px 6px;border:1px solid #555;background:#333;color:#fff;border-radius:3px;font-size:11px;text-decoration:none;cursor:pointer;}
.btn-small:hover{background:#555;}
.tool-btn{display:block;width:100%;margin-bottom:3px;padding:4px 6px;font-size:11px;border:1px solid #aaa;border-radius:3px;background:#e4e8e8;cursor:pointer;text-align:left;box-sizing:border-box;}
.tool-btn:last-child{margin-bottom:0;}
.tool-btn.active{background:#333;color:#fff;border-color:#333;}
.tool-btn.has-detail{position:relative;padding-right:18px;}
.tool-btn.has-detail::after{content:'▼';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:9px;}
.tool-btn.has-detail.open::after{content:'▲';}
.tool-detail{margin-top:4px;padding:4px;border-top:1px solid #ccc;background:#eef2f2;font-size:11px;}
.tool-icon{
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:4px;
  vertical-align:middle;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.icon-pen{background-image:url('img/pen.png');}
.icon-eraser{background-image:url('img/eraser.png');}
.icon-paint{background-image:url('img/paint.png');}
.icon-spoid{background-image:url('img/spoid.png');}
.icon-select{background-image:url('img/select.png');}
.icon-move{background-image:url('img/move.png');}
.tools-group{margin-top:4px;font-size:11px;}
.tools-group label{display:block;margin-bottom:4px;}
.tools-group input[type="color"]{width:100%;padding:0;border:none;background:transparent;}
.tools-group input[type="number"]{width:100%;box-sizing:border-box;font-size:11px;padding:2px;}
.tools-group input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:2px;
  background:#ddd;
  outline:none;
}
.tools-group input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border-radius:2px;
  background:transparent;
}
.tools-group input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#000;
  border:1px solid #000;
  cursor:pointer;
  margin-top:-4px;
}
.tools-group input[type="range"]::-moz-range-track{
  height:4px;
  border-radius:2px;
  background:#ddd;
}
.tools-group input[type="range"]::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#000;
  border:1px solid #000;
  cursor:pointer;
}
.tools-group select{width:100%;box-sizing:border-box;font-size:11px;padding:2px;}
.canvas-column{flex:0 0 auto;}
#canvasContainer{
  position:relative;
  max-width:1000px;
  max-height:750px;
  overflow:auto;
  border:1px solid #999;
  margin:0 auto;
  background:#ccc;
}
#transformStage{
  position:relative;
  min-width:100%;
  min-height:100%;
}
#transformAnchor{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}


#canvasWrap {
    position: relative;
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    touch-action: none !important;
    transform-origin: center center;
	overflow:hidden;
    flex:0 0 auto;
}
.draw-layer, #uiLayer {
    position: absolute;
    left: 0;
    top: 0;
    image-rendering: pixelated;
    touch-action: none; 
}
#uiLayer{touch-action: none !important;pointer-events:auto;}
.submit-row{margin-top:10px;text-align:center;}
small{font-size:11px;color:#666;}
.undo-row{display:flex;gap:4px;margin-bottom:3px;}
.undo-row .tool-btn{flex:1 1 0;width:0;min-width:0;height:26px;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;}
.layer-controls{display:flex;gap:2px;margin-top:2px;}
#layerSelect {
    display: none; 
}

.layer-controls button {
    flex: 1;
    font-size: 10px; 
    height: 20px;    
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
#layerVisList{max-height:80px;overflow-y:auto;border:1px solid #ddd;border-radius:3px;background:#fff;padding:2px;box-sizing:border-box;}
.layer-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:1px 2px 1px 0;cursor:pointer;border-left:3px solid transparent;}
.layer-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#000;}
.layer-row.clipped{border-left-color:#000;background-color:#f0f0f0;}
.layer-row.clipped .layer-name{padding-left:4px;color:#000;}
.layer-row.active{background:#dde3e3;border-radius:2px;}
.layer-eye-btn{width:16px;height:16px;flex:0 0 auto;margin-left:4px;cursor:pointer;}

html, body {
  -ms-overflow-style: none;  
  scrollbar-width: none; 
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

#canvasContainer {
  -ms-overflow-style: auto; 
  scrollbar-width: auto;  
}

#canvasContainer::-webkit-scrollbar {
  display: block;
  width: 12px; 
  height: 12px;
}
#canvasContainer::-webkit-scrollbar-thumb {
  background-color: #e4e8e8; 
  border-radius: 6px;
  border: 3px solid #ccc; 
}
#canvasContainer::-webkit-scrollbar-track {
  background-color: #f5f8f8; 
}
#resizeScaleArtwork,#viewMaxOff{accent-color:#000!important;}