/* =========================
 * 体系页面专用样式
 * ========================= */
.lingxyh-system-page .lingxyh-content {
	align-items:flex-start;
}

.lingxyh-system-page .system-side {
	width:240px;
	flex:0 0 240px;
}

.lingxyh-system-page .system-toolbar {
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:15px;
	padding:0 0 10px;
}

.lingxyh-system-page .system-paths {
	dis:grid;
	gap:5px;
	min-width:0;
}

.lingxyh-system-page .system-path {
	display:flex;
	align-items:center;
	gap:8px;
	min-width:0;
	font-size:12px;
}

.lingxyh-system-page .system-path b {
	flex:0 0 auto;
	color:#555;
}

.lingxyh-system-page .system-path span {
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:#777;
}

.lingxyh-system-page #nodePath {
	color:#d33;
	font-weight:bold;
}

.lingxyh-system-page .system-scale {
	display:flex;
	gap:5px;
	flex:0 0 auto;
}

.lingxyh-system-page .system-scale-btn {
	min-width:35px;
	padding:0 10px;
}

/* 图谱 */
.lingxyh-system-graph {
	position:relative;
	width:100%;
}

.lingxyh-system-graph .system-scroll {
	position:relative;
	height:690px;
	overflow:auto;
	border-radius:15px;
	background:#07141fd6;
}

.lingxyh-system-graph .system-canvas {
	position:relative;
	min-width:900px;
	min-height:620px;
	transform-origin:top left;
}

.lingxyh-system-graph .system-lines {
	position:absolute;
	inset:0;
	z-index:1;
	width:100%;
	height:100%;
	overflow:visible;
	pointer-events:none;
}

.lingxyh-system-graph .system-line {
	fill:none;
	stroke:rgba(178,188,197,.78);
	stroke-width:2;
	stroke-linecap:square;
	stroke-linejoin:miter;
	vector-effect:non-scaling-stroke;
}

.lingxyh-system-graph .system-line.active {
	stroke:#d33;
	stroke-width:2.6;
}

/* 节点 */
.lingxyh-system-graph .system-node {
	position:absolute;
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-width:108px;
	max-width:150px;
	min-height:38px;
	padding:8px 12px;
	gap:3px;
	border:1px solid #9aa4ad;
	border-radius:8px;
	background:#e5e8eb;
	color:#303840;
	text-align:center;
	line-height:1.35;
}

.lingxyh-system-graph .system-node.serial-node {
	background:#efb65f;
	border-color:#d18f2f;
	color:#3c2b14;
}

.lingxyh-system-graph .system-node.active {
	background:#d33 !important;
	border-color:#d33 !important;
	color:#fff !important;
}

.lingxyh-system-graph .system-node.system-tag-match {
	border-color:#d33;
	box-shadow:0 0 0 3px rgba(221,51,51,.28);
}

.lingxyh-system-graph .system-node-title {
	display:block;
	width:100%;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:13px;
	font-weight:bold;
	line-height:1.25;
}

.lingxyh-system-graph .system-node-subtexts {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:2px 6px;
	width:100%;
	min-width:0;
}

.lingxyh-system-graph .system-node-subtext {
	display:inline-block;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:rgba(65,74,84,.66);
	font-size:9px;
	line-height:1.2;
}

