/**
 * Mika code highlight — 4 themes:
 *   default  默认（冷静浅色）
 *   sunlight 日光（暖纸浅色）
 *   mac      苹果（深灰终端）
 *   twilight 暮光（紫蓝暗色）
 *
 * Theme class on <pre>: {id}-theme
 */

/* —— Shared tokens (fallback = default) —— */
:root {
	--mika-code-bg: #f6f8fa;
	--mika-code-fg: #1f2328;
	--mika-code-border: rgba(31, 35, 40, 0.12);
	--mika-code-header-bg: rgba(31, 35, 40, 0.04);
	--mika-code-header-fg: #656d76;
	--mika-code-toolbar-bg: #ffffff;
	--mika-code-toolbar-fg: #424a53;
	--mika-code-toolbar-border: rgba(31, 35, 40, 0.14);
	--mika-code-line-number: #8c959f;
	--mika-code-line-border: rgba(31, 35, 40, 0.1);
	--mika-code-selection: rgba(9, 105, 218, 0.22);
	--mika-code-token-comment: #6e7781;
	--mika-code-token-punctuation: #656d76;
	--mika-code-token-tag: #0550ae;
	--mika-code-token-attr: #953800;
	--mika-code-token-string: #0a3069;
	--mika-code-token-keyword: #cf222e;
	--mika-code-token-function: #8250df;
	--mika-code-token-number: #0550ae;
	--mika-code-token-operator: #656d76;
	--mika-code-token-variable: #953800;
	--mika-code-token-regex: #116329;
}

/* 1 · 默认 Default — cool light */
pre.mika-highlightjs.default-theme,
pre.moe-highlightjs.default-theme,
div.code-toolbar:has(> pre.default-theme) {
	--mika-code-bg: #f6f8fa;
	--mika-code-fg: #1f2328;
	--mika-code-border: rgba(31, 35, 40, 0.12);
	--mika-code-header-bg: rgba(31, 35, 40, 0.045);
	--mika-code-header-fg: #656d76;
	--mika-code-toolbar-bg: #ffffff;
	--mika-code-toolbar-fg: #424a53;
	--mika-code-toolbar-border: rgba(31, 35, 40, 0.14);
	--mika-code-line-number: #8c959f;
	--mika-code-line-border: rgba(31, 35, 40, 0.1);
	--mika-code-selection: rgba(9, 105, 218, 0.22);
	--mika-code-token-comment: #6e7781;
	--mika-code-token-punctuation: #656d76;
	--mika-code-token-tag: #0550ae;
	--mika-code-token-attr: #953800;
	--mika-code-token-string: #0a3069;
	--mika-code-token-keyword: #cf222e;
	--mika-code-token-function: #8250df;
	--mika-code-token-number: #0550ae;
	--mika-code-token-operator: #656d76;
	--mika-code-token-variable: #953800;
	--mika-code-token-regex: #116329;
}

/* 2 · 日光 Sunlight — warm paper light */
pre.mika-highlightjs.sunlight-theme,
pre.moe-highlightjs.sunlight-theme,
div.code-toolbar:has(> pre.sunlight-theme) {
	--mika-code-bg: #fbf6ea;
	--mika-code-fg: #3b2f2a;
	--mika-code-border: rgba(120, 80, 40, 0.16);
	--mika-code-header-bg: rgba(140, 90, 40, 0.08);
	--mika-code-header-fg: #8a6a4a;
	--mika-code-toolbar-bg: #fffaf0;
	--mika-code-toolbar-fg: #5c4030;
	--mika-code-toolbar-border: rgba(120, 80, 40, 0.18);
	--mika-code-line-number: #b08968;
	--mika-code-line-border: rgba(120, 80, 40, 0.14);
	--mika-code-selection: rgba(200, 120, 40, 0.22);
	--mika-code-token-comment: #9a7b5a;
	--mika-code-token-punctuation: #7a5c48;
	--mika-code-token-tag: #0b6e4f;
	--mika-code-token-attr: #9a3412;
	--mika-code-token-string: #9f1239;
	--mika-code-token-keyword: #b45309;
	--mika-code-token-function: #7c3aed;
	--mika-code-token-number: #0369a1;
	--mika-code-token-operator: #7a5c48;
	--mika-code-token-variable: #9a3412;
	--mika-code-token-regex: #15803d;
}

