.eanb-wrap { max-width: 100%; }
.eanb-title { margin-bottom: 8px; }

.eanb-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.eanb-toolbar input[type="text"] { min-width: 220px; }
.eanb-status { margin-left: auto; color: #646970; font-style: italic; }

.eanb-body {
	display: flex;
	gap: 10px;
	height: 640px;
}

.eanb-palette {
	width: 210px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	overflow-y: auto;
	padding: 8px;
	flex-shrink: 0;
}
.eanb-palette-group { margin-bottom: 12px; }
.eanb-palette-group h4 { margin: 4px 0; font-size: 11px; text-transform: uppercase; color: #787c82; }
.eanb-palette-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 6px 8px;
	margin-bottom: 4px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	cursor: pointer;
	font-size: 12px;
}
.eanb-palette-item:hover { background: #e9eaeb; }

.eanb-toolbar-sep { width: 1px; height: 24px; background: #dcdcde; margin: 0 4px; }
.eanb-zoom-level { min-width: 42px; text-align: center; font-size: 12px; color: #3c434a; }

.eanb-canvas-wrap {
	flex: 1;
	position: relative;
	background: #fbfbfc;
	background-image: radial-gradient(#dcdcde 1px, transparent 1px);
	background-size: 18px 18px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	overflow: auto;
	cursor: grab;
}
.eanb-canvas-wrap.eanb-panning { cursor: grabbing; }
.eanb-canvas { position: relative; z-index: 2; width: 6000px; height: 4000px; transform-origin: 0 0; pointer-events: none; }
/* Dây nằm sau node. Canvas trong suốt không chặn click; riêng node bật lại pointer-events để vẫn kéo/chỉnh bình thường. */
.eanb-edges { position: absolute; z-index: 1; top: 0; left: 0; width: 6000px; height: 4000px; pointer-events: none; transform-origin: 0 0; overflow: visible; }
.eanb-edges path.eanb-edge-visible { fill: none; stroke-width: 2; pointer-events: none; transition: stroke-width .12s ease, filter .12s ease; }
.eanb-edges path.eanb-edge-visible.eanb-edge-hover { stroke-width: 4; filter: drop-shadow(0 0 2px rgba(0,0,0,.22)); }
.eanb-edges path.eanb-edge-visible.eanb-edge-selected { stroke-width: 4; stroke-dasharray: 7 4; filter: drop-shadow(0 0 2px rgba(0,0,0,.25)); }
/* Vùng bắt click rộng hơn nét dây để người dùng không cần bấm quá chính xác. */
.eanb-edges path.eanb-edge-hit { fill: none; stroke: transparent; stroke-width: 18px; pointer-events: stroke; cursor: pointer; }
.eanb-edges .eanb-edge-delete-icon { cursor: pointer; pointer-events: all; }
.eanb-edges .eanb-edge-delete-icon .eanb-edge-delete-hit { fill: transparent; stroke: none; }
.eanb-edges .eanb-edge-delete-icon .eanb-edge-delete-bg { fill: #d63638; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.eanb-edges .eanb-edge-delete-icon line { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.eanb-edges .eanb-edge-delete-icon:hover .eanb-edge-delete-bg { fill: #b32d2e; stroke-width: 2; }
.eanb-edges path.eanb-edge-temp { fill: none; stroke: #2271b1; stroke-width: 2; stroke-dasharray: 4 3; pointer-events: none; }

.eanb-node {
	position: absolute;
	pointer-events: auto;
	width: 170px;
	background: #fff;
	border: 1.5px solid #8c8f94;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	cursor: move;
	user-select: none;
	font-size: 12px;
}
.eanb-node.selected { border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34,113,177,.25); }
.eanb-node-header {
	position: relative;
	min-height: 27px;
	box-sizing: border-box;
	padding: 5px 8px;
	line-height: 1.35;
	font-weight: 600;
	border-bottom: 1px solid #f0f0f1;
	border-radius: 6px 6px 0 0;
	color: #1d2327;
	overflow: visible;
	white-space: normal;
	word-break: break-word;
}
.eanb-node-body { padding: 0; color: #646970; min-height: 14px; }
.eanb-node-empty { padding: 6px 8px; color: #a7aaad; }
.eanb-node-param-summary { padding: 4px 8px 6px; font-size: 11px; }
.eanb-param-line { line-height: 1.5; word-break: break-word; }
.eanb-note-summary { white-space: pre-wrap; line-height: 1.55; }
.eanb-param-line::before { content: "- "; color: #a7aaad; }
.eanb-param-line + .eanb-param-line { margin-top: 1px; }
.eanb-color-swatch {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,.2);
	margin-right: 3px;
	vertical-align: middle;
}
.eanb-port-add-row {
	padding: 3px 8px 3px 16px;
	font-size: 11px;
	color: #2271b1;
	cursor: pointer;
}
.eanb-port-add-row:hover { text-decoration: underline; }
.eanb-port-remove {
	position: absolute;
	right: 4px;
	top: 0;
	color: #b32d2e;
	cursor: pointer;
	font-weight: bold;
	padding: 0 2px;
}
.eanb-action-condition {
	padding: 4px 8px 6px;
	border-top: 1px dashed #e0e0e0;
	font-size: 11px;
	line-height: 1.4;
	color: #2c3338;
	white-space: normal;
	word-break: break-word;
}

.eanb-node[data-cat="data"] .eanb-node-header { background: #eaf2ff; }
.eanb-node[data-cat="indicator"] .eanb-node-header { background: #e6f5ee; }
.eanb-node[data-cat="compare"] .eanb-node-header { background: #fdf0e0; }
.eanb-node[data-cat="logic"] .eanb-node-header { background: #f3eaf9; }
.eanb-node[data-cat="action"] .eanb-node-header { background: #fbe7e7; }

.eanb-port {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #787c82;
	cursor: crosshair;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}
.eanb-port.output { right: -6px; border-color: #2271b1; }
.eanb-port.input { left: -6px; }
.eanb-port.connectable { background: #d7f0da; border-color: #00a32a; }
.eanb-port-row { position: relative; min-height: 24px; line-height: 1.35; box-sizing: border-box; padding: 4px 20px 4px 16px; }
.eanb-port-row-label {
	display: block;
	overflow: visible;
	white-space: normal;
	word-break: break-word;
	color: #3c434a;
}

.eanb-inspector {
	width: 260px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 12px;
	overflow-y: auto;
	flex-shrink: 0;
}
.eanb-inspector.eanb-inspector-note-mode { width: 360px; }
.eanb-note-editor {
	min-height: 220px !important;
	max-height: 420px;
	padding: 10px 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 13px !important;
	line-height: 1.55;
	white-space: pre-wrap;
	resize: vertical;
}
.eanb-note-tools, .eanb-note-editor-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}
.eanb-note-tools .eanb-note-char-count, .eanb-note-editor-footer .eanb-note-char-count {
	margin-right: auto;
	font-size: 11px;
	color: #787c82;
}
.eanb-note-modal-editor {
	display: block;
	width: 100%;
	min-height: 55vh;
	box-sizing: border-box;
	padding: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.65;
	white-space: pre-wrap;
	resize: vertical;
}
.eanb-note-editor-footer { justify-content: flex-end; }
.eanb-hint { color: #787c82; font-size: 12px; }
.eanb-field { margin-bottom: 10px; }
.eanb-field label { display: block; font-size: 11px; color: #646970; margin-bottom: 3px; }
.eanb-field input, .eanb-field select, .eanb-field textarea { width: 100%; }
.eanb-field textarea { min-height: 110px; resize: vertical; font-family: Consolas, Monaco, monospace; font-size: 12px; }
.eanb-field input[type="checkbox"] { width: auto; margin-right: 4px; vertical-align: middle; }
.eanb-field input[type="color"] { height: 30px; padding: 2px; cursor: pointer; }

.eanb-modal {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,.5);
	z-index: 100000;
	display: flex; align-items: center; justify-content: center;
}
.eanb-modal-content {
	background: #fff; width: 720px; max-width: 90%; max-height: 85vh;
	overflow-y: auto; border-radius: 6px; padding: 20px; position: relative;
}
.eanb-modal-close {
	position: absolute; top: 10px; right: 14px; border: none; background: none;
	font-size: 22px; cursor: pointer; color: #646970;
}
.eanb-modal-body textarea {
	width: 100%; height: 400px; font-family: monospace; font-size: 12px;
}
.eanb-warning { color: #b32d2e; font-size: 12px; margin: 6px 0; }
.eanb-ai-feedback { white-space: pre-wrap; line-height: 1.6; font-size: 13px; color: #1d2327; }
.eanb-ai-textarea { width: 100%; height: 140px; font-size: 13px; }
.eanb-ai-loading { color: #646970; font-style: italic; }

/* Thư viện node nâng cao */
.eanb-palette-search-wrap { position: sticky; top: 0; z-index: 3; background: #fff; padding-bottom: 8px; }
.eanb-palette-search { width: 100%; min-height: 32px; }
.eanb-palette-group { margin: 0 0 8px; border-bottom: 1px solid #f0f0f1; padding-bottom: 6px; }
.eanb-palette-group summary { cursor: pointer; margin: 4px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #646970; }
.eanb-node[data-cat="event"] .eanb-node-header { background: #e8f5ff; }
.eanb-node[data-cat="math"] .eanb-node-header { background: #fff7d6; }
.eanb-node[data-cat="trade"] .eanb-node-header { background: #e8f7f2; }
.eanb-node[data-cat="utility"] .eanb-node-header { background: #f1f1f1; }

/* v0.30 Commercial Readiness */
.eanb-preflight-summary {
	padding: 12px 14px;
	margin: 12px 0 18px;
	border-left: 4px solid #646970;
	background: #f6f7f7;
	font-weight: 600;
}
.eanb-preflight-summary.passed { border-left-color: #00a32a; background: #edfaef; color: #006b1b; }
.eanb-preflight-summary.failed { border-left-color: #d63638; background: #fcf0f1; color: #8a2424; }
.eanb-error-list { padding: 10px 14px; margin: 10px 0; border-left: 4px solid #d63638; background: #fcf0f1; }
.eanb-error-list ul, .eanb-warning ul { margin: 8px 0 0 20px; list-style: disc; }
#eanb-modal-body code { overflow-wrap: anywhere; }