.bcd-diagnosis {
	--bcd-text: #2b2730;
	--bcd-muted: #746d79;
	--bcd-border: #ece6ee;
	--bcd-bg: #fffafd;
	max-width: 760px;
	margin: 28px auto;
	padding: 28px;
	border: 1px solid var(--bcd-border);
	border-radius: 24px;
	background:
		radial-gradient(circle at top right, rgba(240, 145, 153, .11), transparent 34%),
		linear-gradient(180deg, #fff 0%, var(--bcd-bg) 100%);
	box-shadow: 0 14px 40px rgba(53, 37, 54, .07);
	color: var(--bcd-text);
	box-sizing: border-box;
}
.bcd-diagnosis * { box-sizing: border-box; }
.bcd-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.bcd-header-icon {
	width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
	background: conic-gradient(#f09199, #f6ad49, #c3d825, #59b9c6, #7058a3, #f09199);
	color: transparent;
	box-shadow: inset 0 0 0 5px rgba(255,255,255,.72);
}
.bcd-header h2 { margin: 0 0 6px; font-size: clamp(22px, 4vw, 30px); line-height: 1.35; }
.bcd-header p { margin: 0; color: var(--bcd-muted); line-height: 1.8; }
.bcd-form {
	padding: 20px;
	border: 1px solid var(--bcd-border);
	border-radius: 18px;
	background: rgba(255,255,255,.82);
}
.bcd-form label { display: block; margin-bottom: 9px; font-weight: 700; }
.bcd-form-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.bcd-form input[type="date"] {
	width: 100%; min-height: 50px; padding: 0 14px;
	border: 1px solid #dcd4df; border-radius: 12px; background: #fff;
	font: inherit; color: var(--bcd-text);
}
.bcd-form button[type="submit"] {
	min-height: 50px; padding: 0 26px; border: 0; border-radius: 12px;
	background: #392f3e; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
	transition: transform .15s ease, opacity .15s ease;
}
.bcd-form button[type="submit"]:hover { opacity: .9; transform: translateY(-1px); }
.bcd-privacy { margin: 8px 0 0; color: var(--bcd-muted); font-size: 12px; }
.bcd-error {
	margin-top: 16px; padding: 12px 14px; border-radius: 10px;
	background: #fff0f0; color: #a52a2a; font-weight: 700;
}
.bcd-result { margin-top: 28px; }
.bcd-result-kicker {
	margin: 0 0 10px; color: var(--bcd-muted); font-size: 13px; font-weight: 700;
	letter-spacing: .03em;
}
.bcd-main-card {
	display: grid; grid-template-columns: 42% 1fr; overflow: hidden;
	border-radius: 22px; background: #fff; border: 1px solid var(--bcd-border);
	box-shadow: 0 12px 30px rgba(53,37,54,.08);
}
.bcd-main-swatch {
	min-height: 250px; background: var(--bcd-main);
	position: relative;
}
.bcd-main-swatch::after {
	content: ""; position: absolute; inset: 18px;
	border: 1px solid rgba(255,255,255,.58); border-radius: 16px;
}
.bcd-main-content {
	padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.bcd-label {
	font-size: 11px; font-weight: 800; color: var(--bcd-muted); letter-spacing: .12em;
}
.bcd-main-content h3 { margin: 7px 0 12px; font-size: clamp(25px, 5vw, 38px); line-height: 1.25; }
.bcd-code {
	display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 13px;
	border: 1px solid var(--bcd-border); border-radius: 999px; background: #fff;
	color: var(--bcd-text); cursor: pointer; font: inherit;
}
.bcd-code span { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 800; }
.bcd-code small {
	padding: 3px 7px; border-radius: 999px; background: #f4eff5; color: #655a69; font-size: 10px; font-weight: 700;
}
.bcd-code.is-copied small { background: #e9f7ef; color: #237a46; }
.bcd-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.bcd-keywords span {
	padding: 5px 9px; border-radius: 999px; background: #f8f3f7; font-size: 12px; font-weight: 700; color: #5c515f;
}
.bcd-personality { margin-top: 20px; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--bcd-border); }
.bcd-personality h4, .bcd-compatible-wrap h4 { margin: 0 0 8px; font-size: 18px; }
.bcd-personality p, .bcd-compatible-body p, .bcd-compatible-lead { margin: 0; color: #5e5662; line-height: 1.85; }
.bcd-compatible-wrap { margin-top: 25px; }
.bcd-compatible-lead { margin-bottom: 12px; }
.bcd-compatible-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bcd-compatible-card {
	overflow: hidden; border: 1px solid var(--bcd-border); border-radius: 16px; background: #fff;
}
.bcd-compatible-color { height: 92px; }
.bcd-compatible-body { padding: 14px; }
.bcd-compatible-label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 800; }
.bcd-compatible-body .bcd-code { margin-bottom: 10px; padding: 6px 8px 6px 10px; font-size: 12px; }
.bcd-compatible-body p { font-size: 13px; line-height: 1.7; }
.bcd-note { margin: 18px 2px 0; color: #8a818d; font-size: 11px; line-height: 1.7; }

@media (max-width: 640px) {
	.bcd-diagnosis { margin: 20px 0; padding: 18px; border-radius: 18px; }
	.bcd-form-row { grid-template-columns: 1fr; }
	.bcd-form button[type="submit"] { width: 100%; }
	.bcd-main-card { grid-template-columns: 1fr; }
	.bcd-main-swatch { min-height: 150px; }
	.bcd-main-content { padding: 22px 18px; }
	.bcd-compatible-grid { grid-template-columns: 1fr; }
	.bcd-compatible-card { display: grid; grid-template-columns: 88px 1fr; }
	.bcd-compatible-color { height: 100%; min-height: 145px; }
}


.bcd-form.is-loading { opacity: .82; }
.bcd-form button[type="submit"]:disabled { cursor: wait; opacity: .72; transform: none; }
.bcd-ajax-message:empty { display: none; }
.bcd-success {
	margin-top: 16px; padding: 12px 14px; border-radius: 10px;
	background: #edf8f1; color: #247148; font-weight: 700;
}