:root{
  color-scheme: light only;
  --bg:#c0c0c0;
  --panel:#c0c0c0;
  --edge1:#ffffff;
  --edge2:#808080;
  --edge3:#404040;
  --blue:#000080;
  --text:#000;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font: "MS Sans Serif", Tahoma, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font);
  overflow:hidden;
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  border:2px solid var(--edge2);
  box-shadow: inset -2px -2px var(--edge3), inset 2px 2px var(--edge1);
}

.titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 4px;
  background:linear-gradient(90deg, var(--blue), #2b5bd9);
  color:#fff;
  user-select:none;
}
.titlebar-left{ display:flex; align-items:center; gap:6px; }
.app-icon{
  width:16px; height:16px;
  background:
    linear-gradient(#fff,#fff) 2px 2px/12px 1px no-repeat,
    linear-gradient(#fff,#fff) 2px 6px/12px 1px no-repeat,
    linear-gradient(#fff,#fff) 2px 10px/12px 1px no-repeat,
    linear-gradient(#fff,#fff) 2px 14px/12px 1px no-repeat;
  border:1px solid #fff8;
}
.titlebar-title{ font-size:12px; font-weight:700; text-shadow:1px 1px #0006; }
.titlebar-right{ display:flex; gap:2px; }
.winbtn{
  width:22px; height:18px;
  font-family:var(--font);
  font-size:12px;
  background:var(--panel);
  border:1px solid var(--edge2);
  box-shadow: inset -1px -1px var(--edge3), inset 1px 1px var(--edge1);
  cursor:default;
  line-height:1;
}
.winbtn:active{
  box-shadow: inset 1px 1px var(--edge3), inset -1px -1px var(--edge1);
}
.winbtn.close{ color:#800000; font-weight:800; }

.menubar{
  display:flex; gap:2px;
  padding:2px 4px;
  border-top:1px solid var(--edge2);
  border-bottom:1px solid var(--edge2);
  background:var(--panel);
}
#menuRoot{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  z-index:9998;
}
.menu-btn{
  font-size:12px;
  padding:2px 10px;
  background:transparent;
  border:1px solid transparent;
  cursor:default;
}
.menu-btn:focus{
  outline:none;
  border:1px solid var(--blue);
  background:var(--blue);
  color:#fff;
}

.menu-dd{
  position:absolute;
  z-index:9999;
  min-width:200px;
  background:var(--panel);
  border:1px solid var(--edge2);
  box-shadow: inset -1px -1px var(--edge3), inset 1px 1px var(--edge1);
  padding:2px;
}
.menu-item{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:3px 8px;
  font-size:12px;
  background:transparent;
  border:1px solid transparent;
  cursor:default;
}
.menu-item:hover{
  background:var(--blue);
  color:#fff;
  border:1px solid var(--blue);
}
.menu-sep{
  height:1px;
  margin:2px 0;
  background:var(--edge2);
  box-shadow:0 1px 0 var(--edge1);
}

.main{
  flex:1;
  display:grid;
  grid-template-columns: clamp(200px, 22vw, 260px) 1fr clamp(220px, 26vw, 300px);
  min-height:0;
  min-width:0;
}
.left,.center,.right{ min-height:0; min-width:0; }
.left,.right{ overflow:auto; }
.center{ overflow:hidden; }
.left,.right{
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--bg);
  border-right:1px solid var(--edge2);
}
.right{ border-right:none; border-left:1px solid var(--edge2); }

.center{
  background:#808080;
  padding:10px;
  min-height:0;
}
.canvas-wrap{
  height:100%;
  width:100%;
  min-height:0;
  min-width:0;
  overflow:auto;
  display:grid;
  place-items:center;
}
.checker{
  position:relative;
  padding:10px;
  background:repeating-conic-gradient(#fff 0deg 90deg, #dcdcdc 90deg 180deg);
  background-size:16px 16px;
  box-shadow: inset -2px -2px var(--edge3), inset 2px 2px var(--edge1);
}
#viewCanvas, #overlayCanvas{
  display:block;
  image-rendering:pixelated;
  box-shadow: inset -1px -1px var(--edge2), inset 1px 1px var(--edge1);
  cursor:crosshair;
}
#viewCanvas{
  background:#fff;
}
#overlayCanvas{
  background:transparent;
}
#overlayCanvas{
  position:absolute;
  left:10px; top:10px;
  pointer-events:none;
  z-index:2;
}
.text-overlay{
  position:absolute;
  left:10px; top:10px;
  min-width:140px;
  min-height:40px;
  border:1px dotted #000;
  background:#fff8;
  font-family:var(--font);
  font-size:14px;
  padding:2px;
  outline:none;
  resize:none;
  z-index:4;
}
.brush-cursor{
  position:absolute;
  width:6px;
  height:6px;
  border:1px solid #000;
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 0 1px #fff;
  z-index:3;
}

.panel{
  background:var(--panel);
  border:1px solid var(--edge2);
  box-shadow: inset -1px -1px var(--edge3), inset 1px 1px var(--edge1);
  padding:6px;
  min-height:0;
}
.panel-title{
  font-size:12px;
  font-weight:700;
  margin:0 0 6px 0;
  padding:2px 4px;
  border:1px solid var(--edge2);
  box-shadow: inset -1px -1px var(--edge3), inset 1px 1px var(--edge1);
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
}
.panel-title::after{
  content:"[-]";
  font-family:var(--mono);
  font-weight:400;
  opacity:0.8;
}
.panel.collapsed .panel-title{
  margin-bottom:0;
}
.panel.collapsed .panel-title::after{
  content:"[+]";
}
.panel.collapsed > :not(.panel-title){
  display:none;
}
.row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0;
}
.lbl{ font-size:12px; width:72px; }
.tiny{ font-size:12px; min-width:48px; text-align:right; font-family:var(--mono); }

