/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --bg: #f6f4f1;
  --bg-2: #efece7;
  --dot: #d7d1c8;
  --panel: #fffdfa;
  --panel-2: #faf8f4;
  --ink: #1c1917;
  --muted: #78716c;
  --faint: #a8a29e;
  --line: rgba(28,25,23,.085);
  --line-2: rgba(28,25,23,.16);
  --shadow-sm: 0 1px 2px rgba(28,25,23,.05);
  --shadow: 0 1px 2px rgba(28,25,23,.05), 0 12px 30px -18px rgba(28,25,23,.30);
  --shadow-lg:
    0 2px 6px rgba(28,25,23,.06), 0 28px 60px -24px rgba(28,25,23,.34);
  --spring: cubic-bezier(.2,1.15,.3,1);
  --ease: cubic-bezier(.22,.61,.36,1);

  --c-trigger: #10b981;
  --c-logic: #8b5cf6;
  --c-transform: #f59e0b;
  --c-action: #0ea5e9;
  --c-ai: #ec4899;

  --topbar-h: 58px;
  --pal-w: 274px;
  --insp-w: 356px;
  --node-w: 250px;
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  letter-spacing: -0.005em;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
::selection {
  background: rgba(139, 92, 246, 0.18);
}

.mono {
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: -0.02em;
}

/* ============================================================
   LAYOUT
   ============================================================ */
#app {
  height: 100%;
  display: grid;
  grid-template-columns: var(--pal-w) 1fr 0px;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  overflow: hidden;
  transition: grid-template-columns 0.28s var(--spring);
}
#app.inspector-open {
  grid-template-columns: var(--pal-w) 1fr var(--insp-w);
}

/* ---------- topbar ---------- */
#topbar {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 40;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(var(--pal-w) - 32px);
}
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #1c1917, #3f3a35);
  color: #fff;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 6px rgba(28, 25, 23, 0.22);
}
.brand-name {
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: 13.5px;
}
.brand-tag {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 2px 5px;
}
.flow-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.flow-name input {
  border: none;
  background: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.02em;
  padding: 5px 7px;
  border-radius: 7px;
  min-width: 80px;
  max-width: 360px;
  width: auto;
  field-sizing: content;
  outline: none;
}
.flow-name input:hover {
  background: var(--panel-2);
}
.flow-name input:focus {
  background: #fff;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 0 0 4px rgba(139, 92, 246, 0.1);
}
.flow-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-trigger);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 99px;
  padding: 3px 8px;
  flex: 0 0 auto;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  transition:
    background 0.14s var(--ease),
    color 0.14s var(--ease),
    transform 0.14s var(--spring);
}
.tbtn:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.tbtn:active {
  transform: scale(0.97);
}
.tbtn svg {
  opacity: 0.75;
}
.tbtn.primary {
  background: var(--ink);
  color: #fff;
  padding: 0 12px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.25);
}
.tbtn.primary svg {
  opacity: 1;
}
.tbtn.primary:hover {
  background: #332e2a;
  color: #fff;
}
.vsep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 5px;
}

