/* ================================================================
   Node Editor — Visual Policy Creator (Phase 1)
   ================================================================ */

/* ── Creator mode tab switcher ── */
.creator-mode-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--sp-4);
}

.creator-mode-tab {
  padding: var(--sp-2) var(--sp-6);
  border: none;
  border-bottom: 2.5px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -2px;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.creator-mode-tab:hover { color: var(--text-primary); }
.creator-mode-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Node editor canvas area (replaces creator-left in node mode) ── */
.creator-node-area {
  display: none;
}
.creator-main.node-mode .creator-left       { display: none; }
.creator-main.node-mode .creator-node-area  { display: block; }

/* Override grid ratio for node mode: give canvas more space */
.creator-main.node-mode {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

/* ── Outer wrapper ── */
.ne-wrap {
  display: flex;
  height: calc(100vh - 52px - 46px - 140px);
  min-height: 520px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

/* ── Palette sidebar ── */
.ne-palette {
  width: 176px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  gap: var(--sp-2);
  overflow-y: auto;
  z-index: 10;
}

.ne-palette-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-1);
}

.ne-palette-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  cursor: grab;
  font-size: 0.8rem;
  color: var(--text-primary);
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ne-palette-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  background: var(--accent-subtle);
}
.ne-palette-item:active { cursor: grabbing; }
.ne-palette-item-icon { font-size: 0.95rem; line-height: 1; }

.ne-palette-hint {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.5;
  border-top: 1px solid var(--border);
}

/* ── Viewport (pan/zoom area) ── */
.ne-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: default;
  background:
    radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 24px 24px;
}

/* ── Canvas (transformed) ── */
.ne-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

/* ── SVG edge layer — sits at viewport level, same stacking as canvas ── */
.ne-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.ne-edge {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke 0.15s;
}
.ne-edge:hover  { stroke: var(--accent); stroke-width: 3; }
.ne-edge.selected { stroke: var(--accent); stroke-width: 3; }
/* ── Edge delete button (shown at midpoint of selected edge) ── */
.ne-edge-del {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--deny-border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--deny-border);
  font-size: 0.6rem;
  cursor: pointer;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s;
  padding: 0;
}
.ne-edge-del:hover {
  background: var(--deny-bg);
}

.ne-edge-temp {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

/* ── Node base ── */
.ne-node {
  position: absolute;
  width: 230px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  user-select: none;
  transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
  /* Own stacking context: ports (z-index:5 inside) won't bleed above sibling nodes */
  isolation: isolate;
  /* Allow ports to extend outside node bounds */
  overflow: visible;
}
.ne-node.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow-md);
}
.ne-node.connecting-target {
  border-color: #10B981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.25), var(--shadow-md);
}

/* ── Connection drag feedback ── */
/* Source node (where drag started) */
.ne-conn-source {
  opacity: 0.6;
}
/* Valid drop targets — green glow + port pulse */
.ne-conn-valid {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.25), var(--shadow-sm) !important;
}
.ne-conn-valid .ne-port-in {
  border-color: #10B981;
  background: rgba(16,185,129,0.2);
  transform: scale(1.6);
  transition: transform 0.15s, background 0.15s;
}
/* Hover over a valid target — stronger green glow */
.ne-conn-hover {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.35), var(--shadow-md) !important;
  transform: scale(1.01);
}
.ne-conn-hover .ne-port-in {
  border-color: #10B981;
  background: #10B981;
  transform: scale(1.8);
}
/* Invalid drop targets — dimmed */
.ne-conn-invalid {
  opacity: 0.28;
  filter: grayscale(0.4);
}

