.fin-diag-app {
	max-width: 760px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

.fin-diag-panel {
	background: linear-gradient(180deg, #fffdf8 0%, #fff 100%);
	border: 1px solid #eadfcb;
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 16px 36px rgba(72, 52, 28, 0.08);
	margin-top: 16px;
}

.fin-diag-panel-animate {
	animation: fin-diag-panel-open 0.28s ease-out;
}

.fin-diag-start {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 0;
}

.fin-diag-title,
.fin-diag-title-sm,
.fin-diag-question {
	color: #2e2518;
	margin: 0 0 12px;
	line-height: 1.4;
}

.fin-diag-lead,
.fin-diag-score,
.fin-diag-caution,
.fin-diag-progress-meta {
	color: #5f5341;
	line-height: 1.7;
}

.fin-diag-progress {
	height: 10px;
	background: #f0e6d5;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 10px;
}

.fin-diag-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #006b5f 0%, #2f8f7f 100%);
	transition: width 0.2s ease;
}

.fin-diag-options {
	display: grid;
	gap: 12px;
	margin: 20px 0;
}

.fin-diag-option {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid #d9ccb5;
	border-radius: 14px;
	cursor: pointer;
	background: #fff;
}

.fin-diag-option:hover {
	border-color: #2f8f7f;
}

.fin-diag-actions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.fin-diag-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	font-weight: 700;
}

.fin-diag-button-primary {
	background: linear-gradient(135deg, #d31111 0%, #ff3b30 100%);
	color: #fff;
	box-shadow: 0 0 0 rgba(255, 59, 48, 0.55);
	animation: fin-diag-glow 1.8s ease-in-out infinite;
}

.fin-diag-button-primary:hover {
	background: linear-gradient(135deg, #ba0f0f 0%, #e53228 100%);
	color: #fff;
}

.fin-diag-start .fin-diag-button-primary {
	display: inline-flex;
	min-width: 240px;
	padding: 0 32px;
	font-size: 1rem;
	background: linear-gradient(135deg, #d31111 0%, #ff3b30 100%) !important;
	background-color: #e12727 !important;
	border-color: #b10d0d !important;
	color: #fff !important;
	box-shadow: 0 0 0 rgba(255, 59, 48, 0.55), 0 0 24px rgba(255, 59, 48, 0.38) !important;
}

.fin-diag-button-secondary {
	background: #fff;
	border-color: #b8ab95;
	color: #3d3327;
}

.fin-diag-result-list {
	display: grid;
	gap: 16px;
	margin: 20px 0;
}

.fin-diag-result-card {
	border: 1px solid #e5dac8;
	border-radius: 18px;
	padding: 18px;
	background: #fffdfa;
}

.fin-diag-caution {
	font-size: 0.9rem;
	padding-top: 10px;
	border-top: 1px solid #efe4d6;
}

.fin-diag-error {
	color: #a12622;
}

@media (max-width: 640px) {
	.fin-diag-panel {
		padding: 18px;
		border-radius: 16px;
	}

	.fin-diag-start {
		padding: 4px 0;
	}

	.fin-diag-start .fin-diag-button-primary {
		width: 100%;
		min-width: 0;
	}

	.fin-diag-actions {
		flex-direction: column;
	}

	.fin-diag-button {
		width: 100%;
	}
}

@keyframes fin-diag-glow {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.18), 0 0 12px rgba(255, 59, 48, 0.32);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(255, 59, 48, 0.1), 0 0 28px rgba(255, 59, 48, 0.52);
		transform: scale(1.03);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.18), 0 0 12px rgba(255, 59, 48, 0.32);
		transform: scale(1);
	}
}

@keyframes fin-diag-panel-open {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}