.cpc8-wrap {
	--cpc8-color: #00958f;
	max-width: 560px;
	margin: 24px auto;
	padding: 0 12px;
	box-sizing: border-box;
	font-family: inherit;
	color: #1f2937;
	line-height: 1.4;
}
.cpc8-wrap *,
.cpc8-wrap *::before,
.cpc8-wrap *::after { box-sizing: border-box; }

.cpc8-wrap .cpc8-title {
	margin: 0 0 6px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	color: #111827;
}
.cpc8-wrap .cpc8-sub {
	margin: 0 auto 18px;
	max-width: 440px;
	text-align: center;
	font-size: 13px;
	color: #6b7280;
}

.cpc8-wrap .cpc8-card {
	background: #fff;
	border-radius: 10px;
	padding: 22px 20px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}

.cpc8-wrap .cpc8-field { margin-bottom: 14px; }
.cpc8-wrap .cpc8-field label {
	display: block;
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 500;
	color: #374151;
}
.cpc8-wrap .cpc8-input {
	display: block;
	width: 100%;
	height: 38px;
	margin: 0;
	padding: 0 10px;
	font-family: inherit;
	font-size: 14px;
	color: #111827;
	background: #fff;
	border: 1px solid #374151;
	border-radius: 4px;
	box-shadow: none;
	outline: none;
}
.cpc8-wrap .cpc8-input:focus {
	border-color: var(--cpc8-color);
	box-shadow: 0 0 0 2px rgba(0, 149, 143, .2);
}
.cpc8-wrap .cpc8-input:disabled { background: #f3f4f6; color: #9ca3af; }

/* info tooltip */
.cpc8-wrap .cpc8-i {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 3px;
	border: 1px solid #9ca3af;
	border-radius: 50%;
	font-size: 10px;
	font-style: normal;
	line-height: 12px;
	text-align: center;
	color: #6b7280;
	cursor: help;
	vertical-align: middle;
}
.cpc8-wrap .cpc8-i::after {
	content: attr(data-tip);
	display: none;
	position: absolute;
	left: -8px;
	bottom: 140%;
	z-index: 20;
	width: 230px;
	max-width: 70vw;
	padding: 7px 9px;
	border-radius: 5px;
	background: #111827;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
}
.cpc8-wrap .cpc8-i:hover::after,
.cpc8-wrap .cpc8-i:focus::after { display: block; }

/* fitment chips */
.cpc8-wrap .cpc8-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cpc8-wrap .cpc8-chip {
	margin: 0;
	padding: 4px 11px;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.4;
	color: #374151;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	cursor: pointer;
}
.cpc8-wrap .cpc8-chip:hover { border-color: var(--cpc8-color); }
.cpc8-wrap .cpc8-chip.is-on {
	color: #fff;
	background: var(--cpc8-color);
	border-color: var(--cpc8-color);
}

/* advanced */
.cpc8-wrap .cpc8-adv { margin: 4px 0 14px; }
.cpc8-wrap .cpc8-adv summary {
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cpc8-color);
	cursor: pointer;
}

/* buttons */
.cpc8-wrap .cpc8-actions { display: flex; gap: 10px; margin-top: 8px; }
.cpc8-wrap .cpc8-btn {
	flex: 1;
	margin: 0;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: var(--cpc8-color);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: filter .15s;
}
.cpc8-wrap .cpc8-btn:hover { filter: brightness(.92); }
.cpc8-wrap .cpc8-btn:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }

.cpc8-wrap .cpc8-error {
	margin: 14px 0 0;
	padding: 9px 12px;
	font-size: 13px;
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 4px;
}
.cpc8-wrap [hidden] { display: none !important; }

/* result */
.cpc8-wrap .cpc8-result { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5e7eb; }
.cpc8-wrap .cpc8-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cpc8-wrap .cpc8-tile {
	padding: 12px;
	text-align: center;
	background: #f3f4f6;
	border-radius: 8px;
}
.cpc8-wrap .cpc8-tile span { display: block; font-size: 12px; color: #6b7280; }
.cpc8-wrap .cpc8-tile strong { display: block; margin-top: 4px; font-size: 20px; color: #111827; }
.cpc8-wrap .cpc8-tile.is-main { background: var(--cpc8-color); }
.cpc8-wrap .cpc8-tile.is-main span,
.cpc8-wrap .cpc8-tile.is-main strong { color: #fff; }

.cpc8-wrap .cpc8-gain { margin: 12px 0; text-align: center; font-size: 13px; color: #374151; }
.cpc8-wrap .cpc8-gain.is-up strong { color: #15803d; }
.cpc8-wrap .cpc8-gain.is-down strong { color: #b91c1c; }

.cpc8-wrap .cpc8-table-wrap { overflow-x: auto; }
.cpc8-wrap .cpc8-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
.cpc8-wrap .cpc8-table th,
.cpc8-wrap .cpc8-table td {
	padding: 8px 6px;
	text-align: right;
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	background: transparent;
	vertical-align: top;
}
.cpc8-wrap .cpc8-table thead th { font-size: 12px; font-weight: 600; color: #6b7280; }
.cpc8-wrap .cpc8-table tbody th { text-align: left; font-weight: 500; color: #374151; }
.cpc8-wrap .cpc8-table small { display: block; font-size: 11px; color: #9ca3af; }
.cpc8-wrap .cpc8-table tr.is-total th,
.cpc8-wrap .cpc8-table tr.is-total td { font-weight: 700; background: #f9fafb; }
.cpc8-wrap .cpc8-table tr.is-minus td { color: #b91c1c; }
.cpc8-wrap .cpc8-table tr.is-net th,
.cpc8-wrap .cpc8-table tr.is-net td {
	font-size: 14px;
	font-weight: 700;
	color: var(--cpc8-color);
	border-bottom: 2px solid var(--cpc8-color);
}

.cpc8-wrap .cpc8-note { margin: 12px 0 0; font-size: 11.5px; color: #6b7280; }

@media (max-width: 480px) {
	.cpc8-wrap .cpc8-card { padding: 18px 14px; }
	.cpc8-wrap .cpc8-tile strong { font-size: 17px; }
	.cpc8-wrap .cpc8-table { font-size: 12px; }
}