.sc-widget-wrapper {
	background-color: #f9fafb;
	border-radius: 20px;
	padding: 40px;
	font-family: sans-serif;
	box-sizing: border-box;
	border: 1px solid #eaeaea;
}

.sc-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eaeaea;
	padding-bottom: 20px;
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 20px;
}

.sc-header-title {
	font-weight: 800;
	color: #556070;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sc-tabs-container {
	display: flex;
	background-color: #eef0f5;
	border-radius: 12px;
	padding: 4px;
	border: 1px solid #dee2e6;
}

.sc-tab {
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	cursor: default;
}

.sc-tab.active {
	background-color: #e53935;
	color: #ffffff;
	box-shadow: 0 2px 10px rgba(229, 57, 53, 0.3);
}

.sc-tab.inactive {
	color: #4b5563;
}

.sc-diagram-area {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}

.sc-dashed-lines {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
}

.sc-dashed-lines::before,
.sc-dashed-lines::after {
	content: '';
	position: absolute;
	width: 70%;
	height: 1px;
	border-top: 2px dashed #e53935;
	top: 50%;
	left: 15%;
}

.sc-dashed-lines::before {
	transform: rotate(45deg);
}

.sc-dashed-lines::after {
	transform: rotate(-45deg);
}

.sc-node {
	position: absolute;
	background: #ffffff;
	border: 1px solid #eaeaea;
	padding: 10px 20px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03);
	z-index: 2;
	font-weight: 600;
	color: #374151;
	font-size: 14px;
}

.sc-node-icon {
	display: flex;
	align-items: center;
	color: #6b7280;
}
.sc-node-icon svg { width: 14px; height: 14px; fill: currentColor; }
.sc-node-top-left .sc-node-icon { color: #3b82f6; }
.sc-node-top-right .sc-node-icon { color: #f59e0b; }
.sc-node-bottom-left .sc-node-icon { color: #10b981; }
.sc-node-bottom-right .sc-node-icon { color: #8b5cf6; }

.sc-node-top-left { top: 10%; left: 10%; }
.sc-node-top-right { top: 15%; right: 10%; }
.sc-node-bottom-left { bottom: 15%; left: 5%; }
.sc-node-bottom-right { bottom: 10%; right: 15%; }

.sc-center-node {
	background: #ffffff;
	border: 2px solid #e53935;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 3;
	box-shadow: 0 10px 25px rgba(229, 57, 53, 0.15);
}

.sc-center-title {
	font-weight: 800;
	color: #e53935;
	font-size: 16px;
}

.sc-center-subtitle {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 4px;
}

.sc-warning-text {
	position: absolute;
	top: 60%;
	width: 100%;
	text-align: center;
	color: #e53935;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.5px;
	z-index: 3;
	background: rgba(249, 250, 251, 0.8);
	padding: 4px 0;
}

.sc-footer-pill {
	background: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: 30px;
	padding: 20px 30px;
	text-align: center;
	font-size: 16px;
	color: #374151;
	font-weight: 600;
	line-height: 1.5;
	box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

@media (max-width: 768px) {
	.sc-node {
		position: static;
		margin-bottom: 10px;
		width: 100%;
		justify-content: center;
	}
	.sc-dashed-lines { display: none; }
	.sc-diagram-area {
		flex-direction: column;
		min-height: auto;
	}
	.sc-center-node { margin: 20px 0; }
	.sc-warning-text { position: static; margin-bottom: 20px; }
}