:root {
	--tag-pass: #1a8917;
	--tag-fail: #e63946;
	--bg: #fffbe6;
}

.ccc-wrapper {
	background: var(--bg);
}

.preview {
	text-align: center;
	margin-bottom: 25px;
}

.text-sample {
	font-size: 6rem;
	font-weight: bold;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.ratio {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.status {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.tag {
	padding: 0.5rem 1rem;
	border-radius: 5px;
	background: #ddd;
	font-weight: bold;
}

.pass {
	background: var(--tag-pass);
	color: white;
}

.fail {
	background: var(--tag-fail);
	color: white;
}

.controls {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 25px;
}

.color-box {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.input-group {
	display: flex;
	gap: 0.5rem;
}

input[type="text"] {
	flex: 1;
	padding: 0.5rem;
	font-size: 1rem;
	margin: 0;
}

.copy-btn {
	padding: 0.5rem;
	cursor: pointer;
}

.actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 25px;
}

.actions button {
	padding: 0.7rem 1.5rem;
	font-size: 1rem;
	cursor: pointer;
}