:root {
  --lj-inset-highlight: none;
  --lj-material-environment: var(--lj-white-10);
  --lj-material-overlay: var(--lj-white-80);
  --lj-canvas-bg: var(--lj-white-10);
  --lj-canvas-dot: rgb(74 91 111 / 6%);
}

.vue-flow__background circle {
  r: 2px;
  fill: var(--lj-canvas-dot) !important;
  opacity: 1 !important;
}

.wf__flow {
  position: relative;
  background-color: transparent !important;
  background-image: none !important;
}

.wf__flow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    rgb(74 91 111 / 6%) 0 1.7px,
    transparent 1.8px
  );
  background-position: 0 0;
  background-size: 18px 18px;
}

.wf__flow .vue-flow__background {
  opacity: 0 !important;
}

.wf__flow .vue-flow__transformationpane {
  z-index: 2 !important;
}

.flow-overlay {
  background-image: radial-gradient(
    circle,
    var(--lj-canvas-dot) 2px,
    transparent 2px
  ) !important;
}

.flow-node__table-wrap,
.chart-panel {
  background: var(--lj-white-80) !important;
}

.flow-node--selected {
  box-shadow: none !important;
}

.flow-node__group-mark,
.flow-node__group-card-mark {
  display: none !important;
}

.flow-node__group-head {
  gap: 0 !important;
}

.flow-node__group-card {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 12px !important;
}

.flow-node__group-card-meta {
  grid-column: 1 !important;
  margin-top: 8px;
}

.top-bar__query,
.canvas-toolbar__filter-btn {
  border: 1px solid var(--lj-white-100) !important;
  background: var(--lj-white-20) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blur-module) !important;
  -webkit-backdrop-filter: var(--lj-blur-module) !important;
}

.canvas-toolbar__filter-btn:hover {
  border-color: var(--lj-white-100) !important;
  background: var(--lj-white-40) !important;
  color: var(--lj-text) !important;
  box-shadow: none !important;
}

.vue-flow__controls {
  border: 1px solid var(--lj-white-100) !important;
  border-radius: var(--lj-radius-lg) !important;
  background: var(--lj-white-20) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blur-module) !important;
  -webkit-backdrop-filter: var(--lj-blur-module) !important;
}

.vue-flow__controls-button {
  border: 0 !important;
  border-bottom: 1px solid var(--lj-white-60) !important;
  background: transparent !important;
}

.vue-flow__controls-button:last-child {
  border-bottom: 0 !important;
}

.vue-flow__controls-button:hover {
  background: var(--lj-white-40) !important;
  fill: var(--lj-text) !important;
}

.vue-flow__edges {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.vue-flow__edge {
  opacity: 1 !important;
  visibility: visible !important;
}

.vue-flow__edge-path {
  stroke: rgb(74 91 111 / 60%) !important;
  stroke-width: 1.6px !important;
  vector-effect: non-scaling-stroke;
  opacity: 1 !important;
  visibility: visible !important;
}

.vue-flow__edge-labels {
  z-index: 4 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wf-drawer {
  top: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  height: auto !important;
  border-radius: var(--lj-radius-xl) !important;
  box-shadow: none !important;
}

.wf-drawer .panel-shell {
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid var(--lj-border-highlight) !important;
  border-radius: var(--lj-radius-xl) !important;
  background: var(--lj-white-80) !important;
  backdrop-filter: var(--lj-blur-lg) !important;
  -webkit-backdrop-filter: var(--lj-blur-lg) !important;
  box-shadow: var(--lj-shadow-overlay) !important;
}

.wf-drawer .panel-shell__header {
  padding: 16px 16px 14px !important;
  border-bottom: 1px solid var(--lj-border-highlight-soft) !important;
  background: var(--lj-white-100) !important;
  box-shadow: none !important;
}

.wf-drawer .panel-shell__tag {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--lj-action-bg);
  color: var(--lj-color-white) !important;
  font-size: var(--lj-fs-3xs);
  line-height: 1.2;
}

.wf-drawer .panel-shell__close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lj-white-80);
  color: var(--lj-text-secondary);
}

.wf-drawer .panel-shell__close:hover {
  background: var(--lj-action-bg);
  color: var(--lj-color-white);
}