.btn, .select{
  font-family:var(--font);
  font-size:12px;
  background:var(--panel);
  border:1px solid var(--edge2);
  box-shadow: inset -1px -1px var(--edge3), inset 1px 1px var(--edge1);
  cursor:default;
  padding:3px 8px;
}
.btn:active{
  box-shadow: inset 1px 1px var(--edge3), inset -1px -1px var(--edge1);
}
.select{ padding:2px 6px; width:100%; }

.range{ width:100%; }


.toolgrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
}
.toolbtn{
  height:30px;
  background:var(--panel);
  border:1px solid var(--edge2);
  box-shadow: inset -1px -1px var(--edge3), inset 1px 1px var(--edge1);
  cursor:default;
  position:relative;
}
.toolbtn.active{
  border:1px solid var(--blue);
  box-shadow: inset 1px 1px var(--blue), inset -1px -1px var(--edge1);
}
.toolbtn .ico{
  position:absolute;
  inset:5px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  image-rendering:pixelated;
}


.colorbox{ display:flex; flex-direction:column; gap:6px; }
.swatches{ display:flex; gap:6px; align-items:center; }
.colorchip{
  width:28px; height:22px;
  border:1px solid #000;
  box-shadow: inset -1px -1px var(--edge3), inset 1px 1px var(--edge1);
  background:#000;
}
.palette{
  display:grid;
  grid-template-columns:repeat(14, 1fr);
  gap:2px;
}
.pal{
  height:18px;
  border:1px solid #000;
  cursor:pointer;
}


.layer-toolbar{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.layer-list{
  border:1px solid var(--edge2);
  box-shadow: inset 1px 1px var(--edge3), inset -1px -1px var(--edge1);
  background:#fff;
  max-height:320px;
  overflow:auto;
}
.layer-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-bottom:1px solid #eee;
  font-size:12px;
}
.layer-row.active{ background:#dfe8ff; }
.eye{
  width:16px; height:16px;
  border:1px solid var(--edge2);
  box-shadow: inset -1px -1px var(--edge3), inset 1px 1px var(--edge1);
  background:var(--panel);
  display:grid; place-items:center;
  font-family:var(--mono);
}
.layer-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-meta{ font-family:var(--mono); font-size:11px; opacity:.8; }


.history{
  border:1px solid var(--edge2);
  box-shadow: inset 1px 1px var(--edge3), inset -1px -1px var(--edge1);
  background:#fff;
  max-height:260px;
  overflow:auto;
}
.hrow{
  padding:4px 6px;
  border-bottom:1px solid #eee;
  font-size:12px;
  cursor:default;
}
.hrow.active{ background:#dfe8ff; }


.statusbar{
  padding:4px 8px;
  font-size:12px;
  background:var(--panel);
  border-top:1px solid var(--edge2);
  box-shadow: inset 0 1px var(--edge1);
  font-family:var(--mono);
}

.dialog-backdrop{
  position:fixed;
  inset:0;
  background:#0006;
  display:grid;
  place-items:center;
  z-index:10000;
}
.dialog{
  width:min(520px, 92vw);
  background:var(--panel);
  border:2px solid var(--edge2);
  box-shadow: inset -2px -2px var(--edge3), inset 2px 2px var(--edge1);
}
.dialog .dialog-title{
  padding:3px 6px;
  background:linear-gradient(90deg, var(--blue), #2b5bd9);
  color:#fff;
  font-weight:700;
  font-size:12px;
}
.dialog .dialog-body{ padding:10px; }
.dialog .dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  padding:8px 10px 10px;
}

@media (max-width: 1100px){
  .main{ grid-template-columns: clamp(180px, 28vw, 240px) 1fr clamp(200px, 30vw, 260px); }
}
@media (max-width: 900px){
  body{ overflow:hidden; }
  .app{ height:100dvh; }
  .main{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .left,.right{
    border:none;
    max-height:40dvh;
  }
  .center{
    flex:1 1 0;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .canvas-wrap{
    flex:1 1 auto;
  }
}

@media (hover: none) and (pointer: coarse){
  .canvas-wrap,
  #viewCanvas,
  #overlayCanvas{
    touch-action: none;
    overscroll-behavior: contain;
  }
}