.abc-codebox {
	--abc-codebox-bg: #0f172a;
	--abc-codebox-border: rgba(148, 163, 184, 0.28);
	--abc-codebox-text: #e5e7eb;
	--abc-codebox-muted: #94a3b8;
	--abc-codebox-accent: #38bdf8;
	--abc-codebox-toolbar: rgba(15, 23, 42, 0.96);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.abc-codebox--block {
	background: linear-gradient(145deg, #111827 0%, var(--abc-codebox-bg) 100%);
	border: 1px solid var(--abc-codebox-border);
	border-radius: 14px;
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
	color: var(--abc-codebox-text);
	margin: 1.5rem 0;
	overflow: hidden;
}

.abc-codebox__toolbar {
	align-items: center;
	background: var(--abc-codebox-toolbar);
	border-bottom: 1px solid var(--abc-codebox-border);
	display: flex;
	justify-content: space-between;
	padding: 0.65rem 0.85rem;
}

.abc-codebox__language {
	color: var(--abc-codebox-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.abc-codebox__copy {
	background: rgba(56, 189, 248, 0.12);
	border: 1px solid rgba(56, 189, 248, 0.34);
	border-radius: 999px;
	color: var(--abc-codebox-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.78rem;
	padding: 0.3rem 0.7rem;
}

.abc-codebox__copy:hover,
.abc-codebox__copy.is-copied {
	background: var(--abc-codebox-accent);
	color: #082f49;
}

.abc-codebox__pre,
.abc-codebox__code,
.abc-codebox--inline {
	tab-size: 4;
	white-space: pre;
	overflow-wrap: normal;
	word-break: normal;
}

.abc-codebox__pre {
	background: transparent;
	color: inherit;
	margin: 0;
	overflow: auto;
	padding: 1rem;
}

.abc-codebox__code {
	color: inherit;
	display: block;
	font-size: 0.92rem;
	line-height: 1.7;
}

.abc-codebox--inline {
	background: rgba(15, 23, 42, 0.08);
	border: 1px solid rgba(15, 23, 42, 0.14);
	border-radius: 0.35em;
	color: #0f172a;
	font-size: 0.92em;
	padding: 0.12em 0.35em;
}

.abc-codebox--php { --abc-codebox-accent: #a78bfa; }
.abc-codebox--javascript,
.abc-codebox--json { --abc-codebox-accent: #facc15; }
.abc-codebox--html { --abc-codebox-accent: #fb7185; }
.abc-codebox--css { --abc-codebox-accent: #60a5fa; }
.abc-codebox--python { --abc-codebox-accent: #34d399; }
.abc-codebox--bash { --abc-codebox-accent: #22c55e; }
.abc-codebox--sql { --abc-codebox-accent: #f97316; }

.abc-codebox-token--comment { color: #94a3b8; font-style: italic; }
.abc-codebox-token--keyword { color: #c084fc; }
.abc-codebox-token--string { color: #86efac; }
.abc-codebox-token--number { color: #fbbf24; }
.abc-codebox-token--property,
.abc-codebox-token--attr { color: #93c5fd; }
.abc-codebox-token--tag,
.abc-codebox-token--selector { color: #fb7185; }
.abc-codebox-token--punctuation { color: #cbd5e1; }