/* ---------- palette ---------- */
#palette {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  z-index: 30;
}
.pal-head {
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pal-title {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.pal-sub {
  font-size: 10.5px;
  color: var(--faint);
}
.pal-searchwrap {
  padding: 0 12px 10px;
  position: relative;
}
.pal-search {
  width: 100%;
  height: 33px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 0 10px 0 30px;
  font-size: 12.5px;
  outline: none;
  transition:
    box-shadow 0.16s var(--ease),
    border-color 0.16s var(--ease),
    background 0.16s var(--ease);
}
.pal-search::placeholder {
  color: var(--faint);
}
.pal-search:focus {
  background: #fff;
  border-color: rgba(139, 92, 246, 0.42);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}
.pal-searchicon {
  position: absolute;
  left: 22px;
  top: 9px;
  color: var(--faint);
  pointer-events: none;
}
.pal-searchwrap kbd {
  position: absolute;
  right: 21px;
  top: 8px;
  font-family: inherit;
  font-size: 10px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--panel);
}
#palList {
  overflow-x: hidden;
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 24px;
  scrollbar-width: thin;
}
#palList::-webkit-scrollbar {
  width: 8px;
}
#palList::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.14);
  border-radius: 99px;
  border: 2px solid var(--panel);
}
.pal-cat {
  margin-top: 14px;
}
.pal-cat:first-child {
  margin-top: 2px;
}
.pal-cathead {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.14s var(--ease);
}
.pal-cathead:hover {
  color: var(--muted);
}
.pal-cathead .chev {
  margin-left: auto;
  transition: transform 0.22s var(--spring);
  opacity: 0.6;
}
.pal-cat.closed .chev {
  transform: rotate(-90deg);
}
.pal-cat.closed .pal-grid {
  display: none;
}
.pal-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  flex: 0 0 auto;
}
.pal-count {
  margin-left: 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--faint);
  background: var(--panel-2);
  border-radius: 99px;
  padding: 1px 5px;
  letter-spacing: 0;
}
.pal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 6px 0 2px;
}
.pal-card {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  width: 100%;
  gap: 7px;
  padding: 8px 7px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: left;
  transition:
    transform 0.18s var(--spring),
    box-shadow 0.18s var(--ease),
    border-color 0.18s var(--ease),
    background 0.18s var(--ease);
  cursor: grab;
  user-select: none;
}
.pal-card:hover {
  transform: translateY(-1.5px);
  box-shadow: var(--shadow);
  border-color: var(--line-2);
  background: #fff;
}
.pal-card:active {
  cursor: grabbing;
  transform: scale(0.98);
}
.pal-card .pico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--ac) 12%, #fff);
  color: var(--ac);
  border: 1px solid color-mix(in srgb, var(--ac) 18%, #fff);
}
.pal-card .plabel {
  font-size: 11px;
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pal-empty {
  padding: 20px 6px;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}
.pal-foot {
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--faint);
  background: var(--panel);
}

/* ---------- canvas ---------- */
#canvas {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  touch-action: none;
  grid-row: 2;
  grid-column: 2;
  min-width: 0;
  min-height: 0;
}
#grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0),
    radial-gradient(
      circle at 1px 1px,
      rgba(28, 25, 23, 0.1) 1.4px,
      transparent 0
    );
  background-size:
    22px 22px,
    110px 110px;
  background-position:
    0 0,
    0 0;
  opacity: 0.85;
}
#canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 40%,
    transparent 60%,
    rgba(120, 113, 108, 0.05) 100%
  );
}
#world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
#wires {
  position: absolute;
  left: -6000px;
  top: -6000px;
  width: 12000px;
  height: 12000px;
  overflow: visible;
  pointer-events: none;
}
#wires .hit {
  pointer-events: stroke;
  stroke: transparent;
  stroke-width: 20;
  fill: none;
  cursor: pointer;
}
.wire {
  fill: none;
  stroke-linecap: round;
  transition:
    opacity 0.18s var(--ease),
    stroke-width 0.18s var(--ease);
}
.wire-halo {
  fill: none;
  stroke: var(--panel);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.92;
}
.wire-sel {
  stroke-dasharray: 5 5;
  animation: ants 620ms linear infinite;
}
@keyframes ants {
  to {
    stroke-dashoffset: -20;
  }
}
#edgeLabels {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.epill {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 99px;
  padding: 2.5px 8px 2.5px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition:
    transform 0.16s var(--spring),
    box-shadow 0.16s var(--ease),
    color 0.16s var(--ease);
}
.epill:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.epill .edot {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.85;
}
.epill.sel {
  border-color: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/* ---------- nodes ---------- */
#nodes {
  position: absolute;
  left: 0;
  top: 0;
}
.node {
  position: absolute;
  width: var(--node-w);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  cursor: grab;
  user-select: none;
  transition:
    box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease),
    opacity 0.18s var(--ease),
    filter 0.18s var(--ease);
}
@keyframes nodePop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.node:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--line-2);
}
.node.dragging {
  cursor: grabbing;
  box-shadow: 0 30px 60px -22px rgba(28, 25, 23, 0.4);
  z-index: 9;
}
.node.sel {
  border-color: color-mix(in srgb, var(--ac) 55%, #fff);
  box-shadow:
    0 0 0 2.5px color-mix(in srgb, var(--ac) 20%, transparent),
    var(--shadow);
}
.node.dep {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--ac) 30%, transparent),
    var(--shadow-lg);
}
/* Hover never dims other nodes: it only adds a highlight to descendants. */
.node.warn .nd-head .wdot {
  opacity: 1;
  background: var(--c-transform);
}
.node.fresh {
  animation: nodePop 0.28s var(--spring) both;
}