.lingxyh-system-graph .system-node-subtext-serial {
	font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.lingxyh-system-graph .system-node-subtext-alias {
	opacity:.88;
}

.lingxyh-system-graph .system-node-subtext-relation {
	font-weight:bold;
	color:#8b4a50;
}

.lingxyh-system-graph .serial-node .system-node-subtext {
	color:rgba(60,43,20,.66);
}

.lingxyh-system-graph .system-node.active .system-node-subtext {
	color:rgba(255,255,255,.76) !important;
}

.lingxyh-system-graph .system-node:has(.system-node-subtexts) {
	min-height:50px;
}

.lingxyh-system-graph .system-relation-field {
	min-width:auto !important;
	min-height:auto !important;
	padding:2px 6px !important;
	border:0 !important;
	background:rgba(255,255,255,.86) !important;
	color:#59626c !important;
	font-size:12px !important;
	font-weight:bold !important;
	box-shadow:none !important;
	pointer-events:none;
}

.lingxyh-system-graph .system-node-status {
	position:absolute;
	top:-6px;
	right:-6px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:16px;
	height:16px;
	border:1px solid rgba(255,255,255,.72);
	border-radius:50%;
	box-shadow:0 2px 6px rgba(0,0,0,.18);
	font-size:9px;
	font-weight:bold;
}

.lingxyh-system-graph .system-node-status-normal {
	display:none;
}

.lingxyh-system-graph .system-node-status-uncertain {
	background:#f0b34d;
	color:#49310d;
}

.lingxyh-system-graph .system-node-status-disputed {
	background:#d33;
	color:#fff;
}

.lingxyh-system-graph .system-focus-pulse {
	animation:systemFocusPulse .75s ease;
}

@keyframes systemFocusPulse {
	0% { box-shadow:0 0 0 0 rgba(221,51,51,.55); }
	100% { box-shadow:0 0 0 14px rgba(221,51,51,0); }
}

/* 缩略图 */
.lingxyh-system-graph .system-mini {
	position:absolute;
	right:12px;
	bottom:12px;
	z-index:100;
	width:170px;
	height:126px;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.24);
	border-radius:10px;
	background:rgba(7,20,31,.95);
	box-shadow:0 10px 28px rgba(0,0,0,.32);
	pointer-events:none;
}

