html {
	color-scheme: dark;
}

.shiki {
	padding: 1em;
	width: 100%;
	overflow-x: auto;
	tab-size: 4;
	border: 1px solid #3a3a4e;
	border-radius: 6px;
}

.badge.bg-primary {
	background-color: #1e1e2e !important;
	border: 2px solid #8b9cff;
	color: #8b9cff;
}

.progress {
	background-color: #3a3a4e;
	max-width: 400px;
	margin: 0 auto;
}

.progress-bar {
	background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.output-box {
	width: 100%;
	overflow-x: auto;
	min-height: 400px;
	background: #1E1E1E;
	color: #e9ecef;
	line-height: 1.5;
}

.output-box * {
	font-family: var(--bs-font-monospace);
	font-size: 0.875rem;
	white-space: nowrap;
}

.output-box:focus {
	outline: 2px solid #8b9cff;
}

.btn-outline-primary {
	border-color: #8b9cff;
	color: #8b9cff;
}

.btn-outline-primary:hover {
	background-color: #8b9cff;
	border-color: #8b9cff;
	color: #1e1e2e;
}

@media (max-width: 600px) {
	.output-box {
		min-height: 300px;
		font-size: 0.8rem;
	}
}