/* ── Node header ── */
.ne-node-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-3);
  border-bottom: 1px solid var(--border);
  cursor: grab;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-secondary);
  min-height: 38px;
}
.ne-node-hdr:active { cursor: grabbing; }
.ne-node-icon { font-size: 0.9rem; line-height: 1; flex-shrink: 0; }
.ne-node-label {
  flex: 1;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ne-node-del {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.ne-node:hover .ne-node-del  { opacity: 1; }
.ne-node-del:hover {
  background: var(--deny-bg);
  color: var(--deny-border);
}

/* ── Color-coded headers per node type ── */
.ne-node--policy .ne-node-hdr  { background: #EFF6FF; border-bottom-color: #BFDBFE; }
.ne-node--subject .ne-node-hdr  { background: #F0FDF4; border-bottom-color: #BBF7D0; }
.ne-node--action .ne-node-hdr   { background: #FFF7ED; border-bottom-color: #FED7AA; }
.ne-node--resource .ne-node-hdr { background: #FDF4FF; border-bottom-color: #E9D5FF; }
.ne-node--condition .ne-node-hdr{ background: var(--condition-bg); border-bottom-color: var(--condition-border); }
.ne-node--rule.effect-permit .ne-node-hdr { background: var(--permit-bg); border-bottom-color: var(--permit-border); }
.ne-node--rule.effect-deny .ne-node-hdr   { background: var(--deny-bg);   border-bottom-color: var(--deny-border);   }

[data-theme="dark"] .ne-node--policy .ne-node-hdr   { background: #1E3A5F; border-bottom-color: #1D4ED8; }
[data-theme="dark"] .ne-node--subject .ne-node-hdr  { background: #052e16; border-bottom-color: #064e3b; }
[data-theme="dark"] .ne-node--action .ne-node-hdr   { background: #431407; border-bottom-color: #7c2d12; }
[data-theme="dark"] .ne-node--resource .ne-node-hdr { background: #2e1065; border-bottom-color: #4c1d95; }

/* ── Node body ── */
.ne-node-body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ne-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ne-field-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ne-field input[type="text"],
.ne-field select {
  width: 100%;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ne-field input[type="text"]:focus,
.ne-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.ne-field-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}
.ne-field input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

/* ── Advanced section toggle ── */
.ne-adv-wrap {
  margin-top: var(--sp-2);
  border-top: 1px dashed var(--border);
  padding-top: var(--sp-2);
}
.ne-adv-toggle {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--text-muted, #888);
  padding: 2px 0;
  letter-spacing: 0.02em;
}
.ne-adv-toggle:hover { color: var(--accent); }
.ne-adv-toggle.ne-adv-active { color: var(--accent); font-weight: 600; }
.ne-adv-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.ne-custom-input {
  margin-top: 3px;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.72rem;
  padding: 2px 5px;
  border: 1px dashed var(--accent);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
}
.ne-cv-fields {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ne-cv-fields input {
  width: 100%;
  box-sizing: border-box;
}

/* ── Effect toggle ── */
.ne-effect-toggle {
  display: flex;
  gap: var(--sp-2);
}
.ne-effect-btn {
  flex: 1;
  padding: 4px var(--sp-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.ne-effect-btn.active-permit {
  border-color: var(--permit-border);
  background: var(--permit-bg);
  color: var(--permit-border);
}
.ne-effect-btn.active-deny {
  border-color: var(--deny-border);
  background: var(--deny-bg);
  color: var(--deny-border);
}

/* ── Port handles ── */
.ne-port {
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 50%;
  cursor: crosshair;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
  z-index: 5;
}
.ne-port:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
  transform: scale(1.4);
}
.ne-port-in  { left: -8px; top: 19px; }
.ne-port-out { right: -8px; top: 19px; }

/* ── Toolbar (top-right of viewport) ── */
.ne-toolbar {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 20;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: var(--shadow-sm);
}
.ne-toolbar-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.ne-toolbar-btn:hover:not(:disabled) { background: var(--bg-secondary); color: var(--text-primary); }
.ne-toolbar-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ne-toolbar-btn--danger:hover:not(:disabled) { background: var(--deny-bg); color: var(--deny-border); }
.ne-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
}

/* ── Validation indicator (bottom-right) ── */
.ne-validation {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px var(--sp-3);
  font-size: 0.75rem;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  z-index: 20;
  pointer-events: none;
}
.ne-validation-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ne-validation-dot.valid   { background: var(--permit-border); }
.ne-validation-dot.invalid { background: var(--deny-border); }
.ne-validation-dot.warning { background: #F59E0B; }

/* ── Empty hint ── */
.ne-empty-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--text-muted);
  pointer-events: none;
  font-size: 0.88rem;
  line-height: 1.7;
}
.ne-empty-hint-icon { font-size: 2.5rem; margin-bottom: var(--sp-2); }

/* ================================================================
   Phase 2 — Note Node
   ================================================================ */
.ne-node--note {
  width: 220px;
}
.ne-node--note .ne-node-hdr {
  background: #FEF9C3;
  border-bottom-color: #FDE68A;
}
[data-theme="dark"] .ne-node--note .ne-node-hdr {
  background: #713f12;
  border-bottom-color: #92400e;
}
.ne-note-text {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  padding: 6px 8px;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.ne-note-text:focus {
  outline: none;
  border-color: var(--accent);
}

/* ================================================================
   Phase 2 — Node Color Marking
   ================================================================ */
.ne-node-color {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.ne-node:hover .ne-node-color { opacity: 0.7; }
.ne-node-color:hover { opacity: 1 !important; }

/* Color variants applied via data-color attribute on .ne-node */
.ne-node[data-color="blue"] .ne-node-hdr    { background: #DBEAFE; border-bottom-color: #93C5FD; }
.ne-node[data-color="green"] .ne-node-hdr   { background: #DCFCE7; border-bottom-color: #86EFAC; }
.ne-node[data-color="orange"] .ne-node-hdr  { background: #FFEDD5; border-bottom-color: #FDBA74; }
.ne-node[data-color="red"] .ne-node-hdr     { background: #FEE2E2; border-bottom-color: #FCA5A5; }
.ne-node[data-color="purple"] .ne-node-hdr  { background: #F3E8FF; border-bottom-color: #D8B4FE; }

[data-theme="dark"] .ne-node[data-color="blue"] .ne-node-hdr   { background: #1e3a5f; border-bottom-color: #1d4ed8; }
[data-theme="dark"] .ne-node[data-color="green"] .ne-node-hdr  { background: #052e16; border-bottom-color: #064e3b; }
[data-theme="dark"] .ne-node[data-color="orange"] .ne-node-hdr { background: #431407; border-bottom-color: #7c2d12; }
[data-theme="dark"] .ne-node[data-color="red"] .ne-node-hdr    { background: #450a0a; border-bottom-color: #7f1d1d; }
[data-theme="dark"] .ne-node[data-color="purple"] .ne-node-hdr { background: #2e1065; border-bottom-color: #4c1d95; }

/* Color dot on the button itself */
.ne-node-color[data-color="blue"]   { color: #3B82F6; }
.ne-node-color[data-color="green"]  { color: #10B981; }
.ne-node-color[data-color="orange"] { color: #F97316; }
.ne-node-color[data-color="red"]    { color: #EF4444; }
.ne-node-color[data-color="purple"] { color: #A855F7; }

/* ================================================================
   Phase 2 — Node Search Highlight
   ================================================================ */
.ne-node--found {
  box-shadow: 0 0 0 3px #FBBF24, var(--shadow-md) !important;
  border-color: #FBBF24 !important;
}

/* Search input in toolbar */
.ne-toolbar-search {
  height: 24px;
  width: 110px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-family: inherit;
  transition: border-color 0.15s, width 0.2s;
}
.ne-toolbar-search:focus {
  outline: none;
  border-color: var(--accent);
  width: 150px;
}
.ne-toolbar-search::placeholder { color: var(--text-muted); }

/* ================================================================
   Phase 2 — Minimap
   ================================================================ */
.ne-minimap {
  position: absolute;
  bottom: 44px;
  left: var(--sp-3);
  width: 160px;
  height: 90px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  z-index: 20;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.ne-minimap:hover { opacity: 1; }

/* ================================================================
   Phase 2 — Template Modal
   ================================================================ */
/* ── Delete confirmation ── */
.ne-del-confirm {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.ne-del-confirm-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.2));
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.9rem;
}
.ne-del-confirm-text {
  font-weight: 500;
  color: var(--text-primary);
  margin-right: var(--sp-2);
}
.ne-del-confirm-yes {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 4px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
}
.ne-del-confirm-yes:hover { background: #dc2626; }
.ne-del-confirm-no {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}
.ne-del-confirm-no:hover { opacity: 0.8; }

.ne-tpl-modal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.ne-tpl-modal-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.2));
  width: min(680px, 92%);
  max-height: 82%;
  overflow-y: auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.ne-tpl-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ne-tpl-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.ne-tpl-close-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.12s;
}
.ne-tpl-close-btn:hover { background: var(--bg-secondary); }

.ne-tpl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 520px) { .ne-tpl-grid { grid-template-columns: 1fr; } }

.ne-tpl-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ne-tpl-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.ne-tpl-icon { font-size: 1.6rem; line-height: 1; }
.ne-tpl-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}
.ne-tpl-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}
.ne-tpl-load-btn {
  align-self: flex-start;
  padding: 5px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.ne-tpl-load-btn:hover { background: var(--accent); color: #fff; }

/* ================================================================
   Phase 2 — Palette template button + separator
   ================================================================ */
.ne-palette-sep {
  height: 1px;
  background: var(--border);
  margin: var(--sp-1) 0;
}
.ne-palette-tpl-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ne-palette-tpl-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}