html, body { 
	margin: 0; 
	height: 100%; 
	background: #141414; 
	color: #eee; 
	font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
}

#app { 
	display: grid; 
	grid-template-rows: 2fr 3fr; 
	gap: 12px; 
	padding: 12px; 
	height: 100%; 
}

.panel { 
	background: #1b1b1b; 
	border-radius: 10px; 
	overflow: hidden; 
	position: relative; 
}

.panelHeader { 
	position: absolute; 
	left: 10px; 
	top: 10px; 
	background: rgba(0,0,0,0.55); 
	padding: 6px 8px; 
	border-radius: 8px; 
	font-size: 12px; 
	z-index: 2; 
}

#status { 
	position: fixed; 
	left: 12px; 
	bottom: 12px; 
	background: rgba(0,0,0,0.65); 
	padding: 10px 12px; 
	border-radius: 10px; 
	max-width: calc(100% - 24px); 
}

canvas { 
	width: 100%; 
	height: 100%; 
}

#glHost { 
	position: relative; 
	width: 100%; 
	height: 100%; 
}

#glHost canvas { 
    position: absolute; 
    z-index: 0; 
    inset: 0; 
    display: block; 
}

.cropOverlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: auto;
}

.cropRect {
  position: absolute;
  border: 2px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.06);
  box-sizing: border-box;
  cursor: move;
}

.cropHandle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.4);
  box-sizing: border-box;
}

.cropHandle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.cropHandle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.cropHandle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.cropHandle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }