* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #222222;
  font-family: monospace;
  color: #fff;
}

.content {
  display: flex;
  height: 100vh;
  background: #222222;
}

.left-panel {
  width: 205px;
  position: fixed;
  left: 0;
  height: 100%;
}

.right-panel {
  margin-left: 205px;
  position: fixed;
  left: 0;
}

.card {
  background: #171717;
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
}

.svg-card {
  cursor: pointer;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.button-row {
  display: flex;
  gap: 5px;
}

.tool-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.btn {
  background: #333;
  color: #fff;
  border: none;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 12px;
  cursor: pointer;
  border-radius: 0;
}

.btn:hover {
  background: #444;
}

.btn-active {
  background: #6a5acd;
  color: #fff;
}

.btn-danger {
  background: #c53030;
  color: #fff;
}

.btn-warning {
  background: #d69e2e;
  color: #000;
}

.btn-success {
  background: #38a169;
  color: #fff;
}

.btn-secondary {
  background: #333;
  color: #fff;
}

.sliders {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.slider {
  width: 100%;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  outline: none;
  border-radius: 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 20px;
  background: #888;
  cursor: pointer;
  border-radius: 0;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 20px;
  background: #888;
  cursor: pointer;
  border-radius: 0;
}

.slider-red::-webkit-slider-thumb {
  background: #e53e3e;
}

.slider-red::-moz-range-thumb {
  background: #e53e3e;
}

.slider-green::-webkit-slider-thumb {
  background: #38a169;
}

.slider-green::-moz-range-thumb {
  background: #38a169;
}

.slider-blue::-webkit-slider-thumb {
  background: #3182ce;
}

.slider-blue::-moz-range-thumb {
  background: #3182ce;
}

.slider-white::-webkit-slider-thumb {
  background: #fff;
}

.slider-white::-moz-range-thumb {
  background: #fff;
}

.number-input,
.text-input {
  background: #222;
  color: #fff;
  border: 1px solid #444;
  padding: 5px;
  font-family: monospace;
  font-size: 14px;
  width: 60px;
}

.text-input {
  width: 100px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.file-ext {
  color: #38a169;
  font-size: 14px;
}

.canvas-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dim-label {
  color: #888;
  font-size: 12px;
}