.pch-pre-wrapper {
	--pch-bg: #0d1117;
	--pch-text: #e6edf3;
	--pch-toolbar: #111827;
	--pch-border: #263041;
	--pch-accent: #2563eb;
	--pch-muted: #94a3b8;
	--pch-button-bg: rgba(255,255,255,0.05);
	--pch-button-border: rgba(255,255,255,0.12);
	--pch-button-text: #f8fafc;
	--pch-button-hover: rgba(255,255,255,0.09);
	position: relative;
	margin: 24px 0;
	border: 1px solid var(--pch-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(2, 6, 23, 0.12);
}

.pch-pre-wrapper[data-theme="light"] {
	--pch-bg: #f8fafc;
	--pch-text: #0f172a;
	--pch-toolbar: #e2e8f0;
	--pch-border: #cbd5e1;
	--pch-accent: #2563eb;
	--pch-muted: #475569;
	--pch-button-bg: rgba(15,23,42,0.05);
	--pch-button-border: rgba(15,23,42,0.12);
	--pch-button-text: #0f172a;
	--pch-button-hover: rgba(15,23,42,0.08);
}

.pch-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: var(--pch-toolbar);
	border-bottom: 1px solid var(--pch-border);
}

.pch-language-label {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--pch-text);
	background: rgba(37, 99, 235, 0.16);
}

.pch-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pch-toolbar-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--pch-button-border);
	background: var(--pch-button-bg);
	color: var(--pch-button-text);
	padding: 7px 11px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.pch-toolbar-button:hover,
.pch-toolbar-button:focus {
	background: var(--pch-button-hover);
	border-color: var(--pch-accent);
	outline: none;
	transform: translateY(-1px);
}

.pch-toolbar-button svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex: 0 0 auto;
}

.pch-copy-button.pch-copied {
	background: rgba(34, 197, 94, 0.18);
	border-color: #22c55e;
}

.pch-pre,
.pch-pre[class*="language-"] {
	margin: 0;
	padding: 18px;
	background: var(--pch-bg);
	color: var(--pch-text);
	overflow-x: auto;
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: 14px;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
	border-left: 4px solid var(--pch-accent);
}

.pch-pre code,
.pch-pre[class*="language-"] code {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	white-space: pre-wrap;
	word-break: break-word;
	background: transparent !important;
	text-shadow: none !important;
}

.pch-pre-wrapper[data-theme="light"] .token.comment,
.pch-pre-wrapper[data-theme="light"] .token.prolog,
.pch-pre-wrapper[data-theme="light"] .token.doctype,
.pch-pre-wrapper[data-theme="light"] .token.cdata {
	color: #64748b;
}

.pch-pre-wrapper[data-theme="light"] .token.punctuation,
.pch-pre-wrapper[data-theme="light"] .token.operator,
.pch-pre-wrapper[data-theme="light"] .token.entity,
.pch-pre-wrapper[data-theme="light"] .token.url,
.pch-pre-wrapper[data-theme="light"] .token.variable {
	color: #0f172a;
	background: transparent;
}

.pch-pre-wrapper[data-theme="light"] .token.keyword,
.pch-pre-wrapper[data-theme="light"] .token.atrule,
.pch-pre-wrapper[data-theme="light"] .token.selector,
.pch-pre-wrapper[data-theme="light"] .token.important,
.pch-pre-wrapper[data-theme="light"] .token.tag {
	color: #7c3aed;
}

.pch-pre-wrapper[data-theme="light"] .token.string,
.pch-pre-wrapper[data-theme="light"] .token.char,
.pch-pre-wrapper[data-theme="light"] .token.attr-value,
.pch-pre-wrapper[data-theme="light"] .token.regex,
.pch-pre-wrapper[data-theme="light"] .token.inserted {
	color: #047857;
}

.pch-pre-wrapper[data-theme="light"] .token.function,
.pch-pre-wrapper[data-theme="light"] .token.class-name,
.pch-pre-wrapper[data-theme="light"] .token.property,
.pch-pre-wrapper[data-theme="light"] .token.number,
.pch-pre-wrapper[data-theme="light"] .token.boolean,
.pch-pre-wrapper[data-theme="light"] .token.constant,
.pch-pre-wrapper[data-theme="light"] .token.symbol {
	color: #b45309;
}

@media (max-width: 640px) {
	.pch-toolbar {
		flex-wrap: wrap;
	}

	.pch-actions {
		width: 100%;
		justify-content: flex-end;
	}

	.pch-toolbar-button span {
		display: none;
	}
}