.cm-s-gruvbox-dark-hard.CodeMirror {
  background-color: #1d2021;
  color: #ebdbb2;
  height: 100%;
  overflow-y: auto;
}
.cm-s-gruvbox-dark-hard .CodeMirror-gutters {
  background-color: #1d2021;
  border-right: 1px solid #3c3836;
}
.cm-s-gruvbox-dark-hard .CodeMirror-guttermarker,
.cm-s-gruvbox-dark-hard .CodeMirror-guttermarker-subtle,
.cm-s-gruvbox-dark-hard .CodeMirror-linenumber {
  color: #7c6f64;
}
.cm-s-gruvbox-dark-hard .CodeMirror-cursor {
  border-left: 1px solid #ebdbb2;
}
.cm-s-gruvbox-dark-hard .CodeMirror-activeline-background {
  background-color: #3c3836;
}
.cm-s-gruvbox-dark-hard .CodeMirror-selected {
  background-color: #504945;
}
.cm-s-gruvbox-dark-hard span.cm-comment {
  color: #928374;
}
.cm-s-gruvbox-dark-hard span.cm-keyword {
  color: #fb4934;
}
.cm-s-gruvbox-dark-hard span.cm-operator {
  color: #ebdbb2;
}
.cm-s-gruvbox-dark-hard span.cm-punctuation {
  color: #a89984;
}
.cm-s-gruvbox-dark-hard span.cm-variable {
  color: #83a598;
}
.cm-s-gruvbox-dark-hard span.cm-type {
  color: #fabd2f;
}
.cm-s-gruvbox-dark-hard span.cm-def {
  color: #8ec07c;
}
.cm-s-gruvbox-dark-hard span.cm-attribute {
  color: #fe8019;
}
.cm-s-gruvbox-dark-hard span.cm-builtin {
  color: #fe8019;
}
.cm-s-gruvbox-dark-hard span.cm-string {
  color: #b8bb26;
}
.cm-s-gruvbox-dark-hard span.cm-number {
  color: #d3869b;
}
.cm-s-gruvbox-dark-hard span.cm-error {
  color: #ebdbb2;
  background-color: #fb4934;
}
.cm-s-gruvbox-dark-hard .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #ebdbb2 !important;
}
/* Ensure CodeMirror scroll container works properly */
.CodeMirror-scroll {
  height: 100%;
  overflow-y: auto !important;
  overflow-x: auto !important;
}
.CodeMirror-wrap {
  overflow: hidden;
}
/* Editor container should fill available space */
#code-editor-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#code-editor-container .CodeMirror {
  flex: 1;
  min-height: 0;
}

*::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #1d2021;
  border-radius: 4px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
/* Hide scrollbar for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #1d2021 #1d2021;
}
.object-controls {
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #3c3836;
}
.del-btn {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
  background-color: #b91c1c;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;

  :hover {
    background-color: #dc2626;
  }
}

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: #3c3836;
  border-radius: 4px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ebdbb2;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #fbf1c7;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ebdbb2;
  cursor: pointer;
}