.fc-editor {
  width: 98vw;
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 16px;
  position: relative;
}
.fc-editor #fc-canvas {
  display: block;
  cursor: crosshair;
}
.fc-editor .canvas-container {
  grid-area: 1/1/1/6;
  background: rgb(249, 243, 234);
  border: 1px solid orange;
  border-radius: 2px;
  overflow: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.fc-editor .canvas-controls {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 2em;
  gap: 8px;
}
.fc-editor .materials-editor {
  position: absolute;
  width: 100%;
  grid-area: 1/4/1/6;
  z-index: 30;
  margin-top: 4px;
  padding: 8px;
  background-color: rgb(227, 238, 234);
  border: 1px solid rgb(46, 45, 43);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.fc-editor .materials-editor fieldset {
  border: none;
  padding: 0;
}
.fc-editor .materials-editor-hidden {
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease-in-out, z-index 0s 0.5s;
}
.fc-editor .materials-editor-visible {
  z-index: 30;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.fc-editor .instruction {
  position: absolute;
  width: 100%;
  grid-area: 1/2/1/4;
  margin-top: 4px;
  padding: 8px;
  background-color: rgb(227, 238, 234);
  border: 1px solid rgb(46, 45, 43);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.fc-editor .instruction-hidden {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, z-index 0s 0.5s;
}
.fc-editor .instruction-visible {
  z-index: 40;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.canvas-controls button {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background: #f8f9fa;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.canvas-controls button:not(:disabled):hover {
  background: #f2f0ed;
  border-color: orange;
  transition: all 0.7s ease;
}
.canvas-controls button:active {
  background: #e9ecef;
  transition: all 0.7s ease;
}
.canvas-controls button:disabled {
  background: #f8f9fa;
  color: #999;
  cursor: not-allowed;
  transition: all 0.7s ease;
}
.canvas-controls .showMaterialsButtonActive, .canvas-controls .showInstructionButtonActive {
  background: rgb(227, 238, 234);
}

#fc-add-material-button button {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background: #f8f9fa;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#fc-add-material-button button:hover {
  background: #f2f0ed;
  border-color: orange;
  transition: all 0.7s ease;
}

#fc-instruction button {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background: #f8f9fa;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#fc-instruction button:hover {
  background: #f2f0ed;
  border-color: orange;
  transition: all 0.7s ease;
}

.line-info {
  margin-bottom: 16px;
}

.form-section {
  margin-bottom: 16px;
}

.form-row {
  margin-bottom: 12px;
}

.form-row label {
  font-size: 14px;
  font-weight: 500;
}

.form-row input {
  padding: 8px 12px;
  width: 55px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

#fc-widget {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
}