.code-block {
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Fira Code", monospace;
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 1rem 0;
  overflow: auto;
  border-radius: 0.6rem;
  padding: 1rem;
  background: linear-gradient(180deg,#0b1220 0%, #06101a 100%);
  color: #e6eef8;
  border-left: 4px solid rgba(99,102,241,0.95);
  box-shadow: 0 8px 24px rgba(2,6,23,0.55);
}

.code-block code {
  display: block;
  white-space: pre;
  tab-size: 4;
  hyphens: none;
}

.code-block::before{
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .18rem .5rem;
  border-radius: .35rem;
  background: rgba(0,0,0,0.25);
  color: #ffffff;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.05);
}

@media (max-width: 640px) {
  .code-block { font-size: .9rem; padding: .85rem; }
  .code-block::before { top: 8px; right: 8px; font-size: .68rem; }
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: #6b7280; font-style: italic; }

.token.selector,
.token.tag,
.token.operator,
.token.punctuation { color: #c7d2fe; }

.token.property,
.token.attr-name,
.token.boolean,
.token.number,
.token.constant,
.token.symbol { color: #fef08a; }

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable { color: #86efac; }

.token.function,
.token.class-name { color: #93c5fd; font-weight: 600; }

.token.keyword,
.token.important { color: #fb923c; font-weight: 700; }


.code-block code span { line-height: 1.45; }

.code-block:focus-within, .code-block:focus {
  outline: 3px solid rgba(99,102,241,0.18);
  outline-offset: 3px;
}

.code-block ::selection {
  background: rgba(255,255,255,0.08);
}

.code-block.language-rust { border-left-color: #ff7ab6; }
.code-block.language-java { border-left-color: #ff7ab6; }
.code-block.language-toml { border-left-color: #7ee787; }
.code-block.language-gradle { border-left-color: #7ee787; }