.mizhan-org-chart {

	--mizhan-org-accent: #1e5f8f;

	--mizhan-org-line: #7eb8dc;

	--mizhan-org-max-width: 1180px;

	--mizhan-org-root-bg: #1e5f8f;

	--mizhan-org-card-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);

	--mizhan-org-line-size: 2px;

	--mizhan-org-line-length: 38px;

	--mizhan-org-split-gap: 80px;

	--mizhan-org-branch-count: 2;



	box-sizing: border-box;

	display: flex;

	flex-direction: column;

	max-width: var(--mizhan-org-max-width);

	margin: 0 auto;

}



.mizhan-org-chart *,

.mizhan-org-chart *::before,

.mizhan-org-chart *::after {

	box-sizing: border-box;

}



.mizhan-org-chart__icon svg {

	display: block;

	width: 100%;

	height: 100%;

}



.mizhan-org-chart__icon--root {

	flex: 0 0 auto;

	width: 42px;

	height: 42px;

	padding: 8px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.16);

	color: #fff;

}



.mizhan-org-chart__icon--branch {

	flex: 0 0 auto;

	width: 44px;

	height: 44px;

	padding: 9px;

	border-radius: 50%;

	background: var(--mizhan-org-accent);

	color: #fff;

}



.mizhan-org-chart__icon--dept {

	flex: 0 0 auto;

	width: 34px;

	height: 34px;

	padding: 6px;

	border-radius: 50%;

	background: #eef5fb;

	color: var(--mizhan-org-accent);

}



.mizhan-org-chart__top {

	display: flex;

	justify-content: center;

	position: relative;

	padding-bottom: var(--mizhan-org-line-length);

}



.mizhan-org-chart__top::after {

	content: "";

	position: absolute;

	left: 50%;

	bottom: 0;

	width: var(--mizhan-org-line-size);

	height: calc(var(--mizhan-org-line-length) + var(--mizhan-org-line-size));

	background: var(--mizhan-org-line);

	transform: translateX(-50%);

}



.mizhan-org-chart__node {

	display: flex;

	align-items: center;

	gap: 14px;

}



.mizhan-org-chart__node--root {

	min-width: min(100%, 420px);

	padding: 16px 24px;

	border-radius: 10px;

	background: var(--mizhan-org-root-bg);

	color: #fff;

	box-shadow: var(--mizhan-org-card-shadow);

}



.mizhan-org-chart__node--root .mizhan-org-chart__label {

	font-size: 18px;

	font-weight: 700;

	line-height: 1.35;

}



.mizhan-org-chart__connectors {

	position: relative;

	flex: 0 0 auto;

	height: var(--mizhan-org-line-size);

	max-width: 980px;

	width: 100%;

	margin: 0 auto;

}



.mizhan-org-chart__connectors::before {

	content: "";

	position: absolute;

	top: 0;

	left: calc(

		(100% - ((var(--mizhan-org-branch-count) - 1) * var(--mizhan-org-split-gap))) /

			(2 * var(--mizhan-org-branch-count))

	);

	right: calc(

		(100% - ((var(--mizhan-org-branch-count) - 1) * var(--mizhan-org-split-gap))) /

			(2 * var(--mizhan-org-branch-count))

	);

	height: var(--mizhan-org-line-size);

	background: var(--mizhan-org-line);

}



.mizhan-org-chart__connectors--single::before {

	left: 50%;

	right: auto;

	width: 0;

}



.mizhan-org-chart__split {

	display: grid;

	grid-template-columns: repeat(var(--mizhan-org-branch-count, 2), minmax(0, 1fr));

	gap: 48px var(--mizhan-org-split-gap);

	max-width: 980px;

	width: 100%;

	margin: 0 auto;

	padding-top: var(--mizhan-org-line-length);

	position: relative;

}



.mizhan-org-chart__branch {

	position: relative;

	display: flex;

	flex-direction: column;

	align-items: center;

}



.mizhan-org-chart__branch::before {

	content: "";

	position: absolute;

	top: calc(-1 * var(--mizhan-org-line-length));

	left: 50%;

	width: var(--mizhan-org-line-size);

	height: calc(var(--mizhan-org-line-length) + var(--mizhan-org-line-size));

	background: var(--mizhan-org-line);

	transform: translateX(-50%);

}



.mizhan-org-chart__node--branch {

	width: min(100%, 360px);

	padding: 14px 18px;

	border-radius: 10px;

	background: #fff;

	border: 1px solid #e3edf5;

	box-shadow: var(--mizhan-org-card-shadow);

}



.mizhan-org-chart__node--branch .mizhan-org-chart__label {

	color: #1f2937;

	font-size: 15px;

	font-weight: 700;

	line-height: 1.35;

}



.mizhan-org-chart__depts {

	position: relative;

	width: min(100%, 340px);

	margin-top: 26px;

	padding-left: 28px;

}



.mizhan-org-chart__depts::before {

	content: "";

	position: absolute;

	left: 9px;

	top: 8px;

	bottom: 16px;

	width: var(--mizhan-org-line-size);

	background: var(--mizhan-org-line);

}



.mizhan-org-chart__dept {

	position: relative;

	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 12px;

	padding: 11px 14px;

	border-radius: 10px;

	background: #fff;

	border: 1px solid #e3edf5;

	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);

}



.mizhan-org-chart__dept::before {

	content: "";

	position: absolute;

	left: -20px;

	top: 50%;

	width: 10px;

	height: 10px;

	border-radius: 50%;

	background: var(--mizhan-org-accent);

	border: 2px solid #fff;

	box-shadow: 0 0 0 1px var(--mizhan-org-line);

	transform: translate(-50%, -50%);

}



.mizhan-org-chart__dept-title {

	color: #334155;

	font-size: 14px;

	font-weight: 600;

	line-height: 1.35;

}



@media (max-width: 900px) {

	.mizhan-org-chart__split {

		grid-template-columns: 1fr;

		gap: 40px;

		padding-top: 0;

	}



	.mizhan-org-chart__connectors,

	.mizhan-org-chart__connectors::before,

	.mizhan-org-chart__branch::before {

		display: none;

	}



	.mizhan-org-chart__top {

		padding-bottom: 24px;

	}



	.mizhan-org-chart__top::after {

		height: calc(24px + var(--mizhan-org-line-size));

	}



	.mizhan-org-chart__node--root .mizhan-org-chart__label {

		font-size: 16px;

	}



	.mizhan-org-chart__depts {

		width: 100%;

	}

}



@media (max-width: 520px) {

	.mizhan-org-chart__node--root,

	.mizhan-org-chart__node--branch {

		flex-direction: column;

		text-align: center;

	}

}