/* ============================================================
   Code blocks — dark chrome + Prism token colors
   Line numbers must share font-size / line-height with code
   ============================================================ */

:root {
  --code-bg: #0f1218;
  --code-bg-elevated: #171b22;
  --code-fg: #e6edf3;
  --code-muted: #8b949e;
  --code-line: #30363d;
  --code-gutter: #6e7681;
  --code-select: rgba(56, 139, 253, 0.35);
  --code-radius: 12px;
  --code-font: "JetBrains Mono", "Cascadia Code", "Sarasa Mono SC", "Fira Code",
    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --code-size: 14px;
  --code-lh: 1.65;
  --code-pad-y: 1rem;
  --code-pad-x: 1.1rem;
  --code-gutter-w: 3.2em;
}

/* Inline code */
.post-body :not(pre) > code,
.post-page .post-body :not(pre) > code,
#main-container :not(pre) > code {
  font-family: var(--code-font) !important;
  font-size: 0.9em !important;
  font-weight: 500;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  border: 1px solid rgba(37, 99, 235, 0.16);
  padding: 0.1em 0.38em !important;
  border-radius: 5px !important;
  word-break: break-word;
}

/* Frame */
.code-frame {
  position: relative;
  margin: 1.5em 0 !important;
  border-radius: var(--code-radius);
  border: 1px solid #1f2430;
  background: var(--code-bg);
  box-shadow: 0 10px 28px rgba(15, 18, 24, 0.12);
  overflow: hidden;
  max-width: 100%;
}

.code-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px 0 14px;
  background: var(--code-bg-elevated);
  border-bottom: 1px solid var(--code-line);
  user-select: none;
}

