.scoppar-scc {
	--scc-navy: #001F3F;
	--scc-gold: #D4AF37;
	--scc-green: #128c4a;
	--scc-bg: #f6f8fc;
	--scc-text: #102235;
	--scc-muted: #5e6b78;
	--scc-line: #d9e2ec;
	--scc-radius: 16px;

	max-width: 720px;
	margin: 0 auto;
	padding: 28px;
	background: #ffffff;
	border: 1px solid var(--scc-line);
	border-radius: var(--scc-radius);
	box-shadow: 0 8px 28px rgba(16, 34, 53, 0.08);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--scc-text);
}

.scoppar-scc__intro {
	font-size: 14px;
	color: var(--scc-muted);
	margin: 0 0 14px;
	line-height: 1.5;
}

.scoppar-scc__input {
	width: 100%;
	padding: 14px;
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 13.5px;
	color: var(--scc-text);
	background: var(--scc-bg);
	border: 1.5px solid var(--scc-line);
	border-radius: calc(var(--scc-radius) - 4px);
	resize: vertical;
	transition: border-color 0.15s ease;
}
.scoppar-scc__input:focus {
	outline: none;
	border-color: var(--scc-navy);
}

.scoppar-scc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 13px 26px;
	background: var(--scc-navy);
	color: #ffffff;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	border: none;
	border-radius: calc(var(--scc-radius) - 4px);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.scoppar-scc__button:hover { background: #002a56; transform: translateY(-1px); }
.scoppar-scc__button:disabled { opacity: 0.6; cursor: default; transform: none; }

.scoppar-scc__error {
	font-size: 13px;
	color: #D32F2F;
	margin: 10px 0 0;
	min-height: 1em;
}

.scoppar-scc__summary {
	font-size: 13.5px;
	color: var(--scc-muted);
	margin: 20px 0 12px;
	font-weight: 600;
}

.scoppar-scc__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.scoppar-scc__table th {
	text-align: left;
	padding: 8px 10px;
	background: var(--scc-bg);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--scc-muted);
	border-bottom: 1px solid var(--scc-line);
}
.scoppar-scc__table td {
	padding: 10px;
	border-bottom: 1px solid var(--scc-line);
	vertical-align: top;
}
.scoppar-scc__table code {
	background: var(--scc-bg);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 12px;
}

.scoppar-scc__badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.scoppar-scc__disclaimer {
	font-size: 11.5px;
	color: var(--scc-muted);
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--scc-line);
	line-height: 1.5;
}

@media (max-width: 640px) {
	.scoppar-scc { padding: 20px; }

	/* Below this width, a 5-column table has no honest way to fit —
	   crushing it (small font, tight padding) still overflows the
	   screen once real content (badges, category names, guidance text)
	   is in the cells. Restructure each row as its own labeled card
	   instead, which is the actual fix, not just a smaller table. */
	.scoppar-scc__table,
	.scoppar-scc__table thead,
	.scoppar-scc__table tbody,
	.scoppar-scc__table th,
	.scoppar-scc__table td,
	.scoppar-scc__table tr {
		display: block;
	}
	.scoppar-scc__table thead {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.scoppar-scc__table tr {
		margin-bottom: 14px;
		border: 1px solid var(--scc-line);
		border-radius: calc(var(--scc-radius) - 4px);
		padding: 12px;
		box-shadow: 0 2px 8px rgba(16, 34, 53, 0.05);
	}
	.scoppar-scc__table tr:last-child { margin-bottom: 0; }
	.scoppar-scc__table td {
		border-bottom: none;
		padding: 7px 0;
		font-size: 13px;
		word-break: break-word;
	}
	.scoppar-scc__table td:not(:last-child) {
		border-bottom: 1px dashed var(--scc-line);
	}
	.scoppar-scc__table td::before {
		content: attr(data-label);
		display: block;
		font-size: 10.5px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--scc-muted);
		margin-bottom: 3px;
	}

	/* Safety net — if anything ever renders wider than the card anyway
	   (a very long unbroken word, for instance), scroll it rather than
	   let it push the whole page wider than the screen. */
	#scoppar-scc-table { overflow-x: auto; }
}