:root {
  --cc-toolbar-bg: #f5f0e0;
  --cc-toolbar-border: #e0d8c0;
  --cc-toolbar-text: #6b5c3e;
  --cc-copy-bg: rgba(146, 96, 14, 0.12);
  --cc-copy-hover-bg: rgba(146, 96, 14, 0.22);
  --cc-copy-border: rgba(180, 140, 60, 0.4);
  --cc-callout-info-bg: #ecfeff;
  --cc-callout-info-border: #0891b2;
  --cc-callout-info-text: #0f3d4a;
  --cc-callout-warn-bg: #fffbeb;
  --cc-callout-warn-border: #d97706;
  --cc-callout-warn-text: #78350f;
  --cc-callout-danger-bg: #fef2f2;
  --cc-callout-danger-border: #dc2626;
  --cc-callout-danger-text: #7f1d1d;
}

.markdown .cc-code-block {
  position: relative;
  margin: 1.2rem 0;
  border-radius: 0.85rem;
  overflow: hidden;
}

.markdown .cc-code-block > .cc-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--cc-toolbar-border);
  background: var(--cc-toolbar-bg);
}

.markdown .cc-code-language {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: rgba(146, 96, 14, 0.12);
  color: var(--cc-toolbar-text);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.markdown .cc-code-copy {
  appearance: none;
  border: 1px solid var(--cc-copy-border);
  border-radius: 0.5rem;
  background: var(--cc-copy-bg);
  color: #6b5c3e;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0.26rem 0.66rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.markdown .cc-code-copy:hover {
  background: var(--cc-copy-hover-bg);
}

.markdown .cc-code-copy:active {
  transform: translateY(1px);
}

.markdown .cc-code-copy.is-copied {
  border-color: rgba(134, 239, 172, 0.55);
  background: rgba(22, 163, 74, 0.14);
  color: #166534;
}

.markdown .cc-code-copy.is-error {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(220, 38, 38, 0.12);
  color: #991b1b;
}

.markdown .cc-code-block > pre,
.markdown .cc-code-block > .highlight,
.markdown .cc-code-block > .chroma,
.markdown .cc-code-block pre {
  margin: 0 !important;
  border-radius: 0 !important;
}

.markdown .callout,
.markdown blockquote.callout {
  margin: 1rem 0;
  padding: 0.82rem 0.98rem;
  border-radius: 0.72rem;
  border-left: 4px solid var(--cc-callout-info-border);
  background: var(--cc-callout-info-bg);
  color: var(--cc-callout-info-text);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.markdown .callout > :last-child,
.markdown blockquote.callout > :last-child {
  margin-bottom: 0;
}

.markdown .callout-title {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: inherit;
}

.markdown .callout.info,
.markdown .callout.callout-info,
.markdown blockquote.callout.callout-info {
  border-left-color: var(--cc-callout-info-border);
  background: var(--cc-callout-info-bg);
  color: var(--cc-callout-info-text);
}

.markdown .callout.warn,
.markdown .callout.warning,
.markdown .callout.callout-warn,
.markdown blockquote.callout.callout-warn {
  border-left-color: var(--cc-callout-warn-border);
  background: var(--cc-callout-warn-bg);
  color: var(--cc-callout-warn-text);
}

.markdown .callout.danger,
.markdown .callout.callout-danger,
.markdown blockquote.callout.callout-danger {
  border-left-color: var(--cc-callout-danger-border);
  background: var(--cc-callout-danger-bg);
  color: var(--cc-callout-danger-text);
}

/* 深色模式 — 代码工具栏恢复深色 */
html.book-color-scheme-dark .markdown .cc-code-block > .cc-code-toolbar,
html[data-theme="dark"] .markdown .cc-code-block > .cc-code-toolbar,
.dark .markdown .cc-code-block > .cc-code-toolbar {
  background: rgba(15, 23, 42, 0.9);
  border-bottom-color: #2a3b58;
}

html.book-color-scheme-dark .markdown .cc-code-language,
html[data-theme="dark"] .markdown .cc-code-language,
.dark .markdown .cc-code-language {
  background: rgba(148, 163, 184, 0.2);
  color: #dbe7ff;
}

html.book-color-scheme-dark .markdown .cc-code-copy,
html[data-theme="dark"] .markdown .cc-code-copy,
.dark .markdown .cc-code-copy {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(148, 197, 255, 0.4);
  color: #dbeafe;
}

html.book-color-scheme-dark .markdown .cc-code-copy:hover,
html[data-theme="dark"] .markdown .cc-code-copy:hover,
.dark .markdown .cc-code-copy:hover {
  background: rgba(37, 99, 235, 0.34);
}

html.book-color-scheme-dark .markdown .cc-code-copy.is-copied,
html[data-theme="dark"] .markdown .cc-code-copy.is-copied,
.dark .markdown .cc-code-copy.is-copied {
  border-color: rgba(134, 239, 172, 0.55);
  background: rgba(22, 163, 74, 0.24);
  color: #dcfce7;
}

html.book-color-scheme-dark .markdown .cc-code-copy.is-error,
html[data-theme="dark"] .markdown .cc-code-copy.is-error,
.dark .markdown .cc-code-copy.is-error {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(220, 38, 38, 0.28);
  color: #fee2e2;
}

/* 深色模式 — Callout */
html.book-color-scheme-dark .markdown .callout.info,
html.book-color-scheme-dark .markdown .callout.callout-info,
html.book-color-scheme-dark .markdown blockquote.callout.callout-info,
html[data-theme="dark"] .markdown .callout.info,
html[data-theme="dark"] .markdown .callout.callout-info,
html[data-theme="dark"] .markdown blockquote.callout.callout-info,
.dark .markdown .callout.info,
.dark .markdown .callout.callout-info,
.dark .markdown blockquote.callout.callout-info {
  background: rgba(14, 116, 144, 0.18);
  border-left-color: #38bdf8;
  color: #bfdbfe;
}

html.book-color-scheme-dark .markdown .callout.warn,
html.book-color-scheme-dark .markdown .callout.warning,
html.book-color-scheme-dark .markdown .callout.callout-warn,
html.book-color-scheme-dark .markdown blockquote.callout.callout-warn,
html[data-theme="dark"] .markdown .callout.warn,
html[data-theme="dark"] .markdown .callout.warning,
html[data-theme="dark"] .markdown .callout.callout-warn,
html[data-theme="dark"] .markdown blockquote.callout.callout-warn,
.dark .markdown .callout.warn,
.dark .markdown .callout.warning,
.dark .markdown .callout.callout-warn,
.dark .markdown blockquote.callout.callout-warn {
  background: rgba(180, 83, 9, 0.2);
  border-left-color: #f59e0b;
  color: #fde68a;
}

html.book-color-scheme-dark .markdown .callout.danger,
html.book-color-scheme-dark .markdown .callout.callout-danger,
html.book-color-scheme-dark .markdown blockquote.callout.callout-danger,
html[data-theme="dark"] .markdown .callout.danger,
html[data-theme="dark"] .markdown .callout.callout-danger,
html[data-theme="dark"] .markdown blockquote.callout.callout-danger,
.dark .markdown .callout.danger,
.dark .markdown .callout.callout-danger,
.dark .markdown blockquote.callout.callout-danger {
  background: rgba(153, 27, 27, 0.25);
  border-left-color: #f87171;
  color: #fecaca;
}

@media (max-width: 960px) {
  .markdown .cc-code-language {
    font-size: 0.7rem;
  }
}