.nd-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px 8px;
}
.nd-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--ac) 12%, #fff);
  color: var(--ac);
  border: 1px solid color-mix(in srgb, var(--ac) 20%, #fff);
  transition: transform 0.2s var(--spring);
}
.node:hover .nd-ico {
  transform: translateY(-0.5px) scale(1.04);
}
.nd-meta {
  min-width: 0;
  flex: 1;
  padding-top: 1px;
}
.nd-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nd-type {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 1.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wdot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--c-transform);
  opacity: 0;
  transition: opacity 0.2s;
  flex: 0 0 auto;
}
.nd-sum {
  padding: 0 12px 9px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nd-preview {
  margin: 0 8px 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ac) 6%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--ac) 12%, var(--line));
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.nd-preview .live {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--c-trigger);
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.nd-preview.stale .live {
  background: var(--c-transform);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}
.nd-preview .pv {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nd-preview .pv b {
  font-weight: 600;
  opacity: 1;
  color: var(--ac);
}

/* ports */
.port {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: var(--panel);
  border: 2.5px solid var(--ac);
  transform: translate(-50%, -50%);
  cursor: crosshair;
  z-index: 3;
  transition:
    transform 0.18s var(--spring),
    box-shadow 0.18s var(--ease),
    border-color 0.18s var(--ease),
    background 0.18s var(--ease),
    opacity 0.18s var(--ease);
}
.port::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 99px;
}
.port.in {
  top: 0;
}
.port.out {
  bottom: auto;
}
.port.req {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 10%, transparent);
}
.port:hover,
.port.hot {
  transform: translate(-50%, -50%) scale(1.45);
  background: var(--ac);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ac) 16%, transparent);
}
.port.compat {
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ac) 20%, transparent);
}
.port.dim {
  opacity: 0.22;
}
.port.filled {
  background: var(--ac);
}
.port-tip {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%) translateY(-8px);
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s var(--ease);
  z-index: 20;
}
.port:hover .port-tip {
  opacity: 1;
}

/* ---------- hud ---------- */
#hud {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 4px;
  box-shadow: var(--shadow);
  z-index: 20;
}
.hud-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition:
    background 0.14s var(--ease),
    color 0.14s var(--ease),
    transform 0.14s var(--spring);
}
.hud-btn:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.hud-btn:active {
  transform: scale(0.92);
}
.hud-zoom {
  min-width: 44px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#minimap {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 190px;
  height: 118px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 20;
  overflow: hidden;
  backdrop-filter: blur(8px);
  cursor: pointer;
}
#minimap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
#minimap .mm-label {
  position: absolute;
  left: 8px;
  top: 6px;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
}

#empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--spring);
}
#empty.hidden {
  opacity: 0;
  transform: translate(-50%, -46%);
  pointer-events: none;
}
#empty .eico {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--line-2);
  color: var(--faint);
  background: rgba(255, 253, 250, 0.5);
}
#empty .etitle {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
#empty .esub {
  font-size: 12px;
  color: var(--muted);
  max-width: 300px;
  text-align: center;
  line-height: 1.45;
}

/* marquee */
#marquee {
  position: absolute;
  border: 1px solid rgba(139, 92, 246, 0.6);
  background: rgba(139, 92, 246, 0.08);
  border-radius: 4px;
  pointer-events: none;
  z-index: 12;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