.code-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.code-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.code-dots i:nth-child(1) { background: #ff5f57; }
.code-dots i:nth-child(2) { background: #febc2e; }
.code-dots i:nth-child(3) { background: #28c840; }

.code-lang {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--code-muted) !important;
  line-height: 1;
}

.code-toolbar .copy-btn {
  margin-left: auto;
  position: static !important;
  opacity: 1 !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: var(--code-fg) !important;
  background: transparent !important;
  border: 1px solid var(--code-line) !important;
  border-radius: 7px !important;
  cursor: pointer;
}

.code-toolbar .copy-btn:hover {
  background: rgba(147, 197, 253, 0.12) !important;
  border-color: rgba(147, 197, 253, 0.4) !important;
  color: #93c5fd !important;
}

.code-toolbar .copy-btn.is-copied {
  color: #86efac !important;
  border-color: rgba(134, 239, 172, 0.4) !important;
  background: rgba(134, 239, 172, 0.1) !important;
}

/* ---------- Pre / code shell ---------- */
.code-frame pre,
.post-body pre[class*="language-"],
.post-page .post-body pre[class*="language-"],
#main-container pre[class*="language-"],
#main-container pre {
  position: relative !important;
  margin: 0 !important;
  padding: var(--code-pad-y) var(--code-pad-x) !important;
  background: var(--code-bg) !important;
  color: var(--code-fg) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: auto !important;
  max-width: 100% !important;
  line-height: var(--code-lh) !important;
  font-size: var(--code-size) !important;
  font-family: var(--code-font) !important;
  tab-size: 2;
  -moz-tab-size: 2;
  text-shadow: none !important;
  text-align: left !important;
  white-space: pre !important;
}

#main-container pre[data-language]::before,
.code-frame pre[data-language]::before {
  content: none !important;
  display: none !important;
}

/* Mono for every node inside pre (beats body/theme font rules) */
#main-container pre,
#main-container pre *,
.code-frame pre,
.code-frame pre *,
.post-body pre,
.post-body pre * {
  font-family: var(--code-font) !important;
  font-size: var(--code-size) !important;
  line-height: var(--code-lh) !important;
  text-shadow: none !important;
}

#main-container pre code,
#main-container pre[class*="language-"] code,
.post-body pre code,
.code-frame pre code {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: var(--code-fg) !important;
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#main-container pre ::selection,
#main-container pre code ::selection,
.code-frame pre ::selection,
.code-frame pre code ::selection {
  background: var(--code-select) !important;
  color: #fff !important;
}

/* ---------- Line numbers ----------
   Hexo Prism puts .line-numbers-rows INSIDE <code>.
   Official Prism expects:
     - pre.line-numbers: counter-reset + left padding (gutter)
     - code: position:relative
     - .line-numbers-rows: absolute, left: -gutter (into the padding)
   Previous left:0 overlaid numbers on top of code ("穿插").
*/
#main-container pre.line-numbers,
.code-frame pre.line-numbers,
.post-body pre.line-numbers,
pre[class*="language-"].line-numbers {
  position: relative !important;
  /* top | right | bottom | left — reserve gutter on the left */
  padding: var(--code-pad-y) var(--code-pad-x) var(--code-pad-y)
    calc(var(--code-gutter-w) + 1em) !important;
  counter-reset: linenumber !important;
}

#main-container pre.line-numbers > code,
.code-frame pre.line-numbers > code,
.post-body pre.line-numbers > code,
pre[class*="language-"].line-numbers > code {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  white-space: inherit !important;
}

#main-container pre.line-numbers .line-numbers-rows,
.code-frame pre.line-numbers .line-numbers-rows,
.post-body pre.line-numbers .line-numbers-rows,
pre.line-numbers .line-numbers-rows {
  position: absolute !important;
  pointer-events: none !important;
  user-select: none !important;
  /* Default: rows still inside <code> → negative left into gutter */
  top: 0 !important;
  bottom: auto !important;
  left: calc(-1 * (var(--code-gutter-w) + 0.2em)) !important;
  width: var(--code-gutter-w) !important;
  border-right: 1px solid var(--code-line) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--code-size) !important;
  line-height: var(--code-lh) !important;
  font-family: var(--code-font) !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

/* After JS reparents .line-numbers-rows onto <pre> (class ln-fixed) */
#main-container pre.line-numbers.ln-fixed > .line-numbers-rows,
.code-frame pre.line-numbers.ln-fixed > .line-numbers-rows,
.post-body pre.line-numbers.ln-fixed > .line-numbers-rows,
pre.line-numbers.ln-fixed > .line-numbers-rows {
  top: var(--code-pad-y) !important;
  left: 0 !important;
}

#main-container pre.line-numbers .line-numbers-rows > span,
.code-frame pre.line-numbers .line-numbers-rows > span,
.post-body pre.line-numbers .line-numbers-rows > span,
pre.line-numbers .line-numbers-rows > span {
  display: block !important;
  counter-increment: linenumber !important;
  /* No fixed height — must match code line boxes via line-height only */
  height: auto !important;
  min-height: 0 !important;
  line-height: var(--code-lh) !important;
  font-size: var(--code-size) !important;
  font-family: var(--code-font) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

#main-container pre.line-numbers .line-numbers-rows > span::before,
.code-frame pre.line-numbers .line-numbers-rows > span::before,
.post-body pre.line-numbers .line-numbers-rows > span::before,
pre.line-numbers .line-numbers-rows > span::before {
  content: counter(linenumber) !important;
  color: var(--code-gutter) !important;
  display: block !important;
  padding-right: 0.85em !important;
  text-align: right !important;
  font-size: var(--code-size) !important;
  line-height: var(--code-lh) !important;
  font-family: var(--code-font) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* ---------- Prism tokens (high specificity, !important) ---------- */
#main-container pre .token.comment,
#main-container pre .token.prolog,
#main-container pre .token.doctype,
#main-container pre .token.cdata,
.code-frame pre .token.comment,
.code-frame pre .token.prolog,
.code-frame pre .token.doctype,
.code-frame pre .token.cdata,
.post-body pre .token.comment {
  color: #8b949e !important;
  font-style: italic !important;
}

#main-container pre .token.punctuation,
.code-frame pre .token.punctuation,
.post-body pre .token.punctuation {
  color: #c9d1d9 !important;
}

#main-container pre .token.property,
#main-container pre .token.tag,
#main-container pre .token.boolean,
#main-container pre .token.number,
#main-container pre .token.constant,
#main-container pre .token.symbol,
#main-container pre .token.deleted,
.code-frame pre .token.property,
.code-frame pre .token.tag,
.code-frame pre .token.boolean,
.code-frame pre .token.number,
.code-frame pre .token.constant,
.code-frame pre .token.symbol,
.code-frame pre .token.deleted,
.post-body pre .token.number,
.post-body pre .token.boolean {
  color: #79c0ff !important;
  font-style: normal !important;
}

#main-container pre .token.selector,
#main-container pre .token.attr-name,
#main-container pre .token.string,
#main-container pre .token.char,
#main-container pre .token.builtin,
#main-container pre .token.inserted,
.code-frame pre .token.selector,
.code-frame pre .token.attr-name,
.code-frame pre .token.string,
.code-frame pre .token.char,
.code-frame pre .token.builtin,
.code-frame pre .token.inserted,
.post-body pre .token.string {
  color: #a5d6ff !important;
  font-style: normal !important;
}

#main-container pre .token.operator,
#main-container pre .token.entity,
#main-container pre .token.url,
#main-container pre .token.variable,
.code-frame pre .token.operator,
.code-frame pre .token.entity,
.code-frame pre .token.url,
.code-frame pre .token.variable,
.post-body pre .token.operator {
  color: #ffa657 !important;
  font-style: normal !important;
}

#main-container pre .token.atrule,
#main-container pre .token.attr-value,
#main-container pre .token.function,
#main-container pre .token.class-name,
.code-frame pre .token.atrule,
.code-frame pre .token.attr-value,
.code-frame pre .token.function,
.code-frame pre .token.class-name,
.post-body pre .token.function,
.post-body pre .token.class-name {
  color: #d2a8ff !important;
  font-style: normal !important;
}

#main-container pre .token.keyword,
.code-frame pre .token.keyword,
.post-body pre .token.keyword {
  color: #ff7b72 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

#main-container pre .token.regex,
#main-container pre .token.important,
.code-frame pre .token.regex,
.code-frame pre .token.important {
  color: #7ee787 !important;
}

#main-container pre .token.annotation,
.code-frame pre .token.annotation,
.post-body pre .token.annotation {
  color: #d2a8ff !important;
}

#main-container pre .token.important,
#main-container pre .token.bold,
.code-frame pre .token.important,
.code-frame pre .token.bold {
  font-weight: 700 !important;
}

#main-container pre .token.italic,
.code-frame pre .token.italic {
  font-style: italic !important;
}

/* Scrollbar */
.code-frame pre::-webkit-scrollbar,
#main-container pre::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.code-frame pre::-webkit-scrollbar-thumb,
#main-container pre::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 999px;
  border: 2px solid var(--code-bg);
}

.code-frame pre::-webkit-scrollbar-track,
#main-container pre::-webkit-scrollbar-track {
  background: transparent;
}