:root{
	--bg-primary:#0f172a;
	--bg-secondary:#1e293b;
	--bg-tertiary:#334155;
	--text-primary:#f8fafc;
	--text-secondary:#cbd5e1;
	--text-muted:#94a3b8;
	--accent-primary:#3b82f6;
	--accent-secondary:#8b5cf6;
	--accent-success:#10b981;
	--accent-warning:#f59e0b;
	--accent-danger:#ef4444;
	--border-color:#475569;
	--shadow-color:rgba(0, 0, 0, 0.5);
	--node-root:#3b82f6;
	--node-work:#8b5cf6;
	--node-education:#10b981;
	--node-publications:#f59e0b;
	--node-skills:#ec4899;
	--node-other:#6366f1;
	--node-leaf:#14b8a6;
	--spacing-xs:4px;
	--spacing-sm:8px;
	--spacing-md:16px;
	--spacing-lg:24px;
	--spacing-xl:32px;
	--spacing-2xl:48px;
	--radius-sm:6px;
	--radius-md:10px;
	--radius-lg:16px;
	--radius-full:9999px;
	--transition-fast:150ms ease;
	--transition-normal:300ms ease;
	--transition-slow:500ms ease
}
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-tap-highlight-color:transparent
}
html{
	height:100%;
	overflow-x:hidden
}
body{
	font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	background:var(--bg-primary);
	color:var(--text-primary);
	line-height:1.6;
	min-height:100vh;
	overflow-x:hidden;
	position:relative;
	padding-bottom:env(safe-area-inset-bottom)
}
@supports (-webkit-touch-callout:none){
	body{
		min-height:-webkit-fill-available
	}
}
.app-container{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	overflow-x:hidden
}
.top-controls{
	position:fixed;
	top:var(--spacing-md);
	right:var(--spacing-md);
	display:flex;
	gap:var(--spacing-sm);
	z-index:1000;
	pointer-events:auto
}
.control-btn{
	width:40px;
	height:40px;
	background:var(--bg-secondary);
	border:1px solid var(--border-color);
	border-radius:var(--radius-md);
	color:var(--text-primary);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all var(--transition-fast);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	pointer-events:auto;

}
.control-btn:active{
	transform:scale(.95)
}
.control-btn:hover{
	background:var(--bg-tertiary);
	transform:translateY(-2px);
	box-shadow:0 8px 25px var(--shadow-color)
}
.zoom-group{
	display:flex;
	gap:var(--spacing-xs);
	background:var(--bg-secondary);
	padding:var(--spacing-xs);
	border-radius:var(--radius-md);
	border:1px solid var(--border-color)
}
.main-content{
	flex:1;
	display:grid;
	grid-template-columns:1fr 350px;
	gap:var(--spacing-lg);
	padding:var(--spacing-2xl) var(--spacing-xl);
	max-width:1600px;
	margin:0 auto;
	width:100%;
	min-height:0;
	overflow:visible
}
.graph-section{
	background:var(--bg-secondary);
	border-radius:var(--radius-lg);
	padding:var(--spacing-xl);
	border:1px solid var(--border-color);
	box-shadow:0 20px 40px var(--shadow-color);
	min-height:0;
	display:flex;
	flex-direction:column
}
.graph-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:var(--spacing-xl);
	padding-bottom:var(--spacing-md);
	border-bottom:1px solid var(--border-color);
	flex-shrink:0
}
.graph-title{
	font-size:1.8rem;
	font-weight:700;
	background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent
}
.status-indicator{
	display:flex;
	align-items:center;
	gap:var(--spacing-sm);
	padding:var(--spacing-xs) var(--spacing-md);
	background:var(--bg-tertiary);
	border-radius:var(--radius-full)
}
.status-dot{
	width:8px;
	height:8px;
	background:var(--accent-success);
	border-radius:50%;
	animation:pulse 2s infinite
}
@keyframes pulse{
	0%,100%{
		opacity:1
	}
	50%{
		opacity:.5
	}
}
.status-text{
	font-size:.875rem;
	color:var(--text-secondary)
}
.graph-container{
	position:relative;
	width:100%;
	height:65vh;
	min-height:500px;
	background:rgba(15,23,42,.5);
	border-radius:var(--radius-md);
	border:1px solid var(--border-color);
	overflow:hidden;
	flex-shrink:0;
	
}
#graph-svg{
	width:100%;
	height:100%;
	display:block;

	-webkit-user-select:none;
	user-select:none
}
.node circle{
	cursor:pointer;
	transition:all var(--transition-normal);
	filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
	pointer-events:all
}
.node text{
	font-family:Inter,sans-serif;
	font-weight:600;
	font-size:12px;
	fill:#fff;
	pointer-events:none;
	text-shadow:0 1px 3px rgba(0,0,0,.8);
	-webkit-user-select:none;
	user-select:none
}
.node-icon{
	font-family:FontAwesome!important;
	font-size:14px;
	fill:#fff;
	pointer-events:none;
	text-shadow:0 1px 3px rgba(0,0,0,.8)
}
.link{
	stroke:var(--border-color);
	stroke-width:2;
	stroke-opacity:.7;
	transition:all var(--transition-normal);
	pointer-events:none
}
.node:hover circle{
	filter:brightness(1.2) drop-shadow(0 6px 12px rgba(0,0,0,.4));
	transform:scale(1.05)
}
.back-button-container{
	position:absolute;
	top:var(--spacing-md);
	left:var(--spacing-md);
	z-index:10;
	pointer-events:auto
}
.back-btn{
	display:flex;
	align-items:center;
	gap:var(--spacing-sm);
	padding:var(--spacing-sm) var(--spacing-md);
	background:var(--bg-tertiary);
	color:var(--text-primary);
	border:1px solid var(--border-color);
	border-radius:var(--radius-md);
	cursor:pointer;
	font-weight:500;
	transition:all var(--transition-fast);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	pointer-events:auto;

}
.back-btn:active{
	transform:scale(.98)
}
.back-btn:hover{
	background:var(--accent-primary);
	transform:translateX(-2px)
}
.graph-instructions{
	margin-top:var(--spacing-lg);
	padding:var(--spacing-md);
	background:var(--bg-tertiary);
	border-radius:var(--radius-md);
	border-left:4px solid var(--accent-primary);
	flex-shrink:0
}
.graph-instructions p{
	color:var(--text-secondary);
	font-size:.875rem;
	display:flex;
	align-items:center;
	gap:var(--spacing-md);
	flex-wrap:wrap
}
.graph-instructions i{
	color:var(--accent-primary)
}
.info-section{
	background:var(--bg-secondary);
	border-radius:var(--radius-lg);
	border:1px solid var(--border-color);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	box-shadow:0 20px 40px var(--shadow-color);
	min-height:0
}
.info-header{
	padding:var(--spacing-lg);
	background:var(--bg-tertiary);
	border-bottom:1px solid var(--border-color);
	flex-shrink:0
}
.info-header h2{
	font-size:1.4rem;
	display:flex;
	align-items:center;
	gap:var(--spacing-sm)
}
.info-content{
	flex:1;
	padding:var(--spacing-lg);
	overflow-y:auto;
	min-height:0;
	-webkit-overflow-scrolling:touch
}
#nodeInfo{
	min-height:100%
}
.welcome-message{
	text-align:center;
	padding:var(--spacing-xl) 0
}
.welcome-message h3{
	font-size:1.5rem;
	margin-bottom:var(--spacing-md);
	color:var(--accent-primary)
}
.welcome-tip{
	display:inline-flex;
	align-items:center;
	gap:var(--spacing-sm);
	padding:var(--spacing-sm) var(--spacing-md);
	background:var(--bg-tertiary);
	border-radius:var(--radius-md);
	margin-top:var(--spacing-lg)
}
.welcome-tip i{
	color:var(--accent-warning)
}
.node-info-content h3{
	color:var(--accent-primary);
	margin-bottom:var(--spacing-md);
	padding-bottom:var(--spacing-sm);
	border-bottom:1px solid var(--border-color)
}
.node-info-content p{
	margin-bottom:var(--spacing-md);
	color:var(--text-secondary)
}
.app-footer{
	text-align:center;
	padding:var(--spacing-lg);
	background:var(--bg-tertiary);
	border-top:1px solid var(--border-color);
	color:var(--text-muted);
	font-size:.875rem;
	flex-shrink:0
}
.modal{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.8);
	z-index:2000;
	backdrop-filter:blur(5px);
	-webkit-backdrop-filter:blur(5px);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch
}
.modal-content{
	position:relative;
	background:var(--bg-secondary);
	margin:5vh auto;
	width:90%;
	max-width:600px;
	border-radius:var(--radius-lg);
	overflow:hidden;
	border:1px solid var(--border-color);
	animation:modalSlideIn .3s ease-out;
	max-height:90vh;
	display:flex;
	flex-direction:column
}
@keyframes modalSlideIn{
	from{
		opacity:0;
		transform:translateY(-30px)
	}
	to{
		opacity:1;
		transform:translateY(0)
	}
}
.modal-header{
	padding:var(--spacing-lg);
	background:var(--bg-tertiary);
	border-bottom:1px solid var(--border-color);
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-shrink:0
}
.modal-header h2{
	font-size:1.5rem;
	word-break:break-word
}
.close-modal{
	font-size:1.5rem;
	cursor:pointer;
	color:var(--text-muted);
	transition:color var(--transition-fast);
	flex-shrink:0;
	padding:5px
}
.close-modal:hover{
	color:var(--text-primary)
}
.modal-body{
	padding:var(--spacing-lg);
	overflow-y:auto;
	flex:1;
	min-height:0;
	-webkit-overflow-scrolling:touch
}
.modal-footer{
	padding:var(--spacing-lg);
	background:var(--bg-tertiary);
	border-top:1px solid var(--border-color);
	display:flex;
	gap:var(--spacing-md);
	justify-content:flex-end;
	flex-shrink:0
}
.btn-primary,.btn-secondary{
	padding:var(--spacing-sm) var(--spacing-lg);
	border-radius:var(--radius-md);
	font-weight:600;
	cursor:pointer;
	transition:all var(--transition-fast);
	border:none;
	display:inline-flex;
	align-items:center;
	gap:var(--spacing-sm);

}
.btn-primary:active,.btn-secondary:active{
	transform:scale(.95)
}
.btn-primary{
	background:var(--accent-primary);
	color:#fff
}
.btn-primary:hover{
	background:#2563eb;
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(59,130,246,.4)
}
.btn-secondary{
	background:var(--bg-tertiary);
	color:var(--text-primary);
	border:1px solid var(--border-color)
}
.btn-secondary:hover{
	background:var(--border-color)
}
::-webkit-scrollbar{
	width:8px;
	height:8px
}
::-webkit-scrollbar-track{
	background:var(--bg-tertiary);
	border-radius:var(--radius-sm)
}
::-webkit-scrollbar-thumb{
	background:var(--border-color);
	border-radius:var(--radius-sm)
}
::-webkit-scrollbar-thumb:hover{
	background:var(--accent-primary)
}
@media (max-width:1200px){
	.main-content{
		grid-template-columns:1fr;
		grid-template-rows:auto auto;
		gap:var(--spacing-lg);
		min-height:auto;
		overflow-y:auto
	}
	.graph-container{
		height:60vh;
		min-height:400px
	}
	.info-section{
		max-height:400px
	}
}
@media (max-width:768px){
	.app-container{
		overflow-y:auto;
		-webkit-overflow-scrolling:touch
	}
	.main-content{
		padding:var(--spacing-md);
		gap:var(--spacing-md);
		grid-template-rows:auto auto;
		min-height:auto
	}
	.graph-section,.info-section{
		padding:var(--spacing-md);
		min-height:auto
	}
	.graph-container{
		height:50vh;
		min-height:300px
	}
	.graph-header{
		flex-direction:column;
		align-items:flex-start;
		gap:var(--spacing-sm)
	}
	.top-controls{
		position:sticky;
		top:var(--spacing-sm);
		right:var(--spacing-sm);
		justify-content:flex-end;
		padding:var(--spacing-sm);
		background:rgba(30,41,59,.9);
		backdrop-filter:blur(10px);
		border-radius:var(--radius-md);
		margin:var(--spacing-sm);
		width:auto
	}
	.control-btn{
		width:44px;
		height:44px;
		font-size:1.1rem
	}
	.modal-content{
		width:95%;
		margin:2vh auto;
		max-height:96vh
	}
	.info-section{
		max-height:300px
	}
	body{
		overflow-y:auto
	}
}
@media (max-width:480px){
	.graph-container{
		height:45vh;
		min-height:250px
	}
	.graph-title{
		font-size:1.4rem
	}
	.info-header h2{
		font-size:1.2rem
	}
	.graph-instructions p{
		flex-direction:column;
		align-items:flex-start;
		gap:var(--spacing-xs);
		font-size:.8rem
	}
	.main-content{
		padding:var(--spacing-sm)
	}
}
@media (max-width:768px) and (orientation:landscape){
	.main-content{
		grid-template-columns:1fr 1fr;
		grid-template-rows:1fr;
		height:auto
	}
	.graph-container{
		height:70vh
	}
	.info-section{
		max-height:70vh
	}
}
@supports (-webkit-touch-callout:none){
	.graph-container{
		height:-webkit-fill-available;
		min-height:50vh
	}
}
.loading{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:200px
}
.loading-spinner{
	width:40px;
	height:40px;
	border:3px solid var(--border-color);
	border-top-color:var(--accent-primary);
	border-radius:50%;
	animation:spin 1s linear infinite
}
@keyframes spin{
	to{
		transform:rotate(360deg)
	}
}
.back-btn:disabled{
	opacity:.5;
	cursor:not-allowed;
	pointer-events:none
}
.back-btn:disabled:hover{
	background:var(--bg-tertiary);
	transform:none
}
@keyframes pulse-border{
	0%,100%{
		stroke-opacity:1
	}
	50%{
		stroke-opacity:.5
	}
}
@keyframes pulse-glow{
	0%,100%{
		box-shadow:0 0 5px rgba(16,185,129,.5)
	}
	50%{
		box-shadow:0 0 15px rgba(16,185,129,.8)
	}
}
.node-icon{
	font-family:FontAwesome!important;
	text-anchor:middle;
	dominant-baseline:middle;
	fill:#fff;
	text-shadow:0 1px 3px rgba(0,0,0,.8);
	-webkit-user-select:none;
	user-select:none
}
@media (max-width:768px){
	.node-icon{
		font-size:12px
	}
}
@media (min-width:769px){
	.node-icon{
		font-size:14px
	}
}
.main-content{
	flex:1;
	display:grid;
	grid-template-columns:1.2fr .8fr;
	gap:var(--spacing-lg);
	padding:var(--spacing-2xl) var(--spacing-xl);
	max-width:1600px;
	margin:0 auto;
	width:100%;
	min-height:0;
	overflow:visible
}
.info-section{
	background:var(--bg-secondary);
	border-radius:var(--radius-lg);
	border:1px solid var(--border-color);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	box-shadow:0 20px 40px var(--shadow-color);
	min-width:380px
}
.info-content{
	flex:1;
	padding:var(--spacing-lg);
	overflow-y:auto;
	min-height:0;
	-webkit-overflow-scrolling:touch;
	max-height:none
}
.text-content{
	word-wrap:break-word;
	overflow-wrap:break-word;
	hyphens:auto;
	line-height:1.6
}
@media (max-width:1400px){
	.main-content{
		grid-template-columns:1fr 1fr
	}
	.info-section{
		min-width:350px
	}
}
@media (max-width:1200px){
	.main-content{
		grid-template-columns:1fr;
		grid-template-rows:auto auto;
		gap:var(--spacing-lg);
		min-height:auto;
		overflow-y:visible
	}
	.info-section{
		min-width:100%;
		max-height:400px
	}
}
@media (max-width:768px){
	.app-container{
		height:auto;
		min-height:100vh;
		overflow-y:auto;
		display:flex;
		flex-direction:column
	}
	.main-content{
		display:flex;
		flex-direction:column;
		padding:var(--spacing-md);
		gap:var(--spacing-md);
		flex:1;
		min-height:auto;
		overflow-y:visible
	}
	.graph-section,.info-section{
		width:100%;
		min-height:auto
	}
	.graph-container{
		height:60vh;
		min-height:400px
	}
	.info-section{
		max-height:none;
		height:auto;
		min-height:300px;
		flex:0 0 auto
	}
	.info-content{
		max-height:none;
		overflow-y:visible
	}
	.top-controls{
		position:sticky;
		top:var(--spacing-sm);
		right:var(--spacing-sm);
		justify-content:flex-end;
		padding:var(--spacing-sm);
		background:rgba(30,41,59,.95);
		backdrop-filter:blur(10px);
		border-radius:var(--radius-md);
		margin:var(--spacing-sm);
		z-index:2000;
		width:auto
	}
}
@media (max-width:768px) and (orientation:landscape){
	.main-content{
		flex-direction:row
	}
	.graph-container{
		height:75vh
	}
	.info-section{
		height:75vh;
		min-height:auto
	}
}
@media (max-width:480px){
	.graph-container{
		height:55vh;
		min-height:350px
	}
	.info-section{
		min-height:250px
	}
	.info-header h2{
		font-size:1.2rem
	}
}
@supports (-webkit-touch-callout:none){
	.info-content{
		-webkit-overflow-scrolling:touch;
		overflow-y:scroll;
		max-height:none
	}
}
.node-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height:100%
}
.node-content{
	pointer-events:none
}
.node-icon-display{
	width:20px;
	height:20px;
	object-fit:contain;
	margin-right:8px;
	vertical-align:middle;
	border-radius:4px
}
.icon-container{
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:8px
}
.node-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height:100%;
	pointer-events:none
}
.node-text-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	width:100%
}
.modal-title-container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
	flex-wrap:wrap
}
.modal-actions{
	display:flex;
	gap:8px;
	align-items:center
}
.btn-icon{
	background:0 0;
	border:none;
	color:var(--text-primary);
	cursor:pointer;
	padding:6px;
	border-radius:4px;
	transition:all var(--transition-fast);
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px
}
.btn-icon:hover{
	background:rgba(255,255,255,.1)
}
.btn-icon:active{
	transform:scale(.95)
}
.iframe-container{
	position:relative;
	width:100%;
	height:60vh;
	min-height:400px;
	border-radius:var(--radius-md);
	overflow:hidden;
	background:var(--bg-primary)
}
#iframeLoading{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background:var(--bg-primary);
	z-index:10
}
#iframeLoading p{
	margin-top:16px;
	color:var(--text-secondary)
}
#detailIframe{
	width:100%;
	height:100%;
	border:none;
	background:#fff
}
.fallback-content{
	padding:20px;
	background:var(--bg-tertiary);
	border-radius:var(--radius-md)
}
.modal.fullscreen .modal-content{
	width:95vw;
	height:95vh;
	margin:2.5vh auto;
	max-height:95vh
}
.modal.fullscreen .iframe-container{
	height:calc(95vh - 140px);
	min-height:0
}
@media (max-width:768px){
	.iframe-container{
		height:50vh;
		min-height:300px
	}
	.modal.fullscreen .modal-content{
		width:100vw;
		height:100vh;
		margin:0;
		border-radius:0
	}
	.modal.fullscreen .iframe-container{
		height:calc(100vh - 120px)
	}
	.modal-title-container{
		flex-direction:column;
		align-items:flex-start;
		gap:10px
	}
	.modal-actions{
		align-self:flex-end
	}
}
.iframe-loading .loading-spinner{
	width:40px;
	height:40px;
	border:3px solid var(--border-color);
	border-top-color:var(--accent-primary);
	border-radius:50%;
	animation:spin 1s linear infinite
}
@keyframes spin{
	to{
		transform:rotate(360deg)
	}
}
#iframeLoading::-webkit-scrollbar{
	width:6px
}
#iframeLoading::-webkit-scrollbar-track{
	background:var(--bg-tertiary)
}
#iframeLoading::-webkit-scrollbar-thumb{
	background:var(--accent-primary);
	border-radius:3px
}
.modal-body{
	padding:0!important;
	display:flex;
	flex-direction:column
}
#iframeLoading{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background:var(--bg-primary);
	z-index:10;
	padding:20px
}
.fallback-content{
	padding:25px;
	background:var(--bg-primary);
	min-height:400px;
	flex:1
}