.wf-drawer .panel-shell__body {
  padding-top: 14px !important;
  background: var(--lj-white-40);
}

.flow-edge-badge {
  gap: 0 !important;
  padding: 3px 8px !important;
  border: 1px solid var(--lj-action-bg) !important;
  border-radius: 999px !important;
  background: var(--lj-action-bg) !important;
  color: var(--lj-color-white) !important;
  box-shadow: 0 6px 14px rgb(29 33 37 / 12%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  line-height: 1.2;
}

.flow-edge-badge__dot {
  display: none !important;
}

.flow-edge-badge:hover {
  background: var(--lj-action-hover) !important;
  border-color: var(--lj-action-hover) !important;
}

/* Keep every translucent surface optically separated from the canvas. */
.flow-node {
  backdrop-filter: var(--lj-blur) !important;
  -webkit-backdrop-filter: var(--lj-blur) !important;
}

.flow-node--branch,
.intent-module {
  backdrop-filter: var(--lj-blur-module) !important;
  -webkit-backdrop-filter: var(--lj-blur-module) !important;
}

.flow-node__sql,
.flow-node__code-rows,
.flow-node__table-wrap,
.flow-node__branch-btn,
.flow-node__group-card,
.chart-panel,
.info-box,
.sub-intent,
.metric-card {
  backdrop-filter: var(--lj-blur-sm) !important;
  -webkit-backdrop-filter: var(--lj-blur-sm) !important;
}

.metric-card {
  border: 1px solid var(--lj-white-100) !important;
  background: var(--lj-white-80) !important;
}

.flow-node--view,
.flow-node--result,
.flow-node--data,
.wf-drawer .panel-shell,
.canvas-toolbar__dropdown {
  backdrop-filter: var(--lj-blur-lg) !important;
  -webkit-backdrop-filter: var(--lj-blur-lg) !important;
}

/* Client blue-white theme. This block intentionally replaces the glass theme. */
:root {
  --lj-neutral-border: #dfe4eb;
  --lj-neutral-border-soft: #e9edf2;
  --lj-primary: #4b7cf3;
  --lj-primary-hover: #356be9;
  --lj-primary-light: #edf3ff;
  --lj-primary-soft: #f3f7ff;
  --lj-primary-border: #b9ceff;
  --lj-primary-weak: #e8f0ff;
  --lj-primary-ring: rgb(75 124 243 / 18%);
  --lj-primary-chip-bg: #edf3ff;
  --lj-accent-green: #4fc497;
  --lj-accent-pink: #f26ca7;
  --lj-accent-orange: #f4a340;
  --lj-highlight: #f4a340;
  --lj-strategy: #8467f5;
  --lj-type-operation: #8467f5;
  --lj-type-rule: #8467f5;
  --lj-type-relation: #4b7cf3;
  --lj-type-object: #8467f5;
  --lj-type-field: #4b7cf3;
  --lj-type-source: #4b7cf3;
  --lj-type-strategy: #8467f5;
  --lj-type-result: #4fc497;
  --lj-success: #4fc497;
  --lj-success-bg: #effbf6;
  --lj-success-border: #a9e6cf;
  --lj-success-text: #27966d;
  --lj-text: #202a3a;
  --lj-text-secondary: #5e6b7e;
  --lj-text-muted: #8793a6;
  --lj-text-placeholder: #aab3c1;
  --lj-page-base: #f5f8ff;
  --lj-page-mid: #edf3ff;
  --lj-page-end: #f8faff;
  --lj-page-background: linear-gradient(180deg, #f4f7ff 0%, #eaf2ff 48%, #f8faff 100%);
  --lj-material-environment: #f7faff;
  --lj-material-module: #f3f7ff;
  --lj-material-info: #f8faff;
  --lj-material-card: #ffffff;
  --lj-material-card-hover: #f6f9ff;
  --lj-material-overlay: #ffffff;
  --lj-canvas-bg: #f8faff;
  --lj-canvas-background: #f8faff;
  --lj-canvas-inner: #ffffff;
  --lj-canvas-dot: rgb(91 137 225 / 20%);
  --lj-surface: #ffffff;
  --lj-node-surface: #ffffff;
  --lj-group-surface: #f3f7ff;
  --lj-card-surface: #ffffff;
  --lj-control-bg: #ffffff;
  --lj-control-active-bg: #edf3ff;
  --lj-toolbar-bg: #ffffff;
  --lj-panel-bg: #ffffff;
  --lj-header-bg: transparent;
  --lj-border: #d6e2f8;
  --lj-border-soft: #e2eaf7;
  --lj-border-card: #bfd2ff;
  --lj-border-highlight: #bfd2ff;
  --lj-border-highlight-soft: #dce7fb;
  --lj-border-selected: #4b7cf3;
  --lj-glass-border: #bfd2ff;
  --lj-edge-neutral: #8068f2;
  --lj-edge-blue: #2860ed;
  --lj-edge-dark: #4a5b6f;
  --lj-edge-light: #aab5c3;
  --lj-radius-xs: 2px;
  --lj-radius-sm: 2px;
  --lj-radius: 2px;
  --lj-radius-lg: 2px;
  --lj-radius-xl: 2px;
  --lj-inset-highlight: none;
  --lj-shadow-card: none;
  --lj-shadow-panel: none;
  --lj-shadow-overlay: 0 10px 28px rgb(67 99 157 / 12%);
  --lj-shadow-dropdown: 0 10px 28px rgb(67 99 157 / 14%);
  --lj-page-gap: 0px;
  --lj-page-padding-x: 0px;
  --lj-page-padding-bottom: 0px;
}

.lineage-page {
  background: var(--lj-page-background) !important;
}

.top-bar {
  min-height: 96px !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--lj-neutral-border-soft) !important;
  border-radius: 0 !important;
  background-color: #edf3ff !important;
  background-image:
    linear-gradient(90deg, rgb(245 248 255 / 36%), rgb(238 244 255 / 8%)),
    url('/assets/client-theme/header-banner.png') !important;
  background-repeat: no-repeat !important;
  background-position: center, center right !important;
  background-size: cover, cover !important;
}

.top-bar__title {
  color: #24406f !important;
  font-size: 17px !important;
}

.top-bar__subtitle {
  color: #71819c !important;
}

.top-bar__query {
  height: 42px !important;
  border: 1px solid #bfd2ff !important;
  border-radius: 2px !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow: 0 4px 14px rgb(70 108 177 / 8%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.top-bar__query-label {
  border-radius: 2px !important;
  background: #e8f0ff !important;
  color: var(--lj-primary) !important;
}

.lineage-center {
  margin: 0 0 12px !important;
  border: 1px solid var(--lj-neutral-border-soft) !important;
  border-top: 0 !important;
  border-radius: 0 0 2px 2px !important;
  background: transparent !important;
  overflow: hidden !important;
}

.canvas-toolbar {
  border-bottom: 1px solid var(--lj-neutral-border-soft) !important;
  background: rgb(255 255 255 / 92%) !important;
  padding-right: 0 !important;
}

.canvas-toolbar__filter-btn,
.canvas-toolbar__btn,
.vue-flow__controls,
.lineage-center__hint {
  border: 1px solid var(--lj-neutral-border) !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.canvas-toolbar__actions .canvas-toolbar__btn,
.canvas-toolbar__btn-icon,
.canvas-toolbar__fs-icon {
  color: #425675 !important;
}

.canvas-toolbar__filter-btn:hover,
.canvas-toolbar__btn:hover,
.vue-flow__controls-button:hover {
  border-color: #c8ced8 !important;
  background: #edf3ff !important;
  color: var(--lj-primary) !important;
}

.canvas-toolbar__dropdown {
  border: 1px solid var(--lj-neutral-border) !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vue-flow__controls-button {
  border-bottom-color: var(--lj-neutral-border-soft) !important;
}

.canvas-toolbar__option,
.canvas-toolbar__option--active {
  border-radius: 2px !important;
}

.wf,
.wf__flow {
  background: linear-gradient(135deg, #eef3fb 0%, #e4ebf6 52%, #f4f7fb 100%) !important;
}

.wf__flow::before {
  background-image: radial-gradient(
    circle,
    var(--lj-canvas-dot) 0 1.25px,
    transparent 1.35px
  ) !important;
  background-size: 16px 16px !important;
}

.flow-overlay {
  background-image: none !important;
}

.flow-node,
.flow-node--branch,
.flow-node--view,
.flow-node--result,
.flow-node--data {
  border: 1px solid #ffffff !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.flow-node:hover {
  border-color: #ffffff !important;
  background: var(--lj-blue-glass-node) !important;
  box-shadow: none !important;
}

.flow-node--selected {
  border-color: var(--accent, var(--lj-primary)) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px var(--accent, var(--lj-primary)) !important;
}

.flow-node--compact {
  border-radius: 2px !important;
}

.flow-node__icon,
.flow-node__phase,
.flow-node__source,
.flow-node__branch-btn,
.flow-node__branch-count,
.flow-node__group-mark,
.flow-node__group-card-mark {
  border-radius: 2px !important;
}

.flow-node__sql,
.flow-node__code-rows,
.flow-node__table-wrap,
.flow-node__branch-btn,
.flow-node__group-card,
.chart-panel,
.info-box,
.sub-intent,
.metric-card {
  border: 1px solid #ffffff !important;
  border-radius: 2px !important;
  background: #f8faff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.intent-module {
  border: 1px solid #ffffff !important;
  border-radius: 2px !important;
  background: #f5f8ff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sub-intent--clickable:hover,
.sub-intent--active {
  border-color: #9ab8f5 !important;
  background: #edf3ff !important;
  box-shadow: none !important;
}

.sub-intent__chip,
.sub-intent__cap {
  border-radius: 2px !important;
}

.vue-flow__edge-path {
  stroke: var(--lj-edge-dark) !important;
  stroke-width: 1.4px !important;
}

.vue-flow__edge.selected .vue-flow__edge-path,
.vue-flow__edge.animated .vue-flow__edge-path,
.vue-flow__edge:focus .vue-flow__edge-path,
.vue-flow__edge:focus-visible .vue-flow__edge-path,
.vue-flow__edge.updating .vue-flow__edge-path {
  stroke: var(--lj-edge-blue) !important;
}

.vue-flow__edge.inactive .vue-flow__edge-path,
.vue-flow__connection-path {
  stroke: var(--lj-edge-light) !important;
}

.flow-edge-badge {
  border: 1px solid #c4baff !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: #6f58df !important;
  box-shadow: none !important;
}

.flow-edge-badge:hover {
  border-color: #8068f2 !important;
  background: #f4f1ff !important;
  color: #5f49cf !important;
}

.vue-flow__controls {
  overflow: hidden !important;
}

.vue-flow__controls-button {
  border-bottom: 1px solid #dce7f8 !important;
}

.wf-drawer {
  top: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  border-radius: 8px !important;
}

.wf-drawer .panel-shell {
  border: 1px solid rgb(255 255 255 / 82%) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: var(--lj-shadow-overlay) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.wf-drawer .panel-shell__header,
.wf-drawer .panel-shell__body {
  background: #ffffff !important;
}

.wf-drawer .panel-shell__header {
  border-bottom: 1px solid rgb(255 255 255 / 58%) !important;
}

.wf-drawer .panel-shell__tag,
.wf-drawer .panel-shell__close {
  border-radius: 2px !important;
}

/* The planning sidebar is information hierarchy, not a stack of node cards. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__header {
  padding: 18px 18px 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body {
  gap: 0 !important;
  padding: 4px 18px 18px !important;
  background: transparent !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .info-box {
  padding: 0 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .intent-module {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent {
  gap: 10px !important;
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e6edf8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent--active {
  margin: 2px 0 !important;
  padding: 12px !important;
  border: 1px solid #9bbaf7 !important;
  border-left: 3px solid var(--lj-primary) !important;
  border-radius: 2px !important;
  background: #edf3ff !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent__cap {
  border: 0 !important;
  background: #f0f4fb !important;
}

/* Blue glass material hierarchy: square geometry, translucent surfaces. */
:root {
  --lj-blue-glass-node: rgb(255 255 255 / 58%);
  --lj-blue-glass-module: rgb(247 251 255 / 42%);
  --lj-blue-glass-info: rgb(255 255 255 / 48%);
  --lj-blue-glass-overlay: rgb(255 255 255 / 72%);
  --lj-blue-blur-info: saturate(112%) blur(12px);
  --lj-blue-blur-card: saturate(118%) blur(18px);
  --lj-blue-blur-module: saturate(122%) blur(20px);
  --lj-blue-blur-overlay: saturate(130%) blur(32px);
}

.flow-node,
.flow-node--view,
.flow-node--result,
.flow-node--data {
  background: var(--lj-blue-glass-node) !important;
  backdrop-filter: var(--lj-blue-blur-card) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-card) !important;
}

.flow-node--branch,
.intent-module {
  background: var(--lj-blue-glass-module) !important;
  backdrop-filter: var(--lj-blue-blur-module) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-module) !important;
}

.flow-node__sql,
.flow-node__code-rows,
.flow-node__table-wrap,
.flow-node__branch-btn,
.flow-node__group-card,
.chart-panel,
.info-box,
.sub-intent,
.metric-card {
  background: var(--lj-blue-glass-info) !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .info-box,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent--active {
  background: var(--lj-blue-glass-info) !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

.top-bar__query,
.canvas-toolbar__filter-btn,
.canvas-toolbar__btn,
.vue-flow__controls,
.lineage-center__hint {
  background: var(--lj-blue-glass-info) !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

.wf-drawer .panel-shell,
.canvas-toolbar__dropdown {
  background: var(--lj-blue-glass-overlay) !important;
  backdrop-filter: var(--lj-blue-blur-overlay) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-overlay) !important;
}

/* Planning rules stay as cards; transparency, not missing chrome, sets hierarchy. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body {
  align-items: center !important;
  gap: 8px !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .intent-module {
  width: 100% !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent + .sub-intent {
  width: calc(100% - 4px) !important;
  margin: 0 auto !important;
  padding: 12px !important;
  border: 1px solid rgb(255 255 255 / 72%) !important;
  border-bottom: 1px solid rgb(255 255 255 / 72%) !important;
  border-radius: 2px !important;
  background: rgb(255 255 255 / 22%) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent--active {
  margin: 0 auto !important;
  padding: 12px !important;
  border: 1px solid var(--lj-rule-accent, var(--lj-primary)) !important;
  border-left: 1px solid var(--lj-rule-accent, var(--lj-primary)) !important;
  border-radius: 2px !important;
  background: var(--lj-rule-active-bg, rgb(255 255 255 / 58%)) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blue-blur-card) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-card) !important;
}

/* Task cards use semantic accents rather than one repeated blue outline. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent {
  --lj-rule-accent: #2860ed;
  --lj-rule-border: rgb(40 96 237 / 34%);
  --lj-rule-bg: rgb(40 96 237 / 7%);
  --lj-rule-active-bg: rgb(40 96 237 / 16%);
  border-color: var(--lj-rule-border) !important;
  background: var(--lj-rule-bg) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent:nth-of-type(2) {
  --lj-rule-accent: #f09a2c;
  --lj-rule-border: rgb(240 154 44 / 36%);
  --lj-rule-bg: rgb(240 154 44 / 7%);
  --lj-rule-active-bg: rgb(240 154 44 / 16%);
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent:nth-of-type(3) {
  --lj-rule-accent: #8467f5;
  --lj-rule-border: rgb(132 103 245 / 35%);
  --lj-rule-bg: rgb(132 103 245 / 7%);
  --lj-rule-active-bg: rgb(132 103 245 / 15%);
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent:nth-of-type(4) {
  --lj-rule-accent: #45b888;
  --lj-rule-border: rgb(69 184 136 / 36%);
  --lj-rule-bg: rgb(69 184 136 / 7%);
  --lj-rule-active-bg: rgb(69 184 136 / 15%);
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent:nth-of-type(5) {
  --lj-rule-accent: #ef6c9f;
  --lj-rule-border: rgb(239 108 159 / 36%);
  --lj-rule-bg: rgb(239 108 159 / 7%);
  --lj-rule-active-bg: rgb(239 108 159 / 15%);
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent__chip {
  background: color-mix(in srgb, var(--lj-rule-accent) 14%, #ffffff) !important;
  color: var(--lj-rule-accent) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent.sub-intent--active {
  border-color: var(--lj-rule-accent) !important;
  background: var(--lj-rule-active-bg) !important;
}

/* Keep the task planner as one blue module, with one shared horizontal rhythm. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__header,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent + .sub-intent {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --lj-rule-accent: #2860ed !important;
  --lj-rule-border: rgb(255 255 255 / 76%) !important;
  --lj-rule-bg: rgb(255 255 255 / 20%) !important;
  --lj-rule-active-bg: rgb(40 96 237 / 16%) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent__chip {
  background: #edf3ff !important;
  color: #2860ed !important;
}

/* V2 refinement: use the original task-planning card hierarchy, not the V2 rule list. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) {
  border: 1px solid rgb(255 255 255 / 72%) !important;
  border-radius: 8px !important;
  background: rgb(255 255 255 / 28%) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blue-blur-module) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-module) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__header {
  padding: 18px 18px 10px !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body {
  align-items: stretch !important;
  gap: 0 !important;
  padding: 4px 18px 18px !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .info-box {
  padding: 10px 12px !important;
  border: 1px solid rgb(255 255 255 / 72%) !important;
  border-radius: 8px !important;
  background: var(--lj-blue-glass-info) !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .intent-module {
  margin: 0 0 1px !important;
  border: 1px solid rgb(255 255 255 / 72%) !important;
  border-radius: 8px !important;
  background: var(--lj-blue-glass-module) !important;
  backdrop-filter: var(--lj-blue-blur-module) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-module) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent + .sub-intent {
  width: auto !important;
  margin: 0 !important;
  padding: 11px 12px 12px !important;
  border: 1px solid rgb(255 255 255 / 78%) !important;
  border-radius: 8px !important;
  background: var(--lj-blue-glass-info) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent + .sub-intent {
  margin-top: 10px !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent--active {
  border-color: var(--lj-primary) !important;
  background: rgb(255 255 255 / 66%) !important;
  box-shadow: 0 0 0 2px rgb(40 96 237 / 10%) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent__chip,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent__cap {
  border-radius: 8px !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent--active .sub-intent__chip {
  background: var(--lj-primary) !important;
  color: #ffffff !important;
}

/* Graph cards are softened to 8px; controls stay compact and square. */
.flow-node,
.flow-node--branch,
.flow-node--view,
.flow-node--result,
.flow-node--data,
.flow-node--compact,
.flow-node__sql,
.flow-node__code-rows,
.flow-node__table-wrap,
.flow-node__group-card,
.chart-panel,
.info-box,
.metric-card,
.intent-module,
.flow-edge-badge {
  border-radius: 8px !important;
}

.flow-node__icon,
.flow-node__phase,
.flow-node__source,
.flow-node__branch-btn,
.flow-node__branch-count,
.flow-node__group-mark,
.flow-node__group-card-mark {
  border-radius: 8px !important;
}

/* "All nodes" is a filter label, not a filled button. */
.canvas-toolbar__filter-btn,
.canvas-toolbar__filter-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.canvas-toolbar {
  background: transparent !important;
}

/* Planning panel: three information modules breathe independently. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body > .info-box + .info-box,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body > .info-box + .intent-module,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body > .intent-module + .info-box,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body > .intent-module + .intent-module {
  margin-top: 20px !important;
}

/* The panel renders each primary section through a wrapper, so space wrappers directly. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .panel-shell__body > * + * {
  margin-top: 20px !important;
}

/* The five planning cards sit directly on the panel, without a second white wrapper. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .intent-module {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .sub-intent + .sub-intent {
  margin-top: 12px !important;
}

/* Task planning has no group fill: only its five individual cards carry material. */
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .info-box:has(.intent-module) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .info-box:has(.intent-module) .sub-intent,
.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .info-box:has(.intent-module) .sub-intent + .sub-intent {
  background: rgb(255 255 255 / 60%) !important;
}

.lineage-page .panel-shell:not(.wf-drawer .panel-shell) .info-box:has(.intent-module) .sub-intent--active {
  background: #ffffff !important;
}

/* Parsing labels are connection actions, so retain the legacy black treatment. */
.flow-edge-badge,
.flow-edge-badge:hover {
  border-color: var(--lj-action-bg) !important;
  background: var(--lj-action-bg) !important;
  color: #ffffff !important;
}

/* The canvas owns the whole workspace; the plan becomes a floating side panel. */
.lineage-body {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
}

.lineage-center {
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
}

.lineage-page .panel-shell.plan-sidebar {
  position: absolute !important;
  z-index: 14 !important;
  top: 16px !important;
  bottom: 28px !important;
  left: 0 !important;
  width: min(344px, calc(100% - 72px)) !important;
  overflow: auto !important;
  border-right: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  background: rgb(255 255 255 / 42%) !important;
  backdrop-filter: var(--lj-blue-blur-module) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-module) !important;
  transition: transform 220ms ease, opacity 180ms ease !important;
}

.lineage-page .panel-shell.plan-sidebar.plan-sidebar--collapsed {
  transform: translateX(calc(-100% - 28px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.plan-sidebar-toggle {
  position: absolute;
  z-index: 15;
  top: 20px;
  left: 330px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 92%);
  border-radius: 8px;
  background: rgb(255 255 255 / 42%);
  color: #1d2125;
  box-shadow: none;
  backdrop-filter: var(--lj-blue-blur-info);
  -webkit-backdrop-filter: var(--lj-blue-blur-info);
  transition: left 220ms ease, background 160ms ease;
}

.plan-sidebar-toggle:hover {
  background: rgb(255 255 255 / 66%);
}

.plan-sidebar-toggle i {
  font-size: 17px;
  line-height: 1;
}

.lineage-body.plan-sidebar-is-collapsed .plan-sidebar-toggle {
  left: 0;
}

/* Keep the node filter with its dropdown on the canvas's left; viewport tools stay right. */
.canvas-toolbar {
  position: absolute !important;
  z-index: 10 !important;
  top: 16px !important;
  right: 19px !important;
  left: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.canvas-toolbar__filter {
  position: fixed !important;
  z-index: 12 !important;
  top: 16px !important;
  left: 364px !important;
}

.lineage-body.plan-sidebar-is-collapsed .canvas-toolbar__filter {
  left: 16px !important;
}

.canvas-toolbar__filter-btn,
.canvas-toolbar__btn,
.vue-flow__controls {
  border-color: #ffffff !important;
  background: rgb(255 255 255 / 42%) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

.canvas-toolbar__filter-btn:hover,
.canvas-toolbar__btn:hover,
.vue-flow__controls-button:hover {
  background: rgb(255 255 255 / 66%) !important;
}

/* Query prompt: a single 60% glass content layer with a clean white outline. */
.top-bar__query {
  border-color: var(--lj-white-100) !important;
  background: var(--lj-white-60) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

/* Planning is five independent cards, never a second filled container. */
.lineage-page .panel-shell.plan-sidebar .info-box:has(.intent-module),
.lineage-page .panel-shell.plan-sidebar .intent-module {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lineage-page .panel-shell.plan-sidebar .intent-module .sub-intent,
.lineage-page .panel-shell.plan-sidebar .intent-module .sub-intent + .sub-intent {
  --lj-rule-accent: var(--lj-primary) !important;
  margin: 0 !important;
  padding: 11px 12px 12px !important;
  border: 1px solid var(--lj-white-100) !important;
  border-radius: 8px !important;
  background: var(--lj-white-60) !important;
  box-shadow: none !important;
  backdrop-filter: var(--lj-blue-blur-info) !important;
  -webkit-backdrop-filter: var(--lj-blue-blur-info) !important;
}

.lineage-page .panel-shell.plan-sidebar .intent-module .sub-intent + .sub-intent {
  margin-top: 12px !important;
}

.lineage-page .panel-shell.plan-sidebar .intent-module .sub-intent--active {
  border-color: var(--lj-primary) !important;
  background: var(--lj-white-100) !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell.plan-sidebar .intent-module .sub-intent__chip,
.lineage-page .panel-shell.plan-sidebar .intent-module .sub-intent__cap {
  background: var(--lj-primary-light) !important;
  color: var(--lj-primary) !important;
}

.lineage-page .panel-shell.plan-sidebar .intent-module .sub-intent--active .sub-intent__chip {
  background: var(--lj-primary) !important;
  color: var(--lj-white-100) !important;
}

/* The sidebar toggle belongs in the planning module header, not outside its edge. */
.lineage-page .panel-shell.plan-sidebar .panel-shell__header {
  position: relative !important;
}

.lineage-page .panel-shell.plan-sidebar .plan-sidebar-toggle {
  position: absolute !important;
  z-index: 2 !important;
  top: 14px !important;
  right: 18px !important;
  left: auto !important;
}

.lineage-page .panel-shell.plan-sidebar.plan-sidebar--collapsed {
  width: 50px !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

.lineage-page .panel-shell.plan-sidebar.plan-sidebar--collapsed .panel-shell__header {
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
}

.lineage-page .panel-shell.plan-sidebar.plan-sidebar--collapsed .panel-shell__header > :not(.plan-sidebar-toggle),
.lineage-page .panel-shell.plan-sidebar.plan-sidebar--collapsed .panel-shell__body {
  display: none !important;
}

.lineage-page .panel-shell.plan-sidebar.plan-sidebar--collapsed .plan-sidebar-toggle {
  top: 10px !important;
  right: 8px !important;
}

/* Script-marked task layers remove every inherited group surface. */
.lineage-page .panel-shell.plan-sidebar .task-cards-layer {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent,
.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent + .sub-intent {
  --lj-rule-accent: var(--lj-primary) !important;
  --lj-rule-border: var(--lj-white-100) !important;
  --lj-rule-bg: var(--lj-white-60) !important;
  --lj-rule-active-bg: var(--lj-white-100) !important;
  margin: 0 !important;
  padding: 11px 12px 12px !important;
  border: 1px solid var(--lj-white-100) !important;
  border-radius: 8px !important;
  background: var(--lj-white-60) !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent--clickable:hover:not(.sub-intent--active) {
  border-color: var(--lj-white-100) !important;
  background: var(--lj-white-80) !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent--clickable:active:not(.sub-intent--active) {
  border-color: var(--lj-white-100) !important;
  background: var(--lj-white-80) !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent + .sub-intent {
  margin-top: 12px !important;
}

.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent--active {
  border-color: var(--lj-primary) !important;
  background: var(--lj-white-100) !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent__chip,
.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent__cap {
  background: var(--lj-primary-light) !important;
  color: var(--lj-primary) !important;
}

.lineage-page .panel-shell.plan-sidebar .task-cards-layer .sub-intent--active .sub-intent__chip {
  background: var(--lj-primary) !important;
  color: var(--lj-white-100) !important;
}

/* Keep the node selector with the other canvas controls on the right. */
.canvas-toolbar__filter,
.lineage-body.plan-sidebar-is-collapsed .canvas-toolbar__filter {
  position: relative !important;
  z-index: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

/* A neutral grey canvas lets the white glass cards carry the visual hierarchy. */
.wf,
.wf__flow {
  background: linear-gradient(135deg, #f4f6f8 0%, #e9edf2 52%, #f7f8fa 100%) !important;
}

.wf__flow::before {
  --lj-canvas-dot: rgb(112 125 143 / 16%);
}

/* Reserve real layout space so auto-fit nodes never start beneath the planning sidebar. */
.lineage-body .lineage-center {
  transition: margin-left 220ms ease !important;
}

.lineage-body:not(.plan-sidebar-is-collapsed) .lineage-center {
  margin-left: 344px !important;
}

.lineage-body.plan-sidebar-is-collapsed .lineage-center {
  margin-left: 50px !important;
}

/* Planning sidebar material: 60% white, full white outline, 20px blur. */
.lineage-page .panel-shell.plan-sidebar {
  border: 1px solid var(--lj-white-100) !important;
  background: var(--lj-white-60) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(120%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(20px) !important;
}

/* Selection belongs to the card itself; do not depend on wrapper detection. */
.lineage-page .panel-shell.plan-sidebar .sub-intent.sub-intent--active {
  border: 1px solid var(--lj-primary) !important;
  background: var(--lj-white-100) !important;
  box-shadow: none !important;
}

.lineage-page .panel-shell.plan-sidebar .sub-intent.sub-intent--active .sub-intent__chip {
  background: var(--lj-primary) !important;
  color: var(--lj-white-100) !important;
}

@media (max-width: 760px) {
  .lineage-page .panel-shell.plan-sidebar {
    width: min(320px, calc(100% - 40px)) !important;
  }

  .plan-sidebar-toggle {
    left: min(306px, calc(100% - 34px));
  }

  .lineage-body:not(.plan-sidebar-is-collapsed) .lineage-center {
    margin-left: min(332px, calc(100% - 28px)) !important;
  }

}