/* Tokyo Night 主题 - 代码高亮 */

/* 背景 */
figure.highlight,
pre {
  background-color: #1a1b26 !important;
  border-radius: 8px !important;
}

/* 代码容器 */
.highlight pre {
  background-color: #1a1b26 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  border-radius: 8px !important;
}

/* 行号 */
.gutter {
  background-color: #16161e !important;
  border-right: 1px solid #414868 !important;
  padding-right: 12px !important;
  margin-right: 12px !important;
  text-align: right !important;
  user-select: none !important;
}

.gutter pre .line {
  color: #565f89 !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* 代码行 */
td.code {
  padding-left: 12px !important;
}

td.code .line {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #c0caf5 !important;
}

/* Highlight.js 语法高亮颜色 */

/* 关键字 */
pre .hljs-keyword,
pre .hljs-built_in,
pre .hljs-type,
pre .hljs-literal,
pre .hljs-symbol,
code .hljs-keyword,
code .hljs-built_in,
code .hljs-type,
code .hljs-literal,
code .hljs-symbol,
.hljs-keyword,
.hljs-built_in,
.hljs-type,
.hljs-literal,
.hljs-symbol {
  color: #bb9af7 !important;
  font-weight: bold !important;
}

/* 字符串 */
pre .hljs-string,
pre .hljs-attr-value,
code .hljs-string,
code .hljs-attr-value,
.hljs-string,
.hljs-attr-value {
  color: #9ece6a !important;
}

/* 注释 */
pre .hljs-comment,
pre .hljs-meta,
code .hljs-comment,
code .hljs-meta,
.hljs-comment,
.hljs-meta {
  color: #565f89 !important;
  font-style: italic !important;
}

/* 函数 */
pre .hljs-function,
pre .hljs-title,
code .hljs-function,
code .hljs-title,
.hljs-function,
.hljs-title {
  color: #7aa2f7 !important;
}

/* 数字 */
pre .hljs-number,
code .hljs-number,
.hljs-number {
  color: #ff9e64 !important;
}

/* 运算符 */
pre .hljs-operator,
pre .hljs-punctuation,
code .hljs-operator,
code .hljs-punctuation,
.hljs-operator,
.hljs-punctuation {
  color: #89ddff !important;
}

/* 类名 */
pre .hljs-class,
code .hljs-class,
.hljs-class {
  color: #c0caf5 !important;
}

/* 属性 */
pre .hljs-property,
pre .hljs-attribute,
pre .hljs-name,
code .hljs-property,
code .hljs-attribute,
code .hljs-name,
.hljs-property,
.hljs-attribute,
.hljs-name {
  color: #f7768e !important;
}

/* 标签 */
pre .hljs-tag,
code .hljs-tag,
.hljs-tag {
  color: #f7768e !important;
}

/* 常量 */
pre .hljs-constant,
code .hljs-constant,
.hljs-constant {
  color: #e0af68 !important;
}

/* 变量 */
pre .hljs-variable,
code .hljs-variable,
.hljs-variable {
  color: #c0caf5 !important;
}

/* 参数 */
pre .hljs-params,
code .hljs-params,
.hljs-params {
  color: #c0caf5 !important;
}

/* 伪类 */
pre .hljs-selector-tag,
pre .hljs-selector-id,
pre .hljs-selector-class,
code .hljs-selector-tag,
code .hljs-selector-id,
code .hljs-selector-class,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class {
  color: #f7768e !important;
}

/* 选择器属性 */
pre .hljs-selector-pseudo,
pre .hljs-selector-attr,
code .hljs-selector-pseudo,
code .hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-selector-attr {
  color: #bb9af7 !important;
}

/* 正则表达式 */
pre .hljs-regexp,
code .hljs-regexp,
.hljs-regexp {
  color: #ff9e64 !important;
}

/* 删除线 */
pre .hljs-deletion,
code .hljs-deletion,
.hljs-deletion {
  background-color: #f7768e40 !important;
  color: #f7768e !important;
}

/* 添加线 */
pre .hljs-addition,
code .hljs-addition,
.hljs-addition {
  background-color: #9ece6a40 !important;
  color: #9ece6a !important;
}

/* 强调 */
pre .hljs-emphasis,
code .hljs-emphasis,
.hljs-emphasis {
  font-style: italic !important;
}

pre .hljs-strong,
code .hljs-strong,
.hljs-strong {
  font-weight: bold !important;
}

/* 代码块标题栏 */
.highlight figcaption {
  background-color: #16161e !important;
  border-bottom: 1px solid #414868 !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  color: #565f89 !important;
}

/* 复制按钮 */
code-copy-btn,
.copy-button {
  color: #565f89 !important;
  background-color: transparent !important;
  border: 1px solid #565f89 !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}

code-copy-btn:hover,
.copy-button:hover {
  color: #7aa2f7 !important;
  border-color: #7aa2f7 !important;
  background-color: rgba(122, 162, 247, 0.1) !important;
}