/* 3 · 苹果 Mac — 窗口红绿灯 + Monokai 鲜艳配色（对齐常见 Mac 代码块观感） */
pre.mika-highlightjs.mac-theme,
pre.moe-highlightjs.mac-theme,
div.code-toolbar:has(> pre.mac-theme) {
	--mika-code-bg: #272822;
	--mika-code-fg: #f8f8f2;
	--mika-code-border: rgba(255, 255, 255, 0.08);
	--mika-code-header-bg: #1e1f1c;
	--mika-code-header-fg: #66d9ef;
	--mika-code-toolbar-bg: #3e3d32;
	--mika-code-toolbar-fg: #f8f8f2;
	--mika-code-toolbar-border: rgba(255, 255, 255, 0.14);
	--mika-code-line-number: #90908a;
	--mika-code-line-border: rgba(255, 255, 255, 0.1);
	--mika-code-selection: rgba(73, 72, 62, 0.9);
	--mika-code-token-comment: #75715e;
	--mika-code-token-punctuation: #f8f8f2;
	--mika-code-token-tag: #f92672;
	--mika-code-token-attr: #a6e22e;
	--mika-code-token-string: #a6e22e;
	--mika-code-token-keyword: #66d9ef;
	--mika-code-token-function: #fd971f;
	--mika-code-token-number: #ae81ff;
	--mika-code-token-operator: #f92672;
	--mika-code-token-variable: #f8f8f2;
	--mika-code-token-regex: #fd971f;
}

