/* Network canvas tools: background picker menu, 2.5D toggle, zoom cluster, add-node icon.
   (public/js/canvas-ambient.js, public/js/canvas-depth.js) */
html[data-color-mode] #networkTabContent .graph-main > .toolbar #toggleDepthBtn,
html[data-color-mode] #networkTabContent .graph-main > .toolbar #toggle3dBtn {
  height: 32px; padding: 0 14px !important; border-radius: 8px !important;
  background: var(--console-bg) !important; color: var(--console-fg) !important;
  border: 1px solid var(--console-border) !important; font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important; cursor: pointer;
}
html[data-color-mode] #networkTabContent .graph-main > .toolbar #toggleDepthBtn.active {
  background: var(--console-fg) !important; color: var(--console-bg) !important;
}
#ambientToggleBtn .canvas-bg-caret { opacity: .7; }

.canvas-bg-menu {
  position: absolute; z-index: 60; min-width: 190px; padding: 6px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  background: rgba(10, 10, 12, .95); backdrop-filter: blur(16px); box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
.canvas-bg-menu[hidden] { display: none; }
html[data-color-mode] .canvas-bg-menu button {
  display: flex !important; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px !important;
  border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #f5f5f2 !important;
  text-align: left; cursor: pointer; font: inherit !important;
}
html[data-color-mode] .canvas-bg-menu button:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
html[data-color-mode] .canvas-bg-menu button.is-active { background: rgba(255, 255, 255, .12) !important; }
html[data-color-mode] .canvas-bg-menu button.is-active::after { content: '✓'; margin-left: auto; color: #22c55e; }
.canvas-bg-swatch { width: 26px; height: 18px; flex: 0 0 auto; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .15); background: #0b0b10; }
.canvas-bg-swatch--constellation { background: radial-gradient(circle at 30% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 65%, #fff 0 1px, transparent 2px), radial-gradient(circle at 55% 25%, #22c55e 0 1.5px, transparent 2.5px), #0b0b10; }
.canvas-bg-swatch--aurora { background: radial-gradient(circle at 25% 40%, rgba(34, 197, 94, .8), transparent 60%), radial-gradient(circle at 75% 60%, rgba(139, 92, 246, .8), transparent 60%), #0b0b10; }
.canvas-bg-swatch--grid { background: linear-gradient(transparent 45%, rgba(34, 197, 94, .7) 46% 50%, transparent 51%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 1px, transparent 1px 6px), #0b0b10; }
.canvas-bg-swatch--stars { background: radial-gradient(circle at 20% 30%, #fff 0 .8px, transparent 1.5px), radial-gradient(circle at 60% 70%, #fff 0 .8px, transparent 1.5px), radial-gradient(circle at 80% 20%, #fff 0 .8px, transparent 1.5px), radial-gradient(circle at 40% 55%, #fff 0 1px, transparent 2px), #05050a; }
.canvas-bg-swatch--waves { background: radial-gradient(ellipse 60% 30% at 50% 40%, transparent 70%, rgba(34, 197, 94, .7) 72% 78%, transparent 80%), #0b0b10; }
.canvas-bg-swatch--pulse { background: radial-gradient(circle, rgba(255, 255, 255, .45) 0 1px, transparent 1.5px) 0 0 / 5px 5px, #0b0b10; }
.canvas-bg-swatch--off { background: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .5) 47% 53%, transparent 54%), #0b0b10; }

/* Zoom cluster (right edge, above the add-node button) */
.canvas-zoom {
  position: absolute; right: 24px; bottom: 172px; z-index: 100;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  background: rgba(10, 10, 12, .88); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
html[data-color-mode] .canvas-zoom button {
  display: grid !important; place-items: center; width: 40px; height: 40px; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #f5f5f2 !important; cursor: pointer;
}
html[data-color-mode] .canvas-zoom button + button { border-top: 1px solid rgba(255, 255, 255, .1) !important; }
html[data-color-mode] .canvas-zoom button:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
.canvas-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-color-mode="light"] .canvas-zoom { background: rgba(255, 255, 255, .92); border-color: rgba(0, 0, 0, .12); }
html[data-color-mode="light"] .canvas-zoom button { color: #111 !important; }
html[data-color-mode="light"] .canvas-zoom button:hover { background: rgba(0, 0, 0, .06) !important; color: #000 !important; }
/* Add-node: same spot, now an icon so it doesn't read as zoom */
#floatingAddBtn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* 2.5D colour picker (caret next to the 2.5D button) */
html[data-color-mode] #networkTabContent .graph-main > .toolbar #toggleDepthBtn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html[data-color-mode] #networkTabContent .graph-main > .toolbar .depth-color-btn {
  display: inline-flex !important; align-items: center; gap: 4px; height: 32px; padding: 0 8px !important; margin-left: -8px;
  border: 1px solid var(--console-border) !important; border-left: 0 !important; border-radius: 0 8px 8px 0 !important;
  background: var(--console-bg) !important; color: var(--console-fg) !important; cursor: pointer;
}
.depth-color-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--depth-swatch, linear-gradient(135deg, #fff, #777)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.depth-color-menu { min-width: 200px; padding: 10px; }
.depth-color-title { padding: 2px 4px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: rgba(245, 245, 242, .6); text-transform: uppercase; }
.depth-color-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
html[data-color-mode] .depth-color-menu .depth-color-grid button {
  width: 22px !important; height: 22px !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
  background: var(--c) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); cursor: pointer;
}
html[data-color-mode] .depth-color-menu .depth-color-grid button.is-active { box-shadow: 0 0 0 2px #0a0a0c, 0 0 0 4px #fff !important; }
html[data-color-mode] .depth-color-menu .depth-color-grid button.is-active::after { content: none; }
.depth-color-custom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 6px 4px 0; border-top: 1px solid rgba(255, 255, 255, .1); color: #f5f5f2; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.depth-color-custom input { width: 34px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }

/* Background accent colour row (inside the Background menu) */
.canvas-bg-colors { margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid rgba(255, 255, 255, .1); }
.canvas-bg-colors-title { padding: 0 2px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: rgba(245, 245, 242, .6); text-transform: uppercase; }
.canvas-bg-color-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
html[data-color-mode] .canvas-bg-menu .canvas-bg-color-row button {
  width: 20px !important; height: 20px !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
  background: var(--c) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
html[data-color-mode] .canvas-bg-menu .canvas-bg-color-row button.is-active { box-shadow: 0 0 0 2px #0a0a0c, 0 0 0 4px #fff !important; background: var(--c) !important; }
html[data-color-mode] .canvas-bg-menu .canvas-bg-color-row button.is-active::after { content: none; }
.canvas-bg-custom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: #f5f5f2; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.canvas-bg-custom input { width: 34px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
/* Swatches live inside #networkTabContent, whose button rules use an id selector; match it. */
html[data-color-mode] #networkTabContent .canvas-bg-menu .canvas-bg-color-row button,
html[data-color-mode] #networkTabContent .depth-color-menu .depth-color-grid button {
  width: 20px !important; height: 20px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
  background: var(--c) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35) !important;
}
html[data-color-mode] #networkTabContent .canvas-bg-menu .canvas-bg-color-row button.is-active,
html[data-color-mode] #networkTabContent .depth-color-menu .depth-color-grid button.is-active { box-shadow: 0 0 0 2px #0a0a0c, 0 0 0 4px #fff !important; }
html[data-color-mode] #networkTabContent .canvas-bg-menu .canvas-bg-color-row button:hover,
html[data-color-mode] #networkTabContent .depth-color-menu .depth-color-grid button:hover { background: var(--c) !important; transform: scale(1.12); }
html[data-color-mode] #networkTabContent :is(.canvas-bg-custom, .depth-color-custom) input[type="color"] {
  width: 34px !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; flex: 0 0 auto;
}
.canvas-bg-swatch--sunset { background: radial-gradient(circle at 50% 100%, #ffd666 0 30%, #ec4899 34%, transparent 36%), linear-gradient(transparent 60%, rgba(236, 72, 153, .5) 61%), #0b0b10; }
.canvas-bg-swatch--tunnel { background: radial-gradient(transparent 20%, #22c55e 22% 26%, transparent 28% 44%, #22c55e 46% 50%, transparent 52%), #0b0b10; }
.canvas-bg-swatch--matrix { background: repeating-linear-gradient(90deg, rgba(34, 197, 94, .7) 0 2px, transparent 2px 5px), #04120a; }
.canvas-bg-swatch--radar { background: conic-gradient(from 90deg at 50% 50%, rgba(34, 197, 94, .7), transparent 25%), radial-gradient(transparent 40%, rgba(34, 197, 94, .5) 42% 46%, transparent 48%), #0b0b10; }
.canvas-bg-swatch--hex { background: radial-gradient(circle, rgba(34, 197, 94, .6) 0 1.5px, transparent 2px) 0 0 / 6px 5px, #0b0b10; }
.canvas-bg-swatch--terrain { background: repeating-linear-gradient(175deg, transparent 0 3px, rgba(34, 197, 94, .6) 3px 4px), #0b0b10; }
.canvas-bg-menu { max-height: min(78vh, 640px); overflow-y: auto; }
.canvas-bg-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 245, 242, .5); }
.canvas-bg-group:first-child { color: #22c55e; }
.canvas-bg-swatch--ticker { background: linear-gradient(160deg, transparent 45%, #22c55e 46% 50%, transparent 51%), linear-gradient(transparent 70%, rgba(34, 197, 94, .3) 71%), #0b0b10; }
.canvas-bg-swatch--tickers { background: linear-gradient(transparent 28%, rgba(255, 255, 255, .55) 30% 34%, transparent 36% 58%, rgba(34, 197, 94, .8) 60% 66%, transparent 68%) 0 0 / 70% 100% no-repeat, linear-gradient(transparent 28%, rgba(239, 68, 68, .8) 30% 34%, transparent 36%) 100% 0 / 25% 100% no-repeat, #0b0b10; }
.canvas-bg-swatch--lines { background: linear-gradient(170deg, transparent 30%, rgba(255, 255, 255, .35) 31% 33%, transparent 34%), linear-gradient(185deg, transparent 48%, #22c55e 49% 53%, transparent 54%), linear-gradient(175deg, transparent 70%, rgba(255, 255, 255, .25) 71% 73%, transparent 74%), #0b0b10; }
.canvas-bg-swatch--candles { background: linear-gradient(90deg, transparent 12%, rgba(34, 197, 94, .7) 12% 20%, transparent 20% 36%, rgba(239, 68, 68, .7) 36% 44%, transparent 44% 60%, rgba(34, 197, 94, .7) 60% 68%, transparent 68% 84%, rgba(34, 197, 94, .7) 84% 92%, transparent 92%) center / 100% 45% no-repeat, #0b0b10; }
.canvas-bg-swatch--orderbook { background: linear-gradient(to top right, rgba(34, 197, 94, .7) 0 40%, transparent 41%) left bottom / 50% 80% no-repeat, linear-gradient(to top left, rgba(239, 68, 68, .7) 0 40%, transparent 41%) right bottom / 50% 80% no-repeat, #0b0b10; }
.canvas-bg-swatch--heatmap { background: conic-gradient(rgba(34, 197, 94, .55) 0 25%, rgba(239, 68, 68, .45) 0 50%, rgba(34, 197, 94, .25) 0 75%, rgba(239, 68, 68, .2) 0) 0 0 / 9px 9px, #0b0b10; }
.canvas-bg-swatch--volume { background: repeating-linear-gradient(90deg, rgba(34, 197, 94, .6) 0 2px, transparent 2px 4px, rgba(239, 68, 68, .6) 4px 6px, transparent 6px 8px) bottom / 100% 45% no-repeat, #0b0b10; }
.canvas-bg-swatch--sparkgrid { background: linear-gradient(160deg, transparent 45%, rgba(34, 197, 94, .7) 46% 50%, transparent 51%) 0 0 / 50% 50%, #0b0b10; }
.canvas-bg-swatch--contours { background: repeating-radial-gradient(ellipse at 30% 60%, transparent 0 3px, rgba(255, 255, 255, .3) 3px 4px), #0b0b10; }
.canvas-bg-swatch--bokeh { background: radial-gradient(circle at 30% 40%, rgba(34, 197, 94, .5) 0 18%, transparent 30%), radial-gradient(circle at 70% 65%, rgba(255, 255, 255, .3) 0 14%, transparent 25%), #0b0b10; }
.canvas-bg-swatch--flow { background: repeating-linear-gradient(35deg, transparent 0 3px, rgba(255, 255, 255, .25) 3px 4px), #0b0b10; }
.canvas-bg-swatch--ripples { background: repeating-radial-gradient(circle at 40% 50%, transparent 0 3px, rgba(34, 197, 94, .45) 3px 4px), #0b0b10; }