/* diameter ghost / drag preview */
#ghost {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg) scale(1.03);
  pointer-events: none;
  z-index: 999;
  font-size: 11.5px;
  font-weight: 550;
  animation: ghostIn 0.16s var(--spring);
}
@keyframes ghostIn {
  from {
    opacity: 0;
    transform: rotate(-3deg) scale(0.94);
  }
  to {
    opacity: 1;
    transform: rotate(-1.5deg) scale(1.03);
  }
}
#ripple {
  position: absolute;
  border-radius: 99px;
  border: 2px solid var(--ac);
  pointer-events: none;
  animation: ripple 0.55s var(--ease) forwards;
}
@keyframes ripple {
  from {
    width: 8px;
    height: 8px;
    opacity: 0.55;
    transform: translate(-50%, -50%);
  }
  to {
    width: 170px;
    height: 170px;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}

/* ============================================================
   INSPECTOR
   ============================================================ */
#inspector {
  grid-row: 2;
  grid-column: 3;
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  z-index: 30;
}
#inspector .insp-inner {
  min-width: var(--insp-w);
  display: flex;
  flex-direction: column;
  height: 100%;
}
#inspHead {
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.insp-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}
.insp-kicker .k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.insp-kicker .spacer {
  flex: 1;
}
.icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--faint);
  transition:
    background 0.14s var(--ease),
    color 0.14s var(--ease),
    transform 0.14s var(--spring);
}
.icon-btn:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.icon-btn:active {
  transform: scale(0.92);
}
.insp-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.insp-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--ac) 12%, #fff);
  color: var(--ac);
  border: 1px solid color-mix(in srgb, var(--ac) 20%, #fff);
}
.insp-title {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  padding: 3px 5px;
  border-radius: 6px;
}
.insp-title:hover {
  background: var(--panel-2);
}
.insp-title:focus {
  background: #fff;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 0 0 4px rgba(139, 92, 246, 0.09);
}
.insp-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-left: 2px;
}
.tag {
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2.5px 6px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.tag.cat {
  background: color-mix(in srgb, var(--ac) 10%, #fff);
  color: var(--ac);
  border-color: color-mix(in srgb, var(--ac) 18%, #fff);
}
.tag.dim {
  background: var(--panel-2);
  color: var(--faint);
  border-color: var(--line);
}
#inspBody {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 40px;
  scrollbar-width: thin;
}
#inspBody::-webkit-scrollbar {
  width: 9px;
}
#inspBody::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.13);
  border-radius: 99px;
  border: 3px solid var(--panel);
}

.section {
  border-bottom: 1px solid var(--line);
  padding: 13px 14px 15px;
}
.section:last-child {
  border-bottom: none;
}
.section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--faint);
}
.section-head .spacer {
  flex: 1;
}
.mini-btn {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition:
    background 0.14s var(--ease),
    color 0.14s var(--ease),
    border-color 0.14s var(--ease);
}
.mini-btn:hover {
  background: var(--panel-2);
  color: var(--ink);
  border-color: var(--line-2);
}

.field {
  margin-bottom: 11px;
}
.field:last-child {
  margin-bottom: 0;
}
.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 550;
  color: var(--muted);
  margin-bottom: 5px;
}
.field-label .req-ast {
  color: var(--c-transform);
}
.ctl {
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  padding: 0 9px;
  font-size: 12px;
  outline: none;
  transition:
    box-shadow 0.16s var(--ease),
    border-color 0.16s var(--ease),
    background 0.16s var(--ease);
}
.ctl:hover {
  background: #fff;
}
.ctl:focus {
  background: #fff;
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}
textarea.ctl {
  height: auto;
  min-height: 70px;
  padding: 8px 9px;
  resize: vertical;
  line-height: 1.45;
}
textarea.ctl.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: -0.02em;
}
select.ctl {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 26px;
  cursor: pointer;
}
.ctl.invalid {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
}
.field-hint {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 4px;
  line-height: 1.35;
}
.field-hint.err {
  color: #dc2626;
}