/* Mac：顶栏画红黄绿圆点，语言名靠左（在圆点右侧） */
pre.mika-highlightjs.mac-theme[class*="language-"]:before,
pre.moe-highlightjs.mac-theme[class*="language-"]:before {
	padding-left: 3.75rem;
	color: var(--mika-code-header-fg);
	font-weight: 700;
	letter-spacing: 0.06em;
	background-color: var(--mika-code-header-bg);
	background-image:
		radial-gradient(circle closest-side, #ff5f56 92%, transparent 100%),
		radial-gradient(circle closest-side, #ffbd2e 92%, transparent 100%),
		radial-gradient(circle closest-side, #27c93f 92%, transparent 100%);
	background-size: 0.625rem 0.625rem;
	background-position: 0.75rem 50%, 1.7rem 50%, 2.65rem 50%;
	background-repeat: no-repeat;
}

/* Mac：<?php 等 delimiter.important 用橙色，贴近参考图 */
pre.mika-highlightjs.mac-theme .token.delimiter,
pre.moe-highlightjs.mac-theme .token.delimiter,
pre.mika-highlightjs.mac-theme .token.important,
pre.moe-highlightjs.mac-theme .token.important {
	color: #fd971f;
}

/* 4 · 暮光 Twilight — violet dusk */
pre.mika-highlightjs.twilight-theme,
pre.moe-highlightjs.twilight-theme,
div.code-toolbar:has(> pre.twilight-theme) {
	--mika-code-bg: #14111f;
	--mika-code-fg: #e6e1f0;
	--mika-code-border: rgba(180, 150, 255, 0.16);
	--mika-code-header-bg: rgba(180, 150, 255, 0.07);
	--mika-code-header-fg: #a89bc4;
	--mika-code-toolbar-bg: #1f1a2e;
	--mika-code-toolbar-fg: #d4c8ef;
	--mika-code-toolbar-border: rgba(180, 150, 255, 0.2);
	--mika-code-line-number: #7a6f96;
	--mika-code-line-border: rgba(180, 150, 255, 0.14);
	--mika-code-selection: rgba(167, 139, 250, 0.3);
	--mika-code-token-comment: #8b7fa8;
	--mika-code-token-punctuation: #c4b8dc;
	--mika-code-token-tag: #7dd3fc;
	--mika-code-token-attr: #f9a8d4;
	--mika-code-token-string: #86efac;
	--mika-code-token-keyword: #c4b5fd;
	--mika-code-token-function: #fcd34d;
	--mika-code-token-number: #fda4af;
	--mika-code-token-operator: #c4b8dc;
	--mika-code-token-variable: #f9a8d4;
	--mika-code-token-regex: #86efac;
}

/* Legacy force classes → nearest of the four */
pre.mika-highlightjs.mika-code-force-light,
pre.moe-highlightjs.mika-code-force-light {
	--mika-code-bg: #f6f8fa;
	--mika-code-fg: #1f2328;
	--mika-code-border: rgba(31, 35, 40, 0.12);
	--mika-code-header-bg: rgba(31, 35, 40, 0.045);
	--mika-code-header-fg: #656d76;
	--mika-code-toolbar-bg: #ffffff;
	--mika-code-toolbar-fg: #424a53;
	--mika-code-toolbar-border: rgba(31, 35, 40, 0.14);
	--mika-code-line-number: #8c959f;
	--mika-code-line-border: rgba(31, 35, 40, 0.1);
	--mika-code-selection: rgba(9, 105, 218, 0.22);
	--mika-code-token-comment: #6e7781;
	--mika-code-token-punctuation: #656d76;
	--mika-code-token-tag: #0550ae;
	--mika-code-token-attr: #953800;
	--mika-code-token-string: #0a3069;
	--mika-code-token-keyword: #cf222e;
	--mika-code-token-function: #8250df;
	--mika-code-token-number: #0550ae;
	--mika-code-token-operator: #656d76;
	--mika-code-token-variable: #953800;
	--mika-code-token-regex: #116329;
}

pre.mika-highlightjs.mika-code-force-dark,
pre.moe-highlightjs.mika-code-force-dark {
	--mika-code-bg: #272822;
	--mika-code-fg: #f8f8f2;
	--mika-code-border: rgba(255, 255, 255, 0.08);
	--mika-code-header-bg: #1e1f1c;
	--mika-code-header-fg: #66d9ef;
	--mika-code-toolbar-bg: #3e3d32;
	--mika-code-toolbar-fg: #f8f8f2;
	--mika-code-toolbar-border: rgba(255, 255, 255, 0.14);
	--mika-code-line-number: #90908a;
	--mika-code-line-border: rgba(255, 255, 255, 0.1);
	--mika-code-selection: rgba(73, 72, 62, 0.9);
	--mika-code-token-comment: #75715e;
	--mika-code-token-punctuation: #f8f8f2;
	--mika-code-token-tag: #f92672;
	--mika-code-token-attr: #a6e22e;
	--mika-code-token-string: #a6e22e;
	--mika-code-token-keyword: #66d9ef;
	--mika-code-token-function: #fd971f;
	--mika-code-token-number: #ae81ff;
	--mika-code-token-operator: #f92672;
	--mika-code-token-variable: #f8f8f2;
	--mika-code-token-regex: #fd971f;
}

/* —— Base —— */
pre[class*="language-"],
pre[class*="language-"] code {
	background: none;
	color: var(--mika-code-fg);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.55;
	tab-size: 4;
	hyphens: none;
}

pre[class*="language-"].mika-highlightjs,
pre[class*="language-"].moe-highlightjs {
	position: relative;
	margin: 1em 0;
	overflow: auto;
	border-radius: 14px;
	border: 1px solid var(--mika-code-border);
	background: var(--mika-code-bg) !important;
	color: var(--mika-code-fg);
	/* top reserved for language header + toolbar row */
	padding: 2.75rem 1rem 1rem !important;
	font-size: 13px;
	box-sizing: border-box;
}

pre[class*="language-"].mika-highlightjs > code,
pre[class*="language-"].moe-highlightjs > code {
	display: block;
	opacity: 1;
	animation: none;
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

:not(pre) > code[class*="language-"] {
	padding: 0.15em 0.35em;
	border-radius: 6px;
	white-space: normal;
	background: var(--mika-code-header-bg);
	border: 1px solid var(--mika-code-border);
	color: var(--mika-code-fg);
}

pre[class*="language-"] ::selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"] ::selection,
code[class*="language-"] ::-moz-selection {
	background: var(--mika-code-selection);
	text-shadow: none;
}

/* —— Language label (full-width header bar) —— */
.mika-highlightjs[class*="language-"]:before,
.moe-highlightjs[class*="language-"]:before {
	content: "code";
	text-transform: uppercase;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: 2.25rem;
	line-height: 2.25rem;
	padding: 0 7.5rem 0 0.875rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--mika-code-header-fg);
	background: var(--mika-code-header-bg);
	border-bottom: 1px solid var(--mika-code-border);
	pointer-events: none;
	box-sizing: border-box;
}

.mika-highlightjs.language-none:before,
.moe-highlightjs.language-none:before { content: 'txt'; }
.mika-highlightjs.language-php:before,
.moe-highlightjs.language-php:before { content: 'php'; }
.mika-highlightjs.language-css:before,
.moe-highlightjs.language-css:before { content: 'css'; }
.mika-highlightjs.language-markup:before,
.moe-highlightjs.language-markup:before { content: 'html'; }
.mika-highlightjs.language-xml:before,
.moe-highlightjs.language-xml:before { content: 'xml'; }
.mika-highlightjs.language-html:before,
.moe-highlightjs.language-html:before { content: 'html'; }
.mika-highlightjs.language-javascript:before,
.moe-highlightjs.language-javascript:before { content: 'javascript'; }
.mika-highlightjs.language-js:before,
.moe-highlightjs.language-js:before { content: 'js'; }
.mika-highlightjs.language-json:before,
.moe-highlightjs.language-json:before { content: 'json'; }
.mika-highlightjs.language-bash:before,
.moe-highlightjs.language-bash:before { content: 'bash'; }
.mika-highlightjs.language-shell:before,
.moe-highlightjs.language-shell:before { content: 'shell'; }
.mika-highlightjs.language-python:before,
.moe-highlightjs.language-python:before { content: 'python'; }
.mika-highlightjs.language-sql:before,
.moe-highlightjs.language-sql:before { content: 'sql'; }
.mika-highlightjs.language-java:before,
.moe-highlightjs.language-java:before { content: 'java'; }
.mika-highlightjs.language-typescript:before,
.moe-highlightjs.language-typescript:before { content: 'typescript'; }
.mika-highlightjs.language-go:before,
.moe-highlightjs.language-go:before { content: 'go'; }

/* —— Tokens —— */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: var(--mika-code-token-comment);
}

.token.punctuation {
	color: var(--mika-code-token-punctuation);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
	color: var(--mika-code-token-tag);
}

.token.selector,
.token.attr-name,
.token.builtin {
	color: var(--mika-code-token-attr);
}

.token.string,
.token.char {
	color: var(--mika-code-token-string);
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
	color: var(--mika-code-token-operator);
}

.token.atrule,
.token.keyword {
	color: var(--mika-code-token-keyword);
}

.token.attr-value {
	color: var(--mika-code-token-string);
}

.token.function,
.token.class-name {
	color: var(--mika-code-token-function);
}

.token.regex,
.token.important {
	color: var(--mika-code-token-regex);
}

.token.bold,
.token.important {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.namespace {
	opacity: 0.85;
}

/* —— Line numbers ——
 * Prism 把 .line-numbers-rows 挂在 <code> 内（code 为定位参照）。
 * 官方约定：pre 左侧 padding 留 gutter，rows 用 left: -N 伸进 gutter；top 必须为 0。
 */
pre[class*="language-"].line-numbers {
	/* top | right | bottom | left — 顶栏 + 行号槽 */
	padding: 2.75rem 1rem 1rem 3.8em !important;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: relative;
	white-space: inherit;
	display: block;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	left: -3.8em;
	width: 3em;
	letter-spacing: -1px;
	border-right: 1px solid var(--mika-code-line-border);
	user-select: none;
	font-size: 100%;
	line-height: inherit;
}

.line-numbers-rows > span {
	display: block;
	counter-increment: linenumber;
	/* 高度由 Prism lineNumbers.resize 按实际行高写入，勿写死 */
}

.line-numbers-rows > span:before {
	content: counter(linenumber);
	color: var(--mika-code-line-number);
	display: block;
	padding-right: 0.8em;
	text-align: right;
}

/* —— Toolbar ——
 * 须压过 .article-content a / 深色主题链接色，否则深色块上会出现难辨的品牌紫字。
 */
div.code-toolbar {
	position: relative;
	margin: 1em 0;
	border-radius: 14px;
	border: 1px solid var(--mika-code-border);
	overflow: hidden;
	background: var(--mika-code-bg);
}

div.code-toolbar > pre[class*="language-"] {
	margin: 0;
	border: 0;
	border-radius: 0;
}

div.code-toolbar > .toolbar {
	/* 与语言顶栏 :before（height: 2.25rem）同高，按钮垂直居中 */
	position: absolute;
	top: 0;
	right: 0.5rem;
	height: 2.25rem;
	z-index: 2;
	opacity: 1;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	pointer-events: none;
}

div.code-toolbar > .toolbar .toolbar-item {
	display: flex;
	align-items: center;
	pointer-events: auto;
}

div.code-toolbar > .toolbar button {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	line-height: normal;
	overflow: visible;
	padding: 0;
	user-select: none;
	cursor: pointer;
}

.article-content div.code-toolbar > .toolbar a,
.article-content div.code-toolbar > .toolbar button,
.article-content div.code-toolbar > .toolbar span,
.mika-single .article-content div.code-toolbar > .toolbar a,
.mika-single .article-content div.code-toolbar > .toolbar button,
.app-layout-active .mika-single .article-content div.code-toolbar > .toolbar a,
.app-layout-active .mika-single .article-content div.code-toolbar > .toolbar button,
html.dark-theme .app-layout-active .mika-single .article-content div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
	color: var(--mika-code-toolbar-fg) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 1.5rem;
	font-size: 12px;
	font-weight: 500;
	padding: 0 0.65rem;
	margin: 0;
	background: var(--mika-code-toolbar-bg) !important;
	border: 1px solid var(--mika-code-toolbar-border);
	border-radius: 999px;
	text-decoration: none !important;
	line-height: 1 !important;
	box-shadow: none;
	outline: none;
	box-sizing: border-box;
	vertical-align: middle;
}

.article-content div.code-toolbar > .toolbar a:hover,
.article-content div.code-toolbar > .toolbar a:focus,
.article-content div.code-toolbar > .toolbar a:focus-visible,
.mika-single .article-content div.code-toolbar > .toolbar a:hover,
.mika-single .article-content div.code-toolbar > .toolbar a:focus,
.app-layout-active .mika-single .article-content div.code-toolbar > .toolbar a:hover,
.app-layout-active .mika-single .article-content div.code-toolbar > .toolbar a:focus,
html.dark-theme .app-layout-active .mika-single .article-content div.code-toolbar > .toolbar a:hover,
html.dark-theme .app-layout-active .mika-single .article-content div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar a:focus-visible,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar button:focus-visible {
	border-color: var(--mika-code-token-tag) !important;
	color: var(--mika-code-fg) !important;
	background: var(--mika-code-toolbar-bg) !important;
}

/* 复制成功：高对比反馈，不依赖 :focus 的链接色 */
.article-content div.code-toolbar > .toolbar a.is-copied,
.mika-single .article-content div.code-toolbar > .toolbar a.is-copied,
.app-layout-active .mika-single .article-content div.code-toolbar > .toolbar a.is-copied,
html.dark-theme .app-layout-active .mika-single .article-content div.code-toolbar > .toolbar a.is-copied,
div.code-toolbar > .toolbar a.is-copied,
div.code-toolbar > .toolbar button.is-copied {
	color: var(--mika-code-fg) !important;
	border-color: var(--mika-code-token-tag) !important;
	background: var(--mika-code-header-bg) !important;
}

@media (max-width: 640px) {
	div.code-toolbar > .toolbar a,
	div.code-toolbar > .toolbar button,
	div.code-toolbar > .toolbar span {
		font-size: 11px;
		height: 1.35rem;
		padding: 0 0.5rem;
	}

	.mika-highlightjs[class*="language-"]:before,
	.moe-highlightjs[class*="language-"]:before {
		padding-right: 6.5rem;
	}

	pre.mika-highlightjs.mac-theme[class*="language-"]:before,
	pre.moe-highlightjs.mac-theme[class*="language-"]:before {
		padding-left: 3.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	pre[class*="language-"] > code {
		animation: none !important;
	}
}