.lingxyh-system-graph .system-mini-lines,
.lingxyh-system-graph .system-mini-nodes {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.lingxyh-system-graph .system-mini-line {
	fill:none;
	stroke:#7e8992;
	stroke-width:1.2;
	stroke-linecap:square;
	stroke-linejoin:miter;
}

.lingxyh-system-graph .system-mini-line.active {
	stroke:#d33;
	stroke-width:1.7;
}

.lingxyh-system-graph .system-mini-node {
	position:absolute;
	width:7px;
	height:7px;
	margin:-3.5px 0 0 -3.5px;
	border-radius:50%;
	background:#aeb6bd;
	box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

.lingxyh-system-graph .system-mini-node.serial {
	background:#efb65f;
}

.lingxyh-system-graph .system-mini-node.current {
	background:#d33;
	box-shadow:0 0 0 2px rgba(221,51,51,.28);
}

.lingxyh-system-graph .system-mini-node.field {
	width:5px;
	height:5px;
	margin:-2.5px 0 0 -2.5px;
	border-radius:1px;
	background:#87919a;
}

/* 左侧详情 */
.lingxyh-system-page .system-intro-summary,
.lingxyh-system-page .system-muted,
.lingxyh-system-page .system-relation-note {
	margin:0;
	color:#68727e;
	font-size:12px;
	line-height:1.75;
}

.lingxyh-system-page .system-detail-list {
	display:grid;
	margin-top:4px;
}

.lingxyh-system-page .system-detail-row {
	display:grid;
	grid-template-columns:62px minmax(0,1fr);
	gap:8px;
	padding:8px 0;
	border-bottom:1px solid rgba(80,90,100,.12);
	font-size:12px;
}

.lingxyh-system-page .system-detail-row:last-child,
.lingxyh-system-page .system-row:last-child {
	border-bottom:0;
}

.lingxyh-system-page .system-detail-intro,
.lingxyh-system-page .system-detail-note {
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid rgba(80,90,100,.12);
}

.lingxyh-system-page .system-detail-intro p,
.lingxyh-system-page .system-detail-note p {
	margin:0;
	color:#68727e;
	font-size:12px;
	line-height:1.7;
}

.lingxyh-system-page .system-actions,
.lingxyh-system-page .system-chips {
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-top:10px;
}

.lingxyh-system-page .system-actions:empty {
	display:none;
}

.lingxyh-system-page .system-quick-btn,
.lingxyh-system-page .system-node-tag,
.lingxyh-system-page .system-tag-btn {
	padding:6px 10px;
	border:1px solid rgba(0,0,0,.12);
	border-radius:20px;
	background:rgba(255,255,255,.64);
	color:#4e5863;
	font-size:12px;
	cursor:pointer;
}

.lingxyh-system-page .system-quick-btn:hover,
.lingxyh-system-page .system-node-tag:hover,
.lingxyh-system-page .system-tag-btn:hover {
	background:#dd3333b3;
	border-color:#dd3333b3;
	color:#fff;
}

.lingxyh-system-page .system-tag-btn.active {
	background:rgba(221,51,51,.16);
	border-color:rgba(221,51,51,.5);
	color:#963c43;
	font-weight:bold;
}

/* 体系列表 */
.lingxyh-system-page .system-group {
	overflow:hidden;
	border:1px solid rgba(45,55,68,.13);
	border-radius:10px;
	background:rgba(255,255,255,.35);
}

.lingxyh-system-page .system-group + .system-group {
	margin-top:8px;
}

.lingxyh-system-page .system-group-head {
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	min-height:38px;
	padding:0 10px;
	border:0;
	background:rgba(255,255,255,.48);
	color:#4f5964;
	font-size:12px;
	font-weight:bold;
	cursor:pointer;
}

.lingxyh-system-page .system-group-body {
	padding:6px;
	border-top:1px solid rgba(45,55,68,.1);
}

.lingxyh-system-page .system-group-body[hidden] {
	display:none !important;
}

 .lingxyh-system-page .system-group-body .lingxyh-btn {
	display:block;
	width:100%;
	min-height:32px;
	margin:3px 0;
	padding:0 9px;
	text-align:left;
}

.lingxyh-system-page .system-group-body .lingxyh-btn.active {
	background:#dd3333b3;
	border-color:#dd3333b3;
	color:#fff;
}

.lingxyh-system-page .lingxyh-btn.small {
	min-height:29px;
	padding:0 9px;
	font-size:12px;
}

/* 右侧统计、图例 */
.lingxyh-system-page .system-row {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:10px 0;
	border-bottom:1px solid rgba(80,90,100,.14);
}

.lingxyh-system-page .system-legend {
	display:grid;
	gap:8px;
	margin-top:12px;
	padding-top:10px;
	border-top:1px solid rgba(80,90,100,.12);
}

.lingxyh-system-page .system-legend > div {
	display:flex;
	align-items:center;
	gap:8px;
	color:#59626d;
	font-size:12px;
}

.lingxyh-system-page .system-legend-dot {
	width:10px;
	height:10px;
	border-radius:50%;
}

.lingxyh-system-page .system-legend-dot.current {
	background:#d33;
}

.lingxyh-system-page .system-legend-dot.serial {
	background:#efb65f;
}

.lingxyh-system-page .system-legend-dot.normal {
	background:#aeb6bd;
}

.lingxyh-system-page .system-legend-line {
	width:20px;
	border-top:2px solid;
}

.lingxyh-system-page .system-legend-line.active {
	border-color:#d33;
}

.lingxyh-system-page .system-legend-line.normal {
	border-color:#aeb6bd;
}

.lingxyh-system-page .system-relation-note {
	margin-top:8px;
	font-size:10px;
}

.system-toast {
	position:fixed;
	left:50%;
	bottom:28px;
	z-index:5000;
	padding:10px 16px;
	border-radius:20px;
	background:rgba(15,22,32,.92);
	color:#fff;
	opacity:0;
	transform:translate(-50%,18px);
	transition:.2s;
}

.system-toast.show {
	opacity:1;
	transform:translate(-50%,0);
}

@media screen and (max-width:1025px) {
	.lingxyh-system-page .system-side {
		display:none;
	}
}

@media screen and (max-width:600px) {
	.lingxyh-system-page .system-toolbar {
		flex-direction:column;
	}

	.lingxyh-system-page .system-scale {
		align-self:flex-end;
	}

	.lingxyh-system-graph .system-mini {
		right:8px;
		bottom:8px;
		width:140px;
		height:104px;
	}
}