/* toggle */
.tog {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.tog-track {
  width: 34px;
  height: 20px;
  border-radius: 99px;
  background: #ded8d0;
  position: relative;
  transition: background 0.2s var(--ease);
  flex: 0 0 auto;
}
.tog-track::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.28);
  transition: transform 0.22s var(--spring);
}
.tog.on .tog-track {
  background: var(--c-trigger);
}
.tog.on .tog-track::after {
  transform: translateX(14px);
}
.tog-label {
  font-size: 11.5px;
  color: var(--muted);
}

/* chip field */
.cf {
  position: relative;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  border-radius: 8px;
  min-height: 32px;
  padding: 5px 30px 5px 8px;
  font-size: 11.5px;
  line-height: 1.7;
  cursor: text;
  transition:
    box-shadow 0.16s var(--ease),
    border-color 0.16s var(--ease),
    background 0.16s var(--ease);
}
.cf:hover {
  background: #fff;
}
.cf.focus {
  background: #fff;
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}
.cf-view {
  min-height: 22px;
  word-break: break-word;
}
.cf-view .ph {
  color: var(--faint);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: baseline;
  background: color-mix(in srgb, var(--cc) 10%, #fff);
  color: color-mix(in srgb, var(--cc) 78%, #000 12%);
  border: 1px solid color-mix(in srgb, var(--cc) 24%, #fff);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 1px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.02em;
}
.chip.broken {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.25);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.chip .cd {
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.7;
}
.cf-input {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 5px 30px 5px 8px;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.02em;
  resize: none;
  display: none;
  line-height: 1.7;
}
.cf.focus .cf-input {
  display: block;
}
.cf.focus .cf-view {
  visibility: hidden;
}
.cf-add {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--faint);
  background: var(--panel);
  border: 1px solid var(--line);
  transition:
    color 0.14s,
    background 0.14s,
    transform 0.14s var(--spring);
}
.cf-add:hover {
  color: var(--ink);
  background: #fff;
  transform: scale(1.06);
}

/* picker popover */
.picker {
  position: fixed;
  z-index: 900;
  width: 262px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  box-shadow: var(--shadow-lg);
  padding: 5px;
  animation: popIn 0.16s var(--spring);
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.picker .pk-head {
  padding: 6px 8px 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 5px;
}
.picker .pk-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  text-align: left;
  transition: background 0.12s var(--ease);
}
.picker .pk-item:hover {
  background: var(--panel-2);
}
.picker .pk-item .pkf {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--muted);
  margin-left: auto;
  opacity: 0.8;
}
.picker .pk-empty {
  padding: 10px 8px;
  font-size: 11.5px;
  color: var(--faint);
}

/* rule rows */
.rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rule {
  display: grid;
  grid-template-columns: 1fr 1fr 24px;
  grid-template-areas: "field field del" "op value value";
  gap: 5px;
  align-items: center;
  animation: popIn 0.18s var(--spring);
}
.rule .r-field {
  grid-area: field;
}
.rule .r-op {
  grid-area: op;
}
.rule .r-val {
  grid-area: value;
}
.rule .r-del {
  grid-area: del;
}
.rule .ctl {
  height: 28px;
  font-size: 11px;
  padding: 0 7px;
  min-width: 0;
}
.rule .x {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--faint);
  transition:
    background 0.14s,
    color 0.14s;
}
.rule .x:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.rule-join {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 2px;
}
.rule-join .seg {
  display: flex;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px;
}
.rule-join .seg button {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--faint);
  padding: 2px 7px;
  border-radius: 4px;
  transition:
    background 0.14s,
    color 0.14s;
}
.rule-join .seg button.on {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.rule-join .ln {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* branches */
.branch {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  margin-bottom: 7px;
  transition:
    box-shadow 0.18s var(--ease),
    border-color 0.18s var(--ease);
  animation: popIn 0.2s var(--spring);
}
.branch:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.branch-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
}
.branch-sw {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.16s var(--spring);
}
.branch-sw:hover {
  transform: scale(1.15);
}
.branch-name {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 4px;
  border-radius: 5px;
}
.branch-name:hover {
  background: var(--panel-2);
}
.branch-name:focus {
  background: #fff;
  box-shadow: 0 0 0 1px var(--line-2);
}
.branch-cond {
  font-size: 9.5px;
  color: var(--faint);
  padding: 0 8px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.branch-cond b {
  color: var(--muted);
  font-weight: 600;
}
.branch-tools {
  display: flex;
  align-items: center;
  gap: 1px;
}
.branch-tools .icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}
.branch-rules {
  padding: 0 8px 8px;
  display: none;
}
.branch.open .branch-rules {
  display: block;
}
.else-branch {
  background: repeating-linear-gradient(
    135deg,
    rgba(28, 25, 23, 0.018) 0 6px,
    transparent 6px 12px
  );
  border-style: dashed;
}
.else-branch .branch-name {
  color: var(--muted);
  font-weight: 550;
}

/* inputs list */
.inp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  margin-bottom: 5px;
  transition:
    background 0.14s var(--ease),
    border-color 0.14s var(--ease);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.inp-row:hover {
  background: #fff;
  border-color: var(--line-2);
}
.inp-row.missing {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}
.inp-port {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  flex: 0 0 auto;
}
.inp-arrow {
  color: var(--faint);
  flex: 0 0 auto;
  opacity: 0.7;
}
.inp-src {
  font-size: 11.5px;
  font-weight: 550;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.inp-src.none {
  color: var(--c-transform);
  font-weight: 500;
}
.inp-src .pt {
  color: var(--faint);
  font-weight: 400;
  font-size: 10.5px;
}

/* empty inspector */
.insp-empty {
  padding: 44px 26px;
  text-align: center;
}
.insp-empty .ie-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--faint);
}
.insp-empty .ie-t {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.insp-empty .ie-s {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* menus */
.menu {
  position: fixed;
  z-index: 800;
  min-width: 230px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 5px;
  animation: popIn 0.16s var(--spring);
}
.menu .m-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border-radius: 7px;
  text-align: left;
  font-size: 12px;
  transition: background 0.12s var(--ease);
}
.menu .m-item:hover {
  background: var(--panel-2);
}
.menu .m-t {
  font-weight: 550;
}
.menu .m-s {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px;
}
.menu .m-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.menu .m-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}
.menu .m-head {
  padding: 6px 9px 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

/* toast */
#toast-wrap {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 950;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 11.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.24s var(--spring);
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.toast.out {
  animation: toastOut 0.2s var(--ease) forwards;
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
}
.toast .kbd {
  font-family: inherit;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 1px 5px;
}

/* inspector edge variant */
.edge-swatch {
  width: 100%;
  height: 52px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.edge-swatch svg {
  width: 100%;
  height: 100%;
}
.swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sw {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition:
    transform 0.16s var(--spring),
    box-shadow 0.16s var(--ease);
}
.sw:hover {
  transform: scale(1.12);
}
.sw.on {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px currentColor;
}

.danger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  color: #dc2626;
  background: rgba(239, 68, 68, 0.045);
  font-size: 11.5px;
  font-weight: 600;
  transition:
    background 0.14s,
    transform 0.14s var(--spring);
}
.danger-btn:hover {
  background: rgba(239, 68, 68, 0.09);
}
.danger-btn:active {
  transform: scale(0.985);
}

/* code peek */
.peek {
  background: #1c1917;
  color: #e7e5e4;
  border-radius: 9px;
  padding: 9px 10px;
  overflow: auto;
  max-height: 190px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: -0.02em;
  white-space: pre-wrap;
  word-break: break-word;
}
.peek .k {
  color: #a5b4fc;
}
.peek .s {
  color: #86efac;
}
.peek .n {
  color: #fcd34d;
}
.peek .b {
  color: #f9a8d4;
}
.peek .z {
  color: #94a3b8;
}

/* ============ alpine additions ============ */
.menu-anchor { position: relative; display: inline-flex; }
.menu.anchored { position: absolute; right: 0; top: calc(100% + 8px); left: auto; }
.picker.inline { position: absolute; left: 0; right: 0; top: calc(100% + 6px); width: auto; max-height: 264px; }
.cf { position: relative; }
.branch-add { width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 7px; }
.variant-weight { width: 62px; height: 26px; font-size: 11px; padding: 0 6px; text-align: center; }