.detail-content{
	background:var(--bg-secondary);
	padding:15px;
	border-radius:var(--radius-sm);
	margin-top:10px;
	border:1px solid var(--border-color)
}
@keyframes spin{
	0%{
		transform:rotate(0)
	}
	100%{
		transform:rotate(360deg)
	}
}
.loading-spinner{
	width:50px;
	height:50px;
	border:3px solid var(--border-color);
	border-top-color:var(--accent-primary);
	border-radius:50%;
	animation:spin 1s linear infinite
}
.modal-body::-webkit-scrollbar{
	width:8px
}
.modal-body::-webkit-scrollbar-track{
	background:var(--bg-tertiary)
}
.modal-body::-webkit-scrollbar-thumb{
	background:var(--accent-primary);
	border-radius:4px
}
@media (max-width:768px){
	.fallback-content{
		padding:20px
	}
}
.modal-content{
	display:flex;
	flex-direction:column;
	max-height:90vh
}
.modal-body{
	flex:1;
	min-height:0;
	position:relative;
	overflow:hidden
}
.fallback-content{
  height: 100vh;
  overflow-y: auto;
  touch-action: pan-y;
}
.node-details{
	padding:25px;
	max-width:800px;
	margin:0 auto;
	width:100%
}

.detail-header{
	display:flex;
	align-items:flex-start;
	gap:20px;
	margin-bottom:30px;
	padding-bottom:20px;
	border-bottom:1px solid var(--border-color)
}
.detail-header-icon{
	flex-shrink:0
}
.detail-header-content{
	flex:1
}
.detail-header-content h3{
	font-size:1.8rem;
	margin:0 0 10px 0;
	color:var(--text-primary);
	line-height:1.3
}
.detail-section{
	margin-bottom:30px
}
.detail-section h4{
	font-size:1.2rem;
	color:var(--accent-primary);
	margin:0 0 15px 0;
	display:flex;
	align-items:center;
	gap:10px
}
#detailIframe,#iframeLoading,.fallback-content{
	border-radius:0 0 var(--radius-lg) var(--radius-lg)
}
#iframeLoading .loading-spinner{
	width:50px;
	height:50px;
	border:3px solid var(--border-color);
	border-top-color:var(--accent-primary);
	border-radius:50%;
	animation:spin 1s linear infinite
}
.modal-footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:var(--spacing-lg);
	background:var(--bg-tertiary);
	border-top:1px solid var(--border-color);
	border-radius:0 0 var(--radius-lg) var(--radius-lg)
}
@media (max-width:768px){
	.detail-header{
		flex-direction:column;
		align-items:center;
		text-align:center;
		gap:15px
	}
	.detail-header-content h3{
		font-size:1.5rem
	}
	.node-details{
		padding:20px
	}
	.detail-section{
		margin-bottom:25px
	}
}
.node-info-content{
	padding:0
}
@keyframes node-click{
	0%{
		transform:scale(1)
	}
	50%{
		transform:scale(.98)
	}
	100%{
		transform:scale(1)
	}
}
.node-info-content{
	padding:0!important;
	display:flex!important;
	flex-direction:column!important;
	gap:16px!important;
	width:100%!important
}
.node-info-header{
	display:flex!important;
	align-items:flex-start!important;
	gap:16px!important;
	margin-bottom:0!important;
	padding:16px 0 20px 0!important;
	border-bottom:1px solid var(--border-color)!important
}
.node-info-header-content{
	flex:1!important;
	min-width:0!important
}
.node-info-title{
	margin:0 0 8px 0!important;
	font-size:1.4rem!important;
	font-weight:600!important;
	color:var(--text-primary)!important;
	word-break:break-word!important;
	line-height:1.3!important
}
.section-header{
	display:flex!important;
	justify-content:space-between!important;
	align-items:center!important;
	margin-bottom:16px!important
}
.section-header h4{
	margin:0!important;
	color:var(--accent-primary)!important;
	font-size:1.1rem!important;
	display:flex!important;
	align-items:center!important;
	gap:10px!important
}
.info-back-btn{
	margin-top:20px!important;
	padding:12px 20px!important;
	background:var(--bg-tertiary)!important;
	color:var(--text-primary)!important;
	border:1px solid var(--border-color)!important;
	border-radius:var(--radius-md)!important;
	cursor:pointer!important;
	font-weight:600!important;
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	gap:8px!important;
	transition:all .2s ease!important
}
.info-back-btn:hover{
	background:var(--accent-primary)!important;
	border-color:var(--accent-primary)!important
}
@media (max-width:768px){
	.node-info-title{
		font-size:1.2rem!important
	}
}
@keyframes node-click{
	0%{
		transform:scale(1)
	}
	50%{
		transform:scale(.98)
	}
	100%{
		transform:scale(1)
	}
}
.info-content{
	display:flex!important;
	flex-direction:column!important
}
#nodeInfo{
	flex:1!important;
	display:flex!important;
	flex-direction:column!important
}

/* Info header back button */
.info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
}

.info-back-btn {
    display: none;
    width: 36px;
    height: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    font-size: 1rem;
}

.info-back-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: translateX(-2px);
}

.info-back-btn:active {
    transform: scale(0.95);
}

.info-header h2 {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    flex: 1;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .info-back-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .info-header h2 {
        font-size: 1.2rem;
    }
}

/* Add to existing CSS */
.link {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Optional: Add link hover effect */
.link:hover {
    stroke-width: 3;
    stroke: #3b82f6;
}

/* Make sure paths are on top of nodes */
.node {
    z-index: 10;
}

.link {
    z-index: 1;
}

.details-link {
    color: #3498db;
    text-decoration: none;
    border-bottom: 1px dashed #3498db;
    word-break: break-all;
}

.details-link:hover {
    color: #2980b9;
    border-bottom: 1px solid #2980b9;
}

.icon-wrapper img{
	width: min(max(10vw, 150px),200px);
}