* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #fff; color: #222; font-family: 'Segoe UI', system-ui, sans-serif; }

#header {
  position: fixed; top: 0; left: 0; right: 0; height: 44px;
  background: rgba(255,255,255,0.97); border-bottom: 1px solid #ddd;
  display: flex; align-items: center; padding: 0 24px; z-index: 100; gap: 14px;
}
#header h1 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #111; }
#header .subtitle { font-size: 11px; color: #999; }

#controls {
  margin-left: auto; display: flex; gap: 6px; align-items: center;
}
#controls button {
  background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px;
  padding: 4px 10px; font-size: 13px; cursor: pointer; color: #555;
  min-width: 30px; text-align: center;
}
#controls button:hover { background: #eee; }
#zoom-level { font-size: 11px; color: #999; min-width: 36px; text-align: center; }

#axis-panel {
  position: fixed; top: 44px; left: 0; width: 100px;
  height: calc(100vh - 44px); overflow: hidden;
  background: #fff; border-right: 1px solid #e0e0e0; z-index: 50;
}

#canvas {
  margin-top: 44px; margin-left: 100px;
  width: calc(100vw - 100px); height: calc(100vh - 44px);
  overflow: scroll; cursor: grab;
}
#canvas.dragging { cursor: grabbing; user-select: none; }
#canvas::-webkit-scrollbar { width: 0; height: 0; }
#canvas { scrollbar-width: none; }