.viewer-container {
  height: 100%;
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 4px;
  padding-left: 16px;
  padding-top: 8px;
}

.code-container {
  margin: 0;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: row;
}

.line-numbers {
  padding: 0 8px;
  background: #252525;
  border-right: 1px solid #333;
  color: #858585;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
  user-select: none;
  min-width: 3em;
}

.code-block {
  display: block;
  padding: 16px;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;
  tab-size: 2;
  white-space: pre;
}

pre {
  margin: 0;
  flex: 1;
}

.file-selector {
  padding: 8px 16px;
  background: #1e1e1e;
  border-bottom: 1px solid #333;
  margin: -8px -16px 8px -16px;
  max-width: 320px;
}

.file-selector select {
  width: 100%;
  padding: 4px 8px;
  background: #3c3c3c;
  color: #d4d4d4;
  border: 1px solid #555;
  border-radius: 4px;
  font-size: 13px;
}

.file-selector select:focus {
  outline: none;
  border-color: #007fd4;
}

/* Base highlighting styles */
.hljs {
  background: transparent;
  padding: 0;
  color: #d4d4d4;
}

/* Syntax highlighting colors - VS Code Dark Theme inspired */
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569cd6;
}

.hljs-link {
  color: #569cd6;
}

.hljs-built_in,
.hljs-type {
  color: #4ec9b0;
}

.hljs-string {
  color: #ce9178;
}

.hljs-number {
  color: #b5cea8;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable {
  color: #9cdcfe;
}

.hljs-comment,
.hljs-quote {
  color: #6a9955;
}

.hljs-doctag {
  color: #608b4e;
}

.hljs-meta,
.hljs-meta-keyword {
  color: #9cdcfe;
}

.hljs-title {
  color: #dcdcaa;
}

.hljs-title.class_,
.hljs-title.class_.inherited__ {
  color: #4ec9b0;
}

.hljs-title.class_.inherited__ {
  opacity: 0.7;
}

.hljs-title.function_ {
  color: #dcdcaa;
}

.hljs-tag {
  color: #569cd6;
}

.hljs-attribute,
.hljs-selector-attr {
  color: #9cdcfe;
}

.hljs-value {
  color: #ce9178;
}

.hljs-regexp {
  color: #d16969;
}

.hljs-template-tag {
  color: #569cd6;
}

.hljs-addition {
  color: #6a9955;
}

.hljs-deletion {
  color: #d16969;
}

.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-pseudo {
  color: #d7ba7d;
}

/* Additional language-specific styles */
.hljs-subst {
  color: #d4d4d4;
}

.hljs-section {
  color: #dcdcaa;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/* Markdown specific */
.hljs-bullet {
  color: #6796e6;
}

.hljs-formula {
  color: #ce9178;
}

.hljs-params {
  color: #d4d4d4;
}

/* Template languages */
.hljs-template-variable {
  color: #9cdcfe;
}

.hljs-variable.language_ {
  color: #4ec9b0;
}

/* Shell */
.hljs-built_in {
  color: #4ec9b0;
}

.hljs-variable.constant_ {
  color: #9cdcfe;
}

/* Diff */
.hljs-addition {
  background-color: rgba(155, 185, 85, 0.2);
  color: #b5cea8;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: rgba(255, 0, 0, 0.2);
  color: #ce9178;
  display: inline-block;
  width: 100%;
}
